@charset "utf-8";

/* ============================================================================
   SavTrack CRM — Design System
   ----------------------------------------------------------------------------
   Cosmic-refined. Magenta + deep-purple identity, delivered with calm,
   Linear/Stripe-grade SaaS craft. The starry hero is an accent (login, one
   dashboard band) — the rest breathes on clean neutrals.

   Self-contained. No build step. Fonts via @import. No !important.
   Import once, globally:  <link rel="stylesheet" href="/design/design-system.css">

   TABLE OF CONTENTS
     01  Fonts
     02  Design tokens (:root)
     03  Dark theme remap
     04  Reset & base
     05  Typography helpers
     06  App shell (sidebar + topbar)
     07  Auth shell (login — cosmic full-bleed, used sparingly)
     08  Page hero (cosmic band + plain band)
     09  Buttons
     10  Cards & stat cards
     11  Section header / toolbar
     12  Data table (.dtable)
     13  Forms & inputs
     14  Pills / badges
     15  Tabs
     16  Segmented control
     17  Filter bar
     18  Avatar
     19  Donut & progress
     20  Pagination
     21  Leaderboard rank / medal
     22  Empty state, skeleton, spinner
     23  Utilities (minimal)
     24  Accessibility (focus, reduced motion, sr-only)
   ========================================================================== */


/* 01  Fonts ---------------------------------------------------------------- */
/* Self-hosted — @font-face rules live in public/port/fonts.css, loaded via a
   <link> in the layout head (before this stylesheet). No external Google Fonts. */


/* 02  Design tokens -------------------------------------------------------- */
:root {
  /* -- Brand: magenta ramp (primary / CTA) -- */
  --magenta-50:  #fdeef7;
  --magenta-100: #fbd6ec;
  --magenta-200: #f6aed9;
  --magenta-300: #f07cc0;
  --magenta-400: #ec46a6;
  --magenta-500: #e6007e;  /* brand primary */
  --magenta-600: #cc0070;  /* hover / pressed */
  --magenta-700: #a80a5e;
  --magenta-800: #85104b;
  --magenta-900: #5e1039;

  /* -- Brand: violet ramp (cosmic / secondary) -- */
  --violet-50:  #f3f0fc;
  --violet-100: #e6ddf9;
  --violet-200: #ccbaf2;
  --violet-300: #ab8ae6;
  --violet-400: #8b5cd6;
  --violet-500: #7033c0;
  --violet-600: #5b1f8f;  /* brand deep purple */
  --violet-700: #4a1975;
  --violet-800: #351356;
  --violet-900: #241146;  /* hero night base */
  --plum:       #7c1f6e;  /* brand plum accent */

  /* -- Neutrals: cool ramp, faint violet tint for cohesion -- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfd;
  --neutral-50:  #f7f7fa;
  --neutral-100: #eff0f4;
  --neutral-150: #e6e7ee;
  --neutral-200: #dcdde6;
  --neutral-300: #c3c5d2;
  --neutral-400: #9a9db0;
  --neutral-500: #71748b;
  --neutral-600: #565973;
  --neutral-700: #414459;
  --neutral-800: #2b2d3c;
  --neutral-900: #1a1b26;  /* ink */
  --neutral-950: #101118;

  /* -- Semantic status ramps (pills, deltas, alerts) -- */
  --success-50:  #e7f7ee;  --success-100: #c9edd7;
  --success-500: #16a34a;  --success-600: #15803d;  --success-700: #157f47;
  --warn-50:     #fdf3d8;  --warn-100:    #f9e3ac;
  --warn-500:    #d99400;  --warn-600:    #a86f00;  --warn-700:    #8a5a00;
  --danger-50:   #fde4e4;  --danger-100:  #f9c9c9;
  --danger-500:  #e11d48;  --danger-600:  #c01033;  --danger-700:  #b42318;
  --info-50:     #e6effd;  --info-100:    #cfe0fb;
  --info-500:    #2563eb;  --info-600:    #1d4ed8;  --info-700:    #1e40af;

  /* -- Semantic surface & text tokens (LIGHT). Components read THESE. -- */
  --bg:            var(--neutral-50);
  --bg-elevated:   var(--neutral-25);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-25);
  --surface-sunken:var(--neutral-100);
  --overlay:       rgba(16, 17, 24, 0.44);

  --border:        var(--neutral-150);
  --border-strong: var(--neutral-200);
  --border-faint:  var(--neutral-100);

  --text:          var(--neutral-900);
  --text-muted:    var(--neutral-600);  /* accessible secondary (AA on surface) */
  --text-subtle:   var(--neutral-400);  /* decorative / placeholder only */
  --text-on-brand: #ffffff;
  --text-on-cosmic:#f4effb;

  --primary:       var(--magenta-500);
  --primary-hover: var(--magenta-600);
  --primary-tint:  var(--magenta-50);
  --link:          var(--magenta-700);  /* AA on white */
  --link-hover:    var(--magenta-800);

  /* Focus ring — used everywhere interactive */
  --ring:          0 0 0 3px rgba(230, 0, 126, 0.28);
  --ring-inset:    inset 0 0 0 2px rgba(230, 0, 126, 0.55);

  /* -- Spacing (8px grid; rem so it scales with user zoom) -- */
  --space-0:   0;
  --space-0-5: 0.125rem; /*  2 */
  --space-1:   0.25rem;  /*  4 */
  --space-2:   0.5rem;   /*  8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */

  /* -- Radius -- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-full: 9999px;

  /* -- Elevation: soft, layered, low-contrast -- */
  --shadow-xs:  0 1px 2px rgba(16, 17, 24, 0.05);
  --shadow-sm:  0 1px 2px rgba(16, 17, 24, 0.05), 0 1px 3px rgba(16, 17, 24, 0.04);
  --shadow-md:  0 2px 4px rgba(16, 17, 24, 0.04), 0 6px 16px rgba(16, 17, 24, 0.07);
  --shadow-lg:  0 8px 24px rgba(16, 17, 24, 0.09), 0 2px 6px rgba(16, 17, 24, 0.05);
  --shadow-xl:  0 18px 50px rgba(16, 17, 24, 0.14), 0 4px 12px rgba(16, 17, 24, 0.06);
  --shadow-brand: 0 6px 18px rgba(230, 0, 126, 0.28);

  /* -- Type -- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.875rem;  /* 14 — CRM body */
  --text-md:   0.9375rem; /* 15 */
  --text-lg:   1rem;      /* 16 */
  --text-xl:   1.125rem;  /* 18 */
  --text-2xl:  1.375rem;  /* 22 */
  --text-3xl:  1.75rem;   /* 28 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-hero: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

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

  /* -- Motion (respect reduced-motion below) -- */
  --motion-fast: 120ms;
  --motion:      180ms;
  --motion-slow: 280ms;
  --ease:        cubic-bezier(0.2, 0, 0, 1);

  /* -- Layout metrics -- */
  --sidebar-w:          72px;   /* collapsed icon rail (matches app) */
  --sidebar-w-expanded: 244px;
  --topbar-h:           64px;
  --content-max:        1360px;

  color-scheme: light;
}


/* 03  Dark theme remap ----------------------------------------------------- */
/* Opt-in: <html data-theme="dark"> or <body class="theme-dark">. Components
   reference semantic tokens only, so they adapt automatically. */
[data-theme="dark"],
.theme-dark {
  --bg:            #0f1018;
  --bg-elevated:   #14151f;
  --surface:       #191b26;
  --surface-2:     #1f2130;
  --surface-sunken:#12131c;
  --overlay:       rgba(0, 0, 0, 0.6);

  --border:        #2a2d3d;
  --border-strong: #363a4d;
  --border-faint:  #22242f;

  --text:          #edeef4;
  --text-muted:    #a3a7bd;
  --text-subtle:   #6d7189;
  --text-on-brand: #ffffff;

  --primary:       var(--magenta-400);
  --primary-hover: var(--magenta-300);
  --primary-tint:  rgba(230, 0, 126, 0.14);
  --link:          var(--magenta-300);
  --link-hover:    var(--magenta-200);

  --success-50: rgba(22, 163, 74, 0.16);  --success-700: #6ee7a0;
  --warn-50:    rgba(217, 148, 0, 0.18);  --warn-700:    #f6c860;
  --danger-50:  rgba(225, 29, 72, 0.18);  --danger-700:  #ff9aa6;
  --info-50:    rgba(37, 99, 235, 0.18);  --info-700:    #93b4fb;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}


/* 04  Reset & base --------------------------------------------------------- */
body.ds-reskin *, body.ds-reskin *::before, body.ds-reskin *::after { box-sizing: border-box; }

body.ds-reskin * { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body.ds-reskin {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

body.ds-reskin img, body.ds-reskin svg, body.ds-reskin video, body.ds-reskin canvas { display: block; max-width: 100%; }
body.ds-reskin svg { flex-shrink: 0; }

body.ds-reskin input, body.ds-reskin button, body.ds-reskin textarea, body.ds-reskin select { font: inherit; color: inherit; }

body.ds-reskin button { background: none; border: 0; cursor: pointer; }

body.ds-reskin a { color: var(--link); text-decoration: none; }
body.ds-reskin a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

body.ds-reskin ul[role="list"], body.ds-reskin ol[role="list"] { list-style: none; padding: 0; }

body.ds-reskin h1, body.ds-reskin h2, body.ds-reskin h3, body.ds-reskin h4, body.ds-reskin h5, body.ds-reskin h6 { font-weight: var(--fw-semibold); line-height: var(--leading-tight); }

body.ds-reskin hr, body.ds-reskin .divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

body.ds-reskin ::selection { background: var(--magenta-200); color: var(--magenta-900); }

/* Quiet, thin scrollbars */
body.ds-reskin * { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
body.ds-reskin *::-webkit-scrollbar { width: 10px; height: 10px; }
body.ds-reskin *::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; }
body.ds-reskin *::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }


/* 05  Typography helpers --------------------------------------------------- */
body.ds-reskin .display   { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
body.ds-reskin .h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-bold);     letter-spacing: -0.02em; line-height: var(--leading-tight); }
body.ds-reskin .h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: var(--leading-tight); }
body.ds-reskin .h3 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
body.ds-reskin .h4 { font-family: var(--font-display); font-size: var(--text-lg);  font-weight: var(--fw-semibold); }
body.ds-reskin .eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.ds-reskin .lead      { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-relaxed); }
body.ds-reskin .text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body.ds-reskin .tabular   { font-variant-numeric: tabular-nums; }


/* 07  Auth shell (login) --------------------------------------------------- */
/* The ONE place loud cosmic is right: full-bleed night sky behind a calm card. */
body.ds-reskin .auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 78% -10%, rgba(230, 0, 126, 0.30) 0%, rgba(230, 0, 126, 0) 46%),
    radial-gradient(90% 120% at 12% 8%, rgba(124, 31, 110, 0.32) 0%, rgba(124, 31, 110, 0) 50%),
    linear-gradient(155deg, #2a1550 0%, #3a1b63 45%, #4a1c58 100%);
}
body.ds-reskin .auth-shell::before {  /* starfield */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 68% 62%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 82% 32%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 30% 52%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 56% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 72%, rgba(255,255,255,0.5), transparent);
  opacity: 0.75;
}
body.ds-reskin .auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-7) var(--space-6);
}
body.ds-reskin .auth-card__brand { display: grid; place-items: center; margin-bottom: var(--space-5); }
body.ds-reskin .auth-card__title { text-align: center; font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-1); }
body.ds-reskin .auth-card__sub   { text-align: center; color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
body.ds-reskin .auth-card .btn { width: 100%; }
body.ds-reskin .auth-card__foot { margin-top: var(--space-5); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }


/* 08  Page hero ------------------------------------------------------------ */
body.ds-reskin .page-hero {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
}
body.ds-reskin .page-hero__body { position: relative; z-index: 2; max-width: 62ch; }
body.ds-reskin .page-hero__title { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: var(--leading-tight); }
body.ds-reskin .page-hero__subtitle { margin-top: var(--space-2); font-size: var(--text-md); line-height: var(--leading-relaxed); }
body.ds-reskin .page-hero__actions { position: relative; z-index: 2; margin-left: auto; display: flex; gap: var(--space-3); align-items: center; }

/* Plain variant — the default. Clean, neutral, lets data breathe. */
body.ds-reskin .page-hero--plain {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
body.ds-reskin .page-hero--plain .page-hero__subtitle { color: var(--text-muted); }

/* Cosmic variant — refined accent. Use sparingly (one band per view, max). */
body.ds-reskin .page-hero--cosmic {
  color: var(--text-on-cosmic);
  background:
    radial-gradient(120% 160% at 88% -20%, rgba(230, 0, 126, 0.26) 0%, rgba(230, 0, 126, 0) 46%),
    radial-gradient(80% 140% at 6% 0%, rgba(124, 31, 110, 0.28) 0%, rgba(124, 31, 110, 0) 52%),
    linear-gradient(150deg, #241146 0%, #34155a 52%, #431a54 100%);
  min-height: 148px;
}
body.ds-reskin .page-hero--cosmic .page-hero__subtitle { color: rgba(244, 239, 251, 0.82); }
body.ds-reskin .page-hero--cosmic::before {  /* stars */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 44% 66%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 60% 24%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 74% 54%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,0.6), transparent);
  opacity: 0.7;
}
body.ds-reskin .page-hero--cosmic::after {  /* moon + mountain ridge, right side, faded to left */
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: min(58%, 660px);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='260' viewBox='0 0 720 260' preserveAspectRatio='xMaxYMax slice'%3E%3Ccircle cx='566' cy='116' r='92' fill='rgb(246,196,69)' opacity='0.16'/%3E%3Ccircle cx='566' cy='116' r='62' fill='rgb(247,201,80)'/%3E%3Cpath d='M0,260 L120,150 L212,196 L330,118 L432,178 L520,132 L620,188 L720,150 L720,260 Z' fill='rgb(26,15,52)'/%3E%3Cpath d='M0,260 L96,198 L200,224 L302,182 L412,222 L520,190 L622,222 L720,198 L720,260 Z' fill='rgb(13,7,28)'/%3E%3C/svg%3E") no-repeat right bottom / cover;
  -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 96%);
          mask-image: linear-gradient(to left, #000 52%, transparent 96%);
}

/* Hero badge (e.g. "399 out of 1945 sales evaluated") */
body.ds-reskin .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-on-cosmic);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}


/* 09  Buttons -------------------------------------------------------------- */
body.ds-reskin .btn {
  --btn-h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text);
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
  user-select: none;
}
body.ds-reskin .btn svg { width: 18px; height: 18px; }
body.ds-reskin .btn:active { transform: translateY(0.5px); }
body.ds-reskin .btn:disabled, body.ds-reskin .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

body.ds-reskin .btn-primary {
  color: var(--text-on-brand);
  background: linear-gradient(180deg, var(--magenta-500) 0%, var(--magenta-600) 100%);
  box-shadow: var(--shadow-xs);
}
body.ds-reskin .btn-primary:hover { background: linear-gradient(180deg, var(--magenta-600) 0%, var(--magenta-700) 100%); box-shadow: var(--shadow-brand); }

body.ds-reskin .btn-subtle {
  color: var(--magenta-700);
  background: var(--magenta-50);
  border-color: var(--magenta-100);
}
body.ds-reskin .btn-subtle:hover { background: var(--magenta-100); border-color: var(--magenta-200); }

body.ds-reskin .btn-ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
body.ds-reskin .btn-ghost:hover { background: var(--neutral-50); border-color: var(--neutral-300); }

body.ds-reskin .btn-quiet { color: var(--text-muted); background: transparent; }
body.ds-reskin .btn-quiet:hover { background: var(--neutral-100); color: var(--text); }

body.ds-reskin .btn-success {
  color: #fff;
  background: linear-gradient(180deg, var(--success-500) 0%, var(--success-600) 100%);
}
body.ds-reskin .btn-success:hover { filter: brightness(0.96); }

body.ds-reskin .btn-danger {
  color: #fff;
  background: linear-gradient(180deg, var(--danger-500) 0%, var(--danger-600) 100%);
}
body.ds-reskin .btn-danger:hover { filter: brightness(0.96); }

body.ds-reskin .btn-sm { --btn-h: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
body.ds-reskin .btn-sm svg { width: 15px; height: 15px; }
body.ds-reskin .btn-lg { --btn-h: 48px; padding: 0 var(--space-5); font-size: var(--text-md); }
body.ds-reskin .btn-block { width: 100%; }

/* Compact icon action buttons inside table rows */
body.ds-reskin .row-action {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--neutral-50);
  border: 1px solid var(--border);
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
body.ds-reskin .row-action:hover { color: var(--text); background: var(--neutral-100); border-color: var(--border-strong); }
body.ds-reskin .row-action svg { width: 16px; height: 16px; }
body.ds-reskin .row-action--danger:hover { color: var(--danger-600); background: var(--danger-50); border-color: var(--danger-100); }
body.ds-reskin .row-action--brand:hover  { color: var(--magenta-700); background: var(--magenta-50); border-color: var(--magenta-100); }


/* 10  Cards & stat cards --------------------------------------------------- */
body.ds-reskin .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
body.ds-reskin .card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-faint);
}
body.ds-reskin .card__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-semibold); }
body.ds-reskin .card__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
body.ds-reskin .card__body { padding: var(--space-5); }
body.ds-reskin .card__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-faint); }

/* Stat card — label, value, delta. Icon sits in a tinted chip (no accent bar). */
body.ds-reskin .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
body.ds-reskin .stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* hope-ui also defines .stat-card and paints a 40px gradient corner ::before —
   proto cards have a clean corner. Kill the collision. */
body.ds-reskin .stat-card::before,
body.ds-reskin .stat-card::after { content: none !important; }
body.ds-reskin .stat-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
body.ds-reskin .stat-card__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
body.ds-reskin .stat-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  color: var(--magenta-700);
  background: var(--magenta-50);
}
body.ds-reskin .stat-card__icon svg { width: 18px; height: 18px; }
body.ds-reskin .stat-card__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.ds-reskin .stat-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

body.ds-reskin .delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
body.ds-reskin .delta svg { width: 14px; height: 14px; }
body.ds-reskin .delta--up   { color: var(--success-600); }
body.ds-reskin .delta--down { color: var(--danger-600); }

/* Icon-chip color variants (reuse on stat-card__icon) */
body.ds-reskin .chip-green  { color: var(--success-700); background: var(--success-50); }
body.ds-reskin .chip-amber  { color: var(--warn-700);    background: var(--warn-50); }
body.ds-reskin .chip-red    { color: var(--danger-700);  background: var(--danger-50); }
body.ds-reskin .chip-blue   { color: var(--info-700);    background: var(--info-50); }
body.ds-reskin .chip-violet { color: var(--violet-600);  background: var(--violet-50); }


/* 11  Section header / toolbar --------------------------------------------- */
body.ds-reskin .section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
body.ds-reskin .section-head__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); }
body.ds-reskin .section-head__sub { font-size: var(--text-sm); color: var(--text-muted); }
body.ds-reskin .section-head__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }


/* 12  Data table (.dtable) ------------------------------------------------- */
body.ds-reskin .dtable-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* NOT overflow:hidden — it clipped row-action dropdowns. Corner rounding moved
     to .dtable-scroll, which already clips via overflow-x. See dropdown-escape.js
     for the remaining scroll-container case. */
  overflow: visible;
}
body.ds-reskin .dtable-scroll { overflow-x: auto; border-radius: inherit; }
body.ds-reskin .dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}
body.ds-reskin .dtable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
body.ds-reskin .dtable tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-faint);
  vertical-align: middle;
}
body.ds-reskin .dtable tbody tr:last-child td { border-bottom: 0; }
body.ds-reskin .dtable tbody tr { transition: background var(--motion-fast) var(--ease); }
body.ds-reskin .dtable tbody tr:hover { background: var(--neutral-25); }
body.ds-reskin .dtable--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
body.ds-reskin .dtable--compact tbody td { padding: var(--space-2) var(--space-3); }
body.ds-reskin .dtable__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable header affordance */
body.ds-reskin .dtable th.is-sortable { cursor: pointer; user-select: none; }
body.ds-reskin .dtable th.is-sortable > span { display: inline-flex; align-items: center; gap: var(--space-1); }
body.ds-reskin .dtable th.is-sortable .sort-ind { display: inline-flex; flex-direction: column; line-height: 0; color: var(--neutral-300); }
body.ds-reskin .dtable th.is-sortable:hover { color: var(--text); }
body.ds-reskin .dtable th.sort-asc  .sort-ind { color: var(--primary); }
body.ds-reskin .dtable th.sort-desc .sort-ind { color: var(--primary); }
body.ds-reskin .dtable th.sort-asc  .sort-ind::after  { content: "▲"; font-size: 8px; }
body.ds-reskin .dtable th.sort-desc .sort-ind::after  { content: "▼"; font-size: 8px; }
body.ds-reskin .dtable th.is-sortable:not(.sort-asc):not(.sort-desc) .sort-ind::after { content: "↕"; font-size: 10px; }

/* Primary cell (agent / name with sub line) */
body.ds-reskin .cell-primary { display: flex; flex-direction: column; line-height: 1.3; }
body.ds-reskin .cell-primary__main { font-weight: var(--fw-semibold); color: var(--text); }
body.ds-reskin .cell-primary__sub  { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Name + avatar cell */
body.ds-reskin .cell-user { display: flex; align-items: center; gap: var(--space-3); }

/* Date + time stacked cell */
body.ds-reskin .cell-date { display: flex; flex-direction: column; line-height: 1.3; }
body.ds-reskin .cell-date__d { font-weight: var(--fw-medium); }
body.ds-reskin .cell-date__t { font-size: var(--text-xs); color: var(--text-subtle); display: inline-flex; align-items: center; gap: 4px; }
body.ds-reskin .cell-date__t svg { width: 12px; height: 12px; }

/* Contact / customer-info cell — a calm bordered mini-panel (NOT the
   rounded-card + left color bar cliché). Refined, neutral, readable. */
body.ds-reskin .contact-cell {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 240px;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
body.ds-reskin .contact-cell__lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.ds-reskin .contact-cell__name { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
body.ds-reskin .contact-cell__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.ds-reskin .contact-cell__row svg { width: 13px; height: 13px; color: var(--text-subtle); }
body.ds-reskin .contact-cell__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ds-reskin .contact-cell__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }


/* 13  Forms & inputs ------------------------------------------------------- */
body.ds-reskin .field { display: flex; flex-direction: column; gap: var(--space-2); }
body.ds-reskin .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
body.ds-reskin .field-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
body.ds-reskin .field-label .req { color: var(--danger-600); }
body.ds-reskin .field-hint  { font-size: var(--text-xs); color: var(--text-muted); }
body.ds-reskin .field-error { font-size: var(--text-xs); color: var(--danger-600); display: inline-flex; align-items: center; gap: var(--space-1); }

body.ds-reskin .input, body.ds-reskin .select, body.ds-reskin .textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
body.ds-reskin .textarea { min-height: 96px; padding: var(--space-3); resize: vertical; line-height: var(--leading-normal); }
body.ds-reskin .input::placeholder, body.ds-reskin .textarea::placeholder { color: var(--text-subtle); }

body.ds-reskin .input:hover, body.ds-reskin .select:hover, body.ds-reskin .textarea:hover { border-color: var(--neutral-300); }
body.ds-reskin .input:focus, body.ds-reskin .select:focus, body.ds-reskin .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
body.ds-reskin .input:disabled, body.ds-reskin .select:disabled, body.ds-reskin .textarea:disabled { background: var(--neutral-100); color: var(--text-muted); cursor: not-allowed; }
body.ds-reskin .input[aria-invalid="true"], body.ds-reskin .field-error ~ .input { border-color: var(--danger-500); }
body.ds-reskin .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-50); }

body.ds-reskin .select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}

/* Input with a leading icon (search, username, password) */
body.ds-reskin .input-group { position: relative; display: flex; align-items: center; }
body.ds-reskin .input-group > svg {
  position: absolute;
  left: var(--space-3);
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  pointer-events: none;
}
body.ds-reskin .input-group .input { padding-left: var(--space-8); }
body.ds-reskin .input-group__trailing {
  position: absolute;
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text-subtle);
  border-radius: var(--radius-sm);
}
body.ds-reskin .input-group__trailing:hover { color: var(--text); background: var(--neutral-100); }
body.ds-reskin .input-group .input--has-trailing { padding-right: var(--space-8); }

/* Search input (table toolbar) */
body.ds-reskin .search { max-width: 320px; }

/* Checkbox */
body.ds-reskin .checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
body.ds-reskin .checkbox:hover { border-color: var(--neutral-400); }
body.ds-reskin .checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
body.ds-reskin .checkbox-row { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }

/* Toggle switch (Users → Status) — a styled checkbox, fully keyboardable */
body.ds-reskin .switch {
  --sw-w: 40px;
  --sw-h: 22px;
  appearance: none;
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: var(--radius-full);
  background: var(--neutral-300);
  cursor: pointer;
  transition: background var(--motion) var(--ease);
}
body.ds-reskin .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--sw-h) - 4px);
  height: calc(var(--sw-h) - 4px);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion) var(--ease);
}
body.ds-reskin .switch:checked { background: var(--primary); }
body.ds-reskin .switch:checked::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }

/* Per-page select ("10 entries per page") */
body.ds-reskin .perpage { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
body.ds-reskin .perpage .select { width: auto; min-width: 76px; }


/* 14  Pills / badges ------------------------------------------------------- */
body.ds-reskin .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--neutral-100);
  color: var(--neutral-700);
}
body.ds-reskin .pill svg { width: 13px; height: 13px; }
/* A leading dot reinforces status without relying on color alone */
body.ds-reskin .pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }

body.ds-reskin .pill-success { color: var(--success-700); background: var(--success-50); }
body.ds-reskin .pill-warn    { color: var(--warn-700);    background: var(--warn-50); }
body.ds-reskin .pill-danger  { color: var(--danger-700);  background: var(--danger-50); }
body.ds-reskin .pill-info    { color: var(--info-700);    background: var(--info-50); }
body.ds-reskin .pill-brand   { color: var(--magenta-700); background: var(--magenta-50); }
body.ds-reskin .pill-violet  { color: var(--violet-600);  background: var(--violet-50); }
body.ds-reskin .pill-neutral { color: var(--neutral-700); background: var(--neutral-100); }

/* Money pill (amounts) — brand-tinted, tabular figures */
body.ds-reskin .pill-amount {
  color: var(--magenta-700);
  background: var(--magenta-50);
  border: 1px solid var(--magenta-100);
  font-variant-numeric: tabular-nums;
  padding: 3px var(--space-3);
}
body.ds-reskin .pill-amount--muted { color: var(--info-700); background: var(--info-50); border-color: var(--info-100); }

/* Brand tag (Kdpdigitalpublishers, Savtechdigital…) */
body.ds-reskin .tag-brand {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--violet-600);
  background: var(--violet-50);
  border-radius: var(--radius-full);
}
body.ds-reskin .tag-brand:hover { background: var(--violet-100); text-decoration: none; }

/* Role pill (FrontSeller, Content Executive…) */
body.ds-reskin .pill-role { color: var(--magenta-700); background: var(--magenta-50); border: 1px solid var(--magenta-100); }

/* Outline pill (REDACTED, No File) */
body.ds-reskin .pill-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }


/* 15  Tabs ----------------------------------------------------------------- */
body.ds-reskin .tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
}
body.ds-reskin .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
body.ds-reskin .tab svg { width: 16px; height: 16px; }
body.ds-reskin .tab:hover { color: var(--text); }
body.ds-reskin .tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-semibold); }


/* 16  Segmented control (brand / account filter strip) --------------------- */
body.ds-reskin .segmented {
  display: inline-flex;
  padding: var(--space-1);
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
body.ds-reskin .segmented__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
body.ds-reskin .segmented__item:hover { color: var(--text); }
body.ds-reskin .segmented__item.is-active { color: var(--text); background: var(--surface); box-shadow: var(--shadow-xs); }


/* 17  Filter bar ----------------------------------------------------------- */
body.ds-reskin .filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
body.ds-reskin .filter-bar .select { width: auto; min-width: 160px; }
body.ds-reskin .filter-bar__spacer { margin-left: auto; }
body.ds-reskin .filter-group { display: flex; flex-direction: column; gap: var(--space-1); }
body.ds-reskin .filter-group__label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); }


/* 18  Avatar --------------------------------------------------------------- */
body.ds-reskin .avatar {
  --av-size: 36px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--av-size);
  height: var(--av-size);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: calc(var(--av-size) * 0.38);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--magenta-700);
  background: var(--magenta-100);
  overflow: hidden;
  user-select: none;
}
body.ds-reskin .avatar img { width: 100%; height: 100%; object-fit: cover; }
body.ds-reskin .avatar-xs { --av-size: 24px; }
body.ds-reskin .avatar-sm { --av-size: 30px; }
body.ds-reskin .avatar-lg { --av-size: 44px; }
body.ds-reskin .avatar-xl { --av-size: 56px; }

/* Deterministic tint variants (hash a name → pick one) */
body.ds-reskin .avatar--violet { color: var(--violet-600);  background: var(--violet-100); }
body.ds-reskin .avatar--blue   { color: var(--info-700);     background: var(--info-100); }
body.ds-reskin .avatar--green  { color: var(--success-700);  background: var(--success-100); }
body.ds-reskin .avatar--amber  { color: var(--warn-700);      background: var(--warn-100); }
body.ds-reskin .avatar--plum   { color: #7a1f66;              background: #f6dcef; }

body.ds-reskin .avatar-group { display: inline-flex; }
body.ds-reskin .avatar-group .avatar { border: 2px solid var(--surface); }
body.ds-reskin .avatar-group .avatar + .avatar { margin-left: -10px; }


/* 19  Donut & progress ----------------------------------------------------- */
body.ds-reskin .donut {
  --value: 62;
  --size: 168px;
  --thick: 16px;
  --fill: var(--primary);
  --track: var(--neutral-150);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--fill) calc(var(--value) * 1%), var(--track) 0);
}
body.ds-reskin .donut--gradient { --fill: none; background: conic-gradient(from 0deg, var(--magenta-500), var(--violet-500) calc(var(--value) * 1%), var(--neutral-150) 0); }
body.ds-reskin .donut::before {
  content: "";
  position: absolute;
  inset: var(--thick);
  border-radius: 50%;
  background: var(--surface);
}
body.ds-reskin .donut__center { position: relative; text-align: center; }
body.ds-reskin .donut__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.ds-reskin .donut__label { font-size: var(--text-xs); color: var(--text-muted); }

body.ds-reskin .progress {
  height: 8px;
  background: var(--neutral-150);
  border-radius: var(--radius-full);
  overflow: hidden;
}
body.ds-reskin .progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--magenta-500), var(--violet-500));
  transition: width var(--motion-slow) var(--ease);
}
body.ds-reskin .progress--sm { height: 6px; }


/* 20  Pagination ----------------------------------------------------------- */
body.ds-reskin .pagination { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
body.ds-reskin .page-item {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
body.ds-reskin .page-item:hover { background: var(--neutral-50); color: var(--text); border-color: var(--border-strong); }
body.ds-reskin .page-item.is-active { color: var(--text-on-brand); background: var(--primary); border-color: var(--primary); }
body.ds-reskin .page-item:disabled, body.ds-reskin .page-item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
body.ds-reskin .page-item svg { width: 16px; height: 16px; }
body.ds-reskin .page-ellipsis { padding: 0 var(--space-1); color: var(--text-subtle); }

body.ds-reskin .table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-faint);
  font-size: var(--text-sm);
  color: var(--text-muted);
}


/* 21  Leaderboard rank / medal --------------------------------------------- */
body.ds-reskin .rank { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
body.ds-reskin .rank__medal {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  color: #6b4e00;
  box-shadow: var(--shadow-sm);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
body.ds-reskin .rank--1 .rank__medal { background: linear-gradient(160deg, #ffe08a, #e9b53a); color: #6b4e00; }
body.ds-reskin .rank--2 .rank__medal { background: linear-gradient(160deg, #eef1f6, #c2c8d4); color: #4a4f5c; }
body.ds-reskin .rank--3 .rank__medal { background: linear-gradient(160deg, #f4c39a, #cd8145); color: #5a3113; }
body.ds-reskin .rank__name { font-weight: var(--fw-semibold); }
body.ds-reskin .rank__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--magenta-700); font-variant-numeric: tabular-nums; }


/* 22  Empty state, skeleton, spinner --------------------------------------- */
body.ds-reskin .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--text-muted);
}
body.ds-reskin .empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  color: var(--violet-600);
  background: var(--violet-50);
}
body.ds-reskin .empty__icon svg { width: 26px; height: 26px; }
body.ds-reskin .empty__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text); }
body.ds-reskin .empty__body { max-width: 42ch; font-size: var(--text-sm); }

body.ds-reskin .skeleton {
  --sk-base: var(--neutral-150);
  --sk-shine: var(--neutral-100);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
  background-size: 400% 100%;
  animation: sk-shine 1.4s ease infinite;
}
body.ds-reskin .skeleton-line { height: 12px; }
body.ds-reskin .skeleton-line + .skeleton-line { margin-top: var(--space-2); }
@keyframes sk-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

body.ds-reskin .spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--neutral-200);
  border-top-color: var(--primary);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* 23  Utilities (minimal — not a framework) -------------------------------- */
body.ds-reskin .u-flex     { display: flex; }
body.ds-reskin .u-inline   { display: inline-flex; }
body.ds-reskin .u-col      { display: flex; flex-direction: column; }
body.ds-reskin .u-center   { align-items: center; }
body.ds-reskin .u-between  { display: flex; align-items: center; justify-content: space-between; }
body.ds-reskin .u-wrap     { flex-wrap: wrap; }
body.ds-reskin .u-grow     { flex: 1 1 auto; min-width: 0; }
body.ds-reskin .u-gap-1 { gap: var(--space-1); } body.ds-reskin .u-gap-2 { gap: var(--space-2); }
body.ds-reskin .u-gap-3 { gap: var(--space-3); } body.ds-reskin .u-gap-4 { gap: var(--space-4); }
body.ds-reskin .u-gap-5 { gap: var(--space-5); }
body.ds-reskin .u-stack > * + * { margin-top: var(--space-4); }
body.ds-reskin .u-muted    { color: var(--text-muted); }
body.ds-reskin .u-subtle   { color: var(--text-subtle); }
body.ds-reskin .u-strong   { font-weight: var(--fw-semibold); }
body.ds-reskin .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.ds-reskin .u-right    { text-align: right; }
body.ds-reskin .u-nowrap   { white-space: nowrap; }
body.ds-reskin .u-ml-auto  { margin-left: auto; }
body.ds-reskin .u-full     { width: 100%; }


/* 24  Accessibility -------------------------------------------------------- */
/* Visible, consistent focus ring on every keyboard-focused control. */
body.ds-reskin :where(a, button, .btn, .icon-btn, .row-action, .nav-item, .tab, .page-item,
       .segmented__item, .input, .select, .textarea, .checkbox, .switch,
       [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
body.ds-reskin .input:focus-visible, body.ds-reskin .select:focus-visible, body.ds-reskin .textarea:focus-visible { outline: none; }

/* Skip link — first focusable element on a page */
body.ds-reskin .skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform var(--motion) var(--ease);
}
body.ds-reskin .skip-link:focus { transform: translateY(0); text-decoration: none; }

/* Screen-reader-only content */
body.ds-reskin .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honor reduced-motion: kill non-essential motion, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  body.ds-reskin *, body.ds-reskin *::before, body.ds-reskin *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}