/* ============================================================
   Team-HM Client v2 — Design Tokens
   "Editorial Athletic" — warm dark, surgical red, type-led
   ============================================================ */

:root,
[data-thm="v2"] {
  /* ---- BRAND (preserved — do not change) ---- */
  --thm-brand:           #FF0336;
  --thm-brand-hover:     #FF1A4B;
  --thm-brand-press:     #E60030;
  --thm-brand-soft:      rgba(255, 3, 54, 0.10);
  --thm-brand-ghost:     rgba(255, 3, 54, 0.04);
  --thm-brand-ring:      rgba(255, 3, 54, 0.22);

  /* ---- SURFACES — warm dark (NOT cold blue-gray) ---- */
  --thm-bg:              #0D0D0F;   /* page */
  --thm-bg-sidebar:      #0A0A0C;   /* slightly deeper than page for separation */
  --thm-bg-card:         #15151A;   /* cards base */
  --thm-bg-elevated:     #1E1E25;   /* hover / dropdowns / pressed cards */
  --thm-bg-overlay:      #262630;   /* popovers / modals */
  --thm-bg-input:        #1A1A20;
  --thm-bg-input-focus:  #20202A;
  --thm-bg-tooltip:      #2D2D38;

  /* ---- BORDERS — hairlines, low contrast ---- */
  --thm-border:          #25252D;   /* default card border */
  --thm-border-soft:     #1D1D24;   /* very subtle dividers */
  --thm-border-strong:   #353540;   /* inputs, separators with intent */
  --thm-border-focus:    var(--thm-brand);

  /* ---- TEXT — warm whites (NOT pure #fff) ---- */
  --thm-text:            #F2F0EB;   /* primary (slightly cream) */
  --thm-text-secondary:  #A8A59E;   /* body */
  --thm-text-tertiary:   #6F6C66;   /* meta, captions */
  --thm-text-disabled:   #45433F;
  --thm-text-on-brand:   #FFFFFF;   /* on red surfaces */
  --thm-text-inverse:    #0D0D0F;

  /* ---- SEMANTIC (muted — not bright neon) ---- */
  --thm-success:         #57C28A;
  --thm-success-soft:    rgba(87, 194, 138, 0.12);
  --thm-warning:         #E0A847;
  --thm-warning-soft:    rgba(224, 168, 71, 0.12);
  --thm-info:            #7EA3DC;
  --thm-info-soft:       rgba(126, 163, 220, 0.12);
  --thm-danger:          var(--thm-brand);  /* use brand red — don't introduce 2nd red */
  --thm-danger-soft:     var(--thm-brand-soft);

  /* ---- TYPOGRAPHY ---- */
  --thm-font:            'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --thm-font-display:    'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  --thm-font-mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Sizes — modular ratio 1.2 */
  --thm-text-2xs:    11px;
  --thm-text-xs:     12px;
  --thm-text-sm:     13px;
  --thm-text-base:   15px;
  --thm-text-lg:     17px;
  --thm-text-xl:     20px;
  --thm-text-2xl:    24px;
  --thm-text-3xl:    30px;
  --thm-text-4xl:    38px;
  --thm-text-5xl:    48px;
  --thm-text-6xl:    64px;
  --thm-text-display: 88px;  /* hero numerals */

  /* Line heights */
  --thm-lh-tight:    1.15;
  --thm-lh-snug:     1.3;
  --thm-lh-normal:   1.5;
  --thm-lh-relaxed:  1.65;
  --thm-lh-loose:    1.8;

  /* Weights */
  --thm-fw-regular:  400;
  --thm-fw-medium:   500;
  --thm-fw-semi:     600;
  --thm-fw-bold:     700;
  --thm-fw-extra:    800;

  /* Letter spacing */
  --thm-tracking-tight:   -0.02em;  /* big headlines, display numerals */
  --thm-tracking-snug:    -0.01em;  /* h2-h4 */
  --thm-tracking-normal:  0;
  --thm-tracking-wide:    0.02em;
  --thm-tracking-wider:   0.08em;   /* CAPS labels */

  /* ---- SPACING — 4-base ---- */
  --thm-s-0:    0;
  --thm-s-1:    4px;
  --thm-s-2:    8px;
  --thm-s-3:    12px;
  --thm-s-4:    16px;
  --thm-s-5:    20px;
  --thm-s-6:    24px;
  --thm-s-7:    28px;
  --thm-s-8:    32px;
  --thm-s-10:   40px;
  --thm-s-12:   48px;
  --thm-s-14:   56px;
  --thm-s-16:   64px;
  --thm-s-20:   80px;
  --thm-s-24:   96px;
  --thm-s-32:   128px;

  /* ---- BORDER RADIUS ---- */
  --thm-r-none:  0;
  --thm-r-xs:    4px;
  --thm-r-sm:    8px;
  --thm-r-md:    12px;   /* cards default */
  --thm-r-lg:    16px;
  --thm-r-xl:    20px;
  --thm-r-2xl:   28px;
  --thm-r-full:  9999px;

  /* ---- SHADOWS — subtle for dark theme ---- */
  --thm-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --thm-shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --thm-shadow-md:    0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.22);
  --thm-shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.28);
  --thm-shadow-focus: 0 0 0 3px var(--thm-brand-ring);

  /* ---- MOTION ---- */
  --thm-dur-instant:  0ms;
  --thm-dur-fast:     120ms;
  --thm-dur-base:     200ms;
  --thm-dur-slow:     320ms;
  --thm-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --thm-ease-in:      cubic-bezier(0.4, 0, 0.6, 1);
  --thm-ease-spring:  cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ---- Z-INDEX ---- */
  --thm-z-base:       1;
  --thm-z-sticky:     10;
  --thm-z-sidebar:    50;
  --thm-z-topbar:     60;
  --thm-z-bottomnav:  55;
  --thm-z-dropdown:   100;
  --thm-z-popover:    200;
  --thm-z-modal:      300;
  --thm-z-toast:      400;

  /* ---- LAYOUT ---- */
  --thm-sidebar-w:        248px;
  --thm-sidebar-w-collapsed: 72px;
  --thm-topbar-h:         68px;
  --thm-bottomnav-h:      64px;
  --thm-content-max:      1320px;
  --thm-content-padding:  32px;
}

/* ============================================================
   LIGHT THEME — Warm editorial off-white (NOT sterile #FFF)
   Activated by adding data-thm="v2-light" on <body>
   Brand red and semantic colors preserved.
   ============================================================ */
[data-thm="v2-light"] {
  /* Surfaces — warm off-white, NOT cold gray */
  --thm-bg:              #FAF9F5;
  --thm-bg-sidebar:      #F4F2EB;
  --thm-bg-card:         #FFFFFF;
  --thm-bg-elevated:     #F4F2EB;
  --thm-bg-overlay:      #FFFFFF;
  --thm-bg-input:        #FFFFFF;
  --thm-bg-input-focus:  #FFFFFF;
  --thm-bg-tooltip:      #1A1A1F;

  /* Borders — hairlines on warm surfaces */
  --thm-border:          #E8E5DC;
  --thm-border-soft:     #EFEDE5;
  --thm-border-strong:   #D0CDC2;

  /* Text — warm darks, NOT pure black */
  --thm-text:            #1A1A1F;
  --thm-text-secondary:  #57544E;
  --thm-text-tertiary:   #8A877F;
  --thm-text-disabled:   #BAB7AD;
  --thm-text-on-brand:   #FFFFFF;
  --thm-text-inverse:    #FAF9F5;

  /* Brand stays — softer ghost on light */
  --thm-brand-soft:      rgba(255, 3, 54, 0.07);
  --thm-brand-ghost:     rgba(255, 3, 54, 0.03);
  --thm-brand-ring:      rgba(255, 3, 54, 0.22);

  /* Semantic — same hue, slightly softer on light */
  --thm-success-soft:    rgba(87, 194, 138, 0.10);
  --thm-warning-soft:    rgba(224, 168, 71, 0.10);
  --thm-info-soft:       rgba(126, 163, 220, 0.10);
  --thm-danger-soft:     var(--thm-brand-soft);

  /* Shadows — visible on light, softer values */
  --thm-shadow-xs:       0 1px 2px rgba(26, 26, 31, 0.05);
  --thm-shadow-sm:       0 2px 8px rgba(26, 26, 31, 0.06), 0 1px 2px rgba(26, 26, 31, 0.04);
  --thm-shadow-md:       0 6px 18px rgba(26, 26, 31, 0.08), 0 2px 4px rgba(26, 26, 31, 0.05);
  --thm-shadow-lg:       0 12px 32px rgba(26, 26, 31, 0.12), 0 4px 8px rgba(26, 26, 31, 0.06);
}

/* Theme meta tag adapts per theme */
[data-thm="v2-light"] { color-scheme: light; }
[data-thm="v2"]       { color-scheme: dark; }

/* Smooth theme transition (not instant flash) */
[data-thm] {
  transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-thm] {
    --thm-dur-fast: 0ms;
    --thm-dur-base: 0ms;
    --thm-dur-slow: 0ms;
    transition: none !important;
  }
}
/* ============================================================
   base.css — Reset + Typography defaults + Body
   ============================================================ */

/* Minimal reset (modern, no normalize.css needed) */
[data-thm] *,
[data-thm] *::before,
[data-thm] *::after {
  box-sizing: border-box;
}

[data-thm] {
  margin: 0;
  padding: 0;
  font-family: var(--thm-font);
  font-size: var(--thm-text-base);
  line-height: var(--thm-lh-relaxed);
  color: var(--thm-text);
  background: var(--thm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  min-height: 100vh;
}

/* Tabular figures EVERYWHERE — critical for premium feel */
[data-thm] .thm-num,
[data-thm] table,
[data-thm] input[type="number"],
[data-thm] .thm-stat-value,
[data-thm] .thm-badge,
[data-thm] time {
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Headings — editorial, tight tracking */
[data-thm] h1,
[data-thm] h2,
[data-thm] h3,
[data-thm] h4,
[data-thm] h5,
[data-thm] h6 {
  margin: 0;
  font-family: var(--thm-font-display);
  font-weight: var(--thm-fw-bold);
  line-height: var(--thm-lh-snug);
  letter-spacing: var(--thm-tracking-snug);
  color: var(--thm-text);
}

[data-thm] h1 { font-size: var(--thm-text-3xl); letter-spacing: var(--thm-tracking-tight); }
[data-thm] h2 { font-size: var(--thm-text-2xl); }
[data-thm] h3 { font-size: var(--thm-text-xl); }
[data-thm] h4 { font-size: var(--thm-text-lg); font-weight: var(--thm-fw-semi); }
[data-thm] h5 { font-size: var(--thm-text-base); font-weight: var(--thm-fw-semi); }
[data-thm] h6 {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
}

[data-thm] p {
  margin: 0;
  color: var(--thm-text-secondary);
  line-height: var(--thm-lh-relaxed);
}

[data-thm] a {
  color: inherit;
  text-decoration: none;
  transition: color var(--thm-dur-fast) var(--thm-ease-out);
}
/* Plain text links (not buttons, sidebar items, cards, etc.) hover brand red */
[data-thm] a.thm-link:hover,
[data-thm] p a:hover,
[data-thm] .thm-prose a:hover { color: var(--thm-brand); }

[data-thm] strong,
[data-thm] b { font-weight: var(--thm-fw-semi); color: var(--thm-text); }

[data-thm] small { font-size: var(--thm-text-xs); color: var(--thm-text-tertiary); }

[data-thm] hr {
  border: 0;
  border-top: 1px solid var(--thm-border-soft);
  margin: var(--thm-s-6) 0;
}

[data-thm] code,
[data-thm] pre {
  font-family: var(--thm-font-mono);
  font-size: 0.92em;
}

/* Focus visible — for accessibility */
[data-thm] :focus-visible {
  outline: none;
  box-shadow: var(--thm-shadow-focus);
  border-radius: var(--thm-r-sm);
}

/* Selection */
[data-thm] ::selection {
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
}

/* Scrollbar — subtle */
[data-thm] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-thm] *::-webkit-scrollbar-track {
  background: transparent;
}
[data-thm] *::-webkit-scrollbar-thumb {
  background: var(--thm-border-strong);
  border-radius: var(--thm-r-full);
  border: 2px solid var(--thm-bg);
}
[data-thm] *::-webkit-scrollbar-thumb:hover {
  background: var(--thm-text-tertiary);
}

/* Lists default */
[data-thm] ul, [data-thm] ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Images */
[data-thm] img,
[data-thm] svg {
  display: block;
  max-width: 100%;
}

/* Buttons reset */
[data-thm] button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Form fields reset */
[data-thm] input,
[data-thm] textarea,
[data-thm] select {
  font: inherit;
  color: inherit;
}

/* RTL adjustments — only when [dir="rtl"] */
[data-thm][dir="rtl"] h1,
[data-thm][dir="rtl"] h2,
[data-thm][dir="rtl"] h3 {
  letter-spacing: 0;  /* Arabic doesn't benefit from negative tracking */
}

/* Helper text classes (used by components) */
[data-thm] .thm-eyebrow {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
}
[data-thm][dir="rtl"] .thm-eyebrow {
  letter-spacing: 0;
}

[data-thm] .thm-display {
  font-size: var(--thm-text-display);
  font-weight: var(--thm-fw-extra);
  line-height: var(--thm-lh-tight);
  letter-spacing: var(--thm-tracking-tight);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

[data-thm] .thm-muted { color: var(--thm-text-secondary); }
[data-thm] .thm-meta  { color: var(--thm-text-tertiary); font-size: var(--thm-text-sm); }
/* ============================================================
   components.css — Reusable UI primitives
   Pattern: BEM-ish naming under .thm- prefix to avoid Bootstrap collision
   ============================================================ */

/* ----------------------------------------------------------------
   BUTTON
   ---------------------------------------------------------------- */
[data-thm] .thm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--thm-s-2);
  height: 40px;
  padding: 0 var(--thm-s-5);
  border-radius: var(--thm-r-sm);
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--thm-dur-fast) var(--thm-ease-out),
    color var(--thm-dur-fast) var(--thm-ease-out),
    border-color var(--thm-dur-fast) var(--thm-ease-out),
    transform var(--thm-dur-fast) var(--thm-ease-out);
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid transparent;
}

[data-thm] .thm-btn:active { transform: scale(0.98); }
[data-thm] .thm-btn:disabled,
[data-thm] .thm-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Variants */
[data-thm] .thm-btn--primary {
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
}
[data-thm] .thm-btn--primary:hover { background: var(--thm-brand-hover); }
[data-thm] .thm-btn--primary:active { background: var(--thm-brand-press); }

[data-thm] .thm-btn--secondary {
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
  border-color: var(--thm-border);
}
[data-thm] .thm-btn--secondary:hover {
  background: var(--thm-bg-overlay);
  border-color: var(--thm-border-strong);
}

[data-thm] .thm-btn--ghost {
  background: transparent;
  color: var(--thm-text-secondary);
}
[data-thm] .thm-btn--ghost:hover {
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
}

[data-thm] .thm-btn--outline {
  background: transparent;
  color: var(--thm-text);
  border-color: var(--thm-border-strong);
}
[data-thm] .thm-btn--outline:hover {
  background: var(--thm-bg-elevated);
  border-color: var(--thm-text-tertiary);
}

[data-thm] .thm-btn--link {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--thm-brand);
  border: 0;
}
[data-thm] .thm-btn--link:hover { text-decoration: underline; }

/* Sizes */
[data-thm] .thm-btn--sm { height: 32px; padding: 0 var(--thm-s-3); font-size: var(--thm-text-xs); }
[data-thm] .thm-btn--lg { height: 48px; padding: 0 var(--thm-s-6); font-size: var(--thm-text-base); }
[data-thm] .thm-btn--xl { height: 56px; padding: 0 var(--thm-s-8); font-size: var(--thm-text-lg); }

[data-thm] .thm-btn--block { display: flex; width: 100%; }

/* Icon button (square, icon-only) */
[data-thm] .thm-btn--icon {
  padding: 0;
  width: 40px;
}
[data-thm] .thm-btn--icon.thm-btn--sm { width: 32px; }
[data-thm] .thm-btn--icon.thm-btn--lg { width: 48px; }

[data-thm] .thm-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
[data-thm] .thm-btn--lg svg { width: 20px; height: 20px; }
[data-thm] .thm-btn--xl svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------------
   CARD
   ---------------------------------------------------------------- */
[data-thm] .thm-card {
  background: var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  position: relative;
  overflow: hidden;
  transition: border-color var(--thm-dur-base) var(--thm-ease-out),
              background var(--thm-dur-base) var(--thm-ease-out);
}

[data-thm] .thm-card--featured {
  border-radius: var(--thm-r-lg);
}

[data-thm] .thm-card--interactive { cursor: pointer; }
[data-thm] .thm-card--interactive:hover {
  border-color: var(--thm-border-strong);
  background: var(--thm-bg-elevated);
}

[data-thm] .thm-card--brand {
  background: linear-gradient(135deg, var(--thm-brand-soft), transparent 60%), var(--thm-bg-card);
  border-color: rgba(255, 3, 54, 0.22);
}

[data-thm] .thm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--thm-s-5) var(--thm-s-6);
  border-bottom: 1px solid var(--thm-border-soft);
  gap: var(--thm-s-4);
}

[data-thm] .thm-card__title {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
  margin: 0;
}
[data-thm][dir="rtl"] .thm-card__title { letter-spacing: 0; }

[data-thm] .thm-card__action {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-1);
  transition: color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-card__action:hover { color: var(--thm-text); }

[data-thm] .thm-card__body {
  padding: var(--thm-s-6);
}

[data-thm] .thm-card__body--compact { padding: var(--thm-s-4); }
[data-thm] .thm-card__body--large   { padding: var(--thm-s-8); }

[data-thm] .thm-card__footer {
  padding: var(--thm-s-4) var(--thm-s-6);
  border-top: 1px solid var(--thm-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--thm-s-3);
}

/* ----------------------------------------------------------------
   STAT
   Editorial: huge number is the hero, label is meta
   ---------------------------------------------------------------- */
[data-thm] .thm-stat {
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
}

[data-thm] .thm-stat__label {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
}
[data-thm][dir="rtl"] .thm-stat__label { letter-spacing: 0; }

[data-thm] .thm-stat__value {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-4xl);
  font-weight: var(--thm-fw-extra);
  line-height: var(--thm-lh-tight);
  letter-spacing: var(--thm-tracking-tight);
  color: var(--thm-text);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}
[data-thm] .thm-stat__value--xl { font-size: var(--thm-text-6xl); }
[data-thm] .thm-stat__value--display { font-size: var(--thm-text-display); }

[data-thm] .thm-stat__unit {
  font-size: var(--thm-text-base);
  font-weight: var(--thm-fw-medium);
  color: var(--thm-text-tertiary);
  margin-inline-start: var(--thm-s-1);
}

[data-thm] .thm-stat__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-1);
  font-size: var(--thm-text-sm);
  color: var(--thm-text-secondary);
}

[data-thm] .thm-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
[data-thm] .thm-stat__delta--up   { color: var(--thm-success); }
[data-thm] .thm-stat__delta--down { color: var(--thm-brand); }
[data-thm] .thm-stat__delta--neutral { color: var(--thm-text-tertiary); }

/* ----------------------------------------------------------------
   BADGE / PILL
   ---------------------------------------------------------------- */
[data-thm] .thm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-1);
  height: 22px;
  padding: 0 var(--thm-s-2);
  border-radius: var(--thm-r-full);
  font-size: var(--thm-text-2xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  background: var(--thm-bg-elevated);
  color: var(--thm-text-secondary);
  border: 1px solid var(--thm-border);
}
[data-thm][dir="rtl"] .thm-badge { letter-spacing: 0; text-transform: none; }

[data-thm] .thm-badge--brand   { background: var(--thm-brand-soft); color: var(--thm-brand); border-color: rgba(255,3,54,0.20); }
[data-thm] .thm-badge--success { background: var(--thm-success-soft); color: var(--thm-success); border-color: rgba(87,194,138,0.20); }
[data-thm] .thm-badge--warning { background: var(--thm-warning-soft); color: var(--thm-warning); border-color: rgba(224,168,71,0.20); }
[data-thm] .thm-badge--info    { background: var(--thm-info-soft); color: var(--thm-info); border-color: rgba(126,163,220,0.20); }

[data-thm] .thm-badge--solid {
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
  border-color: transparent;
}

[data-thm] .thm-badge--dot {
  height: 8px;
  width: 8px;
  padding: 0;
  border-radius: var(--thm-r-full);
  background: var(--thm-brand);
  border: 0;
}

/* ----------------------------------------------------------------
   AVATAR
   ---------------------------------------------------------------- */
[data-thm] .thm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--thm-r-full);
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--thm-border);
}
[data-thm] .thm-avatar img { width: 100%; height: 100%; object-fit: cover; }

[data-thm] .thm-avatar--xs { width: 24px; height: 24px; font-size: var(--thm-text-2xs); }
[data-thm] .thm-avatar--sm { width: 32px; height: 32px; font-size: var(--thm-text-xs); }
[data-thm] .thm-avatar--md { width: 40px; height: 40px; }
[data-thm] .thm-avatar--lg { width: 56px; height: 56px; font-size: var(--thm-text-base); }
[data-thm] .thm-avatar--xl { width: 96px; height: 96px; font-size: var(--thm-text-2xl); }

/* ----------------------------------------------------------------
   PROGRESS BAR (linear, slim)
   Track uses border color so it's visible against card bg.
   ---------------------------------------------------------------- */
[data-thm] .thm-progress {
  width: 100%;
  height: 8px;
  background: var(--thm-border);
  border-radius: var(--thm-r-full);
  overflow: hidden;
  position: relative;
}

[data-thm] .thm-progress__bar {
  height: 100%;
  background: var(--thm-brand);
  border-radius: var(--thm-r-full);
  transition: width 1100ms var(--thm-ease-out);
  position: relative;
}

/* Subtle inner highlight for premium feel */
[data-thm] .thm-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 50%);
  pointer-events: none;
}
[data-thm="v2-light"] .thm-progress__bar::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.30), transparent 60%);
}

[data-thm] .thm-progress--lg   { height: 12px; }
[data-thm] .thm-progress--thin { height: 5px; }
[data-thm] .thm-progress__bar--success { background: var(--thm-success); }
[data-thm] .thm-progress__bar--warning { background: var(--thm-warning); }

/* ----------------------------------------------------------------
   PROGRESS RING (SVG-based, set via CSS custom prop --p: 0-100)
   ---------------------------------------------------------------- */
[data-thm] .thm-ring {
  position: relative;
  width: var(--thm-ring-size, 64px);
  height: var(--thm-ring-size, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-thm] .thm-ring__track,
[data-thm] .thm-ring__indicator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
[data-thm] .thm-ring__track { transform: rotate(-90deg); }
[data-thm] .thm-ring__label {
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-bold);
  color: var(--thm-text);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
   INPUT / FORM
   ---------------------------------------------------------------- */
[data-thm] .thm-field {
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
}

[data-thm] .thm-field__label {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-secondary);
}
[data-thm][dir="rtl"] .thm-field__label { letter-spacing: 0; text-transform: none; font-weight: var(--thm-fw-medium); }

[data-thm] .thm-input,
[data-thm] .thm-textarea,
[data-thm] .thm-select {
  height: 44px;
  width: 100%;
  padding: 0 var(--thm-s-4);
  background: var(--thm-bg-input);
  border: 1px solid var(--thm-border-strong);
  border-radius: var(--thm-r-sm);
  color: var(--thm-text);
  font-size: var(--thm-text-base);
  transition: border-color var(--thm-dur-fast) var(--thm-ease-out),
              background var(--thm-dur-fast) var(--thm-ease-out);
}

[data-thm] .thm-input:focus,
[data-thm] .thm-textarea:focus,
[data-thm] .thm-select:focus {
  outline: none;
  border-color: var(--thm-brand);
  background: var(--thm-bg-input-focus);
}

[data-thm] .thm-input::placeholder { color: var(--thm-text-tertiary); }

[data-thm] .thm-textarea {
  height: auto;
  min-height: 96px;
  padding: var(--thm-s-3) var(--thm-s-4);
  line-height: var(--thm-lh-relaxed);
  resize: vertical;
}

[data-thm] .thm-field__hint {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
}
[data-thm] .thm-field__error {
  font-size: var(--thm-text-xs);
  color: var(--thm-brand);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* Alert (form errors top) */
[data-thm] .thm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--thm-s-3);
  padding: var(--thm-s-3) var(--thm-s-4);
  background: rgba(255, 3, 54, 0.10);
  border: 1px solid rgba(255, 3, 54, 0.25);
  border-radius: var(--thm-r-sm);
  color: var(--thm-text);
  font-size: var(--thm-text-sm);
  margin-bottom: var(--thm-s-4);
}
[data-thm] .thm-alert--success {
  background: rgba(87, 194, 138, 0.10);
  border-color: rgba(87, 194, 138, 0.25);
}
[data-thm] .thm-alert__icon { flex-shrink: 0; margin-top: 2px; color: var(--thm-brand); }
[data-thm] .thm-alert--success .thm-alert__icon { color: var(--thm-success); }
[data-thm] .thm-alert__body { flex: 1; line-height: var(--thm-lh-relaxed); }
[data-thm] .thm-alert__close { color: var(--thm-text-tertiary); background: none; border: 0; cursor: pointer; padding: 0; }
[data-thm] .thm-alert__close:hover { color: var(--thm-text); }

/* Form row layout */
[data-thm] .thm-form { display: flex; flex-direction: column; gap: var(--thm-s-5); }
[data-thm] .thm-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--thm-s-3);
  padding-top: var(--thm-s-4);
  border-top: 1px solid var(--thm-border-soft);
  margin-top: var(--thm-s-2);
}

/* Select2 overrides (when Select2 is used) — match dark theme */
[data-thm] .select2-container--default .select2-selection--single,
[data-thm] .select2-container--default .select2-selection--multiple {
  background: var(--thm-bg-input) !important;
  border: 1px solid var(--thm-border-strong) !important;
  border-radius: var(--thm-r-sm) !important;
  min-height: 44px !important;
  color: var(--thm-text) !important;
  padding: 4px 12px !important;
}
[data-thm] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--thm-text) !important;
  line-height: 36px !important;
  padding-inline-start: 0 !important;
}
[data-thm] .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
  height: 32px !important;
}
[data-thm] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--thm-brand) !important;
  color: var(--thm-text-on-brand) !important;
  border: 0 !important;
  border-radius: var(--thm-r-xs) !important;
  padding: 2px 8px !important;
  margin: 3px !important;
  font-size: var(--thm-text-xs) !important;
}
[data-thm] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--thm-text-on-brand) !important;
  margin-inline-end: 4px !important;
}
[data-thm] .select2-dropdown {
  background: var(--thm-bg-overlay) !important;
  border: 1px solid var(--thm-border) !important;
  color: var(--thm-text) !important;
}
[data-thm] .select2-container--default .select2-results__option {
  color: var(--thm-text) !important;
  padding: 8px 12px !important;
}
[data-thm] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--thm-brand) !important;
  color: var(--thm-text-on-brand) !important;
}
[data-thm] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--thm-bg-input) !important;
  border: 1px solid var(--thm-border-strong) !important;
  color: var(--thm-text) !important;
  border-radius: var(--thm-r-sm) !important;
  padding: 6px 10px !important;
}
[data-thm] .select2-container--focus .select2-selection {
  border-color: var(--thm-brand) !important;
}

/* ----------------------------------------------------------------
   TIMELINE (Recent activity)
   ---------------------------------------------------------------- */
[data-thm] .thm-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-5);
}

[data-thm] .thm-timeline__item {
  display: flex;
  gap: var(--thm-s-3);
  position: relative;
  padding-inline-start: var(--thm-s-6);
}

[data-thm] .thm-timeline__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: 22px;
  bottom: -20px;
  width: 1px;
  background: var(--thm-border);
}
[data-thm] .thm-timeline__item:last-child::before { display: none; }

[data-thm] .thm-timeline__dot {
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: var(--thm-r-full);
  background: var(--thm-bg-card);
  border: 2px solid var(--thm-text-tertiary);
}
[data-thm] .thm-timeline__item--brand .thm-timeline__dot {
  border-color: var(--thm-brand);
  background: var(--thm-brand-soft);
}
[data-thm] .thm-timeline__item--success .thm-timeline__dot {
  border-color: var(--thm-success);
}

[data-thm] .thm-timeline__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-1);
}
[data-thm] .thm-timeline__title {
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-medium);
  color: var(--thm-text);
}
[data-thm] .thm-timeline__meta {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
}

/* ----------------------------------------------------------------
   EMPTY STATE
   ---------------------------------------------------------------- */
[data-thm] .thm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--thm-s-16) var(--thm-s-6);
  gap: var(--thm-s-4);
}
[data-thm] .thm-empty__icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--thm-r-full);
  background: var(--thm-bg-elevated);
  color: var(--thm-text-tertiary);
  margin-bottom: var(--thm-s-2);
}
[data-thm] .thm-empty__title {
  font-size: var(--thm-text-lg);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
}
[data-thm] .thm-empty__desc {
  font-size: var(--thm-text-sm);
  color: var(--thm-text-tertiary);
  max-width: 320px;
  line-height: var(--thm-lh-relaxed);
}

/* ----------------------------------------------------------------
   DIVIDER (with optional label in middle)
   ---------------------------------------------------------------- */
[data-thm] .thm-divider {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  color: var(--thm-text-tertiary);
  font-size: var(--thm-text-xs);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
}
[data-thm] .thm-divider::before,
[data-thm] .thm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--thm-border-soft);
}
[data-thm][dir="rtl"] .thm-divider { letter-spacing: 0; text-transform: none; }

/* ----------------------------------------------------------------
   ALERT / NOTICE
   ---------------------------------------------------------------- */
[data-thm] .thm-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--thm-s-3);
  padding: var(--thm-s-4) var(--thm-s-5);
  background: var(--thm-bg-elevated);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  border-inline-start: 3px solid var(--thm-warning);
}
[data-thm] .thm-notice__icon { color: var(--thm-warning); flex-shrink: 0; margin-top: 2px; }
[data-thm] .thm-notice__title { font-size: var(--thm-text-sm); font-weight: var(--thm-fw-semi); color: var(--thm-text); margin-bottom: 2px; }
[data-thm] .thm-notice__desc { font-size: var(--thm-text-xs); color: var(--thm-text-secondary); }
[data-thm] .thm-notice__action { margin-inline-start: auto; flex-shrink: 0; }

[data-thm] .thm-notice--brand   { border-inline-start-color: var(--thm-brand); }
[data-thm] .thm-notice--brand .thm-notice__icon { color: var(--thm-brand); }
[data-thm] .thm-notice--success { border-inline-start-color: var(--thm-success); }
[data-thm] .thm-notice--success .thm-notice__icon { color: var(--thm-success); }
[data-thm] .thm-notice--info { border-inline-start-color: var(--thm-info); }
[data-thm] .thm-notice--info .thm-notice__icon { color: var(--thm-info); }

/* ----------------------------------------------------------------
   ICONS — Lucide-style consistent stroke
   ---------------------------------------------------------------- */
[data-thm] .thm-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-thm] .thm-icon--xs { width: 14px; height: 14px; }
[data-thm] .thm-icon--sm { width: 16px; height: 16px; }
[data-thm] .thm-icon--md { width: 20px; height: 20px; }
[data-thm] .thm-icon--lg { width: 24px; height: 24px; }
[data-thm] .thm-icon--xl { width: 32px; height: 32px; }

/* ----------------------------------------------------------------
   ROW LIST — clean list of items (days, weeks, sections, settings)
   Replaces the small-card grid pattern with a scannable list.
   ---------------------------------------------------------------- */
[data-thm] .thm-rowlist {
  background: var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-thm] .thm-rowlist__item {
  display: flex;
  align-items: center;
  gap: var(--thm-s-4);
  padding: var(--thm-s-4) var(--thm-s-5);
  border-bottom: 1px solid var(--thm-border-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--thm-dur-fast) var(--thm-ease-out),
              padding var(--thm-dur-fast) var(--thm-ease-out);
  position: relative;
}
[data-thm] .thm-rowlist__item:last-child { border-bottom: 0; }
[data-thm] .thm-rowlist__item:hover {
  background: var(--thm-bg-elevated);
  padding-inline-start: calc(var(--thm-s-5) + 4px);
}
[data-thm] .thm-rowlist__item--active {
  background: var(--thm-brand-soft);
}
[data-thm] .thm-rowlist__item--active::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--thm-brand);
}

[data-thm] .thm-rowlist__num {
  width: 44px;
  height: 44px;
  border-radius: var(--thm-r-md);
  background: var(--thm-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-lg);
  font-weight: var(--thm-fw-bold);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--thm-text);
  flex-shrink: 0;
  transition: background var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-rowlist__item:hover .thm-rowlist__num { background: var(--thm-bg-overlay); }
[data-thm] .thm-rowlist__item--active .thm-rowlist__num {
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
}
[data-thm] .thm-rowlist__num--icon {
  background: var(--thm-brand-soft);
  color: var(--thm-brand);
  border: 1px solid rgba(255,3,54,0.20);
}

[data-thm] .thm-rowlist__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-thm] .thm-rowlist__title {
  font-size: var(--thm-text-base);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
  line-height: var(--thm-lh-snug);
}
[data-thm] .thm-rowlist__meta {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--thm-s-2);
}
[data-thm] .thm-rowlist__meta--rest { color: var(--thm-success); }

[data-thm] .thm-rowlist__aside {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  flex-shrink: 0;
}
[data-thm] .thm-rowlist__count {
  font-size: var(--thm-text-sm);
  color: var(--thm-text-secondary);
  font-weight: var(--thm-fw-medium);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
[data-thm] .thm-rowlist__arrow {
  color: var(--thm-text-tertiary);
  flex-shrink: 0;
  transition: transform var(--thm-dur-fast) var(--thm-ease-out), color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-rowlist__item:hover .thm-rowlist__arrow {
  color: var(--thm-text);
  transform: translateX(3px);
}
[data-thm][dir="rtl"] .thm-rowlist__item:hover .thm-rowlist__arrow { transform: translateX(-3px); }

@media (max-width: 480px) {
  [data-thm] .thm-rowlist__item { padding: var(--thm-s-3) var(--thm-s-4); gap: var(--thm-s-3); }
  [data-thm] .thm-rowlist__num { width: 38px; height: 38px; font-size: var(--thm-text-base); }
  [data-thm] .thm-rowlist__count { display: none; }
}

/* ----------------------------------------------------------------
   FEATURE TILE — bigger card for settings/preferences sections
   ---------------------------------------------------------------- */
[data-thm] .thm-tile {
  background: var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  padding: var(--thm-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-4);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--thm-dur-base) var(--thm-ease-out),
              transform var(--thm-dur-base) var(--thm-ease-out),
              background var(--thm-dur-base) var(--thm-ease-out);
  min-height: 168px;
}
[data-thm] .thm-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 100% 0%, rgba(255, 3, 54, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity var(--thm-dur-base) var(--thm-ease-out);
  pointer-events: none;
}
[data-thm] .thm-tile:hover { border-color: rgba(255, 3, 54, 0.30); }
[data-thm] .thm-tile:hover::before { opacity: 1; }
[data-thm] .thm-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--thm-r-md);
  background: var(--thm-brand-soft);
  color: var(--thm-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,3,54,0.16);
  position: relative;
  z-index: 1;
}
[data-thm] .thm-tile__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}
[data-thm] .thm-tile__title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-lg);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
  letter-spacing: var(--thm-tracking-snug);
  margin: 0;
}
[data-thm] .thm-tile__desc {
  font-size: var(--thm-text-sm);
  color: var(--thm-text-tertiary);
  line-height: var(--thm-lh-relaxed);
}
[data-thm] .thm-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-brand);
  margin-top: auto;
  position: relative;
  z-index: 1;
  transition: gap var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-tile:hover .thm-tile__cta { gap: 8px; }

/* ----------------------------------------------------------------
   MEAL / DIET PILL (specific to fitness domain)
   ---------------------------------------------------------------- */
[data-thm] .thm-meal-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-2);
  padding: var(--thm-s-2) var(--thm-s-3);
  background: var(--thm-bg-elevated);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-sm);
  font-size: var(--thm-text-xs);
  color: var(--thm-text-secondary);
  transition: all var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-meal-pill:hover {
  border-color: var(--thm-border-strong);
  color: var(--thm-text);
}
[data-thm] .thm-meal-pill--done {
  color: var(--thm-success);
  border-color: rgba(87,194,138,0.25);
  background: var(--thm-success-soft);
}
[data-thm] .thm-meal-pill--next {
  border-color: var(--thm-brand);
  color: var(--thm-text);
  background: var(--thm-brand-soft);
}
[data-thm] .thm-meal-pill__time {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--thm-fw-semi);
}
/* ============================================================
   layout.css — App Shell (Sidebar + Topbar + Main + Bento Grid)
   ============================================================ */

/* ----------------------------------------------------------------
   APP SHELL
   ---------------------------------------------------------------- */
[data-thm] .thm-app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--thm-bg);
  color: var(--thm-text);
}

[data-thm] .thm-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--thm-sidebar-w);
  transition: margin-inline-start var(--thm-dur-base) var(--thm-ease-out);
}

/* ----------------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------------- */
[data-thm] .thm-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--thm-sidebar-w);
  background: var(--thm-bg-sidebar);
  border-inline-end: 1px solid var(--thm-border-soft);
  display: flex;
  flex-direction: column;
  z-index: var(--thm-z-sidebar);
  transition: width var(--thm-dur-base) var(--thm-ease-out);
}

[data-thm] .thm-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  padding: var(--thm-s-6) var(--thm-s-6);
  height: var(--thm-topbar-h);
  border-bottom: 1px solid var(--thm-border-soft);
}
[data-thm] .thm-sidebar__brand img {
  height: 28px;
  width: auto;
}
[data-thm] .thm-sidebar__brand-name {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-base);
  font-weight: var(--thm-fw-bold);
  letter-spacing: -0.01em;
  color: var(--thm-text);
}

[data-thm] .thm-sidebar__nav {
  flex: 1;
  padding: var(--thm-s-4) var(--thm-s-3);
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-1);
  overflow-y: auto;
}

[data-thm] .thm-sidebar__section {
  margin-top: var(--thm-s-5);
  padding: 0 var(--thm-s-3) var(--thm-s-2);
  font-size: var(--thm-text-2xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
}
[data-thm][dir="rtl"] .thm-sidebar__section { letter-spacing: 0; }

[data-thm] .thm-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  padding: var(--thm-s-3) var(--thm-s-3);
  border-radius: var(--thm-r-sm);
  color: var(--thm-text-secondary);
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-medium);
  cursor: pointer;
  position: relative;
  transition: background var(--thm-dur-fast) var(--thm-ease-out),
              color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-sidebar__item:hover {
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
}

[data-thm] .thm-sidebar__item--active {
  background: var(--thm-brand-soft);
  color: var(--thm-text);
}
[data-thm] .thm-sidebar__item--active::before {
  content: '';
  position: absolute;
  inset-inline-start: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--thm-brand);
  border-radius: 0 var(--thm-r-full) var(--thm-r-full) 0;
}
[data-thm][dir="rtl"] .thm-sidebar__item--active::before {
  inset-inline-start: auto;
  inset-inline-end: -12px;
  border-radius: var(--thm-r-full) 0 0 var(--thm-r-full);
}

[data-thm] .thm-sidebar__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
[data-thm] .thm-sidebar__item--active svg {
  opacity: 1;
  color: var(--thm-brand);
}

[data-thm] .thm-sidebar__item-badge {
  margin-inline-start: auto;
  background: var(--thm-bg-overlay);
  color: var(--thm-text-secondary);
  font-size: var(--thm-text-2xs);
  font-weight: var(--thm-fw-semi);
  padding: 2px 8px;
  border-radius: var(--thm-r-full);
  font-feature-settings: 'tnum' 1;
}
[data-thm] .thm-sidebar__item--active .thm-sidebar__item-badge {
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
}

[data-thm] .thm-sidebar__footer {
  padding: var(--thm-s-4);
  border-top: 1px solid var(--thm-border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
}

/* ----------------------------------------------------------------
   TOPBAR
   ---------------------------------------------------------------- */
[data-thm] .thm-topbar {
  position: sticky;
  top: 0;
  height: var(--thm-topbar-h);
  background: var(--thm-bg);
  border-bottom: 1px solid var(--thm-border-soft);
  z-index: var(--thm-z-topbar);
  display: flex;
  align-items: center;
  padding: 0 var(--thm-content-padding);
  gap: var(--thm-s-4);
}

[data-thm] .thm-topbar__title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-xl);
  font-weight: var(--thm-fw-bold);
  letter-spacing: var(--thm-tracking-snug);
  color: var(--thm-text);
  margin: 0;
}

[data-thm] .thm-topbar__sub {
  font-size: var(--thm-text-sm);
  color: var(--thm-text-tertiary);
  margin-top: 2px;
}

[data-thm] .thm-topbar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--thm-s-2);
}

/* Notification bell w/ dot */
[data-thm] .thm-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--thm-r-sm);
  color: var(--thm-text-secondary);
  transition: background var(--thm-dur-fast) var(--thm-ease-out), color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-bell:hover { background: var(--thm-bg-elevated); color: var(--thm-text); }
[data-thm] .thm-bell__dot {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--thm-r-full);
  background: var(--thm-brand);
  border: 2px solid var(--thm-bg);
}

/* User chip */
[data-thm] .thm-user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-2);
  padding: var(--thm-s-1) var(--thm-s-2);
  border-radius: var(--thm-r-full);
  cursor: pointer;
  transition: background var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-user-chip:hover { background: var(--thm-bg-elevated); }
[data-thm] .thm-user-chip__name {
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-medium);
  color: var(--thm-text);
  padding-inline: var(--thm-s-1);
}

/* ----------------------------------------------------------------
   CONTENT WRAPPER
   ---------------------------------------------------------------- */
[data-thm] .thm-content {
  flex: 1;
  padding: var(--thm-s-8) var(--thm-content-padding);
  max-width: var(--thm-content-max);
  margin-inline: auto;
  width: 100%;
}

[data-thm] .thm-page-header {
  margin-bottom: var(--thm-s-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--thm-s-4);
}

[data-thm] .thm-page-title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-3xl);
  font-weight: var(--thm-fw-bold);
  letter-spacing: var(--thm-tracking-tight);
  color: var(--thm-text);
  margin: 0 0 var(--thm-s-2);
}

[data-thm] .thm-page-lead {
  font-size: var(--thm-text-base);
  color: var(--thm-text-tertiary);
  max-width: 560px;
}

[data-thm] .thm-section {
  margin-bottom: var(--thm-s-10);
}
[data-thm] .thm-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--thm-s-5);
  gap: var(--thm-s-3);
}
[data-thm] .thm-section__title {
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
  color: var(--thm-text-tertiary);
  margin: 0;
}
[data-thm][dir="rtl"] .thm-section__title { letter-spacing: 0; text-transform: none; font-weight: var(--thm-fw-bold); color: var(--thm-text-secondary); font-size: var(--thm-text-sm); }
[data-thm] .thm-section__link {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-secondary);
  transition: color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-section__link:hover { color: var(--thm-text); }

/* ----------------------------------------------------------------
   BENTO GRID (12-col intentional grid)
   ---------------------------------------------------------------- */
[data-thm] .thm-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--thm-s-6);
}
[data-thm] .thm-bento--tight { gap: var(--thm-s-4); }

/* Column span utilities (used directly on .thm-card) */
[data-thm] .thm-col-3  { grid-column: span 3; }
[data-thm] .thm-col-4  { grid-column: span 4; }
[data-thm] .thm-col-5  { grid-column: span 5; }
[data-thm] .thm-col-6  { grid-column: span 6; }
[data-thm] .thm-col-7  { grid-column: span 7; }
[data-thm] .thm-col-8  { grid-column: span 8; }
[data-thm] .thm-col-9  { grid-column: span 9; }
[data-thm] .thm-col-12 { grid-column: span 12; }

/* Row spans for tall cards */
[data-thm] .thm-row-2 { grid-row: span 2; }

/* ----------------------------------------------------------------
   BOTTOM NAV (mobile only)
   ---------------------------------------------------------------- */
[data-thm] .thm-bottomnav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: var(--thm-bottomnav-h);
  background: var(--thm-bg-sidebar);
  border-top: 1px solid var(--thm-border);
  z-index: var(--thm-z-bottomnav);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-thm] .thm-bottomnav__list {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: stretch;
}
[data-thm] .thm-bottomnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--thm-text-tertiary);
  font-size: 10px;
  font-weight: var(--thm-fw-semi);
  text-decoration: none;
  position: relative;
}
[data-thm] .thm-bottomnav__item svg { width: 22px; height: 22px; }
[data-thm] .thm-bottomnav__item--active { color: var(--thm-brand); }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1280px) {
  [data-thm] { --thm-content-padding: 24px; }
}

/* ---- Tablet (1024-1280): keep sidebar collapsed, allow 2 cols ---- */
@media (max-width: 1280px) and (min-width: 1024px) {
  [data-thm] .thm-col-3 { grid-column: span 4; }
  [data-thm] .thm-col-4 { grid-column: span 6; }
}

/* ---- Small laptop / large tablet (≤ 1023px): collapse sidebar to icons ---- */
@media (max-width: 1023px) and (min-width: 769px) {
  [data-thm] {
    --thm-sidebar-w: 72px;
    --thm-content-padding: 24px;
  }
  [data-thm] .thm-sidebar__brand-name,
  [data-thm] .thm-sidebar__item span:not(.thm-sidebar__item-badge),
  [data-thm] .thm-sidebar__section {
    display: none;
  }
  [data-thm] .thm-sidebar__brand { justify-content: center; padding: var(--thm-s-4) 0; }
  [data-thm] .thm-sidebar__item { justify-content: center; padding: var(--thm-s-3) 0; }
  [data-thm] .thm-sidebar__item--active::before { display: none; }
  [data-thm] .thm-sidebar__item--active { background: var(--thm-brand); color: var(--thm-text-on-brand); }
  [data-thm] .thm-sidebar__item--active svg { color: var(--thm-text-on-brand); }
  /* 2-column layout: small cards pair, big cards full */
  [data-thm] .thm-col-3, [data-thm] .thm-col-4, [data-thm] .thm-col-5 { grid-column: span 6; }
  [data-thm] .thm-col-6, [data-thm] .thm-col-7, [data-thm] .thm-col-8, [data-thm] .thm-col-9 { grid-column: span 12; }
}

/* ---- Phone (≤ 768px): single column everything + bottom nav ---- */
@media (max-width: 768px) {
  [data-thm] {
    --thm-content-padding: 16px;
    --thm-topbar-h: 60px;
  }
  [data-thm] .thm-sidebar { display: none; }
  [data-thm] .thm-main { margin-inline-start: 0; }
  [data-thm] .thm-bottomnav { display: block; }
  [data-thm] .thm-content {
    padding: var(--thm-s-5) var(--thm-content-padding) calc(var(--thm-bottomnav-h) + var(--thm-s-6));
  }
  [data-thm] .thm-bento { gap: var(--thm-s-4); grid-template-columns: 1fr; }
  /* Every card is full width on phone */
  [data-thm] .thm-col-3,
  [data-thm] .thm-col-4,
  [data-thm] .thm-col-5,
  [data-thm] .thm-col-6,
  [data-thm] .thm-col-7,
  [data-thm] .thm-col-8,
  [data-thm] .thm-col-9,
  [data-thm] .thm-col-12 { grid-column: 1 / -1; }
  [data-thm] .thm-card__body { padding: var(--thm-s-5); }
  [data-thm] .thm-card__body--large { padding: var(--thm-s-6); }
  [data-thm] .thm-card__header { padding: var(--thm-s-4) var(--thm-s-5); }
  [data-thm] .thm-page-title { font-size: var(--thm-text-2xl); }
  [data-thm] .thm-stat__value--display { font-size: var(--thm-text-5xl); }
  [data-thm] .thm-stat__value--xl { font-size: var(--thm-text-4xl); }
  [data-thm] .thm-stat__value { font-size: var(--thm-text-3xl); }
  /* Topbar: reduce padding */
  [data-thm] .thm-topbar { gap: var(--thm-s-2); padding: 0 var(--thm-s-4); }
  [data-thm] .thm-topbar__title { font-size: var(--thm-text-lg); }
  [data-thm] .thm-topbar__sub { font-size: var(--thm-text-xs); }
  /* Hide user name on small (avatar only) */
  [data-thm] .thm-user-chip__name { display: none; }
  [data-thm] .thm-user-chip { padding: 4px; }
  /* Theme toggle smaller */
  [data-thm] .thm-theme-toggle, [data-thm] .thm-bell { width: 38px; height: 38px; }
}

/* ---- Small phone (≤ 480px): tighter spacing, smaller hero ---- */
@media (max-width: 480px) {
  [data-thm] {
    --thm-content-padding: 14px;
  }
  [data-thm] .thm-content { padding-top: var(--thm-s-4); }
  [data-thm] .thm-section { margin-bottom: var(--thm-s-7); }
  [data-thm] .thm-bento { gap: var(--thm-s-3); }
  [data-thm] .thm-card__body { padding: var(--thm-s-4); }
  [data-thm] .thm-card__header { padding: var(--thm-s-3) var(--thm-s-4); }
  [data-thm] .thm-hero { padding: var(--thm-s-5); }
  [data-thm] .thm-hero__name { font-size: var(--thm-text-2xl); }
  [data-thm] .thm-hero__day { font-size: 44px; }
  /* Macros: keep 2 cols but tighter */
  [data-thm] .thm-macros { gap: var(--thm-s-3); }
  [data-thm] .thm-macro__val { font-size: var(--thm-text-xl); }
}
/* ============================================================
   motion.css — Entrance animations + Modal + Toast + Theme toggle
   All animations respect prefers-reduced-motion.
   ============================================================ */

/* ----------------------------------------------------------------
   ENTRANCE ANIMATION — fade-up stagger
   Applied to elements with data-anim="in" — they start invisible,
   then JS adds the .is-visible class via IntersectionObserver.
   ---------------------------------------------------------------- */
/* Default: visible (no-JS fallback). JS adds .thm-anim-ready then hides until IO triggers */
[data-thm] [data-anim="in"] {
  transition: opacity 480ms var(--thm-ease-out),
              transform 480ms var(--thm-ease-out);
  will-change: opacity, transform;
}
[data-thm].thm-anim-ready [data-anim="in"]:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}
[data-thm] [data-anim="in"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — supports up to 12 children */
[data-thm] [data-anim="in"][data-anim-delay="1"]  { transition-delay: 60ms; }
[data-thm] [data-anim="in"][data-anim-delay="2"]  { transition-delay: 120ms; }
[data-thm] [data-anim="in"][data-anim-delay="3"]  { transition-delay: 180ms; }
[data-thm] [data-anim="in"][data-anim-delay="4"]  { transition-delay: 240ms; }
[data-thm] [data-anim="in"][data-anim-delay="5"]  { transition-delay: 300ms; }
[data-thm] [data-anim="in"][data-anim-delay="6"]  { transition-delay: 360ms; }
[data-thm] [data-anim="in"][data-anim-delay="7"]  { transition-delay: 420ms; }
[data-thm] [data-anim="in"][data-anim-delay="8"]  { transition-delay: 480ms; }

/* Progress bars — animate width via JS-set --thm-bar-target */
/* Default: show at full width (no-JS fallback) */
[data-thm] .thm-progress__bar[data-anim-bar] {
  transition: width 1300ms var(--thm-ease-out);
}
/* Stagger across siblings (macros row) */
[data-thm] .thm-macros .thm-macro:nth-child(1) .thm-progress__bar[data-anim-bar] { transition-delay: 0ms; }
[data-thm] .thm-macros .thm-macro:nth-child(2) .thm-progress__bar[data-anim-bar] { transition-delay: 120ms; }
[data-thm] .thm-macros .thm-macro:nth-child(3) .thm-progress__bar[data-anim-bar] { transition-delay: 240ms; }
[data-thm] .thm-macros .thm-macro:nth-child(4) .thm-progress__bar[data-anim-bar] { transition-delay: 360ms; }
/* When JS marks page as ready, reset to 0 BEFORE the animation triggers */
[data-thm].thm-anim-ready .thm-progress__bar[data-anim-bar]:not(.is-animated) {
  width: 0 !important;
}
[data-thm] .thm-progress__bar[data-anim-bar].is-animated {
  width: var(--thm-bar-target, 0) !important;
}

/* ----------------------------------------------------------------
   THEME SWITCH — smooth cross-fade between dark/light
   When body has .thm-is-switching, ALL surfaces, text, borders
   smoothly interpolate to the new theme values.
   ---------------------------------------------------------------- */
[data-thm].thm-is-switching,
[data-thm].thm-is-switching *,
[data-thm].thm-is-switching *::before,
[data-thm].thm-is-switching *::after {
  transition:
    background-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 420ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 420ms cubic-bezier(0.4, 0, 0.2, 1)
    !important;
  transition-delay: 0ms !important;
}

/* Theme-toggle icon swap: smooth rotate + fade between sun/moon */
[data-thm] .thm-theme-toggle__moon,
[data-thm] .thm-theme-toggle__sun {
  display: inline-flex;
  transition: transform 320ms var(--thm-ease-spring),
              opacity 220ms var(--thm-ease-out);
}
[data-thm="v2"]       .thm-theme-toggle__sun  { display: none; }
[data-thm="v2-light"] .thm-theme-toggle__moon { display: none; }
[data-thm="v2"]       .thm-theme-toggle__moon { transform: rotate(0deg); }
[data-thm="v2-light"] .thm-theme-toggle__sun  { transform: rotate(0deg); }

/* Counter targets — JS handles the increment; CSS just ensures stable layout */
[data-thm] [data-anim-counter] {
  display: inline-block;
  min-width: 1ch;
  text-align: end;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* SVG path drawing (chart line) — JS sets stroke-dasharray via getTotalLength */
[data-thm] [data-anim-draw] {
  transition: stroke-dashoffset 1400ms var(--thm-ease-out);
}

/* SVG area fill — fades in after line draws */
[data-thm] [data-anim-fade] {
  transition: opacity 800ms var(--thm-ease-out) 600ms;
}
[data-thm].thm-anim-ready [data-anim-fade]:not(.is-faded) {
  opacity: 0;
}
[data-thm] [data-anim-fade].is-faded {
  opacity: 1;
}

/* Ring progress (set via JS via stroke-dashoffset) */
[data-thm] .thm-ring [data-anim-ring] {
  transition: stroke-dashoffset 1000ms var(--thm-ease-out);
}

/* ----------------------------------------------------------------
   THEME TOGGLE BUTTON
   ---------------------------------------------------------------- */
[data-thm] .thm-theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--thm-r-sm);
  color: var(--thm-text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--thm-dur-fast) var(--thm-ease-out),
              color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-theme-toggle:hover {
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
}
[data-thm] .thm-theme-toggle .thm-icon { transition: transform 320ms var(--thm-ease-out); }
[data-thm] .thm-theme-toggle:hover .thm-icon { transform: rotate(20deg); }

/* Show moon in dark theme, sun in light theme */
[data-thm="v2"]       .thm-theme-toggle__sun  { display: none; }
[data-thm="v2-light"] .thm-theme-toggle__moon { display: none; }

/* ----------------------------------------------------------------
   MODAL
   ---------------------------------------------------------------- */
[data-thm] .thm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--thm-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--thm-s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--thm-dur-slow) var(--thm-ease-out),
              visibility var(--thm-dur-slow) var(--thm-ease-out);
}
[data-thm="v2-light"] .thm-modal-backdrop {
  background: rgba(26, 26, 31, 0.50);
}
[data-thm] .thm-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

[data-thm] .thm-modal {
  background: var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-lg);
  box-shadow: var(--thm-shadow-lg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--thm-dur-slow) var(--thm-ease-spring);
}
[data-thm] .thm-modal-backdrop.is-open .thm-modal {
  transform: translateY(0) scale(1);
}

[data-thm] .thm-modal--video {
  max-width: 920px;
  background: #000;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-thm] .thm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--thm-s-4) var(--thm-s-5);
  border-bottom: 1px solid var(--thm-border-soft);
  gap: var(--thm-s-3);
}
[data-thm] .thm-modal--video .thm-modal__header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-thm] .thm-modal__title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-lg);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
  margin: 0;
}
[data-thm] .thm-modal--video .thm-modal__title { color: #F5F5F5; }
[data-thm] .thm-modal__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--thm-r-sm);
  color: var(--thm-text-tertiary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--thm-dur-fast) var(--thm-ease-out),
              color var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-modal__close:hover {
  background: var(--thm-bg-elevated);
  color: var(--thm-text);
}
[data-thm] .thm-modal--video .thm-modal__close { color: rgba(255, 255, 255, 0.65); }
[data-thm] .thm-modal--video .thm-modal__close:hover { background: rgba(255, 255, 255, 0.10); color: #FFF; }

[data-thm] .thm-modal__body {
  padding: var(--thm-s-5);
  overflow-y: auto;
}
[data-thm] .thm-modal--video .thm-modal__body { padding: 0; }
[data-thm] .thm-modal--video video {
  width: 100%;
  height: auto;
  max-height: 75vh;
  display: block;
  background: #000;
}

[data-thm] .thm-modal__footer {
  padding: var(--thm-s-4) var(--thm-s-5);
  border-top: 1px solid var(--thm-border-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--thm-s-2);
}

/* ----------------------------------------------------------------
   TOAST (for hydration logging feedback)
   ---------------------------------------------------------------- */
[data-thm] .thm-toast-region {
  position: fixed;
  inset-block-end: var(--thm-s-6);
  inset-inline-end: var(--thm-s-6);
  z-index: var(--thm-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
  pointer-events: none;
}
@media (max-width: 768px) {
  [data-thm] .thm-toast-region {
    inset-inline: var(--thm-s-4);
    inset-block-end: calc(var(--thm-bottomnav-h) + var(--thm-s-3));
    align-items: stretch;
  }
}

[data-thm] .thm-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--thm-s-3);
  padding: var(--thm-s-3) var(--thm-s-4);
  background: var(--thm-bg-overlay);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  box-shadow: var(--thm-shadow-md);
  color: var(--thm-text);
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-medium);
  min-width: 240px;
  max-width: 360px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--thm-dur-base) var(--thm-ease-out),
              transform var(--thm-dur-base) var(--thm-ease-out);
}
[data-thm] .thm-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-thm] .thm-toast--success .thm-icon { color: var(--thm-success); }
[data-thm] .thm-toast--brand   .thm-icon { color: var(--thm-brand); }

/* ----------------------------------------------------------------
   PREFERS-REDUCED-MOTION — disable all entrance & counter animations
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-thm] [data-anim="in"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-thm] .thm-progress__bar[data-anim-bar] {
    transition: none !important;
  }
  [data-thm] [data-anim-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  [data-thm] [data-anim-fade] {
    opacity: 1 !important;
    transition: none !important;
  }
  [data-thm] .thm-modal-backdrop,
  [data-thm] .thm-modal {
    transition: none !important;
  }
}
/* ----------------------------------------------------------------
   Page-specific helpers (kept small to avoid bloat)
   ---------------------------------------------------------------- */

/* TODAY — Hero subscription card */
[data-thm] .thm-hero {
  display: flex;
  align-items: stretch;
  gap: var(--thm-s-8);
  padding: var(--thm-s-8);
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255, 3, 54, 0.10), transparent 60%),
    var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-lg);
  margin-bottom: var(--thm-s-8);
  position: relative;
  overflow: hidden;
}

[data-thm] .thm-hero__primary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-3);
  min-width: 0;
}

[data-thm] .thm-hero__greeting {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  font-size: var(--thm-text-lg);
  color: var(--thm-text-secondary);
  font-weight: var(--thm-fw-medium);
}

[data-thm] .thm-hero__name {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-4xl);
  font-weight: var(--thm-fw-extra);
  letter-spacing: var(--thm-tracking-tight);
  line-height: var(--thm-lh-tight);
  color: var(--thm-text);
  margin: 0;
}

[data-thm] .thm-hero__sub {
  font-size: var(--thm-text-base);
  color: var(--thm-text-secondary);
  max-width: 480px;
  line-height: var(--thm-lh-relaxed);
}

[data-thm] .thm-hero__progress {
  margin-top: var(--thm-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
}
[data-thm] .thm-hero__progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
}
[data-thm][dir="rtl"] .thm-hero__progress-meta { letter-spacing: 0; text-transform: none; }

[data-thm] .thm-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--thm-s-4);
  padding-inline-start: var(--thm-s-8);
  border-inline-start: 1px solid var(--thm-border-soft);
  text-align: end;
}
[data-thm] .thm-hero__day {
  font-family: var(--thm-font-display);
  font-size: 72px;
  font-weight: var(--thm-fw-extra);
  letter-spacing: var(--thm-tracking-tight);
  line-height: 1;
  color: var(--thm-text);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
[data-thm] .thm-hero__day-label {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
}
[data-thm][dir="rtl"] .thm-hero__day-label { letter-spacing: 0; text-transform: none; }

/* MACROS row (4 small rings inline) */
[data-thm] .thm-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--thm-s-4);
}
[data-thm] .thm-macro {
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-2);
}
[data-thm] .thm-macro__top {
  display: flex;
  align-items: baseline;
  gap: var(--thm-s-1);
}
[data-thm] .thm-macro__val {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-2xl);
  font-weight: var(--thm-fw-bold);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--thm-text);
}
[data-thm] .thm-macro__target {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
}
[data-thm] .thm-macro__label {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
  letter-spacing: var(--thm-tracking-wider);
  text-transform: uppercase;
}
[data-thm][dir="rtl"] .thm-macro__label { letter-spacing: 0; text-transform: none; }

/* Chart container */
[data-thm] .thm-chart {
  position: relative;
  width: 100%;
  height: var(--thm-chart-h, 200px);
}

/* Subtle list w/ chevron */
[data-thm] .thm-list { display: flex; flex-direction: column; }
[data-thm] .thm-list__item {
  display: flex;
  align-items: center;
  gap: var(--thm-s-3);
  padding: var(--thm-s-3) 0;
  border-bottom: 1px solid var(--thm-border-soft);
  cursor: pointer;
  transition: padding-inline-start var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-list__item:hover { padding-inline-start: var(--thm-s-1); }
[data-thm] .thm-list__item:last-child { border-bottom: 0; }
[data-thm] .thm-list__item-content { flex: 1; min-width: 0; }
[data-thm] .thm-list__item-title { font-size: var(--thm-text-sm); font-weight: var(--thm-fw-medium); color: var(--thm-text); }
[data-thm] .thm-list__item-meta  { font-size: var(--thm-text-xs); color: var(--thm-text-tertiary); margin-top: 2px; }
[data-thm] .thm-list__item-arrow { color: var(--thm-text-tertiary); flex-shrink: 0; transition: transform var(--thm-dur-fast) var(--thm-ease-out); }
[data-thm] .thm-list__item:hover .thm-list__item-arrow { transform: translateX(2px); color: var(--thm-text); }
[data-thm][dir="rtl"] .thm-list__item:hover .thm-list__item-arrow { transform: translateX(-2px); }

/* ============================================================
   HYDRATION CARD — dedicated layout (replaces inline styles)
   Desktop: horizontal (ring | content). Mobile: stack vertical.
   ============================================================ */
[data-thm] .thm-hydration {
  display: flex;
  align-items: center;
  gap: var(--thm-s-6);
}
[data-thm] .thm-hydration__ring {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-thm] .thm-hydration__ring svg {
  width: 100%;
  height: 100%;
  display: block;
}
[data-thm] .thm-hydration__ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-bold);
  color: var(--thm-text);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  pointer-events: none;
}
[data-thm] .thm-hydration__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-1);
}
[data-thm] .thm-hydration__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}
[data-thm] .thm-hydration__actions {
  display: flex;
  gap: var(--thm-s-2);
  margin-top: var(--thm-s-3);
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Hero stacks vertically */
  [data-thm] .thm-hero {
    flex-direction: column;
    padding: var(--thm-s-6);
    gap: var(--thm-s-5);
  }
  [data-thm] .thm-hero__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: 0;
    padding-top: var(--thm-s-5);
    border-inline-start: 0;
    border-top: 1px solid var(--thm-border-soft);
    text-align: start;
  }
  [data-thm] .thm-hero__name { font-size: var(--thm-text-3xl); }
  [data-thm] .thm-hero__day { font-size: 56px; }
  /* Macros 2 columns */
  [data-thm] .thm-macros { grid-template-columns: repeat(2, 1fr); }
  /* Hydration: keep horizontal but slightly smaller ring */
  [data-thm] .thm-hydration { gap: var(--thm-s-4); }
  [data-thm] .thm-hydration__ring { width: 84px; height: 84px; }
  [data-thm] .thm-hydration__ring-label { font-size: var(--thm-text-xs); }
}

/* ============================================================
   RESPONSIVE — Small phone (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  [data-thm] .thm-hero { padding: var(--thm-s-5); }
  [data-thm] .thm-hero__name { font-size: var(--thm-text-2xl); }
  [data-thm] .thm-hero__day { font-size: 44px; }
  [data-thm] .thm-hero__sub { font-size: var(--thm-text-sm); }
  [data-thm] .thm-macros { gap: var(--thm-s-3); }
  [data-thm] .thm-macro__val { font-size: var(--thm-text-xl); }
  [data-thm] .thm-macro__target { font-size: 10px; }
  /* Hydration: keep horizontal but tighter */
  [data-thm] .thm-hydration { gap: var(--thm-s-3); }
  [data-thm] .thm-hydration__ring { width: 76px; height: 76px; }
}

/* ============================================================
   AUTH LAYOUT — split panel (brand on left, form on right)
   ============================================================ */
[data-thm] .thm-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--thm-bg);
}
[data-thm] .thm-auth__brand-panel {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 3, 54, 0.16), transparent 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(255, 3, 54, 0.08), transparent 60%),
    var(--thm-bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--thm-s-16) var(--thm-s-10);
  border-inline-end: 1px solid var(--thm-border-soft);
  position: relative;
  overflow: hidden;
}
[data-thm] .thm-auth__brand-inner { max-width: 440px; width: 100%; }
[data-thm] .thm-auth__form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--thm-s-10) var(--thm-s-8);
}
[data-thm] .thm-auth__form-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--thm-s-6);
}
[data-thm] .thm-auth__mobile-brand { display: none; justify-content: center; margin-bottom: var(--thm-s-4); }
[data-thm] .thm-auth__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--thm-s-3);
  margin-top: var(--thm-s-4);
  padding-top: var(--thm-s-5);
  border-top: 1px solid var(--thm-border-soft);
}
[data-thm] .thm-auth__title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-3xl);
  font-weight: var(--thm-fw-bold);
  letter-spacing: var(--thm-tracking-tight);
  margin: 0;
  color: var(--thm-text);
}
[data-thm] .thm-auth__subtitle {
  font-size: var(--thm-text-sm);
  color: var(--thm-text-tertiary);
  margin: 4px 0 0;
}
@media (max-width: 900px) {
  [data-thm] .thm-auth { grid-template-columns: 1fr; }
  [data-thm] .thm-auth__brand-panel { display: none; }
  [data-thm] .thm-auth__mobile-brand { display: flex; }
  [data-thm] .thm-auth__form-panel { padding: var(--thm-s-6) var(--thm-s-5); }
}

/* ============================================================
   STEPS WIZARD LAYOUT
   ============================================================ */
[data-thm] .thm-steps {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--thm-bg);
  display: flex;
  flex-direction: column;
}
[data-thm] .thm-steps__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--thm-s-5) var(--thm-s-8);
  border-bottom: 1px solid var(--thm-border-soft);
  background: var(--thm-bg-sidebar);
}
[data-thm] .thm-steps__counter { color: var(--thm-text-tertiary); }
[data-thm] .thm-steps__progress {
  padding: var(--thm-s-5) var(--thm-s-8);
  border-bottom: 1px solid var(--thm-border-soft);
  background: var(--thm-bg);
}
[data-thm] .thm-steps__bar {
  width: 100%;
  height: 6px;
  background: var(--thm-border);
  border-radius: var(--thm-r-full);
  overflow: hidden;
  margin-bottom: var(--thm-s-4);
}
[data-thm] .thm-steps__bar-fill {
  height: 100%;
  background: var(--thm-brand);
  border-radius: var(--thm-r-full);
  transition: width 600ms var(--thm-ease-out);
}
[data-thm] .thm-steps__pills {
  display: flex;
  gap: var(--thm-s-2);
  flex-wrap: wrap;
  justify-content: center;
}
[data-thm] .thm-steps__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--thm-r-full);
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-medium);
  background: var(--thm-bg-elevated);
  color: var(--thm-text-tertiary);
  border: 1px solid var(--thm-border);
}
[data-thm] .thm-steps__pill--done {
  background: var(--thm-success-soft);
  color: var(--thm-success);
  border-color: rgba(87, 194, 138, 0.25);
}
[data-thm] .thm-steps__pill--current {
  background: var(--thm-brand-soft);
  color: var(--thm-brand);
  border-color: rgba(255, 3, 54, 0.25);
  font-weight: var(--thm-fw-semi);
}
[data-thm] .thm-steps__content {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--thm-s-8) var(--thm-s-5);
}
[data-thm] .thm-steps__inner {
  width: 100%;
  max-width: 640px;
}
@media (max-width: 640px) {
  [data-thm] .thm-steps__header { padding: var(--thm-s-4) var(--thm-s-5); }
  [data-thm] .thm-steps__progress { padding: var(--thm-s-4) var(--thm-s-5); }
  [data-thm] .thm-steps__pill-label { display: none; }
}

/* ============================================================
   RADIO CARD GROUP (for yes/no questions in Steps wizard)
   ============================================================ */
[data-thm] .thm-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--thm-s-3);
}
[data-thm] .thm-radio-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--thm-s-4) var(--thm-s-5);
  border: 1.5px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  background: var(--thm-bg-input);
  cursor: pointer;
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text-secondary);
  transition: border-color var(--thm-dur-fast) var(--thm-ease-out),
              color var(--thm-dur-fast) var(--thm-ease-out),
              background var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-radio-card:hover {
  border-color: var(--thm-border-strong);
  color: var(--thm-text);
}
[data-thm] .thm-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-thm] .thm-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--thm-brand);
  color: var(--thm-text);
  background: var(--thm-brand-soft);
}

/* ============================================================
   NOTIFICATION DROPDOWN — bell click opens this panel
   ============================================================ */
[data-thm] .thm-notif { position: relative; }
[data-thm] .thm-bell { position: relative; cursor: pointer; }
[data-thm] .thm-bell__count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--thm-r-full);
  background: var(--thm-brand);
  color: var(--thm-text-on-brand);
  font-size: 10px;
  font-weight: var(--thm-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--thm-bg);
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
[data-thm] .thm-bell__count[hidden] { display: none; }
[data-thm] .thm-bell__dot[hidden]   { display: none; }
/* When count is showing, hide the plain dot */
[data-thm] .thm-bell:has(.thm-bell__count:not([hidden])) .thm-bell__dot { display: none; }

[data-thm] .thm-notif__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--thm-bg-card);
  border: 1px solid var(--thm-border);
  border-radius: var(--thm-r-md);
  box-shadow: var(--thm-shadow-lg);
  z-index: var(--thm-z-popover);
  display: flex;
  flex-direction: column;
  max-height: 480px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms var(--thm-ease-out),
              visibility 200ms var(--thm-ease-out),
              transform 200ms var(--thm-ease-out);
  overflow: hidden;
}
[data-thm] .thm-notif.is-open .thm-notif__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
[data-thm] .thm-notif__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--thm-s-3);
  padding: var(--thm-s-4) var(--thm-s-5);
  border-bottom: 1px solid var(--thm-border-soft);
}
[data-thm] .thm-notif__title {
  font-family: var(--thm-font-display);
  font-size: var(--thm-text-base);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
}
[data-thm] .thm-notif__sub {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-tertiary);
  margin-top: 2px;
}
[data-thm] .thm-notif__mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--thm-brand);
  font-size: var(--thm-text-xs);
  font-weight: var(--thm-fw-semi);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--thm-r-xs);
  transition: background var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-notif__mark:hover { background: var(--thm-brand-soft); }
[data-thm] .thm-notif__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
[data-thm] .thm-notif__item {
  display: flex;
  gap: var(--thm-s-3);
  padding: var(--thm-s-3) var(--thm-s-4);
  border-radius: var(--thm-r-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--thm-dur-fast) var(--thm-ease-out);
  position: relative;
}
[data-thm] .thm-notif__item:hover { background: var(--thm-bg-elevated); }
[data-thm] .thm-notif__item--unread { background: var(--thm-brand-ghost); }
[data-thm] .thm-notif__item--unread::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: var(--thm-r-full);
  background: var(--thm-brand);
}
[data-thm] .thm-notif__icon {
  width: 36px; height: 36px;
  border-radius: var(--thm-r-full);
  background: var(--thm-brand-soft);
  color: var(--thm-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-thm] .thm-notif__content { flex: 1; min-width: 0; }
[data-thm] .thm-notif__item-title {
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-text);
  line-height: var(--thm-lh-snug);
}
[data-thm] .thm-notif__item-body {
  font-size: var(--thm-text-xs);
  color: var(--thm-text-secondary);
  line-height: var(--thm-lh-snug);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-thm] .thm-notif__item-time {
  font-size: 11px;
  color: var(--thm-text-tertiary);
  margin-top: 4px;
}
[data-thm] .thm-notif__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--thm-s-3);
  border-top: 1px solid var(--thm-border-soft);
  font-size: var(--thm-text-sm);
  font-weight: var(--thm-fw-semi);
  color: var(--thm-brand);
  text-decoration: none;
  transition: background var(--thm-dur-fast) var(--thm-ease-out);
}
[data-thm] .thm-notif__footer:hover { background: var(--thm-brand-soft); }

@media (max-width: 480px) {
  [data-thm] .thm-notif__panel {
    position: fixed;
    top: var(--thm-topbar-h);
    inset-inline: 8px;
    width: auto;
    max-height: calc(100vh - var(--thm-topbar-h) - 16px);
  }
}