/* TRIED UI — dark, hairline, 21st.dev / shadcn-style primitives. Shared by index.html and report.html. */
:root {
  --bg:#08080a; --bg-2:#0e0e11; --card:#111114; --card-2:#16161a;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --fg:#fafafa; --fg-2:#d4d4d8; --mut:#8b8b94; --mut-2:#5d5d66;
  --accent:#a3e635; --accent-ink:#0b1204;
  --works:#34d399; --demo:#fbbf24; --clone:#a78bfa; --ca:#fb923c; --dead:#a1a1aa; --danger:#f87171; --nt:#60a5fa;
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif; --mono:"Geist Mono", ui-monospace, monospace; --serif:"Instrument Serif", Georgia, serif;
  --r:14px; --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
button, input { font:inherit; color:inherit }
::selection { background:var(--accent); color:var(--accent-ink) }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 24px }
.mono { font-family:var(--mono) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:40; backdrop-filter:blur(14px) saturate(140%); background:rgba(8,8,10,.72); border-bottom:1px solid var(--line) }
.nav .wrap { display:flex; align-items:center; gap:28px; height:60px }
.logo { display:flex; align-items:center; gap:9px; font:700 18px/1 var(--sans); letter-spacing:-.03em }
.logo .g { color:var(--accent) }
.logo > span:first-child { display:inline-flex }
.logo svg { width:30px; height:30px; overflow:visible; transition:transform .4s var(--ease) }
.logo:hover svg { transform:rotate(-10deg) scale(1.08) }
.mascot .p { animation:look 5s var(--ease) infinite }
.logo:hover .mascot .p { animation:derp .5s linear infinite }
@keyframes look { 0%,40%,100% { transform:none } 48%,70% { transform:translate(-1.4px,.6px) } 78%,92% { transform:translate(1.2px,-.8px) } }
@keyframes derp { 25% { transform:translate(1.5px,1px) } 50% { transform:translate(-1px,1.5px) } 75% { transform:translate(-1.5px,-1px) } }
.nav .links { display:flex; gap:22px; font-size:13.5px; color:var(--mut) }
.nav .links a:hover { color:var(--fg) }
.nav .right { margin-left:auto; display:flex; align-items:center; gap:10px }
.icon-btn { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:9px; color:var(--fg-2); transition:.2s }
.icon-btn:hover { border-color:var(--line-2); background:var(--card); color:var(--fg) }
.icon-btn svg { width:15px; height:15px }

/* live pill with ping dot */
.pill { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.02); font:500 12px/1 var(--mono); color:var(--fg-2); white-space:nowrap }
.dot { position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent) }
.dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping 1.6s var(--ease) infinite }
.dot.off { background:var(--mut-2) } .dot.off::after { display:none }
@keyframes ping { 75%,100% { transform:scale(2.6); opacity:0 } }

/* shiny text (21st "animated shiny text") */
.shiny { background:linear-gradient(110deg, var(--mut) 35%, var(--fg) 50%, var(--mut) 65%) 0 0/250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 4s linear infinite }
@keyframes shine { to { background-position:-250% 0 } }

/* ---------- buttons / inputs ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--line-2); background:var(--card); font-weight:500; font-size:14px; cursor:pointer; transition:background .2s, border-color .2s, transform .2s var(--ease); white-space:nowrap }
.btn:hover { background:var(--card-2); border-color:rgba(255,255,255,.22) }
.btn:active { transform:scale(.98) }
.btn.primary { background:var(--fg); color:#09090b; border-color:transparent }
.btn.primary:hover { background:#e4e4e7 }
.btn:disabled { opacity:.55; cursor:wait }
.btn svg { width:15px; height:15px }

/* ---------- verdict badge ---------- */
.badge { --c:var(--dead); display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border-radius:999px; font:600 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent) }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c) }
.badge.lg { height:34px; padding:0 14px; font-size:13px }

/* ---------- coin identity ---------- */
.avatar { position:relative; flex:none; width:36px; height:36px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#27272a,#18181b); border:1px solid var(--line); display:grid; place-items:center; font:600 12px/1 var(--mono); color:var(--mut) }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.avatar.lg { width:64px; height:64px; border-radius:16px; font-size:18px }
.coinline { display:flex; align-items:center; gap:11px; min-width:0 }
.coinline .t { min-width:0 }
.coinline b { display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.coinline small { display:block; color:var(--mut); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ca-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:7px; border:1px solid var(--line); background:rgba(255,255,255,.02); font:500 11.5px/1 var(--mono); color:var(--fg-2); cursor:pointer; transition:.2s; white-space:nowrap; flex:none }
.ca-chip:hover { border-color:var(--line-2); color:var(--fg) }
.ca-chip svg { width:12px; height:12px; opacity:.7 }
.ca-chip.done { color:var(--works); border-color:color-mix(in srgb, var(--works) 40%, transparent) }

/* browser-chrome frame around screenshots */
.frame { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0b0b0d }
.frame .bar { display:flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-bottom:1px solid var(--line); background:#101013 }
.frame .bar i { width:8px; height:8px; border-radius:50%; background:#2a2a30 }
.frame .bar span { margin-left:8px; flex:1; min-width:0; height:17px; border-radius:5px; background:#18181c; font:500 10.5px/17px var(--mono); color:var(--mut); padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.frame .shot { position:relative; aspect-ratio:16/10; background:repeating-linear-gradient(135deg,#0f0f12 0 10px,#0c0c0f 10px 20px) }
.frame .shot img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:top }
.frame .shot .none { position:absolute; inset:0; display:grid; place-items:center; font:500 12px var(--mono); color:var(--mut-2) }

/* spotlight card (mouse-follow glow) */
.spot { position:relative; isolation:isolate }
.spot::before { content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 40%) }
.spot:hover::before { opacity:1 }

/* border beam (21st "border beam") */
.beam { position:relative }
.beam::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--a), transparent 0 70%, var(--accent) 82%, #fff 86%, transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 5s linear infinite }
@property --a { syntax:"<angle>"; inherits:false; initial-value:0deg }
@keyframes spin { to { --a:360deg } }

/* section heads */
.sec { padding:88px 0 0 }
.kicker { font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut) }
.h2 { margin:12px 0 0; font:600 clamp(28px,4vw,40px)/1.1 var(--sans); letter-spacing:-.03em }
.h2 em { font-style:normal; font-weight:700; color:var(--mut) }

/* footer */
.foot { margin-top:110px; border-top:1px solid var(--line); padding:32px 0 44px; color:var(--mut); font-size:13px }
.foot .wrap { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center }
.foot .grow { flex:1 }
.foot a { padding:8px 0 }
.foot a:hover { color:var(--fg) }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:60; padding:10px 16px; border-radius:10px; background:var(--fg); color:#09090b; font-weight:500; font-size:13.5px; transition:.35s var(--ease); pointer-events:none }
.toast.on { transform:translate(-50%,0); opacity:1 }

@media (max-width:720px) {
  .wrap { padding:0 16px }
  .nav .links { display:none }
  .sec { padding-top:64px }
  .ca-chip { height:34px; padding:0 11px; font-size:12px }
  .icon-btn { width:38px; height:38px }
  .foot .grow { flex-basis:100%; order:3 }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important } }