/*
 * Gymnastics Edge — the third GymMeet Pro skin.
 *
 * Loaded after nocturne.css, only when the gm-ui-skin cookie selects "edge".
 * Nocturne already bridges Bootstrap and the ~200 legacy style.css variables
 * onto a small token set (--color-bg / --color-surface / --color-text /
 * --color-accent / --tone-* / --font-* / --radius-* / --shadow-*); this file
 * re-points those tokens at the Gymnastics Edge design system and then layers
 * the Edge chrome on top: the navy header, Fieldwork Geo at weight 300 with
 * heavy headings, bordered cards instead of rings, tracked uppercase labels,
 * gradient calls to action, and the neon "BADASS" treatment in dark mode.
 *
 * Design source: claude.ai/design "GymMeet Pro - Gymnastics Edge"
 * (gymnastics-edge-ui design system = the published gotham-nextgen library).
 * Ground (light/dark) comes from <html data-theme>, set before first paint by
 * the boot script in base.html and persisted under gm-ui-edge-theme. Edge has
 * a fixed brand palette, so there is no accent picker and no data-accent.
 */

/* ── Type: Fieldwork Geo ─────────────────────────────────────────────────── */
@font-face { font-family: "Fieldwork Geo"; src: url("../fonts/fieldwork-geo-light.0413ecabf0d3.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fieldwork Geo"; src: url("../fonts/fieldwork-geo-regular.73d2f209ec48.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fieldwork Geo"; src: url("../fonts/fieldwork-geo-demibold.95120d8a93cf.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fieldwork Geo"; src: url("../fonts/fieldwork-geo-bold.8423ee345d2b.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fieldwork Geo"; src: url("../fonts/fieldwork-geo-black.d2413d63438d.otf") format("opentype"); font-weight: 800 900; font-display: swap; }

/* ── Tokens (light ground = the design default) ──────────────────────────── */
html[data-skin="edge"] {
  /* Edge design-system tokens (hsl values from _ds_bundle.css :root) */
  --edge-primary: hsl(215 59% 18%);            /* Vault Navy */
  --edge-primary-fg: hsl(0 0% 100%);
  --edge-accent: hsl(269 63% 38%);             /* Royal Purple */
  --edge-accent-fg: hsl(0 0% 100%);
  --edge-cyan: hsl(208 70% 66%);               /* brand blue */
  --edge-yellow: hsl(62 81% 54%);              /* brand yellow */
  --edge-muted: hsl(20 6% 94%);
  --edge-muted-fg: hsl(20 6% 40%);
  --edge-success: hsl(142 71% 45%);
  --edge-warning: hsl(62 81% 54%);
  --edge-error: hsl(0 84% 60%);
  --edge-on-tint-primary: hsl(215 70% 22%);
  --edge-on-tint-accent: hsl(269 70% 30%);
  --edge-header-bg: hsl(215 59% 18%);          /* sidebar-background */
  --edge-header-fg: hsl(0 0% 95%);
  --edge-header-hover: hsl(215 59% 22%);       /* sidebar-accent */
  --edge-header-border: hsl(215 59% 25%);
  --edge-nav-on: hsl(190 100% 74%);
  --edge-nav-on-bg: hsl(190 100% 50% / 0.16);
  --edge-gradient-primary: linear-gradient(135deg, hsl(208 75% 55%) 0%, hsl(215 65% 25%) 40%, hsl(269 68% 45%) 100%);
  --edge-gradient-accent: linear-gradient(135deg, hsl(215 65% 22%), hsl(269 68% 42%));
  --edge-gradient-hero: linear-gradient(135deg, hsl(208 75% 55%) 0%, hsl(215 70% 35%) 50%, hsl(269 68% 45%) 100%);
  --edge-gradient-cta: linear-gradient(90deg, hsl(215 65% 22%), hsl(269 68% 42%));
  --edge-cta-fg: hsl(0 0% 100%);
  --edge-glow-sm: none;
  --edge-glow-accent-sm: none;
  --edge-glow-neon: none;

  /* Nocturne token bridge — every Nocturne rule now paints in Edge colours */
  --color-bg: hsl(210 20% 98%);
  --color-surface: hsl(0 0% 100%);
  --color-text: hsl(215 59% 18%);
  --color-accent: var(--edge-primary);
  --color-accent-2: var(--edge-cyan);
  --color-divider: hsl(20 6% 88%);
  --color-neutral-100: hsl(210 20% 98%);
  --color-neutral-200: hsl(20 6% 94%);
  --color-neutral-300: hsl(20 6% 88%);
  --color-neutral-400: hsl(20 6% 70%);
  --color-neutral-500: hsl(20 6% 55%);
  --color-neutral-600: hsl(20 6% 40%);
  --color-neutral-700: hsl(215 30% 30%);
  --color-neutral-800: hsl(215 45% 24%);
  --color-neutral-900: hsl(215 59% 18%);
  --tone-ok: hsl(142 80% 24%);                 /* on-tint-success: readable on white */
  --tone-warn: hsl(32 100% 32%);               /* on-tint-warning */
  --tone-alert: hsl(0 78% 38%);                /* on-tint-error */
  --font-heading: "Fieldwork Geo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 700;
  --font-body: "Fieldwork Geo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 0 0 1px var(--color-divider);
  --shadow-md: 0 0 0 1px var(--color-divider), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 0 0 1px var(--color-divider), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --text-muted-mix: var(--edge-muted-fg);
  --text-soft-mix: color-mix(in srgb, var(--color-text) 78%, var(--edge-muted-fg));
  --nq-text-rgb: 19, 41, 73;
  --nq-bg-rgb: 249, 250, 251;
  --nq-surface-rgb: 255, 255, 255;
  --nq-accent-rgb: 19, 41, 73;
  --nq-theme-color: #132949;                   /* the header, in a tab and installed */
  --bs-secondary-rgb: 108, 100, 96;
  --bs-dark-rgb: 19, 41, 73;
  color-scheme: light;
}

/* ── Tokens (dark ground = "BADASS" neon) ────────────────────────────────── */
html[data-skin="edge"][data-theme="dark"] {
  --edge-primary: hsl(190 100% 50%);           /* electric cyan */
  --edge-primary-fg: hsl(220 20% 4%);
  --edge-accent: hsl(280 100% 65%);            /* electric purple */
  --edge-accent-fg: hsl(0 0% 100%);
  --edge-cyan: hsl(190 100% 50%);
  --edge-yellow: hsl(55 100% 50%);
  --edge-muted: hsl(220 20% 12%);
  --edge-muted-fg: hsl(220 10% 55%);
  --edge-success: hsl(145 100% 50%);
  --edge-warning: hsl(55 100% 50%);
  --edge-error: hsl(0 100% 60%);
  --edge-on-tint-primary: var(--edge-primary);
  --edge-on-tint-accent: var(--edge-accent);
  --edge-header-bg: hsl(220 25% 6%);
  --edge-header-fg: hsl(0 0% 92%);
  --edge-header-hover: hsl(220 25% 12%);
  --edge-header-border: hsl(220 25% 18%);
  --edge-gradient-primary: linear-gradient(135deg, hsl(190 100% 50%) 0%, hsl(220 80% 45%) 50%, hsl(280 100% 60%) 100%);
  --edge-gradient-accent: linear-gradient(135deg, hsl(280 100% 60%), hsl(190 100% 55%));
  --edge-gradient-hero: linear-gradient(135deg, hsl(190 100% 55%) 0%, hsl(220 70% 40%) 50%, hsl(280 100% 65%) 100%);
  --edge-gradient-cta: linear-gradient(90deg, hsl(280 100% 60%), hsl(190 100% 50%));
  --edge-cta-fg: hsl(220 20% 4%);
  --edge-glow-sm: 0 0 10px hsl(190 100% 50% / 0.45);
  --edge-glow-accent-sm: 0 0 10px hsl(280 100% 60% / 0.45);
  --edge-glow-neon: 0 0 5px hsl(190 100% 50% / 0.5), 0 0 20px hsl(190 100% 50% / 0.3);

  --color-bg: hsl(220 20% 4%);
  --color-surface: hsl(220 25% 7%);
  --color-text: hsl(0 0% 96%);
  --color-divider: hsl(220 25% 15%);
  --color-neutral-100: hsl(0 0% 96%);
  --color-neutral-200: hsl(220 10% 85%);
  --color-neutral-300: hsl(220 10% 70%);
  --color-neutral-400: hsl(220 10% 55%);
  --color-neutral-500: hsl(220 12% 42%);
  --color-neutral-600: hsl(220 15% 30%);
  --color-neutral-700: hsl(220 20% 22%);
  --color-neutral-800: hsl(220 25% 15%);
  --color-neutral-900: hsl(220 20% 12%);
  --tone-ok: var(--edge-success);
  --tone-warn: var(--edge-warning);
  --tone-alert: var(--edge-error);
  --shadow-md: 0 0 0 1px var(--color-divider), 0 6px 18px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 0 0 1px var(--color-divider), 0 16px 40px rgb(0 0 0 / 0.65);
  --text-soft-mix: color-mix(in srgb, var(--color-text) 72%, var(--edge-muted-fg));
  --nq-text-rgb: 245, 245, 245;
  --nq-bg-rgb: 8, 10, 12;
  --nq-surface-rgb: 13, 16, 22;
  --nq-accent-rgb: 0, 212, 255;
  --nq-theme-color: #0b0e13;
  --bs-secondary-rgb: 129, 136, 152;
  --bs-dark-rgb: 24, 29, 37;
  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html[data-skin="edge"] body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
html[data-skin="edge"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
html[data-skin="edge"] :is(h1, .h1) { font-size: 28px; font-weight: 800; }
html[data-skin="edge"] :is(h2, .h2) { font-size: 23px; }
html[data-skin="edge"] :is(h3, .h3) { font-size: 19px; }
html[data-skin="edge"] :is(h4, .h4) { font-size: 16px; }
html[data-skin="edge"] :is(h5, .h5) { font-size: 14px; }
html[data-skin="edge"] :is(h6, .h6) { font-size: 12.5px; }
html[data-skin="edge"] :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { font-weight: 800; }
html[data-skin="edge"] :is(b, strong) { font-weight: 600; }
html[data-skin="edge"] :is(.fw-semibold, .fw-medium) { font-weight: 600 !important; }
html[data-skin="edge"] :is(.fw-bold, .fw-bolder) { font-weight: 700 !important; }
html[data-skin="edge"] .lead { font-size: 14.5px; }
html[data-skin="edge"] small, html[data-skin="edge"] .small { font-size: 12.5px; }
html[data-skin="edge"] a { color: var(--edge-primary); }
html[data-skin="edge"] a:hover { color: var(--edge-accent); }
html[data-skin="edge"] :focus-visible { outline: 2px solid var(--edge-accent); outline-offset: 2px; }
html[data-skin="edge"] ::selection { background: color-mix(in srgb, var(--edge-accent) 28%, transparent); }
html[data-skin="edge"] .text-primary { color: var(--edge-primary) !important; }
html[data-skin="edge"] .text-info { color: var(--edge-on-tint-accent) !important; }

/* The Nocturne fading rule becomes a plain 1px line. */
html[data-skin="edge"] :is(.nq-rule, .nq-panel-body > hr, main hr) { background: var(--color-divider); }
html[data-skin="edge"] .table thead tr, html[data-skin="edge"] .table > thead > tr { background: var(--edge-muted); }
html[data-skin="edge"] .table tbody tr, html[data-skin="edge"] .table > tbody > tr { background: none; }
html[data-skin="edge"] footer::before { max-width: none; background: var(--color-divider); }

/* ── Header (the design's sticky navy bar) ───────────────────────────────── */
html[data-skin="edge"] .navbar {
  --bs-navbar-toggler-border-color: var(--edge-header-border);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background: var(--edge-header-bg) !important;
  color: var(--edge-header-fg);
  box-shadow: none;
  border-bottom: 1px solid var(--edge-header-border);
  padding: 8px 0;
  position: sticky;
  top: 0;
}
html[data-skin="edge"] .navbar .navbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff !important;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  margin-right: 20px;
}
html[data-skin="edge"] .nq-brand-mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--edge-gradient-primary);
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -0.03em;
  box-shadow: var(--edge-glow-neon);
}
html[data-skin="edge"] .navbar .nav-link {
  color: var(--edge-header-fg) !important;
  opacity: 0.82;
  font-size: 13px; font-weight: 300;
  padding: 7px 11px; border-radius: 8px;
  white-space: nowrap;
}
html[data-skin="edge"] .navbar .nav-link:hover,
html[data-skin="edge"] .navbar .nav-link:focus-visible {
  background: var(--edge-header-hover);
  opacity: 1;
  color: var(--edge-header-fg) !important;
}
html[data-skin="edge"] .navbar .nav-link.active,
html[data-skin="edge"] .navbar .nav-item.active > .nav-link {
  color: var(--edge-nav-on) !important;
  background: var(--edge-nav-on-bg);
  opacity: 1;
  font-weight: 500;
  box-shadow: none;
  border-radius: 8px;
}
html[data-skin="edge"] .navbar .nav-link .badge,
html[data-skin="edge"] .navbar .nq-user .badge {
  background: var(--edge-error) !important;
  color: #fff !important;
  border: 0;
  font-size: 10px !important; font-weight: 700 !important;
  padding: 1px 6px !important; border-radius: 999px !important;
  vertical-align: 1px;
}
html[data-skin="edge"] .navbar-toggler { border-color: var(--edge-header-border); }
html[data-skin="edge"] .navbar-toggler:focus { outline-color: var(--edge-nav-on); }
html[data-skin="edge"] .nq-user:hover { background: var(--edge-header-hover); }
html[data-skin="edge"] .nq-user-meta span:first-child { color: #fff; font-weight: 600; font-size: 13px; }
html[data-skin="edge"] .nq-user-meta span:last-child {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: 3px; padding: 1px 9px; border-radius: 999px;
  background: var(--edge-header-hover); border: 1px solid var(--edge-header-border);
  color: var(--edge-header-fg);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5;
}
html[data-skin="edge"] .nq-avatar { background: var(--edge-gradient-primary); color: #fff; font-weight: 700; }
html[data-skin="edge"] .nq-theme-toggle {
  width: auto; height: auto; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--edge-header-border);
  background: var(--edge-header-hover);
  color: var(--edge-header-fg);
  font-family: inherit; font-size: 11px; font-weight: 600;
}
html[data-skin="edge"] .nq-theme-toggle:hover { color: #fff; background: color-mix(in srgb, var(--edge-header-hover) 70%, var(--edge-header-border)); }
html[data-skin="edge"] .nq-theme-toggle .bi { font-size: 13px; }
html[data-skin="edge"] .nq-theme-toggle-label { line-height: 1; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
html[data-skin="edge"] .dropdown-menu {
  --bs-dropdown-link-active-color: var(--edge-on-tint-primary);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--edge-primary) 12%, transparent);
  --bs-dropdown-link-hover-bg: var(--edge-muted);
  border: 1px solid var(--color-divider);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  font-size: 13.5px;
}
html[data-skin="edge"] .nq-appearance-label { font-weight: 700; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-seg { border-radius: 8px; }
html[data-skin="edge"] .nq-seg > * { font-weight: 600; font-size: 12px; }
html[data-skin="edge"] .nq-seg > [aria-pressed="true"],
html[data-skin="edge"] .nq-seg > [aria-current="true"] {
  color: var(--edge-on-tint-primary);
  background: color-mix(in srgb, var(--edge-primary) 12%, transparent);
  box-shadow: none;
}

/* ── Cards: bordered surfaces, no rings ──────────────────────────────────── */
html[data-skin="edge"] :is(.card, .modern-card, .card-modern, .step-card, .admin-panel, .stats-card, .meet-card,
    .nq-panel, .nq-fact-card, .nq-toolbar, .nq-callout) {
  border: 1px solid var(--color-divider) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
}
html[data-skin="edge"] .card:hover, html[data-skin="edge"] .meet-card:hover { box-shadow: none !important; }
html[data-skin="edge"] .card > .card-header { padding: 16px 20px; }
html[data-skin="edge"] .card > .card-footer { padding: 12px 20px; }
html[data-skin="edge"] .card-header :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-size: 15px; font-weight: 700; }
html[data-skin="edge"] .card-header .bi { color: var(--edge-primary); }
html[data-skin="edge"] .card-title { font-weight: 700; }
html[data-skin="edge"] .card.border-warning { box-shadow: inset 3px 0 0 var(--edge-warning) !important; }
html[data-skin="edge"] .card.border-primary { box-shadow: inset 3px 0 0 var(--edge-accent) !important; }
html[data-skin="edge"] .card.border-success { box-shadow: inset 3px 0 0 var(--edge-success) !important; }
html[data-skin="edge"] .card.border-danger { box-shadow: inset 3px 0 0 var(--edge-error) !important; }
html[data-skin="edge"] .stats-number { color: var(--color-text) !important; font-weight: 800 !important; font-size: 26px; letter-spacing: -0.02em; }
html[data-skin="edge"] .stats-label {
  color: var(--edge-muted-fg) !important;
  font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase;
}
html[data-skin="edge"] :is(.feature-icon, .modern-icon, .step-icon) {
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--edge-primary) 10%, transparent) !important;
  color: var(--edge-primary) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
html[data-skin="edge"] .btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: 7px;
  --bs-btn-padding-x: 14px;
  --bs-btn-border-radius: 8px;
  letter-spacing: 0;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease, filter 0.12s ease;
}
html[data-skin="edge"] .btn-sm { --bs-btn-font-size: 12px; --bs-btn-padding-y: 5px; --bs-btn-padding-x: 11px; }
html[data-skin="edge"] .btn-lg { --bs-btn-font-size: 14.5px; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 18px; }
/* Primary = the design's gradient-cta */
html[data-skin="edge"] :is(.btn-primary, .btn-gradient-primary, .btn-info, .btn-purple, .modern-btn-primary, .btn-gradient) {
  position: relative; overflow: hidden;
  background: var(--edge-gradient-cta) !important;
  background-image: var(--edge-gradient-cta) !important;
  color: var(--edge-cta-fg) !important;
  border: 1px solid transparent !important;
}
html[data-skin="edge"] :is(.btn-primary, .btn-gradient-primary, .btn-info, .btn-purple, .modern-btn-primary, .btn-gradient)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, hsl(0 0% 100% / 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
html[data-skin="edge"] :is(.btn-primary, .btn-gradient-primary, .btn-info, .btn-purple, .modern-btn-primary, .btn-gradient):hover::after { transform: translateX(100%); }
html[data-skin="edge"] :is(.btn-primary, .btn-gradient-primary, .btn-info, .btn-purple, .modern-btn-primary, .btn-gradient):is(:hover, :focus-visible, :active, .active) {
  background: var(--edge-gradient-cta) !important;
  color: var(--edge-cta-fg) !important;
  filter: brightness(1.08);
  box-shadow: var(--edge-glow-accent-sm) !important;
}
html[data-skin="edge"] .btn-close::before { color: var(--color-text); }
/* Outline = border + foreground */
html[data-skin="edge"] :is(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark) {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-divider) !important;
}
html[data-skin="edge"] :is(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark):is(:hover, :focus-visible) {
  background: var(--edge-muted) !important;
  color: var(--color-text) !important;
  border-color: color-mix(in srgb, var(--edge-primary) 40%, var(--color-divider)) !important;
}
html[data-skin="edge"] :is(.btn-outline-primary, .btn-outline-secondary):is(:active, .active),
html[data-skin="edge"] .btn-check:checked + :is(.btn-outline-primary, .btn-outline-secondary),
html[data-skin="edge"] .btn-group > .btn.active {
  background: color-mix(in srgb, var(--edge-primary) 12%, transparent) !important;
  color: var(--edge-on-tint-primary) !important;
  border-color: color-mix(in srgb, var(--edge-primary) 45%, transparent) !important;
}
/* Secondary = muted fill */
html[data-skin="edge"] :is(.btn-secondary, .btn-light, .btn-dark, .modern-btn-secondary) {
  background: var(--edge-muted) !important;
  color: var(--color-text) !important;
  border: 1px solid transparent !important;
}
html[data-skin="edge"] :is(.btn-secondary, .btn-light, .btn-dark, .modern-btn-secondary):is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, var(--edge-muted) 80%, var(--color-text)) !important;
  color: var(--color-text) !important;
  border-color: transparent !important;
}
/* Ghost */
html[data-skin="edge"] .btn-link { color: var(--edge-primary) !important; font-weight: 600; }
html[data-skin="edge"] .btn-link:hover { background: var(--edge-muted) !important; color: var(--edge-accent) !important; }
html[data-skin="edge"] .btn-group > .btn + .btn { margin-left: 6px; }
html[data-skin="edge"] .action-btn { font-weight: 600 !important; border-color: var(--color-divider) !important; }
html[data-skin="edge"] .action-btn i { color: var(--edge-primary); }

/* ── Tags / badges: tinted pills with heavy small type ───────────────────── */
html[data-skin="edge"] :is(.badge, .tag) {
  font-family: var(--font-body);
  font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: 0.02em; line-height: 1.5;
  padding: 2px 9px !important; border-radius: 999px !important;
  background: var(--edge-muted) !important;
  color: var(--edge-muted-fg) !important;
  border: 1px solid transparent;
}
html[data-skin="edge"] :is(.badge.bg-primary, .badge.bg-info, .badge.bg-purple, .tag-accent, .badge.text-bg-primary, .badge.text-bg-info) {
  background: color-mix(in srgb, var(--edge-primary) 12%, transparent) !important;
  color: var(--edge-on-tint-primary) !important;
}
html[data-skin="edge"] :is(.badge.bg-success, .tag-ok, .badge.text-bg-success) {
  background: color-mix(in srgb, var(--edge-success) 15%, transparent) !important;
  color: var(--tone-ok) !important;
  border-color: color-mix(in srgb, var(--edge-success) 30%, transparent);
}
html[data-skin="edge"] :is(.badge.bg-warning, .tag-warn, .badge.text-bg-warning) {
  background: color-mix(in srgb, var(--edge-warning) 22%, transparent) !important;
  color: var(--tone-warn) !important;
  border-color: color-mix(in srgb, var(--edge-warning) 45%, transparent);
}
html[data-skin="edge"] :is(.badge.bg-danger, .tag-alert, .badge.text-bg-danger) {
  background: color-mix(in srgb, var(--edge-error) 14%, transparent) !important;
  color: var(--tone-alert) !important;
  border-color: color-mix(in srgb, var(--edge-error) 30%, transparent);
}
html[data-skin="edge"] .tag-outline { background: transparent !important; border-color: var(--color-divider); color: var(--color-text) !important; }

/* ── Alerts / callouts ───────────────────────────────────────────────────── */
html[data-skin="edge"] .alert {
  --bs-alert-bg: var(--color-surface);
  border: 1px solid var(--color-divider) !important;
  box-shadow: inset 3px 0 0 var(--edge-accent);
  font-size: 13.5px;
}
html[data-skin="edge"] .alert .bi { color: var(--edge-accent); }
html[data-skin="edge"] .alert .alert-heading { font-weight: 700; }
html[data-skin="edge"] .alert-success { --bs-alert-bg: color-mix(in srgb, var(--edge-success) 8%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--edge-success); }
html[data-skin="edge"] .alert-warning { --bs-alert-bg: color-mix(in srgb, var(--edge-warning) 12%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--edge-warning); }
html[data-skin="edge"] :is(.alert-danger, .alert-error) { --bs-alert-bg: color-mix(in srgb, var(--edge-error) 8%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--edge-error); }
html[data-skin="edge"] :is(.alert-info, .alert-primary) { --bs-alert-bg: color-mix(in srgb, var(--edge-primary) 6%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--edge-primary); }
html[data-skin="edge"] :is(.alert-info, .alert-primary) .bi { color: var(--edge-primary); }
html[data-skin="edge"] .modern-message { border: 1px solid var(--color-divider) !important; box-shadow: inset 3px 0 0 var(--edge-accent); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
html[data-skin="edge"] :is(.form-control, .form-select, .modern-form-control, .input) {
  border-radius: 8px !important;
  font-weight: 300;
  font-size: 13.5px;
  caret-color: var(--edge-accent);
}
html[data-skin="edge"] :is(.form-control, .form-select, .modern-form-control):focus {
  border-color: var(--edge-accent) !important;
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge-accent) 22%, transparent) !important;
}
html[data-skin="edge"] :is(.form-label, .modern-form-label, .col-form-label) {
  font-size: 12.5px; font-weight: 600 !important; color: var(--color-text) !important;
}
html[data-skin="edge"] .form-label .bi { color: var(--edge-primary); }
html[data-skin="edge"] .form-check-input:hover { border-color: var(--edge-accent) !important; }
html[data-skin="edge"] .form-check-input:checked { background-color: var(--edge-accent) !important; border-color: var(--edge-accent) !important; }
html[data-skin="edge"] .form-check-input:focus-visible { outline-color: var(--edge-accent); }
html[data-skin="edge"] .input-group-text { border-radius: 8px; }
html[data-skin="edge"] .form-text { font-size: 12px; }
html[data-skin="edge"] .nq-pick:has(input:checked) {
  border-color: color-mix(in srgb, var(--edge-accent) 50%, transparent);
  background: color-mix(in srgb, var(--edge-accent) 6%, transparent);
}
html[data-skin="edge"] .nq-chip-on { border-color: var(--edge-primary); color: var(--edge-on-tint-primary); background: color-mix(in srgb, var(--edge-primary) 8%, transparent); }

/* ── Tables: muted header band, tracked uppercase labels, ruled rows ─────── */
html[data-skin="edge"] .table { font-size: 13px; }
html[data-skin="edge"] .table > :not(caption) > * > * { padding: 12px 16px; }
html[data-skin="edge"] :is(.table th, .table thead th) {
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.1em;
  color: var(--edge-muted-fg) !important;
  padding-top: 10px; padding-bottom: 10px;
}
html[data-skin="edge"] .table th .bi { color: var(--edge-muted-fg); }
html[data-skin="edge"] .table > tbody > tr > * { border-top: 1px solid var(--color-divider) !important; }
html[data-skin="edge"] .table > tbody > tr:first-child > * { border-top-color: var(--color-divider) !important; }
html[data-skin="edge"] .table tbody tr:last-child { background: none; }
html[data-skin="edge"] .table td .text-muted { color: var(--edge-muted-fg) !important; }
html[data-skin="edge"] :is(.table .fw-semibold, .table .fw-bold, .table td strong) { font-weight: 600; }
html[data-skin="edge"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--edge-muted); }
html[data-skin="edge"] .table-bordered > :not(caption) > * > * { border-color: var(--color-divider) !important; }

/* ── Lists, pagination, tabs, modals ─────────────────────────────────────── */
html[data-skin="edge"] .list-group { --bs-list-group-active-color: var(--edge-on-tint-primary); --bs-list-group-active-bg: color-mix(in srgb, var(--edge-primary) 12%, transparent); }
html[data-skin="edge"] .list-group-item:hover { background: var(--edge-muted) !important; }
html[data-skin="edge"] .breadcrumb { font-size: 12.5px; }
html[data-skin="edge"] .breadcrumb-item.active { font-weight: 500; }
html[data-skin="edge"] .pagination {
  --bs-pagination-active-bg: color-mix(in srgb, var(--edge-primary) 12%, transparent);
  --bs-pagination-active-color: var(--edge-on-tint-primary);
  --bs-pagination-active-border-color: transparent;
  --bs-pagination-hover-bg: var(--edge-muted);
  --bs-pagination-border-radius: 8px;
  --bs-pagination-font-size: 13px;
}
html[data-skin="edge"] .page-link { font-weight: 600; border-radius: 8px !important; }
html[data-skin="edge"] .nav-tabs {
  --bs-nav-tabs-link-active-color: var(--edge-primary);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--edge-primary);
  --bs-nav-link-hover-color: var(--edge-accent);
  --bs-nav-link-font-weight: 600;
}
html[data-skin="edge"] .nav-tabs .nav-link { font-weight: 600; font-size: 13px; }
html[data-skin="edge"] .nav-pills {
  --bs-nav-pills-link-active-bg: color-mix(in srgb, var(--edge-primary) 12%, transparent);
  --bs-nav-pills-link-active-color: var(--edge-on-tint-primary);
  --bs-nav-pills-border-radius: 8px;
}
html[data-skin="edge"] .accordion { --bs-accordion-active-color: var(--edge-primary); --bs-accordion-active-bg: var(--edge-muted); --bs-accordion-border-radius: 8px; --bs-accordion-inner-border-radius: 8px; }
html[data-skin="edge"] .accordion-button { font-weight: 600; }
html[data-skin="edge"] .modal { --bs-modal-border-radius: 12px; --bs-modal-inner-border-radius: 12px; }
html[data-skin="edge"] .modal-content { border: 1px solid var(--color-divider); }
html[data-skin="edge"] .modal-title { font-weight: 700; font-size: 18px; }
html[data-skin="edge"] .modal-header .bi { color: var(--edge-primary); }
html[data-skin="edge"] .modal-backdrop { --bs-backdrop-bg: hsl(215 59% 8%); --bs-backdrop-opacity: 0.55; }
html[data-skin="edge"] .tooltip { --bs-tooltip-bg: var(--edge-header-bg); --bs-tooltip-color: var(--edge-header-fg); --bs-tooltip-border-radius: 6px; }
html[data-skin="edge"] .popover { border: 1px solid var(--color-divider); }
html[data-skin="edge"] .progress-bar { background: var(--edge-gradient-cta); }
html[data-skin="edge"] .toast { border: 1px solid var(--color-divider); }

/* ── Chrome: banners, footer, PWA ────────────────────────────────────────── */
html[data-skin="edge"] .nq-impersonation {
  background: color-mix(in srgb, var(--edge-warning) 16%, var(--color-surface));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--edge-warning) 50%, transparent);
  font-weight: 400;
}
html[data-skin="edge"] .nq-impersonation .bi { color: var(--tone-warn); }
html[data-skin="edge"] .nq-impersonation strong { font-weight: 700; }
html[data-skin="edge"] #offline-notification { box-shadow: inset 3px 0 0 var(--edge-warning); }
html[data-skin="edge"] #notification-permission-banner > div { border-bottom: 1px solid var(--color-divider); }
html[data-skin="edge"] #notification-permission-banner .bi { color: var(--edge-primary); }
html[data-skin="edge"] #notification-permission-banner #enable-notifications {
  background: var(--edge-gradient-cta) !important; color: var(--edge-cta-fg) !important; border-color: transparent !important; font-weight: 600 !important;
}
html[data-skin="edge"] footer, html[data-skin="edge"] footer.bg-light {
  color: var(--edge-muted-fg) !important;
  font-size: 11.5px; margin-top: 36px; padding: 18px 0 28px;
}
html[data-skin="edge"] footer::before { margin-bottom: 18px; }
html[data-skin="edge"] footer a, html[data-skin="edge"] footer a.text-muted { color: var(--edge-muted-fg) !important; }
html[data-skin="edge"] footer a:hover { color: var(--edge-accent) !important; }
html[data-skin="edge"] .pwa-bottom-nav-item.active { color: var(--edge-primary) !important; }
html[data-skin="edge"] .pwa-bottom-nav-item.active:after { background-color: var(--edge-primary) !important; }
html[data-skin="edge"] :is(#install-button, .install-prompt) { background: var(--edge-gradient-cta) !important; color: var(--edge-cta-fg) !important; border-color: transparent !important; }

/* Admin workspace shell: the trigger sits on the navy header, so it takes the header chrome */
html[data-skin="edge"] .admin-tools-trigger {
  color: var(--edge-header-fg); border-color: var(--edge-header-border); background: var(--edge-header-hover);
  border-radius: 8px; font-size: 13px; font-weight: 500;
}
html[data-skin="edge"] .admin-tools-trigger:hover,
html[data-skin="edge"] .admin-tools-menu[open] > .admin-tools-trigger { color: #fff; border-color: var(--edge-nav-on); background: var(--edge-nav-on-bg); }
html[data-skin="edge"] .admin-tools-panel { border: 1px solid var(--color-divider); }
html[data-skin="edge"] :is(.admin-tools-panel a.active, .admin-related-nav a.active) { background: color-mix(in srgb, var(--edge-primary) 12%, transparent); color: var(--edge-on-tint-primary); font-weight: 600; }
html[data-skin="edge"] .admin-mode-label { color: var(--edge-primary); font-weight: 700; }
html[data-skin="edge"] .admin-eyebrow { font-weight: 700; letter-spacing: 0.12em; }
html[data-skin="edge"] .admin-count { color: var(--color-text); font-weight: 800; }
html[data-skin="edge"] .admin-attention { border: 1px solid var(--color-divider) !important; box-shadow: inset 0 3px 0 var(--edge-accent) !important; }

/* Legacy page banners: a bordered card instead of the Nocturne glow */
html[data-skin="edge"] :is(.page-header, .profile-header, .auth-header, .athlete-hero, .total-card,
    .team-header, .admin-header, .delete-header, .form-header, .expenses-header,
    .billing-header, .list-header) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-divider) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md);
}
html[data-skin="edge"] :is(.page-header, .profile-header, .auth-header, .athlete-hero, .total-card,
    .team-header, .admin-header, .delete-header, .form-header, .expenses-header,
    .billing-header, .list-header) :is(h1, h2, h3, .display-5, .display-6) > .bi,
html[data-skin="edge"] .auth-header .auth-icon { color: var(--edge-primary) !important; }
html[data-skin="edge"] :is(.page-header, .athlete-hero, .team-header, .admin-header, .billing-header, .list-header) :is(.badge.bg-light, .badge.bg-white) {
  background: color-mix(in srgb, var(--edge-primary) 12%, transparent) !important;
  color: var(--edge-on-tint-primary) !important;
}
html[data-skin="edge"] :is(.athlete-avatar, .user-avatar, .profile-avatar, .athlete-hero .avatar, .verification-icon, .rounded-circle.bg-primary, .rounded-circle.bg-info) {
  background: var(--edge-gradient-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
html[data-skin="edge"] .welcome-header { border: 1px solid var(--color-divider) !important; box-shadow: none !important; }

/* ── Page primitives (the redesigned templates) ──────────────────────────── */
html[data-skin="edge"] .nq-page { padding-top: 28px; padding-bottom: 8px; }
html[data-skin="edge"] .nq-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--edge-on-tint-accent); }
html[data-skin="edge"] .nq-eyebrow { font-weight: 700; letter-spacing: 0.12em; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-muted { color: var(--edge-muted-fg); }
/* PageHeader: title + subtitle on the page, ruled underneath, no card */
html[data-skin="edge"] :is(.nq-hero, .nq-hero-right) {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 2px 0 20px;
  margin-bottom: 22px;
  overflow: visible;
}
html[data-skin="edge"] .nq-hero :is(h1, h2) { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
html[data-skin="edge"] .nq-hero-sub { font-size: 13px; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-hero-meta { font-size: 12.5px; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-hero-meta .bi { color: var(--edge-primary); }
html[data-skin="edge"] .nq-today-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-today-value { font-size: 15px; font-weight: 700; }
html[data-skin="edge"] .nq-page-head { margin-bottom: 20px; }
html[data-skin="edge"] .nq-page-head :is(h1, h2) { font-size: 26px; font-weight: 800; }
html[data-skin="edge"] .nq-page-sub { font-size: 13px; color: var(--edge-muted-fg); }
/* TipBanner */
html[data-skin="edge"] .nq-callout {
  background: var(--color-surface);
  border-left: 3px solid var(--edge-accent) !important;
  box-shadow: none;
}
html[data-skin="edge"] .nq-callout > .bi { color: var(--edge-accent); }
html[data-skin="edge"] .nq-callout-title { font-weight: 700; font-size: 14px; }
html[data-skin="edge"] .nq-callout-text { font-size: 12.5px; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-callout-warn { border-left-color: var(--edge-warning) !important; background: color-mix(in srgb, var(--edge-warning) 10%, var(--color-surface)); }
html[data-skin="edge"] .nq-callout-warn > .bi { color: var(--tone-warn); }
html[data-skin="edge"] .nq-callout-ok { border-left-color: var(--edge-success) !important; background: color-mix(in srgb, var(--edge-success) 8%, var(--color-surface)); }
html[data-skin="edge"] .nq-callout-ok > .bi { color: var(--tone-ok); }
/* Panels + rows */
html[data-skin="edge"] .nq-panel-head { padding: 16px 20px; }
html[data-skin="edge"] .nq-panel-head > .bi { color: var(--edge-primary); font-size: 16px; }
html[data-skin="edge"] .nq-panel-title { font-weight: 700; font-size: 15px; }
html[data-skin="edge"] .nq-panel-link { font-size: 12px; font-weight: 600; }
html[data-skin="edge"] .nq-panel-body { padding: 18px 20px; }
html[data-skin="edge"] .nq-panel-note { font-size: 12px; color: var(--edge-muted-fg); padding: 12px 20px; }
html[data-skin="edge"] .nq-panel-foot { padding: 12px 20px 16px; }
html[data-skin="edge"] .nq-row { padding: 16px 20px; gap: 16px; }
html[data-skin="edge"] a.nq-row:hover { background: var(--edge-muted); }
html[data-skin="edge"] .nq-row-title { font-weight: 600; font-size: 14px; }
html[data-skin="edge"] .nq-row-sub { font-size: 12.5px; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-row-value { font-weight: 700; font-size: 14px; color: var(--color-text); }
html[data-skin="edge"] .nq-date-tile { width: 54px; background: none; padding: 0; }
html[data-skin="edge"] .nq-date-tile-mon { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-date-tile-day { font-size: 22px; font-weight: 800; line-height: 1.1; }
html[data-skin="edge"] .nq-date-tile-warn { background: none; }
html[data-skin="edge"] .nq-date-tile-warn .nq-date-tile-mon { color: var(--tone-warn); }
html[data-skin="edge"] .nq-date-tile-alert { background: none; }
html[data-skin="edge"] .nq-date-tile-alert .nq-date-tile-mon { color: var(--tone-alert); }
html[data-skin="edge"] .nq-icon-circle { border-radius: 8px; background: color-mix(in srgb, var(--edge-primary) 10%, transparent); color: var(--edge-primary); }
html[data-skin="edge"] .nq-icon-circle-neutral { background: var(--edge-muted); color: var(--color-text); }
/* QuickLink */
html[data-skin="edge"] .nq-actions { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 16px 20px; }
html[data-skin="edge"] .nq-action {
  min-height: 68px; padding: 12px 14px; gap: 12px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
html[data-skin="edge"] .nq-action:hover {
  background: var(--edge-muted);
  border-color: color-mix(in srgb, var(--edge-primary) 40%, var(--color-divider));
  color: var(--color-text);
}
html[data-skin="edge"] .nq-action .bi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: color-mix(in srgb, var(--edge-primary) 10%, transparent);
  color: var(--edge-primary); font-size: 17px;
}
html[data-skin="edge"] .nq-action span { font-weight: 600; font-size: 13.5px; }
/* Fact cards, toolbar, chips */
html[data-skin="edge"] .nq-fact-card { padding: 18px 20px; }
html[data-skin="edge"] .nq-fact-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-fact { font-size: 13px; }
html[data-skin="edge"] .nq-fact-k { color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-toolbar-hint { color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-toolbar-summary { color: var(--edge-on-tint-primary); font-weight: 600; }
html[data-skin="edge"] .nq-chip { font-weight: 500; }
html[data-skin="edge"] .nq-pick-name { font-weight: 600; }
html[data-skin="edge"] .nq-pick-sub { color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-empty { color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-section-tag { color: var(--edge-muted-fg); }
/* Login: brand panel takes the hero gradient in light, a cyan glow in dark */
html[data-skin="edge"] .nq-login-brand { background: var(--edge-gradient-hero); color: #fff; }
html[data-skin="edge"] .nq-login-brand h1 { color: #fff; font-weight: 800; }
html[data-skin="edge"] .nq-login-brand p { color: hsl(0 0% 100% / 0.82); }
html[data-skin="edge"] .nq-login-brand .nq-brand { color: #fff; font-weight: 700; }
html[data-skin="edge"] .nq-login-brand .nq-brand-tag { color: hsl(0 0% 100% / 0.72); font-weight: 700; }
html[data-skin="edge"] .nq-login-brand .nq-feature-icon { border-color: hsl(0 0% 100% / 0.4); color: #fff; background: hsl(0 0% 100% / 0.12); }
html[data-skin="edge"] .nq-login-brand .nq-feature-title { color: #fff; font-weight: 700; }
html[data-skin="edge"] .nq-login-brand .nq-feature-text { color: hsl(0 0% 100% / 0.78); }
html[data-skin="edge"][data-theme="dark"] .nq-login-brand {
  background: radial-gradient(120% 140% at 0% 0%, hsl(190 100% 50% / 0.18), transparent 60%),
              radial-gradient(90% 120% at 100% 100%, hsl(280 100% 60% / 0.16), transparent 60%),
              var(--color-surface);
  color: var(--color-text);
}
html[data-skin="edge"][data-theme="dark"] .nq-login-brand :is(h1, .nq-brand, .nq-feature-title) { color: var(--color-text); }
html[data-skin="edge"][data-theme="dark"] .nq-login-brand :is(p, .nq-feature-text) { color: var(--edge-muted-fg); }
html[data-skin="edge"][data-theme="dark"] .nq-login-brand .nq-brand-tag { color: var(--edge-primary); }
html[data-skin="edge"][data-theme="dark"] .nq-login-brand .nq-feature-icon { border-color: color-mix(in srgb, var(--edge-primary) 45%, transparent); color: var(--edge-primary); background: color-mix(in srgb, var(--edge-primary) 10%, transparent); }
html[data-skin="edge"] .nq-login-form h2 { font-weight: 800; }
html[data-skin="edge"] .nq-secure { color: var(--edge-muted-fg); }
html[data-skin="edge"] .nq-feature-title { font-weight: 700; }

/* ── Installed app: the header stays the Edge navy (Nocturne paints the accent) */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html[data-skin="edge"][data-theme] .navbar {
    --bs-navbar-toggler-border-color: var(--edge-header-border);
    background: var(--edge-header-bg) !important;
    border-bottom: 1px solid var(--edge-header-border);
    top: env(safe-area-inset-top, 0);
  }
  html[data-skin="edge"][data-theme] .navbar .nav-link { color: var(--edge-header-fg) !important; }
  html[data-skin="edge"][data-theme] .navbar .nav-link:hover,
  html[data-skin="edge"][data-theme] .navbar .nav-link:focus-visible { background: var(--edge-header-hover); }
  html[data-skin="edge"][data-theme] .navbar .nav-link.active,
  html[data-skin="edge"][data-theme] .navbar .nav-item.active > .nav-link { color: var(--edge-nav-on) !important; background: var(--edge-nav-on-bg); box-shadow: none; }
  html[data-skin="edge"][data-theme] .navbar .nq-user-meta span:last-child { color: var(--edge-header-fg); }
  html[data-skin="edge"][data-theme] .navbar .nq-avatar { background: var(--edge-gradient-primary); color: #fff; }
  html[data-skin="edge"][data-theme] .navbar .nq-theme-toggle { color: var(--edge-header-fg) !important; }
  html[data-skin="edge"][data-theme] .navbar .nq-theme-toggle:hover { background: var(--edge-header-hover); }
  html[data-skin="edge"][data-theme] .navbar-toggler { border-color: var(--edge-header-border); }
  /* pwa.css fills the status-bar safe area with --bs-primary; match the header */
  html[data-skin="edge"][data-theme] .pwa-status-bar { background-color: var(--edge-header-bg); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  html[data-skin="edge"] .navbar .navbar-collapse { padding: 10px 0 6px; }
  html[data-skin="edge"] .navbar .nav-link { padding: 9px 12px; }
  html[data-skin="edge"] .navbar .nav-link.active { box-shadow: none; padding-left: 12px; }
  html[data-skin="edge"] .navbar .navbar-nav.align-items-lg-center { flex-direction: row; align-items: center; gap: 10px; padding-top: 6px; }
  html[data-skin="edge"] .nq-hero { padding: 0 0 16px; }
  html[data-skin="edge"] .nq-hero :is(h1, h2) { font-size: 23px; }
}
@media (max-width: 575.98px) {
  html[data-skin="edge"] body { font-size: 13.5px; }
  html[data-skin="edge"] :is(h1, .h1) { font-size: 24px; }
  html[data-skin="edge"] .nq-hero :is(h1, h2), html[data-skin="edge"] .nq-page-head :is(h1, h2) { font-size: 22px; }
  html[data-skin="edge"] .nq-row { padding: 12px 14px; gap: 12px; }
  html[data-skin="edge"] .nq-panel-head, html[data-skin="edge"] .nq-panel-body { padding-left: 14px; padding-right: 14px; }
  html[data-skin="edge"] .nq-actions { grid-template-columns: 1fr; padding: 12px 14px; }
  html[data-skin="edge"] .nq-date-tile { width: 44px; }
  html[data-skin="edge"] .nq-date-tile-day { font-size: 18px; }
  html[data-skin="edge"] .table > :not(caption) > * > * { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="edge"] .btn::after { transition: none; }
}