:root{
  --bg:#0B0B0D; --panel:#16171B; --line:#2A2B31; --text:#F4F1EA; --muted:rgba(244,241,234,.62);
  --yellow:#F7C948; --gold:#E9C46A; --green:#3DDC84; --red:#FF5A4E;
  --holo:linear-gradient(120deg,#7AF7FF,#B388FF 35%,#FF9AD5 65%,#FFD36E);
  --sans:'Inter Tight',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
img{max-width:100%;display:block}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;max-width:760px;width:100%;margin:0 auto}
.brand img{height:26px;width:auto}
.top nav{display:flex;gap:18px;font-size:15px}
.top nav[hidden]{display:none}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a.on,.top nav a:hover{color:var(--text)}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:12px 20px 40px}
.legal{max-width:560px;margin:0 auto;padding:18px 20px 28px;font-size:12px;color:rgba(244,241,234,.42);text-align:center}

.label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.label.muted{color:var(--muted)}
h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:44px;line-height:1.05;margin:14px 0 18px;letter-spacing:-.01em}
h2{font-size:22px;margin:0 0 6px;font-weight:600}
p{margin:0 0 12px}
.muted{color:var(--muted)}

.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:0;border-radius:14px;background:var(--yellow);color:#0B0B0D;font:600 19px var(--sans);padding:20px;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.99)}
.btn.big{padding:26px;font-size:21px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn[disabled]{opacity:.5;cursor:default}
.btn svg{width:26px;height:26px}
.tip{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:15px;color:var(--muted)}
.left{margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--muted);text-align:center}
.left b{color:var(--text)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.stack>*+*{margin-top:12px}

/* checking */
.shot{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:3/4;max-height:58vh;margin:8px auto 18px}
.shot img{width:100%;height:100%;object-fit:contain}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(122,247,255,.25) 42%,rgba(255,154,213,.28) 50%,rgba(255,211,110,.22) 58%,transparent 70%);background-size:250% 100%;animation:sh 1.6s linear infinite;mix-blend-mode:screen}
@keyframes sh{from{background-position:120% 0}to{background-position:-120% 0}}
.reading{text-align:center;font-family:var(--serif);font-style:italic;font-size:28px}
.dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* result */
.result{position:relative;border-radius:20px;padding:1.5px;background:var(--holo)}
.result>.inner{background:var(--panel);border-radius:19px;overflow:hidden}
.result .photo{background:#000;max-height:46vh;display:flex;justify-content:center}
.result .photo img{max-height:46vh;object-fit:contain}
.block{padding:18px 20px;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0}
.cardname{font-size:26px;font-weight:600;line-height:1.2}
.price{font-family:var(--mono);font-size:34px;color:var(--gold);letter-spacing:-.01em}
.small{font-size:14px;color:var(--muted)}
.chip{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid currentColor}
.chip.low{color:var(--green)} .chip.medium{color:var(--yellow)} .chip.high{color:var(--red)} .chip.unclear{color:var(--muted)}
.signals{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:15px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.verdict{padding:22px 20px;border-top:1px solid var(--line)}
.verdict .line{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.1;margin:8px 0 10px}
.verdict.grade .line{color:var(--gold)} .verdict.fake .line{color:var(--red)} .verdict.dont .line,.verdict.raw .line{color:var(--text)}
.maths{font-family:var(--mono);font-size:13px;color:var(--muted);line-height:1.6}
.actions{display:grid;gap:10px;margin-top:18px}

/* scans list */
.list{display:grid;gap:10px}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;text-decoration:none;cursor:pointer}
.row:hover{border-color:#3a3b42}
.row img{width:64px;height:84px;object-fit:cover;border-radius:8px;background:#000}
.row .n{font-weight:600;line-height:1.25}
.row .p{font-family:var(--mono);color:var(--gold);font-size:14px}
.vchip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
.vchip.grade{background:rgba(233,196,106,.16);color:var(--gold)}
.vchip.dont,.vchip.raw{background:rgba(244,241,234,.08);color:var(--muted)}
.vchip.fake{background:rgba(255,90,78,.14);color:var(--red)}
.vchip.maybe{background:rgba(247,201,72,.12);color:var(--yellow)}
.vchip.no_price,.vchip.not_card{background:rgba(244,241,234,.06);color:var(--muted)}
.empty{text-align:center;padding:40px 20px}

/* forms */
.form{display:grid;gap:14px;margin-top:10px}
.form label{font-size:14px;color:var(--muted);display:grid;gap:6px}
.form input{background:#0f1013;border:1px solid var(--line);border-radius:12px;color:var(--text);font:17px var(--sans);padding:15px 14px;outline:none}
.form input:focus{border-color:var(--yellow)}
.err{color:var(--red);font-size:15px;min-height:1em}
.hide{display:none!important}
@media (max-width:420px){h1{font-size:38px}.price{font-size:30px}.verdict .line{font-size:28px}}
@media (prefers-reduced-motion:reduce){.shimmer::after,.dots::after{animation:none}}