/*
 * Football Talent — studio redesign
 * A spacious football-operations interface: Transfermarkt-like information
 * architecture, Football Talent's own identity, palette and interaction model.
 * This file is intentionally loaded last and is the single visual authority.
 */

:root {
  --ft-navy-950: #000b1d;
  --ft-navy-900: #00193f;
  --ft-navy-800: #062d5b;
  --ft-blue: #1f6fba;
  --ft-sky: #228fbf;
  --ft-cyan: #148fa3;
  --ft-green: #17825c;
  --ft-gold: #c88712;
  --ft-violet: #7154b3;
  --ft-red: #b01f16;
  --ft-ink: #152238;
  --ft-muted: #68758a;
  --ft-canvas: #edf2f7;
  --ft-panel: #fff;
  --ft-soft: #f6f8fb;
  --ft-line: #d7e0ea;
  --ft-radius-sm: 10px;
  --ft-radius: 15px;
  --ft-radius-lg: 20px;
  --ft-shadow: 0 8px 24px rgba(0, 25, 63, .075);
  --ft-shadow-hover: 0 16px 38px rgba(0, 25, 63, .13);
  --ft-content: 1240px;
  --ft-header-height: 76px;
  --ft-nav-height: 52px;
}

/* Internal workspaces: operational completeness without dashboard clutter. */
.admin-workspace .panel-tabs button[data-admin-panel="clubs"] {
  --panel-accent: #0f8f82;
}

.club-operations-grid {
  align-items: start;
}

.club-operation-card,
.expert-private-note-card {
  border-inline-start: 4px solid var(--card-tone, var(--ui-blue, #2672c9));
}

.club-operation-card .admin-kv.compact {
  grid-template-columns: max-content minmax(0, 1fr);
}

.technical-capacity-detail > .capacity-analysis-grid {
  margin-top: 14px;
}

.expert-private-notes > .admin-decision-box {
  margin-block: 14px;
}

@media (max-width: 760px) {
  .club-operations-grid {
    grid-template-columns: 1fr;
  }

  .club-operation-card .admin-kv.compact {
    grid-template-columns: 1fr;
  }
}

html.light {
  --bg: var(--ft-canvas);
  --bg-2: #f8fafc;
  --surface: var(--ft-panel);
  --surface-2: var(--ft-soft);
  --surface-strong: #fff;
  --text: var(--ft-ink);
  --muted: var(--ft-muted);
  --line: var(--ft-line);
  --brand: var(--ft-blue);
  --brand-2: var(--ft-navy-800);
  --accent: var(--ft-blue);
  --blue: var(--ft-blue);
  --gold: var(--ft-gold);
  --danger: var(--ft-red);
  --ui-panel: #fff;
  --ui-panel-solid: #fff;
  --ui-soft: var(--ft-soft);
  --ui-canvas: var(--ft-canvas);
  --ui-canvas-2: #f8fafc;
}

html:not(.light) {
  --ft-ink: #edf4fb;
  --ft-muted: #aebdce;
  --ft-canvas: #071426;
  --ft-panel: #0d2037;
  --ft-soft: #122a45;
  --ft-line: #29435f;
  --bg: var(--ft-canvas);
  --bg-2: #0a1a2e;
  --surface: var(--ft-panel);
  --surface-2: var(--ft-soft);
  --surface-strong: #102740;
  --text: var(--ft-ink);
  --muted: var(--ft-muted);
  --line: var(--ft-line);
  --brand: #58a3e0;
  --brand-2: #87bce6;
  --accent: #75b8ec;
  --blue: #75b8ec;
  --gold: #efbd52;
  --danger: #ef7770;
  --ui-panel: var(--ft-panel);
  --ui-panel-solid: var(--ft-panel);
  --ui-soft: var(--ft-soft);
  --ui-canvas: var(--ft-canvas);
  --ui-canvas-2: #0a1a2e;
  --ft-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  --ft-shadow-hover: 0 18px 44px rgba(0, 0, 0, .34);
}

html {
  scroll-padding-top: calc(var(--ft-header-height) + var(--ft-nav-height) + 16px);
}

body {
  color: var(--text) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 82%, transparent), var(--bg)) !important;
  font-family: IRANSans, Vazirmatn, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

body::before {
  display: none !important;
}

/* --- Portal masthead ----------------------------------------------------- */
.topbar,
.auth-topbar,
.document-brandbar {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 90;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--ft-header-height) !important;
  height: var(--ft-header-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 0 !important;
  color: #fff !important;
  background:
    linear-gradient(108deg, var(--ft-navy-950), var(--ft-navy-900) 54%, var(--ft-navy-800)) !important;
  box-shadow: 0 5px 22px rgba(0, 16, 42, .24) !important;
  backdrop-filter: none !important;
}

.topbar::after,
.auth-topbar::after,
.document-brandbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ft-blue) 0 34%, var(--ft-cyan) 34% 58%, var(--ft-green) 58% 78%, var(--ft-gold) 78% 92%, var(--ft-red) 92%);
}

.topbar-inner,
.auth-topbar,
.document-brandbar {
  padding-inline: max(16px, calc((100% - var(--ft-content)) / 2)) !important;
}

.topbar-inner {
  width: 100% !important;
  max-width: var(--ft-content) !important;
  min-height: var(--ft-header-height) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

.topbar .brand,
.auth-brand,
.document-brandbar .brand {
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: 62px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar .brand-logo,
.auth-brand-logo,
.document-brand-logo,
html:not(.light) :where(.topbar .brand-logo, .auth-brand-logo, .document-brand-logo) {
  display: block !important;
  width: 172px !important;
  height: 59px !important;
  padding: 3px 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

:where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-light {
  display: none !important;
}

:where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-dark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.topbar-actions,
.auth-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.topbar-identity {
  display: grid;
  gap: 0;
  padding-inline-end: 14px;
  border-inline-end: 1px solid rgba(255, 255, 255, .18);
  text-align: start;
}

.topbar-identity strong { color: #fff; font-size: 13px; font-weight: 900; }
.topbar-identity small { color: #b8cce1; font-size: 10px; font-weight: 600; }

.topbar-account,
.topbar .icon-btn,
.auth-topbar .icon-button {
  min-width: 43px !important;
  min-height: 43px !important;
  height: 43px !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: none !important;
}

.topbar-account:hover,
.topbar .icon-btn:hover,
.auth-topbar .icon-button:hover {
  border-color: rgba(255, 255, 255, .7) !important;
  background: rgba(255, 255, 255, .15) !important;
  transform: translateY(-1px);
}

/* Role-aware topic navigation, in document flow: it never covers a form. */
nav.bottom-nav {
  position: sticky !important;
  inset: auto 0 auto !important;
  top: var(--ft-header-height) !important;
  z-index: 80 !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--ft-nav-height) !important;
  height: var(--ft-nav-height) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 max(12px, calc((100% - var(--ft-content)) / 2)) !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 11, 29, .28) !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: #062d5b !important;
  box-shadow: 0 4px 14px rgba(0, 25, 63, .13) !important;
  transform: none !important;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

nav.bottom-nav::-webkit-scrollbar { display: none; }
nav.bottom-nav .bottom-nav-brand { display: none !important; }

nav.bottom-nav > button:not(.bottom-nav-brand),
nav.bottom-nav > a.guest-nav-link {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: var(--ft-nav-height) !important;
  height: var(--ft-nav-height) !important;
  flex: 0 0 auto !important;
  grid-template: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-inline-start: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 0 !important;
  color: #e7f0f8 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  scroll-snap-align: start;
}

nav.bottom-nav > :where(button, a) svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
  color: #9ec4e2 !important;
  background: transparent !important;
}

nav.bottom-nav > :where(button, a) small {
  max-width: none !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

nav.bottom-nav > :where(button, a):hover,
nav.bottom-nav > button.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .105) !important;
  transform: none !important;
}

nav.bottom-nav > button.active::after,
nav.bottom-nav > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #fff;
}

nav.bottom-nav > button.active svg { color: #fff !important; transform: none !important; }

/* --- Main canvas and hierarchy ------------------------------------------ */
.app-shell { padding: 0 0 30px !important; overflow: visible !important; }

.hero,
.content,
.user-journey-status,
.legal-shell,
.form-directory-shell,
.site-footer-main,
.site-footer-copy {
  width: min(calc(100% - 32px), var(--ft-content)) !important;
  max-width: var(--ft-content) !important;
  margin-inline: auto !important;
}

.content { padding: 0 !important; margin-block: 18px !important; }
.content > * + * { margin-top: 16px !important; }

:where(.surface, .admin-page, .admin-command, .profile-card, .dossier-command-card,
  .legal-page, .auth-layout, .form-directory-section, .form-directory-note,
  .search-workbench, .admin-analysis-panel, .home-quick-actions) {
  border: 1px solid var(--line) !important;
  border-radius: var(--ft-radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--ft-shadow) !important;
}

:where(.surface, .admin-page, .profile-card, .dossier-command-card,
  .form-directory-section, .search-workbench, .admin-analysis-panel) {
  padding: clamp(16px, 2vw, 24px) !important;
}

/* Each workspace gets one stable accent, so colour communicates purpose. */
[data-view="profile"] > :where(.surface, .profile-card) { border-top: 4px solid var(--ft-blue) !important; }
[data-view="post"] > .surface { border-top: 4px solid var(--ft-green) !important; }
[data-view="search"] > :where(.surface, .search-workbench) { border-top: 4px solid var(--ft-cyan) !important; }
[data-view="my-ads"] > .surface { border-top: 4px solid var(--ft-gold) !important; }
[data-view="expert-subscription"] > .surface { border-top: 4px solid var(--ft-violet) !important; }
[data-view="support"] > .surface { border-top: 4px solid var(--ft-blue) !important; }
[data-view="workbench"] > :where(.surface, .admin-page) { border-top: 4px solid var(--ft-green) !important; }
[data-view="admin"] > :where(.surface, .admin-page) { border-top: 4px solid var(--ft-navy-800) !important; }

:where(.section-head, .search-head, .admin-command-head, .profile-action-head,
  .dossier-record-head, .media-panel-head) {
  min-width: 0 !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-inline-start: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

:where(.section-head, .search-head, .admin-command-head) h2,
:where(.surface, .admin-page) > h2 {
  color: var(--text) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em;
}

.section-kicker,
.support-eyebrow {
  min-height: 27px !important;
  padding: 3px 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ft-navy-800) !important;
  background: #e4eff8 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html:not(.light) :where(.section-kicker, .support-eyebrow) {
  color: #b9d9f2 !important;
  background: rgba(88, 163, 224, .13) !important;
}

.title-with-icon > :where(svg, .lucide),
.section-head h2 > :where(svg, .lucide) {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  padding: 8px !important;
  border: 1px solid #c9daea !important;
  border-radius: 9px !important;
  color: var(--ft-navy-800) !important;
  background: #edf4fa !important;
}

/* --- Hero: copy sits on the pitch, never inside a generic card ---------- */
.hero {
  position: relative !important;
  min-height: 430px !important;
  height: min(52vw, 500px) !important;
  margin-top: 18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--ft-radius-lg) !important;
  background: var(--ft-navy-900) !important;
  box-shadow: 0 20px 45px rgba(0, 25, 63, .2) !important;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ft-blue), var(--ft-cyan), var(--ft-green), var(--ft-gold));
}

.hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.hero-shade,
html:not(.light) .hero-shade {
  background:
    linear-gradient(90deg, rgba(0, 11, 29, .06) 0 32%, rgba(0, 25, 63, .5) 61%, rgba(0, 11, 29, .92) 100%),
    linear-gradient(0deg, rgba(0, 11, 29, .28), transparent 56%) !important;
}

.hero-content {
  inset: 0 !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  min-height: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: clamp(26px, 5vw, 64px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: start !important;
}

.hero .eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 33px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(0, 25, 63, .25) !important;
  backdrop-filter: blur(6px);
  font-size: 12px !important;
  font-weight: 800 !important;
}

.hero-content h1 {
  margin: 2px 0 0 !important;
  color: #fff !important;
  font-size: clamp(2.65rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .38) !important;
}

.hero-copy,
html:not(.light) .hero-copy {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #f4f8fc !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(14px, 1.5vw, 18px) !important;
  font-weight: 650 !important;
  line-height: 2 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .5) !important;
}

.hero-actions { justify-content: flex-start !important; margin-top: 8px !important; }
.hero-actions .ghost-btn {
  border-color: rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  background: rgba(0, 25, 63, .48) !important;
  backdrop-filter: blur(8px);
}

/* --- Colour encodes content type ---------------------------------------- */
.metric-row { gap: 14px !important; }

.metric {
  --metric-tone: var(--ft-blue);
  position: relative;
  min-height: 104px !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--metric-tone) 22%, var(--line)) !important;
  border-radius: var(--ft-radius) !important;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--metric-tone) 9%, var(--surface)), var(--surface) 70%) !important;
  box-shadow: var(--ft-shadow) !important;
}

.metric::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 4px;
  background: var(--metric-tone);
}

.metric-green { --metric-tone: var(--ft-green); }
.metric-blue { --metric-tone: var(--ft-blue); }
.metric-gold { --metric-tone: var(--ft-gold); }
.metric-red { --metric-tone: var(--ft-red); }

.metric-icon,
.dossier-metric-icon {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  place-items: center !important;
  padding: 11px !important;
  border: 1px solid color-mix(in srgb, var(--metric-tone) 25%, transparent) !important;
  border-radius: 12px !important;
  color: var(--metric-tone) !important;
  background: color-mix(in srgb, var(--metric-tone) 10%, var(--surface)) !important;
}

.home-lanes { gap: 11px !important; }
.home-lane {
  --lane-tone: var(--ft-blue);
  min-height: 82px !important;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--lane-tone) 21%, var(--line)) !important;
  border-radius: 13px !important;
  color: var(--text) !important;
  background: linear-gradient(115deg, color-mix(in srgb, var(--lane-tone) 8%, var(--surface)), var(--surface)) !important;
  box-shadow: none !important;
}

.home-lane.lane-blue { --lane-tone: var(--ft-blue); }
.home-lane.lane-green { --lane-tone: var(--ft-green); }
.home-lane.lane-gold { --lane-tone: var(--ft-gold); }
.home-lane.lane-coral { --lane-tone: var(--ft-violet); }

.home-lane .lane-icon {
  border-radius: 11px !important;
  color: #fff !important;
  background: var(--lane-tone) !important;
}

.home-lane:hover,
.live-test-card:hover,
.dependent-preview-card:hover,
.role-form-card:hover,
.form-link-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ft-shadow-hover) !important;
}

.live-test-card {
  border: 1px solid color-mix(in srgb, var(--ft-gold) 34%, var(--line)) !important;
  border-radius: var(--ft-radius) !important;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--ft-gold) 13%, var(--surface)), var(--surface) 72%) !important;
}

.live-test-icon { color: #fff !important; background: var(--ft-gold) !important; }

/* --- Forms and decisions ------------------------------------------------ */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid #c9d4e0 !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0, 25, 63, .025) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

html:not(.light) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-color: var(--line) !important;
  background: #0a1b30 !important;
}

:where(input, select, textarea):focus {
  border-color: var(--ft-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ft-blue) 15%, transparent) !important;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea).invalid,
.field-error :where(input, select, textarea) {
  border-color: var(--ft-red) !important;
  background: color-mix(in srgb, var(--ft-red) 4%, var(--surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-red) 12%, transparent) !important;
}

.auth-error,
.error,
.danger-text {
  color: var(--ft-red) !important;
}

:where(.primary-btn, .primary-button, button[type="submit"]:not(.text-btn)) {
  min-height: 46px !important;
  border: 1px solid var(--ft-navy-800) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ft-blue), var(--ft-navy-800)) !important;
  box-shadow: 0 7px 17px rgba(0, 45, 91, .18) !important;
}

:where(.primary-btn, .primary-button, button[type="submit"]:not(.text-btn)):not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 23px rgba(0, 45, 91, .24) !important;
}

.ghost-btn {
  min-height: 44px !important;
  border: 1px solid #c6d3e0 !important;
  border-radius: 10px !important;
  color: var(--ft-navy-800) !important;
  background: var(--surface) !important;
}

html:not(.light) .ghost-btn { color: #dcebf8 !important; border-color: var(--line) !important; }
.ghost-btn.danger { color: var(--ft-red) !important; border-color: color-mix(in srgb, var(--ft-red) 42%, var(--line)) !important; }

.status-pill,
.chip {
  min-height: 29px !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* Tracking codes are actionable controls, not passive status chips. Keep their
   touch target usable even though they intentionally share the chip styling. */
.chip.copy-code-control {
  min-height: 42px !important;
  padding-block: 8px !important;
}

.mini-card,
.admin-record-card,
.ad-card,
.ticket-card,
.notification-card,
.owner-ad-management-card,
.expert-subscription-card {
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: var(--surface) !important;
  box-shadow: 0 4px 14px rgba(0, 25, 63, .055) !important;
}

.admin-hub {
  gap: 12px !important;
}

.admin-hub-card {
  position: relative;
  overflow: hidden;
  border-radius: 13px !important;
}

.admin-hub-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--hub-tone, var(--ft-blue));
}

.panel-tabs,
.segmented.panel-tabs {
  padding: 6px !important;
  gap: 5px !important;
  overflow-x: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: var(--surface) !important;
  box-shadow: var(--ft-shadow) !important;
  scrollbar-width: none;
}

.panel-tabs > button {
  min-width: max-content !important;
  border-radius: 9px !important;
}

.panel-tabs > button.active {
  color: #fff !important;
  background: var(--ft-navy-800) !important;
}

.panel-tabs > button > svg,
.segmented.panel-tabs > button > svg {
  border: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Expert journey: two explicit, colour-coded branches --------------- */
.expert-subscription-page {
  border-top: 4px solid var(--ft-blue) !important;
}

.expert-subscription-list,
.expert-subscription-card,
.expert-review-card,
.evaluation-support-card {
  min-width: 0;
}

.expert-subscription-card,
.expert-review-card,
.evaluation-support-card {
  position: relative;
  overflow: hidden;
}

.expert-subscription-card::before,
.expert-review-card::before,
.evaluation-support-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--case-tone, var(--ft-blue));
}

.entry-gate-card { --case-tone: var(--ft-blue); }
.paid-evaluation-card { --case-tone: var(--ft-green); }
.operation-card { --case-tone: var(--ft-gold); }

.expert-review-steps {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
  gap: 9px !important;
}

.expert-review-step {
  min-height: 106px !important;
  border-radius: 11px !important;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.expert-review-step.is-done {
  border-color: color-mix(in srgb, var(--ft-green) 44%, var(--line)) !important;
  background: color-mix(in srgb, var(--ft-green) 8%, var(--surface)) !important;
}

.expert-review-step.is-done::before {
  color: #fff !important;
  background: var(--ft-green) !important;
}

.expert-review-step.is-current {
  border-color: var(--ft-blue) !important;
  background: color-mix(in srgb, var(--ft-blue) 8%, var(--surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-blue) 10%, transparent) !important;
  transform: translateY(-2px);
}

.expert-review-step.is-current::before {
  color: #fff !important;
  background: var(--ft-blue) !important;
}

.expert-result-callout {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--ft-green) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--ft-green) 8%, var(--surface));
}

.expert-result-callout > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  color: #fff;
  background: var(--ft-green);
}

.expert-result-callout svg { width: 23px; height: 23px; }
.expert-result-callout strong { display: block; font-size: 1.05rem; }
.expert-result-callout p { margin: 5px 0 0; line-height: 1.9; white-space: pre-wrap; }

.expert-entry-form,
.expert-score-form,
.assign-expert {
  margin-top: 5px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--case-tone, var(--ft-blue)) 5%, var(--surface));
}

.support-ad-assignment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid color-mix(in srgb, var(--ft-blue) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ft-blue) 5%, var(--surface));
}

.support-ad-assignment > .admin-edit-field,
.support-ad-assignment select,
.support-ad-assignment input {
  min-width: 0;
  width: 100%;
}

.support-ad-assignment-actions {
  grid-column: 1 / -1;
  margin-top: 2px;
}

@media (max-width: 719px) {
  .support-ad-assignment {
    grid-template-columns: minmax(0, 1fr);
    padding: 13px;
  }

  .support-ad-assignment-actions {
    grid-column: auto;
  }

  .support-ad-assignment-actions > button {
    width: 100%;
  }
}

.expert-score-form input[name="score"] {
  min-height: 58px !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-align: center;
}

.expert-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.expert-decision-grid legend {
  width: 100%;
  margin-bottom: 8px;
  font-weight: 900;
}

.expert-decision-option {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.expert-decision-option:hover { transform: translateY(-2px); }
.expert-decision-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ft-blue) 26%, transparent); outline-offset: 2px; }
.expert-decision-option:has(input:checked) { border-color: var(--decision-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--decision-tone) 11%, transparent); }
.expert-decision-option.is-entry { --decision-tone: var(--ft-green); }
.expert-decision-option.is-publish { --decision-tone: var(--ft-blue); }
.expert-decision-option input { accent-color: var(--decision-tone); }

.expert-decision-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  background: var(--decision-tone);
}

.expert-decision-icon svg { width: 21px; height: 21px; }
.expert-decision-option strong,
.expert-decision-option small { display: block; }
.expert-decision-option small { margin-top: 4px; color: var(--muted); line-height: 1.75; }

.support-case-type {
  color: var(--case-tone, var(--ft-blue)) !important;
  font-weight: 900 !important;
}

/* --- Form directory: a colourful, legible test cockpit ------------------ */
.form-directory-page {
  background:
    radial-gradient(circle at 7% 4%, rgba(31, 111, 186, .1), transparent 24rem),
    var(--bg) !important;
}

.form-directory-shell { margin-block: 22px 34px !important; }

.form-directory-hero {
  position: relative;
  padding: clamp(24px, 4vw, 46px) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--ft-radius-lg) !important;
  color: #fff !important;
  background:
    linear-gradient(120deg, rgba(0, 11, 29, .98), rgba(0, 25, 63, .94) 58%, rgba(6, 45, 91, .9)),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(255,255,255,.04) 64px 65px) !important;
  box-shadow: 0 18px 42px rgba(0, 25, 63, .22) !important;
}

.form-directory-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ft-blue), var(--ft-cyan), var(--ft-green), var(--ft-gold), var(--ft-violet));
}

.form-directory-hero :where(h1, p) { color: #fff !important; }
.form-directory-hero .section-kicker { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.form-directory-hero .text-btn { color: #fff !important; }

.form-directory-section {
  margin-top: 16px !important;
  padding: clamp(17px, 2.5vw, 28px) !important;
}

.form-link-grid,
.role-form-directory,
.dependent-preview-grid {
  gap: 12px !important;
}

.form-link-card,
.role-form-card,
.dependent-preview-card {
  --card-tone: var(--ft-blue);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-tone) 24%, var(--line)) !important;
  border-radius: 13px !important;
  color: var(--text) !important;
  background: linear-gradient(130deg, color-mix(in srgb, var(--card-tone) 7%, var(--surface)), var(--surface) 68%) !important;
  box-shadow: 0 5px 16px rgba(0, 25, 63, .055) !important;
}

.form-link-card::after,
.role-form-card::after,
.dependent-preview-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--card-tone);
}

.form-link-card:nth-child(6n + 1), .role-form-card:nth-child(6n + 1) { --card-tone: var(--ft-blue); }
.form-link-card:nth-child(6n + 2), .role-form-card:nth-child(6n + 2) { --card-tone: var(--ft-green); }
.form-link-card:nth-child(6n + 3), .role-form-card:nth-child(6n + 3) { --card-tone: var(--ft-gold); }
.form-link-card:nth-child(6n + 4), .role-form-card:nth-child(6n + 4) { --card-tone: var(--ft-violet); }
.form-link-card:nth-child(6n + 5), .role-form-card:nth-child(6n + 5) { --card-tone: var(--ft-cyan); }
.form-link-card:nth-child(6n), .role-form-card:nth-child(6n) { --card-tone: #b45d24; }

.dependent-preview-card.tone-blue { --card-tone: var(--ft-blue) !important; --case-tone: var(--ft-blue) !important; }
.dependent-preview-card.tone-green { --card-tone: var(--ft-green) !important; --case-tone: var(--ft-green) !important; }
.dependent-preview-card.tone-gold { --card-tone: var(--ft-gold) !important; --case-tone: var(--ft-gold) !important; }
.dependent-preview-card.tone-purple { --card-tone: var(--ft-violet) !important; --case-tone: var(--ft-violet) !important; }
.dependent-preview-card.tone-orange { --card-tone: #b45d24 !important; --case-tone: #b45d24 !important; }
.dependent-preview-card.tone-red { --card-tone: var(--ft-red) !important; --case-tone: var(--ft-red) !important; }

.form-link-card > span,
.role-form-card header > span,
.dependent-preview-card .case-number,
.dependent-role-icon {
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--card-tone, var(--case-tone, var(--ft-blue))) !important;
  box-shadow: none !important;
}

.dependent-role-group {
  margin-top: 18px !important;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--surface-2) !important;
}

.dependent-role-group > header {
  margin-bottom: 13px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

.dependent-count {
  color: #fff !important;
  background: var(--ft-navy-800) !important;
}

.role-tour-link {
  border-radius: 9px !important;
  color: #fff !important;
  background: var(--card-tone, var(--ft-blue)) !important;
}

.role-form-actions a {
  border-radius: 8px !important;
  color: var(--ft-navy-800) !important;
  background: color-mix(in srgb, var(--card-tone) 7%, var(--surface)) !important;
}

html:not(.light) .role-form-actions a { color: #dcebf8 !important; }

/* --- Auth and documents ------------------------------------------------- */
.auth-main { width: min(calc(100% - 28px), 720px) !important; margin: 34px auto !important; }
.auth-layout { overflow: hidden !important; border-top: 4px solid var(--ft-blue) !important; }
.auth-form-side { padding: clamp(20px, 4vw, 36px) !important; }
.auth-heading { padding-bottom: 18px !important; border-bottom: 1px solid var(--line) !important; }
.auth-heading-icon { color: #fff !important; background: var(--ft-blue) !important; }
.auth-links { gap: 8px !important; }
.auth-links a { border-radius: 9px !important; background: var(--surface-2) !important; }

.legal-page { border-top: 4px solid var(--ft-blue) !important; }
.about-value-card:nth-child(3n + 1) { border-top: 3px solid var(--ft-blue) !important; }
.about-value-card:nth-child(3n + 2) { border-top: 3px solid var(--ft-green) !important; }
.about-value-card:nth-child(3n) { border-top: 3px solid var(--ft-gold) !important; }

.site-footer {
  margin-top: 36px !important;
  border-top: 4px solid var(--ft-blue) !important;
  background: var(--ft-navy-950) !important;
}

.site-footer :where(a, span, small) { color: #dbe8f3 !important; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 719px) {
  :root { --ft-header-height: 64px; --ft-nav-height: 56px; }

  .topbar-inner,
  .auth-topbar,
  .document-brandbar {
    padding-inline: 12px !important;
  }

  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; }
  .topbar .brand,
  .auth-brand,
  .document-brandbar .brand { height: 55px !important; }
  .topbar .brand-logo,
  .auth-brand-logo,
  .document-brand-logo { width: 132px !important; height: 52px !important; }
  .topbar-identity { display: none !important; }
  .topbar-account { width: 42px !important; padding: 0 !important; justify-content: center !important; }
  .topbar-account span { display: none !important; }

  nav.bottom-nav {
    top: var(--ft-header-height) !important;
    padding: 0 8px !important;
  }

  nav.bottom-nav > button:not(.bottom-nav-brand),
  nav.bottom-nav > a.guest-nav-link {
    min-width: 76px !important;
    padding: 0 11px !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  nav.bottom-nav > :where(button, a) svg { width: 19px !important; height: 19px !important; flex-basis: 19px !important; }
  nav.bottom-nav > :where(button, a) small { font-size: 10px !important; }
  nav.bottom-nav > button.active::after { inset-inline: 9px !important; }

  .hero,
  .content,
  .user-journey-status,
  .legal-shell,
  .form-directory-shell,
  .site-footer-main,
  .site-footer-copy {
    width: min(calc(100% - 20px), var(--ft-content)) !important;
  }

  .hero {
    min-height: 350px !important;
    height: 52vh !important;
    max-height: 440px !important;
    margin-top: 10px !important;
    border-radius: 15px !important;
  }

  .hero-shade,
  html:not(.light) .hero-shade {
    background: linear-gradient(0deg, rgba(0, 11, 29, .94), rgba(0, 25, 63, .48) 68%, rgba(0, 25, 63, .16)) !important;
  }

  .hero-content {
    width: 100% !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 22px 18px 28px !important;
    text-align: start !important;
  }

  .hero-content h1 { font-size: clamp(2.35rem, 13vw, 3.35rem) !important; }
  .hero-copy { font-size: 14px !important; line-height: 1.9 !important; }
  .hero-actions { width: 100% !important; }
  .hero-actions > * { width: 100% !important; }

  .metric-row { grid-template-columns: minmax(0, 1fr) !important; }
  .metric { min-height: 88px !important; }
  .home-lanes { grid-template-columns: minmax(0, 1fr) !important; }

  :where(.surface, .admin-page, .profile-card, .dossier-command-card,
    .form-directory-section, .search-workbench, .admin-analysis-panel) {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .section-head { align-items: flex-start !important; }
  .form-directory-shell { margin-top: 12px !important; }
  .form-directory-hero { padding: 22px 17px !important; border-radius: 15px !important; }
  .form-directory-hero h1 { font-size: 1.75rem !important; }
  .dependent-role-group { padding: 12px !important; }
  .dependent-preview-grid,
  .form-link-grid,
  .role-form-directory { grid-template-columns: minmax(0, 1fr) !important; }

  .panel-tabs,
  .segmented.panel-tabs { flex-wrap: nowrap !important; }

  .expert-review-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-review-step { min-height: 82px !important; }
  .expert-subscription-meta { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-subscription-actions > button { width: 100% !important; }
  .expert-result-callout { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .expert-result-callout > span { width: 40px; height: 40px; }
  .expert-decision-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 720px) and (max-width: 1023px) {
  nav.bottom-nav { padding-inline: 14px !important; }
  .hero { height: 440px !important; }
  .form-link-grid,
  .dependent-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@keyframes ft-studio-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.topbar-inner { animation: ft-studio-enter .4s cubic-bezier(.2, .8, .2, 1) both; }
nav.bottom-nav > :not(.hidden) { animation: ft-studio-enter .32s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Pending-review actions stay compact on every viewport and never push the
 * status copy outside its card.  The logout action is rendered only while a
 * profile is locked for review. */
.user-journey-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.user-journey-actions .ghost-btn { min-height: 40px; }
.pending-review-logout { color: var(--danger, #c53b3b) !important; }

/* Search cards own their action row: long Persian labels and multi-action
 * support controls must wrap inside the card rather than widening the grid. */
#searchResults .ad-card,
#searchResults .ad-card-content,
#searchResults .ad-card-actions { min-width: 0 !important; box-sizing: border-box; }
#searchResults .ad-card-actions { width: 100%; overflow: hidden; }
#searchResults .ad-card-actions .action-row { min-width: 0; flex-wrap: wrap; }
#searchResults .ad-card-actions :where(.ad-view-btn, .action-row > button) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .admin-workspace {
    width: min(calc(100% - 48px), 1360px) !important;
    margin-inline: auto !important;
  }
  .admin-workspace > .admin-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .admin-workspace .admin-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .admin-workspace :where(.admin-page, .admin-wide-page, .surface, .mini-card) {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  .admin-workspace .admin-page-list,
  .admin-workspace .ticket-thread,
  .admin-workspace .admin-table-wrap {
    overflow-x: auto;
    max-width: 100%;
  }
}

@media (max-width: 719px) {
  .user-journey-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
    width: 100%;
  }
  .user-journey-actions .ghost-btn {
    min-height: 36px !important;
    padding: 6px 9px !important;
  }
}

.hero-copy > span {
  display: block;
}

/* ========================================================================
 * Product polish v6 — balanced night mode, motion and final component rhythm
 * ====================================================================== */

/* A real night palette: deep blue rather than near-black, with enough layer
   separation to read long operational screens without visual fatigue. */
html:not(.light) {
  --ft-ink: #f3f7fb;
  --ft-muted: #bdcad8;
  --ft-canvas: #0b1d31;
  --ft-panel: #122b45;
  --ft-soft: #183550;
  --ft-line: #35506b;
  --bg: #0b1d31;
  --bg-2: #10263e;
  --surface: #122b45;
  --surface-2: #183550;
  --surface-strong: #1b3956;
  --text: #f3f7fb;
  --muted: #bdcad8;
  --line: #35506b;
  --ui-panel: #122b45;
  --ui-panel-solid: #122b45;
  --ui-soft: #183550;
  --ui-canvas: #0b1d31;
  --ui-canvas-2: #10263e;
  --ft-shadow: 0 10px 27px rgba(0, 8, 22, .22);
  --ft-shadow-hover: 0 17px 38px rgba(0, 8, 22, .3);
  color-scheme: dark;
}

html:not(.light) body {
  color: #f3f7fb !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(36, 123, 196, .11), transparent 29%),
    linear-gradient(180deg, #10263e 0, #0b1d31 46%, #0d2137 100%) !important;
}

html:not(.light) :where(
  .surface, .admin-page, .admin-command, .admin-analysis-panel, .profile-card,
  .dossier-command-card, .mini-card, .home-lane, .category-tile,
  .search-workbench, .form-directory-section, .form-link-card, .role-form-card,
  .dependent-preview-card, .dependent-role-group, .legal-page, .about-contact,
  .auth-layout, .app-dialog, .sheet, .notification-card, .support-case-card,
  .expert-review-card, .expert-completed-card, .service-purchase-card,
  .showcase-example-card, .upload-slot
) {
  border-color: #35506b !important;
  color: #f3f7fb !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-tone, #247bc4) 8%, #183550), #122b45 72%) !important;
  box-shadow: 0 9px 25px rgba(0, 8, 22, .2) !important;
}

html:not(.light) :where(
  .surface, .admin-page, .admin-command, .admin-analysis-panel, .profile-card,
  .dossier-command-card, .mini-card, .home-lane, .category-tile,
  .search-workbench, .form-directory-section, .form-link-card, .role-form-card,
  .dependent-preview-card, .dependent-role-group, .legal-page, .about-contact,
  .auth-layout, .app-dialog, .sheet, .notification-card, .support-case-card,
  .expert-review-card, .expert-completed-card, .service-purchase-card,
  .showcase-example-card, .upload-slot
) :where(h1, h2, h3, h4, h5, p, li, label, legend, strong, span, small, dt, dd) {
  color: #f3f7fb !important;
}

html:not(.light) :where(
  .surface, .admin-page, .admin-command, .admin-analysis-panel, .profile-card,
  .mini-card, .auth-layout, .app-dialog, .sheet
) :where(p, small, .muted, .helper-text) {
  color: #bdcad8 !important;
}

/* Form controls remain bright paper in both themes. This gives the exact
   contract: white background = navy copy; brand/dark background = white. */
html:not(.light) :where(input, select, textarea) {
  border-color: #8ca1b5 !important;
  color: var(--ft-navy-900) !important;
  background: #f8fbfe !important;
  caret-color: var(--ft-blue) !important;
}

html:not(.light) :where(input, textarea)::placeholder { color: #6b7b8e !important; }
html:not(.light) select option { color: var(--ft-navy-900); background: #fff; }

html:not(.light) :where(.section-head, .search-head, .admin-command-head,
  .profile-action-head, .dossier-record-head, .media-panel-head) {
  border-color: #35506b !important;
}

html:not(.light) :where(.chip, .status-pill, .code, .tracking-copy-control) {
  border-color: #4a6680 !important;
  color: #eaf3fb !important;
  background: #203f5d !important;
}

html:not(.light) .category-tile.active {
  border-color: rgba(255, 255, 255, .2) !important;
  background: linear-gradient(130deg, #247bc4, #3151a0) !important;
}

html:not(.light) .form-section-heading {
  border-color: #3b5872 !important;
  background: linear-gradient(110deg, #1c3b58, #142d47) !important;
}

html:not(.light) :where(.ticket-message.from-user, .ticket-message.from-admin) {
  border-color: #46637d !important;
  background: #1a3854 !important;
}

/* Header and footer intentionally stay white in both themes. */
html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar, .site-footer) {
  border-color: #dce4ed !important;
  color: var(--ft-navy-900) !important;
  background: #fff !important;
}

html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar, .site-footer)
  :where(a, span, small, strong, p, svg) {
  color: var(--ft-navy-900) !important;
}

/* Compact, conventional desktop navigation; never a full-width colour bar. */
@media (min-width: 1024px) {
  nav.bottom-nav,
  html:not(.light) nav.bottom-nav {
    width: min(calc(100% - 40px), 1040px) !important;
    max-width: 1040px !important;
    padding-inline: 7px !important;
    border-radius: 0 0 13px 13px !important;
  }

  nav.bottom-nav > button:not(.bottom-nav-brand),
  nav.bottom-nav > a.guest-nav-link {
    min-width: 74px !important;
    padding-inline: 10px !important;
  }
}

/* Social footer cluster. Actual account URLs can be replaced without any
   styling changes once the official handles are supplied. */
.site-footer-main { gap: 18px !important; }
.site-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-footer-social .social-link {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #d8e2ec;
  border-radius: 11px;
  color: var(--ft-navy-900) !important;
  background: #f5f8fb;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.site-footer-social .social-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer-social .social-link:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 25, 63, .16);
}

.site-footer-social .social-instagram:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.site-footer-social .social-phone:hover { background: #168a63; }
.site-footer-social .social-telegram:hover { background: #229ed9; }

/* Support publication gate for paid expert reports. */
.evaluation-approval-panel {
  display: grid;
  gap: 13px;
  padding: 16px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--ft-gold) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--ft-gold) 9%, var(--surface));
}

.evaluation-approval-panel > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.evaluation-approval-panel :where(p, blockquote) { margin: 0; }
.evaluation-approval-panel blockquote {
  padding: 13px;
  border-inline-start: 4px solid var(--ft-gold);
  border-radius: 10px;
  white-space: pre-wrap;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

/* Motion with purpose: reveal hierarchy, acknowledge hover/focus and keep
   expensive infinite animation limited to a single live-opportunity card. */
@keyframes ft-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ft-nav-in {
  from { opacity: 0; transform: translateY(-7px) scaleX(.985); }
  to { opacity: 1; transform: translateY(0) scaleX(1); }
}

@keyframes ft-live-sheen {
  0%, 68% { transform: translateX(145%) skewX(-18deg); }
  100% { transform: translateX(-230%) skewX(-18deg); }
}

nav.bottom-nav { animation: ft-nav-in .38s cubic-bezier(.2, .8, .2, 1) both; }
.content:not(.hidden) > *,
.legal-page,
.auth-layout,
.form-directory-shell > * {
  animation: ft-rise .32s cubic-bezier(.2, .8, .2, 1) both;
}

.content:not(.hidden) > :nth-child(2) { animation-delay: .035s; }
.content:not(.hidden) > :nth-child(3) { animation-delay: .07s; }
.content:not(.hidden) > :nth-child(4) { animation-delay: .105s; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, #247bc4 44%, transparent) !important;
  outline-offset: 2px !important;
}

.home-live-tests .live-test-card { position: relative; overflow: hidden; }
.home-live-tests .live-test-card::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% 0;
  width: 42px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: ft-live-sheen 4.8s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 719px) {
  .site-footer-main { grid-template-columns: 1fr !important; justify-items: center !important; }
  .site-footer-links { justify-content: center !important; }
  .evaluation-approval-panel > div:first-child { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================
 * Desktop console typography and alignment contract
 * Operational cards previously inherited `overflow-wrap:anywhere`, which
 * could split Persian words into one-character vertical columns when a grid
 * cell became narrow. This pass is deliberately desktop-only so the compact
 * mobile application layout remains unchanged.
 * ====================================================================== */
@media (min-width: 1024px) {
  .admin-workspace :where(
    h1, h2, h3, h4, p, label, legend, summary, dt, dd, strong, small,
    .chip, .status-pill, .admin-hub-title, .admin-hub-action,
    .support-case-type, .form-hint, .activity-note
  ) {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .admin-workspace :where(.code, [data-copy-value], .tracking-copy-value) {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .admin-workspace > .admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  }

  .admin-workspace .admin-hub {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important;
  }

  .support-management-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  }

  .manager-management-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)) !important;
  }

  .admin-workspace .admin-rate-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
  }

  .admin-workspace :where(.section-head, .search-head, .admin-user-card-head) {
    min-width: 0;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
  }

  .admin-workspace .section-head > div {
    flex: 1 1 360px;
    min-width: 0;
  }

  .admin-workspace .section-head > :where(button, .chip, .status-pill) {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .admin-workspace :where(
    .admin-hub-card, .support-management-grid > button, .mini-card,
    .admin-record-card, .admin-analysis-panel, .evaluation-support-card,
    .expert-review-card, .transaction-management-card
  ) > * {
    min-width: 0;
    max-width: 100%;
  }

  .support-management-grid > button {
    grid-template-columns: 44px minmax(180px, 1fr) 20px;
  }

  .technical-check-card {
    grid-template-columns: 42px minmax(260px, 1fr) minmax(150px, auto) !important;
    align-items: start !important;
  }

  .admin-workspace :where(.action-row, .admin-command-actions, .admin-report-actions) {
    align-items: center;
    flex-wrap: wrap !important;
  }

  .admin-workspace :where(.action-row, .admin-command-actions, .admin-report-actions) > :where(button, a) {
    min-width: 0;
    max-width: 100%;
  }

  .admin-workspace :where(.admin-table-wrap, .table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .admin-workspace :where(th, td) {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    vertical-align: middle !important;
  }
}

/* ========================================================================
 * Colour system across the product
 * Saturated colour is reserved for calls-to-action and live status. Working
 * cards use quiet club-colour tints, keeping long forms calm and readable.
 * ====================================================================== */
html.light :where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
) {
  --module-tone: var(--ft-blue);
  border-color: color-mix(in srgb, var(--module-tone) 29%, #d8e1eb) !important;
  background:
    linear-gradient(132deg, color-mix(in srgb, var(--module-tone) 12%, #fff), #fff 70%) !important;
  box-shadow:
    inset -4px 0 0 var(--module-tone),
    0 7px 19px rgba(0, 25, 63, .065) !important;
}

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n + 1) { --module-tone: #247bc4; }

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n + 2) { --module-tone: #15956e; }

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n + 3) { --module-tone: #d28a13; }

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n + 4) { --module-tone: #7154b3; }

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n + 5) { --module-tone: #087f8c; }

:where(
  .home-lane,
  .category-tile,
  .mini-card,
  .admin-hub-card,
  .admin-analysis-panel,
  .admin-record-card,
  .admin-user-card,
  .dossier-record,
  .dossier-review-card,
  .service-purchase-card,
  .notification-card,
  .support-case-card,
  .expert-review-card,
  .expert-completed-card,
  .showcase-example-card,
  .upload-slot
):nth-child(6n) { --module-tone: #c65f31; }

html.light .home-lane {
  --module-tone: var(--lane-tone, var(--ft-blue));
  background: linear-gradient(120deg, color-mix(in srgb, var(--lane-tone) 17%, #fff), #fff 74%) !important;
}

.home-lane .lane-arrow { color: var(--lane-tone) !important; }

html.light .category-tile.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(130deg, var(--module-tone), color-mix(in srgb, var(--module-tone) 64%, var(--ft-navy-900))) !important;
  box-shadow: 0 11px 24px color-mix(in srgb, var(--module-tone) 23%, transparent) !important;
}

html.light .category-tile.active :where(strong, span, small, svg) { color: #fff !important; }

/* Form chapters and uploads use colour as wayfinding. */
html.light .form-section-heading {
  --form-tone: var(--ft-blue);
  padding: 12px 13px !important;
  border: 1px solid color-mix(in srgb, var(--form-tone) 24%, #d9e2eb) !important;
  border-radius: 12px !important;
  background: linear-gradient(110deg, color-mix(in srgb, var(--form-tone) 12%, #fff), #fff) !important;
}

html.light form .form-section-heading:nth-of-type(5n + 2) { --form-tone: #15956e; }
html.light form .form-section-heading:nth-of-type(5n + 3) { --form-tone: #d28a13; }
html.light form .form-section-heading:nth-of-type(5n + 4) { --form-tone: #7154b3; }
html.light form .form-section-heading:nth-of-type(5n) { --form-tone: #087f8c; }

.form-section-heading > span,
.upload-slot .upload-icon {
  border-color: transparent !important;
  color: #fff !important;
  background: var(--form-tone, var(--module-tone, var(--ft-blue))) !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--form-tone, var(--module-tone, var(--ft-blue))) 20%, transparent) !important;
}

.upload-slot .upload-icon :where(svg, i) { color: #fff !important; }

/* Conversations have an immediate sender distinction without relying on
   alignment alone. */
html.light .ticket-message.from-user {
  border-color: #b9d8ef !important;
  background: #edf7ff !important;
}

html.light .ticket-message.from-admin {
  border-color: #b9dfd1 !important;
  background: #edf9f4 !important;
}

.ticket-message.from-user { border-inline-start: 4px solid #247bc4 !important; }
.ticket-message.from-admin { border-inline-start: 4px solid #15956e !important; }

/* Important service blocks are saturated, matching the colourful home CTAs. */
:where(.ad-services-callout, .service-purchase-intro, .expert-workflow-intro) {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(120deg, #087f8c, #247bc4 60%, #4e52aa) !important;
  box-shadow: 0 12px 27px rgba(13, 86, 139, .2) !important;
}

:where(.ad-services-callout, .service-purchase-intro, .expert-workflow-intro)
  :where(h1, h2, h3, h4, p, span, strong, small, svg) {
  color: #fff !important;
}

.ad-services-callout-icon,
.service-purchase-icon {
  border-color: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

/* Distinct service signals make a purchasable pass visible at a glance. */
.ad-services-callout.boost-services-callout {
  background: linear-gradient(120deg, #087f8c, #15956e 58%, #e39a19) !important;
}

.ad-services-callout.expert-services-callout {
  background: linear-gradient(120deg, #247bc4, #4e52aa 58%, #087f8c) !important;
}

.ad-services-callout .primary-btn {
  color: #00193f !important;
  background: #fff !important;
  border-color: rgba(255, 255, 255, .8) !important;
  box-shadow: 0 7px 16px rgba(0, 25, 63, .18) !important;
}

.ad-services-callout .primary-btn :where(span, svg) {
  color: #00193f !important;
}

.ad-services-callout .primary-btn:hover,
.ad-services-callout .primary-btn:focus-visible {
  color: #fff !important;
  background: #00193f !important;
  border-color: #00193f !important;
}

.ad-services-callout .primary-btn:hover :where(span, svg),
.ad-services-callout .primary-btn:focus-visible :where(span, svg) {
  color: #fff !important;
}

/* A restrained rainbow only on operational headers makes dense panels much
   easier to scan without colouring the entire workspace. */
.admin-analysis-panel > .section-head:first-child,
.mini-card > .section-head:first-child,
.support-case-card > .section-head:first-child {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--module-tone, var(--ft-blue)) 9%, transparent) !important;
}

/* Standard desktop menu: no full-bleed band. Touch layouts intentionally
   remain full width because they behave as a native app tab bar. */
@media (min-width: 1024px) {
  nav.bottom-nav,
  html:not(.light) nav.bottom-nav {
    width: min(calc(100% - 32px), 1120px) !important;
    max-width: 1120px !important;
    padding-inline: 8px !important;
    margin-inline: auto !important;
    border-radius: 0 0 14px 14px !important;
  }

  nav.bottom-nav > button:not(.bottom-nav-brand),
  nav.bottom-nav > a.guest-nav-link {
    min-width: 78px !important;
    padding-inline: 11px !important;
  }
}

/* ========================================================================
 * Clubhouse shell v2
 * White masthead + navy navigation on desktop, native-app navigation on
 * touch layouts. This block intentionally wins over every older theme layer.
 * ====================================================================== */
:root {
  --ft-header-height: 68px;
  --ft-nav-height: 54px;
  --ft-app-nav-height: 72px;
  --ft-app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* The masthead is a quiet white utility surface. The brand colour belongs to
   navigation and typography, not to a full-height decorative banner. */
.topbar,
.auth-topbar,
.document-brandbar,
html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar) {
  min-height: var(--ft-header-height) !important;
  height: var(--ft-header-height) !important;
  border-bottom: 1px solid #dce4ed !important;
  color: var(--ft-navy-900) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0, 25, 63, .07) !important;
}

.topbar::after,
.auth-topbar::after,
.document-brandbar::after { display: none !important; }

.topbar-inner,
.auth-topbar,
.document-brandbar {
  width: min(100%, var(--ft-content)) !important;
  max-width: var(--ft-content) !important;
  padding-inline: 18px !important;
  margin-inline: auto !important;
}

.topbar-inner {
  min-height: var(--ft-header-height) !important;
  grid-template-columns: minmax(150px, 1fr) auto !important;
  gap: 12px !important;
}

.topbar .brand,
.auth-brand,
.document-brandbar .brand {
  height: 58px !important;
}

.topbar .brand-logo,
.auth-brand-logo,
.document-brand-logo,
html:not(.light) :where(.topbar .brand-logo, .auth-brand-logo, .document-brand-logo) {
  width: 154px !important;
  height: 56px !important;
  padding: 4px 0 !important;
}

:where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-light {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

:where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-dark {
  display: none !important;
}

.topbar-identity {
  padding-inline-end: 12px !important;
  border-color: #dce4ed !important;
}

.topbar-identity strong { color: var(--ft-navy-900) !important; }
.topbar-identity small { color: #6b7889 !important; }

.topbar-account,
.topbar .icon-btn,
.auth-topbar .icon-button {
  min-width: 40px !important;
  min-height: 40px !important;
  height: 40px !important;
  border-color: #d7e1eb !important;
  color: var(--ft-navy-900) !important;
  background: #f5f8fb !important;
}

.topbar-account:hover,
.topbar .icon-btn:hover,
.auth-topbar .icon-button:hover {
  border-color: #aebfd1 !important;
  color: #fff !important;
  background: var(--ft-navy-900) !important;
}

/* Desktop navigation follows the Transfermarkt information pattern: a single
   compact navy strip, white labels and one restrained active marker. */
nav.bottom-nav,
html:not(.light) nav.bottom-nav {
  top: var(--ft-header-height) !important;
  min-height: var(--ft-nav-height) !important;
  height: var(--ft-nav-height) !important;
  padding-inline: max(18px, calc((100% - var(--ft-content)) / 2)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  color: #fff !important;
  background: var(--ft-navy-900) !important;
  box-shadow: 0 6px 16px rgba(0, 25, 63, .13) !important;
  scrollbar-width: none;
}

nav.bottom-nav::-webkit-scrollbar { display: none; }
nav.bottom-nav > .bottom-nav-brand { display: none !important; }

nav.bottom-nav > button:not(.bottom-nav-brand),
nav.bottom-nav > a.guest-nav-link {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 92px !important;
  min-height: var(--ft-nav-height) !important;
  height: var(--ft-nav-height) !important;
  padding: 0 15px !important;
  flex-direction: row !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  background: transparent !important;
  box-shadow: none !important;
}

nav.bottom-nav > :where(button:not(.bottom-nav-brand), a.guest-nav-link) > svg {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

nav.bottom-nav > :where(button:not(.bottom-nav-brand), a.guest-nav-link) > small {
  color: currentColor !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

nav.bottom-nav > button:not(.bottom-nav-brand):hover,
nav.bottom-nav > a.guest-nav-link:hover,
nav.bottom-nav > button.active:not(.bottom-nav-brand) {
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
}

nav.bottom-nav > button:not(.bottom-nav-brand)::after,
nav.bottom-nav > a.guest-nav-link::after {
  inset: auto 14px 0 !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: transparent !important;
  transform: scaleX(.3) !important;
  opacity: 0 !important;
}

nav.bottom-nav > button.active:not(.bottom-nav-brand)::after,
nav.bottom-nav > a.guest-nav-link:focus-visible::after {
  background: #fff !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* Keep the unread counter in the free outer corner of the navigation item.
   The previous inline-start position sat on top of the bell in RTL layouts,
   especially when the desktop strip became compact. */
nav.bottom-nav .notification-badge {
  top: 5px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 5px !important;
  z-index: 2;
}

/* White footer, aligned like a real product footer instead of a dark banner. */
.site-footer,
html:not(.light) .site-footer {
  margin-top: 42px !important;
  border-top: 1px solid #dce4ed !important;
  color: #647286 !important;
  background: #fff !important;
  box-shadow: 0 -3px 18px rgba(0, 25, 63, .045) !important;
}

.site-footer-main,
.site-footer-copy {
  width: min(calc(100% - 36px), var(--ft-content)) !important;
  max-width: var(--ft-content) !important;
}

.site-footer :where(span, small) { color: #647286 !important; }
.site-footer :where(a, .site-footer-links a, .site-footer-copy a) {
  color: var(--ft-navy-900) !important;
}
.site-footer-links a:hover { color: var(--ft-blue) !important; background: #eef5fb !important; }
.site-footer-copy { border-color: #e3e9f0 !important; }

/* Controlled colour: structure and meaning rather than random decoration. */
.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList),
.profile-card,
.form-directory-section {
  border-top: 3px solid var(--section-tone, var(--ft-blue)) !important;
}

.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests):nth-child(5n + 1),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList):nth-child(5n + 1) { --section-tone: var(--ft-blue); }
.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests):nth-child(5n + 2),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList):nth-child(5n + 2) { --section-tone: var(--ft-green); }
.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests):nth-child(5n + 3),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList):nth-child(5n + 3) { --section-tone: var(--ft-gold); }
.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests):nth-child(5n + 4),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList):nth-child(5n + 4) { --section-tone: var(--ft-violet); }
.content > :where(.surface, .search-workbench, .home-quick-actions, .home-live-tests):nth-child(5n),
.admin-workspace > :where(.admin-command, #adminQueues, #adminList):nth-child(5n) { --section-tone: var(--ft-cyan); }

.surface,
.mini-card,
.home-lane,
.metric,
.category-tile,
.admin-hub-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

:where(.surface, .mini-card, .home-lane, .category-tile, .admin-hub-card):hover {
  box-shadow: 0 12px 28px rgba(0, 25, 63, .1) !important;
  transform: translateY(-2px) !important;
}

/* Tablet and phone: the shell behaves like an installed application. */
@media (max-width: 1023px) {
  :root {
    --ft-header-height: 60px;
    --ft-nav-height: var(--ft-app-nav-height);
  }

  html { scroll-padding-top: calc(var(--ft-header-height) + 12px) !important; }

  body.has-app-nav {
    padding-bottom: calc(var(--ft-app-nav-height) + var(--ft-app-safe-bottom) + 10px) !important;
  }

  .topbar,
  .auth-topbar,
  .document-brandbar,
  html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar) {
    min-height: var(--ft-header-height) !important;
    height: var(--ft-header-height) !important;
  }

  .topbar-inner,
  .auth-topbar,
  .document-brandbar {
    min-height: var(--ft-header-height) !important;
    height: var(--ft-header-height) !important;
    padding-inline: 12px !important;
  }

  .topbar .brand,
  .auth-brand,
  .document-brandbar .brand { height: 52px !important; }

  .topbar .brand-logo,
  .auth-brand-logo,
  .document-brand-logo,
  html:not(.light) :where(.topbar .brand-logo, .auth-brand-logo, .document-brand-logo) {
    width: 132px !important;
    height: 50px !important;
  }

  nav.bottom-nav,
  html:not(.light) nav.bottom-nav {
    position: fixed !important;
    inset: auto 0 0 !important;
    top: auto !important;
    z-index: 180 !important;
    width: 100% !important;
    min-height: calc(var(--ft-app-nav-height) + var(--ft-app-safe-bottom)) !important;
    height: calc(var(--ft-app-nav-height) + var(--ft-app-safe-bottom)) !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 6px 8px var(--ft-app-safe-bottom) !important;
    border-top: 1px solid rgba(255, 255, 255, .13) !important;
    box-shadow: 0 -8px 26px rgba(0, 17, 43, .24) !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  nav.bottom-nav > button:not(.bottom-nav-brand),
  nav.bottom-nav > a.guest-nav-link {
    flex: 1 0 72px !important;
    min-width: 72px !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 5px 6px 4px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 12px !important;
    scroll-snap-align: center;
  }

  nav.bottom-nav > :where(button:not(.bottom-nav-brand), a.guest-nav-link) > svg {
    width: 22px !important;
    height: 22px !important;
  }

  nav.bottom-nav > :where(button:not(.bottom-nav-brand), a.guest-nav-link) > small {
    max-width: 68px !important;
    overflow: hidden !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
  }

  nav.bottom-nav > button.active:not(.bottom-nav-brand) {
    background: rgba(255, 255, 255, .13) !important;
  }

  nav.bottom-nav .notification-badge {
    top: 3px !important;
    inset-inline-end: 0 !important;
    min-width: 16px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    font-size: 9px !important;
  }

  nav.bottom-nav > button:not(.bottom-nav-brand)::after,
  nav.bottom-nav > a.guest-nav-link::after {
    inset: 0 18px auto !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
  }

  .site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 18px !important;
  }

  .content,
  .hero,
  .user-journey-status,
  .legal-shell,
  .form-directory-shell {
    width: min(calc(100% - 24px), var(--ft-content)) !important;
  }
}

@media (max-width: 719px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto !important; }
  .topbar-actions { gap: 6px !important; }
  .topbar-account,
  .topbar .icon-btn,
  .auth-topbar .icon-button {
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .hero { margin-top: 12px !important; }
  .content { padding-inline: 0 !important; }

  .site-footer-main,
  .site-footer-copy {
    width: calc(100% - 28px) !important;
  }
}

nav.bottom-nav > button.hidden:not(.bottom-nav-brand),
nav.bottom-nav > a.guest-nav-link.hidden,
nav.bottom-nav > .hidden,
.hidden { display: none !important; }

/* ========================================================================
 * Brand contrast contract
 * White surface  -> Football Talent navy (#00193f)
 * Brand surface  -> white
 * Semantic success/warning/error components retain their own accessible
 * foreground colours and are intentionally outside this contract.
 * ====================================================================== */
html.light {
  --text: var(--ft-navy-900);
  --muted: var(--ft-navy-900);
  --ft-ink: var(--ft-navy-900);
  --ft-muted: var(--ft-navy-900);
}

html.light body,
html.light :where(input, select, textarea) {
  color: var(--ft-navy-900) !important;
}

html.light :where(
  .surface,
  .mini-card,
  .metric,
  .home-lane,
  .category-tile,
  .search-workbench,
  .admin-command,
  .admin-analysis-panel,
  .profile-card,
  .dossier-command-card,
  .form-directory-section,
  .form-link-card,
  .role-form-card,
  .dependent-preview-card,
  .dependent-role-group,
  .legal-page,
  .about-contact,
  .auth-layout,
  .app-dialog,
  .sheet
) {
  --text: var(--ft-navy-900);
  --muted: var(--ft-navy-900);
  color: var(--ft-navy-900) !important;
}

html.light :where(
  .surface,
  .mini-card,
  .metric,
  .home-lane,
  .category-tile,
  .search-workbench,
  .admin-command,
  .admin-analysis-panel,
  .profile-card,
  .dossier-command-card,
  .form-directory-section,
  .form-link-card,
  .role-form-card,
  .dependent-preview-card,
  .dependent-role-group,
  .legal-page,
  .about-contact,
  .auth-layout,
  .app-dialog,
  .sheet
) :where(h1, h2, h3, h4, h5, p, li, label, legend, strong, small) {
  color: var(--ft-navy-900) !important;
}

/* Header and footer are always white, including while the content theme is
   dark, so their typography always follows the same navy brand rule. */
:where(.topbar, .auth-topbar, .document-brandbar, .site-footer),
:where(.topbar, .auth-topbar, .document-brandbar, .site-footer) :where(a, span, small, strong, p) {
  color: var(--ft-navy-900) !important;
}

.site-footer :where(a, span, small),
.site-footer-links a,
.site-footer-copy a {
  color: var(--ft-navy-900) !important;
}

/* Brand-colour surfaces always use white type and icons. Keep this after the
   white-surface rule because many actions live inside white cards. */
:where(
  nav.bottom-nav,
  .primary-btn,
  .primary-button,
  button[type="submit"]:not(.text-btn),
  .panel-tabs > button.active,
  .segmented.panel-tabs > button.active,
  .role-tour-link,
  .dependent-count,
  .form-directory-hero,
  .admin-role-chip,
  .auth-heading-icon,
  .metric-icon,
  .lane-icon,
  .live-test-icon,
  .notification-icon,
  .expert-decision-icon,
  .submission-receipt-icon
),
:where(
  nav.bottom-nav,
  .primary-btn,
  .primary-button,
  button[type="submit"]:not(.text-btn),
  .panel-tabs > button.active,
  .segmented.panel-tabs > button.active,
  .role-tour-link,
  .dependent-count,
  .form-directory-hero,
  .admin-role-chip,
  .auth-heading-icon,
  .metric-icon,
  .lane-icon,
  .live-test-icon,
  .notification-icon,
  .expert-decision-icon,
  .submission-receipt-icon
) :where(a, span, small, strong, p, svg, i) {
  color: #fff !important;
}

/* The hero sits on a dark photographic/brand surface. */
.hero-content,
.hero-content :where(h1, h2, h3, p, span, strong, small, svg) {
  color: #fff !important;
}

/* ========================================================================
 * Home dashboard colour pass
 * These are deliberately saturated dashboard modules—not white cards with a
 * token border—so the key numbers and the live opportunity read immediately.
 * ====================================================================== */
.content[data-view="home"] > .metric-row > .metric {
  min-height: 112px !important;
  padding: 18px !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0, 25, 63, .17) !important;
}

.content[data-view="home"] > .metric-row > .metric::before {
  content: "";
  position: absolute;
  inset: -46px auto auto -34px;
  width: 132px;
  aspect-ratio: 1;
  border: 24px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  pointer-events: none;
}

.content[data-view="home"] > .metric-row > .metric::after {
  inset: auto 18px 12px !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28) !important;
}

.content[data-view="home"] > .metric-row > .metric-green {
  background: linear-gradient(135deg, #15956e 0%, #087b83 100%) !important;
}

.content[data-view="home"] > .metric-row > .metric-blue {
  background: linear-gradient(135deg, #247bc4 0%, #4e52aa 100%) !important;
}

.content[data-view="home"] > .metric-row > .metric :where(strong, span, small, svg) {
  color: #fff !important;
}

.content[data-view="home"] > .metric-row > .metric strong {
  font-size: clamp(2rem, 4vw, 2.7rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.content[data-view="home"] > .metric-row > .metric > div > span {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.content[data-view="home"] > .metric-row > .metric > .metric-icon {
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important;
}

.content[data-view="home"] > .home-live-tests {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 27px) !important;
  border: 1px solid #c9ddec !important;
  border-top: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(200, 135, 18, .18), transparent 29%),
    linear-gradient(125deg, #fff8e8 0%, #eef8fa 48%, #eef3ff 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 25, 63, .09) !important;
}

.content[data-view="home"] > .home-live-tests::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #c88712, #15956e, #247bc4, #7154b3);
}

.home-live-tests .section-kicker {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #d99718, #b66e08) !important;
  box-shadow: 0 5px 12px rgba(200, 135, 18, .2) !important;
}

.home-live-tests .section-head h2,
.home-live-tests .section-head h2 :where(span, svg) {
  color: var(--ft-navy-900) !important;
}

.home-live-tests .section-head,
html:not(.light) .home-live-tests .section-head {
  border-color: #d6e1eb !important;
  background: transparent !important;
}

.home-live-tests .live-test-card {
  min-height: 104px !important;
  padding: 17px 18px !important;
  gap: 14px !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: linear-gradient(118deg, #006e7d 0%, #147da5 47%, #2459a9 100%) !important;
  box-shadow: 0 12px 26px rgba(0, 70, 115, .22) !important;
}

.home-live-tests .live-test-card > span:nth-child(2) {
  display: grid !important;
  min-width: 0;
  gap: 6px !important;
  text-align: start !important;
}

.home-live-tests .live-test-card :where(strong, small, span, svg) {
  color: #fff !important;
}

.home-live-tests .live-test-card strong {
  font-size: clamp(1rem, 2.4vw, 1.3rem) !important;
  font-weight: 950 !important;
  line-height: 1.55 !important;
}

.home-live-tests .live-test-card small {
  color: rgba(255, 255, 255, .86) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 1.75 !important;
}

.home-live-tests .live-test-icon {
  border: 1px solid rgba(255, 255, 255, .25) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16) !important;
}

.home-live-tests .live-test-card > svg:last-child {
  width: 34px !important;
  height: 34px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 719px) {
  .content[data-view="home"] > .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .content[data-view="home"] > .metric-row > .metric {
    min-height: 124px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-content: center !important;
    padding: 14px 12px !important;
  }

  .content[data-view="home"] > .metric-row > .metric strong {
    font-size: clamp(1.65rem, 8vw, 2.1rem) !important;
  }

  .content[data-view="home"] > .metric-row > .metric > div > span {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  .content[data-view="home"] > .home-live-tests { padding: 17px 13px !important; }

  .home-live-tests .live-test-card {
    min-height: 110px !important;
    grid-template-columns: 44px minmax(0, 1fr) 30px !important;
    padding: 14px 12px !important;
    gap: 10px !important;
  }
}

/* ========================================================================
 * v7 final authority
 * Kept at EOF on purpose: older redesign layers remain for component layout,
 * while this block is the only authority for theme contrast and media fit.
 * ====================================================================== */
html.light {
  --bg: #edf3f8;
  --bg-2: #f7fafd;
  --surface: #fff;
  --surface-2: #f4f8fc;
  --surface-strong: #fff;
  --text: #00193f;
  --muted: #53677d;
  --line: #d5e0ea;
  color-scheme: light;
}

html:not(.light) {
  --bg: #091a2c;
  --bg-2: #0d2339;
  --surface: #102b45;
  --surface-2: #183a58;
  --surface-strong: #1e4565;
  --text: #f7faff;
  --muted: #c7d4e2;
  --line: #365a78;
  --ft-ink: #f7faff;
  --ft-muted: #c7d4e2;
  --ui-panel: #102b45;
  --ui-panel-solid: #102b45;
  --ui-soft: #183a58;
  --ui-canvas: #091a2c;
  --ui-canvas-2: #0d2339;
  color-scheme: dark;
}

html.light body {
  color: #00193f !important;
  background:
    radial-gradient(circle at 8% 3%, rgba(34, 122, 194, .07), transparent 25rem),
    linear-gradient(180deg, #f8fbfe, #edf3f8) !important;
}

html:not(.light) body {
  color: #f7faff !important;
  background:
    radial-gradient(circle at 8% 3%, rgba(44, 132, 196, .13), transparent 28rem),
    linear-gradient(180deg, #0d243a, #091a2c) !important;
}

html:not(.light) :where(
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, strong, b,
  small, time, .title-with-icon, .section-title, .filter-title,
  .lane-copy, .ad-card-content, .admin-kv, .detail-kv
) { color: #f7faff !important; }

html:not(.light) :where(
  .muted, .helper-text, .field-help, .auth-field > small,
  .auth-heading > div > span, .form-note, .section-head > div > p,
  .profile-meta, .ad-card-description
) { color: #c7d4e2 !important; }

html.light :where(.topbar, .auth-topbar, .document-brandbar) {
  border-color: #d7e1eb !important;
  color: #00193f !important;
  background: #fff !important;
  box-shadow: 0 3px 16px rgba(0, 25, 63, .075) !important;
}

html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar) {
  border-color: #2d506f !important;
  color: #fff !important;
  background: linear-gradient(110deg, #0b2137, #123452) !important;
  box-shadow: 0 5px 22px rgba(0, 7, 18, .26) !important;
}

html.light :where(.topbar, .auth-topbar, .document-brandbar)
  :where(a, button, span, small, strong, p, svg) { color: #00193f !important; }

html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar)
  :where(a, button, span, small, strong, p, svg) { color: #fff !important; }

html.light :where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-light,
html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-dark {
  display: block !important;
}

html.light :where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-dark,
html:not(.light) :where(.topbar, .auth-topbar, .document-brandbar) .brand-logo-light {
  display: none !important;
}

html:not(.light) .topbar-identity { border-color: rgba(255, 255, 255, .22) !important; }

html:not(.light) :where(.topbar-account, .topbar .icon-btn, .auth-topbar .icon-button) {
  border-color: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

html:not(.light) :where(.topbar-account, .topbar .icon-btn, .auth-topbar .icon-button):hover {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(255, 255, 255, .16) !important;
}

html.light .site-footer {
  border-color: #d7e1eb !important;
  color: #00193f !important;
  background: #fff !important;
}

html:not(.light) .site-footer {
  border-color: #2d506f !important;
  color: #fff !important;
  background: linear-gradient(110deg, #0b2137, #123452) !important;
  box-shadow: 0 -5px 24px rgba(0, 7, 18, .23) !important;
}

html.light .site-footer :where(a, span, small, svg) { color: #00193f !important; }
html:not(.light) .site-footer :where(a, span, small, svg) { color: #fff !important; }
html.light .site-footer-copy { border-color: #e0e8f0 !important; }
html:not(.light) .site-footer-copy { border-color: rgba(255, 255, 255, .18) !important; }

html:not(.light) .site-footer-social .social-link {
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

.auth-layout {
  width: min(100%, 720px) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #247bc4, #15956e, #c88712) 1 !important;
}

html.light .auth-layout {
  color: #00193f !important;
  background: #fff !important;
  box-shadow: 0 22px 55px rgba(0, 25, 63, .12) !important;
}

html:not(.light) .auth-layout {
  border-color: #365a78 !important;
  color: #fff !important;
  background: linear-gradient(145deg, #143550, #102b45) !important;
  box-shadow: 0 24px 58px rgba(0, 7, 18, .31) !important;
}

html:not(.light) .auth-heading { border-color: rgba(255, 255, 255, .17) !important; }

.auth-heading > div > p {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 27px !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(120deg, #237bc1, #126f98) !important;
}

.auth-heading-icon {
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  background: linear-gradient(145deg, #277fc4, #126e96) !important;
  box-shadow: 0 9px 21px rgba(23, 104, 158, .22) !important;
}

html:not(.light) .auth-heading :where(h1, span, svg) { color: #fff !important; }
html:not(.light) .auth-heading > div > span { color: #c7d4e2 !important; }

html.light :where(input, select, textarea),
html:not(.light) :where(input, select, textarea) {
  border-color: #c8d6e3 !important;
  color: #00193f !important;
  background: #fff !important;
  caret-color: #247bc4 !important;
}

html.light :where(input, textarea)::placeholder,
html:not(.light) :where(input, textarea)::placeholder {
  color: #718397 !important;
  opacity: 1 !important;
}

html:not(.light) :where(input, select, textarea):hover { border-color: #7fa5c4 !important; }

:where(.form-grid, .admin-filter-grid) {
  align-items: start !important;
  padding: clamp(13px, 2vw, 18px) !important;
  gap: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--module-tone, #247bc4) 20%, var(--line)) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(125deg,
      color-mix(in srgb, var(--module-tone, #247bc4) 6%, var(--surface)),
      var(--surface) 48%,
      color-mix(in srgb, #15956e 4%, var(--surface))) !important;
}

html:not(.light) .form-section-heading {
  border-color: color-mix(in srgb, var(--form-tone, #247bc4) 46%, #365a78) !important;
  color: #fff !important;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--form-tone, #247bc4) 21%, #183a58), #102b45) !important;
}

html:not(.light) .form-section-heading :where(h2, h3, p, span, strong, small, svg) { color: #fff !important; }

html:not(.light) :where(
  .surface, .mini-card, .category-tile, .admin-page, .admin-command,
  .admin-analysis-panel, .admin-record-card, .admin-user-card,
  .profile-card, .dossier-command-card, .dossier-record, .dossier-review-card,
  .notification-card, .ticket-card, .support-case-card, .expert-review-card,
  .expert-completed-card, .service-purchase-card, .owner-ad-management-card,
  .expert-subscription-card, .app-dialog-panel, .sheet
) {
  border-color: #365a78 !important;
  color: #fff !important;
  background: #102b45 !important;
  box-shadow: 0 10px 28px rgba(0, 7, 18, .2) !important;
}

html:not(.light) .ad-card-content {
  color: #fff !important;
  background: #102b45 !important;
}

html:not(.light) .ad-card-content :where(h2, p, span, strong, small, time, svg) { color: #fff !important; }
html:not(.light) :where(.ad-card-heading, .ad-card-bottom, .ad-card-actions) { border-color: #365a78 !important; }
html:not(.light) .ad-card-fact { border-color: #365a78 !important; background: #183a58 !important; }
html:not(.light) :where(.ad-card-description, .ad-card-fact small, .ad-card-bottom small) { color: #c7d4e2 !important; }
.ad-card-visual, .ad-card-visual :where(span, strong, small, svg) { color: #fff !important; }

html:not(.light) .content[data-view="home"] > .home-live-tests {
  border-color: #365a78 !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(215, 154, 42, .14), transparent 30%),
    linear-gradient(125deg, #173750 0%, #12334d 50%, #172f51 100%) !important;
  box-shadow: 0 14px 34px rgba(0, 7, 18, .25) !important;
}

html:not(.light) .home-live-tests .section-head h2,
html:not(.light) .home-live-tests .section-head h2 :where(span, svg) { color: #fff !important; }
html:not(.light) .home-live-tests .section-head { border-color: rgba(255, 255, 255, .17) !important; }

.showcase-example-video-frame video {
  object-fit: contain !important;
  background: #020914 !important;
}

.showcase-example-video-frame video:fullscreen,
.showcase-example-video-frame video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000 !important;
}

html:not(.light) .showcase-example-card {
  border-color: #3e6685 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #183d5c, #102b45) !important;
}

html:not(.light) .showcase-example-card :where(h4, p, li, span, strong) { color: #fff !important; }
html:not(.light) .showcase-example-card > .showcase-example-copy > p { color: #c7d4e2 !important; }

@media (max-width: 719px) {
  :where(.form-grid, .admin-filter-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
    gap: 11px !important;
  }
}

html:not(.light) .topbar .icon-btn,
html:not(.light) .topbar .topbar-account,
html:not(.light) .auth-topbar .icon-button,
html:not(.light) .document-brandbar .icon-button {
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  background: #193b58 !important;
}

html:not(.light) .topbar .icon-btn :where(svg, span),
html:not(.light) .topbar .topbar-account :where(svg, span),
html:not(.light) .auth-topbar .icon-button :where(svg, span),
html:not(.light) .document-brandbar .icon-button :where(svg, span) {
  color: #fff !important;
  stroke: currentColor !important;
}

/* ========================================================================
 * v8 scouting workspace
 * Role colour is information: it identifies the kind of talent record or
 * operational queue. Surfaces remain restrained so the colour stays useful.
 * ====================================================================== */
.ad-card {
  --scout-tone: #247bc4;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--scout-tone) 24%, var(--line)) !important;
  border-top: 4px solid var(--scout-tone) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: 0 14px 34px rgba(0, 25, 63, .1) !important;
}

.ad-card-tone-green { --scout-tone: #16865d; }
.ad-card-tone-gold { --scout-tone: #c08216; }
.ad-card-tone-blue { --scout-tone: #247bc4; }
.ad-card-tone-red { --scout-tone: #b84b55; }
.ad-card-tone-violet { --scout-tone: #7957b8; }
.ad-card-tone-cyan { --scout-tone: #167f91; }

.ad-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 0 auto !important;
  height: 4px !important;
  background: var(--scout-tone) !important;
}

.ad-card-visual {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--scout-tone) 78%, #00193f), var(--scout-tone)) !important;
}

.ad-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, .8) 50%, transparent 50.5%),
    radial-gradient(circle at 50% 100%, transparent 0 39px, rgba(255, 255, 255, .85) 40px 41px, transparent 42px);
  pointer-events: none;
}

.ad-card-avatar-fallback { color: rgba(255, 255, 255, .88) !important; }
.ad-card-avatar-fallback .lucide { width: 62px !important; height: 62px !important; }
.ad-card-category { color: var(--scout-tone) !important; }
.ad-card-fact > .lucide { color: var(--scout-tone) !important; }
.ad-card-price strong { color: var(--scout-tone) !important; }
.ad-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--scout-tone) 58%, var(--line)) !important;
  box-shadow: 0 20px 46px color-mix(in srgb, var(--scout-tone) 17%, transparent) !important;
}

html:not(.light) .ad-card {
  background: #102b45 !important;
  box-shadow: 0 15px 36px rgba(0, 7, 18, .28) !important;
}

html:not(.light) .ad-card-fact {
  border-color: color-mix(in srgb, var(--scout-tone) 24%, #365a78) !important;
  background: color-mix(in srgb, var(--scout-tone) 9%, #183a58) !important;
}

#searchResults {
  align-items: stretch !important;
  gap: clamp(14px, 2vw, 22px) !important;
}

#searchResults > .ad-card { height: 100% !important; }

.preview-workbench-intro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-inline-start: 5px solid #247bc4 !important;
}

.preview-workbench-intro h2 { margin: 2px 0 7px !important; }
.preview-workbench-intro p { margin: 0 !important; }

.preview-workbench-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.preview-workbench-card {
  --preview-tone: #247bc4;
  min-width: 0;
  min-height: 210px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 13px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--preview-tone) 25%, var(--line));
  border-radius: 15px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--preview-tone) 8%, var(--surface)), var(--surface) 60%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--preview-tone) 9%, transparent);
}

.preview-workbench-card.tone-green { --preview-tone: #16865d; }
.preview-workbench-card.tone-gold { --preview-tone: #c08216; }
.preview-workbench-card.tone-violet { --preview-tone: #7957b8; }
.preview-workbench-card.tone-cyan { --preview-tone: #167f91; }
.preview-workbench-card.tone-red { --preview-tone: #b84b55; }

.preview-workbench-card > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--preview-tone);
}

.preview-workbench-card > span .lucide { width: 22px; height: 22px; }
.preview-workbench-card strong { display: block; color: var(--text); font-size: 15px; }
.preview-workbench-card p { margin: 6px 0 0; color: var(--muted); line-height: 1.85; font-size: 12px; }
.preview-workbench-card .ghost-btn { width: 100%; color: var(--preview-tone) !important; }

.purchasable-service-fees { border-top: 4px solid #16865d !important; }
.service-fee-purchase-grid > .service-fee-field:nth-of-type(1) { --form-tone: #7957b8; }
.service-fee-purchase-grid > .service-fee-field:nth-of-type(2) { --form-tone: #247bc4; }
.service-fee-purchase-grid > .service-fee-field:nth-of-type(3) { --form-tone: #c08216; }
.service-fee-purchase-grid .service-fee-field {
  border-inline-start: 4px solid var(--form-tone, #16865d) !important;
  padding-inline-start: 13px !important;
}

.admin-workspace .admin-hub-card {
  border-top-color: var(--hub-accent, #247bc4) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--hub-accent, #247bc4) 6%, var(--surface)), var(--surface) 62%) !important;
}

html:not(.light) .preview-workbench-card,
html:not(.light) .admin-workspace .admin-hub-card {
  color: #fff !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--preview-tone, var(--hub-accent, #247bc4)) 12%, #183a58), #102b45 64%) !important;
}

html:not(.light) .preview-workbench-card :where(strong, p) { color: #fff !important; }

@media (max-width: 980px) {
  .preview-workbench-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 620px) {
  .preview-workbench-intro { align-items: flex-start !important; flex-direction: column !important; }
  .preview-workbench-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .preview-workbench-card { min-height: 0; }
  .ad-card-visual { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-card:hover { transform: none !important; }
}

/* Forms catalogue and role consoles: a compact match-day control room. */
.form-directory-page {
  --directory-blue: #247bc4;
  --directory-green: #16865d;
  --directory-gold: #c08216;
  --directory-violet: #7957b8;
  --directory-red: #b84b55;
  --directory-cyan: #167f91;
}

.directory-hero-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-directory-hero .directory-hero-toolbar > .text-btn {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: 10px;
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
}

.form-directory-hero .directory-hero-toolbar > .text-btn:hover,
.form-directory-hero .directory-hero-toolbar > .text-btn:focus-visible {
  background: rgba(255, 255, 255, .17) !important;
}

.directory-debug-badge {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 850;
}

.directory-debug-badge > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd65a;
  box-shadow: 0 0 0 5px rgba(255, 214, 90, .12);
}

.directory-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-top: clamp(28px, 5vw, 58px);
}

.directory-hero-copy h1 {
  max-width: 18ch;
  margin-block: 9px 10px !important;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -.035em;
}

.directory-hero-copy > p:last-child {
  max-width: 72ch;
  margin: 0;
  color: rgba(255, 255, 255, .82) !important;
  font-size: clamp(13px, 1.8vw, 16px);
  line-height: 2;
}

.directory-coverage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 700px;
  margin-top: clamp(24px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 14px;
  background: rgba(255, 255, 255, .17);
}

.directory-coverage > div {
  min-width: 0;
  padding: 13px 15px;
  background: rgba(0, 10, 28, .52);
}

.directory-coverage strong,
.directory-coverage span { display: block; color: #fff !important; }
.directory-coverage strong { font-size: 1.25rem; font-weight: 950; }
.directory-coverage span { margin-top: 2px; opacity: .72; font-size: 11px; }

.directory-jumpbar {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 30px rgba(0, 25, 63, .11);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

.directory-jumpbar::-webkit-scrollbar { display: none; }

.directory-jumpbar a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.directory-jumpbar a:hover,
.directory-jumpbar a:focus-visible {
  color: #fff;
  background: var(--ft-navy-800);
}

.panel-coverage-section { --section-tone: var(--directory-violet) !important; }

.panel-capability-board {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.panel-capability-lane {
  --lane-tone: var(--directory-blue);
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--lane-tone) 26%, var(--line));
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lane-tone) 7%, var(--surface)), var(--surface) 60%);
}

.panel-capability-lane.lane-support { --lane-tone: var(--directory-blue); }
.panel-capability-lane.lane-expert { --lane-tone: var(--directory-green); }
.panel-capability-lane.lane-manager { --lane-tone: var(--directory-gold); }
.panel-capability-lane.lane-admin { --lane-tone: var(--directory-violet); }

.panel-capability-lane > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--lane-tone) 19%, var(--line));
}

.panel-capability-lane > header > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--lane-tone);
  font-size: 16px;
  font-weight: 950;
}

.panel-capability-lane > header strong,
.panel-capability-lane > header small { display: block; }
.panel-capability-lane > header strong { color: var(--text); font-size: 16px; font-weight: 950; }
.panel-capability-lane > header small { margin-top: 3px; color: var(--muted); line-height: 1.75; }

.panel-capability-lane > header > a {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--lane-tone) 38%, var(--line));
  border-radius: 9px;
  color: var(--lane-tone);
  background: var(--surface);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.panel-capability-lane > header > a:hover,
.panel-capability-lane > header > a:focus-visible { color: #fff; background: var(--lane-tone); }

.panel-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.panel-capability-grid a {
  position: relative;
  min-width: 0;
  min-height: 86px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--lane-tone) 16%, var(--line));
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.panel-capability-grid a::before {
  position: absolute;
  inset-block: 13px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--lane-tone);
  content: "";
}

.panel-capability-grid a:hover,
.panel-capability-grid a:focus-visible {
  border-color: color-mix(in srgb, var(--lane-tone) 50%, var(--line));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--lane-tone) 10%, transparent);
  transform: translateY(-2px);
}

.panel-capability-grid strong,
.panel-capability-grid small { display: block; }
.panel-capability-grid strong { color: var(--text); font-size: 13px; font-weight: 900; line-height: 1.7; }
.panel-capability-grid small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.75; }

/* Keep preview forms horizontal on wide screens and put the final action below. */
@media (min-width: 760px) {
  .form-preview-mode :where(.preview-case-card, .admin-page) > .form-grid,
  .form-preview-mode :where(.preview-case-card, .admin-page) form.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 14px 16px !important;
  }

  .form-preview-mode :where(.preview-case-card, .admin-page) form.form-grid > :where(.wide, .action-row, button[type="submit"], button.primary-btn:last-child) {
    grid-column: 1 / -1 !important;
  }

  .form-preview-mode :where(.preview-case-card, .admin-page) form.form-grid > button.primary-btn:last-child {
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
  }
}

.form-preview-mode .preview-case-card {
  overflow: hidden;
  border-top: 4px solid var(--section-tone, var(--directory-blue, #247bc4)) !important;
}

.form-preview-mode .preview-case-heading {
  margin: -2px -2px 0 !important;
  padding: 2px 2px 16px !important;
}

.preview-case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.preview-case-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--directory-blue, #247bc4) 24%, var(--line));
  border-radius: 9px;
  color: var(--directory-blue, #247bc4);
  background: color-mix(in srgb, var(--directory-blue, #247bc4) 6%, var(--surface));
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.preview-case-nav a:hover,
.preview-case-nav a:focus-visible { color: #fff; background: var(--directory-blue, #247bc4); }
.preview-case-nav .lucide { width: 17px; height: 17px; }

.form-preview-mode .preview-case-card .admin-analysis-panel {
  min-width: 0;
  border-color: color-mix(in srgb, var(--directory-blue, #247bc4) 16%, var(--line)) !important;
}

/* The debug banner must stay legible in both themes. */
.form-preview-banner {
  border-color: color-mix(in srgb, var(--directory-gold, #c08216) 46%, var(--line)) !important;
  color: var(--ft-navy-900) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 12px 34px rgba(0, 25, 63, .15) !important;
  backdrop-filter: blur(16px);
}

.form-preview-banner :where(strong, small) { color: var(--ft-navy-900) !important; }
.form-preview-banner small { opacity: .72; }
.form-preview-banner .preview-permissions summary { color: var(--ft-navy-900) !important; background: #f3f7fb !important; }
.form-preview-banner .ghost-btn { color: var(--ft-navy-900) !important; background: #fff !important; }

html:not(.light) .form-preview-banner {
  border-color: rgba(150, 193, 232, .34) !important;
  color: #fff !important;
  background: rgba(8, 32, 55, .96) !important;
}

html:not(.light) .form-preview-banner :where(strong, small) { color: #fff !important; }
html:not(.light) .form-preview-banner .preview-permissions summary,
html:not(.light) .form-preview-banner .ghost-btn {
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

html:not(.light) .panel-capability-lane {
  background: linear-gradient(135deg, color-mix(in srgb, var(--lane-tone) 14%, #102b45), #102b45 62%);
}

html:not(.light) .panel-capability-grid a,
html:not(.light) .panel-capability-lane > header > a { background: #163752; }

@media (max-width: 980px) {
  .panel-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .directory-hero-toolbar { align-items: flex-start; }
  .directory-debug-badge { min-height: 34px; padding: 6px 9px; font-size: 10px; }
  .directory-hero-copy { margin-top: 28px; }
  .directory-hero-copy h1 { max-width: none; font-size: 1.85rem !important; }
  .directory-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-jumpbar { width: 100%; justify-content: flex-start; }
  .panel-capability-lane { padding: 13px; }
  .panel-capability-lane > header { grid-template-columns: 42px minmax(0, 1fr); }
  .panel-capability-lane > header > span { width: 42px; height: 42px; }
  .panel-capability-lane > header > a { grid-column: 1 / -1; width: 100%; text-align: center; }
  .panel-capability-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-capability-grid a { min-height: 72px; }
  .form-preview-banner { top: 4px; width: calc(100% - 16px); padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-capability-grid a { transition: none; }
  .panel-capability-grid a:hover { transform: none; }
}

/* ========================================================================
 * v9 — scouting cards, compact role home and bounded search controls
 * ====================================================================== */

/* The role greeting is context, not a billboard. It stays a single compact
   command strip on wide screens and a short, legible card on phones. */
.home-command:has(> .role-command-card) {
  margin-bottom: 0 !important;
}

.role-command-card {
  --role-command-tone: var(--ft-blue);
  min-height: 88px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px 20px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--role-command-tone) 28%, var(--line)) !important;
  border-inline-start: 5px solid var(--role-command-tone) !important;
  border-radius: 15px !important;
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--role-command-tone) 10%, var(--surface)),
    var(--surface) 58%) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--role-command-tone) 10%, transparent) !important;
}

.role-command-support { --role-command-tone: #b84b55; }
.role-command-expert { --role-command-tone: #c08216; }
.role-command-buyer { --role-command-tone: #247bc4; }
.role-command-admin { --role-command-tone: #16865d; }
.role-command-technical { --role-command-tone: #167f91; }
.role-command-user { --role-command-tone: #16865d; }

.role-command-card .home-command-lead { gap: 12px !important; }
.role-command-card .command-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--role-command-tone) !important;
}
.role-command-card .command-icon :where(svg, i) { color: #fff !important; }
.role-command-card .home-command-lead strong { font-size: 15px !important; line-height: 1.5; }
.role-command-card .home-command-lead span:not(.command-icon) {
  margin-top: 1px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}
.role-command-card > :where(button, .home-command-actions) { justify-self: end; }
.role-command-card .home-command-actions { flex-wrap: nowrap !important; }
.role-command-card :where(.primary-btn, .ghost-btn) { min-height: 42px !important; white-space: nowrap; }

html:not(.light) .role-command-card {
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--role-command-tone) 17%, #183a58), #102b45 66%) !important;
}
html:not(.light) .role-command-card .home-command-lead span:not(.command-icon) { color: #c7d4e2 !important; }

/* The profile identity header is a brand-colour surface in both themes. */
html.light .profile-card,
html.light .profile-card :where(h1, h2, h3, p, span, strong, small) {
  color: #fff !important;
}

/* Search categories use one stable colour per professional family. */
.role-picker .category-tile { --category-tone: #247bc4; --module-tone: var(--category-tone); }
.role-picker [data-search-group="player"] { --category-tone: #16865d; --category-tone-alt: #c08216; }
.role-picker [data-search-group="coach"] { --category-tone: #247bc4; }
.role-picker [data-search-group="medical"] { --category-tone: #b84b55; }
.role-picker [data-search-group="executive"] { --category-tone: #7957b8; }
.role-picker [data-search-group="media"] { --category-tone: #167f91; }

.role-picker .category-tile {
  position: relative !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--category-tone) 28%, var(--line)) !important;
  background: linear-gradient(138deg,
    color-mix(in srgb, var(--category-tone) 11%, var(--surface)),
    var(--surface) 70%) !important;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--category-tone) 65%, transparent) !important;
}
.role-picker .category-tile .category-icon {
  color: #fff !important;
  background: var(--category-tone) !important;
}
.role-picker .category-tile.active {
  color: #fff !important;
  background: linear-gradient(135deg,
    var(--category-tone),
    var(--category-tone-alt, color-mix(in srgb, var(--category-tone) 62%, var(--ft-navy-900)))) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--category-tone) 24%, transparent) !important;
}
.role-picker .category-tile.active :where(strong, span, small, svg) { color: #fff !important; }
html:not(.light) .role-picker .category-tile:not(.active) {
  background: linear-gradient(138deg,
    color-mix(in srgb, var(--category-tone) 14%, #183a58), #102b45 70%) !important;
}

/* No unbounded free-text filter is exposed. Sorting remains a compact utility
   and score bounds only appear after choosing records with an expert score. */
.search-toolbar {
  grid-template-columns: minmax(220px, 320px) !important;
  justify-content: end !important;
}
.search-sort-field { width: 100%; }
.search-score-range { animation: ft-rise .2s ease both; }

/* Result cards read like scouting dossiers: identity on a club-colour panel,
   facts in aligned cells, and one unmistakable primary action. */
#searchResults .ad-card {
  min-height: 320px !important;
  grid-template-columns: minmax(168px, 34%) minmax(0, 1fr) !important;
  border-radius: 18px !important;
}
#searchResults .ad-card-visual {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
#searchResults .ad-card-content { padding: clamp(15px, 2vw, 20px) !important; }
#searchResults .ad-card-heading { padding-bottom: 12px !important; }
#searchResults .ad-card h2 { margin-block: 6px 3px !important; font-size: clamp(18px, 2vw, 23px) !important; }
.ad-card-category { flex-wrap: wrap; }
.ad-card-verified {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-inline-start: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--scout-tone);
  font-size: 9px;
  font-weight: 900;
}
.ad-card-verified .lucide { width: 12px !important; height: 12px !important; color: #fff !important; }
#searchResults .ad-card-facts { margin-block: 13px !important; }
#searchResults .ad-card-fact {
  min-height: 62px !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--scout-tone) 7%, var(--surface)) !important;
}
#searchResults .ad-card-fact strong { font-size: 12px !important; }
#searchResults .ad-card-description { min-height: 48px !important; }
#searchResults .ad-view-btn {
  min-height: 48px !important;
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg,
    var(--scout-tone), color-mix(in srgb, var(--scout-tone) 66%, var(--ft-navy-900))) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--scout-tone) 20%, transparent) !important;
}
#searchResults .ad-view-btn :where(span, svg) { color: #fff !important; }

/* Dossier sheet is above the sticky portal chrome and has a bounded desktop
   width. Colour follows the same record family as the search card. */
.sheet-backdrop { z-index: 150 !important; background: rgba(0, 11, 29, .62) !important; }
.sheet { z-index: 151 !important; }
.player-detail { --detail-tone: #247bc4; }
.player-detail.detail-tone-green { --detail-tone: #16865d; }
.player-detail.detail-tone-gold { --detail-tone: #c08216; }
.player-detail.detail-tone-blue { --detail-tone: #247bc4; }
.player-detail.detail-tone-red { --detail-tone: #b84b55; }
.player-detail.detail-tone-violet { --detail-tone: #7957b8; }
.player-detail.detail-tone-cyan { --detail-tone: #167f91; }
.player-detail .detail-profile-hero {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--detail-tone) 34%, var(--line)) !important;
  border-top: 5px solid var(--detail-tone) !important;
  border-radius: 18px !important;
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--detail-tone) 15%, var(--surface)),
    var(--surface) 64%) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--detail-tone) 12%, transparent) !important;
}
.player-detail .detail-code,
.player-detail .detail-highlight-score strong,
.player-detail .detail-panel-head > span .lucide { color: var(--detail-tone) !important; }
.player-detail .detail-panel {
  border: 1px solid color-mix(in srgb, var(--detail-tone) 18%, var(--line)) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--detail-tone) 7%, transparent) !important;
}
.player-detail .detail-stat { border-radius: 12px !important; }
.player-detail .detail-actions {
  border-color: color-mix(in srgb, var(--detail-tone) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}
html:not(.light) .player-detail .detail-profile-hero {
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--detail-tone) 18%, #183a58), #102b45 66%) !important;
}
html:not(.light) .player-detail .detail-panel { background: #102b45 !important; }

.app-dialog-backdrop { z-index: 170 !important; }
.app-dialog-backdrop.dismiss-only .app-dialog-head { grid-template-columns: 48px minmax(0, 1fr) !important; }
.app-dialog-actions.single-action { grid-template-columns: minmax(0, 1fr) !important; }
.app-dialog-actions.single-action #dialogConfirm { width: 100%; }

@media (min-width: 1024px) {
  .profile-primary > .profile-review-actions {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
  }

  .profile-primary > .profile-review-actions .primary-btn {
    width: 100% !important;
  }

  [data-view="home"].content {
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  [data-view="home"].content > .home-command {
    grid-column: 1 / -1 !important;
  }

  [data-view="home"].content > .home-live-tests {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  [data-view="home"].content > .metric-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    align-self: stretch !important;
  }

  [data-view="home"].content > .metric-row .metric strong {
    font-size: clamp(30px, 3vw, 42px) !important;
  }

  .form-preview-mode .admin-workspace #adminQueues {
    display: block !important;
    width: 100% !important;
  }

  .form-preview-mode .admin-workspace #adminQueues:empty {
    display: none !important;
  }

  .form-preview-mode .admin-workspace #adminQueues:empty + #adminList {
    grid-row: 3 / span 2 !important;
  }

  .form-preview-mode .admin-workspace .preview-workbench-intro {
    width: 100% !important;
    min-height: 0 !important;
    margin-bottom: 16px !important;
  }

  .form-preview-mode .admin-workspace .preview-workbench-grid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.light .admin-workspace .admin-command :where(
    #consoleKicker,
    #consoleTitle,
    #consoleDescription,
    .title-with-icon,
    .title-with-icon span,
    .title-with-icon svg,
    .title-with-icon .lucide
  ) {
    color: #fff !important;
  }

  .sheet {
    inset: 24px max(24px, calc((100vw - var(--ft-content)) / 2)) 24px auto !important;
    width: min(980px, calc(100vw - 48px)) !important;
    max-height: none !important;
    padding: 30px 26px 26px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 719px) {
  .role-command-card {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 12px !important;
  }
  .role-command-card > :where(button, .home-command-actions) { width: 100%; justify-self: stretch; }
  .role-command-card .home-command-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-command-card .home-command-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .role-command-card > button { width: 100%; }

  .hero {
    min-height: 300px !important;
    height: clamp(300px, 43vh, 345px) !important;
    max-height: 345px !important;
  }
  .hero-content { padding: 18px 16px 20px !important; gap: 7px !important; }
  .hero-content h1 { font-size: clamp(2.05rem, 11vw, 2.8rem) !important; }
  .hero-copy { font-size: 13px !important; line-height: 1.72 !important; }
  .hero .eyebrow { min-height: 29px !important; font-size: 11px !important; }
  .hero-actions { margin-top: 3px !important; }

  .search-toolbar { grid-template-columns: minmax(0, 1fr) !important; }
  #searchResults .ad-card {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #searchResults .ad-card-visual { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
  #searchResults .ad-card-facts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sheet {
    max-height: 94dvh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .player-detail .detail-profile-identity { align-items: flex-start; }
  .player-detail .detail-profile-highlight { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .hero { min-height: 286px !important; height: 286px !important; }
  .hero-actions { display: none !important; }
  .role-command-card .home-command-actions { grid-template-columns: minmax(0, 1fr); }
  #searchResults .ad-card-facts { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Interaction-layer contract: sheets and dialogs must always cover the fixed
   mobile navigation, while health/navigation chrome remains untouched when no
   overlay is open. */
.sheet-backdrop { z-index: 300 !important; }
.sheet { z-index: 301 !important; }
.app-dialog-backdrop { z-index: 320 !important; }
body:is(.sheet-open, .dialog-open, .media-preview-open) nav.bottom-nav {
  pointer-events: none !important;
}

/* Keep workflow states semantic after the broad theme-level chip rules. */
html.light .status-pill.status-tone-success {
  border-color: #79c8a8 !important;
  color: #087647 !important;
  background: #eaf8f1 !important;
}
html.light .status-pill.status-tone-danger {
  border-color: #e5a1aa !important;
  color: #a51f2d !important;
  background: #fff0f2 !important;
}
html.light .status-pill.status-tone-warning {
  border-color: #e5bd76 !important;
  color: #7c4b00 !important;
  background: #fff7e7 !important;
}
html.light .status-pill.status-tone-info {
  border-color: #8dbce2 !important;
  color: #115c9a !important;
  background: #edf7ff !important;
}
html.light .status-pill.status-tone-pending {
  border-color: #b6a7df !important;
  color: #5e45a6 !important;
  background: #f4f0ff !important;
}
html:not(.light) .status-pill.status-tone-success {
  border-color: #3c8f6b !important;
  color: #98f0c5 !important;
  background: #133f32 !important;
}
html:not(.light) .status-pill.status-tone-danger {
  border-color: #a6525d !important;
  color: #ffb4bd !important;
  background: #4b222a !important;
}
html:not(.light) .status-pill.status-tone-warning {
  border-color: #a7762d !important;
  color: #ffd28d !important;
  background: #49371a !important;
}
html:not(.light) .status-pill.status-tone-info {
  border-color: #4f86b3 !important;
  color: #add9ff !important;
  background: #173d5c !important;
}
html:not(.light) .status-pill.status-tone-pending {
  border-color: #7561aa !important;
  color: #d0c2ff !important;
  background: #332a53 !important;
}
.status-pill[class*="status-tone-"] :where(span, svg, .lucide) { color: inherit !important; }

/* Case-only previews use the desktop canvas and must not inherit the
   role-preview mobile navigation from later design layers. */
.form-preview-mode:not(.role-preview-mode) nav.bottom-nav {
  display: none !important;
}
.form-preview-mode:not(.role-preview-mode).has-app-nav,
.form-preview-mode:not(.role-preview-mode) .app-shell {
  padding-bottom: 0 !important;
}

/* Stand-alone document pages share the application theme control. */
.document-brandbar {
  justify-content: space-between !important;
  gap: 12px !important;
}
.document-theme-toggle {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  border: 1px solid #d7e1eb;
  border-radius: 12px;
  color: #00193f;
  background: #f7fafe;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.document-theme-toggle:hover {
  border-color: #8ca8c4;
  background: #eef5fb;
  transform: translateY(-1px);
}
.document-theme-toggle:focus-visible {
  outline: 3px solid rgba(36, 123, 196, .32);
  outline-offset: 3px;
}
.document-theme-toggle svg { width: 21px; height: 21px; color: currentColor !important; }
.document-theme-toggle .document-theme-sun { display: none; }
html:not(.light) .document-theme-toggle {
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
html:not(.light) .document-theme-toggle .document-theme-moon { display: none; }
html:not(.light) .document-theme-toggle .document-theme-sun { display: block; }

.site-footer-social .social-link.is-unavailable {
  opacity: .58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
html.light .site-footer-social .social-link.is-unavailable:hover {
  color: #00193f !important;
  background: #f5f8fb !important;
}
html:not(.light) .site-footer-social .social-link.is-unavailable:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

@media (prefers-reduced-motion: reduce) {
  .document-theme-toggle { transition: none; }
  .document-theme-toggle:hover { transform: none; }
}

/* Home expert preview: a quiet, lazy video loop gives the card a living
 * visual without turning it into a player or adding another interaction. */
.home-live-tests .live-test-card {
  display: grid !important;
  grid-template-columns: minmax(460px, 1.28fr) minmax(280px, .72fr) !important;
  align-items: stretch !important;
  min-height: 320px !important;
  padding: 16px !important;
  gap: clamp(16px, 3vw, 30px) !important;
  text-align: start !important;
}

.home-live-tests .live-test-loop {
  position: relative;
  display: block !important;
  width: 100%;
  height: auto;
  min-height: 286px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  background: #001126;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 18, 45, .22);
}

.home-live-tests .live-test-loop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0, 25, 63, .18), transparent 52%, rgba(255, 255, 255, .12));
  pointer-events: none;
}

.home-live-tests .live-test-loop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.home-live-tests .live-test-loop-badge {
  position: absolute;
  z-index: 1;
  inset: 7px auto auto 7px;
  display: inline-flex !important;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff !important;
  background: rgba(0, 25, 63, .58);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.home-live-tests .live-test-loop-badge svg { width: 13px; height: 13px; }

.home-live-tests .live-test-copy {
  display: flex !important;
  min-width: 0;
  align-self: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px !important;
  padding: 10px 4px;
  text-align: start !important;
}

.home-live-tests .live-test-copy-head {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 11px;
  font-weight: 850;
}

.home-live-tests .live-test-icon {
  display: grid !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  place-items: center;
}

.home-live-tests .live-test-copy > strong {
  font-size: clamp(1.35rem, 3vw, 2rem) !important;
  line-height: 1.35 !important;
}

.home-live-tests .live-test-copy > small {
  max-width: 52ch;
  color: rgba(255, 255, 255, .88) !important;
  font-size: clamp(.78rem, 1.5vw, .93rem) !important;
  line-height: 1.95 !important;
}

.home-live-tests .live-test-cta {
  display: inline-flex !important;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 10px;
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
  font-size: 11px;
  font-weight: 900;
}

.home-live-tests .live-test-cta svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 719px) {
  .home-live-tests .live-test-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
  }
  .home-live-tests .live-test-loop {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .home-live-tests .live-test-copy { gap: 8px !important; padding: 9px 7px 7px; }
  .home-live-tests .live-test-icon { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .home-live-tests .live-test-copy > strong { font-size: 1.28rem !important; }
  .home-live-tests .live-test-copy > small { font-size: 11px !important; line-height: 1.8 !important; }
  .home-live-tests .live-test-cta { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .home-live-tests .live-test-loop video { animation: none !important; }
}

/* Give the sample enough room to be inspected rather than treating it as a
 * thumbnail.  Metrics remain compact above it and the opportunity owns a
 * full-width row on desktop. */
@media (min-width: 1024px) {
  [data-view="home"].content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-view="home"].content > .home-command {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  [data-view="home"].content > .metric-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-view="home"].content > .home-live-tests {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

@media (min-width: 720px) and (max-width: 959px) {
  .home-live-tests .live-test-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .home-live-tests .live-test-loop {
    min-height: 0;
  }
}

/* Compact home masthead: keep the pitch and message prominent without making
 * the background image consume most of the first viewport. */
.hero {
  min-height: 350px !important;
  height: clamp(350px, 38vw, 410px) !important;
  max-height: 410px !important;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .hero {
    min-height: 320px !important;
    height: 340px !important;
    max-height: 340px !important;
  }
  .hero-content { padding-block: 24px !important; }
}

@media (max-width: 719px) {
  .hero {
    min-height: 260px !important;
    height: clamp(260px, 72vw, 295px) !important;
    max-height: 295px !important;
  }
}

@media (max-width: 380px) {
  .hero { min-height: 250px !important; height: 250px !important; }
}

/* Cinematic home film ----------------------------------------------------
 * The source is a real, muted H.264 loop streamed through the internal S3
 * gateway; the poster remains a lightweight fallback for reduced motion. */
.hero-story {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #001126;
  isolation: isolate;
}

.hero-story-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #001126;
}

.hero-story-energy {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .5;
  background:
    radial-gradient(circle at 20% 73%, rgba(34, 184, 255, .4), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(255, 185, 42, .34), transparent 19%),
    linear-gradient(100deg, rgba(0, 25, 63, .08), transparent 48%, rgba(255, 221, 129, .08));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ft-hero-energy 4s ease-in-out infinite alternate;
}

html:not(.light) .hero-story-video { filter: brightness(.7) saturate(.88) contrast(1.08); }
html:not(.light) .hero-story-energy { opacity: .32; }

@keyframes ft-hero-energy {
  from { transform: scale(1); filter: saturate(.94); }
  to { transform: scale(1.045); filter: saturate(1.22); }
}

/* About/contact: two explicit routes, without publishing private contacts. */
.about-contact {
  display: grid !important;
  grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(18px, 4vw, 42px) !important;
  border-top: 4px solid var(--ft-green) !important;
}

.about-contact-copy { min-width: 0; }
.about-contact-copy h2 { margin: 8px 0 10px; color: var(--text); }
.about-contact-copy .legal-body { color: var(--muted); font-size: 14px; line-height: 2; }

.about-contact-actions { display: grid; gap: 11px; }
.about-contact-card {
  --contact-tone: var(--ft-blue);
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  min-height: 84px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--contact-tone) 28%, var(--line));
  border-radius: 13px;
  color: var(--text) !important;
  background: linear-gradient(115deg, color-mix(in srgb, var(--contact-tone) 10%, var(--surface)), var(--surface) 70%);
  box-shadow: 0 8px 20px rgba(0, 25, 63, .07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-contact-instagram { --contact-tone: #c13584; }
.about-contact-phone { --contact-tone: #168a63; }
.about-contact-telegram { --contact-tone: #229ed9; }
.about-contact-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--contact-tone) 54%, var(--line));
  box-shadow: 0 13px 28px rgba(0, 25, 63, .12);
}
.about-contact-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #fff !important;
  background: var(--contact-tone);
}
.about-contact-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-contact-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.about-contact-card strong { color: var(--text) !important; font-size: 14px; }
.about-contact-card small { color: var(--muted) !important; font-size: 11px; line-height: 1.75; }
.about-contact-arrow { color: var(--contact-tone) !important; font-size: 21px; font-weight: 900; }

html.light .site-footer-social .social-instagram:hover,
html:not(.light) .site-footer-social .social-instagram:hover {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #833ab4, #fd1d1d 58%, #fcb045) !important;
}

.legal-rules-body {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ft-blue) 4%, var(--surface)), var(--surface));
}

@media (max-width: 719px) {
  .hero-story-video { object-position: 52% center !important; }
  .hero-story-energy { opacity: .35; }
  .about-contact { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .about-contact-card { grid-template-columns: 42px minmax(0, 1fr) 20px; min-height: 76px; padding: 10px; }
  .about-contact-icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-story-video { animation: none !important; }
  .hero-story-energy { animation: none !important; }
  .about-contact-card { transition: none; }
}

/* Interactive anime kick -------------------------------------------------
 * One authored moment carries the motion: a hand-drawn captain inside a
 * disciplined stadium frame. The surrounding UI stays quiet and readable. */
html .kickoff-cta {
  min-height: 420px !important;
  border: 1px solid color-mix(in srgb, #00193f 76%, #fff) !important;
  border-radius: 14px !important;
  background: #00193f !important;
  box-shadow: 0 22px 52px rgba(0, 25, 63, .22), inset 0 0 0 1px rgba(255, 255, 255, .09) !important;
}

html .kickoff-cta::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 0 50%, rgba(255, 255, 255, .05) 50.5% 51%, transparent 51.5%),
    linear-gradient(105deg, transparent 0 62%, rgba(255, 255, 255, .035) 62.5% 63%, transparent 63.5%);
  mask: none;
  opacity: .72;
  animation: none;
}

html .kickoff-cta::after {
  right: auto;
  left: -9%;
  bottom: -48%;
  width: 54%;
  height: 92%;
  background: radial-gradient(circle, rgba(176, 31, 22, .13), rgba(0, 25, 63, .08) 48%, transparent 73%);
  filter: blur(20px);
  animation: ft-kickoff-stadium-breathe 5.8s ease-in-out infinite alternate;
}

html .kickoff-canvas {
  filter: saturate(1.06) contrast(1.035);
  transform: scale(1.002);
}

html .kickoff-cta.is-kicking .kickoff-canvas {
  filter: saturate(1.2) contrast(1.08) brightness(1.04);
  transform: scale(1.025);
}

html .kickoff-scene-shade,
html.light .kickoff-scene-shade {
  background:
    radial-gradient(circle at 25% 62%, transparent 0 20%, rgba(0, 25, 63, .08) 43%, transparent 66%),
    linear-gradient(90deg, transparent 5% 43%, rgba(0, 25, 63, .18) 57%, rgba(0, 18, 47, .92) 100%),
    linear-gradient(0deg, rgba(0, 18, 47, .5), transparent 50%);
}

html .kickoff-kicker {
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  background: rgba(0, 25, 63, .68) !important;
  box-shadow: 0 8px 20px rgba(0, 25, 63, .2) !important;
  backdrop-filter: blur(8px);
}

html .kickoff-copy > strong {
  color: #fff !important;
  text-shadow: 0 3px 22px rgba(0, 12, 34, .72) !important;
}

html .primary-btn.kickoff-button {
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 10px !important;
  color: #00193f !important;
  background: #fff !important;
  box-shadow: 0 13px 28px rgba(0, 10, 32, .28), inset 4px 0 0 #b01f16 !important;
}

html .primary-btn.kickoff-button:hover {
  color: #00193f !important;
  background: #f5f8fc !important;
  transform: translateY(-2px) !important;
}

html .primary-btn.kickoff-button > span,
html .primary-btn.kickoff-button > svg,
html .primary-btn.kickoff-button > i,
html .primary-btn.kickoff-button .lucide {
  color: #00193f !important;
  stroke: currentColor !important;
}

html .kickoff-fallback {
  background: #00193f url("./media/kickoff/kickoff-anime-stadium-v1.c6af443b4d51.webp") center / cover no-repeat;
}

html:not(.light) .kickoff-fallback {
  background-image: url("./media/kickoff/kickoff-anime-stadium-dark-v1.d64aad8b0437.webp");
}

@keyframes ft-kickoff-stadium-breathe {
  from { opacity: .52; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .82; transform: translate3d(4%, -3%, 0) scale(1.08); }
}

@media (max-width: 719px) {
  html .kickoff-cta { min-height: 350px !important; }
  html .kickoff-copy { width: 58% !important; padding: 16px 14px 82px !important; }
  html .kickoff-copy > strong { font-size: 19px !important; line-height: 1.55; }
  html .kickoff-copy > span:not(.kickoff-kicker) { font-size: 12px; line-height: 1.65; }
  html .kickoff-scene-shade,
  html.light .kickoff-scene-shade {
    background:
      radial-gradient(circle at 28% 44%, transparent 0 22%, rgba(0, 25, 63, .08) 48%, transparent 68%),
      linear-gradient(90deg, transparent 0 35%, rgba(0, 25, 63, .34) 54%, rgba(0, 18, 47, .94) 100%),
      linear-gradient(0deg, rgba(0, 18, 47, .44), transparent 54%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html .kickoff-cta::after { animation: none; }
}

/* Ten-second fantasy home reel -------------------------------------------
 * The football/futsal story is the masthead background itself. The asymmetric
 * shade keeps the RTL copy readable without boxing it away from the action. */
.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 18%, rgba(32, 129, 213, .18), transparent 30%),
    linear-gradient(130deg, #001126, #00193f 56%, #062a58) !important;
}

.hero-story {
  z-index: 1;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 25, 63, .04), rgba(0, 15, 42, .16)),
    url("./media/home/football-talent-home-directional-poster-v9.554cc566b8a1.jpg") center / cover no-repeat;
  box-shadow: none;
}

.hero-story::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px;
  background: url("./media/home/football-talent-home-directional-poster-v9.554cc566b8a1.jpg") center / cover no-repeat;
  filter: blur(14px) brightness(.72) saturate(.88);
  transform: scale(1.04);
  pointer-events: none;
}

.hero-story::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 70%, rgba(44, 167, 231, .12), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(255, 193, 68, .08), transparent 26%);
  box-shadow: inset 0 0 45px rgba(0, 13, 36, .22);
  pointer-events: none;
}

.hero-story-video {
  z-index: 1;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: brightness(.88) saturate(1.06) contrast(1.045) !important;
}

html:not(.light) .hero-story-video {
  filter: brightness(.72) saturate(.94) contrast(1.09) !important;
}

.hero-story-energy {
  z-index: 2;
  opacity: .17;
  background:
    linear-gradient(90deg, rgba(13, 135, 220, .16), transparent 40% 65%, rgba(222, 161, 43, .12)),
    linear-gradient(0deg, rgba(0, 18, 47, .25), transparent 42%) !important;
  mix-blend-mode: screen;
}

.hero-shade,
html:not(.light) .hero-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 12, 34, .08) 0 35%, rgba(0, 25, 63, .52) 58%, rgba(0, 10, 29, .94) 100%),
    linear-gradient(0deg, rgba(0, 11, 30, .34), transparent 62%) !important;
  pointer-events: none;
}

.hero-content {
  position: absolute !important;
  z-index: 3;
  inset: 0 0 0 auto !important;
  width: min(64%, 760px) !important;
  max-width: 760px !important;
  padding-inline: clamp(30px, 5vw, 68px) clamp(20px, 3.5vw, 48px) !important;
}

.hero-content .hero-copy {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .hero-content {
    width: 66% !important;
    padding-inline: 28px 22px !important;
  }

  .hero-content h1 { font-size: clamp(2.3rem, 6vw, 3.45rem) !important; }
  .hero-copy { font-size: 13px !important; line-height: 1.85 !important; }
}

@media (max-width: 719px) {
  .hero-story-video { object-position: center center !important; }

  .hero-shade,
  html:not(.light) .hero-shade {
    background:
      linear-gradient(90deg, rgba(0, 12, 34, .16) 0 27%, rgba(0, 25, 63, .64) 52%, rgba(0, 9, 28, .97) 100%),
      linear-gradient(0deg, rgba(0, 11, 30, .5), transparent 67%) !important;
  }

  .hero-content {
    width: 69% !important;
    min-height: 100% !important;
    justify-content: center !important;
    padding: 16px 16px 18px 10px !important;
    gap: 7px !important;
  }

  .hero .eyebrow {
    min-height: 29px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
    line-height: 1.5;
  }

  .hero .eyebrow svg { width: 15px !important; height: 15px !important; }
  .hero-content h1 { font-size: clamp(1.72rem, 8.2vw, 2.25rem) !important; line-height: 1.15 !important; }
  .hero-copy { font-size: 10px !important; line-height: 1.75 !important; }
  .hero-actions { width: auto !important; margin-top: 4px !important; }
  .hero-actions > * { width: auto !important; min-height: 38px !important; padding-inline: 11px !important; font-size: 10px !important; }
}

@media (max-width: 380px) {
  .hero-content { width: 72% !important; padding-inline: 12px 8px !important; }
  .hero-content h1 { font-size: 1.72rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-story-video { visibility: hidden; }
}

/* Hero media fit contract: always show the complete 16:9 story.  A subdued
 * poster wash fills aspect-ratio gaps without cropping or zooming the film. */
.hero {
  overflow: hidden !important;
  contain: paint;
  clip-path: inset(0 round 14px);
}

.hero-story {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  contain: paint;
}

.hero-story-video {
  inset: auto !important;
  top: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .hero-story-video { object-position: 50% 48% !important; }
}

@media (max-width: 719px) {
  .hero { clip-path: inset(0 round 12px); }
  .hero-story-video { object-position: 50% 50% !important; }
}

/* ========================================================================
 * Full-width operational consoles
 * Keep the header and every role console on the same horizontal grid. The
 * old 230px desktop rail made the actual work area unnecessarily narrow.
 * ====================================================================== */
.admin-workspace {
  width: min(calc(100% - 32px), var(--ft-content)) !important;
  max-width: var(--ft-content) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.admin-workspace > :where(.admin-command, .admin-metrics, .panel-tabs, #adminQueues, #adminList) {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.admin-workspace > .admin-command { order: 1; }
.admin-workspace > .admin-metrics { order: 2; }
.admin-workspace > .panel-tabs { order: 3; }
.admin-workspace > #adminQueues { order: 4; }
.admin-workspace > #adminList { order: 5; }

.admin-workspace > .panel-tabs {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 7px !important;
  padding: 7px !important;
  overflow: visible !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  box-shadow: var(--ft-shadow) !important;
}

.admin-workspace > .panel-tabs > button {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 2px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  text-align: right !important;
}

.admin-workspace > .panel-tabs > button.active {
  border-color: color-mix(in srgb, var(--ft-blue) 24%, var(--line)) !important;
  border-inline-start: 4px solid var(--ft-blue) !important;
  background: color-mix(in srgb, var(--ft-blue) 8%, var(--surface)) !important;
  box-shadow: none !important;
}

.admin-workspace > :where(#adminQueues, #adminList) > *,
.admin-workspace .admin-page,
.admin-workspace .admin-toolbar,
.admin-workspace .admin-wide-page,
.admin-workspace .dossier-page {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.support-management-access {
  --section-tone: var(--ft-blue);
  padding: 0 !important;
  overflow: hidden;
}

.support-management-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.support-management-grid > button {
  width: 100%;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-2);
  text-align: right;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.support-management-grid > button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ft-blue) 34%, var(--line));
  box-shadow: 0 10px 24px rgba(0, 25, 63, .1);
}

.support-management-grid > button > span:nth-child(2) { min-width: 0; }
.support-management-grid strong,
.support-management-grid small { display: block; }
.support-management-grid strong { color: var(--text); font-size: 13px; }
.support-management-grid small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.7; }

.support-management-icon {
  width: 44px;
  height: 44px;
  display: grid !important;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ft-blue);
}
.support-management-icon.tone-green { background: var(--ft-green); }
.support-management-icon.tone-gold { background: var(--ft-gold); }
.support-management-icon.tone-violet { background: var(--ft-violet); }
.support-management-icon.tone-cyan { background: var(--ft-cyan); }
.support-management-icon.tone-coral { background: var(--ft-red); }
.support-management-icon.tone-slate { background: #52647a; }
.support-management-icon svg { width: 21px; height: 21px; }

.manager-management-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.admin-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-report-actions > button { min-height: 38px; }

.report-lifecycle-grid > div {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 1px 9px;
}

.report-lifecycle-grid > div > svg {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 9px;
  color: var(--ft-blue);
  background: color-mix(in srgb, var(--ft-blue) 9%, var(--surface));
}

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

.report-health-grid > div {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.report-health-grid span { color: var(--muted); font-size: 11px; }
.report-health-grid strong { color: var(--text); font-size: 20px; }

.admin-scope-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--ft-blue) 22%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--ft-blue) 6%, var(--surface));
}
.admin-scope-notice > svg { color: var(--ft-blue); }
.admin-scope-notice :where(strong, span) { display: block; }
.admin-scope-notice span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.8; }

html:not(.light) .support-management-grid > button,
html:not(.light) .admin-scope-notice {
  background: color-mix(in srgb, var(--surface) 92%, #fff 8%);
}

@media (max-width: 1023px) {
  .admin-workspace { width: min(calc(100% - 24px), var(--ft-content)) !important; }
  .admin-workspace > .panel-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .admin-workspace > .panel-tabs > button { flex: 0 0 min(168px, 46vw) !important; }
  .support-management-grid { grid-template-columns: minmax(0, 1fr); }
  .manager-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .admin-workspace { width: min(calc(100% - 20px), var(--ft-content)) !important; gap: 10px !important; }
  .admin-workspace > .panel-tabs { padding: 5px !important; border-radius: 11px !important; }
  .admin-workspace > .panel-tabs > button {
    flex-basis: 142px !important;
    min-height: 56px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    padding: 7px 8px !important;
  }
  .support-management-grid { padding: 10px; gap: 8px; }
  .manager-management-grid { grid-template-columns: minmax(0, 1fr); }
  .support-management-grid > button { min-height: 82px; padding: 10px; }
  .admin-report-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  .admin-report-actions > button { width: 100%; }
  .report-health-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Operational panels: explicit contrast, compact money blocks and readable
   status semantics. These rules intentionally do not target the home page. */
html.light .admin-workspace > .panel-tabs > button,
html.light .admin-workspace > .panel-tabs > button :where(span, small, svg) {
  color: var(--ft-blue) !important;
}

html:not(.light) .admin-workspace > .panel-tabs > button,
html:not(.light) .admin-workspace > .panel-tabs > button :where(span, small, svg) {
  color: #fff !important;
}

html:not(.light) .admin-workspace > .panel-tabs > button.active {
  background: color-mix(in srgb, var(--ft-blue) 66%, var(--surface)) !important;
  border-color: color-mix(in srgb, #fff 25%, var(--line)) !important;
}

.technical-metric,
.technical-check-card {
  --technical-tone: var(--ft-green);
  border-color: color-mix(in srgb, var(--technical-tone) 44%, var(--line)) !important;
  background: color-mix(in srgb, var(--technical-tone) 7%, var(--surface)) !important;
}

.technical-metric.status-warning,
.technical-check-card.status-warning { --technical-tone: #d79100; }
.technical-metric.status-critical,
.technical-check-card.status-critical { --technical-tone: #c92a2a; }
.technical-metric.status-unknown { --technical-tone: #66758a; }

.technical-metric .metric-icon,
.technical-check-card .technical-check-state {
  color: #fff !important;
  background: var(--technical-tone) !important;
}

.technical-check-card.is-confirmed { opacity: 1 !important; }
.technical-check-card.is-confirmed > button { opacity: .68; }

.technical-current-problem {
  margin-top: 8px;
  padding: 9px 11px;
  border-inline-start: 4px solid var(--technical-tone);
  border-radius: 9px;
  background: color-mix(in srgb, var(--technical-tone) 8%, var(--surface));
}

.technical-current-problem > span {
  display: block;
  color: var(--technical-tone);
  font-size: 11px;
  font-weight: 900;
}

.technical-current-problem > p {
  margin: 3px 0 0 !important;
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 750;
}

.technical-check-details {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.technical-check-details > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.technical-check-details dl {
  display: grid;
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.8;
}

.technical-check-details dt { color: var(--technical-tone); font-weight: 900; }
.technical-check-details dd { min-width: 0; margin: 0; color: var(--muted); overflow-wrap: anywhere; }

.provider-state.is-test {
  color: #8a5b00;
  border-color: color-mix(in srgb, #d79100 38%, var(--line));
  background: color-mix(in srgb, #d79100 10%, var(--surface));
}

html:not(.light) .provider-state.is-test { color: #ffd166; }

.expert-purchase-quote {
  min-width: 190px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ft-green) 35%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ft-green) 8%, var(--surface));
}

.expert-purchase-quote span { color: var(--muted); font-size: 10px; font-weight: 800; }
.expert-purchase-quote strong,
.service-purchase-price strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-kv :where(dt, dd),
.expert-subscription-meta > div,
.service-purchase-card,
.service-purchase-head,
.service-purchase-head > div {
  min-width: 0;
}

.admin-kv dd,
.expert-subscription-meta strong,
.expert-subscription-meta span,
.service-purchase-card p {
  overflow-wrap: anywhere;
}

.admin-workspace :where(.section-head, .section-head > div, .mini-card, .admin-page, .admin-analysis-panel),
[data-view="expert-subscription"] :where(.section-head, .section-head > div),
[data-view="my-ads"] :where(.section-head, .section-head > div) {
  min-width: 0;
  max-width: 100%;
}

.admin-workspace :where(.code, .chip, strong, dd),
[data-view="expert-subscription"] :where(.code, .chip, strong),
[data-view="my-ads"] :where(.code, .chip, strong) {
  overflow-wrap: anywhere;
}

.transaction-management-card .chip-row,
.expert-subscription-card .chip-row {
  align-items: stretch;
}

.transaction-management-card .chip-row > *,
.expert-subscription-card .chip-row > * {
  max-width: 100%;
}

@media (max-width: 719px) {
  .admin-workspace .section-head,
  [data-view="expert-subscription"] .section-head,
  [data-view="my-ads"] .section-head {
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .admin-workspace .section-head > :where(button, .status-pill, .chip),
  [data-view="expert-subscription"] .section-head > :where(button, .status-pill, .chip),
  [data-view="my-ads"] .section-head > :where(button, .status-pill, .chip) {
    width: fit-content;
    max-width: 100%;
  }
  .technical-check-card {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  .technical-check-card .technical-check-state { width: 36px; height: 36px; }
  .technical-check-card > button { grid-column: 1 / -1; width: 100%; }
  .technical-check-details dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .technical-check-details dd { margin-bottom: 6px; }
  .technical-provider-strip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-state { min-width: 0; justify-content: flex-start; padding: 7px 9px; font-size: 10px; }
  .expert-subscription-meta,
  .service-purchase-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-subscription-meta > div { min-height: 64px; padding: 9px 10px; }
  .expert-subscription-meta strong { font-size: clamp(12px, 3.7vw, 15px); }
  .expert-purchase-quote { width: 100%; min-width: 0; text-align: center; }
  .expert-subscription-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .expert-subscription-actions > * { width: 100% !important; min-width: 0; }
  .service-purchase-card { padding: 13px !important; }
  .service-purchase-head { align-items: start; }
  .service-purchase-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
  .service-purchase-price strong { font-size: clamp(20px, 7vw, 28px) !important; }
  .admin-kv { grid-template-columns: minmax(96px, .38fr) minmax(0, 1fr) !important; }
  .admin-kv :where(dt, dd) { padding: 8px !important; font-size: 11px !important; }
  .admin-workspace .admin-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-workspace .admin-rate-grid > div { min-width: 0; min-height: 66px; padding: 9px !important; }
  .admin-workspace .admin-rate-grid strong { font-size: clamp(14px, 4.5vw, 20px) !important; overflow-wrap: anywhere; }
  .admin-workspace .admin-rate-grid span { font-size: 10px !important; line-height: 1.6; }
}

@media (max-width: 390px) {
  .technical-provider-strip { grid-template-columns: minmax(0, 1fr); }
  .admin-kv { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-kv dt { padding-bottom: 2px !important; }
  .admin-kv dd { padding-top: 2px !important; }
  .admin-workspace .admin-rate-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ========================================================================
 * Mobile-first pitch v24
 * 95% of the audience works from a phone. Operational screens therefore use
 * dense touch-safe rows, short cards and progressive disclosure instead of a
 * desktop dashboard stacked into one very long column.
 * ====================================================================== */
.mobile-report-summary { display: none; }
.mobile-report-body { min-width: 0; }

@media (max-width: 1023px) {
  .admin-workspace .admin-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .admin-workspace .admin-hub-card {
    min-height: 128px !important;
    padding: 12px !important;
    gap: 5px 8px !important;
    border-radius: 13px !important;
    box-shadow: 0 6px 18px rgba(0, 25, 63, .07) !important;
  }

  .admin-workspace .admin-hub-card::before { inset-block: 12px !important; }
  .admin-workspace .admin-hub-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .admin-workspace .admin-hub-icon svg { width: 18px !important; height: 18px !important; }
  .admin-workspace .admin-hub-card .admin-hub-title { font-size: 12px !important; line-height: 1.55 !important; }
  .admin-workspace .admin-hub-card > strong { font-size: 21px !important; }
  .admin-workspace .admin-hub-card > small {
    min-height: 0 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .admin-workspace .admin-hub-action { min-height: 32px !important; font-size: 10px !important; }

  .mobile-report-fold {
    padding: 0 !important;
    overflow: clip;
  }

  .mobile-report-summary {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    background: linear-gradient(105deg, color-mix(in srgb, var(--ft-blue) 7%, var(--surface)), var(--surface));
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-report-summary::-webkit-details-marker { display: none; }
  .mobile-report-summary-copy { min-width: 0; display: grid; gap: 2px; }
  .mobile-report-summary-copy strong { color: var(--text); font-size: 13px; font-weight: 900; }
  .mobile-report-summary-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mobile-report-summary > b {
    max-width: 92px;
    overflow: hidden;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--ft-blue);
    background: color-mix(in srgb, var(--ft-blue) 9%, var(--surface));
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mobile-report-chevron {
    width: 9px;
    height: 9px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
  }
  .mobile-report-fold[open] .mobile-report-chevron { transform: rotate(225deg); }
  .mobile-report-body { padding: 0 11px 11px; border-top: 1px solid var(--line); }
  .mobile-report-body > :where(h2, .section-head):first-child { display: none !important; }
  .mobile-report-has-action .mobile-report-body > .section-head:first-child {
    display: flex !important;
    margin-top: 9px !important;
  }
  .mobile-report-has-action .mobile-report-body > .section-head:first-child h2 { display: none !important; }

  .admin-analysis-grid { gap: 9px !important; }
  .admin-analysis-panel { border-radius: 13px !important; }
  .admin-workspace .admin-table-wrap { border-radius: 10px !important; }
  .admin-workspace .admin-table { min-width: 520px; }
  .admin-workspace .admin-table :where(th, td) { padding: 8px 9px !important; font-size: 10px !important; }
}

@media (max-width: 719px) {
  :root {
    --mobile-page-gutter: 10px;
    --mobile-card-radius: 14px;
    --mobile-control-height: 46px;
  }

  body { -webkit-text-size-adjust: 100%; }

  .content {
    width: calc(100% - (var(--mobile-page-gutter) * 2)) !important;
    gap: 11px !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  :where(.surface, .admin-page, .admin-command, .admin-analysis-panel, .admin-decision-box,
    .profile-card, .mini-card, .service-card, .support-case-card, .admin-record-card,
    .transaction-management-card, .expert-subscription-card) {
    border-radius: var(--mobile-card-radius) !important;
  }

  .admin-workspace {
    width: calc(100% - (var(--mobile-page-gutter) * 2)) !important;
    gap: 8px !important;
  }

  .admin-command {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 12px !important;
  }
  html.light .admin-command :where(.section-kicker, h2, h2 span, h2 svg, p, .admin-role-chip, .text-btn, .text-btn span, .text-btn svg),
  html:not(.light) .admin-command :where(.section-kicker, h2, h2 span, h2 svg, p, .admin-role-chip, .text-btn, .text-btn span, .text-btn svg) {
    color: #fff !important;
  }
  .admin-command .admin-role-chip,
  .admin-command .text-btn {
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .09) !important;
  }
  .admin-command-copy { min-width: 0; }
  .admin-command .section-kicker { margin-bottom: 2px !important; font-size: 9px !important; }
  .admin-command h2 { margin: 0 !important; font-size: 17px !important; line-height: 1.45 !important; }
  .admin-command h2 svg { width: 18px !important; height: 18px !important; }
  .admin-command-copy > p:last-child {
    margin: 2px 0 0 !important;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.55 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .admin-command-actions {
    width: auto !important;
    display: grid !important;
    justify-items: end;
    gap: 4px !important;
  }
  .admin-role-chip { max-width: 92px; padding: 4px 7px !important; font-size: 9px !important; }
  .admin-command-actions .text-btn {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  .admin-workspace > .panel-tabs {
    gap: 5px !important;
    padding: 5px !important;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none !important;
  }
  .admin-workspace > .panel-tabs::-webkit-scrollbar { display: none; }
  .admin-workspace > .panel-tabs > button {
    flex: 0 0 112px !important;
    min-height: 48px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
    scroll-snap-align: start;
  }
  .admin-workspace > .panel-tabs > button > svg { width: 17px !important; height: 17px !important; }
  .admin-workspace > .panel-tabs > button span { font-size: 11px !important; }
  .admin-workspace > .panel-tabs > button small { display: none !important; }

  .admin-metrics,
  .metric-row.admin-metrics {
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, 66px) !important;
    grid-auto-columns: minmax(148px, 42vw) !important;
    grid-auto-flow: column !important;
    gap: 7px !important;
    padding: 1px 1px 5px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }
  .admin-workspace .admin-metrics .metric {
    min-height: 66px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
    scroll-snap-align: start;
  }
  .admin-workspace .admin-metrics .metric::before { inset-block: 10px !important; }
  .admin-workspace .admin-metrics .metric > div { min-width: 0; display: grid; gap: 2px; }
  .admin-workspace .admin-metrics .metric strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(17px, 5.2vw, 22px) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal !important;
  }
  .admin-workspace .admin-metrics .metric span { font-size: 10px !important; line-height: 1.45 !important; }
  .admin-workspace .metric-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 9px !important; }
  .admin-workspace .metric-icon svg { width: 17px !important; height: 17px !important; }

  .admin-workspace .admin-hub { gap: 7px !important; }
  .admin-workspace .admin-hub-card {
    min-height: 112px !important;
    padding: 9px !important;
    gap: 4px 6px !important;
  }
  .admin-workspace .admin-hub-card::before { inset-block: 9px !important; width: 2px !important; }
  .admin-workspace .admin-hub-icon { width: 31px !important; height: 31px !important; border-radius: 9px !important; }
  .admin-workspace .admin-hub-icon svg { width: 16px !important; height: 16px !important; }
  .admin-workspace .admin-hub-arrow { width: 14px !important; height: 14px !important; }
  .admin-workspace .admin-hub-card .admin-hub-title { font-size: 11px !important; }
  .admin-workspace .admin-hub-card > strong { font-size: 18px !important; }
  .admin-workspace .admin-hub-card > small { font-size: 9px !important; line-height: 1.5 !important; }
  .admin-workspace .admin-hub-action { min-height: 29px !important; padding: 5px 6px !important; font-size: 9px !important; }

  .admin-daily-head,
  .support-user-search-panel,
  .admin-page,
  .admin-analysis-panel,
  .admin-decision-box,
  .admin-record-card { padding: 10px !important; }

  .section-head { gap: 7px !important; margin-bottom: 8px !important; }
  .section-head h2 { font-size: 14px !important; line-height: 1.55 !important; }
  .section-head p { margin-top: 2px !important; font-size: 10px !important; line-height: 1.6 !important; }
  .section-head :where(.chip, .status-pill) { padding: 4px 7px !important; font-size: 9px !important; }

  .admin-report-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .admin-report-actions > button { min-height: 42px !important; padding: 7px !important; font-size: 10px !important; }
  .admin-report-actions > button:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .admin-workspace .admin-rate-grid,
  .report-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .admin-workspace .admin-rate-grid > div,
  .report-health-grid > div { min-height: 58px !important; padding: 7px 8px !important; }
  .admin-workspace .admin-rate-grid strong,
  .report-health-grid strong { font-size: 17px !important; }
  .admin-workspace .admin-rate-grid span,
  .report-health-grid span { font-size: 9px !important; }

  .admin-bars { gap: 8px !important; }
  .admin-bar-row { gap: 4px !important; }
  .admin-bar-row > div:first-child { font-size: 10px !important; }
  .admin-bar { height: 5px !important; }

  .support-management-grid,
  .manager-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }
  .support-management-grid > button {
    min-height: 76px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
  }
  .support-management-grid > button > svg:last-child { display: none; }
  .support-management-icon { width: 32px !important; height: 32px !important; border-radius: 9px !important; }
  .support-management-icon svg { width: 16px !important; height: 16px !important; }
  .support-management-grid strong { font-size: 10px !important; }
  .support-management-grid small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .admin-user-filters,
  .admin-filter-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; }
  .admin-user-list,
  .admin-record-grid,
  .admin-detail-columns,
  .admin-settings-list { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .admin-user-card { min-height: 0 !important; gap: 9px !important; padding: 11px !important; }
  .admin-user-card-head strong { font-size: 14px !important; }
  .admin-user-card-head p { font-size: 10px !important; line-height: 1.6 !important; }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .primary-btn, .ghost-btn, .outline-btn) { min-height: var(--mobile-control-height); }
  :where(input, select, textarea) { font-size: 16px !important; }
  textarea { min-height: 96px !important; }
  .form-grid, .admin-edit-grid { gap: 9px !important; }
  .field, .admin-edit-field { gap: 5px !important; }
  .field > span, .admin-edit-field > span { font-size: 11px !important; }
  .form-hint { font-size: 9px !important; line-height: 1.6 !important; }

  .upload-grid,
  .media-upload-grid,
  .documents-upload-grid,
  .video-grid { gap: 8px !important; }
  .upload-slot { padding: 10px !important; border-radius: 12px !important; }
  .file-picker { min-height: 44px !important; }

  .action-row { gap: 7px !important; }
  .action-row > :where(button, a) { flex: 1 1 calc(50% - 7px) !important; min-width: 0 !important; }
  .pagination-actions { gap: 6px !important; }
  .pagination-actions > * { min-width: 0 !important; }

  .sheet {
    width: 100% !important;
    max-width: none !important;
    max-height: min(88dvh, 760px) !important;
    inset: auto 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  @media (hover: none) {
    :where(.surface, .mini-card, .admin-hub-card, .admin-record-card):hover { transform: none !important; }
  }
}

@media (max-width: 374px) {
  :root { --mobile-page-gutter: 8px; }
  .admin-workspace .admin-hub-card { min-height: 108px !important; padding: 8px !important; }
  .admin-workspace .admin-hub-card > small { -webkit-line-clamp: 1; }
  .admin-workspace .admin-metrics .metric { padding-inline: 8px !important; }
  .admin-command { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-command-actions { grid-template-columns: auto auto !important; justify-content: space-between; justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-report-chevron { transition: none !important; }
}

/* ========================================================================
 * Mobile product pass v25
 * The portal behaves like a football operations app on phones: current state
 * first, one clear next action, compact touch-safe modules and horizontal
 * progress rails where a desktop column would otherwise become very long.
 * ====================================================================== */
#adminMetrics:empty,
#adminQueues:empty,
#adminList:empty,
#notificationList:empty,
#ordersList:empty,
#expertSubscriptionSummary:empty,
#expertSubscriptionList:empty { display: none !important; }

@media (max-width: 1023px) {
  .user-journey-status {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    min-height: 74px !important;
    padding: 9px 10px !important;
  }
  .user-journey-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .user-journey-icon svg { width: 18px !important; height: 18px !important; }
  .user-journey-copy strong { font-size: 13px !important; line-height: 1.55 !important; }
  .user-journey-copy span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .user-journey-status .ghost-btn {
    grid-column: auto !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .expert-review-steps {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-columns: minmax(132px, 34vw) !important;
    grid-auto-flow: column !important;
    gap: 7px !important;
    padding: 2px 2px 6px !important;
    overflow-x: auto !important;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
  }
  .expert-review-step {
    min-height: 84px !important;
    padding: 9px !important;
    scroll-snap-align: start;
  }
  .expert-review-step::before { width: 22px !important; height: 22px !important; margin-bottom: 5px !important; font-size: 10px !important; }
  .expert-review-step strong { font-size: 11px !important; }
  .expert-review-step small { font-size: 9px !important; line-height: 1.5 !important; }
}

@media (max-width: 719px) {
  /* Preview mode is used by the client on a phone too; it should not consume
     a quarter of the first viewport. */
  .form-preview-banner {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 9px !important;
    margin: 6px auto !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }
  .form-preview-banner strong { font-size: 11px !important; line-height: 1.5 !important; }
  .form-preview-banner small { font-size: 9px !important; line-height: 1.45 !important; }
  .form-preview-banner-actions { gap: 5px !important; }
  .form-preview-banner-actions > * { flex: 0 1 auto !important; }
  .preview-permissions summary,
  .form-preview-banner-actions .ghost-btn {
    width: auto !important;
    min-height: 36px !important;
    justify-content: center;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
  }
  .form-preview-banner-actions .ghost-btn { max-width: 92px; line-height: 1.35 !important; }

  .topbar { min-height: 56px !important; height: 56px !important; }
  .brand-logo { height: 44px !important; }
  .topbar .icon-btn { width: 40px !important; min-width: 40px !important; min-height: 40px !important; }

  .user-journey-status {
    width: calc(100% - 20px) !important;
    margin-top: 8px !important;
  }

  .profile-card {
    min-height: 78px !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    padding: 10px 12px !important;
  }
  .profile-card .avatar { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; font-size: 16px !important; }
  .profile-card h2 { margin: 0 !important; font-size: 17px !important; line-height: 1.45 !important; }
  .profile-card p { margin: 2px 0 0 !important; font-size: 10px !important; line-height: 1.5 !important; }

  .profile-action-surface { gap: 8px !important; padding: 10px !important; }
  .profile-action-head { display: grid !important; gap: 8px !important; }
  .profile-action-head h3 { margin-top: 1px !important; font-size: 14px !important; }
  .profile-action-head .support-eyebrow { font-size: 9px !important; }
  .profile-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .profile-action-buttons > :where(button, a) {
    min-width: 0 !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 4px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
  .profile-action-buttons > :where(button, a) svg { width: 16px !important; height: 16px !important; }
  .profile-action-buttons .account-logout-icon { width: auto !important; min-width: 0 !important; }
  .profile-action-buttons > .hidden { display: none !important; }
  .profile-password-form { padding-top: 8px !important; }

  #profileAvatarBox,
  #profileDetailsBox,
  #documentsBox { padding: 10px !important; }
  #profileAvatarBox > h2,
  #profileDetailsBox > h2,
  #documentsBox > h2 { margin-bottom: 8px !important; font-size: 15px !important; }
  .profile-phone-readonly { padding: 8px 10px !important; font-size: 11px !important; }
  .profile-avatar-upload { min-height: 92px !important; }

  .form-completion-notice {
    min-height: 58px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
  .form-completion-notice svg { width: 17px !important; height: 17px !important; }
  .form-section-heading {
    min-height: 60px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }
  .form-section-heading > span { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  .form-section-heading > span svg { width: 17px !important; height: 17px !important; }
  .form-section-heading strong { font-size: 12px !important; line-height: 1.55 !important; }
  .form-section-heading small { margin-top: 1px !important; font-size: 9px !important; line-height: 1.5 !important; }

  .media-upload-panel { gap: 9px !important; padding: 10px !important; border-radius: 13px !important; }
  .media-panel-head { gap: 7px !important; margin-bottom: 8px !important; }
  .media-panel-head h3 { font-size: 14px !important; }
  .media-panel-head p { margin-top: 2px !important; font-size: 9px !important; line-height: 1.55 !important; }
  .media-panel-head .chip { padding: 4px 7px !important; font-size: 9px !important; }
  .upload-slot { min-height: 96px !important; padding: 9px !important; }
  .upload-head { gap: 7px !important; }
  .upload-icon { width: 34px !important; height: 34px !important; }
  .upload-head strong { font-size: 11px !important; }
  .upload-head span { font-size: 9px !important; }

  .role-picker,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .role-picker .category-tile,
  .category-grid .category-tile {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: 1px 7px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }
  .role-picker .category-icon,
  .category-grid .category-icon { grid-row: 1 / 3; width: 32px !important; height: 32px !important; border-radius: 9px !important; }
  .role-picker .category-icon svg,
  .category-grid .category-icon svg { width: 17px !important; height: 17px !important; }
  .role-picker .category-tile strong,
  .category-grid .category-tile strong { font-size: 11px !important; line-height: 1.45 !important; }
  .role-picker .category-tile span:not(.category-icon),
  .category-grid .category-tile span:not(.category-icon) {
    overflow: hidden;
    font-size: 9px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .search-head { gap: 7px !important; margin-bottom: 8px !important; }
  .search-head h2 { font-size: 15px !important; }
  .search-head p { font-size: 10px !important; line-height: 1.55 !important; }
  .search-head > button { width: auto !important; min-height: 38px !important; padding: 6px 9px !important; }
  #searchResults .ad-card-visual { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
  #searchResults .ad-card-content { padding: 10px !important; }
  #searchResults .ad-card h2 { font-size: 16px !important; }
  #searchResults .ad-card-facts { gap: 6px !important; margin-block: 8px !important; }
  #searchResults .ad-card-fact { min-height: 52px !important; padding: 7px !important; }
  #searchResults .ad-card-description {
    min-height: 0 !important;
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.65 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .owner-ad-management-card { padding: 10px !important; }
  .owner-ad-management-card .detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .owner-ad-management-card .detail-stats > * { min-height: 54px !important; padding: 7px !important; }
  .ad-services-callout {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-block: 9px !important;
    padding: 9px !important;
  }
  .ad-services-callout-icon { width: 36px !important; height: 36px !important; }
  .ad-services-callout strong { font-size: 11px !important; }
  .ad-services-callout p { font-size: 9px !important; line-height: 1.5 !important; }
  .ad-services-callout .primary-btn { grid-column: 1 / -1 !important; min-height: 42px !important; }

  .expert-subscription-page { padding: 10px !important; }
  .expert-subscription-page > .section-head .action-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expert-subscription-summary .metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .expert-subscription-summary .metric {
    min-height: 68px !important;
    padding: 7px !important;
  }
  .expert-subscription-summary .metric strong { font-size: 15px !important; overflow-wrap: normal !important; }
  .expert-subscription-summary .metric span { font-size: 9px !important; line-height: 1.4 !important; }
  .expert-subscription-filters { margin-block: 8px !important; }
  .expert-subscription-filters > * { min-height: 40px !important; padding: 6px 9px !important; font-size: 10px !important; }
  .expert-subscription-list { gap: 9px !important; margin-top: 9px !important; }
  .expert-subscription-card,
  .expert-subscription-list > .mini-card {
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .expert-subscription-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .expert-subscription-meta > div { min-height: 58px !important; padding: 7px 8px !important; border-radius: 10px !important; }
  .expert-subscription-meta strong { font-size: 11px !important; }
  .expert-subscription-meta span { font-size: 9px !important; }
  .expert-review-current { padding: 8px 9px !important; font-size: 10px !important; line-height: 1.6 !important; }
  .expert-subscription-list > .mini-card > .evaluation-timeline:not(details) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .expert-subscription-list > .mini-card > .evaluation-timeline:not(details) > div {
    min-height: 58px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
  }
  .expert-subscription-list > .mini-card > .evaluation-timeline strong { font-size: 10px !important; }
  .expert-subscription-list > .mini-card > .evaluation-timeline small { font-size: 9px !important; }

  .notification-card {
    grid-template-columns: 38px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
    min-height: 76px !important;
    padding: 9px !important;
  }
  .notification-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
  .notification-icon svg { width: 18px !important; height: 18px !important; }
  .notification-content > strong { font-size: 11px !important; }
  .notification-content p { font-size: 9px !important; line-height: 1.5 !important; }
  .notification-meta { font-size: 9px !important; }
  .notification-open { width: 36px !important; min-width: 36px !important; min-height: 36px !important; }

  .ticket-message { padding: 9px 10px !important; border-radius: 11px !important; }
  .ticket-message p { font-size: 11px !important; line-height: 1.75 !important; }
  .ticket-message > div { font-size: 9px !important; }

  .ad-submit-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .ad-submit-readiness { grid-column: 1 / -1; font-size: 9px !important; }
  .ad-submit-actions .primary-btn { min-width: 0 !important; }

  nav.bottom-nav {
    scroll-snap-type: inline mandatory;
    scrollbar-width: none !important;
  }
  nav.bottom-nav::-webkit-scrollbar { display: none; }
  nav.bottom-nav > :where(button, a) { scroll-snap-align: center; }
}

@media (max-width: 374px) {
  .form-preview-banner small { display: none !important; }
  .user-journey-status { grid-template-columns: 32px minmax(0, 1fr) !important; }
  .user-journey-status .ghost-btn { grid-column: 1 / -1 !important; width: 100% !important; }
  .profile-action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-picker .category-tile,
  .category-grid .category-tile { grid-template-columns: 28px minmax(0, 1fr) !important; }
  .role-picker .category-icon,
  .category-grid .category-icon { width: 28px !important; height: 28px !important; }
}

/* Final mobile readability overrides (must follow compact-pass rules). */
.trust-seal-fallback {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text) !important;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 719px) {
  body :is(.topbar-identity small, nav.bottom-nav > :where(button, a) small,
    .section-kicker, .section-head p, .section-head :where(.chip, .status-pill),
    .form-preview-banner small, .preview-mode-note, .user-journey-copy span,
    .expert-review-step small, .form-hint, .form-section-heading small,
    .media-panel-head p, .media-panel-head .chip, .upload-head span,
    .ad-services-callout p, .expert-subscription-summary .metric span,
    .expert-subscription-meta span, .expert-subscription-list > .mini-card > .evaluation-timeline small,
    .notification-content p, .notification-meta, .ticket-message > div,
    .ad-submit-readiness, .admin-workspace .admin-hub-card > small,
    .admin-workspace .admin-hub-action, .report-health-grid span,
    .support-management-grid small, .admin-command .section-kicker,
    .admin-role-chip, .admin-workspace .admin-metrics .metric span,
    .admin-workspace .admin-rate-grid span) { font-size: 11px !important; }
  body :is(.hero-copy, .profile-card p, .search-head p, .expert-review-current,
    .ad-card-description, .admin-user-card-head p) { font-size: 12px !important; }
  .profile-action-head .support-eyebrow,
  .profile-action-buttons > :where(button, a), .admin-table :where(th, td),
  .expert-subscription-filters > * { font-size: 11px !important; }
  .ticket-message p { font-size: 12px !important; }
  body :is(.primary-btn, .ghost-btn, .outline-btn, .text-btn, .file-picker,
    .ad-view-btn, .ad-save-btn, .notification-open, .social-link) { min-height: 42px !important; }
  body .file-picker { min-height: 44px !important; }
  body :is(.ad-save-btn, .notification-open, .social-link) { min-width: 42px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================
 * Final panel geometry contract
 * Persian UI copy must never collapse into letter-by-letter vertical strips.
 * Optional controls own optional columns; ordinary text keeps a usable inline
 * measure on phone, tablet and desktop across every operational panel.
 * ====================================================================== */
.admin-user-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.admin-user-card-head.has-select {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.admin-user-card-identity {
  min-width: 0;
  max-width: 100%;
  direction: rtl;
  text-align: right;
}

.admin-user-card-identity > .code {
  width: fit-content;
  max-width: 100%;
}

.admin-user-card-identity > strong {
  max-width: 100%;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.admin-user-card-identity > p {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

:where(
  .admin-workspace,
  [data-view="expert-subscription"],
  [data-view="my-ads"],
  [data-view="support"],
  [data-view="notifications"],
  [data-view="orders"]
) :where(
  h1, h2, h3, h4, p, label, legend, summary, dt, dd, strong, small,
  button, .chip, .status-pill, .support-case-type, .activity-note
) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

:where(
  .admin-workspace,
  [data-view="expert-subscription"],
  [data-view="my-ads"],
  [data-view="support"],
  [data-view="notifications"],
  [data-view="orders"]
) :where(.code, [data-copy-value], .tracking-copy-value) {
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.admin-workspace :where(
  .admin-page, .admin-page-list, .admin-user-list, .admin-user-card,
  .mini-card, .support-case-card, .evaluation-support-card,
  .expert-review-card, .transaction-management-card, .admin-record-card,
  .admin-analysis-panel, .section-head, .section-head > div,
  .support-case-head, .support-case-head > div, .chip-row, .action-row,
  .dossier-record, .dossier-record-head, .dossier-record-head > div,
  .admin-related-row, .admin-related-row > span, .admin-activity-row > div
) {
  min-width: 0 !important;
  max-width: 100%;
}

.admin-workspace :where(.chip-row, .action-row) {
  display: flex;
  flex-wrap: wrap !important;
  align-items: center;
}

.admin-workspace .chip-row > :where(.chip, .status-pill) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

.admin-user-card .action-row > :where(button, a),
.support-case-card .action-row > :where(button, a),
.evaluation-support-card .action-row > :where(button, a),
.transaction-management-card .action-row > :where(button, a) {
  flex: 1 1 150px;
  min-width: min(100%, 140px) !important;
}

@media (min-width: 720px) {
  .admin-user-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
    align-items: stretch;
  }

  .admin-user-card {
    min-width: 360px !important;
  }

  .admin-workspace .admin-page-list > .mini-card,
  .admin-workspace .stack > .mini-card {
    width: 100%;
  }
}

@media (max-width: 719px) {
  .admin-user-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-user-card {
    width: 100%;
    min-width: 0 !important;
  }

  .admin-user-card-head.has-select {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }

  .admin-user-card .action-row > :where(button, a),
  .support-case-card .action-row > :where(button, a),
  .evaluation-support-card .action-row > :where(button, a),
  .transaction-management-card .action-row > :where(button, a) {
    flex-basis: min(100%, 148px) !important;
  }

  .admin-workspace :where(.section-head, .support-case-head) {
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ========================================================================
 * Expert workbench — evidence first, one clear action per case
 * This block intentionally comes last so older dashboard layers cannot
 * collapse the expert workflow or compromise light/dark readability.
 * ====================================================================== */
.console-role-expert {
  --expert-blue: #1f6fba;
  --expert-green: #17825c;
  --expert-gold: #c88712;
  --expert-violet: #7154b3;
  --expert-cyan: #148fa3;
  --expert-panel: var(--surface);
  --expert-soft: color-mix(in srgb, var(--expert-blue) 5%, var(--surface));
  --expert-border: color-mix(in srgb, var(--expert-blue) 20%, var(--line));
}

.console-role-expert .admin-command {
  min-height: 118px;
  border: 1px solid color-mix(in srgb, var(--expert-blue) 32%, var(--line)) !important;
  background:
    radial-gradient(circle at 9% 15%, color-mix(in srgb, var(--expert-cyan) 34%, transparent), transparent 15rem),
    linear-gradient(125deg, var(--ft-navy-900), var(--ft-navy-800)) !important;
}

.console-role-expert .admin-command :where(h2, p, .section-kicker, .admin-role-chip, .text-btn, svg) {
  color: #fff !important;
}

.console-role-expert > .admin-metrics,
.console-role-expert > .metric-row.admin-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.console-role-expert .admin-metrics .metric {
  position: relative;
  min-height: 84px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--metric-tone, var(--expert-blue)) 24%, var(--line)) !important;
  background: color-mix(in srgb, var(--metric-tone, var(--expert-blue)) 6%, var(--surface)) !important;
}

.console-role-expert .admin-metrics .metric::after {
  content: "";
  position: absolute;
  inset: auto auto -24px -18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--metric-tone, var(--expert-blue)) 10%, transparent);
  pointer-events: none;
}

.console-role-expert .admin-metrics .metric-blue { --metric-tone: var(--expert-blue); }
.console-role-expert .admin-metrics .metric-green { --metric-tone: var(--expert-green); }
.console-role-expert .admin-metrics .metric-gold { --metric-tone: var(--expert-gold); }
.console-role-expert .admin-metrics .metric-violet { --metric-tone: var(--expert-violet); }
.console-role-expert .admin-metrics .metric-cyan { --metric-tone: var(--expert-cyan); }

.console-role-expert .admin-metrics .metric-icon {
  color: #fff !important;
  background: var(--metric-tone, var(--expert-blue)) !important;
}

.console-role-expert #adminQueues {
  gap: 18px !important;
}

.expert-workflow-intro {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--expert-violet) 28%, var(--line)) !important;
  background:
    radial-gradient(circle at 8% 25%, color-mix(in srgb, var(--expert-violet) 13%, transparent), transparent 14rem),
    linear-gradient(140deg, color-mix(in srgb, var(--expert-blue) 5%, var(--surface)), var(--surface)) !important;
}

.expert-intro-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--expert-blue), var(--expert-violet));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--expert-blue) 22%, transparent);
}

.expert-intro-icon svg { width: 31px; height: 31px; }
.expert-intro-copy { min-width: 0; }
.expert-intro-copy h2 { margin: 3px 0 2px !important; color: var(--text) !important; font-size: clamp(18px, 2vw, 23px); line-height: 1.6; }
.expert-intro-copy > p { max-width: 720px; color: var(--muted) !important; line-height: 1.85; }

.expert-intro-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.expert-intro-steps > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--expert-blue) 18%, var(--line));
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.expert-intro-steps b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #fff;
  background: var(--expert-blue);
  font-size: 10px;
}

.expert-intro-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 8px;
  min-width: 0;
}

.expert-intro-actions > button { width: 100%; }

.expert-dashboard-section {
  min-width: 0;
  padding: clamp(14px, 2.2vw, 24px) !important;
  scroll-margin-top: 110px;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

.expert-dashboard-section.expert-active-queue { border-top: 4px solid var(--expert-blue) !important; }
.expert-dashboard-section.expert-completed-section { border-top: 4px solid var(--expert-green) !important; }
.expert-dashboard-section.expert-private-notes { border-top: 4px solid var(--expert-violet) !important; }

.expert-section-heading {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  margin-bottom: 15px !important;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.expert-section-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: var(--case-tone, var(--expert-blue));
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--case-tone, var(--expert-blue)) 20%, transparent);
}

.expert-completed-section .expert-section-number { --case-tone: var(--expert-green); }
.expert-private-notes .expert-section-number { --case-tone: var(--expert-violet); }
.expert-section-heading > div { min-width: 0; }
.expert-section-heading h2 { margin: 1px 0 0 !important; color: var(--text) !important; font-size: 18px; line-height: 1.6; }
.expert-section-heading p { margin-top: 2px !important; color: var(--muted) !important; line-height: 1.75; }

.expert-active-list,
.expert-completed-list {
  gap: 14px !important;
}

.expert-review-card {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--case-tone, var(--expert-blue)) 28%, var(--line)) !important;
  border-radius: 17px !important;
  background: var(--surface) !important;
  box-shadow: 0 9px 25px color-mix(in srgb, var(--ft-navy-900) 7%, transparent) !important;
}

.expert-review-card::before { height: 5px !important; }

.expert-case-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 19px 20px 16px !important;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--case-tone, var(--expert-blue)) 5%, var(--surface));
}

.expert-case-head > div:first-child { min-width: 0; }
.expert-case-head h3 { margin: 4px 0 1px; color: var(--text); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; }
.expert-case-head .code { margin: 2px 0 0; width: fit-content; color: var(--muted); font-size: 12px; font-weight: 800; }

.expert-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  min-width: 0;
  align-items: start;
}

.expert-case-evidence {
  min-width: 0;
  padding: 18px 20px 20px;
  border-inline-end: 1px solid var(--line);
}

.expert-subject-review {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.expert-evidence-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.expert-evidence-head > div:first-child {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.expert-block-icon,
.expert-media-head > span,
.expert-action-zone-head > span,
.expert-form-intro > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #fff;
  background: var(--case-tone, var(--expert-blue));
}

.expert-block-icon svg,
.expert-media-head svg,
.expert-action-zone-head svg,
.expert-form-intro svg { width: 20px; height: 20px; }

.expert-fact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

.expert-fact-grid > div {
  display: grid !important;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 70px;
  padding: 10px 11px !important;
  border: 1px solid color-mix(in srgb, var(--case-tone, var(--expert-blue)) 15%, var(--line)) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--case-tone, var(--expert-blue)) 4%, var(--surface-2)) !important;
}

.expert-fact-grid > div > span { order: 1; color: var(--muted) !important; font-size: 11px !important; font-weight: 700; }
.expert-fact-grid > div > strong { order: 2; color: var(--text) !important; font-size: 13px !important; line-height: 1.6; }

.expert-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.expert-subject-text {
  min-width: 0;
  padding: 11px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px;
  background: var(--surface-2);
}

.expert-subject-text strong { color: var(--text) !important; font-size: 12px; }
.expert-subject-text p { margin: 5px 0 0 !important; color: var(--muted) !important; font-size: 12px; line-height: 1.85 !important; }

.expert-review-media {
  min-width: 0;
  margin-top: 12px !important;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--expert-green) 28%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--expert-green) 6%, var(--surface));
}

.expert-media-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.expert-media-head > span { width: 42px; height: 42px; background: var(--expert-green); }
.expert-media-head > div { min-width: 0; }
.expert-media-head strong,
.expert-media-head small { display: block; }
.expert-media-head strong { color: var(--text) !important; }
.expert-media-head small { margin-top: 2px; color: var(--muted) !important; line-height: 1.6; }
.expert-review-media .video-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 8px !important; }
.expert-review-media .video-grid > :where(a, button, span) { width: 100%; min-width: 0; justify-content: center; }
.expert-review-media .danger-text { grid-column: 1 / -1; }

.expert-case-evidence > .evaluation-timeline {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.expert-action-zone {
  min-width: 0;
  padding: 18px;
  background: color-mix(in srgb, var(--case-tone, var(--expert-blue)) 4%, var(--surface));
}

.expert-action-zone-head,
.expert-form-intro {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.expert-action-zone-head { margin-bottom: 12px; }
.expert-action-zone-head > div,
.expert-form-intro > div { min-width: 0; }
.expert-action-zone-head strong,
.expert-action-zone-head small,
.expert-form-intro strong,
.expert-form-intro small { display: block; }
.expert-action-zone-head strong,
.expert-form-intro strong { color: var(--text) !important; font-size: 14px; }
.expert-action-zone-head small,
.expert-form-intro small { margin-top: 2px; color: var(--muted) !important; font-size: 11px; line-height: 1.7; }

.expert-action-zone > :where(.expert-entry-form, .expert-score-form) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--case-tone, var(--expert-blue)) 20%, var(--line)) !important;
  border-radius: 13px !important;
  background: var(--surface) !important;
}

.expert-action-zone .form-grid > *,
.expert-action-zone .form-grid > .wide { grid-column: 1 !important; min-width: 0; }
.expert-action-zone textarea { min-height: 122px !important; }
.expert-action-zone .expert-score-form input[name="score"] { min-height: 66px !important; }
.expert-action-zone .primary-btn { width: 100%; }

.expert-decision-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

.expert-decision-option {
  grid-template-columns: 20px 42px minmax(0, 1fr) !important;
  min-height: 84px !important;
  padding: 11px !important;
  border-radius: 11px !important;
  background: var(--surface-2) !important;
}

.expert-decision-option:hover { transform: none !important; }
.expert-decision-option:has(input:checked) { background: color-mix(in srgb, var(--decision-tone) 8%, var(--surface)) !important; }

.expert-start-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--expert-blue) 24%, var(--line));
  border-radius: 13px;
  background: var(--surface);
}

.expert-start-panel > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: var(--expert-blue);
}

.expert-start-panel > span svg { width: 20px; height: 20px; }
.expert-start-panel > div { min-width: 0; }
.expert-start-panel strong { color: var(--text) !important; }
.expert-start-panel p { margin: 3px 0 0; color: var(--muted) !important; font-size: 11px; line-height: 1.75; }
.expert-start-panel > button { grid-column: 1 / -1; }

.expert-completed-card {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start;
  min-width: 0;
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--case-tone, var(--expert-green)) 24%, var(--line)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--case-tone, var(--expert-green)) 4%, var(--surface)) !important;
}

.expert-completed-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #fff;
  background: var(--case-tone, var(--expert-green));
}

.expert-completed-mark svg { width: 22px; height: 22px; }
.expert-completed-main { min-width: 0; }
.expert-completed-main > .section-head { margin: 0 !important; }
.expert-completed-main .code { direction: ltr; unicode-bidi: isolate; }

.expert-empty-state {
  display: grid !important;
  justify-items: center;
  gap: 6px;
  min-height: 150px;
  align-content: center;
  text-align: center;
}

.expert-empty-state > svg { width: 32px; height: 32px; color: var(--expert-green); }
.expert-empty-state strong { color: var(--text) !important; }
.expert-empty-state p { margin: 0; color: var(--muted) !important; }

.expert-note-create,
.expert-private-note-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--expert-violet) 20%, var(--line)) !important;
  background: color-mix(in srgb, var(--expert-violet) 4%, var(--surface)) !important;
}

.expert-note-create > .expert-form-intro > span { background: var(--expert-violet); }
.expert-private-note-card { border-inline-start: 4px solid var(--expert-violet) !important; }
.expert-note-head .status-pill { display: inline-flex; align-items: center; gap: 5px; }
.expert-note-head .status-pill svg { width: 14px; height: 14px; }

.expert-preview-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: clamp(10px, 1.5vw, 16px) !important;
}

.expert-preview-shell > .expert-review-card { width: 100%; }
.expert-preview-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.expert-preview-heading h2 { margin: 2px 0 0; color: var(--text) !important; font-size: 18px; }
.expert-preview-heading p:last-child { margin-top: 2px; color: var(--muted) !important; }

html:not(.light) .console-role-expert {
  --expert-soft: #102942;
  --expert-border: #35516e;
}

html:not(.light) .expert-workflow-intro,
html:not(.light) .expert-dashboard-section,
html:not(.light) .expert-review-card,
html:not(.light) .expert-action-zone > :where(.expert-entry-form, .expert-score-form),
html:not(.light) .expert-start-panel,
html:not(.light) .expert-completed-card,
html:not(.light) .expert-note-create,
html:not(.light) .expert-private-note-card {
  color: #edf4fb !important;
}

html:not(.light) .expert-workflow-intro,
html:not(.light) .expert-review-card,
html:not(.light) .expert-action-zone > :where(.expert-entry-form, .expert-score-form),
html:not(.light) .expert-start-panel {
  background-color: #0d2037 !important;
}

html:not(.light) :where(.expert-fact-grid > div, .expert-subject-text, .expert-decision-option) {
  background-color: #122a45 !important;
}

html:not(.light) .console-role-expert :where(
  .expert-intro-copy h2, .expert-section-heading h2, .expert-case-head h3,
  .expert-evidence-head strong, .expert-fact-grid strong, .expert-subject-text strong,
  .expert-media-head strong, .expert-action-zone-head strong, .expert-form-intro strong,
  .expert-start-panel strong, .expert-completed-card strong, label, legend
) { color: #edf4fb !important; }

html:not(.light) .console-role-expert :where(
  .expert-intro-copy p, .expert-section-heading p, .expert-case-head .code,
  .expert-evidence-head p, .expert-fact-grid span, .expert-subject-text p,
  .expert-media-head small, .expert-action-zone-head small, .expert-form-intro small,
  .expert-start-panel p, .expert-decision-option small
) { color: #b6c5d6 !important; }

@media (max-width: 1099px) {
  .console-role-expert > .admin-metrics,
  .console-role-expert > .metric-row.admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .expert-workflow-intro { grid-template-columns: 58px minmax(0, 1fr); }
  .expert-intro-icon { width: 58px; height: 58px; border-radius: 15px; }
  .expert-intro-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expert-case-layout { grid-template-columns: minmax(0, 1fr); }
  .expert-case-evidence { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 719px) {
  .console-role-expert .admin-command {
    min-height: 0 !important;
    padding: 13px !important;
  }

  .console-role-expert > .admin-metrics,
  .console-role-expert > .metric-row.admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .console-role-expert .admin-metrics .metric {
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 9px !important;
  }

  .console-role-expert .admin-metrics .metric:last-child { grid-column: 1 / -1; }
  .console-role-expert .admin-metrics .metric-icon { width: 34px !important; height: 34px !important; }
  .console-role-expert .admin-metrics .metric strong { font-size: 13px !important; }

  .expert-workflow-intro {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 13px !important;
    border-radius: 14px !important;
  }

  .expert-intro-icon { width: 46px; height: 46px; border-radius: 12px; }
  .expert-intro-icon svg { width: 22px; height: 22px; }
  .expert-intro-copy h2 { font-size: 15px; line-height: 1.65; }
  .expert-intro-copy > p { font-size: 11px; line-height: 1.75; }
  .expert-intro-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .expert-intro-steps > span { min-width: 0; justify-content: center; padding: 5px; font-size: 9px; white-space: nowrap; }
  .expert-intro-actions { grid-column: 1 / -1; gap: 6px; }
  .expert-intro-actions > button { min-width: 0 !important; min-height: 40px !important; padding-inline: 7px !important; font-size: 10px !important; }

  .expert-dashboard-section { padding: 11px !important; border-radius: 14px !important; scroll-margin-top: 72px; }
  .expert-section-heading {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 10px;
  }
  .expert-section-heading > .chip { grid-column: 2; width: fit-content; margin-top: 2px; }
  .expert-section-number { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
  .expert-section-heading h2 { font-size: 15px; }
  .expert-section-heading p { font-size: 11px !important; line-height: 1.65 !important; }

  .expert-review-card { border-radius: 13px !important; }
  .expert-preview-heading { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-preview-heading > .status-pill { width: fit-content; }
  .expert-case-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 14px 12px 11px !important;
  }
  .expert-case-head h3 { font-size: 15px; }
  .expert-case-head .chip-row { justify-content: flex-start; }

  .expert-case-evidence { padding: 12px; }
  .expert-evidence-head { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-evidence-head > .chip { width: fit-content; margin-inline-start: 49px; }
  .expert-evidence-head > div:first-child { grid-template-columns: 40px minmax(0, 1fr); }
  .expert-evidence-head p { font-size: 10px !important; line-height: 1.65 !important; }

  .expert-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .expert-fact-grid > div { min-height: 62px; padding: 8px !important; }
  .expert-fact-grid > div > span { font-size: 10px !important; }
  .expert-fact-grid > div > strong { font-size: 11px !important; }
  .expert-history-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .expert-subject-text { padding: 9px !important; }
  .expert-subject-text p { font-size: 11px; }

  .expert-review-media { padding: 10px; border-radius: 11px; }
  .expert-media-head { grid-template-columns: 38px minmax(0, 1fr); }
  .expert-media-head > span { width: 38px; height: 38px; }
  .expert-review-media .video-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .expert-action-zone { padding: 12px; }
  .expert-action-zone > :where(.expert-entry-form, .expert-score-form) { padding: 11px !important; }
  .expert-action-zone textarea { min-height: 108px !important; }
  .expert-decision-option { grid-template-columns: 18px 38px minmax(0, 1fr) !important; min-height: 78px !important; padding: 9px !important; }
  .expert-decision-icon { width: 38px; height: 38px; }
  .expert-decision-option strong { font-size: 12px !important; }
  .expert-decision-option small { font-size: 10px !important; line-height: 1.55 !important; }

  .expert-completed-card { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 9px !important; padding: 11px !important; }
  .expert-completed-mark { width: 38px; height: 38px; border-radius: 10px; }
  .expert-completed-main > .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .expert-completed-main > .section-head > .status-pill { width: fit-content; }

  .expert-note-create { padding: 11px !important; }
  .expert-private-notes .admin-record-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-private-note-card { padding: 10px !important; }
  .expert-private-note-edit { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-private-note-edit > * { grid-column: 1 !important; }
}

/* Expert card readability contract: labels and values are always distinct
 * blocks, while status chips and actions keep their own visual rhythm. */
.expert-case-head .support-case-type,
.expert-case-head .code,
.expert-case-head .chip-row,
.expert-case-head .chip-row > :where(.chip, .status-pill) {
  display: inline-flex;
  align-items: center;
}

.expert-case-head .support-case-type,
.expert-case-head .code {
  max-width: 100%;
  line-height: 1.65;
}

.expert-case-head .support-case-type { flex-wrap: wrap; gap: 5px; }
.expert-case-head .chip-row {
  justify-content: flex-end;
  align-items: flex-start;
  gap: 7px !important;
  min-width: 0;
}

.expert-case-head .chip-row > :where(.chip, .status-pill) {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
}

.expert-fact-grid > .expert-fact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: center;
  gap: 3px !important;
  text-align: start;
}

.expert-fact-grid > .expert-fact > .expert-fact-label,
.expert-fact-grid > .expert-fact > .expert-fact-value {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal !important;
}

.expert-fact-grid > .expert-fact > .expert-fact-label {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.55;
}

.expert-fact-grid > .expert-fact > .expert-fact-value {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 950;
  line-height: 1.7;
}

.expert-fact-grid > .expert-fact > .expert-fact-value:is(.code, [data-copy-value]) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.expert-evidence-head > div:first-child,
.expert-media-head,
.expert-action-zone-head,
.expert-form-intro {
  min-width: 0;
}

.expert-evidence-head strong,
.expert-evidence-head p,
.expert-media-head strong,
.expert-media-head small,
.expert-action-zone-head strong,
.expert-action-zone-head small,
.expert-form-intro strong,
.expert-form-intro small {
  display: block !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html.light .console-role-expert .expert-intro-actions .ghost-btn {
  color: var(--ft-navy-900) !important;
  background: #fff !important;
  border-color: #bfd0df !important;
}

html.light .console-role-expert .expert-intro-actions .ghost-btn :where(svg, span) {
  color: var(--ft-navy-900) !important;
}

html:not(.light) .console-role-expert .expert-intro-actions .ghost-btn {
  color: #edf4fb !important;
  background: #173451 !important;
  border-color: #52728f !important;
}

html:not(.light) .console-role-expert .expert-intro-actions .ghost-btn :where(svg, span) {
  color: #edf4fb !important;
}

.expert-case-evidence > .evaluation-timeline {
  overflow: hidden;
}

.expert-case-evidence > .evaluation-timeline > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  padding: 9px 12px;
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 12px 9px;
  list-style: none;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list > li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.expert-case-evidence > .evaluation-timeline > .timeline-list > li > .timeline-event-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--expert-blue) 28%, var(--line));
  border-radius: 8px;
  color: var(--expert-blue) !important;
  background: color-mix(in srgb, var(--expert-blue) 8%, var(--surface));
  font-size: 10px;
  font-weight: 950;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list > li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list strong {
  color: var(--text) !important;
  font-size: 12px;
  line-height: 1.6;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list span,
.expert-case-evidence > .evaluation-timeline > .timeline-list p,
.expert-case-evidence > .evaluation-timeline > .timeline-list small {
  color: var(--muted) !important;
  font-size: 11px;
  line-height: 1.7;
}

.expert-case-evidence > .evaluation-timeline > .timeline-list p { margin: 0; }
.expert-case-evidence > .evaluation-timeline > .timeline-list > li > p,
.expert-case-evidence > .evaluation-timeline > .timeline-list > li > small { grid-column: 2; }

@media (max-width: 719px) {
  .expert-case-head .chip-row {
    justify-content: flex-start;
    gap: 5px !important;
  }

  .expert-case-head .chip-row > :where(.chip, .status-pill) {
    white-space: normal;
    font-size: 10px !important;
  }

  .expert-fact-grid > .expert-fact > .expert-fact-label { font-size: 10px !important; }
  .expert-fact-grid > .expert-fact > .expert-fact-value { font-size: 11px !important; }
  .expert-case-evidence > .evaluation-timeline > summary { padding-inline: 9px; }
  .expert-case-evidence > .evaluation-timeline > .timeline-list { padding-inline: 9px; }
}

/* Final containment contract for compact screens.
 * The base sheet is centered with translateX(-50%); when its mobile inset is
 * changed to both viewport edges that transform must be cleared, otherwise
 * the purchase sheet starts half a viewport off the left edge.  Keep every
 * child shrinkable as service names and descriptions are user/config driven.
 */
@media (max-width: 719px) {
  :where(.sheet, .app-dialog-backdrop, .media-preview-backdrop) {
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sheet {
    inset: auto 0 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .sheet > #detailContent,
  .sheet > #detailContent > *,
  .sheet .service-purchase-grid,
  .sheet .service-purchase-card,
  .sheet .service-purchase-head,
  .sheet .service-purchase-head > div,
  .sheet .service-purchase-card p,
  .sheet .service-purchase-card ul,
  .sheet .action-row,
  .app-dialog,
  .app-dialog > *,
  .media-preview-panel,
  .media-preview-panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sheet #detailContent { overflow-x: hidden; }
  .sheet .service-purchase-head { flex-wrap: wrap; }
  .sheet .service-purchase-head > div { flex: 1 1 180px; }
  .sheet .service-purchase-price strong,
  .sheet .service-validity,
  .sheet .service-unavailable-note { white-space: normal !important; overflow-wrap: anywhere; }
}

/* A case is operational data, never a narrow writing-mode label.  Explicit
 * horizontal text and flexible tracks prevent one-character Persian columns
 * on laptop widths where the console sidebar reduces available space. */
:where(.expert-review-card, .expert-completed-card, .expert-preview-shell) :where(
  h1, h2, h3, h4, p, strong, small, span, label, legend, summary, button
) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

:where(.expert-review-card, .expert-completed-card, .expert-preview-shell),
:where(.expert-review-card, .expert-completed-card, .expert-preview-shell) > *,
:where(.expert-review-card, .expert-completed-card, .expert-preview-shell) :where(
  .expert-case-head, .expert-case-head > div, .expert-case-layout,
  .expert-case-evidence, .expert-action-zone, .expert-fact-grid,
  .expert-fact, .expert-review-media, .expert-media-head,
  .expert-evidence-head, .expert-action-zone-head, .expert-form-intro,
  .chip-row, .action-row, .form-grid
) {
  min-width: 0 !important;
  max-width: 100%;
}

@media (min-width: 720px) and (max-width: 1279px) {
  .expert-case-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-case-evidence { border-inline-end: 0 !important; border-bottom: 1px solid var(--line); }
  .expert-case-head { grid-template-columns: minmax(0, 1fr) !important; }
  .expert-case-head .chip-row { justify-content: flex-start; }
}

/* Keep the two expert products visually distinct without widening the
 * console.  Each queue remains readable on desktop and becomes a single
 * vertical stack on phones. */
.expert-review-type-grid {
  display: grid;
  /* A review card contains evidence and an action form of its own. Putting
   * two complete cases side-by-side on laptop widths squeezed Persian labels
   * into one-character columns. Keep the two products visually separated as
   * full-width queue sections instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

/* Generic `.stack` becomes two columns on desktop elsewhere in the site.
 * Expert cases are composite dossiers and must own the full console width. */
.console-role-expert #adminList > .stack,
.console-role-expert .expert-active-list,
.console-role-expert .expert-completed-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

.expert-review-type-card {
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.expert-review-type-card > .section-head { align-items: flex-start; gap: 10px; }
.expert-review-type-card > .section-head > div,
.expert-review-type-card > .section-head > strong { min-width: 0; }
.expert-review-type-card > .section-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.expert-review-type-card .stack { min-width: 0; }
.service-active-note {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.service-unavailable-note strong,
.service-unavailable-note span { display: block; }
.service-unavailable-note span { margin-top: 4px; line-height: 1.8; }

@media (max-width: 719px) {
  .expert-review-type-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .expert-review-type-card { padding: 11px; border-radius: 13px; }
}

/* Operational dossier system — one containment and reading contract for the
 * owner sheet, support desk, expert desk and management consoles. */
:where(.admin-workspace, .owner-ad-dossier, .sheet #detailContent) :where(
  article, section, header, form, fieldset, div, dl, dt, dd, label,
  h1, h2, h3, h4, p, strong, small, span, button, input, select, textarea
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

:where(.admin-workspace, .owner-ad-dossier, .sheet #detailContent) :where(
  h1, h2, h3, h4, p, strong, small, span, label, legend, summary, button, dt, dd
) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: none !important;
}

:where(.admin-workspace, .owner-ad-dossier, .sheet #detailContent) :where(.code, [dir="ltr"]) {
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* Some live metrics contain only a value and label (no icon wrapper). The
 * generic icon/value grid otherwise places that long amount in a 42px icon
 * track and turns it into a vertical number. */
.admin-workspace .metric > strong:first-child {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.45;
  white-space: nowrap;
  overflow-wrap: normal !important;
}

.admin-workspace .metric > strong:first-child + span {
  grid-column: 1 / -1;
  width: 100%;
}

.owner-ad-dossier {
  --dossier-accent: var(--ft-blue);
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.owner-dossier-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dossier-accent) 25%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dossier-accent) 12%, var(--surface)), var(--surface) 58%);
}

.owner-dossier-hero > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--dossier-accent) 16%, var(--line));
  color: var(--muted);
  line-height: 1.9;
}

.owner-dossier-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.owner-dossier-identity > div { min-width: 0; }
.owner-dossier-identity small { display: block; color: var(--muted); font-weight: 850; }
.owner-dossier-identity h2 { margin: 3px 0; color: var(--text); font-size: clamp(16px, 2vw, 21px); line-height: 1.5; }
.owner-dossier-identity .code { display: block; width: fit-content; color: var(--dossier-accent); font-size: 11px; font-weight: 900; }

.owner-dossier-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: #fff;
  background: var(--dossier-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--dossier-accent) 25%, transparent);
}

.owner-dossier-icon svg { width: 22px; height: 22px; }

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

.owner-dossier-stats > article {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 72px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.owner-dossier-stats > article > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--dossier-accent);
}

.owner-dossier-stats strong,
.owner-dossier-stats span { display: block; }
.owner-dossier-stats strong { color: var(--text); font-size: 12px; line-height: 1.7; }
.owner-dossier-stats span { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 800; }

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

.owner-dossier-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.owner-dossier-grid > *, .owner-dossier-data { margin: 0 !important; }
.owner-score { color: var(--dossier-accent) !important; font-size: 24px; }

/* Desktop sheets are wide enough for a real dossier but never touch the
 * viewport edges. Mobile keeps the native bottom-sheet interaction. */
@media (min-width: 720px) {
  .sheet {
    width: min(1040px, calc(100vw - 32px)) !important;
    max-width: 1040px !important;
    max-height: calc(100dvh - 32px) !important;
    bottom: 16px !important;
    border-radius: 22px !important;
  }

  .admin-detail-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
  }

  .admin-detail-summary {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
  }
}

@media (max-width: 719px) {
  .owner-ad-dossier { gap: 9px; }
  .owner-dossier-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    border-radius: 15px;
  }
  .owner-dossier-hero > .status-pill { width: fit-content; }
  .owner-dossier-identity { align-items: flex-start; gap: 9px; }
  .owner-dossier-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
  .owner-dossier-icon svg { width: 19px; height: 19px; }
  .owner-dossier-identity h2 { font-size: 15px; }
  .owner-dossier-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .owner-dossier-stats > article { min-height: 62px; padding: 9px; border-radius: 12px; }
  .owner-dossier-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }

  .admin-workspace :where(.admin-detail-columns, .admin-detail-summary, .admin-kv, .form-grid) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-workspace .admin-detail-columns { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-workspace .admin-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-workspace .admin-detail-summary .metric { min-height: 76px; padding: 10px !important; }
  .admin-workspace .admin-detail-summary .metric strong { font-size: 14px !important; }
  .admin-workspace .admin-kv { grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr) !important; }
  .admin-workspace .admin-kv :where(dt, dd) { padding: 9px !important; font-size: 10px !important; }

  .admin-workspace :where(.section-head, .admin-command-head) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-workspace :where(.action-row, .admin-edit-actions) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-workspace :where(.action-row, .admin-edit-actions) > :where(button, a) {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .admin-workspace button:not(.icon-btn):not(.copy-code-control),
  .admin-workspace :where(.primary-btn, .ghost-btn, .text-btn) {
    min-height: 44px !important;
  }

  .user-journey-status .ghost-btn { min-height: 44px !important; }
}

@media (max-width: 389px) {
  .owner-dossier-stats,
  .admin-workspace .admin-detail-summary,
  .admin-workspace :where(.action-row, .admin-edit-actions) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .admin-workspace .admin-kv { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-workspace .admin-kv dt { padding-bottom: 3px !important; border-bottom: 0 !important; }
  .admin-workspace .admin-kv dd { padding-top: 3px !important; }
}