:root{--bg:#FFF;--muted-bg:#F8F9FA;--primary:#1A73E8;--primary-light:#4285F4;--success:#34A853;--warn:#FBBC05;--danger:#EA4335;--text:#202124;--border:#DADCE0;--radius:12px;--sidebar-w:248px;--sidebar-collapsed-w:72px}
html,body,#app{margin:0;min-height:100%;font-family:'Segoe UI',Inter,sans-serif;background:var(--muted-bg);color:var(--text)}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,100%);padding:28px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.brand-icon{width:48px;height:48px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.4rem}
.brand-icon-img{width:48px;height:48px;border-radius:12px}
.brand h1{margin:0;font-size:1.4rem}.brand p{margin:0;color:#5F6368}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.input{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font:inherit;transition:box-shadow .2s,border-color .2s}
.input:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(66,165,245,.35)}
.btn{border:none;border-radius:var(--radius);padding:12px 16px;font-weight:600;cursor:pointer;width:100%}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary);width:auto}
.alert{background:#FCE8E6;color:var(--danger);padding:10px;border-radius:var(--radius);margin-bottom:12px}
.hint{color:#5F6368;font-size:.85rem;margin-top:16px}
.dashboard{width:100%;max-width:none;margin:0;padding:24px 28px}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dash-header h1{margin:0;color:var(--primary)}.muted{color:#5F6368}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px}
.stat strong{font-size:1.4rem}.stat.primary strong{color:var(--primary)}.stat.success strong{color:var(--success)}.stat.warn strong{color:#B06000}.stat.danger strong{color:var(--danger)}
.dash-links{margin-bottom:20px}
.report-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-panel label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:#5F6368}
.report-actions label{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.report-table{width:100%;border-collapse:collapse;font-size:.92rem}
.report-table th,.report-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.report-table th{background:var(--muted-bg);color:#5F6368;font-weight:600}
.report-table .num{text-align:right;font-variant-numeric:tabular-nums}
.report-table .profit{color:var(--success);font-weight:600}
.panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.branch-row{display:grid;grid-template-columns:180px 1fr 180px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.bar-wrap{background:var(--muted-bg);border-radius:999px;height:10px;overflow:hidden}
.bar{height:100%;background:var(--primary);border-radius:999px}
.metrics{display:flex;gap:8px;justify-content:flex-end;font-size:.85rem}
.badge{background:#FEF7E0;color:#B06000;padding:4px 8px;border-radius:999px}
.loading{padding:40px;text-align:center;color:#5F6368}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}.branch-row{grid-template-columns:1fr}}
.odak-shell{min-height:100vh;display:flex;background:var(--muted-bg)}
.odak-sidebar{width:var(--sidebar-w);background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .25s ease}
.odak-shell.sidebar-collapsed .odak-sidebar{width:var(--sidebar-collapsed-w)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-bottom:1px solid var(--border)}
.nav-brand{font-size:1.05rem;color:var(--primary)!important;font-weight:700;text-decoration:none}
.sidebar-toggle{border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:6px 10px;cursor:pointer}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;padding:12px 10px;flex:1}
.sidebar-nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.92rem;padding:10px 12px;border-radius:10px}
.sidebar-nav a:hover{background:#E3F2FD;color:var(--primary)}
.sidebar-foot{padding:12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border)}
.odak-shell.sidebar-collapsed .sidebar-nav a{font-size:0;padding:10px;text-align:center}
.odak-shell.sidebar-collapsed .sidebar-nav a::first-letter{font-size:.92rem}
.odak-shell.sidebar-collapsed .nav-brand,.odak-shell.sidebar-collapsed .version-tag{display:none}
.odak-main{flex:1;min-width:0}
.version-tag{font-size:.75rem;color:#546E7A;text-align:center}
.chart-panel canvas{max-height:320px;width:100%!important}
.skeleton-wrap{display:flex;flex-direction:column;gap:16px;padding:8px 0}
.skeleton{background:linear-gradient(90deg,#ECEFF1 25%,#F5F7FA 50%,#ECEFF1 75%);background-size:200% 100%;animation:skeleton-shimmer 1.2s ease-in-out infinite;border-radius:var(--radius)}
.skeleton-title{height:28px;width:240px}
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.skeleton-stat{height:88px}
.skeleton-chart{height:280px}
.skeleton-table{height:220px}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.error-card{max-width:520px;margin:48px auto;padding:32px;background:var(--bg);border:1px solid var(--border);border-radius:16px;text-align:center;box-shadow:0 8px 32px rgba(13,71,161,.08)}
.error-card h2{margin:12px 0 8px;color:var(--primary)}
.error-card p{color:#546E7A;margin-bottom:20px}
.error-icon{font-size:2rem;color:var(--warn)}
.odak-nav{display:none}
.timeline{position:relative;padding-left:8px}
.timeline-item{position:relative;padding:0 0 20px 24px;border-left:2px solid var(--border)}
.timeline-dot{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary)}
.timeline-item.warn .timeline-dot{background:var(--warn)}
.timeline-item.danger .timeline-dot{background:var(--danger)}
.timeline-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.diff{font-size:.85rem;margin-top:6px}
.diff .old{color:var(--danger)}.diff .new{color:var(--success)}
.dash-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.alerts-panel{margin-bottom:16px}
.alert-row{padding:12px 14px;border-radius:var(--radius);margin-bottom:8px;border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.alert-row.danger{background:#FCE8E6;border-color:#F5C6C2}
.alert-row.warn{background:#FEF7E0;border-color:#F9E6A8}
.chart-panel{margin-bottom:16px}
.chart-panel canvas{max-height:220px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-panel label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:#5F6368}
.report-actions label{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:900px){.dash-grid-2{grid-template-columns:1fr}}
.gold-panel h2{color:#B8860B}
.gold-row td{background:linear-gradient(90deg,#FFFDF5,#FFF)}
.urgent-badge{background:#EA4335;color:#fff;padding:12px 16px;border-radius:12px;margin-bottom:16px;font-weight:600;text-align:center}
.pulse{animation:pulse-red 1.2s ease-in-out infinite}
@keyframes pulse-red{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(234,67,53,.4)}50%{opacity:.92;box-shadow:0 0 0 8px rgba(234,67,53,0)}}
.terminal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:320px;overflow:auto}
.terminal-card{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff;position:relative}
.terminal-card.online{border-color:#34A853}.terminal-card.offline{border-color:#EA4335;opacity:.85}
.status-dot{width:10px;height:10px;border-radius:50%;position:absolute;top:8px;right:8px}
.terminal-card.online .status-dot{background:#34A853;box-shadow:0 0 6px #34A853}
.terminal-card.offline .status-dot{background:#EA4335}
.small{font-size:.78rem}
.danger-text{color:var(--danger);font-weight:600}
.backup-reminder{background:#E8F0FE;border:1px solid #1A73E8;border-radius:12px;padding:14px;margin-bottom:16px}
.backup-reminder p{margin:8px 0;font-size:.9rem;color:#5F6368}
[data-theme="dark"]{--bg:#1E1F20;--muted-bg:#131314;--text:#E8EAED;--border:#3C4043;--primary:#64B5F6}
[data-theme="dark"] .odak-sidebar,[data-theme="dark"] .panel,[data-theme="dark"] .stat,[data-theme="dark"] .login-card{background:var(--bg);color:var(--text)}
[data-theme="dark"] .sidebar-nav a:hover{background:#263238}
[data-theme="dark"] .report-table th{background:#2D2E30;color:#9AA0A6}
[data-theme="dark"] .muted,[data-theme="dark"] .hint{color:#9AA0A6}
[data-theme="dark"] .terminal-card,[data-theme="dark"] .alert-row{background:var(--bg)}
.leaderboard-panel{margin-bottom:16px}
.leader-row{display:grid;grid-template-columns:48px 1fr 120px 100px 80px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.leader-row.rank-1{background:linear-gradient(90deg,#FFF8E1,transparent);border-radius:8px;padding:10px}
.leader-score{font-weight:700;color:var(--primary);text-align:right}
.theme-toggle{margin-left:auto;width:auto!important;padding:8px 14px!important}
.help-link{display:block;text-align:center;text-decoration:none;width:100%;margin-top:8px;padding:8px 14px!important;box-sizing:border-box}
.help-page .help-card{margin-bottom:16px}
.help-page .help-card h2{margin:0 0 8px;color:var(--primary);font-size:1.15rem}
.help-steps{margin:12px 0 0;padding-left:20px;line-height:1.6}
.help-steps li{margin-bottom:6px;color:var(--text)}
