/* QTC Exposure Lab — quantum audit-terminal aesthetic.
 * Deep-space dark, cyan scan glow, magenta alert accents. Each verdict
 * gets its own color language: red = exposed, amber = latent,
 * teal = clean, violet = safe. */
:root{
  --bg:#04060c;
  --panel:#0a0f1c;
  --panel2:#0d1424;
  --line:#1b2740;
  --txt:#dbe7ff;
  --dim:#8fa1c2;
  --cyan:#22d3ee;
  --magenta:#e879f9;
  --red:#ff5d6c;
  --amber:#fbbf24;
  --teal:#2dd4bf;
  --violet:#a78bfa;
}
body{
  background:
    radial-gradient(1200px 500px at 15% -5%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(232,121,249,.06), transparent 60%),
    var(--bg);
  color:var(--txt);
}
.hero{ position:relative; overflow:hidden; }
.scan-beam{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(34,211,238,.025) 3px 4px);
}
.hero h1 .hl{
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ max-width:72ch; }
.legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.lg{
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.lg.v-exposed{ color:var(--red); border-color:rgba(255,93,108,.45); }
.lg.v-latent{ color:var(--amber); border-color:rgba(251,191,36,.45); }
.lg.v-clean{ color:var(--teal); border-color:rgba(45,212,191,.45); }
.lg.v-safe{ color:var(--violet); border-color:rgba(167,139,250,.5); }
.hero-note{ color:var(--dim); font-size:.9rem; margin-top:.8rem; }
.hero-note a, .sec-sub a, .steps a, .method-grid a{ color:var(--cyan); }

/* threat-model cards */
.how-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.how-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem;
  position:relative; overflow:hidden;
}
.how-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.how-card.exposed::before{ background:linear-gradient(90deg,var(--red),transparent); }
.how-card.latent::before{ background:linear-gradient(90deg,var(--amber),transparent); }
.how-card.clean::before{ background:linear-gradient(90deg,var(--teal),transparent); }
.how-card.safe::before{ background:linear-gradient(90deg,var(--violet),var(--cyan)); }
.how-card h3{ margin:.1rem 0 .5rem; font-size:1.05rem; }
.how-card.exposed h3{ color:var(--red); }
.how-card.latent h3{ color:var(--amber); }
.how-card.clean h3{ color:var(--teal); }
.how-card.safe h3{ color:var(--violet); }
.how-card p{ color:var(--dim); font-size:.92rem; margin:.2rem 0 .6rem; }
.how-card ul{ margin:.4rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--txt); }
.how-card li{ margin:.35rem 0; }

/* auditor */
.sec-sub{ color:var(--dim); max-width:78ch; }
.audit-box{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem; margin-top:1rem;
  box-shadow:0 0 40px rgba(34,211,238,.05) inset;
}
#addrInput{
  width:100%; box-sizing:border-box; resize:vertical;
  background:#060a14; color:var(--cyan); border:1px solid var(--line);
  border-radius:10px; padding:.8rem 1rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem; line-height:1.6;
}
#addrInput:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
#addrInput::placeholder{ color:#3d4d6e; }
.btn-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.btn{
  position:relative; overflow:hidden;
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:.6rem 1.2rem; font-weight:700; cursor:pointer;
  font-size:.92rem;
}
.btn:hover{ border-color:var(--cyan); }
.btn.primary{
  background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(232,121,249,.18));
  border-color:rgba(34,211,238,.5);
}
.btn.ghost{ background:transparent; color:var(--dim); }
.btn:disabled{ opacity:.6; cursor:wait; }
.btn .btn-scan{
  position:absolute; top:0; bottom:0; width:40%; left:-40%;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.35),transparent);
}
.btn.scanning .btn-scan{ animation:scan 1.1s linear infinite; }
@keyframes scan{ to{ left:110%; } }
.hint{ color:var(--dim); font-size:.8rem; margin-left:auto; }
.status{ margin-top:.7rem; min-height:1.4em; color:var(--dim); font-size:.9rem; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* summary */
.summary{
  margin-top:1.2rem; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.4rem;
}
.sum-grid{ display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; }
.sum-score{ text-align:center; }
.ring{
  width:110px; height:110px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--cyan) var(--p,0deg), #141d33 0deg);
  position:relative;
}
.ring::before{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--panel); }
.ring span{ position:relative; font-size:1.5rem; font-weight:800; }
.ring span.good{ color:var(--teal); } .ring span.mid{ color:var(--amber); } .ring span.bad{ color:var(--red); }
.sum-cap{ margin-top:.5rem; font-size:.85rem; font-weight:700; }
.sum-cap span{ color:var(--dim); font-weight:400; font-size:.78rem; }
.sum-stats{ display:flex; gap:1.4rem; flex-wrap:wrap; flex:1; }
.stat{ display:flex; flex-direction:column; }
.stat .n{ font-size:1.5rem; font-weight:800; }
.stat .l{ color:var(--dim); font-size:.8rem; }
.stat.good .n{ color:var(--teal); } .stat.mid .n{ color:var(--amber); } .stat.bad .n{ color:var(--red); }
.stat em{ font-style:normal; color:var(--amber); }
.sum-warn{ color:var(--amber); margin:.9rem 0 0; font-size:.92rem; }
.sum-ok{ color:var(--teal); margin:.9rem 0 0; font-size:.92rem; }

/* result cards */
.results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; margin-top:1.2rem; }
.result-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.2rem; border-top-width:3px; animation:fadein .3s ease;
}
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} }
.result-card.v-exposed{ border-top-color:var(--red); }
.result-card.v-latent{ border-top-color:var(--amber); }
.result-card.v-clean{ border-top-color:var(--teal); }
.result-card.v-safe{ border-top-color:var(--violet); }
.result-card.v-unknown{ border-top-color:#64748b; }
.result-card.v-invalid{ border-top-color:#64748b; opacity:.85; }
.rc-head{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.verdict-tag{ font-weight:800; font-size:.8rem; letter-spacing:.05em; padding:.25rem .6rem; border-radius:6px; }
.v-exposed .verdict-tag{ background:rgba(255,93,108,.14); color:var(--red); }
.v-latent .verdict-tag{ background:rgba(251,191,36,.13); color:var(--amber); }
.v-clean .verdict-tag{ background:rgba(45,212,191,.12); color:var(--teal); }
.v-safe .verdict-tag{ background:rgba(167,139,250,.14); color:var(--violet); }
.v-unknown .verdict-tag, .v-invalid .verdict-tag{ background:rgba(100,116,139,.15); color:#94a3b8; }
.chain-tag{
  font-size:.75rem; color:var(--dim); border:1px solid var(--line);
  padding:.2rem .55rem; border-radius:999px;
}
.sample-badge{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; color:#0a0f1c;
  background:var(--amber); padding:.2rem .55rem; border-radius:6px;
}
.rc-addr{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem; color:var(--cyan); margin-top:.6rem; word-break:break-all;
}
.rc-label{ color:var(--dim); font-size:.82rem; margin-top:.25rem; font-style:italic; }
.rc-title{ font-weight:700; margin:.55rem 0 .3rem; font-size:.98rem; }
.rc-evidence{ margin:.3rem 0 .5rem; padding-left:1.1rem; font-size:.87rem; color:var(--txt); }
.rc-evidence li{ margin:.3rem 0; }
.rc-evidence li::marker{ color:var(--dim); }
.risk-line{ font-size:.9rem; margin:.4rem 0; color:var(--txt); }
.risk-line strong{ color:var(--red); }
.risk-line.dim{ color:var(--dim); }
.rc-rec{
  margin-top:.6rem; padding:.6rem .8rem; border-radius:8px; font-size:.86rem;
  background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.2);
}
.rc-rec-h{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--cyan); margin-bottom:.25rem; }
.v-exposed .rc-rec{ background:rgba(255,93,108,.06); border-color:rgba(255,93,108,.25); }
.v-exposed .rc-rec-h{ color:var(--red); }

/* playbook */
.steps{ display:grid; gap:.8rem; counter-reset:step; }
.step{
  display:flex; gap:1rem; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:1rem 1.2rem; align-items:flex-start;
}
.step .n{
  flex:0 0 2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(167,139,250,.25));
  border:1px solid rgba(34,211,238,.4); color:var(--cyan);
}
.step h3{ margin:.15rem 0 .3rem; font-size:1rem; }
.step p{ margin:0; color:var(--dim); font-size:.9rem; }

/* methodology */
.method-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.method-grid > div{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem;
}
.method-grid h3{ margin:.1rem 0 .5rem; font-size:1rem; color:var(--cyan); }
.method-grid ul{ margin:0; padding-left:1.1rem; font-size:.88rem; }
.method-grid li{ margin:.4rem 0; color:var(--txt); }
.method-grid code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8em;
  background:#060a14; padding:.1em .35em; border-radius:4px; color:var(--teal);
}
.sources{ color:var(--dim); font-size:.85rem; margin-top:1rem; max-width:90ch; }

footer{ margin-top:3rem; }
footer .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em; overflow-wrap:anywhere; }
@media (max-width:640px){
  .sum-grid{ flex-direction:column; align-items:flex-start; }
  .hint{ margin-left:0; }
}

/* a11y 2026-10-01: explicit link color (was browser-default #0000ee, fails on dark bg) */
a,a:visited{color:#22d3ee}