/* ==========================================================================
 * ZORA // AUT0SELL INTELLIGENCE — visual system (v0.1.0-preview)
 * Premium retro sci-fi. Offline: no web fonts, no external assets.
 * ========================================================================== */
:root{
  --bg:#080B18; --panel:#12192B; --panel2:#0D1424; --border:#2D3957;
  --text:#EDF3FF; --muted:#9BAACA;
  --cyan:#67EFFF; --magenta:#FF78C9;
  --emerald:#7DF4BA; --amber:#FFD079; --crimson:#FF8796;
  --radius:14px; --tap:44px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.55; min-height:100vh;
  background-image:
    radial-gradient(1200px 500px at 50% -10%, rgba(103,239,255,.06), transparent 60%),
    radial-gradient(900px 420px at 85% 110%, rgba(255,120,201,.05), transparent 60%);
}
::selection{background:rgba(103,239,255,.28)}

/* ---------- sample banner (persistent) ---------- */
.sample-banner{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--tap); padding:8px 12px; text-align:center;
  background:repeating-linear-gradient(-45deg,#2a1607,#2a1607 14px,#241306 14px,#241306 28px);
  border-bottom:2px solid var(--amber); color:var(--amber);
  font-weight:800; letter-spacing:.14em; font-size:13px;
}
.sample-banner .dot{width:10px;height:10px;border-radius:50%;background:var(--amber);flex:none}

/* ---------- header ---------- */
.app-header{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:rgba(13,20,36,.85); backdrop-filter:blur(6px);
  position:sticky; top:40px; z-index:55;
}
@media (max-width:560px){
  .brand{font-size:14px; letter-spacing:.08em}
  .mode-toggle{margin-left:0; width:100%; justify-content:flex-start}
  .app-header{top:40px}
}
.brand{font-weight:900; letter-spacing:.12em; font-size:17px}
.brand .accent{color:var(--cyan)}
.mode-toggle{display:flex; gap:6px; margin-left:auto}
.seg{
  display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden;
  background:var(--panel2);
}
.seg button{
  border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px;
  font-weight:700; padding:0 14px; min-height:var(--tap); min-width:var(--tap); cursor:pointer;
}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#1b2742,#141d33); color:var(--cyan)}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); border-radius:12px; flex:none;
  background:linear-gradient(180deg,#1a2439,#101827);
  border:1px solid var(--border); cursor:pointer;
}
.icon-btn img{width:22px;height:22px}
.icon-btn:active{transform:translateY(1px)}
.icon-btn[aria-pressed="true"]{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset}

/* ---------- layout ---------- */
main{display:block; max-width:1060px; margin:0 auto; padding:16px 16px 110px}
.view{display:none}
.view.active{display:block; animation:fadein .18s ease-out}
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---------- bottom tabs (mobile) / top nav (desktop) ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(10,15,29,.96); border-top:1px solid var(--border);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter:blur(8px);
}
.tabbar button{
  border:0; background:transparent; color:var(--muted); font:inherit;
  min-height:56px; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; font-weight:800; letter-spacing:.1em;
}
.tabbar button img{width:22px; height:22px}
.tabbar button[aria-selected="true"]{color:var(--cyan); background:rgba(103,239,255,.08)}
@media (min-width:760px){
  .tabbar{
    top:0; bottom:auto; border-top:0; border-bottom:1px solid var(--border);
    grid-template-columns:none; display:flex; justify-content:center; gap:4px;
    position:sticky; padding:8px;
  }
  .tabbar button{flex-direction:row; padding:0 22px; min-height:var(--tap); font-size:13px}
  main{padding-top:20px; padding-bottom:60px}
  .app-header{top:60px}
  .sample-banner{position:static}
}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin:0 0 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
}
.card h2{margin:0 0 10px; font-size:13px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.card h3{margin:14px 0 8px; font-size:15px}
.hero{padding:22px 18px; text-align:left}
.hero h1{margin:0 0 6px; font-size:30px; line-height:1.15; letter-spacing:.01em}
.hero p{margin:0; color:var(--muted)}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:12px;
}
.stat .k{font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.stat .v{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}
.stat .s{font-size:12px; color:var(--muted); margin-top:2px}

/* ---------- candy-glass buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:10px 20px; border-radius:12px; cursor:pointer;
  font:inherit; font-weight:800; font-size:15px; color:var(--text);
  background:linear-gradient(180deg,#22304f,#16203a);
  border:1px solid #3b4c74;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 8px rgba(0,0,0,.4);
  text-decoration:none;
}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.btn.primary{background:linear-gradient(180deg,#0e5a68,#0a3d47); border-color:var(--cyan); color:#d9fbff}
.btn.warn{border-color:var(--amber); color:var(--amber)}
.btn.ghost{background:transparent}
.btn.small{min-height:40px; padding:6px 14px; font-size:14px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; letter-spacing:.06em;
  border:1px solid var(--border); border-radius:999px; padding:5px 12px;
  background:var(--panel2); color:var(--muted); white-space:nowrap;
}
.chip img{width:14px; height:14px}
.chip.ok{color:var(--emerald); border-color:#2c5b45}
.chip.warn{color:var(--amber); border-color:#5f4a22}
.chip.bad{color:var(--crimson); border-color:#5f2b33}
.chip.info{color:var(--cyan); border-color:#29525c}
.chip.neutral{color:var(--muted)}

/* ---------- coin picker ---------- */
.coin-pick{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:560px){.coin-pick{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.coin-pick{grid-template-columns:repeat(4,1fr)}}
.coin-btn{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; min-height:64px; cursor:pointer; color:var(--text); font:inherit; width:100%;
}
.coin-btn img.medallion{width:44px; height:44px; flex:none}
.coin-btn .nm{font-weight:800}
.coin-btn .sm{font-size:12px; color:var(--muted)}
.coin-btn[aria-pressed="true"]{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset}
.star-btn{margin-left:auto}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
th{color:var(--muted); text-align:left; font-weight:700; padding:10px 12px;
   border-bottom:1px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
td{padding:12px; border-bottom:1px solid #1a2440; font-variant-numeric:tabular-nums; vertical-align:middle}
tr:last-child td{border-bottom:0}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:rgba(103,239,255,.04)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-size:12.5px; word-break:break-all}

/* ---------- three-step story ---------- */
.steps{display:grid; gap:10px; margin:12px 0}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step{
  border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel2);
  position:relative;
}
.step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; font-weight:800; font-size:13px;
  background:#1b2742; color:var(--muted); margin-right:8px; vertical-align:middle;
}
.step.done .n{background:rgba(125,244,186,.15); color:var(--emerald); border:1px solid #2c5b45}
.step.pend .n{background:rgba(255,208,121,.12); color:var(--amber); border:1px solid #5f4a22}
.step.unk .n{background:rgba(155,170,202,.1); color:var(--muted); border:1px dashed var(--border)}
.step.bad .n{background:rgba(255,135,150,.12); color:var(--crimson); border:1px solid #5f2b33}
.step h4{margin:0 0 6px; font-size:13px; letter-spacing:.1em}
.step p{margin:4px 0; font-size:13.5px}
.step .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* ---------- definition lists ---------- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:8px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-variant-numeric:tabular-nums; word-break:break-word}

/* ---------- radar ---------- */
.radar-wrap{display:flex; flex-direction:column; align-items:center; gap:8px}
.radar-svg{width:min(78vw,340px); height:auto; touch-action:manipulation}
.radar-legend{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:12.5px; color:var(--muted)}
.radar-note{font-size:12.5px; color:var(--muted); max-width:60ch}
.sweep{transform-origin:center; animation:sweep 5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

/* ---------- dialogs / sheets ---------- */
.sheet-back{
  position:fixed; inset:0; z-index:80; background:rgba(2,5,12,.72);
  display:none; align-items:flex-end; justify-content:center;
}
.sheet-back.open{display:flex}
.sheet{
  background:var(--panel); border:1px solid var(--border); border-bottom:0;
  border-radius:18px 18px 0 0; width:100%; max-width:640px; max-height:88vh;
  overflow:auto; padding:18px 18px calc(18px + env(safe-area-inset-bottom));
}
@media (min-width:700px){.sheet-back{align-items:center}.sheet{border-radius:18px; border-bottom:1px solid var(--border)}}
.sheet h2{margin:0 0 10px; font-size:18px}
.sheet-close{float:right}

/* ---------- forms ---------- */
.field{margin:10px 0}
.field label{display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.field input[type=text], .field input[type=number], .field select{
  width:100%; min-height:var(--tap); background:#0a1120; border:1px solid var(--border);
  color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; font-size:15px;
}
.field input:focus, .field select:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan)}
.seg-row{display:flex; gap:8px; flex-wrap:wrap}
.toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #1a2440; min-height:var(--tap)}
.toggle:last-child{border-bottom:0}
.toggle .t{font-weight:700}
.toggle .d{font-size:13px; color:var(--muted)}

/* ---------- glossary ---------- */
.gloss dt{font-weight:800; margin-top:14px}
.gloss dd{margin:4px 0 0; font-size:14px}
.gloss .part{margin-top:6px}
.gloss .part b{color:var(--cyan); font-size:12px; letter-spacing:.08em; text-transform:uppercase}

/* ---------- tour ---------- */
.tour-card{border:1px dashed var(--cyan); border-radius:var(--radius); padding:16px; margin-bottom:14px; background:rgba(103,239,255,.05)}
.tour-card h2{color:var(--cyan)}
.tour-progress{font-size:13px; color:var(--muted); margin-bottom:8px}

/* ---------- misc ---------- */
.muted{color:var(--muted)} .small{font-size:13px}
.center{text-align:center}
.mt{margin-top:14px} .mb{margin-bottom:14px}
.divider{border:0; border-top:1px solid var(--border); margin:14px 0}
.alert-list{display:grid; gap:8px}
.alert-item{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--panel2); font-size:13.5px}
.explain{background:rgba(103,239,255,.05); border:1px solid #29525c; border-radius:12px; padding:12px 14px; font-size:14px; margin:10px 0}
.explain b{color:var(--cyan)}
.warnbox{background:rgba(255,208,121,.06); border:1px solid #5f4a22; border-radius:12px; padding:12px 14px; font-size:14px; margin:10px 0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--cyan); color:#04222a; padding:10px 16px; z-index:100; font-weight:800; border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
button{font-family:var(--font)}

/* skeleton for unknown values */
.unknown-val{color:var(--muted); font-style:italic; border-bottom:1px dashed var(--border)}

/* ---------- coin art ---------- */
.medallion{width:44px; height:44px; flex:none; border-radius:50%; object-fit:contain}
.coin-btn img.medallion{width:44px; height:44px; flex:none}

/* ---------- expert mode gating ---------- */
.expert-only{display:none}
html[data-mode="expert"] .expert-only{display:block}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .view.active{animation:none}
}
html.paused-motion *, html.paused-motion *::before, html.paused-motion *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
}
html.paused-motion .view.active{animation:none}

/* larger text respect */
@media (min-width:760px){
  .hero h1{font-size:38px}
  main{padding-left:24px; padding-right:24px}
}