*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#f8f9fb;color:#111827;height:100vh;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh}
/* NAV */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;background:#fff;border-bottom:1px solid #e5e7eb;position:relative;z-index:50}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:#111827}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#6d28d9,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.credits-badge{display:flex;align-items:center;gap:6px;background:#f3f0ff;border:1px solid #ddd6fe;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;color:#6d28d9;position:absolute;left:50%;transform:translateX(-50%)}
.nav-right{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
/* LAYOUT */
.layout{display:flex;flex:1;overflow:hidden}
/* SIDEBAR */
.sidebar{width:220px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;padding:12px 0;transition:width .25s ease;overflow:hidden}
.sidebar.collapsed{width:56px}
.sidebar-toggle{display:flex;align-items:center;justify-content:flex-end;padding:4px 10px;margin-bottom:8px}
.toggle-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6b7280;transition:background .2s}
.toggle-btn:hover{background:#f3f4f6}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .15s;font-size:14px;font-weight:500;color:#374151;white-space:nowrap;border-left:3px solid transparent;margin:1px 0}
.nav-item:hover{background:#f9fafb;color:#111827}
.nav-item.active{background:#f3f0ff;color:#6d28d9;border-left-color:#6d28d9}
.nav-item span{opacity:1;transition:opacity .2s}
.sidebar.collapsed .nav-item span{opacity:0;pointer-events:none}
.nav-icon{flex-shrink:0;width:18px;height:18px}
/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f8f9fb}
/* CHAT VIEW */
.chat-view{flex:1;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;padding:0 16px;overflow:hidden}
.chat-messages{flex:1;overflow-y:auto;padding:24px 0 8px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}
/* BUBBLES */
.bubble-row{display:flex;gap:10px;align-items:flex-start}
.bubble-row.user{flex-direction:row-reverse}
.avatar-sm{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.avatar-ai{background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff}
.avatar-user{background:#111827;color:#fff}
.bubble{max-width:75%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.6;animation:fadeUp .3s ease}
.bubble-ai{background:#fff;border:1px solid #e5e7eb;border-radius:4px 16px 16px 16px;color:#111827}
.bubble-user{background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border-radius:16px 4px 16px 16px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* TYPING */
.typing-dots{display:flex;gap:4px;padding:4px 2px}
.typing-dots span{width:7px;height:7px;border-radius:50%;background:#9ca3af;animation:dot .9s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
/* CTA BUTTON */
.proposal-btn{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s}
.proposal-btn:hover{opacity:.9;transform:translateY(-1px)}
/* INPUT BAR */
.input-bar{padding:12px 0 20px}
.drop-zone{border:2px dashed #d1d5db;border-radius:12px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-size:12px;color:#9ca3af;margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s}
.drop-zone.active{border-color:#6d28d9;background:#f3f0ff;color:#6d28d9}
.file-chip{display:inline-flex;align-items:center;gap:6px;background:#ede9fe;border:1px solid #c4b5fd;border-radius:20px;padding:3px 10px 3px 8px;font-size:12px;color:#6d28d9;font-weight:500;margin-bottom:8px}
.file-chip button{background:none;border:none;cursor:pointer;color:#9ca3af;font-size:14px;line-height:1;padding:0}
.input-row{display:flex;gap:8px;align-items:flex-end}
.input-wrap{flex:1;background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;display:flex;align-items:flex-end;padding:10px 12px;gap:8px;transition:border-color .2s}
.input-wrap:focus-within{border-color:#6d28d9;box-shadow:0 0 0 3px #ede9fe}
#chat-input, #test-chat-input{flex:1;border:none;outline:none;font-family:inherit;font-size:14px;color:#111827;background:transparent;resize:none;max-height:120px;line-height:1.5}
.upload-btn{background:none;border:none;cursor:pointer;color:#9ca3af;padding:2px;display:flex;transition:color .2s}
.upload-btn:hover{color:#6d28d9}
.send-btn{background:linear-gradient(135deg,#6d28d9,#2563eb);border:none;border-radius:12px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;flex-shrink:0;transition:opacity .2s,transform .1s}
.send-btn:hover{opacity:.9;transform:scale(1.05)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* PROPOSAL VIEW */
.proposal-view{flex:1;overflow-y:auto;padding:40px 24px;max-width:700px;width:100%;margin:0 auto}
.proposal-view h2{font-size:22px;font-weight:700;margin-bottom:6px;color:#111827}
.proposal-subtitle{font-size:14px;color:#6b7280;margin-bottom:28px}
.proposal-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;margin-bottom:16px}
.proposal-card h3{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.spec-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:14px}
.spec-item .label{font-size:11px;color:#9ca3af;font-weight:500;margin-bottom:4px}
.spec-item .value{font-size:17px;font-weight:700;color:#111827}
.spec-item .sub{font-size:11px;color:#6b7280;margin-top:2px}
.highlight-purple{color:#6d28d9}
.action-row{display:flex;gap:12px;margin-top:8px}
.btn-primary{flex:1;padding:13px;background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-outline{flex:1;padding:13px;background:#fff;color:#374151;border:1.5px solid #e5e7eb;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-outline:hover{background:#f9fafb}
/* TRAINING VIEW */
.training-view{flex:1;overflow-y:auto;padding:40px 24px;max-width:680px;width:100%;margin:0 auto}
.status-banner{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 18px;margin-bottom:24px}
.status-dot{width:10px;height:10px;border-radius:50%;background:#f59e0b;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.progress-ring-wrap{display:flex;justify-content:center;padding:32px 0}
.ring-container{position:relative;width:160px;height:160px}
.ring-container svg{transform:rotate(-90deg)}
.ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-percent{font-size:36px;font-weight:800;color:#6d28d9}
.ring-label{font-size:12px;color:#9ca3af;font-weight:500}
.credit-widget{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between}
.credit-info{display:flex;flex-direction:column;gap:2px}
.credit-info .used{font-size:13px;color:#6b7280}
.credit-info .remaining{font-size:20px;font-weight:700;color:#111827}
.topup-btn{padding:8px 16px;background:#f3f0ff;color:#6d28d9;border:1px solid #ddd6fe;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.topup-btn:hover{background:#ede9fe}
/* DEPLOYMENT VIEW */
.deploy-view{flex:1;overflow-y:auto;padding:40px 24px}
.deploy-view h2{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px}
.deploy-view .sub{font-size:14px;color:#6b7280;text-align:center;margin-bottom:32px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:780px;margin:0 auto}
.price-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;position:relative}
.price-card.popular{border-color:#6d28d9;box-shadow:0 0 0 3px #ede9fe}
.popular-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#6d28d9;color:#fff;font-size:11px;font-weight:600;padding:3px 12px;border-radius:20px}
.price-card h3{font-size:16px;font-weight:700;color:#111827}
.price-card .price{font-size:26px;font-weight:800;color:#111827}
.price-card .price span{font-size:13px;font-weight:500;color:#9ca3af}
.price-card p{font-size:13px;color:#6b7280;line-height:1.5}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.price-card ul li{font-size:13px;color:#374151;display:flex;align-items:center;gap:6px}
.price-card ul li::before{content:"✓";color:#6d28d9;font-weight:700}
.price-card-btn{margin-top:auto;padding:10px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
.price-card-btn.filled{background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border:none}
.price-card-btn.outline{background:#fff;color:#374151;border:1.5px solid #e5e7eb}
.price-card-btn:hover{opacity:.88}
.slider-wrap{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.slider-wrap input[type=range]{width:100%;accent-color:#6d28d9}
.slider-estimate{font-size:12px;color:#6d28d9;font-weight:600}
/* DASHBOARD */
.dashboard-view{flex:1;overflow-y:auto;padding:36px 24px;max-width:900px;width:100%;margin:0 auto}
.dash-header{margin-bottom:28px}
.dash-header h2{font-size:24px;font-weight:700;color:#111827}
.dash-header p{font-size:14px;color:#6b7280;margin-top:4px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px}
.stat-card .s-label{font-size:12px;color:#9ca3af;font-weight:500;margin-bottom:6px}
.stat-card .s-value{font-size:26px;font-weight:800;color:#111827}
.stat-card .s-change{font-size:12px;color:#10b981;margin-top:3px}
.model-list{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.model-list-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb}
.model-list-header h3{font-size:15px;font-weight:600;color:#111827}
.new-model-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.model-row{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid #f3f4f6;gap:14px;cursor:pointer;transition:background .15s}
.model-row:last-child{border-bottom:none}
.model-row:hover{background:#f9fafb}
.model-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.model-dot.ready{background:#10b981}
.model-dot.training{background:#f59e0b;animation:pulse 1.5s infinite}
.model-name{font-size:14px;font-weight:600;color:#111827;flex:1}
.model-meta{font-size:12px;color:#9ca3af}
.model-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge-ready{background:#ecfdf5;color:#10b981}
.badge-training{background:#fffbeb;color:#f59e0b}
/* SETTINGS */
.settings-view{flex:1;overflow-y:auto;padding:36px 24px;max-width:620px;width:100%;margin:0 auto}
.settings-view h2{font-size:22px;font-weight:700;margin-bottom:24px}
.settings-section{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;margin-bottom:16px}
.settings-section-title{padding:14px 20px;font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #f3f4f6}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #f9fafb}
.setting-row:last-child{border-bottom:none}
.setting-row label{font-size:14px;font-weight:500;color:#111827}
.setting-row .hint{font-size:12px;color:#9ca3af;margin-top:2px}
.toggle{width:40px;height:22px;background:#e5e7eb;border-radius:20px;position:relative;cursor:pointer;transition:background .2s;border:none}
.toggle.on{background:#6d28d9}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s}
.toggle.on::after{left:21px}
.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex;flex-direction:column}
/* BILLING */
.billing-view{flex:1;overflow-y:auto;padding:36px 24px;max-width:680px;width:100%;margin:0 auto}
.billing-view h2{font-size:22px;font-weight:700;margin-bottom:24px}
.billing-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px;margin-bottom:16px}
.billing-card h3{font-size:14px;font-weight:600;color:#6b7280;margin-bottom:14px}
.credit-bar-wrap{height:10px;background:#f3f4f6;border-radius:10px;overflow:hidden;margin:8px 0}
.credit-bar{height:100%;background:linear-gradient(90deg,#6d28d9,#2563eb);border-radius:10px;width:30%}
.hidden{display:none !important}