:root{
  --bg:#08070c; --panel:#100e18; --panel2:#161226; --line:#241d3a;
  --violet:#7c3aed; --neon:#b98cff; --neon-bright:#d4b3ff;
  --red:#ff3d5e; --green:#3dffb0; --text:#e8e4f2; --muted:#8b84a3; --seal:#d92038;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(124,58,237,.16), transparent),
    radial-gradient(ellipse 40% 30% at 90% 100%, rgba(124,58,237,.07), transparent);
}
.wrap{max-width:840px;margin:0 auto;padding:30px 18px 60px}

header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:14px}
.kanji{font-size:30px;line-height:1;color:var(--violet);writing-mode:vertical-rl;letter-spacing:4px;text-shadow:0 0 18px rgba(124,58,237,.6);user-select:none}
h1{font-family:'Unbounded',sans-serif;font-weight:800;font-size:19px;letter-spacing:.06em}
h1 span{color:var(--neon)}
.tg{display:inline-flex;margin-left:9px;vertical-align:-2px;color:#2aabee;opacity:.92;transition:all .15s}
.tg:hover{color:#54c2ff;opacity:1;filter:drop-shadow(0 0 8px rgba(42,171,238,.8))}
.tg svg{width:19px;height:19px;display:block}
.sub{font-size:10px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;margin-top:3px}
.price-head{text-align:right}
.price-head .p{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600}
.price-head .t{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:2px}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab{
  font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;
  padding:9px 16px 9px 14px;border:1px solid var(--line);border-radius:2px;
  background:var(--panel);color:var(--muted);cursor:pointer;transition:all .15s;letter-spacing:.05em;
  display:flex;align-items:center;gap:8px;
}
.tab:hover{border-color:var(--violet);color:var(--text)}
.tab.active{
  background:linear-gradient(180deg, rgba(124,58,237,.25), rgba(124,58,237,.08));
  border-color:var(--violet);color:var(--neon-bright);
  box-shadow:0 0 20px rgba(124,58,237,.25), inset 0 0 12px rgba(124,58,237,.1);
}
.tab .st{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;transition:all .3s}
.tab .st.g{background:var(--green);box-shadow:0 0 7px var(--green)}
.tab .st.r{background:var(--red);box-shadow:0 0 7px var(--red)}
.tab .st.n{background:var(--neon);box-shadow:0 0 7px var(--neon)}

/* ---- core verdict ---- */
.core{
  position:relative;border:1px solid var(--line);border-radius:3px;background:var(--panel);
  padding:26px 28px;margin-bottom:12px;min-height:180px;overflow:hidden;
}
.core::before{
  content:"";position:absolute;top:-20%;right:110px;width:1px;height:140%;
  background:linear-gradient(180deg, transparent, var(--violet), transparent);
  transform:rotate(18deg);opacity:.7;box-shadow:0 0 14px 1px rgba(124,58,237,.8);
}
.c-label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.scan{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--neon);min-height:20px}
.scan::after{content:"_";animation:pulse .8s infinite}
.v-main{font-family:'Unbounded',sans-serif;font-size:clamp(16px,3.4vw,23px);font-weight:600;line-height:1.35;max-width:560px;opacity:0;transition:opacity .5s}
.v-expl{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.65;max-width:540px;opacity:0;transition:opacity .5s .15s}
.v-prio{
  margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:13px;
  padding:10px 14px;border-left:2px solid var(--violet);background:var(--panel2);
  max-width:540px;opacity:0;transition:opacity .5s .25s;line-height:1.6;
}
.shown .v-main,.shown .v-expl,.shown .v-prio{opacity:1}
.hl-red{color:var(--red)} .hl-green{color:var(--green)} .hl-neon{color:var(--neon-bright)}
.seal{
  position:absolute;right:24px;top:46px;transform:rotate(-6deg);
  width:70px;height:70px;border:2.5px solid var(--seal);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--seal);font-weight:700;
  writing-mode:vertical-rl;letter-spacing:2px;opacity:0;transition:opacity .5s .3s;
  filter:drop-shadow(0 0 10px rgba(217,32,56,.35));user-select:none;
}
.shown .seal{opacity:.92}
.seal.ok{border-color:var(--green);color:var(--green);filter:drop-shadow(0 0 10px rgba(61,255,176,.3))}
.strength{
  position:absolute;right:34px;bottom:22px;display:flex;gap:6px;align-items:flex-end;
  opacity:0;transition:opacity .5s .4s;
}
.shown .strength{opacity:1}
.strength i{display:block;width:5px;border-radius:2px;background:var(--line)}
.strength i.on{background:var(--neon);box-shadow:0 0 8px rgba(185,140,255,.6)}
.strength i:nth-child(1){height:10px}.strength i:nth-child(2){height:16px}
.strength i:nth-child(3){height:22px}.strength i:nth-child(4){height:28px}
.strength .lb{font-size:9px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-right:6px;align-self:center}
@media(max-width:640px){.seal,.strength{display:none}}

/* ---- chart ---- */
.chart-panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:18px;margin-bottom:12px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.chart-head h3{font-family:'Unbounded',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.08em}
.chart-head .note{font-size:11px;color:var(--muted)}
#chart{width:100%;display:block}

/* ---- crowd ---- */
.crowd{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px 18px;margin-bottom:12px}
.crowd-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.crowd-bar{position:relative;height:10px;background:var(--panel2);border-radius:5px;overflow:hidden}
.crowd-bar .fill{position:absolute;top:0;bottom:0;left:50%;transition:all .8s cubic-bezier(.2,.8,.2,1)}
.crowd-bar .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--muted);opacity:.5}
.crowd-txt{margin-top:10px;font-size:12.5px;color:var(--muted)}
.crowd-txt b{color:var(--text);font-weight:600}

/* ---- magnets ---- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.cols{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:18px}
.panel h3{font-family:'Unbounded',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.08em;margin-bottom:4px}
.panel .note{font-size:11px;color:var(--muted);margin-bottom:10px}
.lvl-head{display:flex;gap:12px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
.lvl-head .a{min-width:92px}.lvl-head .b{flex:1}.lvl-head .c{min-width:52px;text-align:right}
.lvl{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.lvl:last-child{border-bottom:none}
.lvl .price{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;min-width:92px}
.lvl .bar{flex:1;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.lvl .bar i{display:block;height:100%;border-radius:3px}
.lvl.long .bar i{background:linear-gradient(90deg,var(--green),transparent);opacity:.8}
.lvl.short .bar i{background:linear-gradient(90deg,var(--red),transparent);opacity:.8}
.lvl .pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);min-width:52px;text-align:right}

.footer{margin-top:24px;font-size:11px;color:var(--muted);line-height:1.7;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.err{color:var(--red);font-size:12px;margin-top:8px;display:none}

/* ---- analyzing state: whole board thinks ---- */
.chart-panel,.crowd,.panel{transition:opacity .3s, filter .3s}
.analyzing .chart-panel,.analyzing .crowd,.analyzing .panel{
  opacity:.35;filter:blur(2px) saturate(.4);
  animation:think 1.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes think{0%,100%{opacity:.35}50%{opacity:.15}}