@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap";:root{--sidebar-w:220px;--color-primary:#4f46e5;--color-primary-light:#eef2ff;--color-bg:#f8f9fc;--color-surface:#fff;--color-border:#e5e7eb;--color-text:#111827;--color-muted:#6b7280;--color-success:#10b981;--color-error:#ef4444;--radius:12px;--font:"DM Sans", system-ui, sans-serif;--font-mono:"DM Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);min-height:100vh}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);color:#cbd5e1;background:#0f172a;flex-direction:column;flex-shrink:0;height:100vh;padding:24px 16px;display:flex;position:sticky;top:0}.sidebar-logo{border-bottom:1px solid #ffffff14;align-items:center;gap:10px;margin-bottom:36px;padding-bottom:20px;display:flex}.logo-icon{font-size:26px}.logo-text{color:#f1f5f9;font-size:15px;font-weight:600;line-height:1.3}.logo-text small{color:#64748b;letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:400}.sidebar-nav{flex-direction:column;flex:1;gap:4px;display:flex}.nav-label{letter-spacing:.12em;color:#475569;text-transform:uppercase;margin-bottom:8px;font-size:10px}.nav-item{color:#94a3b8;border-radius:8px;padding:9px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:block}.nav-item:hover{color:#f1f5f9;background:#ffffff0f}.nav-item.active{background:var(--color-primary);color:#fff}.sidebar-footer{color:#475569;border-top:1px solid #ffffff0f;flex-direction:column;gap:6px;padding-top:16px;font-size:11px;display:flex}.api-status{align-items:center;gap:6px;display:flex}.dot{background:var(--color-success);width:7px;height:7px;box-shadow:0 0 6px var(--color-success);border-radius:50%;animation:2s infinite pulse;display:inline-block}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main-content{flex-direction:column;flex:1;gap:24px;max-width:1100px;padding:32px;display:flex}.page-header{justify-content:space-between;align-items:flex-start;display:flex}.page-header h1{color:var(--color-text);font-size:24px;font-weight:600}.subtitle{color:var(--color-muted);margin-top:4px;font-size:14px}.header-badge{background:var(--color-primary);color:#fff;white-space:nowrap;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600}.top-row{grid-template-columns:1.2fr 1fr;align-items:start;gap:20px;display:grid}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.card-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:18px 20px 14px;display:flex}.card-header h2{color:var(--color-text);font-size:15px;font-weight:600}.btn-ghost{border:1px solid var(--color-border);color:var(--color-muted);cursor:pointer;font-size:12px;font-family:var(--font);background:0 0;border-radius:6px;padding:4px 12px;transition:background .15s}.btn-ghost:hover{background:var(--color-bg)}.form-card form{padding:18px 20px 20px}.form-row{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;display:grid}.form-group{flex-direction:column;gap:5px;display:flex}.form-group label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:500}.form-group input,.form-group select{border:1px solid var(--color-border);font-size:14px;font-family:var(--font);color:var(--color-text);background:var(--color-bg);border-radius:8px;outline:none;width:100%;padding:9px 12px;transition:border-color .15s,box-shadow .15s}.form-group input:focus,.form-group select:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px #4f46e51a}.hint{color:#9ca3af;font-size:11px}.btn-predict{background:var(--color-primary);color:#fff;width:100%;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:12px;transition:background .15s,transform .1s;display:flex}.btn-predict:hover:not(:disabled){background:#4338ca}.btn-predict:active:not(:disabled){transform:scale(.99)}.btn-predict:disabled{opacity:.6;cursor:not-allowed}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.result-card{flex-direction:column;display:flex}.result-body{flex:1;justify-content:center;align-items:center;min-height:240px;padding:28px 24px;display:flex}.result-state{text-align:center;color:var(--color-muted);flex-direction:column;align-items:center;gap:10px;font-size:14px;display:flex}.result-icon{font-size:36px}.empty-state p{text-align:center;max-width:200px;line-height:1.5}.pulse-ring{border:3px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}.error-state{color:var(--color-error)}.error-text{text-align:center;max-width:220px;font-size:13px;line-height:1.5}.result-success{text-align:center;flex-direction:column;align-items:center;gap:12px;animation:.4s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.result-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);font-size:11px}.result-amount{color:var(--color-primary);letter-spacing:-1px;font-size:44px;font-weight:700;line-height:1}.result-range{color:var(--color-muted);gap:20px;font-size:13px;display:flex}.range-item{align-items:center;gap:6px;display:flex}.range-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.range-dot.low{background:#f59e0b}.range-dot.high{background:var(--color-success)}.result-note{color:#9ca3af;font-size:11px}.stats-strip{border-top:1px solid var(--color-border);grid-template-columns:repeat(3,1fr);display:grid}.stat{border-right:1px solid var(--color-border);text-align:center;flex-direction:column;gap:3px;padding:12px;display:flex}.stat:last-child{border-right:none}.stat-label{text-transform:uppercase;color:var(--color-muted);letter-spacing:.06em;font-size:10px}.stat-value{color:var(--color-text);font-size:12px;font-weight:600}.stat-value.green{color:var(--color-success)}.charts-section{flex-direction:column;gap:16px;display:flex}.section-title{font-size:16px;font-weight:600}.charts-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.chart-card{padding:18px 20px 14px}.chart-wide{grid-column:1/-1}.chart-title{margin-bottom:2px;font-size:14px;font-weight:600}.chart-sub{color:var(--color-muted);margin-bottom:16px;font-size:12px}.empty-charts{text-align:center;color:var(--color-muted);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:10px;padding:40px;font-size:14px;display:flex}.empty-charts span{font-size:32px}.nav-badge{background:var(--color-primary);color:#fff;text-align:center;border-radius:20px;min-width:20px;margin-left:auto;padding:2px 7px;font-size:10px;font-weight:700}.nav-item{align-items:center;display:flex!important}.stats-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;display:grid}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:18px 20px;display:flex}.stat-card-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);font-size:11px}.stat-card-value{color:var(--color-text);letter-spacing:-.5px;font-size:26px;font-weight:700}.stat-card-value.green{color:var(--color-success)}.stat-card-value.amber{color:#f59e0b}.history-table{border-collapse:collapse;width:100%;font-size:13px}.history-table thead tr{background:var(--color-bg);border-bottom:1px solid var(--color-border)}.history-table th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);white-space:nowrap;padding:12px 16px;font-size:11px;font-weight:600}.history-table td{border-bottom:1px solid var(--color-border);color:var(--color-text);white-space:nowrap;padding:12px 16px}.history-table tbody tr:last-child td{border-bottom:none}.history-table tbody tr:hover{background:var(--color-primary-light)}.history-table .muted{color:var(--color-muted)}.history-table .sales-cell{color:var(--color-primary);font-size:14px;font-weight:700}.badge{border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.badge-green{color:#065f46;background:#d1fae5}.badge-amber{color:#92400e;background:#fef3c7}
