:root{
  --ink:#0B0D10; --panel:#14171B; --panel2:#1B1F24;
  --amber:#FF8A3D; --cyan:#35E0C8;
  --text:#F4F1EA; --muted:#8A93A6;
  --line: rgba(244,241,234,0.09);
  --good:#35E0C8; --warn:#FF8A3D;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink); color:var(--text);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  padding-bottom:84px; min-height:100vh;
}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-0.02em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
button, input, select{font-family:inherit;}
.wrap{max-width:900px; margin:0 auto; padding:0 20px;}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(11,13,16,0.92), rgba(11,13,16,0.75));
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; font-family:'Bricolage Grotesque',sans-serif;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber);}
.topbar .desktop-nav{display:flex; gap:26px; font-size:14px; color:var(--muted);}
.topbar .desktop-nav a.active, .topbar .desktop-nav a:hover{color:var(--text);}
.topbar .right{display:flex; align-items:center; gap:10px;}
.iconbtn, .themebtn{background:var(--panel); border:1px solid var(--line); color:var(--text); padding:8px 12px; border-radius:100px; font-size:13px;}
@media (max-width:760px){ .desktop-nav{display:none;} }

/* ---- tab bar (mobile) ---- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:flex; background:var(--panel); border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a{flex:1; text-align:center; font-size:11px; color:var(--muted); padding:6px 0;}
.tabbar a.active{color:var(--amber);}
.tabbar .ic{display:block; font-size:18px; margin-bottom:2px;}
@media (min-width:761px){ .tabbar{display:none;} body{padding-bottom:40px;} }

/* ---- generic layout ---- */
.page-hero{padding:32px 0 8px;}
.page-hero h1{font-size:clamp(24px,4vw,32px); font-weight:800;}
.page-hero p{color:var(--muted); margin-top:8px; font-size:14.5px; max-width:520px;}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:28px 4px 12px;}
.mt{margin-top:16px;} .mt-l{margin-top:28px;}

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px;}
.card-lg{padding:26px;}
.skeleton{height:120px; border-radius:16px; background:linear-gradient(90deg, var(--panel), var(--panel2), var(--panel)); background-size:200% 100%; animation:shimmer 1.4s infinite;}
@keyframes shimmer{ to{background-position:-200% 0;} }

.btn{padding:13px 22px; border-radius:100px; font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;}
.btn-primary{background:var(--text); color:var(--ink);}
.btn-dark{background:var(--panel2); color:var(--text); border:1px solid var(--line);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line);}
.btn-block{width:100%; justify-content:center;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

.field{margin-bottom:14px;}
.lab{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
input, select, textarea{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; border-radius:10px; font-size:14.5px;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--cyan); outline-offset:1px;}
.two{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
@media (max-width:560px){ .two{grid-template-columns:1fr;} }

.seg{display:flex; gap:6px; background:var(--panel2); padding:4px; border-radius:12px;}
.seg .opt{flex:1; text-align:center; padding:9px 0; border-radius:9px; font-size:13.5px; color:var(--muted); cursor:pointer;}
.seg .opt.sel{background:var(--panel); color:var(--text); font-weight:600;}
.hide{display:none !important;}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 12px; border-radius:100px; background:var(--panel2); color:var(--muted); border:1px solid var(--line);}
.pill.live{color:var(--cyan);} .pill.sample{color:var(--amber);} .pill.error{color:#ff6b6b;}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.statusbar{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

.rec{background:var(--panel2); border-radius:16px; padding:24px; border:1px solid var(--line);}
.price{font-size:28px; font-weight:800;}
.rec-top .badge{font-size:11.5px; color:var(--amber); font-weight:600; letter-spacing:0.03em;}
.rec-top h2{font-size:24px; margin-top:8px;}
.rec .price{font-size:34px; font-weight:800; margin-top:6px;}
.rec .price small{font-size:13px; color:var(--muted); font-weight:500; margin-left:4px;}
.rec .why{color:var(--muted); font-size:13.5px; margin-top:8px;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.chip{font-size:12px; padding:6px 11px; border-radius:100px; background:rgba(244,241,234,0.06); color:var(--muted);}
.chip.good{color:var(--cyan);}
.meta-row{display:flex; gap:20px; margin-top:18px; flex-wrap:wrap;}
.meta-row .m b{display:block; font-size:16px;} .meta-row .m span{font-size:11.5px; color:var(--muted);}
.rec-foot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.conf{font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px;}
.conf .dot{width:6px; height:6px; border-radius:50%; background:var(--muted);}
.conf .dot.High{background:var(--cyan);} .conf .dot.Medium{background:var(--amber);}

.row-item{display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:8px;}
.row-item .av{width:36px; height:36px; border-radius:10px; background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.row-item .info{flex:1; min-width:0;}
.row-item .n{font-size:14px; font-weight:600;} .row-item .d{font-size:12px; color:var(--muted); margin-top:2px;}
.row-item .pr{text-align:right;} .row-item .pr b{display:block; font-size:14px;} .row-item .pr span{font-size:11px; color:var(--muted);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.stat-grid .stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center;}
.stat-grid .stat b{display:block; font-size:19px;} .stat-grid .stat span{font-size:11px; color:var(--muted);}
@media (max-width:560px){ .stat-grid{grid-template-columns:1fr 1fr;} }

.empty-state{background:var(--panel); border:1px dashed var(--line); border-radius:16px; padding:32px 24px; text-align:center;}
.empty-state h3{font-size:16px; margin-bottom:8px;}
.empty-state p{color:var(--muted); font-size:13.5px; margin-bottom:16px;}

.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--panel2); border:1px solid var(--line); color:var(--text); padding:12px 20px; border-radius:100px; font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:60;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.foot{border-top:1px solid var(--line); padding:24px 20px; margin-top:40px;}
.foot .foot-links{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.foot > .wrap > div:last-child{font-size:11.5px; color:var(--muted);}

.auth-card{max-width:380px; margin:60px auto; padding:32px;}
.auth-card h1{font-size:24px; margin-bottom:6px;}
.auth-card p.sub{color:var(--muted); font-size:13.5px; margin-bottom:22px;}
.auth-error{color:#ff6b6b; font-size:13px; margin-top:10px; min-height:16px;}

/* ---- legal/prose pages ---- */
.prose{padding:32px 0 60px;}
.prose h1{font-size:28px; margin-bottom:6px;}
.prose h2{font-size:19px; margin-top:28px; margin-bottom:10px;}
.prose p{color:var(--muted); font-size:14.5px; line-height:1.7; margin-bottom:14px;}
.prose .upd{color:var(--muted); font-size:13px; margin-bottom:22px;}
.prose ul, .prose ol{color:var(--muted); font-size:14.5px; line-height:1.8; padding-left:20px; margin-bottom:14px;}
.prose a{color:var(--cyan); text-decoration:underline;}
.callout{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:14px 16px; margin:18px 0;}
.callout p{margin:0; color:var(--text); font-size:13.5px;}