/* ===== from main.css lines 1-77 ===== */
    :root {
      --bg: #000000;
      --panel: #0a1322;
      --panel-soft: #142238;
      --hover: #101b30;
      --line: rgba(255, 255, 255, 0.06);
      --line-hover: rgba(255, 255, 255, 0.12);
      --accent: #5a62eb;
      --accent-hover: #8288fe;
      --accent-dim: #1f2363;
      --accent-rgb: 90, 98, 235;
      --accent-hover-rgb: 130, 136, 254;
      --accent-ghost: rgba(var(--accent-rgb), 0.14);
      --header-control-border: rgba(255, 255, 255, 0.28);
      --header-control-border-hover: rgba(255, 255, 255, 0.52);
      --text: #ffffff;
      --muted: #7c8aa2;
      --badge-bg: #1a2740;
      --badge-text: #7c8aa2;
      --bar-color: #3a4560;
      --bar-fill: #8288fe;
      --shadow-bottom: #0b142a;
      --danger: #F46E6E;
      --success: #60D26A;
      --yellow: #FFF599;
      --radius: 16px;
      --radius-sm: 12px;
      --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      --control-pill-height: 44px;
      --control-pill-icon-size: 18px;
      --show-card-action-size: 40px;
      --show-card-action-gap: 8px;
      --detail-section-heading-size: 1.1rem;
      --z-route-surface: 90;
      --z-app-chrome: 200;
      --z-popover: 300;
      --z-modal: 500;
      --z-nested-modal: 600;
      --z-blocking: 1000;
      --z-player-fullscreen: 9999;

      /* Show-card grid: largeur minimale d'une card. Desktop est redefini plus bas via media query.
         Les grids utilisent repeat(auto-fill, minmax(var(--card-min), 1fr)) pour garantir une
         taille constante ; l'excedent est renvoye a la ligne automatiquement. */
      --card-min: 140px;
      --card-gap-row: 18px;
      --card-gap-col: 14px;

      /* Typography tokens (mobile defaults) */
      --fs-2xs: 0.72rem;
      --fs-xs:  0.8125rem;
      --fs-sm:  0.9rem;
      --fs-base: 1rem;
      --fs-md:  1.0625rem;
      --fs-lg:  1.2rem;
      --fs-xl:  1.4rem;
      --fs-2xl: 1.7rem;

      --fw-regular: 400;
      --fw-medium:  500;
      --fw-semi:    600;
      --fw-bold:    700;
      --fw-black:   700;
      --fw-heavy:   700;

      --lh-tight: 1.2;
      --lh-snug:  1.35;
      --lh-base:  1.55;
      --lh-loose: 1.7;

      --text-90: rgba(255, 255, 255, 0.92);
      --text-80: rgba(255, 255, 255, 0.78);
      --text-60: rgba(255, 255, 255, 0.6);
      --text-50: rgba(255, 255, 255, 0.5);
    }
    @media (min-width: 768px) {
      :root {
        --card-min: 220px;
        --card-gap-row: 28px;
        --card-gap-col: 32px;

        --fs-xs:  0.875rem;
        --fs-sm:  0.9375rem;
        --fs-base: 1.0625rem;
        --fs-md:  1.15rem;
        --fs-lg:  1.3rem;
        --fs-xl:  1.55rem;
        --fs-2xl: 1.9rem;
      }
    }

    * { box-sizing: border-box; }