:root{--bg-primary:#0c0f1a;--bg-secondary:#141829;--bg-card:rgba(255,255,255,0.03);--border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--text-dim:#475569;--accent:#f59e0b;--accent-glow:rgba(245,158,11,0.15);--fp:#a855f7;--great:#22c55e;--fair:#f59e0b;--poor:#dc2626;--fant:#3b82f6;}
[data-theme="light"]{--bg-primary:#f1f5f9;--bg-secondary:#ffffff;--bg-card:rgba(0,0,0,0.02);--border:rgba(0,0,0,0.08);--border-hover:rgba(0,0,0,0.15);--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#64748b;--text-dim:#94a3b8;--accent:#d97706;--accent-glow:rgba(217,119,6,0.1);}
[data-theme="light"] body{background:var(--bg-primary)!important;}
[data-theme="light"] .topbar{background:rgba(255,255,255,0.9);backdrop-filter:blur(24px);}
[data-theme="light"] .login-overlay{background:var(--bg-primary);}
[data-theme="light"] th{background:rgba(241,245,249,0.95);}
[data-theme="light"] tr:hover td{background:rgba(245,158,11,0.04);}
[data-theme="light"] tr.ev td{background:rgba(0,0,0,0.015);}
[data-theme="light"] .fselect option{background:#fff;}
[data-theme="light"] .dsp-card{background:linear-gradient(135deg,rgba(217,119,6,0.08),rgba(249,115,22,0.04));border-color:rgba(217,119,6,0.2);}
.theme-toggle{background:none;border:1px solid var(--border-hover);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:14px;color:var(--text-primary);transition:all 0.2s;line-height:1;}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent-glow);}
.login-overlay{position:fixed;inset:0;background:var(--bg-primary);z-index:9999;display:flex;align-items:center;justify-content:center;}
.login-box{background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:20px;padding:40px;width:380px;max-width:90vw;text-align:center;}
.login-box .logo{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#f97316);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:#fff;margin:0 auto 16px;}
.login-box h2{font-size:20px;font-weight:800;margin-bottom:4px;}
.login-box p{font-size:13px;color:var(--text-muted);margin-bottom:24px;}
.login-box input{width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--border-hover);border-radius:10px;padding:12px 16px;color:var(--text-primary);font-family:inherit;font-size:14px;outline:none;margin-bottom:12px;text-align:center;letter-spacing:1px;}
.login-box input:focus{border-color:var(--accent);background:rgba(245,158,11,0.06);}
.login-box .login-btn{width:100%;background:linear-gradient(135deg,var(--accent),#f97316);border:none;border-radius:10px;padding:12px;color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;}
.login-box .login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(245,158,11,0.3);}
.login-error{color:#f87171;font-size:12px;margin-bottom:12px;display:none;}
.logout-btn{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}
.role-badge{font-size:10px;padding:3px 8px;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.role-admin{background:rgba(245,158,11,0.15);color:var(--accent);}
.role-viewer{background:rgba(59,130,246,0.15);color:#60a5fa;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',-apple-system,sans-serif;background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary),var(--bg-primary));color:var(--text-primary);min-height:100vh;}
.topbar{background:rgba(15,23,42,0.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.topbar-left{display:flex;align-items:center;gap:14px;}.topbar-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#f97316);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;}
.topbar-title{font-weight:700;font-size:16px;}.topbar-sub{font-size:11px;color:var(--text-muted);letter-spacing:0.05em;text-transform:uppercase;}
.topbar-right{display:flex;align-items:center;gap:8px;}.badge{font-size:12px;padding:6px 14px;border-radius:8px;font-weight:600;}.badge-accent{color:var(--accent);background:var(--accent-glow);}.badge-muted{color:var(--text-secondary);background:rgba(255,255,255,0.05);}
.main{max-width:1500px;margin:0 auto;padding:24px 28px;}
.depot-switcher{position:relative;display:inline-flex;align-items:center;}
.depot-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border-hover);border-radius:8px;padding:6px 14px;color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all 0.2s;}
.depot-btn:hover{border-color:var(--accent);background:var(--accent-glow);}
.depot-btn .arrow{font-size:10px;opacity:0.5;transition:transform 0.2s;}.depot-btn.open .arrow{transform:rotate(180deg);}
.depot-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:10px;min-width:260px;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:200;display:none;overflow:hidden;}.depot-dropdown.show{display:block;}
.depot-dropdown-item{padding:10px 16px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:space-between;transition:background 0.15s;border-bottom:1px solid var(--border);}
.depot-dropdown-item:hover{background:rgba(255,255,255,0.05);}.depot-dropdown-item:last-child{border:none;}.depot-dropdown-item.active{background:var(--accent-glow);color:var(--accent);}.depot-dropdown-item .check{color:var(--accent);font-weight:700;}
.depot-dropdown-footer{padding:8px 16px;border-top:1px solid var(--border);background:rgba(255,255,255,0.02);}
.depot-dropdown-footer button{width:100%;background:none;border:1px dashed var(--border-hover);border-radius:6px;padding:8px;color:var(--text-muted);font-family:inherit;font-size:12px;cursor:pointer;transition:all 0.2s;}
.depot-dropdown-footer button:hover{border-color:var(--accent);color:var(--accent);}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}@media(max-width:768px){.upload-grid{grid-template-columns:1fr;}}
.upload-zone{background:var(--bg-card);border:2px dashed var(--border-hover);border-radius:14px;padding:28px;text-align:center;cursor:pointer;transition:all 0.25s;}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-glow);}.upload-zone.dragover{border-color:var(--accent);}.upload-zone.uploaded{border-color:var(--fp);border-style:solid;background:rgba(16,185,129,0.06);}
.upload-zone .icon{font-size:2.5rem;margin-bottom:10px;}.upload-zone h3{font-size:15px;font-weight:700;margin-bottom:4px;}.upload-zone p{font-size:12px;color:var(--text-muted);margin-bottom:14px;}
.file-tag{display:none;background:rgba(34,197,94,0.15);color:#4ade80;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;margin-top:10px;}.upload-zone.uploaded .file-tag{display:inline-block;}
.opt-tag{background:rgba(245,158,11,0.15);color:var(--accent);font-size:10px;padding:2px 8px;border-radius:4px;font-weight:700;vertical-align:middle;margin-left:6px;}
.btn{border:none;border-radius:10px;padding:10px 22px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;}
.btn:hover{transform:translateY(-1px);}.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
.btn-primary{background:linear-gradient(135deg,var(--accent),#f97316);color:#fff;}.btn-secondary{background:rgba(255,255,255,0.06);color:var(--text-primary);border:1px solid var(--border-hover);}
.btn-danger{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:6px;}.btn-process{display:block;width:100%;max-width:420px;margin:0 auto 24px;padding:14px 28px;font-size:16px;}
.loading{display:none;text-align:center;padding:48px 0;}.loading.active{display:block;}
.spinner{width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 14px;}@keyframes spin{to{transform:rotate(360deg);}}
.error-box{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;display:none;}.error-box.active{display:block;}
.tabs{display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,0.02);border-radius:12px;padding:4px;border:1px solid var(--border);flex-wrap:wrap;}
.tab{padding:10px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;color:var(--text-muted);transition:all 0.2s;text-align:center;min-width:80px;}
.tab:hover{color:var(--text-primary);}.tab.active{background:var(--accent-glow);color:var(--accent);border:1px solid rgba(245,158,11,0.3);}
.tab-panel{display:none;}.tab-panel.active{display:block;}
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px;}@media(max-width:900px){.stats-row{grid-template-columns:repeat(3,1fr);}}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.stat-num{font-size:2rem;font-weight:800;line-height:1;}.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;}
.dsp-section{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-bottom:20px;}@media(max-width:900px){.dsp-section{grid-template-columns:1fr;}}
.dsp-card{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(249,115,22,0.06));border:1px solid rgba(245,158,11,0.25);border-radius:16px;padding:28px;text-align:center;}
.dsp-big{font-size:3.5rem;font-weight:800;font-family:'JetBrains Mono',monospace;line-height:1;}
.dsp-rank{font-size:13px;color:var(--text-secondary);margin-top:6px;}
.mbars{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;}
.mbar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}.mbar-lbl{font-size:12px;font-weight:700;width:40px;color:var(--text-secondary);}
.mbar-track{flex:1;height:8px;background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden;}.mbar-fill{height:100%;border-radius:4px;transition:width 0.6s ease;}
.mbar-val{font-size:11px;font-weight:600;width:65px;text-align:right;font-family:'JetBrains Mono',monospace;}
.alerts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}@media(max-width:768px){.alerts-grid{grid-template-columns:1fr;}}
.acard{border-radius:14px;padding:18px;}.acard h4{font-size:13px;font-weight:700;margin-bottom:12px;}
.a-danger{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);}.a-danger h4{color:#f87171;}
.a-warn{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);}.a-warn h4{color:#fbbf24;}
.a-ok{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);}.a-ok h4{color:#4ade80;}
.a-info{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);}.a-info h4{color:#60a5fa;}
.a-item{font-size:13px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center;}.a-item:last-child{border:none;}.a-item .n{font-weight:600;}.a-item .v{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;}
.controls{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.sinput{background:rgba(255,255,255,0.05);border:1px solid var(--border-hover);border-radius:8px;padding:8px 14px;color:var(--text-primary);font-family:inherit;font-size:13px;width:200px;outline:none;}.sinput:focus{border-color:var(--accent);}
.fselect{background:rgba(255,255,255,0.05);border:1px solid var(--border-hover);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-family:inherit;font-size:13px;outline:none;}.fselect option{background:#1e293b;}
.cright{margin-left:auto;display:flex;gap:6px;}
.twrap{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;}.tscroll{overflow-x:auto;max-height:600px;overflow-y:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{padding:10px;text-align:left;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;background:rgba(15,23,42,0.95);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;z-index:2;}
th:hover{color:var(--accent);}th .sa{font-size:10px;margin-left:3px;opacity:0.4;}th.sorted .sa{opacity:1;color:var(--accent);}
td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.02);vertical-align:middle;}tr:hover td{background:rgba(245,158,11,0.03);}tr.ev td{background:rgba(255,255,255,0.008);}
.mv{font-weight:600;display:block;}.mp{font-size:10px;color:var(--fp);font-family:'JetBrains Mono',monospace;}.mn{color:var(--text-dim);font-style:italic;}
.tier{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;}
.tier-fp{background:rgba(168,85,247,0.15);color:#c084fc;}.tier-f{background:rgba(59,130,246,0.15);color:#60a5fa;}.tier-g{background:rgba(34,197,94,0.15);color:#4ade80;}.tier-fa{background:rgba(245,158,11,0.15);color:#fbbf24;}.tier-p{background:rgba(220,38,38,0.15);color:#f87171;}
.sb{font-size:18px;font-weight:800;font-family:'JetBrains Mono',monospace;}.s-fp{color:var(--fp);}.s-f{color:var(--fant);}.s-g{color:var(--great);}.s-fa{color:var(--fair);}.s-p{color:var(--poor);}
.dn{font-weight:600;white-space:nowrap;}.di{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.bf{color:#c084fc;}.bg{color:#4ade80;}.bfa{color:#fbbf24;}.bp{color:#f87171;}
.wu{color:var(--fp);font-size:11px;font-weight:700;}.wd{color:var(--poor);font-size:11px;font-weight:700;}.ws{color:var(--text-dim);font-size:11px;}
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;justify-content:center;align-items:center;backdrop-filter:blur(4px);}.mbg.active{display:flex;}
.mdl{background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:16px;padding:28px;max-width:720px;width:92%;max-height:88vh;overflow-y:auto;position:relative;}
.mc{position:absolute;top:14px;right:14px;background:rgba(239,68,68,0.2);color:#f87171;border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
.mdl h3{font-size:16px;margin-bottom:16px;color:var(--accent);}
.dt{width:100%;border-collapse:collapse;font-size:13px;}.dt th{background:rgba(255,255,255,0.04);padding:8px 10px;}.dt td{padding:8px 10px;border-bottom:1px solid var(--border);}
.dsum{background:linear-gradient(135deg,var(--accent-glow),rgba(249,115,22,0.1));border:1px solid rgba(245,158,11,0.3);border-radius:10px;padding:18px;text-align:center;margin-top:16px;}.dsum .big{font-size:2.4rem;font-weight:800;color:var(--accent);}
.pnote{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#fca5a5;padding:10px 14px;border-radius:8px;margin-top:12px;font-size:13px;}
.nnote{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);color:#93c5fd;padding:10px 14px;border-radius:8px;margin-top:12px;font-size:13px;}
.settings-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px;}
.settings-panel h3{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:16px;}
.s-group{margin-bottom:18px;}.s-group-title{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.s-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.s-label{font-size:13px;font-weight:600;width:130px;color:var(--text-primary);}
.s-slider-wrap{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;}
.s-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,0.1);outline:none;}
.s-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid rgba(255,255,255,0.3);}
.s-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid rgba(255,255,255,0.3);}
.s-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--accent);min-width:45px;text-align:right;}
.s-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;border:1px solid var(--border);}
.s-prev-card{text-align:center;padding:10px;border-radius:8px;}.s-prev-cnt{font-size:1.6rem;font-weight:800;}.s-prev-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-top:2px;}
.s-reset{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);padding:6px 14px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;}.s-reset:hover{background:rgba(239,68,68,0.25);}
.depot-manager{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px;}
.depot-card{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;transition:all 0.2s;flex-wrap:wrap;gap:8px;}
.depot-card:hover{border-color:var(--border-hover);}.depot-card.active-depot{border-color:rgba(245,158,11,0.4);background:var(--accent-glow);}
.depot-card-info{display:flex;align-items:center;gap:12px;}
.depot-code{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--accent);background:rgba(245,158,11,0.12);padding:4px 10px;border-radius:6px;}
.depot-name{font-size:14px;font-weight:600;}.depot-actions{display:flex;gap:6px;}
.depot-form{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;}
.depot-form-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.depot-form-row input{background:rgba(255,255,255,0.05);border:1px solid var(--border-hover);border-radius:6px;padding:8px 12px;color:var(--text-primary);font-family:inherit;font-size:13px;outline:none;}
.depot-form-row input:focus{border-color:var(--accent);}
.target-table{width:100%;border-collapse:collapse;font-size:13px;}
.target-table th{padding:10px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;background:rgba(15,23,42,0.6);border-bottom:1px solid var(--border);cursor:default;}
.target-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.03);}
.target-table input{width:80px;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:6px;padding:6px 8px;color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:12px;text-align:center;outline:none;}
.target-table input:focus{border-color:var(--accent);background:rgba(245,158,11,0.08);}
.history-list{display:flex;flex-direction:column;gap:8px;}
.history-item{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all 0.2s;flex-wrap:wrap;gap:8px;}
.history-item:hover{border-color:var(--accent);background:var(--accent-glow);}
.history-info{display:flex;flex-direction:column;gap:2px;}.history-date{font-size:12px;color:var(--text-muted);}.history-label{font-size:14px;font-weight:600;}
.history-meta{display:flex;gap:12px;align-items:center;}.history-score{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:800;}.history-drivers{font-size:11px;color:var(--text-muted);}
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-secondary);border:1px solid var(--great);color:#4ade80;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:300;transform:translateY(80px);opacity:0;transition:all 0.3s;pointer-events:none;}.toast.show{transform:translateY(0);opacity:1;}
.data-tab-hidden{display:none !important;}
#recentCards::-webkit-scrollbar{height:4px;}#recentCards::-webkit-scrollbar-track{background:transparent;}#recentCards::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px;}
@media(max-width:600px){.topbar{padding:10px 14px;flex-wrap:wrap;gap:8px;}.main{padding:14px;}.stats-row{grid-template-columns:repeat(2,1fr);}.dsp-section{grid-template-columns:1fr;}}

/* ============ MOBILE RESPONSIVE ============ */
@media(max-width:768px){
    .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px;}
    .topbar-left{gap:8px;}.topbar-title{font-size:14px;}.topbar-sub{font-size:9px;}
    .topbar-right{gap:4px;flex-wrap:wrap;justify-content:flex-end;}
    .topbar-right .badge{padding:4px 8px;font-size:10px;}
    .topbar-right a{font-size:10px;}
    .main{padding:12px 10px;}
    .upload-grid{grid-template-columns:1fr;gap:10px;}
    .upload-zone{padding:18px 14px;}
    .upload-zone .icon{font-size:1.8rem;margin-bottom:6px;}
    .upload-zone h3{font-size:13px;}.upload-zone p{font-size:11px;margin-bottom:10px;}
    .btn-process{font-size:14px;padding:12px 20px;}
    .stats-row{grid-template-columns:repeat(3,1fr);gap:6px;}
    .stat-card{padding:10px 6px;}.stat-num{font-size:1.4rem;}.stat-label{font-size:9px;}
    /* DSP Score Section */
    #panel-overview > div:nth-child(2){grid-template-columns:1fr!important;gap:10px!important;}
    .dsp-card{padding:18px 14px;}.dsp-big{font-size:2.4rem;}
    .mbars{padding:14px;}
    /* Health Dashboard */
    #healthGrid{grid-template-columns:repeat(2,1fr)!important;gap:6px!important;}
    #healthMetrics{grid-template-columns:1fr!important;}
    /* Alerts */
    .alerts-grid{grid-template-columns:1fr;}
    /* Driver Table - Card Mode */
    .tscroll{max-height:none;overflow-x:auto;}
    table{font-size:11px;}
    th,td{padding:6px 5px;}
    .dn{font-size:12px;max-width:100px;overflow:hidden;text-overflow:ellipsis;}
    .di{display:none;}
    .sb{font-size:14px;}.mp{display:none;}
    .btn-sm{padding:3px 6px;font-size:9px;}
    .tier{font-size:9px;padding:2px 6px;}
    /* WoW */
    #wowContent > div:first-child{grid-template-columns:1fr!important;gap:8px!important;}
    /* Tabs */
    .tabs{gap:2px;padding:3px;}.tab{padding:7px 8px;font-size:11px;min-width:50px;}
    /* Settings */
    .settings-panel{padding:14px;}
    .s-grid{grid-template-columns:1fr!important;}
    /* Modals */
    .mdl{width:96%;padding:18px;max-height:92vh;}
    /* Controls */
    .controls{gap:6px;}.sinput{width:100%;}.cright{margin-left:0;width:100%;justify-content:flex-end;}
    /* Recent Strip */
    #recentCards{gap:6px;}
    #recentCards > div{min-width:100px!important;padding:10px!important;}
    /* History */
    .history-item{padding:10px!important;gap:8px!important;}
    .depot-dropdown{min-width:200px;}
}

@media(max-width:480px){
    .stats-row{grid-template-columns:repeat(2,1fr);}
    #healthGrid{grid-template-columns:1fr!important;}
    .topbar-logo{width:30px;height:30px;font-size:14px;border-radius:8px;}
    .tabs{flex-wrap:wrap;}
    .tab{flex:1 1 auto;}
}

/* ================================================================
   GSSL SCORECARD V6 — Login Redesign (Split-screen with animations)
   ================================================================ */
.login-overlay {
    position: fixed;
    inset: 0;
    background: #0a0e1a;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.login-split {
    width: 100%;
    height: 100%;
    max-width: 1100px;
    max-height: 720px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    background: #0a0e1a;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}
@media (min-width: 1000px) {
    .login-split {
        border-radius: 16px;
        margin: 20px;
    }
}
.login-left {
    position: relative;
    background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 60%, #1a1429 100%);
    padding: 36px 32px;
    overflow: hidden;
    color: white;
}
.left-grid-bg { position: absolute; inset: 0; opacity: 0.12; pointer-events: none; }
.left-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); }
.left-blob.blob1 {
    top: -80px; left: -80px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(245,158,11,0.32) 0%, transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}
.left-blob.blob2 {
    bottom: -120px; right: -120px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(99,102,241,0.28) 0%, transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}
@keyframes blobFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,60px) scale(1.1); } }
@keyframes blobFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-40px) scale(1.15); } }

.left-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.left-header, .mobile-logo { display: flex; align-items: center; gap: 12px; }
.mobile-logo { display: none; margin-bottom: 24px; }
.left-logo {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white; font-size: 19px;
    box-shadow: 0 4px 14px rgba(245,158,11,0.4);
}
.left-logo-title { color: white; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.left-logo-sub { color: rgba(255,255,255,0.5); font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

.left-hero { margin: 8px 0; }
.left-headline { color: white; font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 10px; }
.left-sub { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.55; max-width: 360px; }

.left-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.left-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px; padding: 13px;
    backdrop-filter: blur(10px);
}
.left-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; animation: dotPulse 2s ease-in-out infinite; }
.pulse-green { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.pulse-amber { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
@keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
.left-card-label { color: rgba(255,255,255,0.6); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }
.left-card-value { color: white; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.left-card-sub { color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 2px; }
.spark { width: 100%; height: 20px; margin-top: 6px; }
.tier-bars { display: flex; gap: 3px; margin-top: 9px; }
.tier-bar { flex: 1; height: 4px; border-radius: 2px; }
.fill-green { background: #22c55e; }
.fill-amber { background: #f59e0b; }
.fill-empty { background: rgba(255,255,255,0.1); }

.left-chart { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; padding: 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chart-title { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; }
.chart-delta { color: #22c55e; font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.chart-svg { width: 100%; height: 56px; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; color: rgba(255,255,255,0.35); font-family: 'JetBrains Mono', monospace; }

.left-stats { display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.stat-item { flex: 1; }
.stat-num { color: white; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.stat-num small { font-size: 12px; opacity: 0.6; font-weight: 500; }
.stat-lbl { color: rgba(255,255,255,0.45); font-size: 10px; margin-top: 1px; }
.stat-sep { width: 1px; background: rgba(255,255,255,0.08); }

.login-right { background: #0d1322; display: flex; align-items: center; justify-content: center; padding: 36px 32px; overflow-y: auto; }
.login-right-inner { width: 100%; max-width: 340px; }
.login-welcome { margin-bottom: 22px; }
.login-welcome-title { color: white; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.login-welcome-sub { color: rgba(255,255,255,0.5); font-size: 13px; }

.login-error {
    display: none;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5; font-size: 12px;
    padding: 10px 12px; margin-bottom: 14px; line-height: 1.4;
}

.field-group { margin-bottom: 14px; }
.field-label { display: block; color: rgba(255,255,255,0.55); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px; }
.field-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px; padding: 12px 14px;
    color: white; font-size: 14px; font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
}
.field-input::placeholder { color: rgba(255,255,255,0.3); }
.field-input:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.field-input:focus { background: rgba(255,255,255,0.07); border-color: rgba(245,158,11,0.6); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }

.login-btn {
    width: 100%;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border: none; border-radius: 9px; padding: 13px;
    color: white; font-weight: 600; font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(245,158,11,0.3);
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
    margin-bottom: 18px;
}
.login-btn:hover { box-shadow: 0 6px 20px rgba(245,158,11,0.42); }
.login-btn:active { transform: scale(0.985); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }

.login-tutorial { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.18); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.tutorial-head { display: flex; align-items: center; gap: 8px; color: #fbbf24; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.tutorial-head i { font-size: 18px; }
.tutorial-body { color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.tutorial-body strong { color: white; font-weight: 600; }
.tutorial-creds { display: flex; flex-direction: column; gap: 9px; }
.cred-row { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; }
.cred-badge { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 5px; letter-spacing: 0.06em; min-width: 60px; text-align: center; }
.badge-admin { background: #f59e0b; color: #422006; }
.badge-viewer { background: #6366f1; color: white; }
.cred-text { color: rgba(255,255,255,0.75); font-size: 12.5px; line-height: 1.5; }
.cred-text code { background: rgba(255,255,255,0.12); color: #fbbf24; padding: 2px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; }

.login-footer { text-align: center; color: rgba(255,255,255,0.3); font-size: 10px; font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.login-footer i { font-size: 11px; vertical-align: -1px; }
.dot-sep { opacity: 0.5; }

@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; max-width: 480px; max-height: none; margin: 0; border-radius: 0; }
    .login-left { display: none; }
    .mobile-logo { display: flex; }
    .login-right { padding: 24px 22px; }
}
@media (max-height: 720px) and (min-width: 901px) {
    .left-headline { font-size: 24px; }
    .left-card-value { font-size: 19px; }
    .login-left, .login-right { padding: 24px; }
}