/* Football Talent unified presentation layer.
 * Loaded last on every rendered page. Component logic remains in app.js;
 * this file owns final visual hierarchy, alignment, states and ergonomics.
 */

:root {
  --ui-radius-xs: 10px;
  --ui-radius-sm: 13px;
  --ui-radius-md: 17px;
  --ui-radius-lg: 22px;
  --ui-radius-xl: 28px;
  --ui-green: #079567;
  --ui-green-strong: #057a57;
  --ui-blue: #2d6edb;
  --ui-gold: #b87b0b;
  --ui-orange: #d56829;
  --ui-purple: #7555ca;
  --ui-red: #cc4651;
  --ui-cyan: #168a9a;
  --ui-shadow-xs: 0 2px 8px rgba(14, 40, 31, .045);
  --ui-shadow-sm: 0 10px 28px rgba(14, 40, 31, .075);
  --ui-shadow-md: 0 18px 48px rgba(14, 40, 31, .11);
  --ui-focus: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
  --ui-control-height: 50px;
}

html.light {
  --ui-canvas: #f1f7f4;
  --ui-canvas-2: #f8fbf9;
  --ui-panel: rgba(255, 255, 255, .94);
  --ui-panel-solid: #fff;
  --ui-soft: #f3f7f5;
  --ui-elevated: #fff;
}

html:not(.light) {
  --ui-canvas: #09110e;
  --ui-canvas-2: #0d1713;
  --ui-panel: rgba(18, 29, 24, .96);
  --ui-panel-solid: #121d18;
  --ui-soft: #18251f;
  --ui-elevated: #17241e;
  --ui-shadow-xs: 0 2px 10px rgba(0, 0, 0, .18);
  --ui-shadow-sm: 0 12px 30px rgba(0, 0, 0, .24);
  --ui-shadow-md: 0 20px 56px rgba(0, 0, 0, .34);
}

html {
  background: var(--ui-canvas);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 8% -12%, color-mix(in srgb, var(--ui-green) 11%, transparent), transparent 30rem),
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--ui-blue) 8%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--ui-canvas-2), var(--ui-canvas));
  font-feature-settings: "ss01" 1, "tnum" 1;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Top-level layout */
.app-shell {
  isolation: isolate;
}

.topbar,
.auth-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
  background: color-mix(in srgb, var(--ui-panel) 88%, transparent);
  box-shadow: 0 8px 28px rgba(12, 39, 29, .055);
  backdrop-filter: blur(18px) saturate(135%);
}

.topbar {
  min-height: 72px;
  height: 72px;
}

.brand,
.auth-brand {
  border-radius: var(--ui-radius-sm);
}

.brand:focus-visible,
.auth-brand:focus-visible {
  box-shadow: var(--ui-focus);
}

.content {
  padding-block: clamp(14px, 2vw, 24px);
}

.content > * + * {
  margin-top: clamp(12px, 1.7vw, 20px);
}

.surface,
.admin-page,
.admin-command,
.profile-card,
.dossier-command-card,
.legal-page,
.auth-layout,
.form-directory-hero,
.form-directory-section,
.form-directory-note {
  border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--line));
  border-radius: var(--ui-radius-lg);
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow-sm);
}

.surface,
.admin-page,
.profile-card,
.dossier-command-card {
  padding: clamp(15px, 2.2vw, 24px);
}

.surface:hover,
.admin-page:hover {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
}

/* Titles and section hierarchy */
.section-head,
.profile-action-head,
.media-panel-head,
.admin-command {
  align-items: flex-start;
}

.section-head h2,
.section-head h3,
.admin-command h2,
.surface > h2,
.auth-heading h1,
.legal-page h1 {
  color: var(--text);
  font-weight: 900;
  letter-spacing: -.025em;
}

.section-head p,
.admin-command p,
.media-panel-head p,
.auth-heading span,
.legal-body {
  color: var(--muted);
}

.section-kicker,
.support-eyebrow,
.auth-heading > div > p {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  width: fit-content;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--ui-panel));
  font-size: 11px;
  font-weight: 900;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 9px;
}

.title-with-icon > .lucide,
.title-with-icon > svg,
.section-head h2 > .lucide {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, var(--ui-panel));
}

/* Forms */
.form-grid,
.admin-filter-grid,
.filter-grid,
.auth-form,
.upload-grid {
  align-items: start;
  gap: 14px;
}

.form-grid > label,
.admin-edit-field,
.auth-field,
.filter-grid > label,
.admin-filter-grid > label {
  min-width: 0;
}

.form-grid > label:not(.terms-line):not(.remember-line),
.admin-edit-field,
.auth-field,
.filter-grid > label,
.admin-filter-grid > label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin: 0;
}

.form-grid > label > span:first-child,
.admin-edit-field > span:first-child,
.auth-field > span:first-child,
.filter-grid > label > span:first-child {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.65;
}

.form-grid small,
.admin-edit-field small,
.auth-field small,
.form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.75;
}

:where(.form-grid, .admin-filter-grid, .filter-grid, .auth-form, .admin-page) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.password-wrap {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 6%, var(--line));
  border-radius: var(--ui-radius-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--ui-panel-solid) 88%, var(--ui-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent), var(--ui-shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

:where(.form-grid, .admin-filter-grid, .filter-grid, .auth-form, .admin-page) :where(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: var(--ui-control-height);
  padding-inline: 13px;
}

:where(.form-grid, .admin-filter-grid, .filter-grid, .auth-form, .admin-page) textarea {
  min-height: 118px;
  padding: 12px 13px;
  line-height: 1.85;
  resize: vertical;
}

:where(.form-grid, .admin-filter-grid, .filter-grid, .auth-form, .admin-page) :where(input, select, textarea):hover {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

:where(.form-grid, .admin-filter-grid, .filter-grid, .auth-form, .admin-page) :where(input, select, textarea):focus,
.password-wrap:focus-within {
  border-color: color-mix(in srgb, var(--brand) 70%, var(--line));
  outline: 0;
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-focus);
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  opacity: 1;
}

input[type="file"] {
  min-height: 52px;
  padding: 6px !important;
  color: var(--muted);
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  min-height: 38px;
  padding-inline: 14px;
  margin-inline-end: 10px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-green), var(--ui-green-strong));
  font-weight: 850;
  cursor: pointer;
}

.required > span:first-child::after,
label.required > span:first-child::after {
  margin-inline-start: 4px;
  color: var(--ui-red);
  content: "•";
}

.terms-line,
.remember-line {
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-soft);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

/* Buttons and actionable controls */
.primary-btn,
.primary-button,
.ghost-btn,
.text-btn,
.text-button,
.icon-btn,
.icon-button,
.segmented button,
.panel-tabs button,
.admin-hub-card,
.home-lane {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}

.primary-btn,
.primary-button {
  min-height: var(--ui-control-height);
  border: 1px solid color-mix(in srgb, var(--ui-green-strong) 70%, transparent);
  border-radius: var(--ui-radius-sm);
  color: #fff;
  background: linear-gradient(135deg, #0ba36f 0%, #087e62 100%);
  box-shadow: 0 9px 20px rgba(5, 130, 87, .19);
  font-weight: 900;
}

.primary-btn:not(:disabled):hover,
.primary-button:not(:disabled):hover {
  box-shadow: 0 13px 28px rgba(5, 130, 87, .26);
  transform: translateY(-2px);
}

.ghost-btn,
.text-btn,
.text-button {
  min-height: 46px;
  border-radius: var(--ui-radius-sm);
  font-weight: 850;
}

.ghost-btn {
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--ui-panel-solid) 88%, var(--ui-soft));
  box-shadow: var(--ui-shadow-xs);
}

.ghost-btn:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--ui-panel));
  transform: translateY(-1px);
}

.ghost-btn.danger,
.danger.ghost-btn {
  border-color: color-mix(in srgb, var(--ui-red) 28%, var(--line));
  color: var(--ui-red);
  background: color-mix(in srgb, var(--ui-red) 6%, var(--ui-panel));
}

.icon-btn,
.icon-button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-xs);
}

:where(.primary-btn, .primary-button, .ghost-btn, .text-btn, .text-button, .icon-btn, .icon-button):focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus);
}

button:disabled,
.primary-btn:disabled,
.ghost-btn:disabled {
  cursor: not-allowed;
  filter: saturate(.45);
  opacity: .58;
  transform: none;
}

/* Cards */
.mini-card,
.ad-card,
.admin-record-card,
.notification-card,
.expert-subscription-card,
.admin-analysis-panel,
.admin-decision-box,
.profile-action-card,
.upload-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 7%, var(--line));
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, var(--ui-panel-solid), color-mix(in srgb, var(--ui-soft) 72%, var(--ui-panel-solid)));
  box-shadow: var(--ui-shadow-xs);
}

.mini-card,
.admin-record-card,
.notification-card,
.expert-subscription-card,
.admin-analysis-panel,
.admin-decision-box {
  padding: clamp(13px, 1.8vw, 18px);
}

.mini-card::before,
.admin-record-card::before,
.notification-card::before,
.expert-subscription-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--card-tone, var(--ui-green));
  content: "";
}

:where(.stack, .admin-record-grid, .ad-list, .expert-subscription-list) > :nth-child(5n + 1) { --card-tone: var(--ui-green); }
:where(.stack, .admin-record-grid, .ad-list, .expert-subscription-list) > :nth-child(5n + 2) { --card-tone: var(--ui-blue); }
:where(.stack, .admin-record-grid, .ad-list, .expert-subscription-list) > :nth-child(5n + 3) { --card-tone: var(--ui-gold); }
:where(.stack, .admin-record-grid, .ad-list, .expert-subscription-list) > :nth-child(5n + 4) { --card-tone: var(--ui-purple); }
:where(.stack, .admin-record-grid, .ad-list, .expert-subscription-list) > :nth-child(5n) { --card-tone: var(--ui-orange); }

.mini-card:hover,
.ad-card:hover,
.admin-record-card:hover,
.expert-subscription-card:hover {
  border-color: color-mix(in srgb, var(--card-tone, var(--brand)) 32%, var(--line));
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-2px);
}

.detail-stats,
.admin-rate-grid,
.expert-subscription-meta {
  gap: 9px;
}

.detail-stats > div,
.admin-rate-grid > div,
.expert-subscription-meta > div,
.admin-kv > div {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 7%, var(--line));
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-soft) 82%, var(--ui-panel));
}

.detail-stats > div,
.admin-rate-grid > div,
.expert-subscription-meta > div {
  padding: 10px;
}

.detail-stats strong,
.admin-rate-grid strong,
.expert-subscription-meta strong {
  color: var(--text);
  font-weight: 900;
}

/* Metrics and status */
.metric-row {
  gap: 10px;
}

.metric {
  --metric-tone: var(--ui-green);
  position: relative;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--metric-tone) 23%, var(--line));
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--metric-tone) 9%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-xs);
}

.metric:nth-child(4n + 1),
.metric-green { --metric-tone: var(--ui-green); }
.metric:nth-child(4n + 2),
.metric-blue { --metric-tone: var(--ui-blue); }
.metric:nth-child(4n + 3),
.metric-gold { --metric-tone: var(--ui-gold); }
.metric:nth-child(4n),
.metric-coral { --metric-tone: var(--ui-orange); }

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

.metric strong {
  color: var(--metric-tone);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 900;
}

.metric-icon,
.admin-hub-icon,
.notification-icon,
.submission-receipt-icon {
  color: var(--metric-tone, var(--brand));
  background: color-mix(in srgb, var(--metric-tone, var(--brand)) 11%, var(--ui-panel));
}

.chip,
.status-pill,
.admin-role-chip,
.support-case-type {
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 6%, var(--ui-panel));
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
}

.status-tone-success,
.status-success { --status-tone: var(--ui-green); }
.status-tone-danger,
.status-danger { --status-tone: var(--ui-red); }
.status-tone-warning,
.status-warning { --status-tone: var(--ui-gold); }
.status-tone-info,
.status-info { --status-tone: var(--ui-blue); }
.status-tone-pending,
.status-pending { --status-tone: var(--ui-orange); }

.status-pill[class*="status-tone-"],
.status-pill[class*="status-"] {
  border-color: color-mix(in srgb, var(--status-tone, var(--brand)) 28%, var(--line));
  color: var(--status-tone, var(--brand));
  background: color-mix(in srgb, var(--status-tone, var(--brand)) 9%, var(--ui-panel));
}

/* Empty, loading and messages */
.empty,
.admin-loading,
.media-preview-error {
  min-height: 150px;
  padding: 24px 18px;
  border: 1px dashed color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: var(--ui-radius-md);
  color: var(--muted);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand) 8%, transparent), transparent 9rem),
    var(--ui-soft);
  text-align: center;
}

.empty strong,
.admin-loading strong,
.media-preview-error strong {
  color: var(--text);
  font-weight: 900;
}

.activity-note,
.profile-phone-pending,
.ad-eligibility-notice {
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow-xs);
}

.ticket-thread {
  gap: 10px;
}

.ticket-message {
  border: 1px solid var(--line);
  border-radius: 15px 15px 5px 15px;
  background: var(--ui-soft);
}

.ticket-message.from-admin {
  border-color: color-mix(in srgb, var(--ui-green) 23%, var(--line));
  border-radius: 15px 15px 15px 5px;
  background: color-mix(in srgb, var(--ui-green) 7%, var(--ui-panel));
}

/* Navigation */
.segmented:not(.panel-tabs) {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--ui-soft) 88%, var(--ui-panel));
}

.segmented:not(.panel-tabs) > button {
  min-height: 43px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}

.segmented:not(.panel-tabs) > button.active {
  color: var(--brand);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-xs);
}

.panel-tabs {
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-soft) 88%, var(--ui-panel));
  box-shadow: var(--ui-shadow-xs);
}

.panel-tabs button {
  min-height: 64px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  color: var(--muted);
  background: transparent;
}

.panel-tabs button.active {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
  color: var(--brand);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-sm);
}

.bottom-nav {
  border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
  border-bottom: 0;
  border-radius: 19px 19px 0 0;
  background: color-mix(in srgb, var(--ui-panel) 92%, transparent);
  box-shadow: 0 -12px 34px rgba(12, 39, 29, .11);
  backdrop-filter: blur(18px) saturate(135%);
}

.bottom-nav button {
  min-height: 57px;
  border-radius: 12px;
  color: var(--muted);
}

.bottom-nav button.active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--ui-panel));
}

/* Home */
.hero {
  overflow: hidden;
  border: 0;
  border-radius: 0 0 clamp(24px, 4vw, 42px) clamp(24px, 4vw, 42px);
  box-shadow: var(--ui-shadow-md);
}

.hero-shade {
  background: linear-gradient(90deg, rgba(4, 18, 13, .18), rgba(4, 18, 13, .76));
}

.hero-content {
  max-width: 720px;
}

.hero-content h1 {
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .25);
}

.home-command,
.home-quick-actions {
  border-radius: var(--ui-radius-lg);
}

.home-lane {
  min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--lane-color, var(--brand)) 22%, var(--line));
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--lane-color, var(--brand)) 9%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-xs);
}

.home-lane:hover {
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-2px);
}

/* Operational panels */
.admin-command {
  position: relative;
  overflow: hidden;
  padding: clamp(17px, 2.4vw, 26px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand) 13%, transparent), transparent 20rem),
    var(--ui-panel);
}

.admin-command::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: linear-gradient(var(--ui-green), var(--ui-blue));
  content: "";
}

.admin-hub {
  gap: 11px;
}

.admin-hub-card {
  --hub-tone: var(--ui-green);
  min-height: 154px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hub-tone) 23%, var(--line));
  border-radius: var(--ui-radius-md);
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--hub-tone) 8%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-xs);
}

.admin-hub-card:nth-child(5n + 1) { --hub-tone: var(--ui-green); }
.admin-hub-card:nth-child(5n + 2) { --hub-tone: var(--ui-blue); }
.admin-hub-card:nth-child(5n + 3) { --hub-tone: var(--ui-gold); }
.admin-hub-card:nth-child(5n + 4) { --hub-tone: var(--ui-purple); }
.admin-hub-card:nth-child(5n) { --hub-tone: var(--ui-orange); }
.admin-hub-card.urgent { --hub-tone: var(--ui-red); }
.admin-hub-card.work { --hub-tone: var(--ui-blue); }
.admin-hub-card.idle { --hub-tone: var(--muted); }

.admin-hub-card:hover {
  border-color: color-mix(in srgb, var(--hub-tone) 54%, var(--line));
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-3px);
}

.admin-hub-card .admin-hub-icon {
  color: var(--hub-tone);
  background: color-mix(in srgb, var(--hub-tone) 11%, var(--ui-panel));
}

.admin-hub-card > strong,
.admin-hub-title {
  font-weight: 900;
}

.admin-detail-columns,
.admin-record-grid,
.revision-field-grid {
  gap: 12px;
}

.admin-kv {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-soft);
}

.admin-kv dt,
.admin-kv dd {
  padding-block: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

/* Auth */
.auth-page {
  background:
    radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--ui-blue) 10%, transparent), transparent 26rem),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--ui-green) 12%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--ui-canvas-2), var(--ui-canvas));
}

.auth-main {
  padding-block: clamp(22px, 5vw, 64px);
}

.auth-layout {
  width: min(calc(100% - 24px), 620px);
  padding: clamp(17px, 4vw, 32px);
}

.auth-form-side {
  min-width: 0;
}

.auth-heading {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.auth-heading-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-green), var(--ui-cyan));
  box-shadow: 0 10px 24px rgba(5, 130, 87, .2);
}

.auth-links {
  gap: 8px;
}

.auth-links a {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  color: var(--text);
  background: var(--ui-soft);
}

.auth-links a:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--ui-panel));
}

.auth-sticker {
  border-radius: var(--ui-radius-lg);
}

/* Documents, forms gallery and footer */
.legal-shell,
.form-directory-shell {
  padding-block: clamp(18px, 4vw, 54px);
}

.legal-page,
.about-page {
  padding: clamp(18px, 4vw, 42px);
}

.legal-page h1,
.about-page h1 {
  margin-block: 20px 12px;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
}

.legal-body {
  font-size: 15px;
  line-height: 2.15;
}

.about-contact {
  margin-top: 28px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid color-mix(in srgb, var(--ui-blue) 20%, var(--line));
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-blue) 7%, var(--ui-panel)), var(--ui-panel-solid));
}

.about-intro {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 650;
  line-height: 2.05;
}

.about-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 24px;
}

.about-value-card {
  --about-tone: var(--ui-green);
  position: relative;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--about-tone) 25%, var(--line));
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--about-tone) 9%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-xs);
}

.about-value-card:nth-child(2) { --about-tone: var(--ui-blue); }
.about-value-card:nth-child(3) { --about-tone: var(--ui-gold); }

.about-value-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--about-tone);
  background: color-mix(in srgb, var(--about-tone) 12%, var(--ui-panel));
  font-size: 12px;
  font-weight: 900;
}

.about-value-card h2 {
  margin: 14px 0 7px;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.about-value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}

.form-directory-hero,
.form-directory-section,
.form-directory-note {
  padding: clamp(16px, 2.6vw, 26px);
}

.role-form-card,
.form-link-card,
.dependent-preview-card {
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-xs);
}

.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--brand) 8%, transparent), transparent 18rem),
    color-mix(in srgb, var(--ui-panel-solid) 92%, var(--ui-canvas));
}

.site-footer-main {
  align-items: center;
}

.site-footer-links a {
  border-radius: 12px;
  background: var(--ui-soft);
}

.site-footer .enamad-seal {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--ui-shadow-xs);
}

/* Dialogs and overlays */
.sheet,
.app-dialog,
.media-preview-panel {
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  border-radius: var(--ui-radius-xl);
  background: var(--ui-panel-solid);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
}

.toast,
.auth-toast {
  border-radius: 14px;
  box-shadow: var(--ui-shadow-md);
}

.submission-progress {
  border-radius: var(--ui-radius-md);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-md);
}

@media (max-width: 559px) {
  :root {
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;
  }

  .topbar {
    min-height: 64px;
    height: 64px;
  }

  .surface,
  .admin-page,
  .profile-card,
  .dossier-command-card {
    padding: 14px;
  }

  .section-head:not(.compact),
  .admin-command,
  .profile-action-head {
    align-items: stretch;
  }

  .section-head > .action-row,
  .admin-command-actions,
  .profile-action-head > .action-row {
    width: 100%;
  }

  .action-row > :where(button, a),
  .admin-command-actions > :where(button, a) {
    flex: 1 1 140px;
  }

  .metric {
    min-height: 84px;
  }

  .admin-hub-card {
    min-height: 138px;
  }

  .panel-tabs {
    padding: 5px;
  }

  .panel-tabs button {
    min-height: 58px;
  }

  .bottom-nav {
    border-radius: 16px 16px 0 0;
  }

  .hero-content {
    padding: 22px 16px;
  }

  .auth-layout {
    width: min(calc(100% - 20px), 620px);
    padding: 15px;
  }

  .auth-heading {
    align-items: flex-start;
  }

  .site-footer-main,
  .site-footer-copy {
    text-align: center;
  }

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

@media (max-width: 1023px) {
  .site-footer-main {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .site-footer-links {
    width: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  .site-footer-links a { width: auto !important; }
  .site-footer .enamad-seal { grid-column: 2 !important; grid-row: 1 !important; }
}

@media (min-width: 720px) {
  .form-grid,
  .admin-filter-grid,
  .filter-grid {
    column-gap: 16px;
    row-gap: 15px;
  }

  .metric-row {
    gap: 12px;
  }

  .admin-hub,
  .admin-record-grid,
  .ad-list {
    gap: 14px;
  }
}

/* Final navigation geometry: the fixed desktop rail must own real space and
 * never cover forms, dialogs or the footer. */
.bottom-nav-brand {
  display: none !important;
}

.form-completion-notice {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--ui-blue) 25%, var(--line));
  border-radius: var(--ui-radius-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--ui-blue) 7%, var(--ui-panel));
  font-weight: 780;
  line-height: 1.8;
}

.form-completion-notice .lucide {
  width: 21px;
  min-width: 21px;
  color: var(--ui-blue);
}

.home-live-tests {
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--ui-purple) 22%, var(--line));
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-purple) 8%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-sm);
}

.live-test-card {
  display: grid;
  width: 100%;
  min-height: 94px;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--ui-purple) 28%, var(--line));
  border-radius: var(--ui-radius-md);
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-purple) 12%, var(--ui-panel)), color-mix(in srgb, var(--ui-blue) 7%, var(--ui-panel-solid)));
  box-shadow: var(--ui-shadow-xs);
  text-align: right;
}

.live-test-card:hover {
  border-color: color-mix(in srgb, var(--ui-purple) 55%, var(--line));
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-2px);
}

.live-test-card > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.live-test-card strong { font-size: clamp(1rem, 2.5vw, 1.22rem); font-weight: 950; }
.live-test-card small { color: var(--muted); font-weight: 700; line-height: 1.7; }
.live-test-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-purple), var(--ui-blue));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-purple) 28%, transparent);
}

.account-logout-icon {
  min-width: 46px;
  flex: 0 0 46px !important;
  color: var(--ui-red);
  border-color: color-mix(in srgb, var(--ui-red) 25%, var(--line));
}

.document-brandbar {
  display: flex;
  width: min(calc(100% - 24px), 1320px);
  min-height: 70px;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 14px;
  margin: 12px auto 0;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line));
  border-radius: var(--ui-radius-md);
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow-xs);
}

.document-brandbar .brand-logo { width: 142px; height: 54px; }

.auth-page[data-auth-mode="forgot-password"] .auth-layout {
  width: min(calc(100% - 20px), 700px) !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.technical-operations-intro {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2.3vw, 24px);
  border: 1px solid color-mix(in srgb, var(--ui-blue) 25%, var(--line));
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-blue) 9%, var(--ui-panel)), var(--ui-panel-solid));
  box-shadow: var(--ui-shadow-sm);
}

.technical-operations-intro > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-blue), var(--ui-cyan));
}

.technical-operations-intro h2 { margin: 0; font-weight: 950; }
.technical-operations-intro p { margin: 4px 0 0; color: var(--muted); line-height: 1.8; }
.technical-provider-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-state { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 850; }
.provider-state.is-ready { color: var(--ui-green); background: color-mix(in srgb, var(--ui-green) 8%, var(--ui-panel)); }
.provider-state.is-down { color: var(--ui-red); background: color-mix(in srgb, var(--ui-red) 8%, var(--ui-panel)); }
.technical-check-list { display: grid; gap: 10px; }
.technical-check-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--ui-radius-md); background: var(--ui-soft); }
.technical-check-card.status-critical { border-color: color-mix(in srgb, var(--ui-red) 40%, var(--line)); }
.technical-check-card.status-warning { border-color: color-mix(in srgb, var(--ui-gold) 42%, var(--line)); }
.technical-check-card.status-confirmed { opacity: .82; }
.technical-check-state { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--ui-blue); background: var(--ui-panel-solid); }
.technical-check-copy p { margin: 3px 0; color: var(--muted); line-height: 1.7; }
.technical-check-copy small { color: var(--ui-blue); }

/* The kick-off call to action is deliberately stronger than nearby cards. */
.kickoff-kicker {
  padding: 8px 14px !important;
  border-radius: 999px;
  color: #fff !important;
  background: color-mix(in srgb, var(--ui-purple) 82%, #111) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  font-size: clamp(1rem, 2.3vw, 1.35rem) !important;
  font-weight: 950 !important;
}

.primary-btn.kickoff-button {
  min-height: 64px;
  padding-inline: clamp(22px, 4vw, 38px);
  color: #111 !important;
  background: linear-gradient(135deg, #ffd54a, #ff9f2f) !important;
  box-shadow: 0 16px 38px rgba(255, 165, 40, .38) !important;
  font-size: clamp(1.08rem, 2.8vw, 1.42rem) !important;
  font-weight: 950 !important;
}

@media (max-width: 559px) {
  .live-test-card,
  .technical-operations-intro,
  .technical-check-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .live-test-card > .lucide { display: none; }
  .technical-operations-intro > button,
  .technical-check-card > button { grid-column: 1 / -1; width: 100%; }
  .technical-check-state { width: 40px; }
}

@media (min-width: 1024px) {
  body.has-app-nav .app-shell {
    padding-inline-start: 228px !important;
    padding-inline-end: 24px !important;
  }

  body.has-app-nav .site-footer {
    padding-inline-start: 228px !important;
    padding-inline-end: 24px !important;
  }

  .bottom-nav {
    width: 196px !important;
    max-width: 196px !important;
    grid-auto-rows: minmax(54px, auto) !important;
  }

  .bottom-nav-brand {
    display: grid !important;
    min-height: 78px !important;
    margin-bottom: 4px;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
  }

  .bottom-nav-brand span {
    display: grid;
    width: 150px;
    height: 62px;
  }

  .bottom-nav-brand img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-footer-main {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  .site-footer-links { grid-column: 2 !important; justify-self: center !important; }
  .site-footer .enamad-seal { grid-column: 3 !important; justify-self: end !important; }
}

/* With the brand intentionally removed, keep the only footer link exactly centered. */
@media (min-width: 561px) and (max-width: 1023px) {
  .site-footer-main {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }
  .site-footer-links { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; }
  .site-footer .enamad-seal { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; }
}

@media (max-width: 560px) {
  .site-footer-main { grid-template-columns: minmax(0, 1fr) !important; }
  .site-footer .enamad-seal { grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; }
  .site-footer-links { grid-column: 1 !important; grid-row: 2 !important; justify-self: stretch !important; }
}

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