/*
 * Forum Fortress customer portal design system.
 *
 * This stylesheet is intentionally loaded after the legacy portal rules. It is
 * the canonical visual layer for the customer workspace: tokens first, then
 * shared primitives, then the small number of product-specific compositions.
 */

:root {
  --ff-radius-xs: 6px;
  --ff-radius-sm: 8px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 12px;

  --ff-space-1: .25rem;
  --ff-space-2: .5rem;
  --ff-space-3: .75rem;
  --ff-space-4: 1rem;
  --ff-space-5: 1.5rem;
  --ff-space-6: 2rem;
  --ff-space-7: 3rem;

  --ff-color-app: #0b2a34;
  --ff-color-app-raised: #103943;
  --ff-color-workspace: #f5f5f0;
  --ff-color-surface: #fffef9;
  --ff-color-surface-subtle: #edf3f1;
  --ff-color-surface-strong: #e5edeb;
  --ff-color-text: #102b35;
  --ff-color-text-soft: #38525b;
  --ff-color-text-muted: #596e75;
  --ff-color-border: #d2ddda;
  --ff-color-border-strong: #b9cac5;

  --ff-color-action: #246f80;
  --ff-color-action-hover: #195968;
  --ff-color-action-soft: #e1eff1;
  --ff-color-on-action: #fff;
  --ff-color-protection: #1f7a58;
  --ff-color-protection-strong: #135d41;
  --ff-color-protection-soft: #e3f1e9;
  --ff-color-information: #326e9e;
  --ff-color-information-soft: #e7f0f8;
  --ff-color-warning: #9a6a21;
  --ff-color-warning-soft: #f6ecd8;
  --ff-color-danger: #a84854;
  --ff-color-danger-soft: #f7e8ea;

  --ff-control-height: 42px;
  --ff-transition: 150ms ease;

  --ff-font-heading: var(--ff-font-sans);
  --radius-sm: var(--ff-radius-sm);
  --radius-md: var(--ff-radius-md);
  --radius-lg: var(--ff-radius-lg);
  --radius-xl: var(--ff-radius-lg);
  --space-1: var(--ff-space-2);
  --space-2: var(--ff-space-2);
  --space-3: var(--ff-space-4);
  --space-4: var(--ff-space-5);
  --space-5: var(--ff-space-6);
  --ff-navy: var(--ff-color-app);
  --ff-navy-raised: var(--ff-color-app-raised);
  --bg: var(--ff-color-workspace);
  --surface: var(--ff-color-surface);
  --surface-soft: var(--ff-color-surface-subtle);
  --paper: var(--ff-color-surface);
  --paper-strong: var(--ff-color-surface-subtle);
  --ink: var(--ff-color-text);
  --ink-soft: var(--ff-color-text-soft);
  --muted: var(--ff-color-text-muted);
  --text-faint: var(--ff-color-text-muted);
  --line: var(--ff-color-border);
  --line-strong: var(--ff-color-border-strong);
  --primary: var(--ff-color-action);
  --primary-strong: var(--ff-color-action-hover);
  --primary-soft: var(--ff-color-action-soft);
  --accent: var(--ff-color-action);
  --accent-strong: var(--ff-color-action-hover);
  --accent-soft: var(--ff-color-action-soft);
  --link: var(--ff-color-action);
  --link-strong: var(--ff-color-action-hover);
  --success: var(--ff-color-protection);
  --success-soft: var(--ff-color-protection-soft);
  --warning: var(--ff-color-warning);
  --warning-soft: var(--ff-color-warning-soft);
  --warn: var(--ff-color-warning);
  --danger: var(--ff-color-danger);
  --danger-soft: var(--ff-color-danger-soft);
  --decision-allow: var(--ff-color-protection);
  --decision-block: var(--ff-color-danger);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 18px 45px rgba(9, 39, 48, .18);
  --shadow: none;
}

html[data-ff-theme="dark"] {
  --ff-color-app: #081f28;
  --ff-color-app-raised: #0e323d;
  --ff-color-workspace: #0e171d;
  --ff-color-surface: #14232c;
  --ff-color-surface-subtle: #192b35;
  --ff-color-surface-strong: #20343e;
  --ff-color-text: #eef6f5;
  --ff-color-text-soft: #c9d8d6;
  --ff-color-text-muted: #9fb2b3;
  --ff-color-border: #2c424a;
  --ff-color-border-strong: #405a62;
  --ff-color-action: #78bed0;
  --ff-color-action-hover: #a0d7e3;
  --ff-color-action-soft: rgba(74, 153, 171, .18);
  --ff-color-on-action: #0d2931;
  --ff-color-protection: #73cea2;
  --ff-color-protection-strong: #9ce2bd;
  --ff-color-protection-soft: rgba(77, 173, 126, .16);
  --ff-color-information: #89bce3;
  --ff-color-information-soft: rgba(66, 135, 184, .18);
  --ff-color-warning: #e0b866;
  --ff-color-warning-soft: rgba(178, 126, 37, .18);
  --ff-color-danger: #ed929e;
  --ff-color-danger-soft: rgba(187, 71, 86, .18);
  --bg: var(--ff-color-workspace);
  --surface: var(--ff-color-surface);
  --surface-soft: var(--ff-color-surface-subtle);
  --paper: var(--ff-color-surface);
  --paper-strong: var(--ff-color-surface-subtle);
  --ink: var(--ff-color-text);
  --ink-soft: var(--ff-color-text-soft);
  --muted: var(--ff-color-text-muted);
  --text-faint: var(--ff-color-text-muted);
  --line: var(--ff-color-border);
  --line-strong: var(--ff-color-border-strong);
  --primary: var(--ff-color-action);
  --primary-strong: var(--ff-color-action-hover);
  --primary-soft: var(--ff-color-action-soft);
  --accent: var(--ff-color-action);
  --accent-strong: var(--ff-color-action-hover);
  --accent-soft: var(--ff-color-action-soft);
  --link: var(--ff-color-action);
  --link-strong: var(--ff-color-action-hover);
  --success: var(--ff-color-protection);
  --success-soft: var(--ff-color-protection-soft);
  --warning: var(--ff-color-warning);
  --warning-soft: var(--ff-color-warning-soft);
  --danger: var(--ff-color-danger);
  --danger-soft: var(--ff-color-danger-soft);
  --decision-allow: var(--ff-color-protection);
  --decision-block: var(--ff-color-danger);
}

body {
  background: var(--ff-color-workspace);
  color: var(--ff-color-text);
  font-family: var(--ff-font-sans);
  font-size: 1rem;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-brand-title,
.brand {
  color: var(--ff-color-text);
  font-family: var(--ff-font-sans);
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 3vw, 2.35rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.12; }
h2 { font-size: 1.2rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
p { color: var(--ff-color-text-soft); }
.subtle,
.empty { color: var(--ff-color-text-muted) !important; }
.section-label,
.eyebrow,
.overview-head__eyebrow,
.overview-hero__label,
.overview-card__eyebrow {
  color: var(--ff-color-text-muted);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .095em;
  line-height: 1.35;
  text-transform: uppercase;
}

.lucide {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

/* Authentication keeps the form semantic while the artwork supplies the atmosphere. */
.login-shell {
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background-color: #082f3e;
  background-image: url('/static/images/portal-login/portal-login-scene-desktop.webp');
  background-position: center;
  background-size: cover;
}
.login-shell::before {
  display: block;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(4, 34, 45, .08) 0 22%, rgba(4, 34, 45, .34) 72%),
    linear-gradient(180deg, rgba(4, 31, 41, .16), rgba(4, 31, 41, .3));
}
.login-shell::after { display: none; }
.login-shell .ff-login-layout {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  gap: 16px;
}
.login-shell .ff-login-card {
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 254, 249, .97);
  padding: clamp(30px, 4vw, 42px);
  box-shadow: 0 28px 80px rgba(2, 25, 34, .36);
  backdrop-filter: blur(8px);
}
.ff-story-card {
  border: 1px solid var(--ff-color-border);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface);
  box-shadow: none;
  backdrop-filter: none;
}
.login-shell .ff-login-card::before,
.ff-story-card::before { display: none; }
.login-shell .ff-brand { align-items: center; gap: 12px; margin-bottom: 28px; }
.login-shell .ff-brand-logo { width: 46px; height: 46px; border-radius: 0; filter: drop-shadow(0 7px 12px rgba(7, 84, 47, .16)); }
.login-shell .ff-eyebrow { color: #176477; font-size: .75rem; }
.login-shell .ff-brand-name { color: #0c2b3b; font-size: 1.45rem; }
.login-shell .ff-login-title { margin: 0 0 10px; color: #0c2b3b; font-size: clamp(1.8rem, 3vw, 2.1rem); }
.login-shell .ff-login-copy { margin: 0 0 22px; color: #456371; }
.login-shell .ff-field { margin-bottom: 2px; }
.login-shell .ff-field input {
  min-height: 50px;
  border-color: #a8bdc0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(9, 42, 52, .04);
}
.login-shell .ff-field input:focus {
  border-color: #176f82;
  box-shadow: 0 0 0 4px rgba(23, 111, 130, .16);
}
.login-shell .ff-login-form { gap: 14px; }
.login-shell .ff-login-form > button[type="submit"] {
  min-height: 52px;
  border-color: #176f82;
  border-radius: 8px;
  background: linear-gradient(135deg, #12667a, #247f91);
  box-shadow: none;
  font-weight: 750;
}
.login-shell .ff-login-form > button[type="submit"]:hover {
  border-color: #0e5668;
  background: linear-gradient(135deg, #0e5668, #1c6f81);
}
.login-shell .ff-utility-links { gap: 8px 11px; margin-top: 26px; font-size: .82rem; }
.login-shell .ff-utility-links a { color: #176478; font-weight: 650; text-underline-offset: 3px; }
.ff-brand-logo { border-radius: var(--ff-radius-md); filter: none; }
.ff-login-notice,
.ff-story-benefit {
  border-color: var(--ff-color-border);
  border-radius: var(--ff-radius-md);
  background: var(--ff-color-surface-subtle);
  box-shadow: none;
}
.ff-notice-icon { border-radius: var(--ff-radius-md); }
.ff-field input { border-radius: var(--ff-radius-sm); background: var(--ff-color-surface); box-shadow: none; }
.ff-login-form > button[type="submit"] { box-shadow: none; }
.ff-story-card { min-height: 0; }

@media (max-width: 820px) {
  .login-shell {
    place-items: start center;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(190px, 23svh);
    background-image: url('/static/images/portal-login/portal-login-scene-mobile.webp');
    background-position: center bottom;
  }
  .login-shell::before {
    background: linear-gradient(180deg, rgba(4, 34, 45, .2), rgba(4, 34, 45, .08) 58%, rgba(4, 34, 45, .28));
  }
  .login-shell .ff-login-layout { width: min(500px, 100%); }
}

@media (max-width: 640px) {
  .login-shell {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(170px, 21svh);
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .login-shell .ff-login-card { border-radius: 14px; padding: 24px 22px; }
  .login-shell .ff-brand { align-items: center; gap: 10px; margin-bottom: 22px; }
  .login-shell .ff-brand-logo { width: 42px; height: 42px; }
  .login-shell .ff-brand-name { font-size: 1.3rem; }
  .login-shell .ff-login-title { font-size: 1.75rem; }
  .login-shell .ff-login-copy { font-size: .94rem; line-height: 1.5; }
  .login-shell .ff-utility-links { margin-top: 22px; }
}

.wrap { padding: 28px clamp(18px, 3vw, 46px) 88px; }
.portal-shell { grid-template-columns: 272px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
.portal-content { width: 100%; max-width: 1480px; margin-inline: auto; }
.portal-stack { gap: var(--ff-space-5); }

.portal-sidebar {
  --ff-color-text-muted: #b9c9c8;
  min-height: calc(100vh - 56px);
  border: 1px solid #17414c;
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-app);
  box-shadow: none;
}

.app-brand { gap: 12px; margin-bottom: 18px; padding: 0 7px 19px; }
.app-brand-logo { border-radius: 10px; box-shadow: none; }
.app-brand-title { color: #f3f8f7; font-size: 1rem; font-weight: 720; }
.app-brand-eyebrow { color: #9eb4b6; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.portal-sidebar label,
.portal-sidebar-domain { color: #e8f1ef; }
.portal-sidebar select {
  min-height: 44px;
  border-color: rgba(221, 240, 235, .22);
  border-radius: var(--ff-radius-sm);
  background: #123944;
}
.portal-nav { gap: 22px; margin-top: 26px; }
.portal-nav .nav-section { gap: 3px; }
.nav-section-title { margin: 0 9px 7px; color: #8fa8ac; font-size: .68rem; letter-spacing: .13em; }
.portal-nav a.portal-nav__link,
.portal-sidebar-bottom .portal-nav__link {
  min-height: 44px;
  gap: 11px;
  border-radius: var(--ff-radius-sm);
  color: #e8f1ef;
  font-size: .875rem;
  font-weight: 590;
}
.portal-nav a.portal-nav__link:hover,
.portal-sidebar-bottom .portal-nav__link:hover { border-color: rgba(228, 244, 240, .14); background: rgba(228, 244, 240, .075); }
.portal-nav a.portal-nav__link.active {
  border-color: rgba(139, 214, 223, .24);
  background: #1d7180;
  color: #fff;
}
.ff-icon-badge { border-radius: var(--ff-radius-sm); }
.ff-icon-badge--nav { width: 30px; height: 30px; border-radius: 8px; }
.ff-icon-badge--nav svg { width: 17px; height: 17px; }
.portal-sidebar-bottom { margin-top: 26px; padding-top: 17px; }
.theme-links { color: #a9bcbd; font-size: .76rem; }
.theme-links a {
  color: #d5e4e1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.card,
.overview-card,
.privacy-choice-card,
.connected-forum-card {
  border: 1px solid var(--ff-color-border);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface);
  box-shadow: none;
}
.card { padding: clamp(18px, 2vw, 24px); }
.subcard {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.list > .subcard + .subcard,
.event-list > .subcard + .subcard { border-top: 1px solid var(--ff-color-border); }

.portal-page-head.card {
  display: flex;
  min-height: 0;
  align-items: flex-end;
  gap: var(--ff-space-5);
  border: 0;
  border-bottom: 1px solid var(--ff-color-border);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 22px;
}
.portal-page-head--with-badge > .ff-icon-badge { display: none; }
.portal-page-head__main { flex: 1 1 auto; min-width: 0; }
.portal-page-head h1 { margin: 5px 0 6px; }
.portal-page-head .subtle { max-width: 70ch; margin: 0; font-size: .95rem; }
.portal-page-head__actions { justify-content: flex-end; }

button,
.btn,
a.btn,
input,
select,
textarea {
  border-radius: var(--ff-radius-sm);
}
button,
.btn,
a.btn {
  min-height: var(--ff-control-height);
  padding-inline: 15px;
  font-size: .875rem;
  font-weight: 680;
  transition: background-color var(--ff-transition), border-color var(--ff-transition), color var(--ff-transition), transform var(--ff-transition);
}
button:not(.alt):not(.link):not(.danger),
.btn:not(.alt):not(.link):not(.danger) {
  border-color: var(--ff-color-action);
  background: var(--ff-color-action);
  color: var(--ff-color-on-action);
}
button:not(.alt):not(.link):not(.danger):hover,
.btn:not(.alt):not(.link):not(.danger):hover { border-color: var(--ff-color-action-hover); background: var(--ff-color-action-hover); }
.btn.alt,
button.alt {
  border-color: var(--ff-color-border-strong);
  background: var(--ff-color-surface);
  color: var(--ff-color-text);
}
.btn.alt:hover,
button.alt:hover { border-color: var(--ff-color-action); background: var(--ff-color-action-soft); color: var(--ff-color-action-hover); }
.btn.link,
button.link {
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: var(--ff-color-action);
  padding-inline: 8px;
}
.btn.link:hover,
button.link:hover { background: var(--ff-color-action-soft); color: var(--ff-color-action-hover); }
.btn.danger,
button.danger { border-color: var(--ff-color-danger); background: var(--ff-color-danger); color: #fff; }
input:not([type="checkbox"]):not([type="radio"]),
select { min-height: var(--ff-control-height); }
input,
select,
textarea { border-color: var(--ff-color-border-strong); background: var(--ff-color-surface); color: var(--ff-color-text); }
input:focus,
select:focus,
textarea:focus { border-color: var(--ff-color-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-color-action) 15%, transparent); }
label,
.filter-grid label > span,
.portal-filter-bar label > span { color: var(--ff-color-text); font-size: .84rem; font-weight: 680; }

.ff-badge,
.overview-health-badge,
.moderation-state,
.pending-pill {
  min-height: 26px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}
.status-with-icon,
.decision-history-table__outcome,
.overview-decision-row__outcome,
.overview-health-badge,
.moderation-state { display: inline-flex; align-items: center; gap: 6px; }
.status-with-icon .lucide,
.decision-history-table__outcome .lucide,
.overview-decision-row__outcome .lucide,
.overview-health-badge .lucide,
.moderation-state .lucide { width: 15px; height: 15px; }
.ff-badge--allowed { border-color: color-mix(in srgb, var(--ff-color-protection) 25%, var(--ff-color-border)); background: var(--ff-color-protection-soft); color: var(--ff-color-protection-strong); }
.ff-badge--blocked { border-color: color-mix(in srgb, var(--ff-color-danger) 25%, var(--ff-color-border)); background: var(--ff-color-danger-soft); color: var(--ff-color-danger); }
.ff-badge--review { border-color: color-mix(in srgb, var(--ff-color-warning) 25%, var(--ff-color-border)); background: var(--ff-color-warning-soft); color: var(--ff-color-warning); }

.overview-head {
  align-items: flex-end;
  margin-bottom: var(--ff-space-5);
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--ff-color-border);
}
.overview-head__eyebrow { position: static; margin: 0 0 5px; }
.overview-head h1 { color: var(--ff-color-text); font-size: clamp(1.85rem, 3vw, 2.35rem); }
.overview-head__meta { margin-top: 5px !important; color: var(--ff-color-text-muted); font-size: .93rem; }
.overview-head__actions { justify-content: flex-end; }
.overview-head__actions .subtle { font-size: .78rem; }

.overview-hero-row { grid-template-columns: minmax(0, 1.75fr) minmax(260px, .65fr); gap: var(--ff-space-4); }
.overview-hero {
  position: relative;
  isolation: isolate;
  min-height: 252px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ff-color-protection) 35%, var(--ff-color-border));
  padding: clamp(24px, 3vw, 34px);
  background: var(--ff-color-surface);
}
.overview-hero::before {
  position: absolute;
  z-index: -2;
  width: 350px;
  height: 350px;
  right: -95px;
  top: -96px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 42px, color-mix(in srgb, var(--ff-color-protection) 11%, transparent) 43px 44px);
  content: "";
}
.overview-hero::after {
  position: absolute;
  z-index: -1;
  width: 106px;
  height: 106px;
  right: 52px;
  top: 54px;
  background: url("/static/images/forumfortress-shield.svg") center / contain no-repeat;
  content: "";
  filter: saturate(.9);
  opacity: .16;
}
.overview-hero > * { position: relative; z-index: 1; max-width: calc(100% - 92px); }
.overview-hero__top { display: block; }
.overview-hero__top .overview-health-badge { position: absolute; top: -2px; right: -90px; }
.overview-hero h2 { margin-top: 7px; font-size: clamp(1.75rem, 3.8vw, 2.65rem); letter-spacing: -.045em; }
.overview-hero__summary { max-width: 58ch; margin-top: 8px; color: var(--ff-color-text-soft); font-size: 1rem; }
.overview-health-badge { padding-inline: 10px; }
.overview-health-badge--ok { color: var(--ff-color-protection-strong); }
.overview-health-badge--warning { color: var(--ff-color-warning); }
.overview-health-badge--critical { color: var(--ff-color-danger); }
.overview-hero__facts { gap: 10px 24px; margin-top: 24px; border-top: 1px solid var(--ff-color-border); padding-top: 16px; }
.overview-hero__fact { display: grid; gap: 2px; color: var(--ff-color-text-muted); font-size: .78rem; }
.overview-hero__fact strong { color: var(--ff-color-text); font-size: .86rem; }
.overview-hero__actions { margin-top: 18px; }

.protection-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--ff-space-4);
  border: 1px solid var(--ff-color-border);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface);
}
.protection-coverage__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-left: 1px solid var(--ff-color-border);
}
.protection-coverage__item:first-child { border-left: 0; }
.protection-coverage__icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 8px; background: var(--ff-color-protection-soft); color: var(--ff-color-protection); }
.protection-coverage__icon .lucide { width: 16px; height: 16px; }
.protection-coverage__item strong,
.protection-coverage__item small { display: block; }
.protection-coverage__item strong { color: var(--ff-color-text); font-size: .82rem; }
.protection-coverage__item small { margin-top: 1px; color: var(--ff-color-protection); font-size: .72rem; font-weight: 670; }

.overview-attack { align-content: start; min-height: 252px; padding: 22px; background: var(--ff-color-surface-subtle); }
.overview-attack h2 { margin-top: 5px; }
.overview-attack p { color: var(--ff-color-text-soft); }
.overview-attack .btn,
.overview-attack form { width: 100%; }
.overview-attack .btn { justify-content: center; margin-top: auto; }

.overview-summary-strip { border-color: var(--ff-color-border); border-radius: var(--ff-radius-lg); background: var(--ff-color-surface); box-shadow: none; }
.overview-summary-metric { min-height: 126px; padding: 18px 20px; border-color: var(--ff-color-border); }
.overview-summary-metric__label { color: var(--ff-color-text-muted); font-size: .78rem; }
.overview-summary-metric__value { margin-top: 7px; color: var(--ff-color-text); font-size: clamp(1.65rem, 2.8vw, 2.2rem); }
.overview-summary-metric__meta { color: var(--ff-color-text-muted); font-size: .74rem; }
.overview-progress { height: 5px; background: var(--ff-color-surface-strong); }
.overview-progress span { background: var(--ff-color-action); }

.overview-body-grid { grid-template-columns: minmax(0, 1.55fr) minmax(286px, .62fr); gap: var(--ff-space-4); }
.overview-main-column,
.overview-rail { gap: var(--ff-space-4); }
.overview-card { padding: 21px; }
.overview-card__head { margin-bottom: 14px; }
.overview-card__head h2 { font-size: 1.08rem; }
.overview-activity-card__legend { color: var(--ff-color-text-muted); }
.overview-activity-card__legend i { background: var(--ff-color-protection); }
.overview-activity-card__legend i.is-blocked,
.overview-activity-card__legend i.overview-legend-dot--blocked { border-color: var(--ff-color-danger); }
.overview-activity-chart .portal-trend-svg { max-height: 218px; }
.overview-decision-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 15px 0; }
.overview-decision-row__outcome,
.overview-decision-row__event,
.overview-decision-row__forum { min-height: 24px; padding: 3px 8px; font-size: .72rem; }
.overview-decision-row__outcome { color: var(--ff-color-danger); }
.overview-decision-row__outcome.is-allowed { color: var(--ff-color-protection-strong); }
.overview-decision-row__subject { margin-top: 8px; font-size: .9rem; }
.overview-decision-row__reason { margin-top: 4px; color: var(--ff-color-text-soft); font-size: .8rem; }
.overview-decision-row__reference { color: var(--ff-color-text-muted); }
.overview-decision-row__time { color: var(--ff-color-text-muted); font-size: .75rem; }
.overview-support-panel--healthy { border-color: color-mix(in srgb, var(--ff-color-protection) 28%, var(--ff-color-border)); background: var(--ff-color-protection-soft); }
.overview-healthy-line__icon { color: var(--ff-color-protection); }
.overview-forum-row__dot { display: none; }
.overview-forum-row { grid-template-columns: minmax(0, 1fr) auto; }

.attention-item { border: 0; border-left: 3px solid var(--ff-color-warning); border-radius: var(--ff-radius-sm); background: var(--ff-color-surface-subtle); box-shadow: none; }
.attention-item--critical { border-left-color: var(--ff-color-danger); }
.attention-item--info { border-left-color: var(--ff-color-information); }
.attention-item__severity { background: transparent; color: var(--ff-color-warning); padding: 0; text-transform: uppercase; }
.attention-item--critical .attention-item__severity { background: transparent; color: var(--ff-color-danger); }
.attention-item--info .attention-item__severity { background: transparent; color: var(--ff-color-information); }

.filter-grid,
.portal-filter-bar,
.insights-control-grid,
.insights-filter-form {
  border: 1px solid var(--ff-color-border);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface-subtle);
  padding: 14px;
}
.reports-layout .filter-grid--reports { background: var(--ff-color-surface-subtle); }
.portal-table-scroll { border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-md); }
table { color: var(--ff-color-text-soft); font-size: .82rem; }
table th { color: var(--ff-color-text-muted); font-weight: 700; }
table th,
table td { border-color: var(--ff-color-border); }
.decision-history-table__outcome-icon { width: 25px; height: 25px; border-radius: 8px; }
.decision-history-table tbody tr:hover { background: color-mix(in srgb, var(--ff-color-action-soft) 40%, transparent); }
.pagination { border-top-color: var(--ff-color-border); }

.moderation-workspace-tabs { gap: 2px; width: max-content; border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-sm); background: var(--ff-color-surface-subtle); padding: 3px; }
.moderation-workspace-tabs a { min-height: 35px; border: 0; border-radius: 6px; background: transparent; }
.moderation-workspace-tabs a[aria-current="page"] { border: 0; background: var(--ff-color-surface); box-shadow: 0 1px 2px rgba(10, 40, 48, .08); }
.moderation-state::before { display: none; content: none; }
.moderation-state--pending { color: var(--ff-color-warning); }
.moderation-state--applied { color: var(--ff-color-protection); }
.moderation-state--failed,
.moderation-state--disconnected { color: var(--ff-color-danger); }
.portal-empty-state {
  border: 1px dashed var(--ff-color-border-strong);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface-subtle);
  padding: 28px;
}
.portal-empty-state__icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 12px; border-radius: 10px; background: var(--ff-color-protection-soft); color: var(--ff-color-protection); }
.portal-empty-state__icon .lucide { width: 22px; height: 22px; }

.insights-metrics { gap: 0; border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-lg); overflow: hidden; }
.insights-metric { border: 0; border-left: 1px solid var(--ff-color-border); border-radius: 0; background: var(--ff-color-surface); }
.insights-metric:first-child { border-left: 0; }
.insights-pattern + .insights-pattern { border-top-color: var(--ff-color-border); }
.portal-trend-svg line { stroke: var(--ff-color-border); }
.portal-trend-swatch--allowed { background: var(--ff-color-protection); }
.portal-trend-swatch--blocked { background: var(--ff-color-danger); }

.portal-checker-omnibox { border-color: var(--ff-color-action); border-radius: var(--ff-radius-lg); background: var(--ff-color-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ff-color-action) 8%, transparent); }
.portal-checker-omnibox > .lucide { color: var(--ff-color-action); }

.connected-forum-grid { gap: var(--ff-space-4); }
.connected-forum-card { padding: 0; overflow: hidden; }
.connected-forum-card__head { padding: 20px 22px 17px; border-bottom: 1px solid var(--ff-color-border); background: var(--ff-color-surface); }
.connected-forum-card__head h2 { margin-top: 4px; font-size: 1.2rem; }
.connected-forum-card__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--ff-color-border);
  background: var(--ff-color-surface-subtle);
}
.connected-forum-card__summary > div { padding: 14px 18px; border-left: 1px solid var(--ff-color-border); }
.connected-forum-card__summary > div:first-child { border-left: 0; }
.connected-forum-card__summary span,
.connected-forum-card__summary strong { display: block; }
.connected-forum-card__summary span { color: var(--ff-color-text-muted); font-size: .72rem; font-weight: 650; }
.connected-forum-card__summary strong { margin-top: 3px; color: var(--ff-color-text); font-size: .84rem; }
.connected-forum-card__coverage { padding: 16px 22px; }
.connected-forum-card__coverage .protection-coverage { margin: 0; border: 0; background: transparent; }
.connected-forum-card__coverage .protection-coverage__item { padding: 8px 12px; }
.connected-forum-card__details { margin: 0 22px; border-top: 1px solid var(--ff-color-border); }
.connected-forum-card__details summary { padding: 13px 0; color: var(--ff-color-action); cursor: pointer; font-size: .82rem; font-weight: 700; }
.connected-forum-card .connected-forum-health { margin: 0; padding: 0 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.connected-forum-card .connected-forum-health > div { border: 0; border-top: 1px solid var(--ff-color-border); border-radius: 0; background: transparent; padding: 10px 0; }
.connected-forum-card__footer { display: flex; flex-wrap: wrap; gap: 9px; padding: 15px 22px 18px; border-top: 1px solid var(--ff-color-border); }
.connected-forum-card__footer form { display: inline-flex; }

.feature-grid > .card { min-height: 100%; }
.plan-current { border-color: color-mix(in srgb, var(--ff-color-action) 30%, var(--ff-color-border)); }
.plan-current > h2 { margin: 5px 0 10px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.plan-comparison-grid { gap: var(--ff-space-3); }
.plan-comparison-card { box-shadow: none; }
.plan-comparison-card.is-recommended { border-color: var(--ff-color-action); background: color-mix(in srgb, var(--ff-color-action-soft) 32%, var(--ff-color-surface)); }
#security-history-heading + * { margin-top: 0; }
.security-activity-list { position: relative; display: grid; }
.security-activity-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 13px 0; border-top: 1px solid var(--ff-color-border); }
.security-activity-item:first-child { border-top: 0; }
.security-activity-item__icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--ff-color-action-soft); color: var(--ff-color-action); }
.security-activity-item__icon .lucide { width: 15px; height: 15px; }
.security-activity-item__time { color: var(--ff-color-text-muted); font-size: .75rem; white-space: nowrap; }

.support-channel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ff-color-border);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface);
}
.support-channel-grid > .card { min-height: 100%; border: 0; border-left: 1px solid var(--ff-color-border); border-radius: 0; }
.support-channel-grid > .card:first-child { border-left: 0; }
.support-channel-grid > .card::before { display: block; margin-bottom: 12px; color: var(--ff-color-action); font-size: .75rem; font-weight: 780; letter-spacing: .08em; }
.support-channel-grid > .card:nth-child(1)::before { content: "01 · START HERE"; }
.support-channel-grid > .card:nth-child(2)::before { content: "02 · CALL"; }
.support-channel-grid > .card:nth-child(3)::before { content: "03 · TICKET"; }
.support-channel-grid > .card:nth-child(4)::before { content: "04 · HUMAN SUPPORT"; }
.support-channel-grid > .card .section-label { display: none; }

.privacy-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-lg); overflow: hidden; }
.privacy-status-grid > article { border: 0; border-left: 1px solid var(--ff-color-border); border-radius: 0; background: var(--ff-color-surface); padding: 16px; }
.privacy-status-grid > article:first-child { border-left: 0; }
.privacy-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ff-space-3); }
.privacy-action { display: flex; min-height: 94px; align-items: flex-start; gap: 12px; border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-md); padding: 15px; color: var(--ff-color-text); text-decoration: none; }
.privacy-action:hover { border-color: var(--ff-color-action); background: var(--ff-color-action-soft); text-decoration: none; }
.privacy-action .lucide { margin-top: 2px; color: var(--ff-color-action); }
.privacy-action strong,
.privacy-action span { display: block; }
.privacy-action span { margin-top: 3px; color: var(--ff-color-text-muted); font-size: .78rem; }
.privacy-danger-zone { border-color: color-mix(in srgb, var(--ff-color-danger) 30%, var(--ff-color-border)); background: var(--ff-color-surface); }

.portal-chat-panel { border-color: color-mix(in srgb, var(--ff-color-action) 40%, var(--ff-color-border)); box-shadow: var(--shadow-lg); }
.portal-chat-launcher { box-shadow: 0 13px 28px rgba(7, 44, 54, .22); }
.portal-chat-launcher__icon .lucide,
.portal-chat-panel__actions .lucide { width: 18px; height: 18px; }

@media (max-width: 1240px) {
  .support-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-channel-grid > .card:nth-child(3) { border-left: 0; border-top: 1px solid var(--ff-color-border); }
  .support-channel-grid > .card:nth-child(4) { border-top: 1px solid var(--ff-color-border); }
}

@media (max-width: 1100px) {
  .portal-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 24px; }
  .overview-hero-row,
  .overview-body-grid { grid-template-columns: 1fr; }
  .overview-attack { min-height: 0; }
  .protection-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .protection-coverage__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--ff-color-border); }
  .protection-coverage__item:nth-child(4) { border-top: 1px solid var(--ff-color-border); }
}

@media (max-width: 940px) {
  .wrap { padding: 16px 16px 86px; }
  .portal-shell {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .portal-content { width: 100%; min-width: 0; }
  .portal-mobile-topbar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 8px;
    border-radius: var(--ff-radius-md);
    box-shadow: none;
  }
  .portal-mobile-topbar .portal-nav-toggle {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--ff-radius-sm);
    background: var(--ff-color-action);
    color: var(--ff-color-on-action);
  }
  .portal-mobile-topbar .portal-forum-switch--inline {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .portal-mobile-topbar .portal-forum-switch--inline label {
    margin: 0;
    color: var(--ff-color-text-muted);
    font-size: .72rem;
    line-height: 1;
    white-space: nowrap;
  }
  .portal-mobile-topbar .portal-forum-switch--inline select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    border-radius: var(--ff-radius-sm);
    font-size: .875rem;
  }
  .portal-mobile-topbar h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ff-color-text);
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .portal-sidebar { border-radius: 0 var(--ff-radius-lg) var(--ff-radius-lg) 0; }
  .portal-page-head.card { align-items: flex-start; flex-direction: column; }
  .portal-page-head__actions { width: 100%; justify-content: flex-start; }
  .insights-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-metric:nth-child(odd) { border-left: 0; }
  .insights-metric:nth-child(n + 3) { border-top: 1px solid var(--ff-color-border); }
}

@media (max-width: 700px) {
  .overview-head { align-items: flex-start; }
  .overview-head__actions { width: 100%; justify-content: flex-start; }
  .overview-hero { min-height: 0; }
  .overview-hero::before { right: -180px; opacity: .7; }
  .overview-hero::after { width: 78px; height: 78px; right: 18px; top: 22px; }
  .overview-hero > * { max-width: 100%; }
  .overview-hero__top .overview-health-badge { position: static; margin-top: 10px; }
  .overview-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-summary-metric:nth-child(2) { border-right: 0; }
  .overview-summary-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--ff-color-border); }
  .connected-forum-card__summary,
  .privacy-actions-grid { grid-template-columns: 1fr; }
  .connected-forum-card__summary > div { border-left: 0; border-top: 1px solid var(--ff-color-border); }
  .connected-forum-card__summary > div:first-child { border-top: 0; }
  .support-channel-grid { grid-template-columns: 1fr; }
  .support-channel-grid > .card { border-left: 0; border-top: 1px solid var(--ff-color-border); }
  .support-channel-grid > .card:first-child { border-top: 0; }
  .privacy-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-status-grid > article:nth-child(3) { border-left: 0; border-top: 1px solid var(--ff-color-border); }
  .privacy-status-grid > article:nth-child(4) { border-top: 1px solid var(--ff-color-border); }
}

@media (max-width: 520px) {
  .wrap {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .overview-summary-strip,
  .protection-coverage,
  .privacy-status-grid { grid-template-columns: 1fr; }
  .overview-summary-metric,
  .protection-coverage__item,
  .privacy-status-grid > article { border: 0; border-top: 1px solid var(--ff-color-border); }
  .overview-summary-metric:first-child,
  .protection-coverage__item:first-child,
  .privacy-status-grid > article:first-child { border-top: 0; }
  .security-activity-item { grid-template-columns: 28px minmax(0, 1fr); }
  .security-activity-item__time { grid-column: 2; white-space: normal; }
}