/* ============================================================
   searchexperts.ca — app + landing styles
   Dark, modern, mobile-first. 16px min text. Blue+red dual accent.
   ============================================================ */
:root {
  --bg: #0b1220;
  --panel: #101a2e;
  --panel2: #0d1526;
  --border: #1d2b47;
  --text: #e6edf7;
  --muted: #9db3d4;
  --muted-bright: #c3d2e8;
  --accent: #3b82f6;
  --accent2: #ef4444;
  --green: #0c9467;
  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --radius: 12px;
  --g-google: #4285f4;
  --g-mobile: #fb8c00;
  --g-bing: #22c55e;
}
html.light {
  --bg: #f3f6fb; --panel: #ffffff; --panel2: #f8fafc; --border: #dfe7f2;
  --text: #16233b; --muted: #4c5c76; --muted-bright: #3d4c66; --shadow: 0 6px 18px rgba(15,23,42,.08);
  /* Darker semantic colours: the dark-theme greens/ambers/reds only reach ~2.2:1 on
     white panels, which made status pills, score numbers and the sidebar scan button
     hard to read. These keep the same hues at accessible contrast on light surfaces. */
  --ok: #0a7d57; --warn: #8a5708; --bad: #c02626; --green: #0a7d57;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
select, input { font: inherit; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--accent), #1d4ed8);
  color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(59,130,246,.45);
}
.brand-text { font-weight: 800; font-size: 18px; letter-spacing: .3px; color: var(--text); }
.b-blue { color: var(--accent); margin-left: 3px; }
.b-red { color: var(--accent2); margin-left: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-weight: 600;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--accent); }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(12,148,103,.35); }
.btn-green:hover { filter: brightness(1.1); }
.btn-blue { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--muted); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.btn-danger { border-color: var(--bad); color: var(--bad); }
.iconbtn {
  background: transparent; border: none; color: var(--muted);
  font-size: 20px; padding: 6px 10px; border-radius: 8px;
}
.iconbtn:hover { color: var(--text); background: var(--panel2); }

/* ---------- flash ---------- */
.flash {
  padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
  border: 1px solid var(--border); background: var(--panel);
}
.flash-ok { border-color: var(--ok); color: var(--ok); }
.flash-err { border-color: var(--bad); color: var(--bad); }

/* ============================================================
   PUBLIC (landing / login)
   ============================================================ */
.pub-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: rgba(11,18,32,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* The public bar is always dark, so pin its text light — otherwise the light
   theme's --text (dark) lands on a dark bar and the brand disappears. */
.pub-top .brand-text { color: #fff; }
.pub-top .pub-nav a { color: #c3d2e8; font-weight: 600; font-size: 15px; white-space: nowrap; }
.pub-top .pub-nav a:hover { color: #fff; text-decoration: none; }
.pub-top .pub-nav .btn-ghost,
.pub-top .pub-nav .btn-ghost:hover { color: #e6edf7; border-color: #9db3d4; background: transparent; }
.pub-top .pub-nav .btn-ghost:hover { border-color: var(--accent); background: rgba(59,130,246,.14); }
.pub-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pub-nav a { color: var(--muted-bright); font-weight: 600; font-size: 15px; white-space: nowrap; }
.pub-nav a:hover { color: var(--text); text-decoration: none; }
.pub-nav .btn { font-size: 14.5px; }
.pub-main { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }

.hero { text-align: center; padding: 72px 0 56px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(180deg, #fff, #9db4d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .accent { color: var(--accent2); background: none; -webkit-background-clip: initial; background-clip: initial; }
.hero .sub { color: var(--muted); font-size: clamp(17px, 2.4vw, 21px); max-width: 640px; margin: 18px auto 32px; }
.hero .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.badge {
  font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.badge.b-red { color: var(--accent2); border-color: var(--accent2); }

.section { padding: 56px 0 0; }
.section h2 { font-size: clamp(26px, 4vw, 38px); text-align: center; font-weight: 800; }
.section .lead { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto 40px; font-size: 17px; }

/* 3 audience cards (small biz / large biz / agency) */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-3px); }
.card .ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.ico-green { background: rgba(16,185,129,.14); }
.ico-red { background: rgba(239,68,68,.14); }
.ico-blue { background: rgba(59,130,246,.14); }
.card h3 { font-size: 21px; font-weight: 700; }
.card p { color: var(--muted); font-size: 15.5px; }
.card .tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 6px; margin-bottom: 14px;
}
.tag-wl { background: rgba(59,130,246,.15); color: var(--accent); border: 1px solid var(--accent); }
.tag-sb { background: rgba(16,185,129,.12); color: var(--green); border: 1px solid var(--green); }
.tag-lb { background: rgba(239,68,68,.12); color: var(--accent2); border: 1px solid var(--accent2); }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.feat {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
}
.feat h4 { margin: 0 0 6px; font-size: 16.5px; }
.feat p { color: var(--muted); font-size: 14.5px; margin: 0; }

.demo-cta {
  text-align: center; background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(239,68,68,.1));
  border: 1px solid var(--border); border-radius: 18px; padding: 48px 28px; margin-top: 64px;
}
.demo-cta h2 { font-size: clamp(26px, 4vw, 36px); }
.demo-cta p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; }

.pub-foot { border-top: 1px solid var(--border); padding: 26px 24px; }
.pub-foot-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

/* login card */
.auth-wrap { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 36px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 26px; font-weight: 800; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 15px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.hint { font-size: 13.5px; color: var(--muted); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-wrap { min-height: 100vh; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 58px;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 0 14px;
}
.topbar .iconbtn {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-bright); font-size: 21px; border-radius: 10px;
}
.topbar .iconbtn:hover { color: var(--text); background: var(--panel2); }
.site-switch { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.folder-icon { color: var(--accent); flex: none; }
.site-select {
  background: transparent; border: none; color: var(--text); font-weight: 700; font-size: 16px;
  max-width: 100%; min-width: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.top-link {
  color: var(--muted-bright); font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 8px;
}
.top-link:hover { color: var(--text); text-decoration: none; background: var(--panel2); }
.uname { color: var(--muted-bright); font-size: 14.5px; }
.usermenu { display: flex; align-items: center; gap: 8px; flex: none; }

.sidebar {
  position: fixed; top: 58px; bottom: 0; left: 0; z-index: 55; width: 252px;
  background: #0c1424; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  transition: transform .2s ease;
}
html.light .sidebar { background: var(--panel2); }
.side-brand { padding: 18px 18px 10px; }
.side-account {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 12px 12px; padding: 12px; border-radius: 10px; background: var(--panel2);
}
.sa-text { display: flex; flex-direction: column; min-width: 0; }
.sa-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-role { font-size: 11.5px; color: var(--muted); letter-spacing: .4px; }

.side-nav { flex: 1; padding: 0 10px 20px; }
.nav-item, .nav-group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px; margin-bottom: 2px;
  border: none; background: transparent; color: var(--muted);
  font-size: 14.5px; font-weight: 600; text-align: left; border-radius: 8px;
}
.nav-item:hover, .nav-group-btn:hover { background: var(--panel2); color: var(--text); text-decoration: none; }
.nav-item.active, .nav-sub-item.active {
  background: rgba(59,130,246,.14); color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.caret { font-size: 11px; color: var(--muted); }
.nav-sub { display: none; padding: 2px 0 8px 14px; border-left: 1px solid var(--border); margin-left: 10px; }
.nav-group.open .nav-sub { display: block; }
.nav-sub-item {
  display: block; padding: 7px 12px; font-size: 14px; color: var(--muted);
  border-radius: 7px; margin-bottom: 1px;
}
.nav-sub-item:hover { color: var(--text); background: var(--panel2); text-decoration: none; }
.side-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border-top: 1px solid var(--border);
}
.powered { font-size: 12px; color: var(--muted); }

.app-main {
  margin-left: 252px; padding: 82px 26px 60px;
  min-height: 100vh;
}
.sidebar-overlay { display: none; }

/* page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; margin: 0 0 4px; }
.page-head .sub { color: var(--muted); font-size: 15px; max-width: 780px; margin: 0; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* dashboard cards */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid2 .span2 { grid-column: 1 / -1; }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.panel h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.panel h3 .ico { color: var(--accent); }
.panel .help-link { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 300px; }
.chart-legend { display: flex; justify-content: center; gap: 22px; margin-top: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* engine cards (ranked pages / ranked keywords) */
.engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.engine-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; }
.engine-card .eng-name { text-align: center; font-weight: 800; font-size: 20px; letter-spacing: .2px; margin-bottom: 14px; }
.eng-google { color: var(--g-google); } .eng-google_mobile { color: var(--g-mobile); } .eng-bing { color: var(--g-bing); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.metric {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 4px;
  min-width: 0; overflow: hidden;
}
.metric .m-label { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; display: flex; align-items: flex-start; gap: 6px; line-height: 1.3; }
.metric .m-value { font-size: 30px; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.metric .m-delta { font-size: 13.5px; font-weight: 700; }
.metric .spark { height: 44px; margin-top: 6px; position: relative; min-width: 0; padding: 2px 0; }
.metric .spark canvas { width: 100% !important; max-width: 100%; }
.metric .m-ico { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.m-ico.ico-google { background: var(--g-google); }
.m-ico.ico-google_mobile { background: var(--g-mobile); }
.m-ico.ico-bing { background: var(--g-bing); }

.avatar.av-0 { background: hsl(210, 55%, 38%); }
.avatar.av-1 { background: hsl(250, 55%, 38%); }
.avatar.av-2 { background: hsl(310, 45%, 36%); }
.avatar.av-3 { background: hsl(355, 55%, 38%); }
.avatar.av-4 { background: hsl(40, 50%, 34%); }
.avatar.av-5 { background: hsl(95, 40%, 32%); }
.avatar.av-6 { background: hsl(170, 45%, 30%); }
.avatar.av-7 { background: hsl(280, 45%, 36%); }

.btn-block { width: 100%; justify-content: center; }
.brand-center { justify-content: center; margin-bottom: 18px; }
.hint-center { text-align: center; margin-top: 14px; }
.hidden { display: none; }
.grid2-sm { gap: 12px; }
.iconbtn-danger { color: var(--bad); }
.tag-muted { background: rgba(139,160,192,.1); color: var(--muted); }
.delta-sm { font-size: 13px; }

.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.delta.same { color: var(--muted); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--panel); }
.tbl th {
  text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--panel2); }
.tbl .empty-row { text-align: center; color: var(--muted); padding: 28px; }
.tbl .kw { font-weight: 700; }
.rank-pill {
  display: inline-block; min-width: 38px; text-align: center; padding: 3px 8px;
  border-radius: 7px; font-weight: 700; font-size: 14px;
  background: var(--panel2); border: 1px solid var(--border);
}
.rank-pill.r1 { background: rgba(16,185,129,.16); color: var(--ok); border-color: var(--ok); }
.rank-pill.r2 { background: rgba(59,130,246,.14); color: var(--accent); border-color: var(--accent); }
.rank-pill.r3 { background: rgba(245,158,11,.14); color: var(--warn); border-color: var(--warn); }
.rank-pill.nr { color: var(--muted); opacity: .55; }
.tag-pill { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(59,130,246,.12); color: var(--accent); margin: 1px 3px 1px 0; }

/* forms */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type=text], .toolbar input[type=search] {
  padding: 9px 13px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); min-width: 220px;
}
.toolbar .spacer { flex: 1; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; }
.modal-back {
  position: fixed; inset: 0; background: rgba(4,8,16,.7); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-back.open { display: flex; }
.modal { width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); }
.modal h3 { font-size: 20px; font-weight: 800; }
.modal .close { float: right; font-size: 20px; color: var(--muted); background: none; border: none; }

/* stub / coming soon */
.stub {
  max-width: 640px; margin: 60px auto; text-align: center;
  background: var(--panel); border: 1px dashed var(--border); border-radius: 16px; padding: 48px 32px;
}
.stub .big { font-size: 44px; margin-bottom: 12px; }
.stub h2 { font-size: 24px; font-weight: 800; }
.stub p { color: var(--muted); }
.stub .phase { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent); padding: 4px 12px; border-radius: 999px; }

/* ============================================================
   MOBILE
   ============================================================ */
.hide-sm { display: none; }
@media (max-width: 1024px) {
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .uname { display: none; }
}
@media (max-width: 820px) {
  .hide-sm { display: none; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .sidebar-overlay.show { display: block; position: fixed; inset: 58px 0 0 0; background: rgba(4,8,16,.6); z-index: 54; }
  .app-main { margin-left: 0; padding: 76px 14px 50px; }
  .topbar { padding: 0 6px; gap: 4px; }
  .topbar .iconbtn { min-width: 40px; }
  .site-select { font-size: 15px; max-width: 46vw; }
  .top-right { gap: 4px; }
  .usermenu { gap: 4px; }
  .pub-top { padding: 10px 14px; gap: 8px; }
  .pub-nav { gap: 10px; }
  .pub-nav a:not(.btn) { display: none; }
  .page-head { flex-direction: column; }
  .hero { padding: 48px 0 36px; }
}
@media (max-width: 480px) {
  .pub-top .brand-text { display: none; }
  .pub-nav .btn { padding: 8px 12px; font-size: 14px; }
  .pub-top { padding: 10px 12px; }
}
/* ============================================================
   SESSION 2 — icon system, domains, plans, reports
   ============================================================ */
.sx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.ic-sm { width: 15px; height: 15px; vertical-align: -2px; }
.ic-xs { width: 12px; height: 12px; vertical-align: -1px; }
.ic-lg { width: 24px; height: 24px; }
.ic-xl { width: 44px; height: 44px; }
.ic-flip { transform: rotate(180deg); }
.btn .ic, .nav-item .ic, .nav-group-btn .ic, .top-link .ic, .qchip .ic, .hint .ic, .help .ic, .plan-features .ic, .signup-perks .ic { margin-right: 2px; }

/* chips + top bar extras */
.qchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--panel2); color: var(--muted-bright); white-space: nowrap;
}
.qchip-warn { border-color: var(--warn); color: var(--warn); }
.plan-chip {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; background: rgba(59,130,246,.16); color: var(--accent); border: 1px solid var(--accent);
}
html.light .plan-chip { background: rgba(29,78,216,.12); color: #1d4ed8; border-color: #1d4ed8; }
.side-scan {
  display: flex; align-items: center; gap: 8px; margin: 0 12px 12px;
  padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  background: rgba(12,148,103,.16); border: 1px solid var(--green); color: #d8fbe9;
}
.side-scan:hover { background: rgba(12,148,103,.26); text-decoration: none; }
.side-scan .ss-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #a9dfc8; }
/* light theme: pale mint on a near-white sidebar was unreadable */
html.light .side-scan { background: rgba(10,125,87,.10); color: #075e42; border-color: #0a7d57; }
html.light .side-scan:hover { background: rgba(10,125,87,.18); }
html.light .side-scan .ss-count { color: #075e42; }
.nav-item, .nav-group-btn { gap: 9px; justify-content: flex-start; }
.nav-item span, .nav-group-btn span { min-width: 0; }
.nav-group-btn .caret { margin-left: auto; }
.nav-group.open .caret .ic { transform: rotate(180deg); }
.caret .ic { transition: transform .15s ease; }
.site-select-empty { color: var(--muted-bright); font-weight: 600; font-size: 15px; }

/* crumbs, empty states, hints */
.crumb { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.crumb a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.crumb a:hover { color: var(--text); text-decoration: none; }
.hint-inline { font-size: 13px; color: var(--muted); font-weight: 500; }
.txt-bad { color: var(--bad); }
.empty { text-align: center; padding: 34px 20px; }
.empty-ico { color: var(--accent); opacity: .75; margin-bottom: 10px; }
.empty h4 { margin: 0 0 6px; font-size: 18px; }
.empty p { color: var(--muted); margin: 0 0 16px; }
.plain-list { margin: 0; padding-left: 20px; color: var(--muted-bright); }
.plain-list li { margin-bottom: 8px; }
.codeblock {
  display: block; white-space: pre-wrap; word-break: break-word;
  background: #0c1424; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; font-size: 13.5px; color: #cfe0f7; overflow-x: auto;
}
html.light .codeblock { background: #0c1424; }

/* sign up */
.signup-wrap { padding: 40px 0 70px; }
.signup-card {
  max-width: 520px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 34px; box-shadow: var(--shadow);
}
.signup-card h1 { font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 6px; }
.signup-card .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 15px; }
.hint-inline { font-size: 13px; }
.signup-perks { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); }
.signup-perks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted-bright); margin-bottom: 8px; }
.signup-perks .ic { color: var(--ok); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.check input { width: auto; }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .span2 { grid-column: 1 / -1; }
.form-grid h4.form-sep {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border); font-size: 15px; color: var(--muted-bright);
}
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-actions .spacer { flex: 1; }
.field textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font: inherit; resize: vertical;
}
.grid-col { display: flex; flex-direction: column; gap: 18px; }

/* domain cards */
.dom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.dom-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.dom-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dom-name { min-width: 0; }
.dom-label { display: block; font-weight: 800; font-size: 17px; word-break: break-word; }
.dom-host { display: block; font-size: 13.5px; color: var(--muted); }
.dom-score { font-size: 26px; font-weight: 800; line-height: 1; white-space: nowrap; }
.dom-score small { font-size: 13px; font-weight: 700; color: var(--muted); }
.dom-score-none { color: var(--muted); }
.dom-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.dom-meta span { display: inline-flex; align-items: center; gap: 5px; }
.dom-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.dom-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dom-add input[name=domain] { flex: 1 1 260px; min-width: 0; }
.dom-add input[name=label] { flex: 0 1 200px; min-width: 0; }
.dom-add input {
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font: inherit;
}
.onboard { border-color: var(--green); box-shadow: 0 0 0 1px rgba(12,148,103,.25), var(--shadow); }

/* mini widgets */
.mini-score { text-align: center; padding: 6px 0 14px; }
.ms-num { font-size: 46px; font-weight: 800; line-height: 1; }
.ms-out { font-size: 16px; color: var(--muted); font-weight: 700; }
.ms-grade { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.mini-score.sc-a .ms-num { color: var(--ok); } .mini-score.sc-b .ms-num { color: var(--accent); }
.mini-score.sc-c .ms-num { color: #60a5fa; } .mini-score.sc-d .ms-num { color: var(--warn); }
.mini-score.sc-f .ms-num { color: var(--bad); }
.mini-bars { display: flex; flex-direction: column; gap: 10px; }
.mb-row { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; font-size: 14px; }
.mb-val { text-align: right; font-weight: 700; }
.mini-list { list-style: none; margin: 0 0 12px; padding: 0; }
.mini-list li + li { border-top: 1px solid var(--border); }
.mini-list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; color: var(--text); }
.mini-list a:hover { text-decoration: none; color: var(--accent); }
.ml-score { font-weight: 800; text-align: center; }
.ml-score.sc-a { color: var(--ok); } .ml-score.sc-b { color: var(--accent); }
.ml-score.sc-c { color: #60a5fa; } .ml-score.sc-d { color: var(--warn); } .ml-score.sc-f { color: var(--bad); }
.ml-main { font-weight: 600; font-size: 14.5px; }
.ml-sub { font-size: 13px; color: var(--muted); }
.panel-danger { border-color: rgba(239,68,68,.4); }
.log-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.log-row:last-child { border-bottom: none; }
.log-act { font-weight: 700; }
.log-det { color: var(--muted-bright); word-break: break-word; }
.log-when { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* meters + plans */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.meter { min-width: 0; }
.meter-top { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 20px; }
.plan-card {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; box-shadow: var(--shadow);
}
.plan-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan-badge {
  position: absolute; top: -11px; left: 24px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.plan-card h3 { font-size: 20px; margin: 0 0 6px; }
.plan-price { font-size: 34px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.plan-price small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.plan-tag { color: var(--muted); font-size: 14.5px; min-height: 44px; }
.plan-features { list-style: none; margin: 0 0 18px; padding: 0; }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--muted-bright); margin-bottom: 8px; }
.plan-features .ic { color: var(--ok); margin-top: 3px; }

/* table cell helpers */
.th-actions, .td-actions { text-align: right; white-space: nowrap; }
.td-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.src-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted);
}
.src-live { border-color: var(--ok); color: var(--ok); }
.src-reader { border-color: var(--accent); color: var(--accent); }
.src-meta { border-color: var(--warn); color: var(--warn); }

/* copy row */
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-row input {
  flex: 1 1 320px; min-width: 0; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--muted-bright); font: inherit;
}

/* ============================================================
   White-label report document (always light — designed for print)
   ============================================================ */
.doc-wrap { max-width: 1000px; margin: 0 auto; padding: 25px 0 48px; }
.doc {
  background: #ffffff; color: #16233b; border-radius: 14px; padding: 34px 38px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 16px; line-height: 1.55;
}
.doc a { color: #055db2; }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid #e6ebf2; padding-bottom: 14px; flex-wrap: wrap; }
.doc-brand { display: flex; align-items: center; gap: 10px; }
.doc-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #055db2; color: #fff; font-weight: 800; font-size: 13px; }
.doc-brandname { font-weight: 800; font-size: 19px; }
.doc-meta { display: flex; gap: 16px; color: #5b6b83; font-size: 13.5px; flex-wrap: wrap; }
.doc-title h1 { font-size: 30px; margin: 22px 0 4px; color: #0f1c30; line-height: 1.2; }
.doc-sub { color: #5b6b83; margin: 0 0 20px; font-size: 16.5px; }
.doc-score { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: center; background: #f5f8fc; border: 1px solid #e6ebf2; border-radius: 12px; padding: 22px; }
.doc-score-main { text-align: center; }
.doc-score-num { font-size: 62px; font-weight: 800; line-height: 1; }
.doc-score-out { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #5b6b83; }
.doc-score-main.d-a .doc-score-num { color: #0c9467; } .doc-score-main.d-b .doc-score-num { color: #055db2; }
.doc-score-main.d-c .doc-score-num { color: #2f7fd6; } .doc-score-main.d-d .doc-score-num { color: #b3730a; }
.doc-score-main.d-f .doc-score-num { color: #c02626; }
.doc-pillars { display: grid; gap: 12px; }
.doc-pillar { display: grid; grid-template-columns: 118px 1fr 38px; gap: 12px; align-items: center; font-size: 15px; }
.doc-pillar-name { font-weight: 700; }
.doc-pillar-val { text-align: right; font-weight: 800; }
.doc-bar { display: block; height: 10px; background: #e3eaf3; border-radius: 99px; overflow: hidden; }
.doc-bar-fill { display: block; height: 100%; background: #055db2; border-radius: 99px; }
.doc-bar-fill.d-a { background: #0c9467; } .doc-bar-fill.d-b { background: #055db2; }
.doc-bar-fill.d-c { background: #4a9ae0; } .doc-bar-fill.d-d { background: #e79a16; } .doc-bar-fill.d-f { background: #d94141; }
.doc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 0; }
.doc-kpi { background: #f5f8fc; border: 1px solid #e6ebf2; border-radius: 10px; padding: 12px 14px; }
.dk-lab { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: #5b6b83; font-weight: 800; }
.dk-val { display: block; font-size: 21px; font-weight: 800; color: #0f1c30; }
.dk-sub { display: block; font-size: 12.5px; color: #5b6b83; }
.doc-block { margin-top: 28px; }
.doc-block h2 { font-size: 19px; margin: 0 0 10px; color: #0f1c30; border-bottom: 1px solid #e6ebf2; padding-bottom: 6px; }
.doc-fixes { padding-left: 20px; margin: 0; }
.doc-fixes li { margin-bottom: 12px; }
.doc-fix strong { font-size: 15.5px; }
.doc-fix-val { display: inline-block; margin-left: 6px; background: #eef2f7; border-radius: 6px; padding: 1px 8px; font-size: 13px; color: #33445f; }
.doc-fix-note { display: block; color: #5b6b83; font-size: 14.5px; margin-top: 3px; }
.doc-fix-fail strong { color: #c02626; } .doc-fix-warn strong { color: #b3730a; }
.doc-note { color: #5b6b83; font-size: 13.5px; }
.doc-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: #5b6b83; padding: 8px 10px; border-bottom: 1px solid #dde5ef; }
.doc-tbl td { padding: 9px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.dt-name { font-weight: 700; width: 25%; }
.dt-pill { display: inline-block; min-width: 74px; text-align: center; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; }
.dt-pass { background: #e7f7ef; color: #0a7d57; } .dt-warn { background: #fdf3e2; color: #8a5708; }
.dt-fail { background: #fdeaea; color: #c02626; } .dt-unknown { background: #eef2f7; color: #5b6b83; }
.dt-found { color: #33445f; width: 22%; }
.dt-note { color: #5b6b83; }
.doc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 22px; }
.doc-fact span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: #5b6b83; font-weight: 800; }
.doc-fact strong { font-weight: 600; word-break: break-word; }
.doc-foot { margin-top: 30px; padding-top: 14px; border-top: 2px solid #e6ebf2; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #5b6b83; }
.doc-foot strong { color: #0f1c30; display: block; }
.doc-foot-note { max-width: 62%; }
.doc-cta-foot { text-align: center; margin: 22px 0 0; color: var(--muted); }
.share-box { margin-bottom: 20px; }

/* print */
@media print {
  .no-print, .topbar, .sidebar, .sidebar-overlay, .pub-top, .pub-foot, .side-foot, .flash, .rp-alert { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .app-wrap, .app-main, .pub-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .doc-wrap { max-width: none; padding: 0; }
  .doc { box-shadow: none; border-radius: 0; padding: 0; font-size: 11.5pt; }
  .doc-block, .doc-score, .doc-kpis, .doc-foot { break-inside: avoid; }
  .doc-tbl tr { break-inside: avoid; }
  @page { margin: 14mm; }
}

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .meters { grid-template-columns: 1fr; }
  .doc-score { grid-template-columns: 1fr; }
  .doc { padding: 24px 20px; }
  .doc-foot-note { max-width: 100%; }
  .log-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .dom-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .doc-pillar { grid-template-columns: 92px 1fr 34px; }
  .doc-title h1 { font-size: 24px; }
  .doc-kpis { grid-template-columns: 1fr 1fr; }
  .td-actions { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .metrics { grid-template-columns: 1fr; }
}


/* ============================================================
   INSTANT REPORT — landing scan + public report
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pub-flash {
  max-width: 720px; margin: 18px auto 0;
  text-align: center; font-size: 16px; font-weight: 600;
}

/* ---------- landing: one input, nothing else ---------- */
body[data-page="landing"] .pub-main { max-width: none; padding: 0; }
body[data-page="landing"] .pub-foot { display: none; }
body[data-page="landing"] .scan-hero { min-height: calc(100vh - 72px); }
.scan-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vh - 116px); scroll-margin-top: 84px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px 0;
  background: #0b1220;
}

/* inline alert next to the form — the page anchors to #scan, so a message parked
   at the top of the document used to scroll out of sight behind the sticky nav */
.scan-alert {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  max-width: 680px; margin: 0 auto 20px; padding: 14px 18px;
  border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.45;
  background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.55); color: #ffe2e2;
  box-shadow: 0 10px 30px rgba(239,68,68,.16);
  animation: sx-alert-in .22s ease-out;
}
.scan-alert-ico {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent2); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.scan-alert-text { min-width: 0; }
.scan-alert-ok {
  background: rgba(12,148,103,.16); border-color: rgba(34,197,94,.55); color: #d9fbea;
  box-shadow: 0 10px 30px rgba(12,148,103,.16);
}
.scan-alert-ok .scan-alert-ico { background: var(--ok); }
@keyframes sx-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-alert { animation: none; }
}
/* Two slow colour glows behind the copy — transform-only, so they animate on the
   GPU compositor: no repaints, no JS, no filters (cheap on phones). */
.scan-hero::before,
.scan-hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 78vmax; height: 78vmax; border-radius: 50%;
  will-change: transform;
}
.scan-hero::before {
  top: -32vmax; left: -24vmax;
  background: radial-gradient(closest-side, rgba(59,130,246,.34), rgba(59,130,246,.11) 46%, rgba(59,130,246,0) 74%);
  animation: sx-drift-a 38s ease-in-out infinite;
}
.scan-hero::after {
  bottom: -34vmax; right: -26vmax;
  background: radial-gradient(closest-side, rgba(239,68,68,.26), rgba(239,68,68,.08) 46%, rgba(239,68,68,0) 74%);
  animation: sx-drift-b 52s ease-in-out infinite;
}
/* Darkening scrim: keeps the headline on dark pixels whatever the glows are doing. */
.scan-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(102% 76% at 50% 52%, rgba(8,13,24,.78) 0%, rgba(8,13,24,.5) 44%, rgba(8,13,24,.14) 76%, rgba(8,13,24,0) 100%),
    linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.24) 42%, rgba(11,18,32,.66) 100%);
}
.scan-inner { position: relative; z-index: 2; width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }
@keyframes sx-drift-a {
  0%   { transform: translate3d(-5%, -3%, 0) scale(1); }
  50%  { transform: translate3d(5%, 7%, 0) scale(1.14); }
  100% { transform: translate3d(-5%, -3%, 0) scale(1); }
}
@keyframes sx-drift-b {
  0%   { transform: translate3d(4%, 5%, 0) scale(1.1); }
  50%  { transform: translate3d(-6%, -5%, 0) scale(1); }
  100% { transform: translate3d(4%, 5%, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-hero::before, .scan-hero::after { animation: none; }
}
@media (max-width: 640px) {
  .scan-hero::before, .scan-hero::after { width: 120vmax; height: 120vmax; }
}
.scan-kicker {
  font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
/* The hero is always dark, so pin its text to the dark palette — in the light
   theme --text/--muted are near-black and would vanish against this backdrop. */
.scan-hero .scan-sub  { color: #c3d2e8; }
.scan-hero .scan-note { color: #9db3d4; }
.scan-hero h1 {
  font-size: clamp(34px, 6.6vw, 64px); font-weight: 800; letter-spacing: -.8px; line-height: 1.08;
  margin: 0 0 20px;
  background: linear-gradient(180deg, #fff, #9db4d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scan-hero h1 .accent { color: var(--accent2); background: none; -webkit-background-clip: initial; background-clip: initial; }
.scan-sub {
  color: var(--muted-bright); font-size: clamp(17px, 2.2vw, 20px);
  max-width: 620px; margin: 0 auto 34px;
}
.scan-form {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  max-width: 680px; margin: 0 auto;
}
.scan-form input[type=text] {
  flex: 1 1 320px; min-width: 0;
  padding: 18px 20px; font-size: 19px; font-weight: 600;
  border-radius: 14px; border: 1px solid #22344f;
  background: rgba(13,21,38,.92); color: #f2f6fc;
  box-shadow: var(--shadow);
}
.scan-form input[type=text]::placeholder { color: #8ea4c4; font-weight: 500; }
.scan-form input[type=text]:focus { outline: 2px solid var(--accent); border-color: transparent; }
.btn-lg { padding: 18px 30px; font-size: 18px; border-radius: 14px; }
.scan-note { color: var(--muted); font-size: 15px; margin: 18px 0 0; }

/* ---------- report ---------- */
.rp-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 0 0; }

/* refresh / error notice on a report — theme-aware, unlike the hero alert */
.rp-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin-bottom: 22px; border-radius: 12px;
  background: rgba(239,68,68,.10); border: 1px solid var(--accent2); color: var(--text);
  font-size: 16px; font-weight: 600; line-height: 1.45;
  animation: sx-alert-in .22s ease-out;
}
.rp-alert-ico {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent2); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rp-alert-text { min-width: 0; }
.rp-alert-ok { background: rgba(34,197,94,.10); border-color: var(--ok); }
.rp-alert-ok .rp-alert-ico { background: var(--ok); }
.rp-alert-info { background: rgba(59,130,246,.10); border-color: var(--accent); }
.rp-alert-info .rp-alert-ico { background: var(--accent); }
.rp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.rp-head h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0 0 6px; word-break: break-word; }
.rp-kicker {
  font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.rp-sub { color: var(--muted); font-size: 15.5px; margin: 0; }
.rp-sub a { color: var(--muted-bright); }
.rp-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border: 1px solid var(--warn); color: var(--warn);
}
.rp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.rp-score {
  display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.rp-score-main { text-align: center; }
.rp-score-num { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.rp-score-out { font-size: 22px; font-weight: 700; color: var(--muted); }
.rp-grade {
  display: block; margin-top: 8px; font-size: 13px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
}
.rp-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rp-pillar { min-width: 0; }
.rp-pillar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rp-pillar-name { font-size: 15.5px; font-weight: 700; }
.rp-pillar-val { font-size: 19px; font-weight: 800; }
.rp-pillar-help { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.bar {
  display: block; height: 9px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--border); overflow: hidden; margin-top: 8px;
}
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bf-0 { width: 0; } .bf-5 { width: 5%; } .bf-10 { width: 10%; } .bf-15 { width: 15%; }
.bf-20 { width: 20%; } .bf-25 { width: 25%; } .bf-30 { width: 30%; } .bf-35 { width: 35%; }
.bf-40 { width: 40%; } .bf-45 { width: 45%; } .bf-50 { width: 50%; } .bf-55 { width: 55%; }
.bf-60 { width: 60%; } .bf-65 { width: 65%; } .bf-70 { width: 70%; } .bf-75 { width: 75%; }
.bf-80 { width: 80%; } .bf-85 { width: 85%; } .bf-90 { width: 90%; } .bf-95 { width: 95%; }
.bf-100 { width: 100%; }

/* score bands */
.sc-a { color: var(--ok); } .sc-a-txt { color: var(--ok); } .sc-a-bg { background: var(--ok); }
.sc-b { color: var(--accent); } .sc-b-txt { color: var(--accent); } .sc-b-bg { background: var(--accent); }
.sc-c { color: #60a5fa; } .sc-c-txt { color: #60a5fa; } .sc-c-bg { background: #60a5fa; }
.sc-d { color: var(--warn); } .sc-d-txt { color: var(--warn); } .sc-d-bg { background: var(--warn); }
.sc-f { color: var(--bad); } .sc-f-txt { color: var(--bad); } .sc-f-bg { background: var(--bad); }

/* KPI cards */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.k-lab {
  font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted);
}
.k-val { font-size: 28px; font-weight: 800; line-height: 1.1; }
.k-val small { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.k-sub { font-size: 13.5px; color: var(--muted); word-break: break-word; }

/* fix-first list */
.rp-fixes { margin-bottom: 22px; }
.fixlist { margin: 0 0 4px; padding-left: 22px; }
.fix { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.fix:last-child { border-bottom: none; }
.fix-name { display: block; font-size: 16.5px; font-weight: 700; }
.fix-val {
  display: inline-block; margin: 3px 0 2px; font-size: 14px; color: var(--muted-bright);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px;
}
.fix-note { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.fix-fail .fix-name { color: var(--bad); }
.fix-warn .fix-name { color: var(--warn); }
.rp-help { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

/* findings tables */
.rp-group { margin-bottom: 20px; padding: 0; overflow: hidden; }
.rp-group h3 {
  margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--panel2); font-size: 16.5px;
}
.rp-group .tbl-wrap { border: none; border-radius: 0; }
.rp-tbl { min-width: 720px; }
.rp-tbl th:nth-child(2), .rp-tbl td:nth-child(2) { width: 96px; }
.rp-tbl th:nth-child(3), .rp-tbl td:nth-child(3) { width: 190px; }
.rp-check { font-weight: 700; }
.rp-found { color: var(--muted-bright); font-size: 14.5px; word-break: break-word; }
.rp-note { color: var(--muted); font-size: 14.5px; }
.st {
  display: inline-block; min-width: 76px; text-align: center; padding: 3px 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.st-pass { background: rgba(34,197,94,.16); color: var(--ok); border: 1px solid var(--ok); }
.st-warn { background: rgba(245,158,11,.14); color: var(--warn); border: 1px solid var(--warn); }
.st-fail { background: rgba(239,68,68,.16); color: var(--bad); border: 1px solid var(--bad); }
.st-unknown { background: rgba(139,160,192,.10); color: var(--muted); border: 1px dashed var(--muted); }

.rp-cta { margin: 34px 0 0; }
.rp-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rp-foot { text-align: center; color: var(--muted); font-size: 13.5px; margin: 22px 0 0; }

@media (max-width: 900px) {
  .rp-score { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
  .rp-score-num { font-size: 64px; }
}
@media (max-width: 640px) {
  .rp-pillars { grid-template-columns: 1fr; }
  .scan-hero { min-height: auto; padding: 26px 0 46px; }
  .scan-form input[type=text] { flex: 1 1 100%; padding: 16px 18px; font-size: 17px; }
  .scan-form .btn-lg { width: 100%; justify-content: center; }
  .rp-head { flex-direction: column; }
  .rp-actions { width: 100%; }
  .rp-actions .btn { flex: 1 1 auto; justify-content: center; }
}