:root{--bg-deep:#050d1a;--bg-dark:#0a1628;--bg-card:#0f1e38;--bg-card2:#152340;--blue-1:#1a3a6e;--blue-2:#1e4d9e;--blue-3:#2563eb;--blue-4:#3b82f6;--blue-5:#60a5fa;--cyan:#06b6d4;--cyan-light:#67e8f9;--text-main:#e2e8f0;--text-sub:#94a3b8;--text-muted:#64748b;--border:rgba(59,130,246,.2);--border-glow:rgba(59,130,246,.5);--danger:#ef4444;--success:#10b981;--warn:#f59e0b;--radius:12px;--radius-lg:20px;--shadow:0 4px 24px rgba(0,0,0,.5);--shadow-glow:0 0 32px rgba(59,130,246,.15);--trans:0.25s cubic-bezier(.4,0,.2,1)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Noto Sans JP',sans-serif;background:var(--bg-deep);color:var(--text-main);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(37,99,235,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(6,182,212,.08) 0%,transparent 50%)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--blue-2);border-radius:3px}#header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,13,26,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}.logo{font-family:'Orbitron',monospace;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--blue-4),var(--cyan-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.05em;cursor:pointer}.logo span{font-size:.7rem;font-family:'Noto Sans JP',sans-serif;font-weight:300;color:var(--text-sub);display:block;-webkit-text-fill-color:var(--text-sub)}.header-nav{display:flex;align-items:center;gap:8px}.btn{padding:8px 18px;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;border:none;transition:var(--trans);white-space:nowrap;font-family:'Noto Sans JP',sans-serif}.btn-ghost{background:transparent;color:var(--text-sub);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-card);color:var(--text-main);border-color:var(--border-glow)}.btn-primary{background:linear-gradient(135deg,var(--blue-3),var(--blue-2));color:#fff;box-shadow:0 0 16px rgba(37,99,235,.3)}.btn-primary:hover{background:linear-gradient(135deg,var(--blue-4),var(--blue-3));box-shadow:0 0 24px rgba(37,99,235,.5);transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626;transform:translateY(-1px)}.btn-success{background:var(--success);color:#fff}.btn-success:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.hamburger-wrap{position:relative}.hamburger-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;color:var(--text-main);display:flex;flex-direction:column;gap:4px;transition:var(--trans)}.hamburger-btn:hover{border-color:var(--border-glow)}.hamburger-btn span{display:block;width:20px;height:2px;background:var(--text-main);border-radius:1px;transition:var(--trans)}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);min-width:200px;overflow:hidden;box-shadow:var(--shadow);display:none;z-index:200}.dropdown-menu.open{display:block;animation:fadeDown 0.2s ease}@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;font-size:.9rem;color:var(--text-main);transition:var(--trans);border-bottom:1px solid var(--border)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:rgba(59,130,246,.1)}.dropdown-item .di-icon{font-size:1rem;width:20px;text-align:center}.dropdown-item.danger{color:var(--danger)}.dropdown-badge{margin-left:auto;background:var(--blue-3);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:20px}#main{padding-top:64px;min-height:100vh;display:flex;flex-direction:column}.hero{text-align:center;padding:60px 24px 40px;background:linear-gradient(180deg,rgba(37,99,235,.05) 0%,transparent 100%)}.hero h1{font-family:'Orbitron',monospace;font-size:clamp(1.8rem,5vw,3rem);font-weight:700;letter-spacing:.02em;background:linear-gradient(135deg,#fff 0%,var(--blue-5) 50%,var(--cyan-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}.hero p{color:var(--text-sub);font-size:1rem;max-width:600px;margin:0 auto;line-height:1.7}.hero-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}.badge{padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:500;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:var(--blue-5)}.badge.cyan{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3);color:var(--cyan-light)}.chat-container{max-width:860px;width:100%;margin:0 auto;padding:0 16px 100px;flex:1}.api-key-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;display:none}.api-key-panel.visible{display:block}.api-key-panel h3{font-size:.95rem;color:var(--text-main);margin-bottom:6px;display:flex;align-items:center;gap:8px}.api-key-panel p{font-size:.82rem;color:var(--text-sub);margin-bottom:12px}.api-key-panel a{color:var(--blue-5);text-decoration:none}.api-key-panel a:hover{text-decoration:underline}.chat-messages{display:flex;flex-direction:column;gap:20px;margin-bottom:20px;min-height:200px}.message{display:flex;gap:12px;animation:msgIn 0.3s ease}@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.message.user{flex-direction:row-reverse}.msg-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}.message.ai .msg-avatar{background:linear-gradient(135deg,var(--blue-3),var(--cyan))}.message.user .msg-avatar{background:linear-gradient(135deg,var(--blue-1),var(--blue-2))}.msg-content{max-width:80%;padding:14px 18px;border-radius:var(--radius);font-size:.9rem;line-height:1.75}.message.ai .msg-content{background:var(--bg-card);border:1px solid var(--border)}.message.user .msg-content{background:var(--blue-1);border:1px solid rgba(59,130,246,.3)}.msg-content p{margin-bottom:.7em}.msg-content p:last-child{margin-bottom:0}.msg-content strong{color:var(--blue-5)}.msg-content code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px;font-size:.85em}.msg-content pre{background:rgba(0,0,0,.3);padding:10px;border-radius:8px;overflow-x:auto;margin:8px 0}.msg-thinking{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.loading-dots{display:flex;gap:6px;padding:14px 18px}.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--blue-4);animation:pulse 1.2s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:0.2s}.loading-dots span:nth-child(3){animation-delay:0.4s}@keyframes pulse{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.input-panel{position:fixed;bottom:0;left:0;right:0;background:rgba(5,13,26,.95);backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:12px 16px}.input-inner{max-width:860px;margin:0 auto;display:flex;gap:10px;align-items:flex-end}.input-wrap{flex:1;position:relative}#userInput{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-main);font-size:.9rem;padding:12px 16px;min-height:52px;max-height:160px;resize:none;font-family:'Noto Sans JP',sans-serif;transition:var(--trans);outline:none;line-height:1.6}#userInput:focus{border-color:var(--blue-3);box-shadow:0 0 0 3px rgba(37,99,235,.15)}#userInput::placeholder{color:var(--text-muted)}#sendBtn{width:52px;height:52px;border-radius:var(--radius);flex-shrink:0;background:linear-gradient(135deg,var(--blue-3),var(--blue-2));border:none;cursor:pointer;color:#fff;font-size:1.2rem;transition:var(--trans);display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(37,99,235,.3)}#sendBtn:hover:not(:disabled){background:linear-gradient(135deg,var(--blue-4),var(--blue-3));transform:translateY(-1px)}#sendBtn:disabled{opacity:.5;cursor:not-allowed;transform:none}.input-info{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-top:4px}.usage-bar-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px}.usage-bar-header{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-sub);margin-bottom:8px}.usage-bar{height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden}.usage-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease;background:linear-gradient(90deg,var(--blue-3),var(--cyan))}.usage-bar-fill.warn{background:linear-gradient(90deg,var(--warn),#fbbf24)}.usage-bar-fill.danger{background:linear-gradient(90deg,var(--danger),#f87171)}.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity 0.25s}.modal-overlay.open{opacity:1;pointer-events:all}.modal-box{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;max-width:460px;width:100%;box-shadow:var(--shadow),var(--shadow-glow);transform:scale(.95);transition:transform 0.25s;max-height:90vh;overflow-y:auto}.modal-overlay.open .modal-box{transform:scale(1)}.modal-title{font-size:1.3rem;font-weight:700;margin-bottom:6px;background:linear-gradient(135deg,var(--text-main),var(--blue-5));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modal-subtitle{font-size:.85rem;color:var(--text-sub);margin-bottom:24px}.modal-close-btn{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.4rem;transition:var(--trans)}.modal-close-btn:hover{color:var(--text-main)}.form-group{margin-bottom:18px}.form-label{display:block;font-size:.82rem;color:var(--text-sub);margin-bottom:6px;font-weight:500}.form-input,.form-select,.form-textarea{width:100%;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text-main);font-size:.9rem;padding:11px 14px;transition:var(--trans);outline:none;font-family:'Noto Sans JP',sans-serif}.form-select{appearance:none;cursor:pointer}.form-textarea{resize:vertical;min-height:100px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-3);box-shadow:0 0 0 3px rgba(37,99,235,.15)}.form-error{font-size:.78rem;color:var(--danger);margin-top:4px}.form-actions{display:flex;gap:10px;margin-top:8px}.form-actions .btn{flex:1;padding:12px;font-size:.9rem}.alert{padding:12px 16px;border-radius:8px;font-size:.85rem;margin-bottom:16px;border:1px solid;display:flex;gap:8px;align-items:flex-start}.alert-success{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}.alert-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}.alert-info{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:var(--blue-5)}.alert-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#fcd34d}.limit-panel{background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(6,182,212,.05));border:1px solid rgba(59,130,246,.3);border-radius:var(--radius-lg);padding:28px;text-align:center;margin:20px 0;display:none}.limit-panel.visible{display:block;animation:msgIn 0.3s ease}.limit-panel h3{font-size:1.2rem;margin-bottom:8px;color:var(--text-main)}.limit-panel p{color:var(--text-sub);font-size:.88rem;margin-bottom:20px}.sub-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.sub-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 24px;min-width:140px;text-align:center}.sub-card.featured{border-color:var(--cyan);box-shadow:0 0 20px rgba(6,182,212,.15)}.sub-card .price{font-size:1.5rem;font-weight:700;color:var(--cyan-light)}.sub-card .period{font-size:.75rem;color:var(--text-muted);margin-bottom:8px}.sub-badge{display:inline-block;background:var(--cyan);color:#000;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-bottom:8px}.sub-benefits{list-style:none;text-align:left;font-size:.82rem;color:var(--text-sub)}.sub-benefits li::before{content:"✓ ";color:var(--cyan);font-weight:700}.help-section{max-width:860px;margin:0 auto;padding:40px 16px 120px}.help-section h2{font-size:1.4rem;font-weight:700;margin-bottom:24px;color:var(--text-main);border-bottom:1px solid var(--border);padding-bottom:12px}.accordion{margin-bottom:8px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.accordion-header{padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);color:var(--text-main);font-size:.9rem;font-weight:500;transition:var(--trans)}.accordion-header:hover{background:var(--bg-card2)}.accordion-header .acc-icon{transition:var(--trans);font-size:1rem}.accordion-header.open .acc-icon{transform:rotate(180deg)}.accordion-body{padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s;background:var(--bg-dark);font-size:.88rem;color:var(--text-sub);line-height:1.75}.accordion-body.open{max-height:600px;padding:16px 18px}footer{text-align:center;padding:24px;font-size:.78rem;color:var(--text-muted);border-top:1px solid var(--border)}#toastContainer{position:fixed;top:80px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;font-size:.85rem;box-shadow:var(--shadow);max-width:320px;pointer-events:all;animation:toastIn 0.3s ease;display:flex;align-items:center;gap:10px}.toast.success{border-color:rgba(16,185,129,.4)}.toast.error{border-color:rgba(239,68,68,.4)}.toast.info{border-color:rgba(59,130,246,.4)}@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateX(24px);height:0;padding:0;margin:0}}.toast.out{animation:toastOut 0.3s forwards}.security-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:16px;font-size:.75rem;color:var(--text-muted)}.sec-badge{display:flex;align-items:center;gap:5px}.sec-badge::before{content:"🔒"}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:600px){#header{padding:0 12px}.hero{padding:40px 16px 24px}.modal-box{padding:24px 20px}.header-nav .btn-ghost:not(.contact-btn){display:none}.sub-cards{flex-direction:column;align-items:center}.sub-card{width:100%;max-width:280px}}