/* Prime Onyx screens: layout shared by every artboard. Components come from ds/primeonyx/components/bundle.css. */
.app{min-height:100%;background:var(--bg);background-image:radial-gradient(1100px 520px at 82% -14%, var(--glow-1), transparent 62%),radial-gradient(760px 420px at -10% 16%, var(--glow-2), transparent 60%);color:var(--fg);font-family:var(--font-sans);font-size:15px;line-height:1.55}
.app h1,.app h2,.app h3{margin:0;text-wrap:balance}
.app p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--space-5)}
.page{max-width:1240px;margin:0 auto;padding:var(--space-8) var(--space-5) 64px;display:grid;gap:var(--space-6)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-head h1{font:600 30px/38px var(--font-serif)}
.page-head p{margin-top:4px;color:var(--fg-2)}

/* top bar */
.app-top{position:sticky;top:0;z-index:5;background:var(--topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.app-top .in{max-width:1240px;margin:0 auto;padding:0 var(--space-5);height:64px;display:flex;align-items:center;gap:var(--space-6)}
.app-top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--line-control);border-radius:var(--radius-sm);overflow:hidden}
.lang a{padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--fg-3);text-decoration:none}
.lang a.on{background:var(--surface-2);color:var(--fg)}
.me{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--fg);text-decoration:none;font-size:13.5px}
.nav svg,.tab svg,.side svg{width:18px;height:18px}
.ico{display:inline-block;width:18px;height:18px;flex:none}

/* layout helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-6)}
.stack{display:grid;gap:var(--space-3)}
.sample-note{font-size:12px;color:var(--fg-3)}

/* fake chart well (TradingView sits here in the live site) */
.chart{position:relative;height:360px;background:var(--surface);border-top:1px solid var(--line)}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.chart .c-up{fill:var(--up);stroke:var(--up)}
.chart .c-dn{fill:var(--down);stroke:var(--down)}
.chart .gridl{stroke:var(--line);stroke-width:1}
.chart .last{stroke:var(--accent-2);stroke-dasharray:3 3}
.tick{font:400 11px/14px var(--font-mono);fill:var(--fg-3)}
.tf{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px}
.tf span{padding:4px 9px;font:400 12.5px/1 var(--font-mono);border-radius:4px;color:var(--fg-3)}
.tf span.on{background:var(--surface-2);color:var(--fg)}
.cal{list-style:none;margin:0;padding:0}
.cal li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;padding:11px var(--space-5);border-top:1px solid var(--line);align-items:center;font-size:13.5px}
.cal li.day{display:block;padding:8px var(--space-5);background:var(--bg-2);font-size:12px;color:var(--fg-3);font-weight:600}
.imp{display:inline-flex;gap:2px}
.imp i{width:4px;height:12px;border-radius:1px;background:var(--line-2)}
.imp.h i{background:var(--down)} .imp.m i:nth-child(-n+2){background:var(--warn)} .imp.l i:first-child{background:var(--fg-3)}

/* podium */
.podium{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);gap:var(--space-6);align-items:end}
.pod{padding:var(--space-4);display:grid;gap:var(--space-3)}
.pod.first{border-color:var(--champ);background:linear-gradient(180deg,var(--champ-tint),var(--surface) 45%)}
.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-wordmark);border:1px solid var(--line-2)}
.pod.first .rank{background:var(--champ);color:var(--champ-ink);border-color:transparent}

/* onboarding steps */
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-4);padding:var(--space-5)}
.step-no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--font-mono);border:1px solid var(--line-2);color:var(--fg-2)}
.step.now{border-color:var(--accent)}
.step.now .step-no{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.step.done .step-no{background:var(--accent-soft);color:var(--up);border-color:var(--accent)}
.step.next{opacity:.62}
.acct-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2)}

/* admin */
.admin{display:flex;flex-wrap:wrap;min-height:100%}
.side{flex:1 1 230px;max-width:250px;border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:18px;background:var(--overlay-bg)}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--radius-sm);color:var(--fg-2);text-decoration:none;font-size:14.5px}
.side nav a.on{background:var(--surface);color:var(--accent-2)}
.admin-main{flex:999 1 560px;min-width:0;padding:28px 28px 60px;display:grid;gap:22px;align-content:start}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.kpi{padding:16px 18px;display:grid;gap:4px}
.kpi .v{font:600 24px/30px var(--font-mono);font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.badge.ok{border-color:var(--accent);color:var(--up)} .badge.warn{border-color:var(--warn);color:var(--warn)} .badge.bad{border-color:var(--down);color:var(--down)}
.bar{height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}

/* landing */
.hero{padding-top:96px;padding-bottom:72px}
.hero h1{font:600 64px/1.12 var(--font-serif);letter-spacing:-.01em;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero .lede{font-size:19px;line-height:1.6;color:var(--fg-2);max-width:46ch;margin-top:20px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--fg-2);background:var(--surface-a60)}
.section{padding:72px 0;border-top:1px solid var(--line)}
.section h2{font:600 36px/1.25 var(--font-serif)}
.section .sub{color:var(--fg-2);margin-top:10px;max-width:60ch}
.feature{padding:24px;display:grid;gap:12px;align-content:start}
.feature .n{font:600 13px/1 var(--font-mono);color:var(--accent-2)}
.feature h3{font:600 19px/1.35 var(--font-serif)}
.feature p{color:var(--fg-2);font-size:14.5px}
.mock{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.faq{border-top:1px solid var(--line);padding:18px 0;display:grid;gap:6px}
.faq b{font-size:16px}
.faq p{color:var(--fg-2);font-size:14.5px}
.foot{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--fg-3);font-size:13px}

/* phone */
.phone{width:390px;height:844px;overflow:hidden;position:relative}
.phone .scroll{position:absolute;inset:0 0 72px 0;overflow:hidden;padding:16px;display:grid;gap:14px;align-content:start}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--tabbar-bg);border-top:1px solid var(--line);padding:8px 4px 14px}
.tabbar a{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--fg-3);text-decoration:none}
.tabbar a.on{color:var(--accent-2)}
.tabbar svg{width:20px;height:20px}
.m-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 16px;border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .dash,.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .podium{grid-template-columns:minmax(0,1fr)}
  .nav{display:none}
  .hero h1{font-size:40px}
}