:root {
  /* Light (default) and dark themes share these semantic tokens; dark follows the system unless chosen. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  color-scheme: light;
  color: var(--ink);
  background: var(--outer);
  --bg: #eef1f6; --brand-tint: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f7; --glass: #ffffffe6;
  --ink: #0e1726; --ink-2: #3a475b; --muted: #66748a; --faint: #98a4b5;
  --line: #e4e9f0; --line-strong: #cfd8e3;
  --brand: #2149e8; --brand-strong: #1a3bc4; --brand-soft: #e6ecff; --brand-line: #c9d6fb;
  --risk: #e5383b; --risk-ink: #b4141c; --risk-soft: #fde4e3; --risk-tint: #fff6f5; --risk-line: #f5cfcd;
  --warn: #ef9b14; --warn-ink: #95560a; --warn-soft: #ffefd6; --warn-tint: #fff9ef; --warn-line: #f8dcae;
  --ok: #16a35a; --ok-ink: #0f6e3b; --ok-soft: #e1f5e9; --ok-tint: #f2fbf6; --ok-line: #c3eacf;
  --orange: #d9661b; --orange-soft: #ffeedf; --orange-tint: #fff7f0;
  --teal: #0f8a84; --teal-soft: #ddf3f1; --teal-tint: #f0faf9;
  --violet: #6b46d9; --violet-soft: #ece6ff;
  --shadow-sm: 0 1px 2px #0e17260a, 0 4px 12px -6px #0e172614;
  --shadow: 0 1px 2px #0e17260a, 0 14px 34px -14px #0e172629;
  --outer: #e3e8ef;
  --blue: var(--brand); --blue-soft: var(--brand-soft); --critical: var(--risk); --amber: var(--warn); --green: var(--ok);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070b14; --brand-tint: #0b1222; --surface: #111a2c; --surface-2: #18233a; --glass: #0d1426e0;
  --ink: #e9eef8; --ink-2: #bcc6d8; --muted: #8b98ae; --faint: #5d6a82;
  --line: #1f2b42; --line-strong: #2d3b57;
  --brand: #5b85ff; --brand-strong: #7c9dff; --brand-soft: #17264f; --brand-line: #2a3f7a;
  --risk: #ff4d5c; --risk-ink: #ff8c96; --risk-soft: #3a1720; --risk-tint: #1d0f16; --risk-line: #5a2330;
  --warn: #ffb02e; --warn-ink: #ffc96e; --warn-soft: #3a2b10; --warn-tint: #1d170c; --warn-line: #5a4317;
  --ok: #2fe0a0; --ok-ink: #66f0bd; --ok-soft: #0f3326; --ok-tint: #0b1c17; --ok-line: #1d5a43;
  --orange: #ffa45c; --orange-soft: #3a230f; --orange-tint: #1d140c;
  --teal: #3fe3d6; --teal-soft: #0f3533; --teal-tint: #0b1c1c;
  --violet: #b19bff; --violet-soft: #261d4a;
  --shadow-sm: 0 1px 0 #ffffff08 inset;
  --shadow: 0 1px 0 #ffffff0d inset, 0 20px 40px -20px #000000b3;
  --outer: #04070d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14; --brand-tint: #0b1222; --surface: #111a2c; --surface-2: #18233a; --glass: #0d1426e0;
  --ink: #e9eef8; --ink-2: #bcc6d8; --muted: #8b98ae; --faint: #5d6a82;
  --line: #1f2b42; --line-strong: #2d3b57;
  --brand: #5b85ff; --brand-strong: #7c9dff; --brand-soft: #17264f; --brand-line: #2a3f7a;
  --risk: #ff4d5c; --risk-ink: #ff8c96; --risk-soft: #3a1720; --risk-tint: #1d0f16; --risk-line: #5a2330;
  --warn: #ffb02e; --warn-ink: #ffc96e; --warn-soft: #3a2b10; --warn-tint: #1d170c; --warn-line: #5a4317;
  --ok: #2fe0a0; --ok-ink: #66f0bd; --ok-soft: #0f3326; --ok-tint: #0b1c17; --ok-line: #1d5a43;
  --orange: #ffa45c; --orange-soft: #3a230f; --orange-tint: #1d140c;
  --teal: #3fe3d6; --teal-soft: #0f3533; --teal-tint: #0b1c1c;
  --violet: #b19bff; --violet-soft: #261d4a;
  --shadow-sm: 0 1px 0 #ffffff08 inset;
  --shadow: 0 1px 0 #ffffff0d inset, 0 20px 40px -20px #000000b3;
  --outer: #04070d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
a { color: inherit; }
.shell { display: grid; grid-template-columns: 254px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 31px 17px 24px; display: flex; flex-direction: column; border-right: 1px solid var(--brand-line); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 740; letter-spacing: -.055em; white-space: nowrap; }
.brand-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand); filter: drop-shadow(0 4px 8px #3d91ed39); }
.brand-icon svg { width: 30px; height: 30px; }
.brand-web { margin-left: 5px; font-size: 11px; font-weight: 650; letter-spacing: 0; color: var(--muted); }
.side-nav { display: grid; gap: 4px; margin-top: 49px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; border: 0; border-radius: 12px; background: none; padding: 12px 14px; text-align: left; color: var(--muted); font-size: 14px; font-weight: 620; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-glyph { width: 21px; text-align: center; font-size: 23px; font-weight: 400; line-height: 18px; }
.side-footer { margin-top: auto; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 20px 12px 0; color: var(--muted); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.workspace { min-width: 0; }
.topbar { height: 79px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px,4vw,60px); border-bottom: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.topbar-title { font-size: 14px; font-weight: 680; color: var(--muted); }
.mobile-brand { display: none; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.local-badge { border: 1px solid var(--brand-line); border-radius: 20px; background: var(--surface); color: var(--muted); font-size: 11px; padding: 7px 11px; }
.language-select { max-width: min(180px, 46vw); border: 1px solid var(--brand-line); border-radius: 10px; background: var(--surface); padding: 6px 8px; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; }
main { width: min(1150px,100%); margin: 0 auto; padding: 34px clamp(24px,4vw,60px) 80px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr); align-items: center; gap: 28px; min-height: 326px; overflow: hidden; padding: 40px 43px; background: linear-gradient(145deg,var(--surface) 9%,var(--brand-tint) 94%); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 18px 45px #31587a0a; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 15px; color: var(--brand); font-size: 11px; font-weight: 750; letter-spacing: .045em; }
.eyebrow .spark { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(35px,4.1vw,58px); line-height: 1.04; letter-spacing: -.067em; font-weight: 700; }
.hero p { max-width: 550px; margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.hero-visual { width: 270px; height: 270px; margin: 0 auto; position: relative; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--brand-line); }
.hero-visual::after { inset: 34px; border-color: var(--brand-line); }
.hero-visual .radar-core { position: absolute; inset: 66px; border-radius: 39px; display: grid; place-items: center; background: linear-gradient(155deg,var(--brand-soft),var(--brand) 65%,var(--brand)); color: #fff; transform: rotate(-11deg); box-shadow: 0 22px 38px #287fe963; }
.radar-core svg { width: 71px; height: 71px; transform: rotate(11deg); }
.radar-signal { position: absolute; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--brand-line); background: var(--glass); border-radius: 11px; box-shadow: 0 10px 22px #47759b14; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.radar-signal.one { top: 29px; right: -5px; }
.radar-signal.two { bottom: 36px; left: -15px; }
.radar-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.radar-signal.two i { background: var(--orange); }
.check-panel { position: relative; z-index: 2; margin: -30px 30px 0; padding: 25px; background: var(--surface); border: 1px solid var(--brand-line); border-radius: 23px; box-shadow: 0 23px 48px #31527213; }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 19px; }
.panel-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.panel-heading small { color: var(--muted); font-size: 11px; }
.type-tabs { display: flex; flex-wrap: wrap; gap: 5px; width: fit-content; background: var(--surface-2); padding: 4px; border-radius: 12px; }
.type-tabs button { border: 0; border-radius: 9px; background: none; padding: 9px 16px; color: var(--muted); font-size: 12px; font-weight: 680; }
.type-tabs button.active { color: var(--brand); background: var(--surface); box-shadow: 0 2px 7px #38617e13; }
.form-line { display: flex; align-items: stretch; gap: 11px; margin-top: 17px; }
.input-shell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px solid var(--brand-line); border-radius: 14px; background: var(--surface); padding: 0 15px; }
.input-shell:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input-shell .input-icon { flex: none; color: var(--faint); font-size: 21px; }
.input-shell input { width: 100%; min-width: 0; height: 50px; border: 0; outline: 0; background: none; color: var(--ink); font-size: 15px; }
.input-shell input::placeholder { color: var(--faint); }
.primary-button, .secondary-button, .danger-button { min-height: 50px; border: 0; border-radius: 13px; padding: 0 19px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 8px 17px #1976e625; }
.primary-button:hover { background: var(--brand); }
.secondary-button { color: var(--brand); background: var(--brand-soft); }
.secondary-button:hover { background: var(--brand-soft); }
.danger-button { color: var(--risk); background: var(--risk-tint); }
.form-note { display: flex; align-items: center; gap: 6px; min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.form-note.error { color: var(--risk); }
.file-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 72px; border: 1px dashed var(--brand); border-radius: 14px; background: var(--brand-soft); padding: 14px 16px; color: var(--ink-2); text-align: left; }
.file-control strong { display: block; font-size: 13px; }
.file-control small { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; }
.file-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-control:focus-within { outline: 3px solid var(--brand); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin: 43px 0 17px; }
.section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.045em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.feature-card { display: flex; flex-direction: column; min-height: 159px; padding: 21px; border: 1px solid var(--brand-line); border-radius: 19px; background: var(--surface); }
.feature-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 18px; }
.feature-card:nth-child(2) .feature-icon { background: var(--teal-soft); color: var(--teal); }
.feature-card:nth-child(3) .feature-icon { background: var(--orange-tint); color: var(--orange); }
.feature-card h3 { margin: 14px 0 6px; font-size: 14px; letter-spacing: -.015em; }
.feature-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.demo-card { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--risk-line); border-radius: 18px; background: linear-gradient(100deg,var(--risk-tint),var(--surface)); }
.demo-icon { display: grid; place-items: center; flex: none; width: 45px; height: 45px; border-radius: 14px; background: var(--risk-soft); color: var(--risk); font-size: 23px; }
.demo-card strong { display: block; color: var(--risk-ink); font-size: 14px; }
.demo-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.demo-card button { margin-left: auto; }
.page-heading { margin: 12px 0 27px; }
.page-heading h1 { margin: 0; font-size: clamp(32px,3vw,44px); letter-spacing: -.055em; line-height: 1.08; }
.page-heading p { max-width: 670px; margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.report-head { border: 1px solid var(--brand-line); border-radius: 25px; background: var(--surface); padding: 26px; }
.report-head.attention { border-color: var(--risk-line); background: linear-gradient(125deg,var(--risk-tint),var(--surface)); }
.report-head .report-kicker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 780; }
.report-head.attention .report-kicker { color: var(--risk); }
.report-head h1 { margin: 13px 0 7px; font-size: clamp(29px,3vw,39px); line-height: 1.1; letter-spacing: -.055em; }
.report-target { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.report-intro { max-width: 690px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.report-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.meta-pill { padding: 7px 10px; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 11px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.report-actions button { min-height: 42px; }
.report-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.85fr); gap: 18px; margin-top: 18px; align-items: start; }
.report-block { border: 1px solid var(--brand-line); border-radius: 20px; background: var(--surface); padding: 21px; }
.report-block + .report-block { margin-top: 15px; }
.report-block h2 { margin: 0 0 15px; font-size: 16px; letter-spacing: -.02em; }
.check-list { display: grid; }
.check-row { display: grid; grid-template-columns: 26px 1fr; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); }
.check-row:first-child { border: 0; padding-top: 2px; }
.check-state { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 13px; font-weight: 800; }
.check-row.warning .check-state { color: var(--risk); background: var(--risk-tint); }
.check-row.passed .check-state { color: var(--ok-ink); background: var(--ok-soft); }
.check-row.info .check-state { color: var(--brand); background: var(--brand-soft); }
.check-row.unknown .check-state { color: var(--muted); background: var(--surface-2); }
.check-row strong { font-size: 13px; line-height: 1.35; }
.check-row p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.report-aside .report-block { background: var(--teal-tint); }
.report-aside p, .report-aside li { color: var(--muted); font-size: 12px; line-height: 1.55; }
.report-aside ol { padding-left: 18px; margin: 0; }
.report-aside li + li { margin-top: 10px; }
.scope-list { display: grid; gap: 10px; }
.scope-item { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 11px; line-height: 1.45; }
.scope-item span:first-child { color: var(--faint); }
.redirect-list { display: grid; gap: 9px; }
.redirect-item { padding: 10px 12px; background: var(--brand-soft); border-radius: 10px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.loading-card { display: grid; gap: 18px; padding: 26px; background: var(--surface); border: 1px solid var(--brand-line); border-radius: 22px; }
.loading-bar { width: 100%; height: 5px; background: var(--brand-soft); border-radius: 5px; overflow: hidden; }
.loading-bar::before { content: ""; display: block; width: 30%; height: 100%; background: var(--brand); border-radius: 5px; animation: waiting 1.7s ease-in-out infinite alternate; }
.loading-card h2 { margin: 0 0 6px; font-size: 20px; }
.loading-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.loading-steps { display: grid; gap: 9px; }
.loading-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.loading-step.active { color: var(--brand); font-weight: 680; }
.loading-step.done { color: var(--ok-ink); }
.history-list { display: grid; gap: 10px; }
.history-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 19px; border: 1px solid var(--brand-line); border-radius: 15px; background: var(--surface); text-align: left; }
.history-row:hover { border-color: var(--brand-line); }
.history-row .history-type { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--brand-soft); border-radius: 11px; color: var(--brand); font-size: 16px; }
.history-row strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.history-row small { display: block; margin-top: 5px; color: var(--faint); font-size: 11px; }
.history-row .history-state { margin-left: auto; flex: none; color: var(--muted); font-size: 11px; }
.history-row .history-state.attention { color: var(--risk); }
.empty-state { padding: 38px 28px; border: 1px dashed var(--brand-line); border-radius: 20px; background: var(--surface); text-align: center; }
.empty-state .empty-icon { display: grid; place-items: center; width: 55px; height: 55px; margin: 0 auto 14px; border-radius: 17px; background: var(--brand-soft); color: var(--brand); font-size: 25px; }
.empty-state h2 { margin: 0 0 8px; font-size: 18px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.guide-card { display: flex; flex-direction: column; gap: 9px; min-height: 165px; padding: 20px; background: var(--surface); border: 1px solid var(--brand-line); border-radius: 19px; }
.guide-card strong { font-size: 15px; }
.guide-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.guide-card button { align-self: flex-start; margin-top: auto; border: 0; background: none; color: var(--blue); padding: 6px 0; font-weight: 680; font-size: 12px; }
.note-panel { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--brand-line); border-radius: 17px; background: var(--brand-soft); color: var(--muted); font-size: 12px; line-height: 1.55; }
.privacy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.privacy-card { padding: 21px; border: 1px solid var(--brand-line); border-radius: 19px; background: var(--surface); }
.privacy-card h2 { margin: 0 0 8px; font-size: 15px; }
.privacy-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: #1229417a; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal { width: min(440px,100%); padding: 27px; border-radius: 25px; background: var(--surface); box-shadow: 0 27px 80px #0f243d4a; }
.modal-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--risk-tint); color: var(--risk); font-size: 25px; }
.modal h2 { margin: 18px 0 8px; font-size: 25px; line-height: 1.12; letter-spacing: -.045em; }
.modal p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.modal-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 21px; }
.modal-actions button { width: 100%; }
#toast { position: fixed; z-index: 70; left: 50%; bottom: 23px; transform: translate(-50%,20px); max-width: min(440px,calc(100vw - 32px)); padding: 11px 17px; border-radius: 12px; color: #fff; background: #233d59; font-size: 12px; box-shadow: 0 12px 30px #15334f38; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { transform: translate(-50%,0); opacity: 1; }
.mobile-nav { display: none; }
@keyframes waiting { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
@media(max-width:1050px) {
  .shell { grid-template-columns: 210px minmax(0,1fr); }
  .hero { grid-template-columns: minmax(0,1fr) 220px; }
  .hero-visual { width: 210px; height: 210px; }
  .hero-visual .radar-core { inset: 54px; }
  .radar-signal.one { right: -12px; }
}
@media(max-width:800px) {
  .shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 62px; padding: 0 21px; }
  .mobile-brand { display: inline; color: var(--ink); font-size: 18px; font-weight: 750; letter-spacing: -.05em; }
  .desktop-title, .local-badge { display: none; }
  main { padding: 23px 18px 105px; }
  .mobile-nav { display: flex; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(9px + env(safe-area-inset-bottom)); height: 60px; border: 1px solid var(--brand-line); border-radius: 19px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 12px 32px #34577620; padding: 4px; }
  .mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; border-radius: 14px; background: none; color: var(--faint); }
  .mobile-nav button.active { color: var(--blue); background: var(--brand-soft); }
  .mobile-nav button span { font-size: 21px; line-height: 22px; }
  .mobile-nav button small { font-size: 10px; font-weight: 690; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 29px 27px 77px; border-radius: 23px; }
  .hero h1 { font-size: clamp(34px,7vw,48px); max-width: 510px; }
  .hero-visual { position: absolute; right: -90px; bottom: -120px; opacity: .47; }
  .check-panel { margin: -41px 13px 0; padding: 18px; }
  .report-layout { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media(max-width:580px) {
  .hero { padding: 27px 23px 77px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 13px; margin-top: 13px; }
  .check-panel { margin-left: 5px; margin-right: 5px; }
  .panel-heading { display: block; }
  .panel-heading small { display: block; margin-top: 5px; }
  .type-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .type-tabs button { flex: 1; padding: 9px 8px; font-size: 11px; }
  .form-line { flex-direction: column; }
  .form-line .primary-button { width: 100%; }
  .feature-grid, .guide-grid, .privacy-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 132px; }
  .demo-card { align-items: flex-start; flex-wrap: wrap; }
  .demo-card button { width: 100%; margin-left: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 33px; }
  .report-head { padding: 21px; }
  .report-block { padding: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The product is designed as a mobile Web app; desktop shows the same compact canvas. */
body { background: var(--outer); }
.shell { display: block; width: min(430px,100%); min-height: 100vh; margin: 0 auto; background: var(--surface-2); box-shadow: 0 16px 70px #18314d20, 0 0 0 1px var(--line); }
.sidebar { display: none; }
.workspace { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 58px; padding: 0 21px; background: color-mix(in srgb, var(--brand-tint) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.mobile-brand { display: inline; color: var(--ink); font-size: 18px; font-weight: 760; letter-spacing: -.055em; }
.desktop-title, .local-badge { display: none; }
main { width: 100%; padding: 0 18px 112px; }
.mobile-nav { display: flex; position: fixed; z-index: 30; left: 50%; right: auto; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(406px,calc(100vw - 22px)); height: 64px; border: 1px solid var(--brand-line); border-radius: 21px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 10px 32px #31547325; padding: 4px; }
.mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 16px; background: none; color: var(--muted); }
.mobile-nav button.active { color: var(--brand); background: var(--brand-soft); }
.mobile-nav button span { font-size: 23px; line-height: 22px; }
.mobile-nav button small { font-size: 10px; font-weight: 690; }
.section-heading { margin: 25px 0 13px; }
.section-heading h2 { font-size: 19px; }
.section-heading p { font-size: 10px; }
.feature-grid, .guide-grid, .privacy-grid, .report-layout { grid-template-columns: 1fr; }
.feature-card { min-height: 120px; }
.check-panel { margin: 0; padding: 18px; border-radius: 20px; box-shadow: none; }
.form-line { flex-direction: column; }
.form-line .primary-button { width: 100%; }
.report-head { margin-top: 16px; }
#toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

.text-button { border: 0; background: none; color: var(--risk); font-size: 11px; font-weight: 700; }
.home-link-stack { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; width: 100%; gap: 10px; margin-top: 26px; }
.home-link { display: flex; align-items: center; gap: 13px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; border: 0; border-radius: 18px; padding: 15px; background: var(--surface); color: var(--ink); text-align: left; }
.home-link-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--brand); background: var(--brand-soft); font-size: 23px; }
.home-link span:nth-child(2) { flex: 1; min-width: 0; }
.home-link strong { display: block; font-size: 13px; }
.home-link small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 10px; }
.home-link > span:last-child { color: var(--faint); font-size: 22px; }

.lookup-intro { margin: 0 -18px 18px; padding: 27px 22px 24px; border-radius: 0 0 25px 25px; background: radial-gradient(circle at 90% 10%,var(--brand-soft),transparent 45%),linear-gradient(155deg,var(--brand-tint),var(--brand-tint)); }
.lookup-intro h1 { margin: 9px 0 8px; font-size: 31px; letter-spacing: -.055em; }
.lookup-intro p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.provider-status { display: inline-flex; max-width: 100%; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; }
.provider-status.connected { background: var(--ok-soft); color: var(--ok-ink); }
.intel-choice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0 1px; margin-top: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.intel-choice input { margin: 3px 0 0; accent-color: var(--brand); }
.intel-choice strong { display: block; font-size: 12px; }
.intel-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.check-source { display: block; margin-top: 5px; color: var(--faint); font-size: 10px; }

.scan-current { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.scan-current-symbol { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 16px; background: var(--risk-soft); color: var(--risk); font-size: 27px; }
.scan-current span:nth-child(2) { flex: 1; }
.scan-current small { display: block; color: var(--risk); font-size: 10px; font-weight: 750; }
.scan-current strong { display: block; margin-top: 4px; font-size: 16px; }
.scan-current b { color: var(--risk); font-size: 23px; }
.scan-progress { height: 6px; overflow: hidden; border-radius: 5px; background: var(--risk-soft); }
.scan-progress span { display: block; height: 100%; border-radius: inherit; background: var(--risk); transition: width .35s ease; }
.guide-progress { padding: 18px; margin-bottom: 16px; border-radius: 18px; background: var(--surface); }
.guide-progress strong { font-size: 12px; }
.guide-progress > div { height: 5px; margin: 11px 0; overflow: hidden; border-radius: 5px; background: var(--surface-2); }
.guide-progress > div span { display: block; height: 100%; background: var(--brand); }
.guide-progress small { color: var(--muted); font-size: 10px; }

@media (max-width: 430px) {
  .shell { box-shadow: none; }
}

/* Security check home (modeled on the native app's "安全检测" screen) */
.guard-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 128px; margin: 0 -18px; padding: 34px 22px 26px; border-radius: 0 0 28px 28px; background: radial-gradient(circle at 92% 18%,var(--brand-soft) 0,transparent 46%),linear-gradient(170deg,var(--brand-soft),var(--brand-tint) 62%,var(--brand-tint)); }
.guard-hero.risk { background: radial-gradient(circle at 92% 18%,var(--orange-soft) 0,transparent 46%),linear-gradient(170deg,var(--orange-tint),var(--orange-tint) 62%,var(--orange-tint)); }
.guard-copy { position: relative; z-index: 1; min-width: 0; }
.guard-hero h1 { margin: 22px 0 10px; color: var(--brand); font-size: 30px; line-height: 1.12; letter-spacing: -.04em; }
.guard-hero.risk h1 { color: var(--risk); }
.guard-library { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 0; padding: 0; background: none; color: var(--muted); font-size: 13px; text-align: left; }
.guard-library.pending { color: var(--orange); }
.guard-library span { font-size: 18px; line-height: 1; }
.guard-cats { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }
.guard-cat { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.guard-cat svg { width: 20px; height: 20px; flex: none; }
.guard-cat.ok { color: var(--ok-ink); }
.guard-cat.warn { color: var(--orange); }
.guard-cat.risk { color: var(--risk); }
.guard-orb { position: relative; align-self: center; width: 150px; height: 150px; margin-right: -40px; }
.orb-ring { position: absolute; inset: -6px -30px; border: 2px solid var(--teal); border-radius: 50%; transform: rotate(-14deg) scaleY(.36); opacity: .8; }
.orb-core { position: absolute; inset: 14px; display: grid; place-items: center; border: 9px solid var(--teal); border-radius: 50%; background: radial-gradient(circle at 35% 30%,var(--brand),var(--brand) 70%); color: var(--faint); box-shadow: 0 0 0 10px var(--glass), 0 18px 40px #2a5fd940; }
.risk .orb-core { border-color: var(--risk); background: radial-gradient(circle at 35% 30%,var(--risk-soft),var(--risk) 70%); }
.orb-core svg { width: 54px; height: 54px; }
.orb-core strong { color: #fff; font-size: 40px; font-weight: 740; letter-spacing: -.06em; }
.guard-cta { grid-column: 1 / -1; display: grid; justify-items: center; gap: 9px; margin-top: 34px; }
.guard-cta .primary-button { width: min(340px,100%); min-height: 54px; border-radius: 9px; background: var(--brand); font-size: 17px; }
.guard-cta .primary-button:hover { background: var(--brand); }
.guard-cta small { color: var(--muted); font-size: 11px; }
.guard-cta .text-button { color: var(--brand); font-size: 12px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-card { display: grid; justify-items: start; align-content: start; gap: 6px; min-height: 118px; padding: 15px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.tool-card strong { font-size: 13px; }
.tool-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.tool-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.tool-icon svg { width: 20px; height: 20px; }

/* Live check progress */
.checking-head { margin: 0 -18px; padding: 28px 22px 24px; border-radius: 0 0 26px 26px; background: linear-gradient(160deg,var(--brand-soft),var(--brand-tint)); }
.checking-head h1 { margin: 10px 0 0; font-size: 28px; letter-spacing: -.05em; }
.scan-current { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.scan-current-symbol { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--risk-soft); color: var(--risk); font-size: 25px; }
.scan-current > span:nth-child(2) { flex: 1; min-width: 0; }
.scan-current small { display: block; color: var(--risk); font-size: 10px; font-weight: 750; }
.scan-current strong { display: block; margin-top: 4px; font-size: 15px; }
.scan-current b { color: var(--risk); font-size: 22px; }
.scan-progress { height: 6px; margin-top: 14px; overflow: hidden; border-radius: 5px; background: var(--risk-soft); }
.scan-progress span { display: block; height: 100%; border-radius: inherit; background: var(--risk); transition: width .3s ease; }
.check-cats { display: grid; gap: 1px; margin-top: 16px; overflow: hidden; border-radius: 20px; background: var(--surface-2); }
.check-cat { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); }
.check-cat > div { flex: 1; min-width: 0; }
.check-cat strong { display: block; font-size: 13px; }
.check-cat small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.check-cat em { color: var(--ok-ink); font-style: normal; font-weight: 800; }

/* Results */
.score-line { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; }
.score-number { color: var(--brand); font-size: 60px; line-height: .95; font-weight: 730; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.attention .score-number { color: var(--risk); }
.score-line span { display: grid; gap: 5px; }
.score-line b { font-size: 16px; }
.score-line small { color: var(--muted); font-size: 10px; }
.result-group h2 { display: flex; align-items: center; gap: 9px; }
.check-row.risk .check-state { color: var(--risk); background: var(--risk-tint); }
.check-row.warn .check-state { color: var(--orange); background: var(--orange-soft); }
.check-row.ok .check-state { color: var(--ok-ink); background: var(--ok-soft); }
.check-row.has-action { grid-template-columns: 26px minmax(0,1fr) auto; align-items: start; }
.fix-button { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 11px; }
.row-actions { display: grid; gap: 6px; }
.tag { padding: 5px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok-ink); }
.path { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.guide-steps { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 12px; line-height: 1.6; text-align: left; }

/* Protection log (modeled on the native app's "保护日志" screen) */
.log-card { padding: 6px 16px; border: 1px solid var(--brand-line); border-radius: 6px; background: var(--surface); }
.log-item { position: relative; display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 18px 0; }
.log-item + .log-item::before, .log-stats + .log-item::before { content: ""; position: absolute; left: 6px; top: -18px; height: 30px; border-left: 1px solid var(--line); }
.log-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--ok); }
.log-dot.pending { background: var(--orange); }
.log-item strong { display: block; color: var(--ink); font-size: 15px; }
.log-item small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.log-item time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.log-item.library .primary-button { min-height: 36px; padding: 0 16px; border-radius: 4px; background: var(--brand); font-size: 13px; box-shadow: none; }
.log-item.library .primary-button:disabled { background: var(--brand); opacity: 1; }
.log-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 6px 28px; text-align: center; }
.log-stats > div + div { border-left: 1px solid var(--line); }
.log-stats strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.log-stats strong.green { color: var(--ok-ink); }
.log-stats strong.orange { color: var(--orange); }
.log-stats small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.log-empty { padding: 18px 0 18px 28px; color: var(--faint); font-size: 12px; }

/* Virus scan */
.virus-panel { margin-top: 4px; }
.virus-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.virus-actions .tool-card { min-height: 128px; border: 1px solid var(--brand-line); }
.virus-actions .tool-card:hover { border-color: var(--brand-line); }
.virus-panel + .loading-card, .virus-panel + .report-head { margin-top: 16px; }
.loading-card .scan-current { margin-top: 0; }

/* Development demo: simulated high-risk scenario (public/demo.js) */
.home-demo { margin-top: 18px; }
.home-demo .tag { margin-left: 4px; font-style: normal; }
.scenario-hero { position: relative; overflow: hidden; margin: 0 -18px; padding: 26px 22px 24px; border-radius: 0 0 28px 28px; background: radial-gradient(circle at 89% 14%,var(--orange-soft) 0,transparent 43%),linear-gradient(150deg,var(--orange-tint),var(--orange-tint) 75%,var(--risk-tint)); }
.scenario-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.scenario-pill { display: inline-flex; align-items: center; gap: 4px; color: var(--risk); font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.scenario-hero .text-button { color: var(--risk); }
.scenario-hero h1 { max-width: 240px; position: relative; z-index: 1; margin: 20px 0 9px; font-size: 31px; line-height: 1.1; letter-spacing: -.058em; }
.scenario-hero > p { position: relative; z-index: 1; max-width: 250px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.scenario-emblem { position: absolute; top: 85px; right: -35px; width: 142px; height: 142px; display: grid; place-items: center; isolation: isolate; border: 22px solid color-mix(in srgb, var(--risk-tint) 56%, transparent); border-radius: 50%; background: radial-gradient(circle,var(--orange-tint),var(--orange-soft)); color: #fff; font-size: 55px; font-weight: 800; }
.scenario-emblem::before { content: ""; position: absolute; inset: 16px; z-index: -1; background: linear-gradient(145deg,var(--orange-soft),var(--risk),var(--risk)); border-radius: 30%; transform: rotate(-8deg); }
.scenario-score { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin: 22px 0 11px; }
.scenario-score strong { color: var(--risk); font-size: 68px; line-height: .95; font-weight: 730; letter-spacing: -.085em; font-variant-numeric: tabular-nums; }
.scenario-score span { display: grid; gap: 5px; color: var(--risk); font-size: 11px; }
.scenario-score b { color: var(--risk); }
.scenario-score small { font-size: 10px; }
.scenario-source { display: inline-flex; max-width: 100%; padding: 8px 10px; border-radius: 10px; color: var(--risk); background: color-mix(in srgb, var(--risk-tint) 72%, transparent); font-size: 11px; overflow-wrap: anywhere; }
.scenario-primary { width: 100%; margin-top: 17px; background: var(--risk); font-size: 15px; }
.scenario-primary:hover { background: var(--risk); }
.scenario-fine { margin-top: 10px; text-align: center; color: var(--muted); font-size: 10px; }
.scenario-section { padding-top: 4px; }
.scenario-list { overflow: hidden; border: 1px solid var(--risk-line); border-radius: 20px; background: var(--surface); }
.scenario-issue { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; background: var(--surface); color: var(--ink); text-align: left; }
.scenario-issue:last-child { border-bottom: 0; }
.scenario-issue:active { background: var(--risk-tint); }
.scenario-issue-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--risk); background: var(--risk-tint); font-size: 20px; }
.scenario-issue span:nth-child(2) { min-width: 0; }
.scenario-issue strong { display: block; font-size: 13px; }
.scenario-issue small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.chevron { margin-left: auto; color: var(--faint); font-size: 22px; }
.scenario-disclaimer { margin: 10px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.entry-scene { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; align-items: center; background: var(--surface-2); }
.entry-browser, .entry-site { width: min(430px,100%); padding: 26px 25px; background: var(--surface-2); }
.entry-browser { min-height: 190px; padding-top: calc(26px + env(safe-area-inset-top)); }
.entry-browser span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.entry-browser strong { display: block; margin-top: 16px; font-size: 22px; letter-spacing: -.04em; }
.entry-browser p, .entry-site p { max-width: 270px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.entry-site { min-height: 330px; background: var(--surface); }
.entry-site small { color: var(--faint); font-size: 11px; }
.entry-site h2 { margin: 25px 0 8px; font-size: 24px; }
.fake-field { width: 100%; height: 42px; margin-top: 15px; border: 1px solid var(--brand-line); border-radius: 10px; }
.fake-field.short { width: 65%; }
.entry-scrim { position: absolute; inset: 0; background: #17314d75; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.entry-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(390px,calc(100vw - 36px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 25px; border-radius: 25px; background: var(--surface); box-shadow: 0 24px 70px #1b2e4580; }
.entry-dialog {  }
.entry-dialog .eyebrow { color: var(--risk); font-size: 12px; }
.entry-dialog h2 { color: var(--risk-ink); }
.entry-dialog .primary-button { margin-top: 20px; }
.alert-icon { position: relative; width: 68px; height: 68px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%,var(--risk-soft),var(--risk) 70%); box-shadow: 0 10px 24px #d92d3a55; }
.alert-icon svg { width: 40px; height: 40px; margin-top: -3px; }
.alert-icon::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--risk); opacity: 0; animation: alertPulse 1.6s ease-out infinite; }
@keyframes alertPulse { from { opacity: .7; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }
.entry-dialog h2 { margin: 10px 0 8px; font-size: 27px; line-height: 1.1; letter-spacing: -.055em; }
.entry-dialog p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.entry-domain { padding: 11px 13px; margin: 17px 0; border-radius: 11px; color: var(--risk); background: var(--risk-tint); font-size: 12px; }
.entry-dialog button { width: 100%; margin-top: 9px; }
.entry-dialog > small { display: block; margin-top: 13px; text-align: center; color: var(--faint); font-size: 10px; }

/* iOS Safari: dynamic viewport height, safe areas (notch, home indicator, landscape) and no zoom on focus */
.shell, .workspace { min-height: 100vh; min-height: 100dvh; }
.topbar { height: calc(58px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(21px, env(safe-area-inset-left)); padding-right: max(21px, env(safe-area-inset-right)); }
main { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.modal-backdrop { padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); }
.modal { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (pointer: coarse) {
  .input-shell input, .language-select, select, textarea { font-size: 16px; }
}
.entry-dialog { text-align: center; }
.entry-dialog .alert-icon { margin: 0 auto 16px; }
.entry-dialog p { margin-left: auto; margin-right: auto; }

/* Status language: green = no issue, amber = suspicious / suggested, red = confirmed risk, blue = note */
.st { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; line-height: 1; }
.st-ok { background: var(--ok-ink); }
.st-info { background: var(--brand); font-style: italic; font-family: Georgia, serif; }
.st-warn { background: var(--warn); }
.st-risk { background: var(--risk); }
.st-wait { border: 2px solid var(--brand-line); background: var(--surface); }
.st-run { border: 3px solid var(--brand-line); border-top-color: var(--brand); background: var(--surface); animation: stSpin .8s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-style: normal; font-weight: 750; vertical-align: 1px; white-space: nowrap; }
.st-badge.st-ok { background: var(--ok-soft); color: var(--ok-ink); }
.st-badge.st-info { background: var(--brand-soft); color: var(--brand); font-family: inherit; font-style: normal; }
.st-badge.st-warn { background: var(--warn-soft); color: var(--warn-ink); }
.st-badge.st-risk { background: var(--risk-soft); color: var(--risk); }
.check-row > .st { margin-top: 1px; }
.check-row.risk { background: var(--risk-tint); }

/* Live security check */
.scan-current-symbol.spinning { animation: stPulse 1.2s ease-in-out infinite; }
.scan-current-symbol.finished { background: var(--ok-ink); color: #fff; font-weight: 900; }
@keyframes stPulse { 50% { transform: scale(1.08); background: var(--brand); } }
.scan-current .doing { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.4; }
.check-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.check-tally > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 20px; background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.check-tally .st { width: 18px; height: 18px; font-size: 10px; }
.live-group { margin-top: 14px; }
.live-group h2 { display: flex; align-items: center; gap: 9px; }
.live-list { display: grid; }
.live-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--faint); transition: background .3s; }
.live-row:first-child { border-top: 0; }
.live-row strong { display: block; font-size: 13px; }
.live-row small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; }
.live-row.active { color: var(--ink); }
.live-row.active small { color: var(--brand); }
.live-row.done { color: var(--ink); }
.live-row.done small { color: var(--muted); }
.live-row.just > .st { animation: stPop .35s ease-out; }
.live-row.just { background: linear-gradient(90deg,var(--brand-tint),transparent); }
@keyframes stPop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } to { transform: scale(1); opacity: 1; } }
.topbar-title { display: flex; align-items: center; gap: 8px; }
.mobile-logo { width: 26px; height: 26px; flex: none; }
img.brand-icon { width: 34px; height: 34px; filter: none; }

/* Shared scan view: radar progress ring */
.checking-head.has-risk { background: linear-gradient(160deg,var(--risk-tint),var(--risk-tint)); }
.scan-hero { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.scan-hero-text { flex: 1; min-width: 0; }
.scan-hero-text h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.15; letter-spacing: -.04em; }
.scan-hero-text small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; }
.scan-hero-text strong { display: block; margin-top: 4px; font-size: 15px; }
.scan-hero-text .doing { display: block; margin-top: 4px; color: var(--brand); font-size: 11px; font-style: normal; line-height: 1.4; }
.scan-radar { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle,var(--surface) 0 55%,var(--brand-soft) 56% 100%); overflow: hidden; }
.scan-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.radar-track { fill: none; stroke: var(--brand-soft); stroke-width: 6; }
.radar-fill { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.radar-sweep { position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from 0deg,#2463e600 0 270deg,#2463e640 360deg); animation: radarSweep 1.6s linear infinite; }
.scan-radar.finished .radar-sweep { display: none; }
.scan-radar.finished .radar-fill { stroke: var(--ok-ink); }
.has-risk .scan-radar.finished .radar-fill { stroke: var(--risk); }
.scan-radar b { position: relative; font-size: 22px; letter-spacing: -.04em; color: var(--ink); }
.scan-radar b small { font-size: 11px; }
@keyframes radarSweep { to { transform: rotate(360deg); } }
.live-group h2 .st-badge { margin-left: auto; }
.live-group.complete { box-shadow: inset 3px 0 0 var(--brand-soft); }
.live-row.done.risk strong { color: var(--risk-ink); }
.live-row.done.warn strong { color: var(--warn-ink); }
.stage-index { font-size: 14px; }

/* Results: gauge, risk cards, passed list */
.score-head { text-align: center; }
.score-head .report-kicker { justify-content: center; }
.score-head h1 { margin: 2px 0 6px; font-size: 24px; }
.score-head .check-tally, .score-head .report-actions { justify-content: center; }
.gauge { position: relative; width: 210px; margin: 10px auto 0; }
.gauge svg { display: block; width: 100%; }
.gauge-track { fill: none; stroke: var(--brand-soft); stroke-width: 14; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.gauge.good .gauge-fill { stroke: var(--ok-ink); } .gauge.fair .gauge-fill { stroke: var(--warn); } .gauge.poor .gauge-fill { stroke: var(--risk); }
.gauge-num { position: absolute; left: 0; right: 0; bottom: 18px; font-size: 52px; font-weight: 760; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.gauge.good .gauge-num { color: var(--ok-ink); } .gauge.fair .gauge-num { color: var(--warn-ink); } .gauge.poor .gauge-num { color: var(--risk); }
.gauge > small { position: absolute; left: 0; right: 0; bottom: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.score-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--muted); font-size: 11px; }
.delta { padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 750; }
.delta.up { background: var(--ok-soft); color: var(--ok-ink); } .delta.down { background: var(--risk-soft); color: var(--risk); }
.issue-list { display: grid; gap: 12px; }
.issue-card { padding: 16px; border: 1px solid var(--warn-line); border-radius: 18px; background: linear-gradient(180deg, var(--warn-tint), var(--surface) 55%); box-shadow: var(--shadow-sm); }
.issue-card.risk { border-color: var(--risk-line); background: linear-gradient(180deg, var(--risk-tint), var(--surface) 55%); }
.issue-card header { display: flex; gap: 10px; align-items: flex-start; }
.issue-card header strong { font-size: 15px; }
.issue-card header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.issue-detail { margin: 10px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.issue-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: 11px; line-height: 1.5; }
.issue-card dt { color: var(--ink-2); font-weight: 750; white-space: nowrap; }
.issue-card dd { margin: 0; color: var(--muted); }
.issue-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.issue-card footer span { color: var(--ink-2); font-size: 11px; font-weight: 750; }
.passed-block { margin-top: 16px; }
.passed-block summary { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 750; list-style: none; }
.passed-block summary::-webkit-details-marker { display: none; }
.passed-block summary::after { content: "›"; margin-left: auto; color: var(--faint); font-size: 20px; transition: transform .2s; }
.passed-block[open] summary::after { transform: rotate(90deg); }
.passed-block .check-list { margin-top: 10px; }

/* Fix wizard */
.wizard-progress { margin: 10px 0 4px; text-align: left; }
.wizard-progress small { color: var(--muted); font-size: 11px; font-weight: 750; }
.wizard-progress div { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: var(--surface-2); }
.wizard-progress span { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.wizard-steps { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; text-align: left; }
.wizard-steps li { display: flex; gap: 10px; padding: 10px; border-radius: 12px; color: var(--faint); font-size: 12px; line-height: 1.5; }
.wizard-steps li span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 800; }
.wizard-steps li.done { color: var(--muted); }
.wizard-steps li.done span { background: var(--ok-ink); color: #fff; }
.wizard-steps li.current { background: var(--brand-soft); color: var(--ink); font-weight: 650; }
.wizard-steps li.current span { background: var(--brand); color: #fff; }

/* Account security: password breach check */
.tool-card.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.tool-card.wide .tool-icon { grid-row: span 2; background: var(--orange-soft); color: var(--orange); }
.pw-toggle { flex: none; border: 0; background: none; color: var(--brand); font-size: 12px; font-weight: 700; padding: 6px 0 6px 8px; }
.pw-result { margin-top: 16px; }
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; }
.pw-strength small { color: var(--ink-2); font-weight: 750; }
.pw-strength > div { display: flex; gap: 4px; flex: 1; }
.pw-strength > div span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); }
.pw-strength.s0 span.on, .pw-strength.s1 span.on { background: var(--risk); }
.pw-strength.s2 span.on { background: var(--warn); }
.pw-strength.s3 span.on, .pw-strength.s4 span.on { background: var(--ok-ink); }
.pw-strength b { font-size: 11px; }
.pw-tips { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.pw-advice { margin: 0; padding-left: 16px; }
.note-panel.error { border-color: var(--risk-line); background: var(--risk-tint); color: var(--risk); }
#pw-form .form-note { display: block; line-height: 1.5; }
#pw-form .form-note a { color: var(--brand); font-weight: 700; }

/* ---- Atmosphere: danger and safety ------------------------------------------------- */
/* Pulsing red glow around the screen edge while risks are on screen */
body.alert-mode .shell::after { content: ""; position: fixed; inset: 0; z-index: 25; pointer-events: none; box-shadow: inset 0 0 0 0 #e0393e00; animation: edgeAlarm 2.2s ease-in-out infinite; }
@keyframes edgeAlarm { 0%, 100% { box-shadow: inset 0 0 26px 2px #e0393e33; } 50% { box-shadow: inset 0 0 60px 10px #e0393e66; } }
body.alert-mode .topbar { background: color-mix(in srgb, var(--risk-tint) 90%, transparent); }
body.safe-mode .topbar { background: color-mix(in srgb, var(--ok-tint) 90%, transparent); }

/* Danger orb: warning triangle with expanding pulses */
.danger-orb { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto; }
.danger-orb .danger-core { position: relative; z-index: 1; display: grid; place-items: center; width: 64%; height: 64%; border-radius: 50%; background: radial-gradient(circle at 35% 30%,var(--risk-soft),var(--risk) 65%,var(--risk-ink)); box-shadow: 0 14px 34px #d92d3a66, inset 0 -6px 14px #0000002a; animation: dangerBeat 1.2s ease-in-out infinite; }
.danger-orb .danger-core svg { width: 56%; height: 56%; margin-top: -4%; }
.danger-orb .pulse { position: absolute; inset: 18%; border-radius: 50%; border: 3px solid var(--risk); opacity: 0; animation: dangerPulse 1.8s ease-out infinite; }
.danger-orb .pulse.late { animation-delay: .9s; }
@keyframes dangerPulse { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.55); } }
@keyframes dangerBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(.98); } 36% { transform: scale(1.04); } }
.danger-orb.small { width: 92px; height: 92px; margin-bottom: -8px; }
.danger-orb.home { width: 150px; height: 150px; margin-right: -26px; align-self: center; }

/* Safe orb: a shield draws itself, then calm ripples spread */
.safe-orb { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto; }
.safe-orb .ripple { position: absolute; inset: 22%; border-radius: 50%; background: #2fbf7a22; border: 2px solid #2fbf7a55; animation: safeRipple 3.6s ease-out infinite; }
.safe-orb .ripple.r2 { animation-delay: 1.2s; } .safe-orb .ripple.r3 { animation-delay: 2.4s; }
@keyframes safeRipple { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.7); } }
.safe-shield { position: relative; z-index: 1; width: 58%; filter: drop-shadow(0 12px 22px #1fa45b55); animation: safeFloat 4s ease-in-out infinite; }
.shield-body { fill: var(--ok-ink); }
.shield-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.celebrate .shield-check, .safe-orb.large .shield-check { animation: drawCheck .8s .25s ease-out both; }
.celebrate .safe-shield { animation: safePop .6s cubic-bezier(.16,1,.3,1) both, safeFloat 4s .6s ease-in-out infinite; }
@keyframes drawCheck { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes safePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes safeFloat { 50% { transform: translateY(-4px); } }
.safe-orb.home { width: 150px; height: 150px; margin-right: -26px; align-self: center; }

/* Results header moods */
.score-head.danger { border-color: var(--risk-line); background: radial-gradient(circle at 50% 0%,var(--risk-soft) 0,transparent 60%),linear-gradient(180deg,var(--risk-tint),var(--surface)); }
.score-head.danger h1 { color: var(--risk-ink); }
.score-head.safe { border-color: var(--ok-line); background: radial-gradient(circle at 50% 10%,var(--ok-soft) 0,transparent 62%),linear-gradient(180deg,var(--ok-tint),var(--surface)); }
.score-head.safe h1 { color: var(--ok-ink); font-size: 26px; }
.guard-hero.safe { background: radial-gradient(circle at 92% 18%,var(--ok-soft) 0,transparent 46%),linear-gradient(170deg,var(--ok-soft),var(--ok-tint) 62%,var(--ok-tint)); }
.guard-hero.safe h1 { color: var(--ok-ink); }
.guard-hero.risk .guard-cta .primary-button { background: var(--risk); box-shadow: 0 10px 22px #d92d3a40; }
.mini-score { padding: 1px 6px; border-radius: 6px; color: #fff; }
.mini-score.good { background: var(--ok-ink); } .mini-score.fair { background: var(--warn); } .mini-score.poor { background: var(--risk); }

/* Leaner home tools: icon tiles */
.tool-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 22px; }
.tool-tile { display: grid; justify-items: center; gap: 8px; padding: 16px 6px 14px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); text-align: center; }
.tool-tile:active { transform: scale(.97); }
.tool-tile .tool-icon { width: 44px; height: 44px; border-radius: 14px; }
.tool-tile .tool-icon svg { width: 24px; height: 24px; }
.tool-tile strong { font-size: 12px; }
.tile-virus .tool-icon { background: var(--risk-tint); color: var(--risk); }
.tile-account .tool-icon { background: var(--orange-soft); color: var(--orange); }
.tile-lookup .tool-icon { background: var(--brand-soft); color: var(--brand); }
.tile-log .tool-icon { background: var(--ok-soft); color: var(--ok-ink); }
.tile-quarantine .tool-icon { background: var(--violet-soft); color: var(--violet); }
.tile-guide .tool-icon { background: var(--teal-soft); color: var(--teal); }
.info-link { display: block; margin: 22px auto 0; border: 0; background: none; color: var(--muted); font-size: 11px; }

/* Issue cards: details behind ⓘ */
.issue-card footer { margin-top: 10px; align-items: flex-start; }
.issue-card .why { flex: 1; min-width: 0; }
.issue-card .why summary { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-weight: 800; cursor: pointer; list-style: none; }
.issue-card .why summary::-webkit-details-marker { display: none; }
.issue-card .why[open] summary { background: var(--brand); color: #fff; }
.issue-card .why dl { margin-top: 8px; }
.issue-card.risk { animation: riskIn .5s ease-out both; }
@keyframes riskIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.scope-note { margin-top: 16px; color: var(--muted); font-size: 11px; }
.scope-note summary { cursor: pointer; list-style: none; text-align: center; }
.scope-note p { line-height: 1.55; }

/* ---- Second pass: fewer words, more visuals --------------------------------------------- */
.page-heading.compact { display: flex; align-items: center; gap: 10px; margin: 22px 0 16px; }
.page-heading.compact h1 { margin: 0; }
.info-tip { position: relative; display: inline-block; font-size: 12px; }
.info-tip > summary { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.info-tip > summary::-webkit-details-marker { display: none; }
.info-tip[open] > summary { background: var(--brand); color: #fff; }
.info-tip > div { position: absolute; z-index: 15; top: 32px; left: 0; width: min(300px, 78vw); padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 34px #1f3b5a26; color: var(--ink-2); line-height: 1.55; font-weight: 500; text-align: left; }
.page-heading .info-tip > div { left: auto; right: auto; }
.report-aside .info-tip, .score-head > .info-tip, .issue-list ~ .info-tip { margin-top: 14px; }
.score-head ~ .info-tip, .passed-block + .info-tip { display: block; text-align: center; }
.passed-block + .info-tip > div { left: 50%; transform: translateX(-50%); }
.check-tally > span { gap: 5px; padding: 5px 12px 5px 5px; font-size: 13px; font-weight: 800; }
.check-tally .st { width: 20px; height: 20px; }
.live-row { padding: 9px 0; }
.log-item.event { grid-template-columns: 30px minmax(0,1fr) auto; padding: 12px 0; }
.log-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.log-icon svg { width: 17px; height: 17px; }
.log-item.event.file_quarantined .log-icon, .log-item.event.file_deleted .log-icon { background: var(--violet-soft); color: var(--violet); }
.log-item.event.check_completed .log-icon, .log-item.event.fix_applied .log-icon { background: var(--ok-soft); color: var(--ok-ink); }
.log-item.event.password_checked .log-icon { background: var(--orange-soft); color: var(--orange); }
.log-item.event.files_scanned .log-icon { background: var(--risk-tint); color: var(--risk); }
.log-item.event small { margin-top: 2px; font-size: 11px; }
.log-item.event strong { font-size: 13px; }
.library-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 750; }
.library-chip svg { width: 15px; height: 15px; }
.virus-actions .tool-card { min-height: 112px; justify-items: center; align-content: center; text-align: center; }
.virus-actions .tool-card .tool-icon { width: 48px; height: 48px; border-radius: 16px; }
.virus-actions .tool-card .tool-icon svg { width: 26px; height: 26px; }
.pw-lock { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--ok-ink); font-size: 11px; font-weight: 750; }
.pw-lock svg { width: 15px; height: 15px; }
.pw-result .info-tip { margin-top: 10px; }
.empty-state.visual { padding: 46px 20px; border: 0; background: transparent; }
.empty-art { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 30px; background: radial-gradient(circle at 30% 25%,var(--surface),var(--brand-soft) 70%); color: var(--brand); box-shadow: 0 16px 34px #2463e61f; }
.empty-art svg { width: 46px; height: 46px; }
.empty-state.visual h2 { color: var(--muted); font-size: 15px; }
.guide-list { display: grid; gap: 10px; }
.guide-item { padding: 14px; border-radius: 16px; background: var(--surface); }
.guide-item summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item summary::after { content: "›"; margin-left: auto; color: var(--faint); font-size: 20px; transition: transform .2s; }
.guide-item[open] summary::after { transform: rotate(90deg); }
.guide-item p { margin: 10px 0 0 46px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.loading-visual { display: grid; justify-items: center; gap: 10px; padding: 60px 10px 20px; text-align: center; }
.loading-visual .scan-radar { width: 120px; height: 120px; }
.loading-visual .scan-radar b { font-size: 34px; color: var(--brand); }
.loading-visual h1 { margin: 6px 0 0; font-size: 22px; }
.loading-visual p { margin: 0; color: var(--muted); font-size: 12px; }
.intel-choice { align-items: center; }
.scenario-hero { text-align: center; }
.scenario-hero .scenario-head { text-align: left; }
.scenario-hero .danger-orb { margin-top: 10px; }
.scenario-hero h1 { max-width: none; margin: 8px 0; }
.scenario-hero .scenario-score { justify-content: center; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.scenario-tile { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--risk-line); border-radius: 18px; background: var(--surface); color: var(--ink); text-align: center; animation: riskIn .5s ease-out both; }
.scenario-tile strong { font-size: 12px; }
.scenario-tile:nth-child(2) { animation-delay: .08s; } .scenario-tile:nth-child(3) { animation-delay: .16s; } .scenario-tile:nth-child(4) { animation-delay: .24s; }
.guide-item .review-toggle { flex: none; width: 30px; height: 30px; margin-left: auto; border: 2px solid var(--brand-line); border-radius: 50%; background: var(--surface); color: transparent; font-weight: 900; }
.guide-item.reviewed .review-toggle { border-color: var(--ok); background: var(--ok-ink); color: #fff; }
.guide-item summary::after { margin-left: 8px; }
.loading-dots { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.loading-dots span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 800; }
.loading-dots span.active { background: var(--brand); color: #fff; animation: stPulse 1.2s ease-in-out infinite; }
.loading-dots span.done { background: var(--ok-ink); color: #fff; }
.loading-dots i { width: 22px; height: 2px; background: var(--line-strong); }

/* ---- Icon system: one SVG family, 1.75 stroke ------------------------------------------- */
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-glyph .i { width: 20px; height: 20px; }
.mobile-nav button .i { width: 22px; height: 22px; }
.st .i { width: 13px; height: 13px; stroke-width: 2.6; vertical-align: 0; }
.info-tip > summary .i, .issue-card .why summary .i { width: 16px; height: 16px; vertical-align: 0; }
.home-link-icon .i, .history-type .i, .scenario-issue-icon .i, .check-state .i { width: 20px; height: 20px; vertical-align: 0; }
.home-link > span:last-child .i { width: 16px; height: 16px; }
.input-shell .input-icon .i { width: 20px; height: 20px; }
.loading-visual .scan-radar b .i { width: 34px; height: 34px; }
.theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); }
.theme-toggle:hover { color: var(--brand); border-color: var(--brand-line); }
.theme-toggle .i { width: 18px; height: 18px; vertical-align: 0; }
.top-actions { gap: 8px; }

/* ---- Dark theme refinements (B · midnight): glow instead of pastel fills ----------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .shell { background: radial-gradient(140% 60% at 50% -10%, #142554 0%, var(--bg) 55%); }
:root:not([data-theme="light"]) .guard-hero, :root:not([data-theme="light"]) .lookup-intro, :root:not([data-theme="light"]) .checking-head, :root:not([data-theme="light"]) .scenario-hero { background: radial-gradient(110% 80% at 100% 0%, #4f7dff2e 0%, transparent 60%), var(--surface); border: 1px solid var(--line); }
:root:not([data-theme="light"]) .guard-hero.risk, :root:not([data-theme="light"]) .scenario-hero, :root:not([data-theme="light"]) .checking-head.has-risk { background: radial-gradient(110% 90% at 100% 0%, #ff3b4a38 0%, #ff3b4a0d 42%, transparent 72%), var(--surface); }
:root:not([data-theme="light"]) .guard-hero.safe { background: radial-gradient(110% 90% at 100% 0%, #2fe0a02e 0%, transparent 65%), var(--surface); }
:root:not([data-theme="light"]) .score-head.danger { background: radial-gradient(100% 70% at 50% 0%, #ff3b4a33 0%, transparent 65%), var(--surface); border-color: var(--risk-line); }
:root:not([data-theme="light"]) .score-head.safe { background: radial-gradient(100% 70% at 50% 0%, #2fe0a02b 0%, transparent 65%), var(--surface); border-color: var(--ok-line); }
:root:not([data-theme="light"]) .report-head, :root:not([data-theme="light"]) .report-block, :root:not([data-theme="light"]) .check-panel, :root:not([data-theme="light"]) .tool-tile, :root:not([data-theme="light"]) .home-link, :root:not([data-theme="light"]) .log-card, :root:not([data-theme="light"]) .guide-item, :root:not([data-theme="light"]) .issue-card, :root:not([data-theme="light"]) .history-row, :root:not([data-theme="light"]) .demo-card, :root:not([data-theme="light"]) .modal, :root:not([data-theme="light"]) .entry-dialog, :root:not([data-theme="light"]) .scenario-tile, :root:not([data-theme="light"]) .loading-card { border-color: var(--line); box-shadow: var(--shadow-sm); }
:root:not([data-theme="light"]) .issue-card.risk { background: linear-gradient(180deg, #ff4d5c14, transparent 60%), var(--surface); border-color: var(--risk-line); }
:root:not([data-theme="light"]) .danger-orb .danger-core { box-shadow: 0 0 0 6px #ff4a5a1f, 0 12px 34px -4px #ff4a5acc; }
:root:not([data-theme="light"]) .st-risk { box-shadow: 0 0 12px #ff4a5a80; }
:root:not([data-theme="light"]) .gauge.poor .gauge-fill { filter: drop-shadow(0 0 8px #ff4d5c80); }
:root:not([data-theme="light"]) .gauge.fair .gauge-fill { filter: drop-shadow(0 0 8px #ffb02e80); }
:root:not([data-theme="light"]) .gauge.good .gauge-fill { filter: drop-shadow(0 0 8px #2fe0a080); }
:root:not([data-theme="light"]) .primary-button { background: linear-gradient(180deg, #6a91ff, #3d68f0); box-shadow: 0 10px 26px -10px #4f7dffb3, 0 1px 0 #ffffff33 inset; }
:root:not([data-theme="light"]) .guard-hero.risk .guard-cta .primary-button, :root:not([data-theme="light"]) .scenario-primary { background: linear-gradient(180deg, #ff5a68, #e22a3b); box-shadow: 0 10px 26px -10px #ff4a5ab3, 0 1px 0 #ffffff33 inset; }
:root:not([data-theme="light"]) .mobile-nav { background: var(--glass); border-color: var(--line); }
:root:not([data-theme="light"]) .brand-icon, :root:not([data-theme="light"]) .mobile-logo { filter: drop-shadow(0 0 8px #4f7dff80); }
:root:not([data-theme="light"]) .entry-scene { background: var(--bg); }
:root:not([data-theme="light"]) .entry-browser { background: var(--brand-tint); }
:root:not([data-theme="light"]) .entry-site { background: var(--surface); }
:root:not([data-theme="light"]) .fake-field { border-color: var(--line); }
:root:not([data-theme="light"]) .input-shell { background: var(--surface-2); border-color: var(--line); }
}
:root[data-theme="dark"] .shell { background: radial-gradient(140% 60% at 50% -10%, #142554 0%, var(--bg) 55%); }
:root[data-theme="dark"] .guard-hero, :root[data-theme="dark"] .lookup-intro, :root[data-theme="dark"] .checking-head, :root[data-theme="dark"] .scenario-hero { background: radial-gradient(110% 80% at 100% 0%, #4f7dff2e 0%, transparent 60%), var(--surface); border: 1px solid var(--line); }
:root[data-theme="dark"] .guard-hero.risk, :root[data-theme="dark"] .scenario-hero, :root[data-theme="dark"] .checking-head.has-risk { background: radial-gradient(110% 90% at 100% 0%, #ff3b4a38 0%, #ff3b4a0d 42%, transparent 72%), var(--surface); }
:root[data-theme="dark"] .guard-hero.safe { background: radial-gradient(110% 90% at 100% 0%, #2fe0a02e 0%, transparent 65%), var(--surface); }
:root[data-theme="dark"] .score-head.danger { background: radial-gradient(100% 70% at 50% 0%, #ff3b4a33 0%, transparent 65%), var(--surface); border-color: var(--risk-line); }
:root[data-theme="dark"] .score-head.safe { background: radial-gradient(100% 70% at 50% 0%, #2fe0a02b 0%, transparent 65%), var(--surface); border-color: var(--ok-line); }
:root[data-theme="dark"] .report-head, :root[data-theme="dark"] .report-block, :root[data-theme="dark"] .check-panel, :root[data-theme="dark"] .tool-tile, :root[data-theme="dark"] .home-link, :root[data-theme="dark"] .log-card, :root[data-theme="dark"] .guide-item, :root[data-theme="dark"] .issue-card, :root[data-theme="dark"] .history-row, :root[data-theme="dark"] .demo-card, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .entry-dialog, :root[data-theme="dark"] .scenario-tile, :root[data-theme="dark"] .loading-card { border-color: var(--line); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .issue-card.risk { background: linear-gradient(180deg, #ff4d5c14, transparent 60%), var(--surface); border-color: var(--risk-line); }
:root[data-theme="dark"] .danger-orb .danger-core { box-shadow: 0 0 0 6px #ff4a5a1f, 0 12px 34px -4px #ff4a5acc; }
:root[data-theme="dark"] .st-risk { box-shadow: 0 0 12px #ff4a5a80; }
:root[data-theme="dark"] .gauge.poor .gauge-fill { filter: drop-shadow(0 0 8px #ff4d5c80); }
:root[data-theme="dark"] .gauge.fair .gauge-fill { filter: drop-shadow(0 0 8px #ffb02e80); }
:root[data-theme="dark"] .gauge.good .gauge-fill { filter: drop-shadow(0 0 8px #2fe0a080); }
:root[data-theme="dark"] .primary-button { background: linear-gradient(180deg, #6a91ff, #3d68f0); box-shadow: 0 10px 26px -10px #4f7dffb3, 0 1px 0 #ffffff33 inset; }
:root[data-theme="dark"] .guard-hero.risk .guard-cta .primary-button, :root[data-theme="dark"] .scenario-primary { background: linear-gradient(180deg, #ff5a68, #e22a3b); box-shadow: 0 10px 26px -10px #ff4a5ab3, 0 1px 0 #ffffff33 inset; }
:root[data-theme="dark"] .mobile-nav { background: var(--glass); border-color: var(--line); }
:root[data-theme="dark"] .brand-icon, :root[data-theme="dark"] .mobile-logo { filter: drop-shadow(0 0 8px #4f7dff80); }
:root[data-theme="dark"] .entry-scene { background: var(--bg); }
:root[data-theme="dark"] .entry-browser { background: var(--brand-tint); }
:root[data-theme="dark"] .entry-site { background: var(--surface); }
:root[data-theme="dark"] .fake-field { border-color: var(--line); }
:root[data-theme="dark"] .input-shell { background: var(--surface-2); border-color: var(--line); }
.entry-dialog { background: linear-gradient(180deg, var(--risk-soft), var(--surface) 34%); }
/* Alert landing page (/alert) */
body.alert-landing { background: var(--bg); }
.entry-domain { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-weight: 700; }
.entry-domain svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; }
.entry-domain span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Craft pass: one surface language for tiles, cards, buttons and focus ------------------- */
:root { --radius-card: 20px; --radius-control: 14px; --ease-out: cubic-bezier(.16,1,.3,1); }
h1, h2, h3 { letter-spacing: -0.02em; }
strong, b, .score-number, .gauge-num, .log-stats strong { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); }

/* Cards share radius, hairline and a soft two-layer shadow */
.report-block, .check-panel, .home-link, .log-card, .guide-item, .history-row, .demo-card, .loading-card, .report-head, .issue-card, .scenario-tile, .tool-card {
  border: 1px solid var(--line); border-radius: var(--radius-card); background-color: var(--surface); box-shadow: var(--shadow-sm);
}

/* Function tiles: tone per tool, gradient squircle with an inner highlight */
.tool-row { gap: 12px; }
.tool-tile { --tone: var(--brand); gap: 10px; padding: 18px 6px 15px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s; }
.tool-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 28%, var(--line)); box-shadow: 0 1px 2px #0e17260d, 0 16px 30px -18px color-mix(in srgb, var(--tone) 55%, transparent); }
.tool-tile:active { transform: translateY(0) scale(.98); }
.tool-tile strong { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.tool-tile .tool-icon { width: 48px; height: 48px; border-radius: 15px; color: var(--tone);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), color-mix(in srgb, var(--tone) 21%, var(--surface)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tone) 14%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--tone) 80%, transparent); }
.tool-tile .tool-icon .i { width: 24px; height: 24px; stroke-width: 1.8; }
.tile-virus { --tone: var(--risk); } .tile-account { --tone: var(--orange); } .tile-lookup { --tone: var(--brand); }
.tile-log { --tone: var(--ok); } .tile-quarantine { --tone: var(--violet); } .tile-guide { --tone: var(--teal); }
.tile-virus .tool-icon, .tile-account .tool-icon, .tile-lookup .tool-icon, .tile-log .tool-icon, .tile-quarantine .tool-icon, .tile-guide .tool-icon { color: var(--tone); }

/* Generic icon chips use the same squircle treatment */
.tool-icon, .home-link-icon, .log-icon, .scenario-issue-icon, .empty-art { box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent), inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); }

/* Buttons: depth through a top highlight and a tinted shadow, never a flat slab */
.primary-button { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #ffffff), var(--brand)); box-shadow: inset 0 1px 0 #ffffff38, 0 1px 2px #0e172626, 0 10px 22px -12px color-mix(in srgb, var(--brand) 85%, transparent); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s; }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); filter: brightness(.97); }
.secondary-button { border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); background: var(--brand-soft); transition: background .2s, border-color .2s; }
.secondary-button:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.danger-button { border: 1px solid color-mix(in srgb, var(--risk) 25%, transparent); background: var(--risk-soft); color: var(--risk-ink); }
.primary-button, .secondary-button, .danger-button { border-radius: var(--radius-control); font-weight: 650; letter-spacing: -0.005em; }

/* Category chips on the home hero */
.guard-cat { padding: 6px 10px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.guard-cat .i { width: 16px; height: 16px; }

/* Lists read as one block */
.check-row { padding: 13px 0; border-top-color: var(--line); }
.check-row strong { font-weight: 650; color: var(--ink); }
.check-row p { color: var(--muted); }

/* Inputs */
.input-shell { border-radius: var(--radius-control); border-color: var(--line-strong); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.input-shell:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.type-tabs { border: 1px solid var(--line); background: var(--surface-2); }
.type-tabs button.active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px #0e17261a, 0 4px 10px -6px #0e172633; }

/* Bottom navigation */
.mobile-nav { border: 1px solid var(--line); box-shadow: 0 12px 34px -14px #0e172640; }
.mobile-nav button.active { background: var(--brand-soft); color: var(--brand); }
.mobile-nav button small { font-weight: 650; }

/* Text selection and scrollbars follow the palette */
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
* { scrollbar-color: var(--line-strong) transparent; }

/* Right-to-left languages (ar, he, ur) */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .guard-hero { direction: rtl; }
[dir="rtl"] .home-link > span:last-child .i, [dir="rtl"] .guard-library span .i, [dir="rtl"] .guard-cta .text-button .i, [dir="rtl"] .passed-block summary::after, [dir="rtl"] .guide-item summary::after { transform: scaleX(-1); }
[dir="rtl"] .check-row.has-action { direction: rtl; }
[dir="rtl"] .scan-hero, [dir="rtl"] .live-row, [dir="rtl"] .issue-card header, [dir="rtl"] .log-item { direction: rtl; }
[dir="rtl"] .info-tip > div { left: auto; right: 0; text-align: right; }
[dir="rtl"] .badge, [dir="rtl"] .st-badge { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .path, [dir="rtl"] code, [dir="rtl"] .gauge-num, [dir="rtl"] input { direction: ltr; unicode-bidi: isolate; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-tile .tool-icon, :root:not([data-theme="light"]) .tool-icon, :root:not([data-theme="light"]) .home-link-icon, :root:not([data-theme="light"]) .log-icon { box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent), 0 8px 18px -12px color-mix(in srgb, currentColor 70%, transparent); }
  :root:not([data-theme="light"]) .tool-tile .tool-icon { background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 16%, var(--surface)), color-mix(in srgb, var(--tone) 30%, var(--surface))); }
  :root:not([data-theme="light"]) .guard-cat { background: color-mix(in srgb, var(--surface) 60%, transparent); }
}
:root[data-theme="dark"] .tool-tile .tool-icon, :root[data-theme="dark"] .tool-icon, :root[data-theme="dark"] .home-link-icon, :root[data-theme="dark"] .log-icon { box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent), 0 8px 18px -12px color-mix(in srgb, currentColor 70%, transparent); }
:root[data-theme="dark"] .tool-tile .tool-icon { background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 16%, var(--surface)), color-mix(in srgb, var(--tone) 30%, var(--surface))); }
.demo-icon .i, .scenario-pill .i, .modal-icon .i { width: 20px; height: 20px; vertical-align: -4px; }
.scenario-pill .i { width: 14px; height: 14px; vertical-align: -2px; }