/* =============================================================================
   AAsset Protect — Premium Navy Design System
   Production stylesheet · self-contained · token-driven
   ---------------------------------------------------------------------------
   Implements the approved "premium navy" system: navy/blue brand, neutral
   greys, semantic green/amber/red, Inter + JetBrains Mono, restrained radii
   and shadows, and a full set of reusable components.

   Page-author components are prefixed `ds-` so they never collide with any
   existing site classes. Token names mirror the sign-off style guide.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand: navy --- */
  --ds-navy-deepest: #061327;
  --ds-navy-deep:    #0A1F3F;
  --ds-navy:         #0F2A52;
  --ds-navy-soft:    #1A3868;
  --ds-navy-line:    #2A4574;

  /* --- Brand: accent blue --- */
  --ds-blue:         #2563EB;
  --ds-blue-bright:  #3B82F6;
  --ds-blue-deep:    #1D4ED8;
  --ds-blue-soft:    #DBEAFE;

  /* --- Semantic --- */
  --ds-green:        #16A34A;
  --ds-green-soft:   #DCFCE7;
  --ds-green-text:   #065F46;
  --ds-green-border: #A7F3D0;

  --ds-amber:        #D97706;
  --ds-amber-soft:   #FEF3C7;
  --ds-amber-text:   #92400E;
  --ds-amber-border: #FCD34D;

  --ds-red:          #DC2626;
  --ds-red-soft:     #FEE2E2;
  --ds-red-text:     #991B1B;
  --ds-red-border:   #FBB5B5;

  --ds-info-border:  #BFD6FB;

  /* --- Neutrals --- */
  --ds-white: #FFFFFF;
  --ds-g50:   #F8FAFC;
  --ds-g100:  #F1F5F9;
  --ds-g200:  #E2E8F0;
  --ds-g300:  #CBD5E1;
  --ds-g400:  #94A3B8;
  --ds-g500:  #64748B;
  --ds-g600:  #475569;
  --ds-g700:  #334155;
  --ds-g800:  #1E293B;
  --ds-g900:  #0F172A;
  --ds-page:  #EEF1F6; /* app canvas behind cards, per style guide body */

  /* --- Semantic surface / text roles --- */
  --ds-bg:           var(--ds-white);
  --ds-bg-alt:       var(--ds-g50);
  --ds-bg-canvas:    var(--ds-page);
  --ds-bg-dark:      var(--ds-navy-deep);
  --ds-bg-darkest:   var(--ds-navy-deepest);

  --ds-text:         var(--ds-g900);
  --ds-text-mute:    var(--ds-g600);
  --ds-text-faint:   var(--ds-g500);
  --ds-text-on-dark: rgba(255, 255, 255, 0.95);
  --ds-text-on-dark-mute: rgba(255, 255, 255, 0.65);

  --ds-border:        var(--ds-g200);
  --ds-border-strong: var(--ds-g300);
  --ds-border-on-dark: rgba(255, 255, 255, 0.12);

  --ds-accent:       var(--ds-blue);
  --ds-accent-hover: var(--ds-blue-deep);
  --ds-accent-soft:  var(--ds-blue-soft);

  /* --- Typography --- */
  --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ds-fs-xs:   12px;
  --ds-fs-sm:   14px;
  --ds-fs-base: 16px;
  --ds-fs-md:   18px;
  --ds-fs-lg:   20px;
  --ds-fs-xl:   24px;
  --ds-fs-2xl:  30px;
  --ds-fs-3xl:  36px;
  --ds-fs-4xl:  44px;
  --ds-fs-5xl:  56px;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-semibold:600;
  --ds-fw-bold:    700;
  --ds-fw-extra:   800;

  /* --- Spacing (4px grid) --- */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-7: 32px;
  --ds-sp-8: 40px;
  --ds-sp-9: 56px;
  --ds-sp-10: 72px;
  --ds-sp-11: 96px;

  /* --- Radii --- */
  --ds-r-xs:   4px;
  --ds-r-sm:   6px;
  --ds-r-md:   8px;
  --ds-r-lg:   12px;
  --ds-r-xl:   16px;
  --ds-r-2xl:  20px;
  --ds-r-full: 999px;

  /* --- Shadows --- */
  --ds-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-sh-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --ds-sh-lg: 0 12px 28px -12px rgba(15, 23, 42, 0.18);
  --ds-sh-xl: 0 24px 50px -24px rgba(8, 18, 40, 0.50);
  --ds-sh-focus: 0 0 0 3px rgba(37, 99, 235, 0.20);

  /* --- Motion --- */
  --ds-dur: 0.18s;
  --ds-dur-slow: 0.35s;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --- */
  --ds-container: 1080px;
  --ds-container-wide: 1280px;
  --ds-container-narrow: 720px;

  /* --- Premium polish accents (added by polish layer) --- */
  --ds-blue-deepest:   #1538A8;            /* darker stop for primary gradient */
  --ds-cyan:           #38BDF8;            /* signature accent (used sparingly) */
  --ds-indigo:         #4F46E5;            /* alt signature stop */

  /* Brand signature gradient — sparing use only (CTA, accents, key rules) */
  --ds-grad-signature: linear-gradient(135deg, var(--ds-blue-bright) 0%, var(--ds-cyan) 100%);
  --ds-grad-primary:   linear-gradient(180deg, var(--ds-blue-bright) 0%, var(--ds-blue-deep) 100%);
  --ds-grad-rule:      linear-gradient(90deg, var(--ds-blue) 0%, var(--ds-cyan) 100%);

  /* Layered premium shadows */
  --ds-sh-card:  0 1px 1px rgba(15, 23, 42, 0.04),
                 0 2px 4px rgba(15, 23, 42, 0.04),
                 0 12px 28px -16px rgba(15, 23, 42, 0.18);
  --ds-sh-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06),
                 0 18px 40px -18px rgba(15, 23, 42, 0.28);
  --ds-glow-blue:      0 8px 22px -6px rgba(37, 99, 235, 0.45);
  --ds-glow-blue-strong: 0 10px 30px -6px rgba(37, 99, 235, 0.55);

  /* Refined easing + duration for premium interactions */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-dur-polish: 0.25s;
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   Lightweight and scoped so this file can drop onto a page without a separate
   reset. Only sets what the system needs; does not aggressively zero margins
   on arbitrary elements outside its own scope.
   -------------------------------------------------------------------------- */
.ds-root,
.ds-root *,
.ds-root *::before,
.ds-root *::after { box-sizing: border-box; }

.ds-root {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-base);
  line-height: 1.5;
  color: var(--ds-text);
  background: var(--ds-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

.ds-root img,
.ds-root svg { display: block; max-width: 100%; }

.ds-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.ds-num  { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.ds-container--wide   { max-width: var(--ds-container-wide); }
.ds-container--narrow { max-width: var(--ds-container-narrow); }

/* Section — vertical rhythm band */
.ds-section {
  padding-block: clamp(40px, 6vw, 72px);
}
.ds-section--tight { padding-block: clamp(28px, 4vw, 44px); }
.ds-section--alt   { background: var(--ds-bg-alt); }
.ds-section--canvas{ background: var(--ds-bg-canvas); }
.ds-section--dark {
  background: var(--ds-bg-dark);
  color: var(--ds-text-on-dark);
}
.ds-section--darkest {
  background: var(--ds-bg-darkest);
  color: var(--ds-text-on-dark);
}
.ds-section--dark :is(h1, h2, h3, h4),
.ds-section--darkest :is(h1, h2, h3, h4) { color: var(--ds-white); }
.ds-section--dark p,
.ds-section--darkest p { color: var(--ds-text-on-dark-mute); }

/* Section heading block */
.ds-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-6);
  padding-bottom: var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-border);
}
.ds-section-head__title {
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-extra);
  color: var(--ds-navy-deep);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.ds-section-head__meta {
  font-size: var(--ds-fs-sm);
  color: var(--ds-g500);
}

/* Simple flex helpers */
.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  align-items: center;
}
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-sp-4); }

.ds-grid { display: grid; gap: var(--ds-sp-5); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.ds-display {
  font-size: clamp(36px, 5vw, 44px);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ds-navy-deep);
}
.ds-h1 {
  font-size: clamp(28px, 4vw, 30px);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-navy-deep);
}
.ds-h2 {
  font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ds-navy-deep);
}
.ds-lead {
  font-size: var(--ds-fs-md);
  line-height: 1.6;
  color: var(--ds-g600);
}
.ds-text-muted { color: var(--ds-text-mute); }
.ds-text-faint { color: var(--ds-text-faint); }
.ds-text-center { text-align: center; }

/* Eyebrow / kicker label above headings */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin-bottom: var(--ds-sp-3);
}
.ds-section--dark .ds-eyebrow,
.ds-section--darkest .ds-eyebrow { color: var(--ds-blue-bright); }
.ds-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ds-eyebrow--plain::before { display: none; }

/* Small uppercase label (e.g. column headers, stat keys) */
.ds-label {
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ds-g500);
}

/* -----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  transition: transform var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease),
              background var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease),
              color var(--ds-dur) var(--ds-ease);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-sh-focus);
}
.ds-btn:disabled,
.ds-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Variants */
.ds-btn--primary {
  background: var(--ds-blue);
  color: var(--ds-white);
  box-shadow: var(--ds-sh-sm);
}
.ds-btn--primary:hover {
  background: var(--ds-blue-deep);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.ds-btn--navy {
  background: var(--ds-navy-deep);
  color: var(--ds-white);
}
.ds-btn--navy:hover { background: var(--ds-navy); }

.ds-btn--ghost {
  background: var(--ds-white);
  color: var(--ds-navy-deep);
  border-color: var(--ds-border-strong);
}
.ds-btn--ghost:hover {
  background: var(--ds-g50);
  border-color: var(--ds-navy-deep);
}

.ds-btn--danger {
  background: var(--ds-red);
  color: var(--ds-white);
}
.ds-btn--danger:hover { background: #B91C1C; }

.ds-btn--text {
  padding: 4px 2px;
  background: transparent;
  color: var(--ds-accent);
  border: 0;
}
.ds-btn--text:hover { color: var(--ds-accent-hover); transform: none; }

/* On dark surfaces */
.ds-btn--on-dark {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ds-white);
  border-color: rgba(255, 255, 255, 0.25);
}
.ds-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Sizes */
.ds-btn--sm { padding: 8px 13px; font-size: 13px; border-radius: var(--ds-r-sm); }
.ds-btn--lg { padding: 14px 22px; font-size: var(--ds-fs-base); }
.ds-btn--block { width: 100%; }

/* -----------------------------------------------------------------------------
   6. FORM CONTROLS
   -------------------------------------------------------------------------- */
.ds-field { margin-bottom: var(--ds-sp-4); }
.ds-field--inline { display: flex; align-items: center; gap: var(--ds-sp-2); }

.ds-label-field {
  display: block;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-g700);
  margin-bottom: var(--ds-sp-2);
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-sm);
  line-height: 1.45;
  color: var(--ds-g900);
  background: var(--ds-white);
  border: 1px solid var(--ds-g300);
  border-radius: var(--ds-r-md);
  padding: 10px 12px;
  transition: border-color var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-g400); }

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--ds-blue);
  box-shadow: var(--ds-sh-focus);
}
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
  background: var(--ds-g100);
  color: var(--ds-g500);
  cursor: not-allowed;
}
.ds-input.is-invalid,
.ds-select.is-invalid,
.ds-textarea.is-invalid {
  border-color: var(--ds-red);
}
.ds-input.is-invalid:focus,
.ds-select.is-invalid:focus,
.ds-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.ds-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.ds-textarea { resize: vertical; min-height: 92px; }

/* Native checkbox/radio accent + helper text */
.ds-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  font-size: var(--ds-fs-sm);
  color: var(--ds-g700);
  cursor: pointer;
}
.ds-check input { accent-color: var(--ds-blue); width: 16px; height: 16px; }

.ds-help { font-size: var(--ds-fs-xs); color: var(--ds-g500); margin-top: var(--ds-sp-2); }
.ds-help--error { color: var(--ds-red-text); }

/* -----------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.ds-card {
  background: var(--ds-white);
  border: 1px solid var(--ds-g200);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-6);
  box-shadow: var(--ds-sh-sm);
}
.ds-card--raised  { box-shadow: var(--ds-sh-lg); }
.ds-card--flat    { box-shadow: none; }
.ds-card--interactive {
  transition: transform var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease);
}
.ds-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-sh-lg);
  border-color: var(--ds-border-strong);
}
.ds-card__title {
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-navy-deep);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ds-sp-2);
}
.ds-card__sub {
  font-size: var(--ds-fs-sm);
  color: var(--ds-g500);
  margin: 0;
}
.ds-card__body { margin-top: var(--ds-sp-4); }
.ds-card__footer {
  margin-top: var(--ds-sp-5);
  padding-top: var(--ds-sp-4);
  border-top: 1px solid var(--ds-border);
}

/* Stat card — KPI tiles */
.ds-stat {
  background: var(--ds-white);
  border: 1px solid var(--ds-g200);
  border-radius: var(--ds-r-md);
  padding: var(--ds-sp-4) var(--ds-sp-5);
}
.ds-stat__key {
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-g500);
}
.ds-stat__value {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-extra);
  color: var(--ds-navy-deep);
  letter-spacing: -0.02em;
  margin-top: var(--ds-sp-1);
  font-variant-numeric: tabular-nums;
}
.ds-stat__value--warn { color: var(--ds-amber); }
.ds-stat__value--danger { color: var(--ds-red); }

/* -----------------------------------------------------------------------------
   8. BADGES / STATUS PILLS
   -------------------------------------------------------------------------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--ds-fw-semibold);
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: var(--ds-r-full);
  background: var(--ds-g100);
  color: var(--ds-g600);
  white-space: nowrap;
}
.ds-badge--success { background: var(--ds-green-soft); color: var(--ds-green-text); }
.ds-badge--info    { background: var(--ds-blue-soft);  color: var(--ds-blue-deep); }
.ds-badge--warn    { background: var(--ds-amber-soft);  color: var(--ds-amber-text); }
.ds-badge--danger  { background: var(--ds-red-soft);    color: var(--ds-red-text); }
.ds-badge--neutral { background: var(--ds-g100);        color: var(--ds-g600); }

/* Optional leading status dot */
.ds-badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* -----------------------------------------------------------------------------
   9. ALERTS
   -------------------------------------------------------------------------- */
.ds-alert {
  display: flex;
  gap: var(--ds-sp-3);
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-sm);
  line-height: 1.5;
  margin-bottom: var(--ds-sp-3);
}
.ds-alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ds-alert b, .ds-alert strong { font-weight: var(--ds-fw-bold); }

.ds-alert--success { background: var(--ds-green-soft); color: var(--ds-green-text); border-color: var(--ds-green-border); }
.ds-alert--info    { background: var(--ds-blue-soft);  color: var(--ds-blue-deep);  border-color: var(--ds-info-border); }
.ds-alert--warn    { background: var(--ds-amber-soft); color: var(--ds-amber-text); border-color: var(--ds-amber-border); }
.ds-alert--danger  { background: var(--ds-red-soft);   color: var(--ds-red-text);   border-color: var(--ds-red-border); }

/* -----------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-fs-sm);
}
.ds-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-g500);
  font-weight: var(--ds-fw-bold);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--ds-g200);
  white-space: nowrap;
}
.ds-table td {
  padding: 12px;
  border-bottom: 1px solid var(--ds-g100);
  color: var(--ds-g800);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--ds-g50); }

.ds-table--striped tbody tr:nth-child(even) { background: var(--ds-g50); }
.ds-table__num { text-align: right; font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.ds-table__primary { font-weight: var(--ds-fw-bold); color: var(--ds-g900); }
.ds-table__meta { font-size: var(--ds-fs-xs); color: var(--ds-g500); margin-top: 1px; }

/* -----------------------------------------------------------------------------
   11. NAV (top bar)
   -------------------------------------------------------------------------- */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ds-navy-deep);
  color: var(--ds-white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.30);
}
.ds-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: 13px 22px;
  max-width: var(--ds-container-wide);
  margin-inline: auto;
}
.ds-nav__brand {
  font-weight: var(--ds-fw-extra);
  font-size: var(--ds-fs-base);
  color: var(--ds-white);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.ds-nav__tagline { color: #9FB3D1; font-size: 13px; }
.ds-nav__links {
  margin-left: auto;
  display: flex;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
}
.ds-nav__link {
  color: #CFE0F5;
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--ds-fw-semibold);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 10px;
  border-radius: var(--ds-r-full);
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.ds-nav__link:hover { background: rgba(255, 255, 255, 0.10); color: var(--ds-white); }
.ds-nav__link.is-active { background: var(--ds-blue); border-color: var(--ds-blue); color: var(--ds-white); }

/* -----------------------------------------------------------------------------
   12. SIDEBAR (admin shell)
   -------------------------------------------------------------------------- */
.ds-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}
.ds-sidebar {
  background: var(--ds-navy-deepest);
  color: var(--ds-text-on-dark);
  padding: var(--ds-sp-4) var(--ds-sp-3);
}
.ds-sidebar__brand {
  color: var(--ds-white);
  font-weight: var(--ds-fw-extra);
  font-size: var(--ds-fs-sm);
  padding: 6px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--ds-sp-3);
}
.ds-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.ds-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-medium);
  padding: 9px 11px;
  border-radius: var(--ds-r-md);
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.ds-sidebar__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--ds-white); }
.ds-sidebar__link.is-active {
  background: rgba(37, 99, 235, 0.18);
  color: var(--ds-white);
  box-shadow: inset 2px 0 0 var(--ds-blue);
}
.ds-main {
  background: var(--ds-g50);
  padding: var(--ds-sp-6);
}

/* -----------------------------------------------------------------------------
   13. HERO BAND (public marketing)
   -------------------------------------------------------------------------- */
.ds-hero {
  background: radial-gradient(700px 300px at 50% -40%, #13396E, var(--ds-navy-deep) 70%);
  color: var(--ds-white);
  padding: clamp(48px, 8vw, 88px) var(--ds-sp-6);
  text-align: center;
}
.ds-hero__inner {
  max-width: var(--ds-container-narrow);
  margin-inline: auto;
}
.ds-hero .ds-eyebrow { color: #7FB0FF; justify-content: center; }
.ds-hero__title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ds-white);
  margin: var(--ds-sp-3) 0 var(--ds-sp-5);
}
.ds-hero__lead {
  font-size: var(--ds-fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 600px;
  margin: 0 auto var(--ds-sp-7);
}
.ds-hero__actions {
  display: flex;
  gap: var(--ds-sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Premium "feature panel" hero variant (portal subscription card, etc.) */
.ds-hero-panel {
  border-radius: var(--ds-r-xl);
  padding: var(--ds-sp-6) var(--ds-sp-7);
  color: var(--ds-white);
  background: radial-gradient(700px 300px at 85% -60%, #1C3F74, var(--ds-navy) 55%, var(--ds-navy-deep));
  box-shadow: var(--ds-sh-xl);
}

/* -----------------------------------------------------------------------------
   14. UTILITIES
   -------------------------------------------------------------------------- */
.ds-mt-0 { margin-top: 0; }
.ds-mt-2 { margin-top: var(--ds-sp-2); }
.ds-mt-4 { margin-top: var(--ds-sp-4); }
.ds-mt-6 { margin-top: var(--ds-sp-6); }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-2 { margin-bottom: var(--ds-sp-2); }
.ds-mb-4 { margin-bottom: var(--ds-sp-4); }
.ds-mb-6 { margin-bottom: var(--ds-sp-6); }
.ds-divider { height: 1px; background: var(--ds-border); border: 0; margin: var(--ds-sp-5) 0; }
.ds-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ds-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ds-shell { grid-template-columns: 188px 1fr; }
}

@media (max-width: 768px) {
  .ds-grid--2,
  .ds-grid--3,
  .ds-grid--4 { grid-template-columns: 1fr; }

  .ds-nav__inner { flex-wrap: wrap; padding: 12px 16px; }
  .ds-nav__tagline { display: none; }
  .ds-nav__links { margin-left: 0; width: 100%; }

  /* Sidebar collapses to a stacked top bar on mobile */
  .ds-shell { grid-template-columns: 1fr; }
  .ds-sidebar {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-4);
    overflow-x: auto;
    padding: var(--ds-sp-3) var(--ds-sp-4);
  }
  .ds-sidebar__brand {
    border-bottom: 0;
    padding: 0 var(--ds-sp-3) 0 0;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .ds-sidebar__nav { flex-direction: row; }
  .ds-sidebar__link { white-space: nowrap; }
  .ds-sidebar__link.is-active { box-shadow: inset 0 -2px 0 var(--ds-blue); }

  .ds-hero__actions .ds-btn { flex: 1; min-width: 140px; }
}

@media (max-width: 480px) {
  .ds-section-head { flex-direction: column; align-items: flex-start; gap: var(--ds-sp-1); }
  .ds-btn--block-mobile { width: 100%; }
}

/* -----------------------------------------------------------------------------
   16. MOTION / ACCESSIBILITY PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-root *,
  .ds-root *::before,
  .ds-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ds-btn:hover,
  .ds-card--interactive:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   17. PUBLIC-SITE SHELL — UTILITY BAR
   Thin dark navy strip above the main nav (contact info, live status, etc.)
   -------------------------------------------------------------------------- */
.ds-util {
  background: var(--ds-navy-deepest);
  color: var(--ds-text-on-dark-mute);
  font-size: var(--ds-fs-xs);
  border-bottom: 1px solid var(--ds-border-on-dark);
}
.ds-util__inner {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-4);
  max-width: var(--ds-container-wide);
  margin-inline: auto;
  padding: 7px 22px;
}
.ds-util__left,
.ds-util__right {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-4);
  flex-wrap: wrap;
}
.ds-util__right { margin-left: auto; }
.ds-util a {
  color: var(--ds-text-on-dark-mute);
  text-decoration: none;
  font-weight: var(--ds-fw-medium);
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-util a:hover { color: var(--ds-white); }

/* Small live status dot (operational/green) */
.ds-util__dot {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  color: var(--ds-text-on-dark);
  font-weight: var(--ds-fw-semibold);
}
.ds-util__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22);
}

/* -----------------------------------------------------------------------------
   18. PUBLIC-SITE SHELL — FOOTER
   Dark footer band on the deepest navy.
   -------------------------------------------------------------------------- */
.ds-footer {
  background: var(--ds-navy-deepest);
  color: var(--ds-text-on-dark-mute);
  padding: var(--ds-sp-10) 0 var(--ds-sp-6);
  font-size: var(--ds-fs-sm);
}
.ds-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--ds-sp-8);
  max-width: var(--ds-container-wide);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.ds-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-3);
}
.ds-footer__brand > :first-child {
  font-weight: var(--ds-fw-extra);
  font-size: var(--ds-fs-md);
  color: var(--ds-white);
  letter-spacing: -0.01em;
}
.ds-footer__brand p {
  color: var(--ds-text-on-dark-mute);
  line-height: 1.6;
  max-width: 36ch;
  margin: 0;
}

.ds-footer__col h4 {
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-white);
  margin: 0 0 var(--ds-sp-4);
}
.ds-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-3);
}
.ds-footer__col li { margin: 0; }
.ds-footer__col li > a {
  color: var(--ds-text-on-dark-mute);
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-footer__col li > a:hover { color: var(--ds-white); }

/* Subtle bordered trust strip (accreditations, guarantees) */
.ds-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sp-6);
  max-width: var(--ds-container-wide);
  margin: var(--ds-sp-8) auto 0;
  padding: var(--ds-sp-5) clamp(16px, 4vw, 24px);
  border-top: 1px solid var(--ds-border-on-dark);
  border-bottom: 1px solid var(--ds-border-on-dark);
  color: var(--ds-text-on-dark-mute);
  font-size: var(--ds-fs-xs);
}

/* Bottom row: copyright + legal links */
.ds-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sp-4);
  max-width: var(--ds-container-wide);
  margin: var(--ds-sp-6) auto 0;
  padding: var(--ds-sp-6) clamp(16px, 4vw, 24px) 0;
  border-top: 1px solid var(--ds-border-on-dark);
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-on-dark-mute);
}
.ds-footer__bottom a {
  color: var(--ds-text-on-dark-mute);
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-footer__bottom a:hover { color: var(--ds-white); }
.ds-footer__bottom nav,
.ds-footer__bottom .ds-footer__legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-5);
}

/* -----------------------------------------------------------------------------
   19. PUBLIC-SITE SHELL — MOBILE MENU
   Hidden by default; revealed via the hamburger toggle on small screens.
   -------------------------------------------------------------------------- */
.ds-mobilemenu {
  display: none;
  background: var(--ds-navy-deep);
  border-top: 1px solid var(--ds-border-on-dark);
  padding: var(--ds-sp-3) 22px var(--ds-sp-5);
}
.ds-mobilemenu.is-open { display: block; }
.ds-mobilemenu a {
  display: block;
  color: var(--ds-text-on-dark);
  text-decoration: none;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  padding: 11px 8px;
  border-radius: var(--ds-r-md);
  border-bottom: 1px solid var(--ds-border-on-dark);
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.ds-mobilemenu a:last-child { border-bottom: 0; }
.ds-mobilemenu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ds-white); }

/* Hamburger toggle — hidden on desktop, shown on small screens */
.ds-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-white);
  border: 1px solid var(--ds-border-on-dark);
  border-radius: var(--ds-r-md);
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-nav__toggle:hover { background: rgba(255, 255, 255, 0.14); }
.ds-nav__toggle:focus-visible { outline: none; box-shadow: var(--ds-sh-focus); }
.ds-nav__toggle::before {
  content: "";
  width: 18px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

@media (max-width: 768px) {
  /* Footer collapses to a single column */
  .ds-footer__grid { grid-template-columns: 1fr; gap: var(--ds-sp-6); }
  .ds-footer__bottom { flex-direction: column; align-items: flex-start; }
  .ds-footer__bottom nav,
  .ds-footer__bottom .ds-footer__legal { margin-left: 0; }

  /* Show hamburger, hide the pill links (mobile menu takes over) */
  .ds-nav__toggle { display: inline-flex; }
  .ds-nav__links { display: none; }

  .ds-util__inner { flex-wrap: wrap; gap: var(--ds-sp-2) var(--ds-sp-4); padding: 7px 16px; }
}

/* =============================================================================
   20. PREMIUM POLISH LAYER
   ---------------------------------------------------------------------------
   Elevation pass over the base system. This section only OVERRIDES and
   enriches existing rules — no classes or tokens are renamed or removed, so
   all existing markup keeps working. Goals: layered depth on dark sections,
   higher-impact hero type, a tasteful gradient primary button, deeper cards,
   and refined "fintech-grade" details. Restrained, credible, AA-contrast.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   20.1 RICHER DARK SECTIONS — layered depth + subtle texture
   Cool blue light from top-right, a deeper pool bottom-left, over the navy
   base. A masked dot-grid ::before adds fine texture without noise. Content
   is lifted above the overlay so text stays crisp and fully readable.
   -------------------------------------------------------------------------- */
.ds-section--dark,
.ds-section--darkest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ds-section--dark {
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(59, 130, 246, 0.28), transparent 60%),
    radial-gradient(820px 620px at 8% 115%, rgba(21, 56, 168, 0.40), transparent 62%),
    var(--ds-navy-deep);
}
.ds-section--darkest {
  background:
    radial-gradient(880px 500px at 86% -12%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(820px 640px at 6% 118%, rgba(29, 78, 216, 0.34), transparent 62%),
    var(--ds-navy-deepest);
}
/* Fine dot-grid texture, masked to fade out toward edges/bottom */
.ds-section--dark::before,
.ds-section--darkest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 80%);
}
/* Keep section content above the texture overlay */
.ds-section--dark > *,
.ds-section--darkest > * { position: relative; z-index: 1; }

/* Slightly more generous rhythm for premium pacing */
.ds-section { padding-block: clamp(48px, 6.5vw, 88px); }

/* -----------------------------------------------------------------------------
   20.2 HERO IMPACT — larger, tighter display; top-lit gradient text on DARK
   Gradient text is scoped strictly to dark surfaces so it can never wash out
   on light backgrounds. A refined gradient rule + glow dot lifts the eyebrow.
   -------------------------------------------------------------------------- */
.ds-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(820px 420px at 82% -30%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(760px 460px at 12% 120%, rgba(29, 78, 216, 0.40), transparent 60%),
    radial-gradient(700px 300px at 50% -40%, #13396E, var(--ds-navy-deep) 70%);
}
.ds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
          mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
}
.ds-hero__inner { position: relative; z-index: 1; }

/* Tighter, weightier display type across hero + display helper */
.ds-display,
.ds-hero__title {
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.035em;
}
.ds-hero__title {
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.04;
}

/* Top-lit gradient heading text — DARK SURFACES ONLY (never on light bg) */
.ds-hero__title,
.ds-section--dark .ds-display,
.ds-section--darkest .ds-display,
.ds-hero-panel .ds-display {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #C9D9F2 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Refined eyebrow accent: gradient rule + soft glowing dot */
.ds-eyebrow::before {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.ds-section--dark .ds-eyebrow::before,
.ds-section--darkest .ds-eyebrow::before,
.ds-hero .ds-eyebrow::before {
  box-shadow: 0 0 10px 0 rgba(56, 189, 248, 0.65), 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.ds-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: var(--ds-r-full);
  background: var(--ds-grad-rule);
  opacity: 0.9;
}
.ds-eyebrow--plain::after { display: none; }

/* -----------------------------------------------------------------------------
   20.3 PRIMARY BUTTON — gradient, layered shadow + blue glow, smooth lift.
   Ghost / navy refined with cleaner borders and subtle hover.
   -------------------------------------------------------------------------- */
.ds-btn {
  transition: transform var(--ds-dur-polish) var(--ds-ease-out),
              box-shadow var(--ds-dur-polish) var(--ds-ease-out),
              background var(--ds-dur-polish) var(--ds-ease-out),
              border-color var(--ds-dur-polish) var(--ds-ease-out),
              filter var(--ds-dur-polish) var(--ds-ease-out),
              color var(--ds-dur-polish) var(--ds-ease-out);
}
.ds-btn--primary {
  background: var(--ds-grad-primary);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 1px 2px rgba(15, 23, 42, 0.20),
              var(--ds-glow-blue);
}
.ds-btn--primary:hover {
  background: var(--ds-grad-primary);
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 2px 4px rgba(15, 23, 42, 0.22),
              var(--ds-glow-blue-strong);
}
.ds-btn--primary:active { transform: translateY(0); filter: brightness(1); }

.ds-btn--navy {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--ds-sh-sm);
}
.ds-btn--navy:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--ds-sh-md);
}

.ds-btn--ghost {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-sh-sm);
}
.ds-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--ds-blue);
  box-shadow: var(--ds-sh-md), 0 6px 18px -10px rgba(37, 99, 235, 0.40);
}

/* Consistent focus-visible ring across interactive elements */
.ds-btn:focus-visible,
.ds-nav__link:focus-visible,
.ds-nav__toggle:focus-visible,
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible {
  outline: none;
  box-shadow: var(--ds-sh-focus);
}

/* -----------------------------------------------------------------------------
   20.4 CARDS — layered depth, hairline top highlight, smooth hover lift.
   Featured pricing card feels special: accent border, glow, slight scale.
   -------------------------------------------------------------------------- */
.ds-card {
  position: relative;
  box-shadow: var(--ds-sh-card);
}
/* Hairline top highlight (skipped on flat cards to keep them truly flat) */
.ds-card:not(.ds-card--flat)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
}
.ds-card--raised { box-shadow: var(--ds-sh-lg); }
.ds-card--flat   { box-shadow: none; }
.ds-card--interactive {
  transition: transform var(--ds-dur-polish) var(--ds-ease-out),
              box-shadow var(--ds-dur-polish) var(--ds-ease-out),
              border-color var(--ds-dur-polish) var(--ds-ease-out);
}
.ds-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-sh-card-hover);
  border-color: var(--ds-border-strong);
}

/* Featured / highlighted pricing card — the signature standout */
.ds-card--featured,
.ds-card--highlight {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: var(--ds-sh-card),
              0 0 0 1px rgba(37, 99, 235, 0.20),
              0 18px 44px -20px rgba(37, 99, 235, 0.40);
  transform: scale(1.015);
}
.ds-card--featured::before,
.ds-card--highlight::before {
  background: var(--ds-grad-rule);
  height: 3px;
  opacity: 1;
}
.ds-card--featured.ds-card--interactive:hover,
.ds-card--highlight.ds-card--interactive:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--ds-sh-card-hover),
              0 0 0 1px rgba(37, 99, 235, 0.30),
              0 24px 54px -22px rgba(37, 99, 235, 0.50);
}

/* Stat tiles: subtle depth so KPIs read as crafted, not plain */
.ds-stat {
  box-shadow: var(--ds-sh-card);
  transition: box-shadow var(--ds-dur-polish) var(--ds-ease-out),
              transform var(--ds-dur-polish) var(--ds-ease-out);
}

/* -----------------------------------------------------------------------------
   20.5 PROFESSIONAL DETAILS — badges, live dot, section-head accent, dividers
   -------------------------------------------------------------------------- */
/* Refined badges: subtle border + soft tint for a crisper edge */
.ds-badge          { border: 1px solid rgba(15, 23, 42, 0.06); }
.ds-badge--success { border-color: var(--ds-green-border); }
.ds-badge--info    { border-color: var(--ds-info-border); }
.ds-badge--warn    { border-color: var(--ds-amber-border); }
.ds-badge--danger  { border-color: var(--ds-red-border); }

/* Glowing live status dot (operational) — refined pulse */
.ds-badge--dot.ds-badge--success::before,
.ds-badge--live::before {
  background: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.20), 0 0 8px 0 rgba(22, 163, 74, 0.55);
}
.ds-badge--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: ds-pulse 2.4s ease-in-out infinite;
}
.ds-util__dot::before { animation: ds-pulse 2.4s ease-in-out infinite; }

@keyframes ds-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45), 0 0 8px 0 rgba(22, 163, 74, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.00), 0 0 8px 0 rgba(22, 163, 74, 0.55); }
}

/* Accent underline beneath section heads — restrained gradient rule */
.ds-section-head {
  position: relative;
  border-bottom-color: var(--ds-border);
}
.ds-section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  border-radius: var(--ds-r-full);
  background: var(--ds-grad-rule);
}
.ds-section--dark .ds-section-head,
.ds-section--darkest .ds-section-head { border-bottom-color: var(--ds-border-on-dark); }
.ds-section--dark .ds-section-head__title,
.ds-section--darkest .ds-section-head__title { color: var(--ds-white); }

/* Refined dividers — soft fade instead of a flat line */
.ds-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-border-strong), transparent);
}
.ds-section--dark .ds-divider,
.ds-section--darkest .ds-divider {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* Hero panel: richer layered depth + crisp inner hairline */
.ds-hero-panel {
  position: relative;
  background:
    radial-gradient(700px 320px at 12% 118%, rgba(29, 78, 216, 0.40), transparent 60%),
    radial-gradient(700px 300px at 85% -60%, #1C3F74, var(--ds-navy) 55%, var(--ds-navy-deep));
  box-shadow: var(--ds-sh-xl), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Nav: gradient active pill aligned to the brand signature */
.ds-nav__link.is-active {
  background: var(--ds-grad-primary);
  border-color: transparent;
  box-shadow: var(--ds-glow-blue);
}

/* -----------------------------------------------------------------------------
   20.6 REDUCED MOTION — disable the polish-layer animations/transitions too
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-badge--live::before,
  .ds-util__dot::before { animation: none !important; }
  .ds-btn--primary:hover,
  .ds-btn--navy:hover,
  .ds-btn--ghost:hover,
  .ds-card--interactive:hover { transform: none; }
  .ds-card--featured,
  .ds-card--highlight { transform: none; }
  .ds-card--featured.ds-card--interactive:hover,
  .ds-card--highlight.ds-card--interactive:hover { transform: none; }
}

/* =============================================================================
   PAGE-WIDE BRAND WATERMARK (migrated from main.css so the rebuild owns it)
   Faint full-viewport logo behind content. multiply blend keeps the dark logo
   background invisible on light surfaces; brand marks bleed through faintly.
   ============================================================================= */
.page-watermark {
  position: fixed;
  inset: 0;
  background: url('../images/logo-premium-dark.png') center center / cover no-repeat;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0.10;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  .page-watermark { opacity: 0.06; }
}
@media (prefers-reduced-transparency: reduce) {
  .page-watermark { display: none; }
}

/* =============================================================================
   21. PREMIUM REFINEMENT v2  —  "more premium" polish pass
   ---------------------------------------------------------------------------
   A restrained second elevation pass for a luxury / security-grade feel:
   glassmorphism on dark + elevated panels and the sticky nav, top-lit
   hairlines on cards, a more confident hero with a very slow "aurora" drift,
   a finer button sheen + spring hover, airier rhythm, and ONE platinum
   hairline accent used sparingly. Override-only: no class or token is renamed
   or removed. Keeps the blue->cyan signature. AA contrast preserved on dark.
   All new motion is gated behind prefers-reduced-motion: no-preference.
   ============================================================================= */

/* --- v2 tokens: restrained platinum hairline + glass surfaces ------------ */
:root {
  /* Soft warm-white platinum hairline — used sparingly on premium edges */
  --ds-platinum:        rgba(255, 255, 255, 0.72);
  --ds-platinum-soft:   rgba(255, 255, 255, 0.16);
  --ds-hairline-top:    rgba(255, 255, 255, 0.28);  /* top-lit edge on glass */

  /* Translucent glass fills tuned to the navy palette (text stays readable) */
  --ds-glass-dark:      rgba(13, 31, 62, 0.62);
  --ds-glass-darkest:   rgba(8, 18, 40, 0.66);
  --ds-glass-nav:       rgba(10, 31, 63, 0.72);

  /* Soft, diffuse luxury shadows (larger blur, lower opacity, layered) */
  --ds-sh-glass:        0 1px 0 rgba(255, 255, 255, 0.05) inset,
                        0 18px 50px -22px rgba(4, 10, 24, 0.62),
                        0 4px 14px -8px rgba(4, 10, 24, 0.40);
  --ds-sh-card-soft:    0 1px 1px rgba(15, 23, 42, 0.03),
                        0 2px 6px -2px rgba(15, 23, 42, 0.05),
                        0 18px 40px -22px rgba(15, 23, 42, 0.16);
  --ds-sh-card-soft-hover: 0 2px 6px -2px rgba(15, 23, 42, 0.06),
                        0 26px 56px -26px rgba(15, 23, 42, 0.24);

  --ds-blur-glass:      blur(14px) saturate(140%);
}

/* -----------------------------------------------------------------------------
   21.1 GLASSMORPHISM — sticky nav, hero side panel, live-monitor cards
   Translucent fill + backdrop blur, a 1px top-lit hairline (lighter at the top
   edge), and a soft diffuse shadow. Backdrop-filter is feature-queried so
   browsers without support fall back to the existing opaque surfaces.
   -------------------------------------------------------------------------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ds-nav {
    background: var(--ds-glass-nav);
    -webkit-backdrop-filter: var(--ds-blur-glass);
            backdrop-filter: var(--ds-blur-glass);
    border-bottom: 1px solid var(--ds-platinum-soft);
    box-shadow: 0 1px 0 var(--ds-hairline-top) inset,
                0 8px 28px -14px rgba(4, 10, 24, 0.55);
  }

  .ds-hero-panel,
  .ds-monitor,
  .ds-live-monitor,
  .ds-card--glass {
    position: relative;
    background: var(--ds-glass-dark);
    -webkit-backdrop-filter: var(--ds-blur-glass);
            backdrop-filter: var(--ds-blur-glass);
    border: 1px solid var(--ds-platinum-soft);
    box-shadow: var(--ds-sh-glass);
  }

  /* Top-lit hairline that catches light along the upper edge of glass panels */
  .ds-hero-panel::after,
  .ds-monitor::after,
  .ds-live-monitor::after,
  .ds-card--glass::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--ds-hairline-top), transparent);
    pointer-events: none;
  }
}

/* -----------------------------------------------------------------------------
   21.2 CARDS — top-lit hairline + softer, more diffuse luxury shadow
   Refines the existing polish-layer hairline so it reads like glass catching
   light, and trades the card shadow for a larger-blur / lower-opacity stack.
   -------------------------------------------------------------------------- */
.ds-card:not(.ds-card--flat) {
  box-shadow: var(--ds-sh-card-soft);
}
/* Inner top highlight along the very top edge (in addition to the ::before
   gradient hairline already defined in the polish layer). */
.ds-card:not(.ds-card--flat)::before {
  background: linear-gradient(90deg, transparent, var(--ds-platinum), transparent);
}
.ds-card--interactive:hover {
  box-shadow: var(--ds-sh-card-soft-hover);
}
/* Stat tiles inherit the softer, airier shadow too */
.ds-stat { box-shadow: var(--ds-sh-card-soft); }

/* -----------------------------------------------------------------------------
   21.3 HERO — more confident display, airier rhythm, slow aurora drift
   Bumps the clamp a touch and tightens tracking; adds generous breathing room.
   A very slow, low-movement aurora gradient drifts across the dark hero, gated
   behind prefers-reduced-motion: no-preference (kill-switch below as backup).
   -------------------------------------------------------------------------- */
.ds-hero__title {
  font-size: clamp(34px, 5.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.ds-hero { padding-block: clamp(56px, 9vw, 104px); }
.ds-hero__lead { margin-bottom: var(--ds-sp-8); }

/* Aurora layer: a soft, slow-drifting cool sheen behind the hero content. */
.ds-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 360px at 22% 28%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(620px 420px at 78% 62%, rgba(37, 99, 235, 0.18), transparent 62%);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-hero::after {
    animation: ds-aurora-drift 24s ease-in-out infinite alternate;
  }
}
@keyframes ds-aurora-drift {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.02); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.05); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.02); }
}

/* -----------------------------------------------------------------------------
   21.4 BUTTONS — finer top inner-highlight sheen + smoother spring hover
   -------------------------------------------------------------------------- */
.ds-btn--primary {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              inset 0 -1px 0 rgba(8, 18, 40, 0.18),
              0 1px 2px rgba(15, 23, 42, 0.20),
              var(--ds-glow-blue);
}
/* Faint sheen confined to the top half of the button face */
.ds-btn--primary::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-btn--primary {
    transition: transform var(--ds-dur-polish) cubic-bezier(0.34, 1.56, 0.32, 1),
                box-shadow var(--ds-dur-polish) var(--ds-ease-out),
                filter var(--ds-dur-polish) var(--ds-ease-out);
  }
}

/* -----------------------------------------------------------------------------
   21.5 SPACING & RHYTHM — airier sections + refined section-head underline
   -------------------------------------------------------------------------- */
.ds-section { padding-block: clamp(56px, 7vw, 104px); }
.ds-section-head {
  margin-bottom: var(--ds-sp-7);
  padding-bottom: var(--ds-sp-5);
}
/* Lengthen + soften the gradient underline accent for a calmer, premium feel */
.ds-section-head::after {
  width: 64px;
  height: 2px;
  opacity: 0.92;
}

/* -----------------------------------------------------------------------------
   21.6 PLATINUM HAIRLINE — one restrained warm-white edge, used sparingly
   Applied only to the hero panel + featured card top edge so premium surfaces
   catch a soft light without anything garish.
   -------------------------------------------------------------------------- */
.ds-card--featured::before,
.ds-card--highlight::before {
  background: linear-gradient(90deg, transparent, var(--ds-platinum), var(--ds-cyan), var(--ds-platinum), transparent);
}

/* -----------------------------------------------------------------------------
   21.7 REDUCED-MOTION KILL-SWITCH — belt-and-braces for v2 motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-hero::after { animation: none !important; }
  .ds-btn--primary:hover { transform: none; }
}

/* =============================================================================
   22. AUTH SCREENS  —  standalone, centered sign-in / sign-up / reset pages
   ---------------------------------------------------------------------------
   Full-viewport premium dark canvas (navy radial glow + masked dot-grid, in
   keeping with .ds-hero / .ds-section--dark) with a single elevated glass card
   floated dead-center. Token-driven; reuses the blue->cyan signature and the
   same glass surfaces (--ds-glass-*, --ds-platinum*) as sections 20-21. Pair
   the inner card fields with .ds-input / .ds-btn — these classes only supply
   the page frame, the card chrome, and auth-specific trimmings.
   ============================================================================= */

/* Full-page centered stage on a premium dark background ------------------- */
.ds-auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(24px, 6vw, 56px) var(--ds-sp-5);
  color: var(--ds-text-on-dark);
  background:
    radial-gradient(900px 520px at 84% -12%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(820px 640px at 8% 116%, rgba(29, 78, 216, 0.40), transparent 62%),
    radial-gradient(700px 320px at 50% -30%, #13396E, var(--ds-navy-deep) 70%);
}
/* Fine masked dot-grid texture (mirrors hero / dark sections) */
.ds-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
          mask-image: radial-gradient(120% 100% at 70% 0%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
}
/* Light-canvas variant when an auth screen should sit on the app canvas */
.ds-auth--canvas {
  color: var(--ds-text);
  background: var(--ds-bg-canvas);
}
.ds-auth--canvas::before { display: none; }

/* The elevated card itself ------------------------------------------------ */
.ds-auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--ds-r-xl);
  background: var(--ds-white);
  border: 1px solid var(--ds-g200);
  box-shadow: var(--ds-sh-xl);
  text-align: left;
}
/* Hairline top highlight, consistent with .ds-card */
.ds-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0;
  background: linear-gradient(90deg, transparent, var(--ds-platinum), transparent);
  pointer-events: none;
}
/* Glass variant for sitting directly on the dark stage */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ds-auth-card--glass {
    background: var(--ds-glass-dark);
    -webkit-backdrop-filter: var(--ds-blur-glass);
            backdrop-filter: var(--ds-blur-glass);
    border-color: var(--ds-platinum-soft);
    box-shadow: var(--ds-sh-glass);
    color: var(--ds-text-on-dark);
  }
  .ds-auth-card--glass::before {
    background: linear-gradient(90deg, transparent, var(--ds-hairline-top), transparent);
  }
}

/* Brand lockup at the top of the card */
.ds-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  font-weight: var(--ds-fw-extra);
  font-size: var(--ds-fs-base);
  letter-spacing: -0.01em;
  color: var(--ds-navy-deep);
  text-decoration: none;
  margin-bottom: var(--ds-sp-6);
}
.ds-auth-brand img,
.ds-auth-brand svg { height: 30px; width: auto; }
.ds-auth-card--glass .ds-auth-brand { color: var(--ds-white); }

/* Card heading + supporting line */
.ds-auth-title {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ds-navy-deep);
  text-align: center;
  margin: 0 0 var(--ds-sp-2);
}
.ds-auth-card--glass .ds-auth-title { color: var(--ds-white); }

.ds-auth-sub {
  font-size: var(--ds-fs-sm);
  line-height: 1.55;
  color: var(--ds-g500);
  text-align: center;
  margin: 0 0 var(--ds-sp-6);
}
.ds-auth-card--glass .ds-auth-sub { color: var(--ds-text-on-dark-mute); }

/* A single form field block (label + control + optional helper) */
.ds-auth-field { margin-bottom: var(--ds-sp-4); }
.ds-auth-field > label,
.ds-auth-field .ds-label-field {
  display: block;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-g700);
  margin-bottom: var(--ds-sp-2);
}
.ds-auth-card--glass .ds-auth-field > label,
.ds-auth-card--glass .ds-auth-field .ds-label-field { color: var(--ds-text-on-dark); }
/* Row that sits above a field, e.g. "Password" + "Forgot?" link */
.ds-auth-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-2);
}
.ds-auth-field__row > label { margin-bottom: 0; }
.ds-auth-field__row a {
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-accent);
  text-decoration: none;
}
.ds-auth-field__row a:hover { color: var(--ds-accent-hover); text-decoration: underline; }

/* Footer beneath the form: secondary action / account-switch prompt */
.ds-auth-foot {
  margin-top: var(--ds-sp-6);
  padding-top: var(--ds-sp-5);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-fs-sm);
  color: var(--ds-g500);
  text-align: center;
}
.ds-auth-foot a {
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-accent);
  text-decoration: none;
}
.ds-auth-foot a:hover { color: var(--ds-accent-hover); text-decoration: underline; }
.ds-auth-card--glass .ds-auth-foot {
  border-top-color: var(--ds-border-on-dark);
  color: var(--ds-text-on-dark-mute);
}

/* "Back to site" / return link, typically placed under the card */
.ds-auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-6);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-on-dark-mute);
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-auth-back::before {
  content: "";
  width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.ds-auth-back:hover { color: var(--ds-white); }
.ds-auth--canvas .ds-auth-back { color: var(--ds-g500); }
.ds-auth--canvas .ds-auth-back:hover { color: var(--ds-navy-deep); }

/* Inline flash message inside the card (success / error / info) */
.ds-auth-flash {
  display: flex;
  gap: var(--ds-sp-3);
  padding: 11px 14px;
  margin-bottom: var(--ds-sp-5);
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-sm);
  line-height: 1.5;
}
.ds-auth-flash__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ds-auth-flash--success { background: var(--ds-green-soft); color: var(--ds-green-text); border-color: var(--ds-green-border); }
.ds-auth-flash--error,
.ds-auth-flash--danger  { background: var(--ds-red-soft);   color: var(--ds-red-text);   border-color: var(--ds-red-border); }
.ds-auth-flash--info    { background: var(--ds-blue-soft);  color: var(--ds-blue-deep);  border-color: var(--ds-info-border); }
.ds-auth-flash--warn    { background: var(--ds-amber-soft); color: var(--ds-amber-text); border-color: var(--ds-amber-border); }

@media (max-width: 480px) {
  .ds-auth { padding: var(--ds-sp-6) var(--ds-sp-4); }
  .ds-auth-card { padding: var(--ds-sp-6) var(--ds-sp-5); }
}

/* =============================================================================
   23. CUSTOMER PORTAL  —  logged-in dashboard content blocks
   ---------------------------------------------------------------------------
   Page-content helpers for the authenticated portal. The portal shell itself
   reuses .ds-shell / .ds-sidebar / .ds-main; dashboards reuse .ds-grid,
   .ds-stat, .ds-card and .ds-table. This section only adds the page-head and
   a few light trimmings (welcome banner, empty state, meta list) that the
   existing components don't already cover.
   ============================================================================= */

/* Portal page head — page title + lead, with optional trailing actions.
   Use when .ds-section-head's inline/baseline layout is too tight for a
   two-line title + lead with right-aligned buttons. */
.ds-portal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-sp-4) var(--ds-sp-6);
  margin-bottom: var(--ds-sp-7);
  padding-bottom: var(--ds-sp-5);
  border-bottom: 1px solid var(--ds-border);
}
.ds-portal-head__title {
  font-size: var(--ds-fs-2xl);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ds-navy-deep);
  margin: 0;
}
.ds-portal-head__lead {
  font-size: var(--ds-fs-base);
  line-height: 1.55;
  color: var(--ds-g600);
  margin: var(--ds-sp-2) 0 0;
  max-width: 62ch;
}
.ds-portal-head__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}
/* The text block on the left can be grouped so actions push to the right */
.ds-portal-head__text { min-width: 0; }

/* Personalized welcome banner — premium navy panel atop the dashboard.
   Reuses the same layered navy treatment as .ds-hero-panel. */
.ds-portal-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ds-r-xl);
  padding: clamp(20px, 3vw, 28px) clamp(22px, 4vw, 32px);
  margin-bottom: var(--ds-sp-6);
  color: var(--ds-white);
  background:
    radial-gradient(700px 320px at 12% 118%, rgba(29, 78, 216, 0.40), transparent 60%),
    radial-gradient(700px 300px at 85% -60%, #1C3F74, var(--ds-navy) 55%, var(--ds-navy-deep));
  box-shadow: var(--ds-sh-xl), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ds-portal-welcome__title {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--ds-sp-2);
  color: var(--ds-white);
}
.ds-portal-welcome__sub {
  font-size: var(--ds-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 60ch;
}

/* Key/value meta list — account details, policy summaries, etc. */
.ds-portal-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-sp-3) var(--ds-sp-6);
  margin: 0;
  font-size: var(--ds-fs-sm);
}
.ds-portal-meta dt {
  color: var(--ds-g500);
  font-weight: var(--ds-fw-semibold);
}
.ds-portal-meta dd {
  margin: 0;
  color: var(--ds-g800);
  font-weight: var(--ds-fw-medium);
}

/* Empty / zero-state inside a portal card (no records yet) */
.ds-portal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-sp-3);
  padding: clamp(28px, 5vw, 48px) var(--ds-sp-6);
  color: var(--ds-g500);
}
.ds-portal-empty__icon {
  width: 40px; height: 40px;
  color: var(--ds-g400);
}
.ds-portal-empty__title {
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-navy-deep);
  margin: 0;
}
.ds-portal-empty p { margin: 0; font-size: var(--ds-fs-sm); max-width: 44ch; }

@media (max-width: 768px) {
  .ds-portal-head { flex-direction: column; align-items: stretch; }
  .ds-portal-head__actions { width: 100%; }
  .ds-portal-meta { grid-template-columns: 1fr; gap: var(--ds-sp-1) 0; }
  .ds-portal-meta dd { margin-bottom: var(--ds-sp-3); }
}

/* =============================================================================
   24. ADMIN PANEL  —  back-office CRUD chrome (toolbars, forms, tables, pills)
   ---------------------------------------------------------------------------
   Page-content helpers for the authenticated admin panel. The admin shell
   itself reuses .ds-shell / .ds-sidebar / .ds-main, the admin login reuses
   .ds-auth / .ds-auth-card, and dashboards reuse .ds-grid / .ds-stat /
   .ds-card / .ds-table. This section adds only what the existing components
   don't already cover: a page-actions toolbar, a two-column form grid,
   admin-refined tables, status pills, a small inline text action, simple
   tabs, and a generic empty state. Token-driven, override-free, and keeps the
   premium navy + blue->cyan signature. No existing class or token is touched.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   24.1 ADMIN TOOLBAR — page title row with right-aligned actions
   Sits at the top of an admin view (above a table or form). Title block on the
   left, action buttons (.ds-btn) pushed to the right. Pairs with an optional
   search/filter cluster.
   -------------------------------------------------------------------------- */
.ds-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-sp-3) var(--ds-sp-5);
  margin-bottom: var(--ds-sp-6);
  padding-bottom: var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-border);
}
.ds-admin-toolbar__text { min-width: 0; }
.ds-admin-toolbar__title {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-extra);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ds-navy-deep);
  margin: 0;
}
.ds-admin-toolbar__sub {
  font-size: var(--ds-fs-sm);
  line-height: 1.5;
  color: var(--ds-g500);
  margin: var(--ds-sp-1) 0 0;
}
/* Right-aligned cluster of actions / filters */
.ds-admin-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}
/* Compact filter/search row, optionally placed under the toolbar */
.ds-admin-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-5);
}
.ds-admin-filters .ds-input,
.ds-admin-filters .ds-select { width: auto; min-width: 180px; }

/* -----------------------------------------------------------------------------
   24.2 FORM LAYOUT — two-column responsive grid of label+control fields
   .ds-form-row is the grid; .ds-form-field is one label+control cell.
   .ds-form-field--full spans both columns (e.g. a textarea or wide input).
   .ds-form-actions is the trailing button row (right-aligned, hairline top).
   -------------------------------------------------------------------------- */
.ds-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4) var(--ds-sp-5);
  margin-bottom: var(--ds-sp-5);
}
.ds-form-row:last-of-type { margin-bottom: 0; }
.ds-form-row--single { grid-template-columns: minmax(0, 1fr); }
.ds-form-row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-2);
  min-width: 0;
}
.ds-form-field--full { grid-column: 1 / -1; }
.ds-form-field__label {
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-g700);
}
/* Optional/required hint sitting beside the label text */
.ds-form-field__hint {
  font-weight: var(--ds-fw-medium);
  color: var(--ds-g400);
  font-size: var(--ds-fs-xs);
  margin-left: var(--ds-sp-2);
}
.ds-form-field__req { color: var(--ds-red); margin-left: 2px; }
/* Pull the control's own margin so the gap controls spacing */
.ds-form-field .ds-input,
.ds-form-field .ds-select,
.ds-form-field .ds-textarea { margin: 0; }
.ds-form-field .ds-help { margin-top: 0; }

/* Trailing action row beneath a form */
.ds-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-6);
  padding-top: var(--ds-sp-5);
  border-top: 1px solid var(--ds-border);
}
/* Push a secondary/destructive action to the far left */
.ds-form-actions__spacer { margin-right: auto; }

/* -----------------------------------------------------------------------------
   24.3 ADMIN TABLE REFINEMENTS — zebra + hover + compact density
   Layered on top of the base .ds-table. Use .ds-table.ds-table--admin to get a
   crisper header, zebra striping, a clearer hover row, and a tighter rhythm
   suited to dense back-office lists. A trailing actions cell is right-aligned.
   -------------------------------------------------------------------------- */
.ds-table--admin th {
  background: var(--ds-g50);
  padding: 9px 12px;
  border-bottom: 1px solid var(--ds-border-strong);
  color: var(--ds-g600);
}
.ds-table--admin th:first-child { border-top-left-radius: var(--ds-r-sm); }
.ds-table--admin th:last-child  { border-top-right-radius: var(--ds-r-sm); }
.ds-table--admin td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: middle;
}
/* Zebra striping for fast row scanning */
.ds-table--admin tbody tr:nth-child(even) { background: var(--ds-g50); }
/* Clearer hover row (overrides base subtle hover) */
.ds-table--admin tbody tr:hover { background: var(--ds-blue-soft); }
.ds-table--admin tbody tr:last-child td { border-bottom: 0; }

/* Compact density modifier — even tighter rows for long lists */
.ds-table--compact th { padding: 7px 10px; }
.ds-table--compact td { padding: 7px 10px; font-size: var(--ds-fs-xs); }

/* Right-aligned row-actions cell (Edit / Delete / etc.) */
.ds-table__actions {
  text-align: right;
  white-space: nowrap;
}
.ds-table__actions > * + * { margin-left: var(--ds-sp-2); }
/* Fixed-width selection / checkbox column */
.ds-table__select { width: 1%; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   24.4 STATUS PILLS — small, rounded status tokens for record state
   Like .ds-badge but tuned for table cells: tabular, fixed rhythm, leading dot.
   Variants cover the common publishing workflow plus generic states.
   -------------------------------------------------------------------------- */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--ds-fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  padding: 3px 10px;
  border-radius: var(--ds-r-full);
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: var(--ds-g100);
  color: var(--ds-g600);
  white-space: nowrap;
}
.ds-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Published — live / green */
.ds-pill--published {
  background: var(--ds-green-soft);
  color: var(--ds-green-text);
  border-color: var(--ds-green-border);
}
/* Draft — neutral grey, hollow dot to read as "not live" */
.ds-pill--draft {
  background: var(--ds-g100);
  color: var(--ds-g600);
  border-color: var(--ds-border-strong);
}
.ds-pill--draft::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
/* Scheduled / pending — amber */
.ds-pill--scheduled,
.ds-pill--pending {
  background: var(--ds-amber-soft);
  color: var(--ds-amber-text);
  border-color: var(--ds-amber-border);
}
/* Archived / disabled — muted */
.ds-pill--archived {
  background: var(--ds-g100);
  color: var(--ds-g400);
  border-color: var(--ds-border);
}
.ds-pill--archived::before { background: var(--ds-g400); }
/* Generic info / accent */
.ds-pill--info {
  background: var(--ds-blue-soft);
  color: var(--ds-blue-deep);
  border-color: var(--ds-info-border);
}

/* -----------------------------------------------------------------------------
   24.5 INLINE BUTTON — small text action for table rows / tight UI
   A borderless, padding-light text action that fits inside a table cell next to
   other inline actions without the weight of a full .ds-btn.
   -------------------------------------------------------------------------- */
.ds-btn--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-1);
  padding: 2px 4px;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
  line-height: 1.3;
  color: var(--ds-accent);
  background: transparent;
  border: 0;
  border-radius: var(--ds-r-xs);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
}
.ds-btn--inline:hover { color: var(--ds-accent-hover); background: var(--ds-blue-soft); }
.ds-btn--inline:focus-visible { outline: none; box-shadow: var(--ds-sh-focus); }
.ds-btn--inline.ds-btn--danger {
  color: var(--ds-red-text);
  background: transparent;
}
.ds-btn--inline.ds-btn--danger:hover { color: #B91C1C; background: var(--ds-red-soft); }

/* -----------------------------------------------------------------------------
   24.6 TABS — lightweight underline tab bar for admin sub-views
   Underline-style tabs sitting above a panel; the active tab carries the
   blue->cyan signature rule. Pair the bar with .ds-tab links/buttons.
   -------------------------------------------------------------------------- */
.ds-tabs {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-1);
  margin-bottom: var(--ds-sp-6);
  border-bottom: 1px solid var(--ds-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  padding: 10px 14px;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-g500);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-tab:hover { color: var(--ds-navy-deep); }
.ds-tab:focus-visible { outline: none; box-shadow: var(--ds-sh-focus); border-radius: var(--ds-r-sm); }
.ds-tab.is-active { color: var(--ds-navy-deep); }
/* Active underline — sits on the bar's border line, signature gradient */
.ds-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: var(--ds-r-full);
  background: var(--ds-grad-rule);
}
/* Optional count chip inside a tab */
.ds-tab__count {
  font-size: 11px;
  font-weight: var(--ds-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ds-g500);
  background: var(--ds-g100);
  border-radius: var(--ds-r-full);
  padding: 1px 7px;
}
.ds-tab.is-active .ds-tab__count { color: var(--ds-blue-deep); background: var(--ds-blue-soft); }

/* -----------------------------------------------------------------------------
   24.7 EMPTY STATE — generic zero-state for any admin list/panel
   Centered icon + title + supporting line + optional action. Mirrors
   .ds-portal-empty but is generic (no portal-specific framing).
   -------------------------------------------------------------------------- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-sp-3);
  padding: clamp(28px, 5vw, 56px) var(--ds-sp-6);
  color: var(--ds-g500);
}
.ds-empty__icon {
  width: 44px; height: 44px;
  color: var(--ds-g400);
  margin-bottom: var(--ds-sp-1);
}
.ds-empty__title {
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-navy-deep);
  margin: 0;
}
.ds-empty p {
  margin: 0;
  font-size: var(--ds-fs-sm);
  line-height: 1.55;
  max-width: 46ch;
}
.ds-empty__actions {
  display: flex;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--ds-sp-2);
}

/* -----------------------------------------------------------------------------
   24.8 RESPONSIVE — collapse admin chrome on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ds-admin-toolbar { flex-direction: column; align-items: stretch; }
  .ds-admin-toolbar__actions { width: 100%; }
  .ds-admin-filters .ds-input,
  .ds-admin-filters .ds-select { width: 100%; min-width: 0; }

  .ds-form-row,
  .ds-form-row--thirds { grid-template-columns: minmax(0, 1fr); }
  .ds-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .ds-form-actions .ds-btn { width: 100%; }
  .ds-form-actions__spacer { margin-right: 0; }
}