:root{--bg0: #0b0d14;--bg1: #10131e;--bg2: #161926;--bg3: #1e2235;--border: rgba(255,255,255,.07);--txt1: #f1f5f9;--txt2: #94a3b8;--txt3: #64748b;--accent1: #3b82f6;--accent2: #3b82f6;--accent3: #8b5cf6;--green: #10b981;--red: #ef4444;--yellow: #f59e0b;--cyan: #06b6d4;--r: 14px;--r-sm: 10px;--r-xs: 7px;--t: .2s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg0);color:var(--txt1);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden;height:100dvh}#root{height:100dvh;display:flex}.app-wrap{display:flex;width:100%;height:100dvh;overflow:hidden}.sidebar{width:240px;min-width:240px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 12px;gap:2px;overflow-y:auto;overflow-x:hidden}.sb-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:8px}.logo-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent1),var(--accent3));display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo-name{font-family:Plus Jakarta Sans,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.3px;color:var(--txt1);text-decoration:none}.logo-name span{color:var(--accent2)}.sb-section{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt3);padding:12px 10px 4px}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-xs);font-size:13px;font-weight:500;color:var(--txt2);cursor:pointer;transition:all var(--t);text-decoration:none;border:none;background:none;width:100%;position:relative;-webkit-user-select:none;user-select:none}.nav-item:hover{background:var(--bg3);color:var(--txt1)}.nav-item.active{background:#3b82f61f;color:var(--accent2);font-weight:600}.nav-item.active .nav-icon{color:var(--accent2)}.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.8}.nav-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:16px;border-radius:8px;padding:0 5px;display:flex;align-items:center;justify-content:center}.sb-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}.user-card{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--r-sm);transition:background var(--t);cursor:pointer}.user-card:hover{background:var(--bg3)}.user-av{width:32px;height:32px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--accent1),var(--accent3));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}.user-name{font-size:12px;font-weight:600;color:var(--txt1)}.user-plan{font-size:10px;color:var(--accent2);font-weight:600}.main-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:60px;min-height:60px;border-bottom:1px solid var(--border);background:var(--bg1)}.topbar-h1{font-family:Plus Jakarta Sans,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--txt1)}.topbar-sub{font-size:12px;color:var(--txt3)}.topbar-right{display:flex;align-items:center;gap:8px}.date-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--txt2);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:6px 12px}.date-badge svg{width:13px;height:13px;stroke:var(--txt3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.tb-btn{width:34px;height:34px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border);color:var(--txt2);transition:all var(--t);position:relative}.tb-btn:hover{background:var(--bg3);color:var(--txt1)}.tb-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg1)}.page-content{flex:1;overflow-y:auto;padding:24px 28px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-xs);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t);text-decoration:none;border:none;font-family:inherit}.btn-primary{background:var(--accent1);color:#fff;box-shadow:0 0 20px #3b82f640}.btn-primary:hover{background:#2563eb;box-shadow:0 0 30px #3b82f666}.btn-ghost{background:var(--bg2);color:var(--txt2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg3);color:var(--txt1)}.btn-outline{background:transparent;color:var(--txt2);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--accent1);color:var(--accent1)}.chart-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);padding:20px}.card-glow{box-shadow:0 4px 24px #0000004d}.chart-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.chart-title{font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:700;color:var(--txt1)}.chart-sub{font-size:11px;color:var(--txt3);margin-top:2px}.chart-container{height:220px;position:relative}.chart-container-sm{height:200px;position:relative}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden}.kpi-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.kpi-label{font-size:12px;font-weight:600;color:var(--txt2)}.kpi-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}.kpi-icon svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.icon-bg-blue{background:#3b82f61f;color:var(--accent1)}.icon-bg-green{background:#10b9811f;color:var(--green)}.icon-bg-purple{background:#8b5cf61f;color:var(--accent3)}.icon-bg-yellow{background:#f59e0b1f;color:var(--yellow)}.kpi-value{font-family:Plus Jakarta Sans,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--txt1);margin-bottom:6px}.kpi-change{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:5px;padding:2px 6px}.kpi-change svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.5;fill:none}.change-up{background:#10b9811a;color:var(--green)}.change-dn{background:#ef44441a;color:var(--red)}.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:20px}.bottom-grid{display:grid;grid-template-columns:3fr 2fr;gap:14px}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th{text-align:left;padding:8px 10px;color:var(--txt3);font-weight:600;letter-spacing:.5px;font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border)}.data-table td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--txt2)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#ffffff05}.td-bold{color:var(--txt1)!important;font-weight:600}.td-up{color:var(--green)!important;font-weight:600}.td-dn{color:var(--red)!important;font-weight:600}.td-neutral{color:var(--txt3)!important}.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px}.badge-green{background:#10b9811a;color:var(--green)}.badge-red{background:#ef44441a;color:var(--red)}.badge-yellow{background:#f59e0b1a;color:var(--yellow)}.badge-blue{background:#3b82f61a;color:var(--accent1)}.ai-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#3b82f614,#8b5cf614);border:1px solid rgba(59,130,246,.2);border-radius:var(--r);padding:14px 18px;margin-bottom:20px}.ai-icon{width:36px;height:36px;flex-shrink:0;background:#3b82f626;border-radius:10px;display:flex;align-items:center;justify-content:center}.ai-icon svg{width:18px;height:18px;stroke:var(--accent1);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}.ai-text{flex:1;font-size:13px;color:var(--txt2)}.ai-text strong{color:var(--txt1)}.ai-action{border:none;background:#3b82f626;color:var(--accent1);font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:all var(--t)}.ai-action:hover{background:#3b82f640}.alert-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.03)}.alert-item:last-child{border-bottom:none}.alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}.dot-red{background:var(--red);box-shadow:0 0 8px #ef444480}.dot-yellow{background:var(--yellow);box-shadow:0 0 8px #f59e0b66}.dot-green{background:var(--green);box-shadow:0 0 8px #10b98166}.al-text{font-size:12px;color:var(--txt2)}.al-text strong{color:var(--txt1)}.al-time{font-size:11px;color:var(--txt3);margin-top:2px}.prediction-widget{background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border:1px solid rgba(59,130,246,.25);border-radius:var(--r);padding:24px;margin-bottom:20px;text-align:center}.pred-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--txt2);margin-bottom:10px}.pred-label svg{width:16px;height:16px;stroke:var(--accent2);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}.pred-value{font-family:Plus Jakarta Sans,sans-serif;font-size:48px;font-weight:800;letter-spacing:-1px;color:var(--txt1);margin-bottom:10px}.pred-sub{font-size:13px;color:var(--txt3);max-width:480px;margin:0 auto 12px;line-height:1.5}.pred-acc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green);background:#10b9811a;padding:6px 14px;border-radius:8px}.pred-acc svg{width:14px;height:14px;stroke:var(--green);stroke-width:2.5;fill:none}.int-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}.int-item:last-child{border-bottom:none}.int-logo{width:40px;height:40px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}.int-logo svg{width:20px;height:20px;stroke-linecap:round;stroke-linejoin:round;fill:none}.int-name{font-size:13px;font-weight:600;color:var(--txt1);margin-bottom:2px}.int-status{font-size:11px;color:var(--txt3)}.int-badge-on{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);white-space:nowrap}.int-badge-off{margin-left:auto;font-size:11px;font-weight:600;color:var(--accent1);white-space:nowrap;cursor:pointer}.int-badge-off:hover{text-decoration:underline}.legend-pill{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt3)}.l-dot{width:8px;height:8px;border-radius:50%}.placeholder-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:16px}.ph-icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:#3b82f614;border:1px solid rgba(59,130,246,.18)}.ph-icon svg{width:36px;height:36px;stroke:var(--accent2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.ph-title{font-family:Plus Jakarta Sans,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.5px}.ph-desc{font-size:14px;color:var(--txt2)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}