/* Suss — styled per brand guide (suss/design/style-guide.png)
   Colors: bg #0B0F17, surface #121826, teal #20D2A6, safe #22C55E,
   caution #F59E0B, danger #EF4444, text #F8FAFC / #94A3B8. Font: Inter. */
:root{
  --bg:#0B0F17;
  --panel:#121826;
  --panel-2:#1A2233;
  --line:#232C3E;
  --text:#F8FAFC;
  --muted:#94A3B8;
  --accent:#20D2A6;
  --accent-ink:#06281f;
  --safe:#22C55E;
  --caution:#F59E0B;
  --warning:#EF4444;
  --radius:16px;
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:#05070d;color:var(--text);
  font-size:14px;line-height:1.5}

/* ---------- device frame (desktop) ---------- */
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 70% -10%,#101a2e 0%,#05070d 60%)}
.phone{position:relative;width:390px;height:844px;background:var(--bg);border-radius:44px;
  border:10px solid #04060b;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px #1c2740;overflow:hidden}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:120px;height:26px;
  background:#04060b;border-radius:14px;z-index:50}
.app{position:absolute;inset:0;padding-top:44px;display:flex;flex-direction:column;overflow:hidden}
@media (max-width:560px){
  .stage{padding:0}
  .phone{width:100%;height:100vh;height:100dvh;border:none;border-radius:0;box-shadow:none}
  .phone-notch{display:none}
  .app{padding-top:env(safe-area-inset-top,12px)}
}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;padding-top:inherit;display:none;flex-direction:column;overflow-y:auto;
  padding:52px 18px 18px;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.is-active{display:flex}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;min-height:44px}
.topbar-title{font-weight:600;font-size:15px}
.topbar-right{display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px}
.logo{width:30px;height:30px;border-radius:8px;display:block}
.brand-name{font-size:19px;font-weight:700;letter-spacing:-.02em}
.mode-badge{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.mode-badge.live{color:var(--accent);border-color:rgba(32,210,166,.45)}
.iconbtn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;
  padding:10px;line-height:1;min-width:44px;min-height:44px}

/* ---------- home ---------- */
.home-hero{margin:14px 2px 14px}
.home-hero h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.home-hero .sub{color:var(--muted);margin-top:6px;font-size:14px;line-height:1.5}
.input-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.input-card textarea{width:100%;background:transparent;border:none;outline:none;resize:none;
  color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
.input-card textarea::placeholder{color:#5c6b85}
.input-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.chipbtn{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 4px;font-size:11px;font-weight:500;
  color:var(--muted);cursor:pointer;min-height:56px;justify-content:center}
.chipbtn:hover{color:var(--text);border-color:#31405c}
.chip-ico{font-size:18px;line-height:1}
.cta{margin-top:14px;width:100%;background:var(--accent);color:var(--accent-ink);border:none;
  border-radius:12px;padding:15px;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--font);
  min-height:50px}
.cta:active{transform:scale(.985)}
.cta:disabled{opacity:.5}
.samples{margin-top:18px}
.samples-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;
  font-weight:600;margin-bottom:8px}
.samples-row{display:flex;flex-wrap:wrap;gap:8px}
.sample{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:999px;
  padding:9px 13px;font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);min-height:36px}
.sample:hover{border-color:var(--accent)}
.recents{margin-top:18px}
.recent-item{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;margin-bottom:8px;cursor:pointer;min-height:44px}
.recent-item .rv{width:9px;height:9px;border-radius:50%;flex:none}
.recent-item .rt{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fineprint{margin-top:auto;padding-top:16px;font-size:11px;color:var(--muted);text-align:center;line-height:1.5}
.fineprint .privacy-line{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500}
.fineprint .advisory{color:#5c6b85;margin-top:4px}

/* ---------- checking ---------- */
.screen-checking{justify-content:center;align-items:center;gap:32px}
.check-anim{display:flex;justify-content:center}
.radar{position:relative;width:110px;height:110px;border-radius:50%;border:2px solid var(--line);
  background:radial-gradient(circle,#0e1d2b 0%,transparent 70%)}
.radar::after{content:"";position:absolute;inset:24px;border-radius:50%;border:1px solid var(--line)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(32,210,166,.55),transparent 70deg);
  animation:sweep 1.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.steps{list-style:none;display:flex;flex-direction:column;gap:14px;font-size:14px;min-width:250px}
.steps li{display:flex;align-items:center;gap:10px;color:var(--muted);transition:color .3s}
.steps li .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.steps li.active{color:var(--text)}
.steps li.active .dot{border-color:var(--accent);animation:pulse 1s ease-in-out infinite}
.steps li.done{color:var(--text)}
.steps li.done .dot{border-color:var(--safe);background:var(--safe);color:#04120a}
.steps li.done .dot::before{content:"✓"}
.tiertag{font-style:normal;font-size:11px;color:#5c6b85;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;margin-left:2px}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(32,210,166,.15)}}
.check-note{max-width:270px;text-align:center;font-size:12px;color:var(--muted);line-height:1.55;
  animation:rise .35s ease}
.check-note span{display:block;margin-top:6px;color:#5c6b85;font-variant-numeric:tabular-nums}

/* ---------- verdict ---------- */
.verdict-scroll{display:flex;flex-direction:column;gap:12px;padding-bottom:10px}
.verdict-updating{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--accent);
  background:rgba(32,210,166,.08);border:1px dashed rgba(32,210,166,.4);border-radius:12px;
  padding:10px 14px;line-height:1.45}
.verdict-updating.done{color:var(--safe);background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.45);font-weight:500}
.verdict-updating.failed{color:var(--caution);background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.45)}
.verdict-card.updated{animation:cardflash .9s ease}
@keyframes cardflash{0%{box-shadow:0 0 0 3px rgba(32,210,166,.55)}100%{box-shadow:0 0 0 0 rgba(32,210,166,0)}}

/* big glowing emblem + verdict word (guide screens 2-4) */
.verdict-card{border-radius:var(--radius);padding:22px 18px 20px;border:1px solid var(--line);
  background:var(--panel);text-align:center}
.verdict-emblem{width:88px;height:88px;margin:2px auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:3px solid}
.verdict-emblem svg{width:44px;height:44px}
.v-safe .verdict-emblem{border-color:var(--safe);color:var(--safe);
  box-shadow:0 0 24px rgba(34,197,94,.35),inset 0 0 18px rgba(34,197,94,.12)}
.v-caution .verdict-emblem{border-color:var(--caution);color:var(--caution);
  box-shadow:0 0 24px rgba(245,158,11,.35),inset 0 0 18px rgba(245,158,11,.12)}
.v-warning .verdict-emblem{border-color:var(--warning);color:var(--warning);
  box-shadow:0 0 24px rgba(239,68,68,.4),inset 0 0 18px rgba(239,68,68,.12)}
.verdict-badge{font-size:26px;font-weight:800;letter-spacing:.06em}
.v-safe .verdict-badge{color:var(--safe)}
.v-caution .verdict-badge{color:var(--caution)}
.v-warning .verdict-badge{color:var(--warning)}
.verdict-headline{font-size:14px;font-weight:400;color:var(--text);margin-top:8px;line-height:1.5}
.verdict-meta{margin-top:10px;font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;justify-content:center}
.escalated-tag{color:var(--accent);font-weight:600}

/* titled cards (Why... / What to do next) */
.card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.reasons{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.reason{display:flex;gap:10px;font-size:13px;line-height:1.5;padding:7px 0;color:var(--text)}
.reason+.reason{border-top:1px solid var(--line)}
.reason .ri{flex:none}
.advice{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-size:13px;line-height:1.55}
.advice .card-title{color:var(--text)}
.advice strong{color:var(--accent)}
.advice.a-warning{border-color:rgba(239,68,68,.55)}
.advice.a-warning .card-title{color:var(--warning)}

/* provider check (web-scan reputation card) */
.provider-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.provider-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.provider-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}
.provider-status{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  border-radius:999px;padding:4px 10px}
.provider-status.ps-verified{background:rgba(34,197,94,.15);color:var(--safe)}
.provider-status.ps-impersonated{background:rgba(245,158,11,.15);color:var(--caution)}
.provider-status.ps-flagged{background:rgba(239,68,68,.16);color:var(--warning)}
.provider-status.ps-unverified{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.provider-name{font-size:15px;font-weight:700}
.provider-summary{font-size:13px;color:var(--muted);line-height:1.5;margin-top:4px}
.provider-signals{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.provider-signal{display:flex;gap:8px;font-size:12px;line-height:1.45;color:var(--text)}
.provider-signal::before{content:"·";color:var(--accent);font-weight:900}

.cta-deep{background:var(--accent);color:var(--accent-ink);display:flex;
  align-items:center;justify-content:center;gap:8px;margin-top:2px}
.verdict-actions{display:flex;gap:10px}
.ghostbtn{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:12px;
  padding:13px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);min-height:46px}
.ghostbtn:hover{border-color:#31405c}

/* ---------- deep dive ---------- */
.deep-scroll{display:flex;flex-direction:column;gap:12px;padding-bottom:14px}
.deep-status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:6px 2px}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.deep-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.deep-section h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:8px;font-weight:600}
.deep-section p{font-size:13px;line-height:1.55;color:var(--text)}
.deep-section p+p{margin-top:8px}
.src{display:inline-block;font-size:11px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin:6px 6px 0 0}
.deep-final{border-width:2px}
.deep-final.v-warning{border-color:var(--warning)}
.deep-final.v-caution{border-color:var(--caution)}
.deep-final.v-safe{border-color:var(--safe)}

/* risk score card (guide screen 5) */
.risk-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;animation:rise .35s ease}
.risk-info .risk-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}
.risk-info .risk-level{font-size:19px;font-weight:800;margin-top:3px}
.risk-info .risk-sub{font-size:12px;color:var(--muted);margin-top:2px}
.risk-ring{position:relative;width:64px;height:64px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center}
.risk-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--ring-color) calc(var(--ring-pct)*1%),var(--line) 0)}
.risk-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panel)}
.risk-ring .risk-num{position:relative;z-index:1;font-size:17px;font-weight:800}
.risk-ring .risk-den{position:relative;z-index:1;font-size:9px;color:var(--muted)}
.rk-warning .risk-level,.rk-warning .risk-num{color:var(--warning)}
.rk-caution .risk-level,.rk-caution .risk-num{color:var(--caution)}
.rk-safe .risk-level,.rk-safe .risk-num{color:var(--safe)}
.deep-actions{display:flex;gap:10px;animation:rise .35s ease}

/* ---------- settings sheet ---------- */
.sheet-backdrop{position:absolute;inset:0;background:rgba(2,4,9,.6);z-index:90}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:100;background:var(--panel);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:12px 20px 24px;
  animation:sheetup .25s ease}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}}
.sheet-handle{width:44px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 14px}
.sheet h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.setting-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);
  padding:11px 0;border-bottom:1px solid var(--line)}
.setting-row strong{color:var(--text);font-weight:600}
.howit{font-size:13px;color:var(--muted);line-height:1.55;padding:12px 0;border-bottom:1px solid var(--line)}
.privacy-note{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.5}
.sheet-close{margin-top:16px;width:100%}