/* LeakGuard — Spotify-style theme (black, dark cards, green pills) */
:root{
  --bg:#121212; --surface:#181818; --surface2:#1f1f1f; --elev:#282828;
  --ink:#ffffff; --muted:#b3b3b3; --faint:#a7a7a7;
  --line:#2a2a2a;
  --green:#1ed760; --green-dark:#1db954;
  --good:#1ed760; --warn:#ffa42b; --orange:#ff7a45; --bad:#ff4d6d;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:#fff}
::selection{background:var(--green);color:#000}

/* skip link (Phase 96): off-screen until keyboard focus lands on
   it, then a visible pill at the top-left — mouse/touch users
   never see it. */
.skipLink{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--green);color:#000;font-weight:800;font-size:14px;
  padding:10px 18px;border-radius:999px;text-decoration:none;
  transition:top .15s;
}
.skipLink:focus{top:12px;color:#000}

/* ---------- top bar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 20px;position:sticky;top:0;z-index:50;background:#000;
}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap}
.topbar nav a{
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:700;
  padding:8px 14px;border-radius:999px;transition:.15s;
}
.topbar nav a:hover{color:#fff;background:var(--elev)}
.liveDot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 0 0 rgba(30,215,96,.5);animation:pulseDot 2.2s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(30,215,96,.45)}70%{box-shadow:0 0 0 7px rgba(30,215,96,0)}100%{box-shadow:0 0 0 0 rgba(30,215,96,0)}}

/* ---------- layout & hero ---------- */
main{max-width:880px;margin:0 auto;padding:28px 16px 64px}
.hero{text-align:center;padding:36px 6px 12px}
.pill{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  color:#fff;background:var(--elev);
}
.hero h1{font-size:42px;line-height:1.12;margin:18px 0 12px;font-weight:900;letter-spacing:-1px}
.sub{color:var(--muted);max-width:620px;margin:0 auto;font-size:16px;line-height:1.6}
.heroStats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.heroStats .stat{background:var(--surface);border-radius:var(--radius);padding:13px 18px;min-width:118px}
.heroStats .stat b{display:block;font-size:19px}
.heroStats .stat span{color:var(--faint);font-size:12px}

/* ---------- cards & sections ---------- */
.card{
  background:var(--surface);border-radius:var(--radius);
  padding:24px;margin-top:20px;scroll-margin-top:80px;
}
.card.warn{background:#241d0d}
.card.warn h2{color:#ffd97a}
h2{margin:0 0 10px;font-size:20px;display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.3px}
h2 .step{
  flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-size:14px;color:#000;background:var(--green);font-weight:800;
}
h3{font-size:16px;margin:20px 0 8px;font-weight:700}
p{line-height:1.65;color:#e8e8e8}
ul,ol{line-height:1.7;padding-left:20px;color:#e8e8e8}
.hint{color:var(--faint);font-size:13px;line-height:1.6}

/* ---------- forms ---------- */
label{display:block;margin:13px 0;font-size:13.5px;color:#e8e8e8;font-weight:700}
input,select,textarea{
  width:100%;margin-top:6px;padding:12px 14px;border-radius:8px;font-size:15px;font-weight:400;
  border:1px solid transparent;background:var(--elev);color:#fff;outline:none;transition:.15s;
}
input::placeholder{color:#8f8f8f}
input:hover,select:hover,textarea:hover{border-color:#4d4d4d}
input:focus,select:focus,textarea:focus{border-color:#fff}
textarea{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;line-height:1.55}
button{
  background:var(--green);color:#000;border:0;border-radius:999px;
  padding:12px 24px;font-size:14.5px;font-weight:800;cursor:pointer;transition:.15s;letter-spacing:.2px;
}
button:hover{background:#3be477;transform:scale(1.03)}
button:active{transform:scale(.99)}
button:disabled{opacity:.5;cursor:wait;transform:none}
.btnLink{
  display:inline-block;background:transparent;color:#fff;text-decoration:none;border:1px solid #727272;
  border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:700;transition:.15s;
}
.btnLink:hover{border-color:#fff;transform:scale(1.02)}
.rowBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.status{margin-top:16px;padding:13px 16px;border-radius:10px;background:var(--elev);font-size:14.5px;animation:statusIn .3s ease}
.status.err{background:#3d1620;color:#ffc9d4}
@keyframes statusIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- scan results ---------- */
.scoreRow{display:flex;gap:22px;align-items:center;margin-top:18px;flex-wrap:wrap}
.scoreBox{position:relative;width:132px;height:132px;flex:none}
.scoreBox svg{transform:rotate(-90deg)}
.scoreBox .ringBg{stroke:#2e2e2e}
.scoreBox .ringFg{stroke:var(--green);transition:stroke-dashoffset 1s cubic-bezier(.22,.8,.3,1),stroke .4s}
.scoreBox .scoreCenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.scoreBox .scoreCenter span{font-size:37px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.scoreBox .scoreCenter small{color:var(--faint);font-size:11px;margin-top:4px;max-width:86px}
.sev-low{color:var(--good)} .sev-med{color:var(--warn)} .sev-high{color:var(--orange)} .sev-crit{color:var(--bad)}
.breachChip{
  display:inline-block;background:#3d1620;color:#ffc9d4;
  border-radius:999px;padding:6px 13px;margin:3px;font-size:13px;font-weight:700;
  animation:chipIn .35s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes chipIn{from{opacity:0;transform:scale(.88) translateY(4px)}to{opacity:1;transform:none}}
.tags a,.tag{
  display:inline-block;background:var(--elev);color:#fff;border-radius:999px;
  padding:7px 13px;margin:3px;font-size:13px;font-weight:600;text-decoration:none;transition:.15s;
}
.tags a:hover{background:#333}

/* ---------- broker cards / progress ---------- */
.progressTrack{height:6px;border-radius:99px;background:#2e2e2e;overflow:hidden;margin:8px 0 4px}
#brokerBar,.progressTrack>div{height:100%;width:0;border-radius:99px;background:var(--green);transition:width .6s ease}
.broker{
  border-radius:var(--radius);padding:15px 16px;margin-top:10px;
  background:var(--surface2);transition:.15s;
}
.broker:hover{background:#262626}
.broker .bhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.broker .bname{font-weight:700;font-size:15px}
.broker .bmeta{color:var(--faint);font-size:12px;margin-left:8px}
.broker select{width:auto;margin:0;padding:7px 9px;font-size:13.5px}
.broker .bbtns{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.broker .bbtns a,.broker .bbtns button{font-size:13px;padding:9px 16px}
.st-removed{opacity:.5}
.st-removed .bname{text-decoration:line-through}
.letterBox{border:1px solid #333;border-radius:var(--radius);padding:18px;margin-top:16px;background:var(--surface2)}
.confirmRow{display:flex;align-items:center;gap:9px;margin-top:14px;cursor:pointer}
.confirmRow input{width:auto;margin:0;accent-color:var(--green);transform:scale(1.25)}
#queueProfile{background:#000;border-radius:8px;padding:3px 9px;font-size:13px;word-break:break-all;color:var(--green)}
.runRow{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.runRow .bbtns{margin-top:0}

#probeOut p{margin:6px 0;font-size:14.5px;line-height:1.55}
#probeOut{background:var(--surface2);border-radius:var(--radius);padding:14px 16px}

/* zero-touch automation panel */
.autoBtn{font-size:16.5px;padding:15px 30px}
#autoFeed{margin-top:14px;max-height:300px;overflow-y:auto;background:#000;border-radius:var(--radius);padding:12px 16px}
.feedLine{margin:5px 0;font-size:14px;line-height:1.5;color:#e8e8e8}
.advDetails{margin-top:10px}
.advDetails summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:10px 2px;color:var(--muted)}
.advDetails summary:hover{color:#fff}

footer{text-align:center;color:var(--faint);font-size:13px;margin-top:32px;line-height:1.6}
footer a{color:var(--muted)}

/* ---------- account & privacy center ---------- */
.acctArea{display:flex;align-items:center;gap:10px;flex:none}
.acctLabel{color:var(--muted);font-size:13px;font-weight:700}
.acctBtn{
  background:transparent;color:#fff;border:1px solid #727272;
  padding:8px 18px;font-size:13.5px;
}
.acctBtn:hover{background:var(--elev);border-color:#fff;transform:none}
.btnGhost{background:transparent;color:#fff;border:1px solid #727272}
.btnGhost:hover{background:var(--elev);border-color:#fff}
.dangerBtn{background:transparent;color:#ff8fa5;border:1px solid #7a2438}
.dangerBtn:hover{background:#3d1620;transform:none}
.idRow,.consentRow{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--surface2);border-radius:10px;padding:11px 14px;margin-top:8px;
}
.idRow .kindTag{
  display:inline-block;background:var(--elev);border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);margin-right:9px;
}
.idRow .idVal{font-weight:600;font-size:14.5px;word-break:break-all}
.idRow .memberSelect{width:auto;margin:0;padding:6px 9px;font-size:13px;flex:none}
.miniBtn{padding:7px 15px;font-size:13px}
.idRow.dimmed{opacity:.55}
.findingMeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 2px 3px}
.findingNote{font-size:12.5px;color:var(--faint)}
.disputeBox{background:var(--surface2);border-radius:10px;padding:11px 16px;margin:4px 0 8px;font-size:13.5px;line-height:1.5}
.disputeBox ol{margin:0;padding-left:20px}
.disputeBox .btnLink{margin-top:8px;padding:7px 15px;font-size:13px}
.consentRow .cText{flex:1}
.consentRow .cText b{display:block;font-size:14.5px}
.consentRow .cText span{color:var(--faint);font-size:12.5px;line-height:1.45;display:block;margin-top:2px}
.consentRow input{width:auto;margin:0;accent-color:var(--green);transform:scale(1.35);flex:none}
.checkRow{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;margin-top:10px}
.checkRow input{width:auto;margin:2px 0 0;accent-color:var(--green);transform:scale(1.3);flex:none}

/* ---------- action center (Stage S9) ---------- */
#acScoreText{font-size:16.5px;font-weight:700;margin:0}
#acChips{margin-top:14px}
#acChips:empty{margin-top:0}
#acActionBtn{font-size:15.5px;padding:13px 28px}
#acActionBtn:disabled{cursor:default}

/* ---------- exposure map (Stage S14) ---------- */
#graphWrap{overflow-x:auto;margin-top:6px}
.graphSvg{min-width:640px;width:100%;height:auto;display:block}
.graphHead{fill:var(--muted);font-size:13px;font-weight:700;letter-spacing:.4px}
.graphNone{fill:var(--faint);font-size:12.5px}
.graphNode{fill:var(--surface2);stroke:var(--line)}
.graphMore{stroke-dasharray:4 3}
.graphLabel{fill:#fff;font-size:12.5px;font-weight:600}
.graphEdge{stroke:#4d4d4d;stroke-width:1.5;opacity:.75}
#propagationWrap{margin-top:14px}
.propagationList{margin:8px 0 0;padding-left:20px}
.propagationList li{margin:5px 0}
.policyTable{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.policyTable th,.policyTable td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.policyTable th{background:var(--surface2)}
.policyChecks{margin:10px 0;padding-left:20px}
.policyChecks li{margin:7px 0}

/* reveal on scroll (JS-added class only) */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1)}

/* spinner (on green buttons — dark spinner) */
.spinner{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:-2px;margin-right:8px;
  border:2.5px solid rgba(0,0,0,.25);border-top-color:#000;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* niceties */
input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px var(--elev) inset;-webkit-text-fill-color:#fff;caret-color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#4d4d4d;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:var(--bg)}

@media(max-width:640px){
  .hero h1{font-size:30px}
  .sub{font-size:15px}
  .card{padding:20px 16px}
  .topbar nav{display:none}
  .scoreRow{gap:16px}
  /* Item 37 (2026-10-11): the privacy policy table's min-content
     width (~306px) overflowed a 320px viewport by 18px. Tighter
     cells + anywhere-wrapping lets it fit small phones. */
  .policyTable{font-size:13px}
  .policyTable th,.policyTable td{padding:7px 6px;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- auth screens + dedicated /signin page ----------
   Owner direction, 2026-10-08: sign-in gets its own page (/signin)
   in LeakGuard's settled Spotify language (f7108f3): #121212 page,
   #181818 card, #b3b3b3 secondary text, green pill primary button.
   The page layout (single form column, soft glow above the card)
   is adapted from "Authentication Screens (Login/Register)" by
   Muff & Nipps (Figma Community, CC BY 4.0); the glow is Spotify
   green, not the original's purple/pink. (On-page credit line
   removed at the owner's order, 2026-10-08.) Scoped to #authForms
   / #resetBox plus body.signinPage so the rest of the app is
   untouched. */
#authForms,#resetBox{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;margin-top:18px;
}
#authForms::before,#resetBox::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-130px;transform:translateX(-50%);
  width:340px;height:190px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,215,96,.28),rgba(30,215,96,0));
}
#authForms .authWelcome,#resetBox .authWelcome{
  margin:0 0 8px;font-size:27px;font-weight:800;letter-spacing:-.5px;color:#fff;
}
#authForms form,#resetBox form{position:relative;max-width:420px}
#authForms .hint,#resetBox .hint{color:var(--muted)}
#authForms label,#resetBox label{color:var(--muted);font-size:12.5px}
#authForms input,#resetBox input{
  background:#1f1f1f;border:1px solid #404040;border-radius:8px;color:#fff;
}
#authForms input:hover,#resetBox input:hover{border-color:#5a5a5a}
#authForms input:focus,#resetBox input:focus{
  border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
#authForms input:-webkit-autofill,#resetBox input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 60px #1f1f1f inset;
}
#authForms .rowBtns,#resetBox .rowBtns{
  flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px;
}
#acLoginBtn,#rsBtn{width:100%}
#authForms .btnGhost,#resetBox .btnGhost{
  background:transparent;border:1px solid #727272;color:#fff;border-radius:999px;
}
#authForms .btnGhost:hover,#resetBox .btnGhost:hover{
  background:transparent;border-color:#fff;transform:scale(1.01);
}
#authForms a{color:var(--muted)}
#authForms a:hover{color:#fff}

/* The dedicated page: everything except the account panel goes
   away, the panel becomes a centered card on the black page. */
body.signinPage main{max-width:560px;padding-top:40px}
body.signinPage main>*:not(#account){display:none!important}
body.signinPage footer{display:none!important}
body.signinPage .topbar nav{display:none!important}
body.signinPage #account{
  background:transparent;border:0;padding:0;margin:0;
}
body.signinPage #account>h2,body.signinPage #account>p:has(.pill){display:none}
body.signinPage #authForms,body.signinPage #resetBox{margin-top:0}
@media(max-width:640px){
  #authForms,#resetBox{padding:26px 18px}
  body.signinPage main{padding-top:22px}
}