@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---------- PRIMITIVES ---------- */
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f8fa; --n-100:#eef1f4;
  --n-150:#e4e8ed; --n-200:#d8dee5; --n-300:#bcc5cf; --n-400:#94a1ad;
  --n-500:#6b7885; --n-600:#515c68; --n-700:#3b444e; --n-800:#262c33;
  --n-850:#1c2127; --n-900:#12161b; --n-950:#0b0e12;
  --brand-50:#e6faf5; --brand-100:#c5f2e8; --brand-200:#93e6d5; --brand-300:#58d3bd;
  --brand-400:#2bbaa2; --brand-500:#12a089; --brand-600:#0c8574; --brand-700:#0b6a5d;
  --brand-800:#0d544b; --brand-900:#0c443e; --brand-950:#05302b;

  /* ---------- BRIDGE (existing names, re-skinned) ---------- */
  --bg:#f6f8fa; --bg-soft:#eef1f4;
  --panel:#ffffff; --panel-soft:#fbfcfd;
  --line:#e4e8ed; --line-strong:#d8dee5;
  --text:#0e1418; --muted:#515c68; --muted-strong:#1c2127;
  --accent:#0b6a5d; --accent-dark:#0d544b; --accent-soft:#e6faf5; --on-accent:#ffffff;
  --ok:#12813b;      --ok-soft:#e8f8ee;
  --good:#1a63d6;    --good-soft:#e9f1ff;
  --warn:#b3660a;    --warn-soft:#fdf3e2;
  --danger:#b71d2b;  --danger-soft:#fdeaec;
  --critical:#a80f2e;--critical-soft:#fde8ef;
  --high:#c2410c;    --high-soft:#fdece2;
  --medium:#b3660a;  --medium-soft:#fdf3e2;
  --low:#1a63d6;     --low-soft:#e9f1ff;
  --info:#515c68;    --info-soft:#eef1f4;
  --shadow-sm:0 1px 2px rgba(16,24,32,.06), 0 1px 1px rgba(16,24,32,.04);
  --shadow-md:0 4px 8px rgba(16,24,32,.08), 0 12px 20px rgba(16,24,32,.08);

  /* ---------- PREMIUM ADDITIVE ---------- */
  --sidebar-bg:#0e1418;                 /* dark sidebar in BOTH themes = signature anchor */
  --scrim:rgba(11,14,18,.48);
  --surface-inset:#f1f4f7;              /* inputs at rest */
  --ring-track:#e4e8ed;                 /* score-ring track */
  --accent-ring:rgba(18,160,137,.40);

  /* score bands (unified/health score) */
  --score-pass:#17a34a; --score-low:#c9a207; --score-medium:#d98207;
  --score-high:#e8622c; --score-critical:#dc3545;

  /* elevation ladder */
  --e-1:0 1px 2px rgba(16,24,32,.06),0 1px 1px rgba(16,24,32,.04);
  --e-2:0 2px 4px rgba(16,24,32,.06),0 4px 8px rgba(16,24,32,.06);
  --e-3:0 4px 8px rgba(16,24,32,.08),0 12px 20px rgba(16,24,32,.08);
  --e-4:0 8px 16px rgba(16,24,32,.10),0 24px 40px rgba(16,24,32,.12);
  --e-inset:inset 0 1px 2px rgba(16,24,32,.06);

  /* spacing / radius */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;

  /* motion / focus */
  --dur-1:80ms; --dur-2:140ms; --dur-3:220ms; --dur-4:320ms; --dur-5:480ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1.15);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* type scale */
  --font-sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --t-display:700 40px/44px var(--font-sans);
  --t-h1:700 30px/36px var(--font-sans); --t-h2:650 24px/32px var(--font-sans);
  --t-h3:600 20px/28px var(--font-sans); --t-body:450 14px/22px var(--font-sans);
  --t-label:550 13px/18px var(--font-sans); --t-small:450 12px/18px var(--font-sans);
  --t-caption:600 11px/16px var(--font-sans);

  /* colorblind-safe categorical viz */
  --viz-1:#0d8f7c; --viz-2:#e69f00; --viz-3:#3b7dd8; --viz-4:#cc5c00;
  --viz-5:#8256c4; --viz-6:#009e73; --viz-7:#d55e9c; --viz-8:#5c6b78;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b0e12; --bg-soft:#06080a;
  --panel:#12161b; --panel-soft:#1a1f26;
  --line:#1f262d; --line-strong:#2a323b;
  --text:#f4f7f9; --muted:#a3b0bc; --muted-strong:#e2e8ee;
  --accent:#2bbaa2; --accent-dark:#58d3bd; --accent-soft:rgba(43,186,162,.14); --on-accent:#04211d;
  --ok:#34c065;     --ok-soft:rgba(52,192,101,.14);
  --good:#5b9bff;   --good-soft:rgba(91,155,255,.15);
  --warn:#f0a53a;   --warn-soft:rgba(240,165,58,.14);
  --danger:#f16576; --danger-soft:rgba(241,101,118,.15);
  --critical:#f16576;--critical-soft:rgba(241,101,118,.15);
  --high:#f2854e;   --high-soft:rgba(242,133,78,.15);
  --medium:#f0a53a; --medium-soft:rgba(240,165,58,.14);
  --low:#5b9bff;    --low-soft:rgba(91,155,255,.15);
  --info:#93a2b0;   --info-soft:rgba(147,162,176,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
  --shadow-md:0 6px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);

  --sidebar-bg:#090c0f; --scrim:rgba(0,0,0,.62); --surface-inset:#0d1116; --ring-track:#1f262d;
  --accent-ring:rgba(43,186,162,.55);
  --score-pass:#34c065; --score-low:#e6cf3f; --score-medium:#f0a53a;
  --score-high:#f2854e; --score-critical:#f16576;
  --e-1:0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.03);
  --e-2:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  --e-3:0 6px 16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  --e-4:0 12px 32px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);
  --e-inset:inset 0 1px 2px rgba(0,0,0,.4);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 340px, var(--bg) 100%);
  color: var(--text);
  font: var(--t-body);
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "cv01" 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-theme="dark"] {
  background:
    linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 360px, var(--bg) 100%);
}

body[data-auth="loading"] .app-layout,
body[data-auth="locked"] .app-layout {
  display: none;
}

body[data-auth="ready"] .auth-screen {
  display: none;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 0, var(--bg) 55%);
}

.auth-shell {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--e-4);
}

/* Hero side — dark & branded in both themes */
.auth-hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 38px;
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--brand-400) 24%, var(--sidebar-bg)) 0, var(--sidebar-bg) 62%);
  color: #dfe6ec;
}

.auth-hero-top { display: flex; align-items: center; justify-content: space-between; }
.auth-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: #fff; }
.auth-logo-mark { color: var(--brand-300); }

.auth-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); }
.auth-lang-btn {
  min-height: auto;
  padding: 4px 13px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: #b9c4cd;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}
.auth-lang-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.auth-lang-btn.active { background: var(--brand-400); color: #04211d; }

.auth-hero-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.auth-hero-eyebrow { margin: 0; color: var(--brand-300); font: var(--t-caption); letter-spacing: .08em; text-transform: uppercase; }
.auth-hero-mid h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.14; color: #fff; letter-spacing: -0.01em; }
.auth-hero-copy { margin: 0; color: #aeb9c3; line-height: 1.6; }

.auth-features { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 11px; }
.auth-features li { display: flex; gap: 10px; align-items: flex-start; color: #cdd6de; font-size: 13.5px; line-height: 1.45; }
.auth-features b {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-400) 30%, transparent);
  color: var(--brand-300);
  font-size: 11px;
}

.auth-hero-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #7c8896; font-size: 11.5px; }
.auth-hero-foot span { display: inline-flex; align-items: center; gap: 6px; }
.auth-hero-foot span::before { content: "•"; color: var(--brand-400); }

/* Form side */
.auth-form-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 38px;
  background: var(--panel);
}
.auth-form-head { display: grid; gap: 6px; }
.auth-form-head .eyebrow { color: var(--accent); font: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; }
.auth-form-head h2 { margin: 0; font: var(--t-h2); }
.auth-form-head p { margin: 0; color: var(--muted); }

.login-form { display: grid; gap: 12px; }
.login-form button[type="submit"] { margin-top: 4px; min-height: 44px; }

.auth-error {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font: var(--t-small); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.demo-accounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.demo-accounts button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  border-radius: var(--r-md);
}
.demo-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.demo-copy { display: grid; min-width: 0; }
.demo-copy strong { font-size: 13px; }
.demo-copy small { color: var(--muted); font-size: 11px; }

@media (max-width: 720px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { padding: 28px; }
  .auth-hero-mid { gap: 12px; }
  .auth-form-side { padding: 28px; order: -1; }
  .demo-accounts { grid-template-columns: 1fr; }
  .demo-accounts button { min-height: 48px; }
}

.app-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--sidebar-bg);
  color: #c4ccd4;
  overflow-y: auto;
}

/* Account menu pinned to the bottom of the sidebar (ChatGPT/Claude style). */
.side-account {
  margin-top: auto;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  margin-left: -14px;
  margin-right: -14px;
  width: calc(100% + 28px);
  padding-left: 24px;
  padding-right: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2, .15s) ease;
}
.side-account:hover { background: rgba(255, 255, 255, 0.05); }
.side-account .account-avatar { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
.side-account-text { min-width: 0; display: grid; gap: 1px; }
.side-account-text strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account-text small { color: #9aa4ae; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account-caret { color: #9aa4ae; font-size: 12px; }

/* MCP connector card */
.mcp-body {
  display: grid;
  gap: 18px;
}

.mcp-protocol-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 12px;
}

.mcp-protocol-strip strong {
  color: var(--accent-dark);
  font-size: 12px;
}

.mcp-protocol-live {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
}

.mcp-client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
}

.mcp-client {
  min-width: 0;
  padding: 20px;
}

.mcp-client + .mcp-client {
  border-left: 1px solid var(--line-strong);
}

.mcp-client-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.mcp-client-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font: 600 11px/1 var(--font-mono);
}

.mcp-client[data-mcp-client="claude"] .mcp-client-mark {
  border-color: color-mix(in srgb, var(--high) 28%, var(--line));
  background: var(--high-soft);
  color: var(--high);
}

.mcp-client-head div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.mcp-client-head small {
  color: var(--muted);
  font-size: 10px;
  line-height: 14px;
}

.mcp-client-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcp-oauth-badge {
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  color: var(--muted-strong);
  font: 500 10px/1 var(--font-mono);
  white-space: nowrap;
}

.mcp-client > p {
  min-height: 44px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.mcp-client-steps {
  display: grid;
  gap: 8px;
  min-height: 76px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.mcp-client-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  color: var(--muted-strong);
  font-size: 11.5px;
  line-height: 1.5;
}

.mcp-client-steps li span {
  color: var(--accent);
  font: 500 9px/17px var(--font-mono);
}

.mcp-client[data-mcp-client="claude"] .mcp-client-steps li span {
  color: var(--high);
}

.mcp-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.mcp-command-head .ghost-button {
  min-height: 30px;
  padding: 5px 8px;
  text-transform: none;
}

.mcp-client-command {
  min-height: 78px;
  margin: 0;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #27313a;
  border-radius: var(--r-sm);
  background: #0e1418;
  color: #b8c4ce;
  font: 400 11px/1.65 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mcp-client[data-mcp-client="codex"] .mcp-client-command code::selection {
  background: rgba(43, 186, 162, .35);
}

.mcp-client[data-mcp-client="claude"] .mcp-client-command code::selection {
  background: rgba(242, 133, 78, .35);
}

.mcp-field { margin-bottom: 12px; }
.mcp-field label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0; margin-bottom: 6px; }
.mcp-copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-copy-row code {
  flex: 1 1 240px;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.mcp-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mcp-setup { margin-top: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.mcp-setup summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.mcp-setup > p { max-width: 860px; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.mcp-setup h3 { margin: 18px 0 4px; font-size: 13px; }
.mcp-setup pre {
  margin-top: 10px;
  overflow-x: auto;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
}

.mcp-advanced[open] summary {
  margin-bottom: 14px;
}

.brand-block {
  display: grid;
  gap: 3px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
}

.brand-block span {
  color: var(--brand-300);
  font: var(--t-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brand-block strong {
  font-size: 18px;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.auth-plan-note {
  display: block;
  margin: -2px 0 2px;
  border: 1px solid rgba(13, 127, 92, .18);
  border-radius: 9px;
  padding: 9px 11px;
  background: rgba(13, 127, 92, .06);
  color: #426158;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

.auth-plan-note[hidden],
[data-signup-billing-field][hidden],
[data-google-billing-field][hidden] {
  display: none;
}

/* Mobile navigation controls are introduced without duplicating the desktop
   navigation. They stay completely out of the desktop layout. */
.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-nav-panel-head {
  display: none;
}

.mobile-nav-backdrop[hidden] {
  display: none !important;
}

.side-nav nav {
  display: grid;
  gap: 4px;
}

.nav-group-label {
  margin: 12px 12px 2px;
  color: #66727f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-group-label:first-child { margin-top: 0; }

.nav-item {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 9px 12px 9px 14px;
  text-align: left;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: #c4ccd4;
  box-shadow: none;
}

.nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: #ffffff;
}

.nav-item span {
  font-size: 14px;
  font-weight: 700;
}

.nav-item small {
  color: #7c8896;
  font-size: 11.5px;
  line-height: 1.3;
}

.nav-item.active {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: #ffffff;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--r-full);
  background: var(--brand-300);
}

.nav-item.active small {
  color: #b9c4cd;
}

.nav-item.has-upgrade-badge {
  padding-right: 78px;
}

.nav-upgrade-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid rgba(126, 231, 195, .28);
  border-radius: var(--r-full);
  padding: 2px 7px;
  background: rgba(52, 211, 153, .1);
  color: #8ff0ce;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-upgrade-badge[hidden] {
  display: none;
}

.app-view[hidden] {
  display: none;
}

.feature-upgrade-gate {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 20px clamp(16px, 3vw, 38px) 0;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--accent-soft)), var(--panel));
  box-shadow: var(--shadow-md);
}

.feature-upgrade-gate[hidden] {
  display: none;
}

.feature-gate-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 15px;
}

.feature-upgrade-gate > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.feature-gate-eyebrow {
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.feature-upgrade-gate h2 {
  margin: 0;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.2;
}

.feature-upgrade-gate p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.feature-upgrade-gate button {
  min-height: 42px;
  white-space: nowrap;
}

.feature-upgrade-gate.compact {
  margin: 0 0 14px;
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}

.is-plan-locked > :not(.feature-upgrade-gate) {
  opacity: .58;
  filter: saturate(.62);
  pointer-events: none;
  user-select: none;
}

button,
input,
select {
  font: inherit;
}

.shell {
  width: min(1480px, 100%);
  margin: 0;
  padding: 26px;
}

.suitebar {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 14px 12px 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: var(--e-1);
}

.suite-copy {
  min-width: 0;
}

.suite-copy h2 {
  margin: 1px 0 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.suite-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* Unified plan + upgrade control (replaces the split plan-badge / Upgrade button) */
.plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  padding: 4px 5px 4px 13px;
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--panel));
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.plan-pill:hover { box-shadow: 0 6px 18px var(--accent-ring); transform: translateY(-1px); border-color: var(--accent); }
.plan-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  flex: none;
}
.plan-pill-name {
  font-size: 12.5px; font-weight: 800; letter-spacing: .005em;
  white-space: nowrap; text-transform: none;
}
.plan-pill-cta {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  padding: 6px 14px;
  /* Theme-aware: light theme = dark teal bg + white text; dark theme = light
     teal bg + dark text, matching every other accent control. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), var(--accent));
  color: var(--on-accent);
  font-size: 12.5px; font-weight: 800;
  box-shadow: var(--e-1);
}

/* Segmented utility cluster (language / theme / logout) — one cohesive object */
.suite-utils {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-inset);
  box-shadow: var(--e-inset);
  overflow: hidden;
}
.suite-utils > * + * { border-left: 1px solid var(--line); }
.suite-utils .util-lang { display: flex; align-items: stretch; position: relative; }
.suite-utils .util-lang::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px;
  transform: translateY(-60%) rotate(45deg);
  border: 0 solid var(--muted); border-right-width: 1.5px; border-bottom-width: 1.5px;
  pointer-events: none;
}
.suite-utils select,
.suite-utils .util-btn {
  min-height: 38px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px; font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
  transition: background .14s ease, color .14s ease;
}
.suite-utils select { padding-right: 28px; }
.suite-utils .util-btn:hover,
.suite-utils select:hover {
  background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
  color: var(--accent-dark);
}

.account-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 520px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--panel-soft) 86%, #fff);
  box-shadow: var(--shadow-sm);
}

.account-identity {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2, .15s) ease;
}

.account-identity:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.account-identity-text { min-width: 0; }

.account-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.account-card strong,
.account-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Account view */
.account-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 6px 2px 20px;
}

.account-hero-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}

.account-hero-info { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.account-hero-info strong { font-size: 22px; letter-spacing: -0.01em; }
.account-email { color: var(--muted); font-size: 14px; }

.account-chips { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.account-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full, 999px);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted-strong, var(--text));
}
.account-chip.plan {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-dark);
}

.account-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.account-details div { display: grid; gap: 3px; }
.account-details dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.account-details dd { font-size: 15px; font-weight: 600; }

.account-billing { margin-top: 16px; }
.account-billing-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.account-billing-head h2 { font-size: 17px; }
.account-billing-head p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.account-billing .plan-grid { grid-column: auto; }

.legacy-free-offer-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 24px 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}
.legacy-free-offer-compact[hidden] { display: none; }
.legacy-free-offer-compact-copy { display: grid; min-width: 0; gap: 3px; }
.legacy-free-offer-compact-copy strong { font-size: 15px; line-height: 1.25; }
.legacy-free-offer-compact-copy > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.4; }
.legacy-free-offer-compact-kicker {
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legacy-free-offer-compact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
.legacy-free-offer-compact-actions span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.legacy-free-offer-compact-actions button { white-space: nowrap; }
@media (max-width: 760px) {
  .legacy-free-offer-compact { align-items: stretch; flex-direction: column; margin-inline: 14px; }
  .legacy-free-offer-compact-actions { justify-content: space-between; }
}

.legacy-free-offer {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
  gap: 20px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface));
  box-shadow: 0 18px 45px rgba(7, 18, 37, .12);
}
.legacy-free-offer[hidden] { display: none; }
.legacy-free-offer img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.legacy-free-offer-copy { align-self: center; padding: 24px 24px 24px 0; }
.legacy-free-offer-copy h3 { margin: 7px 0 9px; font-size: clamp(20px, 2.1vw, 30px); }
.legacy-free-offer-copy p { color: var(--muted); line-height: 1.6; }
.legacy-free-offer-renewal { margin-top: 8px; font-size: 12px; }
.legacy-free-offer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.legacy-free-offer-actions span { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .legacy-free-offer { grid-template-columns: 1fr; }
  .legacy-free-offer img { max-height: 210px; }
  .legacy-free-offer-copy { padding: 0 18px 20px; }
}

.billing-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 14px;
}

.billing-current-card,
.billing-rights-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.billing-current-card {
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
    var(--panel);
}

.billing-current-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.billing-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.billing-current-head h3,
.billing-rights-card h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.015em;
}

.billing-current-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.billing-status,
.billing-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.billing-status::before,
.billing-payment-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.billing-status[data-status="free"],
.billing-status[data-status="active"],
.billing-status[data-status="trialing"],
.billing-payment-status[data-status="completed"],
.billing-payment-status[data-status="paid"] {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
  background: var(--ok-soft);
  color: var(--ok);
}

.billing-status[data-status="past_due"],
.billing-payment-status[data-status="pending"],
.billing-payment-status[data-status="refund_pending"] {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  background: var(--warn-soft);
  color: var(--warn);
}

.billing-status[data-status="canceled"],
.billing-payment-status[data-status="failed"],
.billing-payment-status[data-status="payment_failed"],
.billing-payment-status[data-status="refund_rejected"] {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: var(--danger-soft);
  color: var(--danger);
}

.billing-payment-status[data-status="refunded"],
.billing-payment-status[data-status="partially_refunded"] {
  border-color: color-mix(in srgb, var(--info) 28%, var(--line));
  background: var(--info-soft);
  color: var(--info);
}

.billing-price {
  margin-top: 18px;
  color: var(--text);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.025em;
}

.billing-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.billing-facts div {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.billing-facts dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.billing-facts dd {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.billing-note,
.billing-readonly {
  margin: 14px 0 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--info) 8%, var(--panel));
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

#billingPendingPlanChange[data-state="support_required"] {
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  color: var(--text);
}

.billing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.billing-actions > button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.billing-actions > button:first-child {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.billing-actions .billing-danger {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  color: var(--danger);
}

.billing-rights-card ul {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.billing-rights-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  color: var(--muted);
  font-size: 12px;
}

.billing-rights-card li:first-child { border-top: 0; }
.billing-rights-card li strong { color: var(--text); text-align: right; }

.billing-history {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.billing-history .section-head h3 { margin: 0; font-size: 15px; }
.billing-transactions { display: grid; gap: 7px; }

.billing-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.billing-transaction > div { display: grid; gap: 2px; }
.billing-transaction strong { font-size: 14px; }
.billing-transaction span:not(.billing-payment-status) { color: var(--muted); font-size: 11px; }

.account-brand,
.account-connections,
.account-deletion { margin-top: 16px; }
.account-deletion-policy { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-decoration: none; }
.account-deletion-panel { display: grid; gap: 14px; max-width: 820px; }
.account-deletion-panel > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-deletion-panel .account-deletion-warning { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--danger) 7%, var(--panel)); color: var(--text); }
.account-deletion-confirm { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--text); font-size: 13px; line-height: 1.5; cursor: pointer; }
.account-deletion-confirm input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--danger); }
.account-deletion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-deletion-actions button { min-height: 40px; padding: 9px 13px; border-radius: 8px; font-weight: 800; }
.account-deletion-actions .billing-danger { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
.account-deletion-actions .billing-danger:disabled { cursor: not-allowed; opacity: 0.55; }
.account-deletion-status { min-height: 20px; font-weight: 750; }
.account-deletion-status.tone-ok { color: var(--success); }
.account-deletion-status.tone-danger { color: var(--danger); }
.brand-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  max-width: 720px;
}
.brand-form .field { margin: 0; }
.brand-form button { min-height: 42px; white-space: nowrap; }

button[data-plan-locked="true"] {
  border-style: dashed;
}

button[data-plan-locked="true"]:not(:disabled) {
  cursor: pointer;
}

button[data-plan-locked="true"]:disabled {
  cursor: not-allowed;
}
.connections-body { display: grid; gap: 10px; }
.free-feature-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
  background: var(--panel-soft);
}
.free-feature-preview > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 900;
}
.free-feature-preview > div { display: grid; gap: 2px; min-width: 0; }
.free-feature-preview strong { font-size: 13px; }
.free-feature-preview small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.free-feature-preview b,
.home-upgrade-lock {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-full);
  padding: 4px 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
}
.connection-meta { display: grid; gap: 2px; }
.connection-meta strong { font-size: 14px; }
.connection-meta small { font-size: 12px; color: var(--muted); }
.connection-meta small.is-connected { color: var(--ok); font-weight: 700; }
.connection-note {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--warn) 6%, var(--panel));
}

/* Search Console data panel */
.gsc-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
}
.gsc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gsc-head strong { font-size: 14px; }
.gsc-head select { min-width: 180px; max-width: 100%; }
.gsc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gsc-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; }
.gsc-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.gsc-kpi strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.gsc-table-wrap { overflow-x: auto; }
.gsc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gsc-table th, .gsc-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gsc-table th:first-child, .gsc-table td:first-child { text-align: left; white-space: normal; }
.gsc-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.gsc-table tbody tr:last-child td { border-bottom: 0; }

/* Search Console module */
.gsc-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.gsc-controls .field { min-width: 160px; }
.gsc-overview-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 720px) { .gsc-overview-grid { grid-template-columns: 1fr; } }
.gsc-mini-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); display: block; margin-bottom: 8px; }
.gsc-dist, .gsc-trend { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.gsc-dist-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-soft); }
.gsc-dist-seg { height: 100%; }
.gsc-dist-seg.top3, .gsc-dist-legend i.top3 { background: var(--ok); }
.gsc-dist-seg.p1, .gsc-dist-legend i.p1 { background: color-mix(in srgb, var(--ok) 55%, var(--warn)); }
.gsc-dist-seg.p2, .gsc-dist-legend i.p2 { background: var(--warn); }
.gsc-dist-seg.deep, .gsc-dist-legend i.deep { background: color-mix(in srgb, var(--danger) 70%, var(--line)); }
.gsc-dist-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.gsc-dist-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gsc-dist-legend i { width: 10px; height: 10px; border-radius: 3px; }
.gsc-trend { color: var(--accent); display: flex; flex-direction: column; }
.gsc-spark { margin-top: auto; }
.gsc-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .gsc-breakdown { grid-template-columns: 1fr; } }
.gsc-mini h4 { font-size: 13px; margin-bottom: 8px; }
.gsc-controls .gsc-property-field { flex: 1 1 360px; }
.gsc-controls .gsc-property-field select { width: 100%; min-width: min(360px, 100%); }
.gsc-controls optgroup { font-weight: 800; color: var(--text); }
.gsc-controls option { font-weight: 500; color: var(--text); }
.gsc-property-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 95%, var(--accent-soft));
}
.gsc-property-context[hidden],
.gsc-platform-fallback[hidden],
#gscResults [hidden] { display: none !important; }
.gsc-property-context.is-social { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.gsc-property-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gsc-property-identity > div { display: grid; gap: 3px; min-width: 0; }
.gsc-property-identity strong { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.gsc-property-identity strong a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
.gsc-property-identity small { color: var(--muted); font-size: 11px; }
.gsc-property-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}
.gsc-property-context.platform-instagram .gsc-property-badge {
  border-color: color-mix(in srgb, #c13584 42%, var(--line));
  background: color-mix(in srgb, #c13584 12%, var(--panel));
  color: color-mix(in srgb, #c13584 78%, var(--text));
}
.gsc-property-context.platform-x .gsc-property-badge {
  border-color: color-mix(in srgb, var(--text) 36%, var(--line));
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
  color: var(--text);
}
.gsc-reporting-note { display: grid; justify-items: end; gap: 3px; max-width: 540px; text-align: right; }
.gsc-reporting-note span,
.gsc-beta-badge {
  display: inline-flex;
  width: max-content;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.gsc-reporting-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.gsc-overview-grid.is-social { grid-template-columns: 1fr; }
.gsc-overview-grid.is-social .gsc-trend { min-height: 92px; }
.gsc-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gsc-signal-grid > .empty-state { grid-column: 1 / -1; }
.gsc-signal-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  min-height: 134px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 36%, var(--panel)) 0%, var(--panel) 64%);
  box-shadow: var(--shadow-sm);
}
.gsc-signal-card.is-unavailable { border-style: dashed; background: color-mix(in srgb, var(--panel-soft) 82%, var(--panel)); }
.gsc-signal-card.is-unavailable .gsc-signal-icon { background: var(--muted); }
.gsc-signal-card.is-unavailable .gsc-signal-copy small { max-width: 170px; line-height: 1.35; }
.gsc-signal-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}
.gsc-signal-copy { display: grid; align-content: start; gap: 1px; }
.gsc-signal-copy span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.gsc-signal-copy strong { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.gsc-signal-copy small { color: var(--muted); font-size: 10px; }
.gsc-signal-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 0; }
.gsc-signal-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.gsc-signal-card dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.gsc-signal-card dd { margin: 0; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gsc-content-link { color: var(--accent-dark); font-weight: 700; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.gsc-platform-fallback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 42%, var(--panel)), var(--panel));
  box-shadow: var(--shadow-md);
}
.gsc-platform-fallback-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 24%, transparent);
}
.gsc-platform-fallback h2 { margin: 9px 0 7px; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: -.02em; }
.gsc-platform-fallback p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.gsc-external-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.gsc-external-action:hover { filter: brightness(1.04); transform: translateY(-1px); }
@media (max-width: 720px) {
  .gsc-controls { align-items: stretch; }
  .gsc-controls .field, .gsc-controls .gsc-property-field { flex: 1 1 100%; min-width: 0; }
  .gsc-controls .gsc-property-field select { min-width: 0; }
  .gsc-property-context { align-items: flex-start; flex-direction: column; }
  .gsc-reporting-note { justify-items: start; max-width: none; text-align: left; }
  .gsc-platform-fallback { grid-template-columns: 1fr; }
  .gsc-signal-grid { grid-template-columns: 1fr; }
}

/* AI fix-prompt button + modal */
.topbar .ai-prompt-btn {
  align-self: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-full, 999px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-2, .15s) ease, transform var(--dur-1, .1s) ease;
}
.topbar .ai-prompt-btn:hover { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
.topbar .ai-prompt-btn:active { transform: translateY(1px); }
body[data-theme="dark"] .topbar .ai-prompt-btn { color: var(--brand-200, var(--accent)); }

.ai-prompt-backdrop { display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.ai-prompt-modal {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--e-4, 0 20px 60px rgba(0,0,0,.3));
  position: relative;
}
.ai-prompt-modal h2 { font-size: 16px; margin: 4px 0 14px; font-weight: 600; color: var(--muted); }
.ai-prompt-text {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel-soft);
  resize: vertical;
  min-height: 260px;
}
.ai-prompt-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.ai-prompt-actions .primary { min-height: 40px; padding: 10px 18px; }
.ai-prompt-hint { margin-top: 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .ai-prompt-modal { padding: 18px; } .ai-prompt-actions { gap: 8px; } }

.ghost-button {
  min-height: 36px;
  padding: 8px 10px;
  background: transparent;
  box-shadow: none;
}

.mini-field {
  min-width: 136px;
}

.theme-toggle {
  min-width: 118px;
  margin-top: 20px;
}

.plan-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plan-card {
  display: grid;
  gap: 5px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: 8px;
  padding: 13px;
  background: color-mix(in srgb, var(--panel-soft) 85%, #fff);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.plan-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.plan-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan-price i,
.upgrade-price i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
}

.upgrade-price {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}

.brand-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.brand-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.brand-form input {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.brand-form button {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
}

.sample-badge {
  font-style: normal;
  font-weight: 800;
  color: color-mix(in srgb, var(--score-medium, #c98a00) 80%, var(--text));
}

.project-upgrade-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel));
  color: var(--accent-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

/* Integrations & Tracking module */
.int-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.int-kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
  display: grid;
  gap: 3px;
}
.int-kpi span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.int-kpi strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.int-kpi small { font-size: 12px; color: var(--muted); }
.int-kpi.tone-ok strong { color: var(--ok); }
.int-kpi.tone-warn strong { color: var(--warn); }
.int-kpi.tone-danger strong { color: var(--danger); }

.integrations-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.int-cat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
}
.int-cat h3 { font-size: 14px; margin-bottom: 10px; }
.int-cat ul { list-style: none; display: grid; gap: 8px; }
.int-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.int-item small { grid-column: 2 / -1; color: var(--muted); font-size: 11px; }
.int-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.int-item.is-present .int-name { font-weight: 600; }
.int-item.is-absent { opacity: 0.55; }
.int-item.is-absent .int-state { color: var(--muted); }
.int-item .int-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.int-item.tone-ok .int-dot { background: var(--ok); }
.int-item.tone-warn .int-dot { background: var(--warn); }
.int-item.tone-danger .int-dot { background: var(--danger); }
.int-item.tone-ok.is-present .int-state { color: var(--ok); }

.adversarial-finding { border-left: 3px solid color-mix(in srgb, var(--danger) 55%, var(--line)); }

/* Security Hardening Grade */
.hardening-badge {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  align-self: center;
}
.hardening-badge strong { font-size: 30px; line-height: 1; font-weight: 900; }
.hardening-badge span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hardening-badge small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.hardening-badge.tone-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.hardening-badge.tone-ok strong { color: var(--ok); }
.hardening-badge.tone-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.hardening-badge.tone-warn strong { color: var(--warn); }
.hardening-badge.tone-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.hardening-badge.tone-danger strong { color: var(--danger); }

.hardening-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
}
.hardening-controls { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.hardening-controls li {
  display: grid;
  grid-template-columns: 10px minmax(140px, 1fr) 2fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.hardening-controls li:last-child { border-bottom: 0; padding-bottom: 0; }
.hardening-controls .hc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.hardening-controls li.is-on .hc-dot { background: var(--ok); }
.hardening-controls .hc-label { font-weight: 600; }
.hardening-controls .hc-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hardening-controls .hc-points { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.hardening-controls li.is-off .hc-label { color: var(--muted); }
@media (max-width: 640px) {
  .hardening-controls li { grid-template-columns: 10px 1fr auto; }
  .hardening-controls .hc-detail { display: none; }
}

.owasp-map { margin-top: 16px; }
.owasp-map h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.owasp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.owasp-cell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
  opacity: 0.6;
}
.owasp-cell.has-finding {
  opacity: 1;
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--panel));
}
.owasp-code { font-weight: 800; font-variant-numeric: tabular-nums; }
.owasp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.owasp-cell.has-finding .owasp-label { color: var(--text); }
.owasp-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.owasp-cell.has-finding .owasp-count { color: var(--danger); }

.plan-card strong {
  font-size: 18px;
  line-height: 1.15;
}

.plan-card small {
  color: var(--muted);
  line-height: 1.35;
}

.plan-card em {
  align-self: end;
  color: var(--accent-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.plan-card.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  border-top-color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 38%, var(--panel)) 0, var(--panel) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-sm);
}

.plan-note {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--panel-soft));
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 750;
}

.dashboard-workspace {
  overflow: hidden;
}

.project-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.5fr) auto;
  gap: 12px;
  align-items: end;
}

.project-form button {
  min-height: 44px;
}

.project-setup-help { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.5; }
.project-setup-help p { margin: 2px 0; overflow-wrap: anywhere; }
#projectTargetPreview { color: var(--text); }
.project-target-field input[hidden] { display: none; }

.dashboard-results {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

/* --- Workspace trust boundary --- */
.verified-domains-shell {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-xl);
  padding: 22px;
  background:
    radial-gradient(110% 180% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0, transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, var(--accent-soft)) 0%, var(--panel) 72%);
  box-shadow: var(--e-2);
}

.verified-domains-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--ok) 82%, var(--accent)), transparent 82%);
}

.verified-domains-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.verified-domains-head > div {
  display: grid;
  gap: 5px;
}

.verified-domains-kicker {
  color: var(--accent-dark);
  font: var(--t-caption);
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.verified-domains-head h2 {
  margin: 0;
  font: var(--t-h2);
  letter-spacing: -.015em;
}

.verified-domains-head p {
  max-width: 700px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

.verified-domains-unlimited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--ok) 38%, var(--line));
  border-radius: var(--r-full);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ok-soft) 54%, var(--panel));
  color: var(--ok);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
}

.verified-domains-unlimited::before {
  content: "∞";
  font-size: 16px;
  line-height: 1;
}

.verified-domains-controls {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(330px, .9fr);
  gap: 12px;
}

.verified-domain-form,
.verified-domain-gsc {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  background: color-mix(in srgb, var(--panel-soft) 74%, transparent);
}

.verified-domain-form {
  display: grid;
  gap: 13px;
}

.verified-domain-native-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.verified-domain-native-fields button {
  min-height: 44px;
}

.verified-domain-gsc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.verified-domain-gsc-copy,
.verified-domain-provider-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.verified-domain-gsc-copy > span:last-child,
.verified-domain-provider-copy > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.verified-domain-gsc-copy strong,
.verified-domain-provider-copy strong {
  font-size: 13px;
}

.verified-domain-gsc-copy small,
.verified-domain-provider-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.verified-domain-gsc-mark,
.verified-domain-sitelemetry-mark {
  flex: 0 0 auto;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: #4285f4;
  font-size: 18px;
  font-weight: 900;
  box-shadow: var(--e-1);
}

.verified-domain-sitelemetry-mark {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--panel));
  color: var(--accent);
}

.verified-domain-gsc-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
}

.verified-domain-gsc-actions button {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.verified-domain-feedback {
  display: none;
  min-height: 0;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 750;
}

.verified-domain-feedback:not(:empty) {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.verified-domain-feedback.tone-ok {
  border-color: color-mix(in srgb, var(--ok) 42%, var(--line));
  background: color-mix(in srgb, var(--ok-soft) 60%, var(--panel));
  color: var(--ok);
}

.verified-domain-feedback.tone-danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 60%, var(--panel));
  color: var(--danger);
}

.verified-domain-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.verified-domain-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 96px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--r-lg);
  padding: 18px;
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

.verified-domain-empty-icon {
  flex: 0 0 auto;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  box-shadow: var(--e-2);
}

.verified-domain-empty strong {
  font-size: 14px;
}

.verified-domain-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.verified-domain-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px;
  background: var(--panel);
  box-shadow: var(--e-1);
}

.verified-domain-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--warn);
}

.verified-domain-card.is-verified::before {
  background: var(--ok);
}

.verified-domain-card.is-lost::before {
  background: var(--danger);
}

.verified-domain-card.is-verified {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--ok-soft) 20%, transparent), transparent 46%),
    var(--panel);
}

.verified-domain-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.verified-domain-state-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn-soft) 66%, var(--panel));
  color: var(--warn);
  font-size: 13px;
  font-weight: 900;
}

.verified-domain-card.is-verified .verified-domain-state-mark {
  background: color-mix(in srgb, var(--ok-soft) 72%, var(--panel));
  color: var(--ok);
}

.verified-domain-card.is-lost .verified-domain-state-mark {
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--panel));
  color: var(--danger);
}

.verified-domain-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.verified-domain-source {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: .04em;
  text-transform: none;
}

.verified-domain-identity h3 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verified-domain-status {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: var(--r-full);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--warn-soft) 52%, var(--panel));
  color: var(--warn);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.verified-domain-card.is-verified .verified-domain-status {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok-soft) 58%, var(--panel));
  color: var(--ok);
}

.verified-domain-card.is-lost .verified-domain-status {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 58%, var(--panel));
  color: var(--danger);
}

.verified-domain-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, .8fr) minmax(120px, .8fr);
  gap: 8px;
}

.verified-domain-meta > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px;
  background: var(--panel-soft);
}

.verified-domain-meta span {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.verified-domain-meta strong {
  font-size: 11px;
  line-height: 1.35;
}

.verified-domain-meta code {
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verified-domain-challenge {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: var(--r-md);
  padding: 11px;
  background: color-mix(in srgb, var(--warn-soft) 42%, var(--panel));
}

.verified-domain-challenge p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.verified-domain-challenge dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.verified-domain-challenge dl > div {
  display: grid;
  grid-template-columns: minmax(105px, .34fr) minmax(0, 1fr);
  gap: 10px;
}

.verified-domain-challenge dt {
  color: var(--muted);
  font: var(--t-caption);
}

.verified-domain-challenge dd {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 0;
}

.verified-domain-challenge code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 10px;
  user-select: all;
}

.verified-domain-lost-warning {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
  border-radius: var(--r-md);
  padding: 11px;
  background: color-mix(in srgb, var(--danger-soft) 52%, var(--panel));
}

.verified-domain-lost-warning strong {
  color: var(--danger);
  font-size: 12px;
}

.verified-domain-lost-warning p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.verified-domain-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
}

.verified-domain-actions button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

.verified-domain-actions .verified-domain-remove {
  margin-left: auto;
  color: var(--danger);
}

.verified-domain-actions .verified-domain-remove:hover {
  background: var(--danger-soft);
}

/* --- Workspace hero --- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.9fr);
  align-items: stretch;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px;
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 9%, var(--panel)) 0, var(--panel) 58%);
  box-shadow: var(--e-2);
}

.home-hero-main {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.home-hero .score-ring { width: 128px; }

.home-hero-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}

.home-hero-copy .eyebrow {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.home-hero-copy h2 {
  margin: 0;
  font: var(--t-h1);
  letter-spacing: -0.01em;
}

.home-hero-copy p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.5;
}

.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.home-contract {
  align-self: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--panel-soft);
}

.home-contract dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.home-contract div {
  display: grid;
  gap: 3px;
}

.home-contract dt,
.kpi-eyebrow,
.project-card span,
.audit-row time {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.home-contract dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

/* --- KPI tiles --- */
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.kpi-tile,
.project-card,
.audit-row {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--e-1);
}

.kpi-tile {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 116px;
  padding: 16px 16px 16px 18px;
  overflow: hidden;
}

.kpi-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.kpi-tile.tone-ok::before { background: var(--ok); }
.kpi-tile.tone-warn::before { background: var(--warn); }
.kpi-tile.tone-danger::before { background: var(--danger); }

.kpi-tile strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-tile small {
  color: var(--muted);
  line-height: 1.35;
}

.usage-meter {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--bg-soft);
}

.usage-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-4) var(--ease-standard);
}

/* --- Top issues table --- */
.top-issues { display: grid; gap: 8px; }

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--e-1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--t-small);
}

.data-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 11px 14px;
  font: var(--t-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg-soft); }
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.data-table td strong { display: block; }
.data-table td small { color: var(--muted); }

.link-button {
  min-height: auto;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}

.link-button:hover {
  background: var(--accent-soft);
  border-color: transparent;
}

.dashboard-section {
  display: grid;
  gap: 12px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.project-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  border-top: 4px solid var(--warn);
}

.project-card.tone-ok {
  border-top-color: var(--ok);
}

.project-card.tone-high,
.project-card.tone-critical {
  border-top-color: var(--danger);
}

.project-card.is-project-plan-locked {
  border-top-color: var(--accent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 44%, transparent), transparent 45%),
    var(--panel);
}

.project-card.is-project-plan-locked .project-matrix,
.project-card.is-project-plan-locked .project-riskline {
  opacity: .76;
}

.ownership-challenge,
.ownership-state {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn-soft) 55%, var(--panel));
}

.ownership-challenge p {
  margin: 4px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

.ownership-challenge dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.ownership-challenge dl > div {
  display: grid;
  gap: 4px;
}

.ownership-challenge dt {
  color: var(--muted);
  font: var(--t-caption);
}

.ownership-challenge dd {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 0;
}

.ownership-challenge code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 10px;
  user-select: all;
}

.ownership-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ownership-actions button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

.ownership-state.verified {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
  background: color-mix(in srgb, var(--ok-soft) 55%, var(--panel));
  color: var(--ok);
}

.project-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.project-head > div {
  min-width: 0;
}

.project-head h3 {
  margin: 2px 0 4px;
  font-size: 20px;
  line-height: 1.1;
}

.project-head small,
.project-riskline,
.audit-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 58px;
}

.project-score > strong {
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.project-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.project-matrix-paid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-report-profiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 14px 0; }
.project-report-profile { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; }
.project-report-profile small, .report-history-row small, .report-history-help { color: var(--muted); }
.project-score > small { font-size: 10px; max-width: 110px; }
.report-history-help { margin: 0 0 16px; line-height: 1.6; }
.report-history-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.report-history-row > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.report-history-result { align-items: flex-end; flex-shrink: 0; }
.report-profile-pillars { margin: 0; font-size: 11px; }
.report-profile-pillars > div { display: flex; justify-content: space-between; gap: 6px; }
.report-profile-pillars dd { margin: 0; }
.retained-report-history > button { margin-top: 14px; }
@media (max-width: 640px) {
  .project-report-profiles { grid-template-columns: 1fr; }
  .report-history-row { gap: 12px; }
}

.project-matrix .project-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-soft);
  text-transform: none;
}

.project-matrix small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.project-matrix strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.project-matrix .is-unmeasured strong {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--muted);
  overflow-wrap: normal;
}

.locked-preview-panel {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 52%, var(--panel)), var(--panel));
}

.locked-preview-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.locked-preview-panel > header > strong {
  font-size: 12px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.locked-preview-panel > header > small {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.locked-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.locked-preview-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 116px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, var(--accent-soft));
  color: var(--text);
  text-align: left;
}

button.locked-preview-card {
  cursor: pointer;
}

button.locked-preview-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 13%, transparent);
  transform: translateY(-1px);
}

.locked-preview-card > span {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 850;
}

.locked-preview-card > strong {
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.locked-preview-card > strong small {
  color: var(--muted);
  font-size: 11px;
}

.locked-preview-card > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.locked-preview-card > em {
  align-self: end;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.locked-preview-card.is-pending {
  border-style: dashed;
  opacity: .72;
}

.kpi-tile.is-quota-card > strong {
  color: var(--accent);
  font-size: clamp(18px, 2vw, 25px);
}

@media (max-width: 560px) {
  .locked-preview-grid { grid-template-columns: 1fr; }
  .locked-preview-panel > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .locked-preview-panel > header > small { text-align: left; }
}

.project-riskline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-riskline span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--panel-soft);
}

.project-monitoring {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel-soft) 82%, var(--accent-soft));
}

.project-monitoring > span,
.project-monitoring-control > span {
  min-width: 0;
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.project-monitoring-control {
  display: grid;
  gap: 7px;
}

.project-monitoring-attestation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-transform: none;
}

.project-monitoring-attestation input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.project-monitoring select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  font-size: 12px;
  font-weight: 750;
}

.project-monitoring select:disabled {
  cursor: not-allowed;
  opacity: .68;
}

.project-monitoring.is-upgrade-locked {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel-soft));
}

.project-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-actions button {
  min-height: 34px;
  padding: 7px 10px;
}

.project-actions .project-delete-action {
  margin-inline-start: auto;
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.project-actions .project-delete-action:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

.project-delete-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--e-4);
}

.project-delete-dialog::backdrop { background: var(--scrim); }
.project-delete-form { display: grid; gap: 16px; }
.project-delete-form h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.project-delete-form p { margin: 0; font-size: 14px; line-height: 1.6; }
.project-delete-target { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-soft); overflow-wrap: anywhere; }
.project-delete-target span, .project-delete-retained { color: var(--muted); }
.project-delete-error { color: var(--danger); }
.project-delete-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.project-delete-dialog-actions button { min-height: 44px; white-space: normal; }
.project-delete-dialog-actions .project-delete-confirm { color: #fff; background: #b71d2b; border-color: #b71d2b; }
.project-delete-dialog-actions .project-delete-confirm:hover:not(:disabled) { background: #971724; border-color: #971724; }

@media (max-width: 560px) {
  .project-delete-dialog { padding: 20px; }
  .project-delete-dialog-actions { flex-direction: column; }
  .project-delete-dialog-actions button { width: 100%; }
}

.audit-timeline {
  display: grid;
  gap: 10px;
}

.audit-queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.audit-job {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-lg);
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--e-1);
}

.audit-job.status-running { border-left-color: var(--accent); }
.audit-job.status-completed { border-left-color: var(--ok); }
.audit-job.status-failed { border-left-color: var(--danger); }
.audit-job.status-queued { border-left-color: var(--warn); }

.audit-job-head,
.audit-job-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.audit-job-head > div { min-width: 0; }
.audit-job-head strong { display: block; overflow-wrap: anywhere; }
.audit-job-head span,
.audit-job-meta span,
.job-error { color: var(--muted); font-size: 12px; line-height: 1.4; }

.job-status {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 8px;
  background: var(--panel-soft);
  color: var(--muted-strong) !important;
  font-weight: 750;
}

.job-progress {
  height: 7px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--bg-soft);
}

.job-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-4) var(--ease-standard);
}

.status-completed .job-progress i { background: var(--ok); }
.status-failed .job-progress i { background: var(--danger); }
.job-error { color: var(--danger); overflow-wrap: anywhere; }
.project-actions .primary-action { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.audit-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.audit-row strong {
  display: block;
}

.audit-row b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

.workspace,
.results {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.workspace {
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.08;
}

.status {
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted-strong);
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.scan-form {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(120px, 0.6fr);
  gap: 14px;
  align-items: end;
}

.seo-form {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(140px, 0.5fr) minmax(130px, 0.5fr);
  gap: 14px;
  align-items: end;
}

.ai-form {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(150px, 0.7fr) minmax(140px, 0.5fr) minmax(130px, 0.5fr);
  gap: 14px;
  align-items: end;
}

.seo-target-field,
.seo-toggles,
.seo-actions {
  grid-column: auto;
}

.ai-target-field {
  grid-column: auto;
}

.seo-toggles {
  grid-column: 1 / 3;
}

.seo-actions {
  grid-column: 3 / -1;
}

.ai-textarea-field {
  grid-column: span 2;
}

.ai-toggles {
  grid-column: 1 / 3;
}

.ai-actions {
  grid-column: 3 / -1;
}

.field {
  display: grid;
  gap: 7px;
}

.field span,
.modules legend {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 800;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 9px 12px;
  background: var(--surface-inset);
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

textarea {
  min-height: 124px;
  resize: vertical;
  line-height: 1.45;
}

/* Keyboard-only focus ring (mouse clicks stay clean). */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Remove the legacy always-on outline for pointer users. */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

.modules {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin: 3px 0 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.modules label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 9px;
  min-height: 78px;
  padding: 11px;
  border: 1px solid #e3ebe8;
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.modules label.locked {
  opacity: 0.68;
  border-style: dashed;
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}

.modules label[data-upgrade-module] {
  cursor: pointer;
}

.modules label[data-upgrade-module]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 3px;
}

.modules label.locked .module-copy::after {
  content: attr(data-lock-label);
  display: inline-flex;
  justify-self: start;
  margin-top: 5px;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.module-upgrade-example {
  margin-top: 5px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  padding-left: 8px;
  color: var(--muted-strong) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.module-upgrade-example[hidden] {
  display: none;
}

.modules input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
}

.module-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-copy strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.module-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.34;
}

.module-verification-required {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  color: var(--danger);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.module-verification-required::after {
  content: " ↗";
}

.module-verification-required:hover,
.module-verification-required:focus-visible {
  color: color-mix(in srgb, var(--danger) 82%, var(--text));
  text-decoration-thickness: 2px;
}

.toggles {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 650;
}

.toggles input {
  accent-color: var(--accent);
}

.actions {
  grid-column: 3 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 9px 15px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: var(--t-label);
  box-shadow: var(--e-1);
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}

button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  background: var(--bg-soft);
}

button[type="submit"] {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--e-2);
}

button[type="submit"]:not(:disabled):hover {
  background: var(--accent-dark);
  border-color: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.progress-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  background: var(--panel-soft);
}

.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 800;
}

.progress-track {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--bg-soft);
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-400), var(--accent));
  transition: width 220ms ease;
}

.progress-log {
  display: grid;
  gap: 6px;
  max-height: 180px;
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  color: var(--muted-strong);
  font-size: 13px;
}

.progress-log li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.progress-log time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.results {
  margin-top: 18px;
  padding: 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
}

.detail-toggle-panel {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.detail-toggle {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
}

.detail-toggle:hover {
  background: var(--accent-soft);
}

.detail-report {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.detail-report[hidden] {
  display: none;
}

.summary-card {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-shadow: var(--shadow-sm);
}

.summary-card:hover {
  border-color: rgba(15, 118, 110, 0.34);
  background: var(--panel-soft);
}

.summary-card.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}

.summary-card.empty:not(.active) {
  opacity: 0.62;
}

.summary-card.ok-count.active {
  border-color: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok), var(--shadow-sm);
}

.summary-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 31px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.summary-card.ok-count {
  border-color: rgba(19, 121, 91, 0.26);
  background: var(--ok-soft);
}

.summary-card.ok-count span,
.summary-card.ok-count strong {
  color: var(--ok);
}

.summary-card[data-filter="critical"] strong { color: var(--critical); }
.summary-card[data-filter="high"] strong { color: var(--high); }
.summary-card[data-filter="medium"] strong { color: var(--medium); }
.summary-card[data-filter="low"] strong { color: var(--low); }
.summary-card[data-filter="info"] strong { color: var(--info); }

.module-results {
  margin-top: 18px;
}

.module-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.module-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--tone, var(--line-strong));
  border-radius: 8px;
  padding: 13px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.module-card.wide {
  grid-column: 1 / -1;
}

.module-card.state-ok { --tone: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.module-card.state-warn { --tone: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.module-card.state-danger { --tone: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--panel)); }
.module-card.state-muted { --tone: var(--info); background: var(--panel-soft); }

.module-card-head,
.result-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.module-card-head span,
.result-group-head span,
.pentest-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.module-card-head h3,
.result-group-head h3,
.pentest-control h4 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
}

.module-card-head strong,
.result-group-head strong,
.pentest-control > strong {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 30%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, var(--panel));
  color: var(--tone, var(--accent));
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.module-card > p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.38;
}

.module-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.module-metrics span,
.pentest-standards span {
  min-width: 0;
  border: 1px solid #e4ece9;
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.module-metrics strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric-risk strong { color: var(--danger); }
.metric-ok strong { color: var(--ok); }
.metric-info strong { color: var(--info); }
.metric-skip strong { color: var(--info); }

.module-preview {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.module-preview h4 {
  margin: 0 0 5px;
  color: var(--muted-strong);
  font-size: 13px;
}

.module-preview ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.35;
}

.pentest-detail {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.pentest-standards,
.pentest-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pentest-standards strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
}

.pentest-phases div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--panel-soft);
}

.pentest-phases strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.pentest-phases span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pentest-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pentest-control {
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone, var(--line-strong));
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
}

.pentest-control.covered { --tone: var(--ok); }
.pentest-control.partial { --tone: var(--warn); }
.pentest-control.manual { --tone: var(--good); }
.pentest-control.gap { --tone: var(--danger); }

.pentest-control p {
  margin: 6px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.38;
}

.overview-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0, #fbfdfc 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.overview-panel[hidden] {
  display: none;
}

.overview-hero {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1fr) minmax(180px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--tone-bg, var(--accent-soft)) 42%, #ffffff);
}

.overview-hero.tone-ok { --tone: var(--ok); --tone-bg: var(--ok-soft); }
.overview-hero.tone-good { --tone: var(--good); --tone-bg: var(--good-soft); }
.overview-hero.tone-warn { --tone: var(--warn); --tone-bg: var(--warn-soft); }
.overview-hero.tone-danger { --tone: var(--danger); --tone-bg: var(--danger-soft); }
.overview-hero.tone-critical { --tone: var(--critical); --tone-bg: var(--critical-soft); }
.overview-hero.tone-muted { --tone: var(--info); --tone-bg: #eef3f4; }

.score-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    color-mix(in srgb, var(--tone, var(--accent)) 78%, #fff) 0,
    var(--tone, var(--accent)) var(--score-angle),
    var(--ring-track) var(--score-angle));
  box-shadow: var(--e-2);
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(135% 135% at 50% 6%, color-mix(in srgb, var(--panel) 90%, #fff) 0%, var(--panel) 52%);
  box-shadow: inset 0 0 0 1px var(--line);
}

.score-ring strong,
.score-ring span {
  position: relative;
  z-index: 1;
}

.score-ring strong {
  align-self: end;
  font-size: 34px;
  line-height: 0.96;
  font-variant-numeric: tabular-nums;
}

.score-ring span {
  align-self: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.score-copy {
  min-width: 0;
}

.score-copy span,
.target-chip span,
.kpi-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.score-copy h2 {
  margin: 3px 0 4px;
  font-size: 22px;
  line-height: 1.18;
}

.score-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 15px;
  font-weight: 750;
}

.score-copy small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.4;
}

.target-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 280px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 25%, var(--line));
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.74);
}

.target-chip strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

.overview-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.kpi-card {
  min-height: 106px;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.kpi-card strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.1;
}

.kpi-card small {
  color: var(--muted);
  line-height: 1.35;
}

.kpi-card.tone-ok { border-color: rgba(19, 121, 91, 0.25); background: var(--ok-soft); }
.kpi-card.tone-good { border-color: rgba(47, 111, 159, 0.25); background: var(--good-soft); }
.kpi-card.tone-warn { border-color: rgba(154, 106, 18, 0.25); background: var(--warn-soft); }
.kpi-card.tone-danger { border-color: rgba(177, 76, 46, 0.25); background: var(--danger-soft); }
.kpi-card.tone-critical { border-color: rgba(159, 18, 57, 0.25); background: var(--critical-soft); }
.kpi-card.tone-muted { background: var(--panel-soft); }

.overview-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.seo-overview {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0, #fbfdfc 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.seo-overview[hidden] {
  display: none;
}

.seo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.seo-detail-grid,
.seo-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.seo-groups {
  padding: 0;
  margin-top: 10px;
}

.seo-section {
  margin-top: 18px;
}

.seo-group-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--tone, var(--line-strong));
  border-radius: 8px;
  padding: 13px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.seo-group-card.state-ok { --tone: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.seo-group-card.state-warn { --tone: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.seo-group-card.state-danger { --tone: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--panel)); }

.seo-findings {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.seo-finding {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.seo-finding h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.seo-finding p {
  margin: 7px 0;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.seo-crawl-table {
  padding: 14px;
  border-top: 1px solid var(--line);
}

.ai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.ai-tab {
  flex: 0 1 auto;
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}

.ai-tab:not(:disabled):hover {
  color: var(--muted-strong);
  background: var(--bg-soft);
  border-bottom-color: var(--line-strong);
}

.ai-tab.active {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.ai-panels {
  margin-top: 12px;
}

.ai-panel[hidden] {
  display: none;
}

.ai-panel {
  display: grid;
  gap: 14px;
}

.ai-module-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 25%, var(--line));
  border-radius: 8px;
  padding: 15px;
  background: color-mix(in srgb, var(--tone-bg, var(--accent-soft)) 45%, #fff);
}

.ai-module-hero.tone-ok { --tone: var(--ok); --tone-bg: var(--ok-soft); }
.ai-module-hero.tone-good { --tone: var(--good); --tone-bg: var(--good-soft); }
.ai-module-hero.tone-warn { --tone: var(--warn); --tone-bg: var(--warn-soft); }
.ai-module-hero.tone-danger { --tone: var(--danger); --tone-bg: var(--danger-soft); }
.ai-module-hero.tone-critical { --tone: var(--critical); --tone-bg: var(--critical-soft); }
.ai-module-hero.tone-muted { --tone: var(--info); --tone-bg: #eef3f4; }

.ai-module-hero span,
.ai-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-module-hero h3 {
  margin: 3px 0 4px;
  font-size: 23px;
  line-height: 1.16;
}

.ai-module-hero p {
  margin: 0;
  color: var(--muted-strong);
}

.ai-module-hero > strong {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 35%, var(--line));
  border-radius: 50%;
  background: var(--panel);
  color: var(--tone, var(--accent));
  font-size: 24px;
}

.ai-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-metric {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.ai-metric strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.08;
}

.ai-metric small {
  color: var(--muted);
  line-height: 1.35;
}

.ai-metric.tone-ok { border-color: rgba(19, 121, 91, 0.25); background: var(--ok-soft); }
.ai-metric.tone-good { border-color: rgba(47, 111, 159, 0.25); background: var(--good-soft); }
.ai-metric.tone-warn { border-color: rgba(154, 106, 18, 0.25); background: var(--warn-soft); }
.ai-metric.tone-danger { border-color: rgba(177, 76, 46, 0.25); background: var(--danger-soft); }
.ai-metric.tone-critical { border-color: rgba(159, 18, 57, 0.25); background: var(--critical-soft); }
.ai-metric.tone-muted { background: var(--panel-soft); }

.ai-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-check-card {
  display: grid;
  gap: 9px;
  align-content: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone, var(--line-strong));
  border-radius: 8px;
  padding: 13px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.ai-check-card.state-ok,
.ai-check-card.state-covered { --tone: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.ai-check-card.state-partial { --tone: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.ai-check-card.state-gap { --tone: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--panel)); }

.ai-check-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.43;
  overflow-wrap: anywhere;
}

.ai-status {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--info);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-status.ok,
.ai-status.covered { background: var(--ok); }
.ai-status.partial { background: var(--warn); }
.ai-status.gap { background: var(--danger); }
/* In dark mode the tone tokens turn light, so flip the label to near-black for
   legible contrast (white-on-light-tone was ~2:1, below WCAG AA). */
body[data-theme="dark"] .ai-status { color: var(--n-950); }

.ai-prompt-matrix,
.ai-action-list {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.ai-prompt-table {
  display: grid;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ai-prompt-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) 94px 78px minmax(210px, 1.2fr) minmax(260px, 1.45fr);
  gap: 10px;
  min-width: 980px;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
}

.ai-prompt-row:first-child {
  border-top: 0;
}

.ai-prompt-row.head {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.ai-prompt-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-prompt-row small {
  color: var(--muted);
  line-height: 1.35;
}

.ai-traffic-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-traffic-plan ul,
.ai-action-list ol,
.info-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px 18px 14px 28px;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.4;
}

.info-group p {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.crawl-table {
  display: grid;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crawl-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) 82px minmax(180px, 1.3fr) 78px 78px;
  gap: 10px;
  min-width: 760px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
}

.crawl-row:first-child {
  border-top: 0;
}

.crawl-row.head {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.crawl-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.info-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.info-group h3 {
  margin: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  font-size: 14px;
}

.info-group dl {
  margin: 0;
}

.info-group dl div {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
}

.info-group dl div:first-child {
  border-top: 0;
}

.info-group dt,
.info-group dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.38;
}

.info-group dt {
  color: var(--muted);
  font-weight: 800;
}

.info-group dd {
  color: var(--text);
  overflow-wrap: anywhere;
}

.result-section {
  margin-top: 18px;
}

.result-section[hidden] {
  display: none;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.section-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.finding-list,
.check-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.result-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
  box-shadow: var(--shadow-sm);
}

.result-group + .result-group {
  margin-top: 2px;
}

.result-group-head {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.result-group .nested {
  margin-top: 10px;
}

.result-group .finding,
.result-group .check {
  box-shadow: none;
}

.finding,
.check {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.check.ok {
  border-color: rgba(19, 121, 91, 0.28);
  background: color-mix(in srgb, var(--ok) 6%, var(--panel));
}

.check.skipped {
  background: var(--panel-soft);
}

.finding-head,
.check-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.finding h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.check h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.badge,
.check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 74px;
  border-radius: var(--r-full);
  padding: 3px 10px;
  font: var(--t-caption);
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* soft severity pills (premium, auto dark-aware); dot beside label = never color-only */
.badge::before,
.check-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.badge.critical { background: var(--critical-soft); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 24%, transparent); }
.badge.high { background: var(--high-soft); color: var(--high); border-color: color-mix(in srgb, var(--high) 24%, transparent); }
.badge.medium { background: var(--medium-soft); color: var(--medium); border-color: color-mix(in srgb, var(--medium) 24%, transparent); }
.badge.low { background: var(--low-soft); color: var(--low); border-color: color-mix(in srgb, var(--low) 24%, transparent); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 24%, transparent); }

.check-badge.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.check-badge.skipped { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 24%, transparent); }

/* solid variant for count chips */
.badge.solid { color: #fff; border-color: transparent; }
.badge.solid::before { display: none; }
.badge.solid.critical { background: var(--critical); }
.badge.solid.high { background: var(--high); }
.badge.solid.medium { background: var(--medium); }
.badge.solid.low { background: var(--low); }
.badge.solid.info { background: var(--info); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 13px;
}

.finding p,
.check p {
  margin: 7px 0;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finding p strong,
.check p strong {
  color: var(--text);
}

.support-intro {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding: 16px;
}

.support-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.support-create-form,
.support-list-panel,
.support-thread-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.support-create-form {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.support-create-form .section-head {
  align-items: flex-start;
}

.support-create-form .section-head h2,
.support-list-head h2 {
  margin: 0;
  font-size: 16px;
}

.support-create-form .section-head span,
.support-list-head span {
  color: var(--muted);
  font-size: 11px;
}

.support-create-form textarea,
.support-reply-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
}

.support-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.support-form-actions button {
  min-height: 39px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.support-form-actions span {
  flex: 1 1 140px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.support-list-panel {
  overflow: hidden;
}

.support-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--panel-soft);
}

.support-list-head > div { display: grid; gap: 2px; }
.support-list-head select { max-width: 165px; padding: 7px 9px; font-size: 11px; }

.support-ticket-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-height: 510px;
  overflow-y: auto;
}

.support-ticket-list > .empty-state { margin: 12px; }

.support-ticket-item {
  display: grid;
  min-width: 0;
  gap: 7px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.support-ticket-item:last-child { border-bottom: 0; }
.support-ticket-item:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.support-ticket-item.active { background: color-mix(in srgb, var(--accent) 11%, var(--panel)); box-shadow: inset 3px 0 var(--accent); }

[data-support-unread] { color: var(--accent); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }

.support-ticket-item-top,
.support-ticket-item-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.support-ticket-item-top strong {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  white-space: normal;
}

.support-ticket-item-meta,
.support-ticket-item small {
  color: var(--muted);
  font-size: 11px;
}

.support-status-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.support-status-chip[data-status="waiting_on_support"] { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 24%, var(--line)); }
.support-status-chip[data-status="waiting_on_customer"] { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, var(--line)); }
.support-status-chip[data-status="resolved"] { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 24%, var(--line)); }
.support-status-chip[data-status="closed"] { color: var(--muted); }

.support-thread-panel {
  min-height: 620px;
  overflow: hidden;
}

.support-thread-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 580px;
  padding: 30px;
  text-align: center;
}

#supportThreadEmpty[hidden],
#supportThread[hidden],
#supportReplyForm[hidden] {
  display: none;
}

.support-thread-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 22px;
  font-weight: 900;
}

.support-thread-empty h2 { margin: 0; font-size: 17px; }
.support-thread-empty p { max-width: 360px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.support-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  background: var(--panel-soft);
}

.support-thread-head > div { min-width: 0; }
.support-thread-head > div > span { color: var(--muted); font-size: 11px; }
.support-thread-head h2 { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 18px; }

.support-messages {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 360px;
  max-height: 570px;
  overflow-y: auto;
  padding: 18px;
  background: color-mix(in srgb, var(--panel-soft) 55%, var(--panel));
}

.support-message {
  display: grid;
  gap: 8px;
  width: min(82%, 680px);
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
  padding: 11px 13px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.support-message.from-customer {
  justify-self: end;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.support-message header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-message header strong { font-size: 12px; }
.support-message time { color: var(--muted); font-size: 10px; }
.support-message p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }

.support-reply-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px 18px 17px;
}

.admin-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-command-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.admin-results {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
}

.admin-kpi-grid,
.admin-plan-grid,
.admin-hook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi,
.admin-plan-card,
.admin-hook-card,
.admin-user-card,
.admin-event-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.admin-kpi {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.admin-kpi span,
.admin-plan-card span,
.admin-hook-card code,
.admin-event-row code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-kpi strong {
  font-size: 30px;
  line-height: 1;
}

.invite-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.invite-form input,
.invite-form select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
}

.invite-form input[type="email"] {
  flex: 1 1 220px;
}

.invite-form button {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  cursor: pointer;
}

.invite-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-user-remove {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--danger, #c0392b);
  font-weight: 800;
  cursor: pointer;
}

.admin-user-remove:hover {
  border-color: var(--danger, #c0392b);
}

.admin-user-self {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.project-trend {
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.project-trend.trend-up { color: var(--ok); }
.project-trend.trend-down { color: var(--danger); }
.project-trend.trend-flat { color: var(--muted); }

.admin-kpi small,
.admin-plan-card small,
.admin-plan-card em,
.admin-hook-card p,
.admin-hook-card span,
.admin-user-card span,
.admin-user-card small,
.admin-event-row span,
.admin-event-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.admin-section {
  display: grid;
  gap: 12px;
}

.admin-users,
.admin-events {
  display: grid;
  gap: 8px;
}

.admin-user-card {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) 96px 130px 160px;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.admin-user-card em,
.admin-user-card b {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.admin-plan-card,
.admin-hook-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.admin-plan-card.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel));
}

.admin-hook-card code,
.admin-event-row code {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--panel-soft);
  text-transform: none;
}

.admin-event-row {
  display: grid;
  grid-template-columns: 210px minmax(190px, 1fr) 180px minmax(220px, 1.4fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: view-in var(--dur-2) var(--ease-standard);
}

.modal-backdrop[hidden] {
  display: none;
}

.upgrade-modal {
  position: relative;
  width: min(720px, 100%);
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}

.upgrade-modal h2,
.upgrade-modal p {
  margin: 0;
}

.upgrade-modal p:not(.eyebrow) {
  color: var(--muted);
}

.legal-consent-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}

#legalConsentModal { z-index: 380; overflow-y: auto; }

.legal-consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-consent-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.legal-consent-links a:hover,
.legal-consent-links a:focus-visible {
  border-color: var(--accent);
  text-decoration: underline;
}

.legal-consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.legal-consent-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.legal-consent-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-consent-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.legal-consent-status.tone-danger {
  color: var(--danger);
}

.upgrade-billing-toggle {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.upgrade-billing-toggle button {
  min-height: 34px;
  padding: 6px 12px;
  border-color: transparent;
  background: transparent;
}

.upgrade-billing-toggle button.active {
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
}

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.upgrade-options button {
  display: grid;
  gap: 6px;
  min-height: 108px;
  text-align: left;
}

.upgrade-options button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upgrade-price > span {
  color: inherit;
  font: inherit;
}

.upgrade-annual-total {
  min-height: 16px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
}

.upgrade-confirmation {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
}

.upgrade-confirmation[hidden] { display: none; }
.upgrade-confirmation h3 { margin: 0; font-size: 16px; }
.upgrade-confirmation dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.upgrade-confirmation dl div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.upgrade-confirmation dt { color: var(--muted); font-size: 11px; font-weight: 750; }
.upgrade-confirmation dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 850; }
.upgrade-confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.upgrade-confirmation-actions button { min-height: 40px; }

.upgrade-options button > span,
.upgrade-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.upgrade-status {
  min-height: 18px;
  font-weight: 850;
}

/* The plan picker describes a choice; only the primary action opens billing. */
body:has(#upgradeModal:not([hidden])) { min-width: 0; overflow: hidden; }
.upgrade-purchase {
  width: min(860px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 26px;
}
.upgrade-purchase h2 { padding-right: 34px; font-size: clamp(22px, 3vw, 28px); line-height: 1.15; }
.upgrade-purchase > p:not(.eyebrow) { max-width: 64ch; font-size: 14px; line-height: 1.5; }
.upgrade-purchase .modal-close { min-width: 44px; min-height: 44px; z-index: 3; }
.upgrade-steps { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0 0 14px; list-style: none; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.upgrade-steps [aria-current="step"] { color: var(--accent); font-weight: 750; }
.upgrade-purchase .upgrade-billing-toggle button { min-height: 44px; min-width: 96px; }
.upgrade-purchase .upgrade-options button { position: relative; align-content: start; gap: 10px; padding: 16px; border: 1px solid var(--line-strong); background: var(--panel-soft); border-radius: 12px; color: var(--text); }
.upgrade-purchase .upgrade-options button:hover { border-color: var(--accent); }
.upgrade-purchase .upgrade-options button.active { border: 2px solid var(--accent); padding: 15px; background: var(--accent-soft); }
.upgrade-purchase .upgrade-options button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.upgrade-purchase .upgrade-options button > strong { font-size: 17px; }
.upgrade-purchase .upgrade-options .upgrade-choice-state { display: flex; align-items: center; gap: 7px; min-height: 19px; color: var(--accent); font-size: 11px; font-weight: 750; }
.upgrade-choice-state::before { content: ''; flex: 0 0 15px; width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 50%; box-sizing: border-box; }
[aria-checked="true"] .upgrade-choice-state::before { border: 4px solid var(--accent); background: var(--panel); }
.upgrade-purchase .upgrade-plan-purpose { font-size: 12px; line-height: 1.5; min-height: 3em; }
.upgrade-purchase .upgrade-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 24px; letter-spacing: -.035em; }
.upgrade-price i { font-size: 12px; font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.upgrade-plan-benefits { display: grid; gap: 8px; margin: 3px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; line-height: 1.5; }
.upgrade-plan-benefits li { padding-left: 14px; position: relative; }
.upgrade-plan-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.upgrade-options button[hidden] { display: none !important; }
.upgrade-options .upgrade-free-choice { grid-column: 1 / -1; }
.upgrade-free-choice .upgrade-plan-benefits li:nth-child(n+2)::before { content: '−'; }
.upgrade-purchase .upgrade-plan-additions { min-width: 0; padding: 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel-soft); }
.upgrade-purchase .upgrade-plan-additions h4 { color: var(--text); font-size: 16px; }
.upgrade-purchase .signup-plan-addition-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.upgrade-purchase .signup-plan-addition-group h5 { color: var(--text); font-size: 13px; }
.upgrade-purchase .signup-plan-addition-group li { color: var(--muted-strong); font-size: 12px; }
.upgrade-purchase .signup-plan-addition-group li::before { color: var(--accent); }
.upgrade-purchase[data-checkout-active="true"] > .upgrade-plan-additions,
.upgrade-purchase[data-checkout-active="true"] > #upgradeCycleNotice { display: none !important; }
.upgrade-confirmation dl div[hidden] { display: none; }
.upgrade-confirmation #upgradeNextPlanRow { grid-column: 1 / -1; }
.upgrade-compare-link { width: fit-content; min-height: 32px; display: inline-flex; align-items: center; color: var(--accent); font-size: 12px; text-underline-offset: 3px; }
.upgrade-compare-link[hidden], .upgrade-order-summary[hidden], .upgrade-options[hidden], .upgrade-billing-toggle[hidden] { display: none !important; }
.upgrade-order-summary { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.upgrade-order-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.upgrade-order-heading > div { display: grid; gap: 4px; }
#upgradeSummaryLabel { color: var(--muted); font-size: 11px; }
#upgradeSummaryPlan { font-size: 15px; }
.upgrade-order-heading p { display: grid; gap: 3px; justify-items: end; }
#upgradeSummaryPrice { color: var(--text); font-size: 22px; }
#upgradeSummaryPeriod { font-size: 11px; }
#upgradeSummaryRenewal { font-size: 12px; line-height: 1.5; }
.upgrade-order-summary .upgrade-tax-note { font-size: 11px; line-height: 1.5; }
#upgradeContinueButton { width: 100%; min-height: 48px; margin-top: 6px; background: var(--accent); color: var(--on-accent, #071c15); font-size: 14px; font-weight: 750; border-color: var(--accent); }
.upgrade-order-summary .upgrade-next-step { text-align: center; font-size: 11px; line-height: 1.5; }
.upgrade-purchase .upgrade-status:empty { display: none; }
.upgrade-purchase .upgrade-status { font-size: 13px; font-weight: 500; line-height: 1.5; }
.auth-checkout-summary { text-align: left; width: 100%; padding: 18px; border: 1px solid #cbd9d1; border-radius: 12px; background: #f7faf8; }
.auth-checkout-summary dl { display: grid; gap: 12px; margin: 0; }
.auth-checkout-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.auth-checkout-summary dt { color: #526159; font-size: 12px; }
.auth-checkout-summary dd { margin: 0; color: #15251e; font-size: 14px; font-weight: 700; text-align: right; }
.auth-checkout-summary .auth-checkout-tax { margin: 14px 0 0; color: #526159; font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) {
  .upgrade-purchase { padding: 18px; gap: 12px; max-height: calc(100dvh - 24px); }
  .upgrade-purchase .signup-plan-addition-groups { grid-template-columns: minmax(0, 1fr); }
  #upgradeModal { padding: 12px; }
  .upgrade-purchase .upgrade-options { grid-template-columns: 1fr; gap: 8px; }
  .upgrade-purchase .upgrade-options button { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px; }
  .upgrade-purchase .upgrade-options button.active { padding: 11px; }
  .upgrade-purchase .upgrade-choice-state { grid-column: 1; grid-row: 1; }
  .upgrade-purchase .upgrade-options button > strong { grid-column: 1; grid-row: 2; }
  .upgrade-purchase .upgrade-price { grid-column: 2; grid-row: 1 / 3; justify-content: end; align-content: center; font-size: 22px; }
  .upgrade-purchase .upgrade-plan-purpose { grid-column: 1 / -1; min-height: 0; }
  .upgrade-purchase .upgrade-plan-benefits { grid-column: 1 / -1; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
  .upgrade-purchase [aria-checked="false"] .upgrade-plan-benefits { display: none; }
  .upgrade-order-summary { position: sticky; bottom: -18px; z-index: 2; padding: 14px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); }
  .upgrade-confirmation-actions { flex-direction: column-reverse; }
  .upgrade-confirmation-actions button { width: 100%; min-height: 46px; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .upgrade-order-summary { position: static; }
}
@media (max-width: 360px) {
  .upgrade-purchase .upgrade-options button { column-gap: 8px; }
  .upgrade-purchase .upgrade-options button > strong { font-size: 15px; }
  .upgrade-purchase .upgrade-price { font-size: 20px; }
}

.empty-state {
  min-height: 110px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
  padding: 18px;
}

body[data-theme="dark"] .side-nav,
body[data-theme="dark"] .brand-block,
body[data-theme="dark"] .workspace,
body[data-theme="dark"] .results,
body[data-theme="dark"] .overview-panel,
body[data-theme="dark"] .seo-overview,
body[data-theme="dark"] .info-group,
body[data-theme="dark"] .module-card,
body[data-theme="dark"] .seo-group-card,
body[data-theme="dark"] .seo-finding,
body[data-theme="dark"] .finding,
body[data-theme="dark"] .check,
body[data-theme="dark"] .ai-check-card,
body[data-theme="dark"] .ai-metric,
body[data-theme="dark"] .kpi-card,
body[data-theme="dark"] .summary-card,
body[data-theme="dark"] .crawl-row,
body[data-theme="dark"] .ai-prompt-row,
body[data-theme="dark"] .account-card,
body[data-theme="dark"] .admin-kpi,
body[data-theme="dark"] .admin-plan-card,
body[data-theme="dark"] .admin-hook-card,
body[data-theme="dark"] .admin-user-card,
body[data-theme="dark"] .admin-event-row,
body[data-theme="dark"] .kpi-tile,
body[data-theme="dark"] .project-card,
body[data-theme="dark"] .audit-row,
body[data-theme="dark"] .data-table-wrap,
body[data-theme="dark"] .upgrade-modal {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}

body[data-theme="dark"] .ghost-button,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .modules,
body[data-theme="dark"] .modules label,
body[data-theme="dark"] .progress-panel,
body[data-theme="dark"] .target-chip,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .ai-tabs,
body[data-theme="dark"] .crawl-row.head,
body[data-theme="dark"] .ai-prompt-row.head,
body[data-theme="dark"] .info-group h3,
body[data-theme="dark"] .module-metrics span,
body[data-theme="dark"] .pentest-standards span,
body[data-theme="dark"] .demo-accounts button,
body[data-theme="dark"] .admin-user-card em,
body[data-theme="dark"] .admin-user-card b,
body[data-theme="dark"] .admin-hook-card code,
body[data-theme="dark"] .admin-event-row code,
body[data-theme="dark"] .home-contract,
body[data-theme="dark"] .project-matrix span,
body[data-theme="dark"] .project-riskline span {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--text);
}

body[data-theme="dark"] .overview-hero,
body[data-theme="dark"] .ai-module-hero,
body[data-theme="dark"] .plan-card.active,
body[data-theme="dark"] .admin-plan-card.active,
body[data-theme="dark"] .upgrade-options button.active {
  background: color-mix(in srgb, var(--tone-bg, var(--accent-soft)) 45%, var(--panel));
}

body[data-theme="dark"] .score-ring::before {
  background: #0f1a18;
}

body[data-theme="dark"] .score-copy p,
body[data-theme="dark"] .finding p,
body[data-theme="dark"] .check p,
body[data-theme="dark"] .seo-finding p,
body[data-theme="dark"] .ai-check-card p,
body[data-theme="dark"] .module-preview ul,
body[data-theme="dark"] .progress-log,
body[data-theme="dark"] .ai-traffic-plan ul,
body[data-theme="dark"] .ai-action-list ol,
body[data-theme="dark"] .info-group ul,
body[data-theme="dark"] .home-hero-copy p {
  color: var(--muted-strong);
}

@media (max-width: 1120px) {
  .summary-grid,
  .module-board,
  .plan-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .overview-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-kpis,
  .seo-detail-grid,
  .seo-groups,
  .ai-metric-grid,
  .ai-card-grid,
  .admin-kpi-grid,
  .admin-plan-grid,
  .admin-hook-grid,
  .dashboard-kpis,
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero,
  .home-hero-main {
    grid-template-columns: 1fr;
  }

  .admin-user-card,
  .admin-event-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    height: 68px;
    min-height: 68px;
    min-width: 0;
    max-width: 100%;
    padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
    overflow: visible;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--sidebar-bg);
  }

  .side-nav nav {
    position: fixed;
    top: calc(76px + env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 92;
    display: grid;
    width: min(430px, calc(100vw - 20px));
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    padding: 8px 8px max(12px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: var(--sidebar-bg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-18px, 0, 0) scale(0.985);
    transform-origin: top left;
    transition: opacity 0.18s ease, transform 0.22s ease, visibility 0.22s step-end;
  }

  .side-nav.mobile-nav-open nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 0.18s ease, transform 0.22s ease, visibility 0s;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding: 5px 8px 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    border-color: rgba(98, 245, 187, 0.34);
    background: rgba(98, 245, 187, 0.09);
  }

  .mobile-nav-selection {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .mobile-nav-selection small {
    overflow: hidden;
    color: #7f8c86;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-nav-selection strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-action {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 7px;
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    color: #8affcd;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-nav-icon {
    position: relative;
    display: block;
    width: 17px;
    height: 14px;
  }

  .mobile-nav-icon::before,
  .mobile-nav-icon::after,
  .mobile-nav-icon i {
    position: absolute;
    left: 1px;
    width: 15px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transition: opacity 0.16s ease, transform 0.18s ease, top 0.18s ease;
  }

  .mobile-nav-icon::before { top: 1px; }
  .mobile-nav-icon i { top: 6px; }
  .mobile-nav-icon::after { top: 11px; }

  .side-nav.mobile-nav-open .mobile-nav-icon::before {
    top: 6px;
    transform: rotate(45deg);
  }

  .side-nav.mobile-nav-open .mobile-nav-icon i {
    opacity: 0;
  }

  .side-nav.mobile-nav-open .mobile-nav-icon::after {
    top: 6px;
    transform: rotate(-45deg);
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 68px 0 0;
    z-index: 91;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(2, 7, 6, 0.68);
    backdrop-filter: blur(3px);
    cursor: default;
  }

  .mobile-nav-panel-head {
    position: sticky;
    top: -8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -8px -8px 5px;
    padding: 13px 12px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-panel-head > span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .mobile-nav-panel-head small {
    color: #62f5bb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-nav-panel-head strong {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
  }

  .mobile-nav-close {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #c9d3ce;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .side-nav .nav-group-label {
    display: block;
    margin-top: 14px;
  }

  .side-nav .nav-item {
    min-height: 54px;
    white-space: normal;
  }

  .side-nav .nav-item small {
    display: block;
  }

  /* Account collapses to a compact avatar on the right of the mobile bar. */
  .side-account {
    margin: 0;
    width: auto;
    padding: 4px;
    border-top: 0;
    border-radius: 10px;
    grid-template-columns: auto;
    gap: 0;
    flex: 0 0 auto;
  }
  .side-account-text,
  .side-account-caret { display: none; }
  .brand-block { margin-bottom: 0; flex: 0 0 auto; }

  .scan-form,
  .project-form {
    grid-template-columns: 1fr 1fr;
  }

  .suitebar {
    grid-template-columns: 1fr;
    padding: 10px 12px;
    gap: 10px;
  }

  /* Drop the decorative "command center" heading on phones (the nav + each view's
     own title already convey context); keep the plan badge. Saves ~120px. */
  .suite-copy .eyebrow,
  .suite-copy h2 {
    display: none;
  }
  .suite-copy { display: flex; align-items: center; }

  .suite-tools {
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }

  .account-card {
    width: 100%;
    grid-template-columns: 1fr auto auto;
    padding: 6px 8px;
  }

  .mini-field {
    min-width: 0;
    flex: 1 1 130px;
    margin: 0;
  }

  .theme-toggle {
    margin-top: 0;
    flex: 0 0 auto;
  }

  .seo-form,
  .ai-form {
    grid-template-columns: 1fr 1fr;
  }

  .target-field,
  .project-target-field,
  .seo-target-field,
  .ai-target-field,
  .ai-textarea-field,
  .modules,
  .toggles,
  .actions,
  .seo-toggles,
  .seo-actions,
  .ai-toggles,
  .ai-actions {
    grid-column: 1 / -1;
  }

  .modules {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .overview-hero {
    grid-template-columns: 112px 1fr;
  }

  .module-board,
  .pentest-controls,
  .ai-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .target-chip {
    grid-column: 1 / -1;
    max-width: none;
  }

  .project-form button {
    grid-column: 1 / -1;
  }

  .support-layout {
    grid-template-columns: 1fr;
  }

  .support-ticket-list {
    max-height: 330px;
  }

  .support-thread-panel {
    min-height: 480px;
  }

  .support-thread-empty {
    min-height: 440px;
  }
}

@media (max-width: 680px) {
  .shell {
    padding: 12px;
  }

  .module-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mcp-protocol-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .mcp-protocol-strip > span:last-child {
    flex-basis: calc(100% - 18px);
    margin-left: 16px;
  }

  .mcp-client-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mcp-client {
    padding: 16px;
  }

  .mcp-client + .mcp-client {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .mcp-client > p,
  .mcp-client-steps {
    min-height: 0;
  }

  .mcp-client-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mcp-oauth-badge {
    grid-column: 2;
    justify-self: start;
  }

  .audit-queue { grid-template-columns: 1fr; }

  .workspace,
  .results {
    padding: 14px;
  }

  .topbar,
  .finding-head,
  .check-head,
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .scan-form,
  .seo-form,
  .ai-form,
  .project-form,
  .summary-grid,
  .module-board,
  .plan-grid,
  .dashboard-kpis,
  .project-grid,
  .home-hero,
  .home-hero-main,
  .home-contract dl,
  .project-matrix,
  .overview-kpis,
  .overview-detail-grid,
  .seo-kpis,
  .seo-detail-grid,
  .seo-groups,
  .ai-metric-grid,
  .ai-card-grid,
  .ai-traffic-plan,
  .demo-accounts,
  .admin-kpi-grid,
  .admin-plan-grid,
  .admin-hook-grid,
  .upgrade-options,
  .modules,
  .pentest-standards,
  .pentest-phases,
  .pentest-controls {
    grid-template-columns: 1fr;
  }

  .billing-overview,
  .billing-facts,
  .brand-form,
  .upgrade-confirmation dl {
    grid-template-columns: 1fr;
  }

  .billing-current-head,
  .billing-transaction,
  .support-thread-head,
  .support-ticket-item-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .billing-actions > button {
    flex: 1 1 145px;
  }

  .support-message {
    width: 94%;
  }

  .admin-user-card,
  .admin-event-row,
  .admin-command-row,
  .audit-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  /* Keep the account chip a compact single row (identity | upgrade | logout)
     rather than a tall stacked card on phones. */
  .account-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .account-avatar {
    width: 38px;
    height: 38px;
  }

  .overview-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .suite-tools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .theme-toggle {
    margin-top: 0;
  }

  .score-ring {
    width: 104px;
  }

  .info-group dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media (max-width: 360px) {
  body.suite-app .side-nav .brand-block {
    grid-template-columns: 24px;
    padding-inline: 4px;
  }

  body.suite-app .side-nav .brand-block strong {
    display: none;
  }

  .mobile-nav-toggle {
    gap: 7px;
    padding-left: 9px;
  }

  .mobile-nav-action {
    gap: 5px;
    padding-left: 7px;
  }
}

/* ============================================================
   UX & accessibility layer (added last so it wins the cascade)
   ============================================================ */

/* --- Smooth, subtle micro-interactions --- */
.nav-item,
button,
.plan-card,
.project-card,
.kpi-tile,
.admin-user-card,
.summary-card,
.demo-accounts button,
.module-card,
input,
select,
textarea {
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

button:not(:disabled):hover,
.nav-item:not(.active):hover,
.plan-card:hover,
.demo-accounts button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

button:not(:disabled):active {
  transform: translateY(1px) scale(0.995);
}

.project-card:hover,
.module-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Disabled affordance --- */
button:disabled,
[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Busy buttons show an inline spinner and block input --- */
button[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: #fff;
  border-radius: 50%;
  animation: audit-spin 0.6s linear infinite;
}

@keyframes audit-spin {
  to { transform: rotate(360deg); }
}

/* --- Skip link (first focusable element) --- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Screen-reader-only utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Toast / notification system --- */
.toast-region {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.leaving {
  animation: toast-out 0.18s ease forwards;
}

.toast.tone-ok { border-left-color: var(--ok); }
.toast.tone-danger { border-left-color: var(--danger); }
.toast.tone-warn { border-left-color: var(--warn); }
.toast.tone-info { border-left-color: var(--good); }

.toast-icon {
  flex: 0 0 auto;
  font-weight: 900;
  line-height: 1.4;
}

.toast-body {
  flex: 1;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}

.toast-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.toast-close:hover {
  background: var(--panel-soft);
  color: var(--text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(20px); }
}

/* --- Active view fade-in for a calmer transition --- */
.app-view:not([hidden]) {
  animation: view-in 0.2s ease;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll targets clear of any sticky chrome --- */
.workspace h1,
.results,
[tabindex="-1"] {
  scroll-margin-top: 20px;
}

/* --- Larger touch targets on coarse pointers --- */
@media (pointer: coarse) {
  button,
  .nav-item,
  select,
  .summary-card {
    min-height: 44px;
  }
}

/* ---------- Dashboard polish: unified card motion, score halo, live meter ---------- */
.kpi-tile,
.audit-row,
.audit-job {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.kpi-tile:hover,
.audit-row:hover,
.audit-job:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
/* Score ring: soft tone-tinted halo under the dial + tighter numerals. */
.score-ring {
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--tone, var(--accent)) 22%, transparent));
}
.score-ring strong { letter-spacing: -0.015em; }
/* Usage meter fills smoothly with a subtle top sheen. */
.usage-meter > i {
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 26%, transparent), transparent);
}
/* Hero CTA: a quiet lift on hover. */
.home-hero-cta > button {
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.home-hero-cta > button:hover { transform: translateY(-1px); filter: brightness(1.03); }
/* Plan cards lift on hover (they already recolor their border on hover). */
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Severity chips read as crisp uppercase pills. */
.badge.critical,
.badge.high,
.badge.medium,
.badge.low,
.badge.info {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Honor reduced-motion preference (overrides everything above) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  button:not(:disabled):active,
  .project-card:hover,
  .module-card:hover,
  .kpi-tile:hover,
  .audit-row:hover,
  .audit-job:hover,
  .plan-card:hover,
  .home-hero-cta > button:hover {
    transform: none;
  }
}

/* ============================================================
   Premium primitives (skeleton, section headers, chips)
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 60%, transparent), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-standard) infinite;
}

.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 44%; margin-bottom: 12px; }
.skeleton-block { height: 96px; }

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Small round chip for target history / tags */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted-strong);
  font: var(--t-small);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ============================================================
   Unified full-audit modal
   ============================================================ */
.unified-modal {
  position: relative;
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  background: var(--panel);
  box-shadow: var(--e-4);
}

.unified-modal .eyebrow {
  margin: 0;
  color: var(--accent);
  font: var(--t-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.unified-modal h2 {
  margin: 4px 0 16px;
  font: var(--t-h2);
}

.unified-form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.unified-form input { flex: 1; }
.unified-form button { flex: 0 0 auto; }

.unified-body { display: grid; gap: 18px; }

.unified-overall {
  display: flex;
  align-items: center;
  gap: 16px;
}

.unified-overall .score-ring { width: 96px; }
.unified-overall .eyebrow { color: var(--muted); font: var(--t-caption); letter-spacing: .05em; text-transform: uppercase; }

.unified-rows { display: grid; gap: 12px; }

.unified-row {
  display: grid;
  grid-template-columns: 92px 1fr 36px auto;
  align-items: center;
  gap: 12px;
}

.unified-row-label { font: var(--t-label); color: var(--muted-strong); }

.unified-bar {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  overflow: hidden;
}

.unified-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-4) var(--ease-standard);
}

.unified-bar i.tone-ok { background: var(--ok); }
.unified-bar i.tone-warn { background: var(--warn); }
.unified-bar i.tone-danger { background: var(--danger); }

/* While a pillar is scanning we don't yet have a score, so show an indeterminate
   sweep instead of an empty (frozen-looking) bar. */
.unified-row.state-running .unified-bar {
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: unified-indeterminate 1.15s ease-in-out infinite;
}

@keyframes unified-indeterminate {
  0% { background-position: -45% 0; }
  100% { background-position: 145% 0; }
}

.unified-row.state-running .unified-row-label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1s var(--ease-standard) infinite;
}

@keyframes pulse-dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.unified-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.unified-actions { display: flex; justify-content: flex-end; }

/* ============================================================
   Command palette (Cmd/Ctrl+K)
   ============================================================ */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh 18px 18px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: view-in var(--dur-2) var(--ease-standard);
}

.palette-backdrop[hidden] { display: none; }

.palette {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
  box-shadow: var(--e-4);
  overflow: hidden;
}

.palette-input {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  padding: 0 18px;
  font-size: 16px;
}

.palette-input:focus { outline: none; box-shadow: none; border-color: var(--line); background: var(--panel); }

.palette-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
}

.palette-item.active { background: var(--accent-soft); }

.palette-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--muted-strong);
  font-size: 14px;
}

.palette-item.active .palette-icon { background: var(--panel); color: var(--accent); }
.palette-label { flex: 1; font: var(--t-label); color: var(--text); }
.palette-hint { color: var(--muted); font: var(--t-caption); text-transform: uppercase; letter-spacing: .04em; }
.palette-empty { padding: 16px; text-align: center; color: var(--muted); }

.palette-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: var(--t-small);
}

.palette-foot kbd {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ============================================================
   Finding "how to fix" (details) + triage + references
   ============================================================ */
.finding-fix {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  overflow: hidden;
}

.finding-fix > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  font: var(--t-label);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.finding-fix > summary::-webkit-details-marker { display: none; }
.finding-fix > summary::before { content: "\25B8"; transition: transform var(--dur-2) var(--ease-standard); }
.finding-fix[open] > summary::before { transform: rotate(90deg); }
.finding-fix > summary:hover { background: var(--bg-soft); }

.finding-fix-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--line);
}

.finding-fix-body p { margin: 8px 0 0; }

.finding-refs { margin-top: 8px; font-size: 12px; }
.finding-refs ul { margin: 4px 0 0; padding-left: 18px; }
.finding-refs a { color: var(--accent); overflow-wrap: anywhere; }

.finding-triage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.finding-triage > span {
  font: var(--t-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.finding-triage select {
  width: auto;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.finding[data-triage="accepted"],
.finding[data-triage="false-positive"],
.finding[data-triage="fixed"],
.seo-finding[data-triage="accepted"],
.seo-finding[data-triage="false-positive"],
.seo-finding[data-triage="fixed"] {
  opacity: 0.6;
}

.finding[data-triage="fixed"] .finding-head h2,
.seo-finding[data-triage="fixed"] .finding-head h2 { text-decoration: line-through; }

/* ============================================================
   Sparkline
   ============================================================ */
.sparkline { color: var(--muted); }
.sparkline.up { color: var(--ok); }
.sparkline.down { color: var(--danger); }

/* ============================================================
   Onboarding tour
   ============================================================ */
.tour-root { position: fixed; inset: 0; z-index: 340; }
.tour-root[hidden] { display: none; }

.tour-scrim { position: absolute; inset: 0; background: var(--scrim); }

.tour-spot {
  position: fixed;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 2px var(--accent);
  transition: all var(--dur-3) var(--ease-standard);
  pointer-events: none;
}

.tour-pop {
  position: fixed;
  width: min(300px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--panel);
  box-shadow: var(--e-4);
  transition: top var(--dur-3) var(--ease-standard), left var(--dur-3) var(--ease-standard);
}

.tour-pop h4 { margin: 0 0 6px; font: var(--t-h3); }
.tour-pop p { margin: 0 0 14px; color: var(--muted-strong); line-height: 1.5; font-size: 13.5px; }

.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-progress { flex: 1; color: var(--muted); font: var(--t-small); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .feature-upgrade-gate {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 12px 12px 0;
    padding: 14px;
  }
  .feature-upgrade-gate button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .feature-upgrade-gate.compact {
    margin: 0 0 12px;
  }
  .free-feature-preview {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .free-feature-preview > b {
    grid-column: 2;
    justify-self: start;
  }

  .verified-domains-shell {
    gap: 15px;
    padding: 17px 14px 14px;
  }

  .verified-domains-head {
    flex-direction: column;
    gap: 12px;
  }

  .verified-domains-unlimited {
    align-self: flex-start;
  }

  .verified-domain-native-fields {
    grid-template-columns: 1fr;
  }

  .verified-domain-native-fields button {
    width: 100%;
  }

  .verified-domain-gsc {
    align-items: flex-start;
    flex-direction: column;
  }

  .verified-domain-gsc-actions {
    width: 100%;
  }

  .verified-domain-gsc-actions button {
    flex: 1;
  }

  .verified-domain-card {
    padding: 13px;
  }

  .verified-domain-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .verified-domain-status {
    grid-column: 2;
    justify-self: start;
  }

  .verified-domain-meta {
    grid-template-columns: 1fr;
  }

  .verified-domain-challenge dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .verified-domain-actions button {
    flex: 1 1 calc(50% - 7px);
  }

  .verified-domain-actions .verified-domain-remove {
    margin-left: 0;
  }
}

@media (max-width: 1120px) {
  .verified-domains-controls,
  .verified-domain-list {
    grid-template-columns: 1fr;
  }
}