@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");
:root{
  --bg:#050608;
  --bg2:#0a0c10;
  --panel:#0f1218;
  --panel2:#141923;
  --line:#232936;
  --soft:#10141d;
  --text:#f3f5f7;
  --muted:#9aa3b3;
  --red:#ff2a45;
  --red2:#ff4a61;
  --redGlow:rgba(255,50,80,.25);
  --good:#72f0bf;
  --scrollY:0;
  font-family:"Inter",system-ui,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top,#0b0d12 0,#050608 45%,#030405 100%);color:var(--text);overflow-x:hidden;position:relative}
body::before,body::after{content:"";position:fixed;inset:-15%;pointer-events:none;z-index:-2}
body::before{
  background:
    radial-gradient(circle at 15% calc(12% + (var(--scrollY)*0.03px)), rgba(255,45,80,.22) 0, rgba(255,45,80,0) 22%),
    radial-gradient(circle at 82% calc(18% + (var(--scrollY)*-0.02px)), rgba(255,0,85,.12) 0, rgba(255,0,85,0) 18%),
    radial-gradient(circle at 64% calc(76% + (var(--scrollY)*0.015px)), rgba(91,20,124,.18) 0, rgba(91,20,124,0) 22%),
    radial-gradient(circle at 30% calc(82% + (var(--scrollY)*-0.018px)), rgba(28,73,180,.10) 0, rgba(28,73,180,0) 20%);
  filter:blur(24px) saturate(120%);
  opacity:.95;
}
body::after{
  background-image:
    radial-gradient(rgba(255,255,255,.55) 0.9px, transparent 1px),
    radial-gradient(rgba(255,70,105,.35) 0.8px, transparent 1px),
    linear-gradient(transparent 0, rgba(255,255,255,.02) 50%, transparent 100%);
  background-size:150px 150px,220px 220px,100% 320px;
  background-position:
    0 calc(var(--scrollY) * -0.08px),
    50px calc(var(--scrollY) * -0.14px),
    0 calc(var(--scrollY) * -0.04px);
  opacity:.5;
}
a{color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}

#app{display:flex;min-height:100vh;position:relative}
.sidebar{
  width:280px;flex-shrink:0;height:100vh;position:sticky;top:0;
  padding:22px 16px 18px;border-right:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(13,17,23,.92),rgba(8,10,15,.96));
  backdrop-filter:blur(18px);
  display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 20px 0 40px rgba(0,0,0,.2);
}
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 24px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.brand-mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg,rgba(255,65,90,.16),rgba(255,65,90,.04));display:grid;place-items:center;border:1px solid rgba(255,74,97,.35);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 10px 28px rgba(255,42,69,.15)}
.brand-mark img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,42,69,.22))}
.brand b{display:block;font:800 18px/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.06em}
.brand b span{color:var(--red2)}
.brand small{display:block;margin-top:5px;font-size:10px;letter-spacing:.28em;color:#7e899b}
.nav-heading{margin:14px 10px 10px;font-size:11px;letter-spacing:.22em;color:#717a8d;font-weight:700;text-transform:uppercase}
nav{display:grid;gap:7px}
.nav{
  border:1px solid transparent;background:rgba(255,255,255,.01);color:#bcc3d1;
  text-align:left;padding:13px 14px;border-radius:14px;display:flex;gap:14px;align-items:center;
  font-size:18px;transition:.2s ease transform,.2s ease background,.2s ease border-color,.2s ease color;
}
.nav span{font-size:13px;font-weight:700;letter-spacing:.02em}
.nav:hover{transform:translateX(2px);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.06);color:#fff}
.nav.active{background:linear-gradient(180deg,rgba(255,52,78,.18),rgba(255,52,78,.08));border-color:rgba(255,52,78,.35);color:#fff;box-shadow:0 10px 24px rgba(255,42,69,.12)}
.side-bottom{margin-top:auto}
.side-status{padding:15px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);display:flex;gap:12px;align-items:center}
.side-status i{width:10px;height:10px;border-radius:50%;background:var(--red2);box-shadow:0 0 12px var(--red2)}
.side-status b{font-size:11px;letter-spacing:.12em;display:block}
.side-status small{font-size:11px;color:var(--muted)}
.side-meta{margin:18px 10px 0;font-size:11px;line-height:1.9;letter-spacing:.16em;color:#6c7586;text-transform:uppercase}
.side-meta b{color:var(--red2)}

.main{flex:1;min-width:0;position:relative}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px 34px;border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(7,9,13,.88),rgba(7,9,13,.74));backdrop-filter:blur(14px);
}
.eyebrow,.eyebrow span{font-size:11px;letter-spacing:.22em;color:#8a95a8;font-weight:700;text-transform:uppercase}
.eyebrow span{color:#ff6c7d}
h1,h2,h3,p{margin:0} h1{font:700 32px/1.1 "Space Grotesk",Inter,sans-serif;margin-top:8px}
h2,h3{font-family:"Space Grotesk",Inter,sans-serif}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{padding:11px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#141922,#0f141c);color:#f7f8fb;font-weight:700;font-size:12px;letter-spacing:.02em;transition:.2s ease transform,.2s ease filter,.2s ease border-color,.2s ease box-shadow}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);border-color:rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(180deg,var(--red2),var(--red));border-color:rgba(255,96,120,.85);box-shadow:0 10px 22px rgba(255,42,69,.2)}
.btn.ghost{background:linear-gradient(180deg,#10151d,#0b1018)}
.status-pill{padding:9px 12px;border-radius:999px;background:rgba(255,43,68,.14);color:#ff9caa;border:1px solid rgba(255,43,68,.28);font-size:11px;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.content{max-width:1280px;margin:auto;padding:28px 30px 54px;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px}
.section-head h2{font-size:18px}.muted{color:var(--muted)}.fine{font-size:12px}
.welcome,.card,.metric,.auth-card,.sync-dialog{position:relative;overflow:hidden}
.welcome::before,.card::before,.metric::before,.auth-card::before,.sync-dialog::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(255,74,97,0),rgba(255,74,97,.95),rgba(255,74,97,0));opacity:.85}
.welcome{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px 28px;margin-bottom:22px;border-radius:22px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(20,25,34,.88),rgba(12,15,20,.92));box-shadow:0 18px 40px rgba(0,0,0,.28)}
.welcome::after{content:"";position:absolute;inset:auto -25px -25px auto;width:180px;height:180px;background:url('naraka256.png') center/contain no-repeat;opacity:.08;filter:saturate(1.3)}
.welcome .label{color:#ff7f90;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.welcome h2{font-size:29px;margin:8px 0 10px}.welcome p{max-width:720px;color:#b5bfcc;line-height:1.7;font-size:13px}.welcome-status{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ffd6dd}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 22px}
.card,.metric{background:linear-gradient(180deg,rgba(15,19,26,.92),rgba(10,13,19,.94));border:1px solid rgba(255,255,255,.07);border-radius:20px;box-shadow:0 18px 35px rgba(0,0,0,.22)}
.metric{padding:20px}
.metric .label{font-size:10px;letter-spacing:.18em;color:#8d98aa;font-weight:800;text-transform:uppercase}
.metric .number{font:800 28px/1 "Space Grotesk",Inter,sans-serif;margin:12px 0 8px;letter-spacing:-.03em;white-space:nowrap}
.metric .meta{font-size:12px;color:#a4afbf;line-height:1.6}.pink{color:#ff798a}.green{color:var(--good)}
.split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:18px;margin-bottom:22px}
.card{padding:22px;min-width:0}
.card h3{font-size:16px;font-weight:700}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.card-head select,.filterbar input,.filterbar select,.auth-card input,.security-add input,.setting-select,.calculator-strip input{background:#10151d;color:#eef2f7;border:1px solid rgba(255,255,255,.08);padding:12px 13px;border-radius:12px;min-width:0;outline:none;box-shadow:0 0 0 0 rgba(255,60,90,0)}
.card-head select:focus,.filterbar input:focus,.filterbar select:focus,.auth-card input:focus,.security-add input:focus,.setting-select:focus,.calculator-strip input:focus{border-color:rgba(255,74,97,.5);box-shadow:0 0 0 3px rgba(255,74,97,.12)}
.chart{width:100%;height:255px;display:block}.chart.tall{height:300px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.legend-item{font-size:11px;color:#b5bdc9;display:flex;align-items:center;gap:8px}.dot{height:8px;width:8px;border-radius:4px;display:inline-block}
.donut-block{display:flex;flex-direction:column;align-items:center}.donut{height:185px;width:185px;max-width:100%}.donut-legend{width:100%;display:grid;gap:10px;margin-top:14px}.donut-legend>div{display:flex;justify-content:space-between;gap:10px;font-size:12px}.donut-legend strong{font-size:11px}
.tablewrap{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.04)}
.table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap;text-align:left;background:rgba(255,255,255,.01)}
.table th{padding:14px 12px;color:#8390a2;letter-spacing:.14em;font-size:10px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:#d6dce6}.table tr:hover td{background:rgba(255,255,255,.018)}.table tr:last-child td{border-bottom:0}.table td:first-child{font-weight:700;color:#fff}
.chip{font-size:10px;color:#ffb1bd;background:#351722;border:1px solid rgba(255,74,97,.35);border-radius:999px;padding:4px 8px}.chip.buy{color:#cad2de;background:#1c2430;border-color:rgba(255,255,255,.1)}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.filterbar input{min-width:210px;flex:1}
.empty{padding:30px;text-align:center;color:#a8b1bf;line-height:1.7;font-size:13px}.tip{border:1px solid rgba(255,74,97,.18);background:rgba(255,74,97,.06);color:#d8dde5;border-radius:14px;padding:15px;line-height:1.7;font-size:12px}
.stat-row{display:flex;justify-content:space-between;gap:20px;margin:11px 0;font-size:12px;align-items:flex-start}.stat-row span:first-child{color:#a4afbf}
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.route-summary,.card.route-feature{min-height:100%}
.dropzone{padding:40px 26px;border:1.5px dashed rgba(255,74,97,.4);border-radius:18px;text-align:center;background:linear-gradient(180deg,rgba(255,74,97,.08),rgba(255,255,255,.02));cursor:pointer}.dropzone.drag{background:rgba(255,74,97,.12)}.dropzone h2{margin:10px 0}.dropzone p{color:#b0b9c6;font-size:12px;line-height:1.7;margin:12px 0 20px}
.divider{height:1px;background:rgba(255,255,255,.06);margin:18px 0}
footer{padding:18px 34px;border-top:1px solid rgba(255,255,255,.05);font-size:10px;letter-spacing:.18em;color:#8793a6;display:flex;justify-content:space-between;gap:14px;text-transform:uppercase}footer span{color:#637084}
#notice{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,#271018,#1d0d14);border:1px solid rgba(255,74,97,.35);color:#fff;padding:15px 20px;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.35);z-index:140;font-size:13px;max-width:360px}

.sync-overlay,.auth-layer{position:fixed;inset:0;background:rgba(3,4,7,.78);backdrop-filter:blur(10px);z-index:200;display:grid;place-items:center;padding:18px}
.auth-layer{z-index:500}
.sync-dialog,.auth-card{width:min(460px,100%);background:linear-gradient(180deg,rgba(17,22,31,.96),rgba(9,12,17,.98));border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.4);display:grid;gap:14px}
.auth-card{text-align:left}.auth-card h2{color:#ff7588;letter-spacing:.08em}.auth-logo{width:72px;height:72px;object-fit:contain;padding:10px;border-radius:18px;background:linear-gradient(180deg,rgba(255,74,97,.16),rgba(255,74,97,.05));border:1px solid rgba(255,74,97,.28);box-shadow:0 10px 30px rgba(255,42,69,.18)}
.auth-card .btn{width:100%}
.gideon-toast{position:fixed;right:20px;bottom:25px;max-width:410px;z-index:170;padding:17px 22px;border:1px solid rgba(255,74,97,.35);background:linear-gradient(180deg,#26131c,#180d13);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.4);font-size:13px;line-height:1.5}
.security-add{display:grid;grid-template-columns:1fr 1fr auto;gap:9px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}.toggle-row input{accent-color:#ff4a61;width:18px;height:18px}.setting-select{max-width:100%;margin:6px 0}.sync-actions{display:flex;gap:10px;flex-wrap:wrap}.sync-mark{font-size:42px;color:#ff7b8c}
.calculator-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}.calculator-strip label{display:grid;gap:8px;font-size:12px;color:var(--muted)}.calc-inline{margin-top:16px}

::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#06080c}::-webkit-scrollbar-thumb{background:#1e2735;border-radius:999px;border:2px solid #06080c}::-webkit-scrollbar-thumb:hover{background:#2a3546}

@media(max-width:1180px){.metrics{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.route-grid{grid-template-columns:1fr 1fr}.toolbar{justify-content:flex-start}}
@media(max-width:760px){#app{display:block;padding-bottom:84px}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;height:74px;width:100%;z-index:60;padding:6px 8px;background:rgba(8,10,15,.94);border-top:1px solid rgba(255,255,255,.07);border-right:0;display:flex;flex-direction:row;align-items:center}.sidebar .brand,.sidebar .nav-heading,.sidebar .side-bottom,.sidebar nav:nth-of-type(2){display:none}.sidebar nav#nav{display:grid;grid-template-columns:repeat(7,minmax(70px,1fr));width:100%;gap:4px;overflow-x:auto}.sidebar .nav{padding:8px 4px;display:flex;flex-direction:column;gap:4px;justify-content:center;font-size:11px;min-height:58px;text-align:center;border-radius:12px;min-width:72px}.sidebar .nav span{font-size:10px}.main{width:100%;margin:0}.topbar{padding:20px 15px 16px;display:block}.topbar h1{font-size:24px}.toolbar{margin-top:12px}.content{padding:16px}.welcome{padding:18px;flex-direction:column;align-items:flex-start}.welcome h2{font-size:24px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:14px}.metric .number{font-size:20px}.route-grid{grid-template-columns:1fr}.table{min-width:720px}.security-add,.calculator-strip{grid-template-columns:1fr}.gideon-toast{bottom:88px;left:15px;right:15px}.auth-card,.sync-dialog{padding:24px}footer{padding:16px;font-size:9px;display:block;line-height:1.8}footer span{display:block;margin-top:4px}}