@layer tokens, base, components, pages;

/* Entry point for your PostCSS build */

/*
 * Decklist Design System
 *
 * A "subtle gaming" aesthetic: muted UI, vibrant content.
 * Supports light/dark mode via data-theme attribute or system preference.
 *
 * Open Props tokens are still available for utilities:
 * https://open-props.style/
 */

/* Cascade layer ordering — later layers win regardless of specificity */

/* Design tokens - must be first */

@layer tokens{

/*
 * Design Tokens
 *
 * Decklist design system foundation.
 * Inspired by: Moxfield, LimitlessTCG, Raycast, Obsidian
 *
 * Philosophy: Muted UI, vibrant content. The interface recedes
 * so cards and data become the focus.
 *
 * Colors use OKLCH for perceptual uniformity.
 * Format: oklch(lightness chroma hue)
 * Brand hue: 250 (blue)
 */

/* ============================================
   COLOR PALETTE
   ============================================ */

:root {
  /* Primary - A refined blue (hue 250) */
  --primary-50: oklch(97% 0.01 250);
  --primary-100: oklch(94% 0.02 250);
  --primary-200: oklch(88% 0.05 250);
  --primary-300: oklch(78% 0.10 250);
  --primary-400: oklch(68% 0.14 250);
  --primary-500: oklch(58% 0.18 250);
  --primary-600: oklch(50% 0.18 250);
  --primary-700: oklch(42% 0.16 250);
  --primary-800: oklch(34% 0.12 250);
  --primary-900: oklch(26% 0.08 250);

  /* Neutral palette - Slight blue tint for sophistication */
  --neutral-0: oklch(100% 0 0);
  --neutral-50: oklch(98% 0.005 250);
  --neutral-100: oklch(96% 0.005 250);
  --neutral-200: oklch(92% 0.008 250);
  --neutral-300: oklch(85% 0.01 250);
  --neutral-400: oklch(65% 0.015 250);
  --neutral-500: oklch(55% 0.015 250);
  --neutral-600: oklch(45% 0.02 250);
  --neutral-700: oklch(35% 0.02 250);
  --neutral-800: oklch(25% 0.025 250);
  --neutral-850: oklch(20% 0.025 250);
  --neutral-900: oklch(16% 0.03 250);
  --neutral-950: oklch(12% 0.03 250);

  /* Semantic Colors */
  --success-light: oklch(55% 0.16 155);
  --success-dark: oklch(65% 0.16 155);
  --warning-light: oklch(70% 0.18 70);
  --warning-dark: oklch(78% 0.16 70);
  --danger-light: oklch(55% 0.22 25);
  --danger-dark: oklch(65% 0.20 25);
  --info-light: oklch(55% 0.14 230);
  --info-dark: oklch(65% 0.14 230);
}


/* ============================================
   LIGHT MODE (Default)
   ============================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface-ground: var(--neutral-100);
  --surface-1: var(--neutral-0);
  --surface-2: var(--neutral-50);
  --surface-3: var(--neutral-100);
  --surface-4: var(--neutral-200);
  --surface-overlay: var(--neutral-0);

  /* Borders */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);

  /* Text */
  --text-1: var(--neutral-900);
  --text-2: var(--neutral-600);
  --text-3: var(--neutral-500);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-0);

  /* Interactive */
  --link: var(--primary-600);
  --link-hover: var(--primary-700);
  --focus-ring: oklch(58% 0.18 250 / 0.4);

  /* Primary button */
  --btn-primary-bg: var(--primary-600);
  --btn-primary-bg-hover: var(--primary-700);
  --btn-primary-text: white;

  /* Secondary button */
  --btn-secondary-bg: var(--neutral-100);
  --btn-secondary-bg-hover: var(--neutral-200);
  --btn-secondary-text: var(--neutral-700);
  --btn-secondary-border: var(--neutral-300);

  /* Ghost button */
  --btn-ghost-text: var(--neutral-600);
  --btn-ghost-text-hover: var(--neutral-900);
  --btn-ghost-bg-hover: var(--neutral-100);

  /* Semantic states */
  --success: var(--success-light);
  --success-subtle: oklch(95% 0.05 155);
  --warning: var(--warning-light);
  --warning-subtle: oklch(95% 0.05 70);
  --danger: var(--danger-light);
  --danger-subtle: oklch(95% 0.05 25);
  --info: var(--info-light);
  --info-subtle: oklch(95% 0.04 230);

  /* Shadows */
  --shadow-xs: 0 1px 2px oklch(20% 0.02 250 / 0.04);
  --shadow-sm: 0 1px 3px oklch(20% 0.02 250 / 0.06), 0 1px 2px oklch(20% 0.02 250 / 0.04);
  --shadow-md: 0 4px 6px oklch(20% 0.02 250 / 0.06), 0 2px 4px oklch(20% 0.02 250 / 0.04);
  --shadow-lg: 0 10px 15px oklch(20% 0.02 250 / 0.08), 0 4px 6px oklch(20% 0.02 250 / 0.04);
  --shadow-xl: 0 20px 25px oklch(20% 0.02 250 / 0.10), 0 10px 10px oklch(20% 0.02 250 / 0.04);

  /* Card specific */
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-glow: none;

  /* Input fields */
  --input-bg: var(--neutral-0);
  --input-border: var(--neutral-300);
  --input-border-focus: var(--primary-500);
  --input-placeholder: var(--neutral-400);

  /* Overlays */
  --overlay-backdrop: oklch(20% 0.02 250 / 0.4);
}


/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces - Deep navy, not pure black */
  --surface-ground: var(--neutral-950);
  --surface-1: var(--neutral-900);
  --surface-2: var(--neutral-850);
  --surface-3: var(--neutral-800);
  --surface-4: var(--neutral-700);
  --surface-overlay: var(--neutral-850);

  /* Borders */
  --border-subtle: var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-600);

  /* Text */
  --text-1: var(--neutral-50);
  --text-2: var(--neutral-400);
  --text-3: var(--neutral-500);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--neutral-900);

  /* Interactive */
  --link: var(--primary-400);
  --link-hover: var(--primary-300);
  --focus-ring: oklch(68% 0.14 250 / 0.4);

  /* Primary button */
  --btn-primary-bg: var(--primary-500);
  --btn-primary-bg-hover: var(--primary-400);
  --btn-primary-text: white;

  /* Secondary button */
  --btn-secondary-bg: var(--neutral-800);
  --btn-secondary-bg-hover: var(--neutral-700);
  --btn-secondary-text: var(--neutral-200);
  --btn-secondary-border: var(--neutral-700);

  /* Ghost button */
  --btn-ghost-text: var(--neutral-400);
  --btn-ghost-text-hover: var(--neutral-100);
  --btn-ghost-bg-hover: var(--neutral-800);

  /* Semantic states */
  --success: var(--success-dark);
  --success-subtle: oklch(25% 0.06 155);
  --warning: var(--warning-dark);
  --warning-subtle: oklch(25% 0.06 70);
  --danger: var(--danger-dark);
  --danger-subtle: oklch(25% 0.06 25);
  --info: var(--info-dark);
  --info-subtle: oklch(25% 0.05 230);

  /* Shadows */
  --shadow-xs: 0 1px 2px oklch(5% 0.02 250 / 0.3);
  --shadow-sm: 0 1px 3px oklch(5% 0.02 250 / 0.4), 0 1px 2px oklch(5% 0.02 250 / 0.3);
  --shadow-md: 0 4px 6px oklch(5% 0.02 250 / 0.4), 0 2px 4px oklch(5% 0.02 250 / 0.3);
  --shadow-lg: 0 10px 15px oklch(5% 0.02 250 / 0.5), 0 4px 6px oklch(5% 0.02 250 / 0.3);
  --shadow-xl: 0 20px 25px oklch(5% 0.02 250 / 0.5), 0 10px 10px oklch(5% 0.02 250 / 0.3);

  /* Card specific */
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg), 0 0 20px oklch(58% 0.12 250 / 0.1);
  --card-glow: 0 0 0 1px oklch(45% 0.08 250 / 0.2);

  /* Input fields */
  --input-bg: var(--neutral-850);
  --input-border: var(--neutral-700);
  --input-border-focus: var(--primary-500);
  --input-placeholder: var(--neutral-500);

  /* Overlays */
  --overlay-backdrop: oklch(5% 0.02 250 / 0.7);
}


/* ============================================
   SYSTEM PREFERENCE (Auto) - when no data-theme set
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --surface-ground: var(--neutral-950);
    --surface-1: var(--neutral-900);
    --surface-2: var(--neutral-850);
    --surface-3: var(--neutral-800);
    --surface-4: var(--neutral-700);
    --surface-overlay: var(--neutral-850);

    --border-subtle: var(--neutral-800);
    --border-default: var(--neutral-700);
    --border-strong: var(--neutral-600);

    --text-1: var(--neutral-50);
    --text-2: var(--neutral-400);
    --text-3: var(--neutral-500);
    --text-muted: var(--neutral-600);
    --text-inverse: var(--neutral-900);

    --link: var(--primary-400);
    --link-hover: var(--primary-300);
    --focus-ring: oklch(68% 0.14 250 / 0.4);

    --btn-primary-bg: var(--primary-500);
    --btn-primary-bg-hover: var(--primary-400);
    --btn-primary-text: white;

    --btn-secondary-bg: var(--neutral-800);
    --btn-secondary-bg-hover: var(--neutral-700);
    --btn-secondary-text: var(--neutral-200);
    --btn-secondary-border: var(--neutral-700);

    --btn-ghost-text: var(--neutral-400);
    --btn-ghost-text-hover: var(--neutral-100);
    --btn-ghost-bg-hover: var(--neutral-800);

    --success: var(--success-dark);
    --success-subtle: oklch(25% 0.06 155);
    --warning: var(--warning-dark);
    --warning-subtle: oklch(25% 0.06 70);
    --danger: var(--danger-dark);
    --danger-subtle: oklch(25% 0.06 25);
    --info: var(--info-dark);
    --info-subtle: oklch(25% 0.05 230);

    --shadow-xs: 0 1px 2px oklch(5% 0.02 250 / 0.3);
    --shadow-sm: 0 1px 3px oklch(5% 0.02 250 / 0.4), 0 1px 2px oklch(5% 0.02 250 / 0.3);
    --shadow-md: 0 4px 6px oklch(5% 0.02 250 / 0.4), 0 2px 4px oklch(5% 0.02 250 / 0.3);
    --shadow-lg: 0 10px 15px oklch(5% 0.02 250 / 0.5), 0 4px 6px oklch(5% 0.02 250 / 0.3);
    --shadow-xl: 0 20px 25px oklch(5% 0.02 250 / 0.5), 0 10px 10px oklch(5% 0.02 250 / 0.3);

    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg), 0 0 20px oklch(58% 0.12 250 / 0.1);
    --card-glow: 0 0 0 1px oklch(45% 0.08 250 / 0.2);

    --input-bg: var(--neutral-850);
    --input-border: var(--neutral-700);
    --input-border-focus: var(--primary-500);
    --input-placeholder: var(--neutral-500);

    --overlay-backdrop: oklch(5% 0.02 250 / 0.7);
  }
}


/* ============================================
   TYPOGRAPHY
   ============================================ */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}


/* ============================================
   SPACING
   ============================================ */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  --container-3xl: 1600px;
}


/* ============================================
   BORDERS & RADIUS
   ============================================ */

:root {
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;
}


/* ============================================
   TRANSITIONS
   ============================================ */

:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-colors: color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}


/* ============================================
   Z-INDEX SCALE
   ============================================ */

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
}


/* ============================================
   POKEMON TYPE COLORS (OKLCH)
   ============================================ */

:root {
  --type-colorless: oklch(65% 0.02 250);
  --type-darkness: oklch(35% 0.08 300);
  --type-dragon: oklch(55% 0.18 300);
  --type-fairy: oklch(70% 0.14 350);
  --type-fighting: oklch(55% 0.16 45);
  --type-fire: oklch(60% 0.20 30);
  --type-grass: oklch(55% 0.16 145);
  --type-lightning: oklch(85% 0.18 90);
  --type-metal: oklch(60% 0.02 250);
  --type-psychic: oklch(55% 0.18 320);
  --type-water: oklch(55% 0.16 240);
}

[data-theme="dark"] {
  --type-colorless: oklch(75% 0.02 250);
  --type-darkness: oklch(50% 0.10 300);
  --type-dragon: oklch(65% 0.18 300);
  --type-fairy: oklch(75% 0.14 350);
  --type-fighting: oklch(65% 0.16 45);
  --type-fire: oklch(70% 0.20 30);
  --type-grass: oklch(65% 0.16 145);
  --type-lightning: oklch(90% 0.16 90);
  --type-metal: oklch(70% 0.02 250);
  --type-psychic: oklch(65% 0.18 320);
  --type-water: oklch(65% 0.16 240);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --type-colorless: oklch(75% 0.02 250);
    --type-darkness: oklch(50% 0.10 300);
    --type-dragon: oklch(65% 0.18 300);
    --type-fairy: oklch(75% 0.14 350);
    --type-fighting: oklch(65% 0.16 45);
    --type-fire: oklch(70% 0.20 30);
    --type-grass: oklch(65% 0.16 145);
    --type-lightning: oklch(90% 0.16 90);
    --type-metal: oklch(70% 0.02 250);
    --type-psychic: oklch(65% 0.18 320);
    --type-water: oklch(65% 0.16 240);
  }
}


/* ============================================
   ENERGY COLORS - Full vibrance for analytics charts
   (No dark mode overrides - data visualization colors stay constant)
   ============================================ */

:root {
  --energy-fire: oklch(65% 0.20 30);
  --energy-water: oklch(58% 0.16 240);
  --energy-grass: oklch(70% 0.16 140);
  --energy-lightning: oklch(85% 0.18 90);
  --energy-psychic: oklch(62% 0.17 340);
  --energy-fighting: oklch(58% 0.16 25);
  --energy-darkness: oklch(45% 0.06 290);
  --energy-metal: oklch(68% 0.04 210);
  --energy-fairy: oklch(75% 0.12 330);
  --energy-colorless: oklch(72% 0.02 100);
  --energy-special: oklch(60% 0.05 250);
}


/* ============================================
   FORMAT COLORS (OKLCH)
   ============================================ */

:root {
  --format-standard: oklch(55% 0.18 250);
  --format-expanded: oklch(55% 0.18 300);
  --format-unlimited: oklch(65% 0.18 55);
}


/* ============================================
   BACKWARDS COMPATIBILITY
   (Open Props aliases - remove as files migrate)
   ============================================ */

:root {
  /* Size aliases */
  --size-1: var(--space-1);
  --size-2: var(--space-2);
  --size-3: var(--space-3);
  --size-4: var(--space-4);
  --size-5: var(--space-5);
  --size-6: var(--space-6);
  --size-7: var(--space-8);
  --size-8: var(--space-10);
  --size-10: var(--space-16);

  /* Font size aliases */
  --font-size-0: var(--text-xs);
  --font-size-1: var(--text-sm);
  --font-size-2: var(--text-base);
  --font-size-3: var(--text-lg);
  --font-size-4: var(--text-xl);
  --font-size-5: var(--text-2xl);
  --font-size-6: var(--text-3xl);
  --font-size-8: 3.5rem;

  /* Font weight aliases */
  --font-weight-4: var(--font-normal);
  --font-weight-5: var(--font-medium);
  --font-weight-6: var(--font-semibold);
  --font-weight-7: var(--font-bold);

  /* Radius aliases */
  --radius-1: var(--radius-sm);
  --radius-2: var(--radius-md);
  --radius-3: var(--radius-lg);
  --radius-round: var(--radius-full);

  /* Shadow aliases */
  --shadow-2: var(--shadow-sm);
  --shadow-3: var(--shadow-md);
  --shadow-4: var(--shadow-lg);
  --shadow-6: var(--shadow-xl);

  /* Color aliases - Blues */
  --blue-1: oklch(95% 0.03 250);
  --blue-2: oklch(90% 0.06 250);
  --blue-3: oklch(82% 0.10 250);
  --blue-4: oklch(72% 0.14 250);
  --blue-5: oklch(62% 0.16 250);
  --blue-6: oklch(55% 0.18 250);
  --blue-7: var(--primary-600);
  --blue-8: var(--primary-700);
  --blue-9: var(--primary-800);

  /* Color aliases - Reds */
  --red-1: oklch(95% 0.03 25);
  --red-2: oklch(90% 0.08 25);
  --red-3: oklch(82% 0.12 25);
  --red-5: oklch(65% 0.18 25);
  --red-6: oklch(58% 0.20 25);
  --red-7: var(--danger);
  --red-8: oklch(48% 0.20 25);
  --red-9: oklch(40% 0.18 25);

  /* Color aliases - Greens */
  --green-1: oklch(95% 0.04 155);
  --green-2: oklch(90% 0.08 155);
  --green-3: oklch(82% 0.12 155);
  --green-5: oklch(60% 0.16 155);
  --green-6: var(--success);
  --green-7: oklch(50% 0.14 155);
  --green-9: oklch(35% 0.10 155);

  /* Color aliases - Grays */
  --gray-0: oklch(98% 0.005 250);
  --gray-1: oklch(96% 0.005 250);
  --gray-2: oklch(92% 0.008 250);
  --gray-3: oklch(88% 0.01 250);
  --gray-4: oklch(78% 0.01 250);
  --gray-5: oklch(65% 0.015 250);
  --gray-6: var(--text-3);
  --gray-7: oklch(50% 0.02 250);
  --gray-8: oklch(35% 0.02 250);
  --gray-9: oklch(25% 0.025 250);

  /* Color aliases - Yellows */
  --yellow-3: oklch(88% 0.14 90);
  --yellow-5: oklch(85% 0.18 90);
  --yellow-9: oklch(45% 0.12 90);

  /* Color aliases - Oranges */
  --orange-2: oklch(92% 0.08 55);
  --orange-3: oklch(85% 0.12 55);
  --orange-6: oklch(70% 0.18 55);
  --orange-7: oklch(62% 0.18 55);
  --orange-9: oklch(45% 0.14 55);

  /* Color aliases - Purples */
  --purple-2: oklch(92% 0.06 300);
  --purple-9: oklch(40% 0.14 300);
  --violet-3: oklch(82% 0.10 300);
  --violet-6: oklch(55% 0.18 300);
  --violet-9: oklch(40% 0.14 300);

  /* Color aliases - Indigo */
  --indigo-3: oklch(82% 0.10 270);
  --indigo-6: oklch(55% 0.16 270);
  --indigo-9: oklch(40% 0.12 270);

  /* Color aliases - Pink */
  --pink-3: oklch(82% 0.10 350);
  --pink-5: oklch(68% 0.14 350);
  --pink-9: oklch(45% 0.12 350);

  /* Ease/animation */
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
}
}

/* Base reset & element defaults */

@layer base{

/* ============================================
   BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-1);
  background-color: var(--surface-ground);
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--link-hover);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Selection */
::-moz-selection {
  background-color: var(--primary-200);
  color: var(--text-1);
}
::selection {
  background-color: var(--primary-200);
  color: var(--text-1);
}
  :is([data-theme="dark"] ::-moz-selection,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) ::-moz-selection {
    background-color: var(--primary-700);
    color: var(--text-1);
  }
  :is([data-theme="dark"] ::selection,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) ::selection {
    background-color: var(--primary-700);
    color: var(--text-1);
  }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-1);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

/* Paragraphs */
p {
  margin: 0 0 var(--space-4);
}

/* Lists */
ul, ol {
  margin: 0;
  padding-left: var(--space-6);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: var(--space-1) var(--space-2);
  background-color: var(--surface-3);
  border-radius: var(--radius-sm);
}

pre code {
  padding: 0;
  background: none;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

th {
  font-weight: var(--font-semibold);
  color: var(--text-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}
}

/* Shared components */

@layer components{

/*
 * Button Components
 *
 * Available classes:
 *   .btn           - Base button styles
 *   .btn-primary   - Primary action button
 *   .btn-secondary - Secondary action button
 *   .btn-ghost     - Minimal/text button
 *   .btn-danger    - Destructive action button
 *   .btn-sm        - Small size modifier
 *   .btn-lg        - Large size modifier
 *   .btn-icon      - Icon-only button (square)
 *
 * Usage:
 *   <button class="btn btn-primary">Save</button>
 *   <a href="#" class="btn btn-secondary btn-sm">Cancel</a>
 *   <button class="btn btn-icon btn-ghost">
 *     <svg>...</svg>
 *   </button>
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: var(--transition-fast);
  transition-property: background-color, border-color, color, box-shadow, transform;
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary - Main call to action */
.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

/* Secondary - Supporting actions */
.btn-secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text);
}

/* Ghost - Minimal/text style */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--btn-ghost-text);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-text-hover);
}

/* Danger - Destructive actions */
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: oklch(48% 0.20 25);
  border-color: oklch(48% 0.20 25);
}

[data-theme="dark"] .btn-danger:hover:not(:disabled) {
  background: oklch(60% 0.18 25);
  border-color: oklch(60% 0.18 25);
}

/* Warning - Payment/attention actions */
.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: oklch(64% 0.16 70);
  border-color: oklch(64% 0.16 70);
}

[data-theme="dark"] .btn-warning:hover:not(:disabled) {
  background: oklch(72% 0.14 70);
  border-color: oklch(72% 0.14 70);
}

/* Size modifiers */
.btn-sm {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

/* Icon-only button */
.btn-icon {
  width: 36px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 28px;
}

.btn-icon.btn-lg {
  width: 44px;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-icon.btn-sm svg {
  width: 14px;
  height: 14px;
}

.btn-icon.btn-lg svg {
  width: 20px;
  height: 20px;
}

/* Button groups */
.btn-group {
  display: inline-flex;
  gap: var(--space-2);
}

.btn-group-attached {
  display: inline-flex;
}

.btn-group-attached .btn {
  border-radius: 0;
}

.btn-group-attached .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.btn-group-attached .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.btn-group-attached .btn:not(:last-child) {
  border-right-width: 0;
}

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  border-top-color: transparent;
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-danger.btn-loading::after {
  border-color: white;
  border-top-color: transparent;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
}

@layer components{

/*
 * Form Components
 *
 * Available classes:
 *   .form-group      - Container for label + input + hint
 *   .form-label      - Form field label
 *   .form-input      - Text input styling
 *   .form-select     - Select dropdown styling
 *   .form-textarea   - Textarea styling
 *   .form-checkbox   - Checkbox/radio styling
 *   .form-hint       - Help text below input
 *   .form-errors     - Validation error container
 *   .form-actions    - Button container for form submission
 *   .form-inline     - Horizontal form layout
 *
 * Usage:
 *   <div class="form-group">
 *     <label class="form-label">Email</label>
 *     <input type="email" class="form-input">
 *     <span class="form-hint">We'll never share your email</span>
 *   </div>
 */

/* Form group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-group:last-of-type {
  margin-bottom: 0;
}

/* Labels */
.form-label {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--text-1);
}

.form-label-required::after {
  content: " *";
  color: var(--danger);
}

/* Base input styles */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-1);
  transition: var(--transition-fast);
  transition-property: border-color, box-shadow;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: var(--input-placeholder);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--input-placeholder);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Disabled state */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* Error state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--danger);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px hsl(0 72% 50% / 0.2);
}

/* Textarea */
.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
}

/* Select */
.form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          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='%236b7280' stroke-width='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;
}

/* Checkbox and Radio */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"],
.form-checkbox input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--link);
  cursor: pointer;
}

.form-checkbox-label {
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: var(--leading-snug);
}

.form-checkbox-description {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--space-1);
}

/* Hint text */
.form-hint {
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: var(--leading-snug);
}

/* Error messages */
.form-errors {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--danger-subtle);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  color: var(--danger);
}

.form-errors-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--danger);
}

.form-errors h2,
.form-errors p:first-child {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}

.form-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}

.form-errors li {
  margin-bottom: var(--space-1);
}

.form-errors li:last-child {
  margin-bottom: 0;
}

/* Inline error (per-field) */
.form-field-error {
  font-size: var(--text-sm);
  color: var(--danger);
  margin-top: var(--space-1);
}

/* Form actions */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.form-actions-end {
  justify-content: flex-end;
}

/* Inline form */
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.form-inline .form-group {
  margin-bottom: 0;
}

/* Input with icon/addon */
.input-group {
  position: relative;
  display: flex;
}

.input-group .form-input {
  flex: 1;
}

.input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.input-icon svg {
  width: 18px;
  height: 18px;
}

.input-group .form-input:has(+ .input-icon),
.form-input.has-icon-left {
  padding-left: var(--space-10);
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--input-border);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.input-addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .form-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Form section/fieldset */
.form-section {
  margin-bottom: var(--space-8);
}

.form-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.form-section-description {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--space-4);
}
}

@layer components{

/*
 * Badge Components
 *
 * All colors use OKLCH for perceptual uniformity.
 *
 * Available classes:
 *   .badge            - Base badge styling
 *   .badge-primary    - Primary colored badge
 *   .badge-success    - Success/positive badge
 *   .badge-warning    - Warning badge
 *   .badge-danger     - Danger/error badge
 *   .badge-supertype  - Card supertype badge
 *   .badge-hp         - HP badge
 *
 * Type badges (for Pokemon types):
 *   .type-badge       - Base for type badges
 *   .type-grass, .type-fire, .type-water, etc.
 *
 * Legality badges:
 *   .legality-badge   - Base legality badge
 *   .legality-legal   - Legal in format
 *   .legality-banned  - Banned in format
 *
 * Format badges:
 *   .deck-format-badge          - Deck format indicator
 *   .deck-format-badge.standard - Standard format
 *   .deck-format-badge.expanded - Expanded format
 *   .deck-format-badge.unlimited - Unlimited format
 *
 * Visibility badges:
 *   .visibility-badge           - Base visibility badge
 *   .visibility-badge.private   - Private deck
 *   .visibility-badge.public    - Public deck
 *   .visibility-badge.unlisted  - Unlisted deck (link-only access)
 */

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-2);
}

/* Badge variants */
.badge-primary {
  background: var(--primary-100);
  color: var(--primary-700);
}

[data-theme="dark"] .badge-primary {
  background: var(--primary-900);
  color: var(--primary-300);
}

.badge-success {
  background: var(--success-subtle);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-subtle);
  color: var(--danger);
}

.badge-supertype {
  background: var(--info-subtle);
  color: var(--info);
}

.badge-hp {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* Type badges - Vibrant colors for Pokemon types */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  border-radius: var(--radius-md);
  text-transform: capitalize;
}

.type-grass {
  background: oklch(92% 0.08 145);
  color: oklch(40% 0.12 145);
}
[data-theme="dark"] .type-grass {
  background: oklch(25% 0.08 145);
  color: var(--type-grass);
}

.type-fire {
  background: oklch(92% 0.08 30);
  color: oklch(45% 0.16 30);
}
[data-theme="dark"] .type-fire {
  background: oklch(25% 0.10 30);
  color: var(--type-fire);
}

.type-water {
  background: oklch(92% 0.06 240);
  color: oklch(40% 0.12 240);
}
[data-theme="dark"] .type-water {
  background: oklch(25% 0.08 240);
  color: var(--type-water);
}

.type-lightning {
  background: oklch(95% 0.10 90);
  color: oklch(45% 0.14 90);
}
[data-theme="dark"] .type-lightning {
  background: oklch(28% 0.08 90);
  color: var(--type-lightning);
}

.type-psychic {
  background: oklch(92% 0.08 320);
  color: oklch(40% 0.14 320);
}
[data-theme="dark"] .type-psychic {
  background: oklch(25% 0.10 320);
  color: var(--type-psychic);
}

.type-fighting {
  background: oklch(92% 0.08 45);
  color: oklch(42% 0.12 45);
}
[data-theme="dark"] .type-fighting {
  background: oklch(25% 0.08 45);
  color: var(--type-fighting);
}

.type-darkness {
  background: oklch(88% 0.04 300);
  color: oklch(30% 0.06 300);
}
[data-theme="dark"] .type-darkness {
  background: oklch(22% 0.06 300);
  color: var(--type-darkness);
}

.type-metal {
  background: oklch(92% 0.01 250);
  color: oklch(45% 0.02 250);
}
[data-theme="dark"] .type-metal {
  background: oklch(25% 0.02 250);
  color: var(--type-metal);
}

.type-dragon {
  background: oklch(92% 0.08 300);
  color: oklch(40% 0.14 300);
}
[data-theme="dark"] .type-dragon {
  background: oklch(25% 0.10 300);
  color: var(--type-dragon);
}

.type-fairy {
  background: oklch(92% 0.06 350);
  color: oklch(45% 0.10 350);
}
[data-theme="dark"] .type-fairy {
  background: oklch(25% 0.08 350);
  color: var(--type-fairy);
}

.type-colorless {
  background: oklch(92% 0.005 250);
  color: oklch(45% 0.015 250);
}
[data-theme="dark"] .type-colorless {
  background: oklch(25% 0.01 250);
  color: var(--type-colorless);
}

/* Legality badges */
.legality-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-2);
}

.legality-legal {
  background: var(--success-subtle);
  color: var(--success);
}

.legality-banned {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* Format badges */
.deck-format-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.deck-format-badge.standard {
  background: oklch(92% 0.06 250);
  color: var(--format-standard);
}
[data-theme="dark"] .deck-format-badge.standard {
  background: oklch(25% 0.08 250);
}

.deck-format-badge.expanded {
  background: oklch(92% 0.06 300);
  color: var(--format-expanded);
}
[data-theme="dark"] .deck-format-badge.expanded {
  background: oklch(25% 0.08 300);
}

.deck-format-badge.unlimited {
  background: oklch(92% 0.08 55);
  color: var(--format-unlimited);
}
[data-theme="dark"] .deck-format-badge.unlimited {
  background: oklch(25% 0.08 55);
}

/* Deck card format (smaller variant for grid items) */
.deck-card-format {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.deck-card-format.standard {
  background: oklch(92% 0.06 250);
  color: var(--format-standard);
}
[data-theme="dark"] .deck-card-format.standard {
  background: oklch(25% 0.08 250);
}

.deck-card-format.expanded {
  background: oklch(92% 0.06 300);
  color: var(--format-expanded);
}
[data-theme="dark"] .deck-card-format.expanded {
  background: oklch(25% 0.08 300);
}

.deck-card-format.unlimited {
  background: oklch(92% 0.08 55);
  color: var(--format-unlimited);
}
[data-theme="dark"] .deck-card-format.unlimited {
  background: oklch(25% 0.08 55);
}

/* Visibility badges */
.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.visibility-badge.private {
  background: var(--surface-3);
  color: var(--text-2);
}

.visibility-badge.public {
  background: var(--success-subtle);
  color: var(--success);
}

.visibility-badge.unlisted {
  background: oklch(92% 0.04 250);
  color: oklch(55% 0.08 250);
}

[data-theme="dark"] .visibility-badge.unlisted {
  background: oklch(25% 0.04 250);
  color: oklch(70% 0.08 250);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .visibility-badge.unlisted {
    background: oklch(25% 0.04 250);
    color: oklch(70% 0.08 250);
  }
}

/* Count badge (for notifications, quantities, etc.) */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  background: var(--surface-4);
  color: var(--text-2);
}

.badge-count.primary {
  background: var(--btn-primary-bg);
  color: white;
}

/* Premium badge - gem/diamond icon in design system accent color */
.premium-badge {
  display: inline-flex;
  align-items: center;
  color: var(--primary-500);
  vertical-align: middle;
  margin-left: var(--space-1);
  line-height: 1;
}

.premium-badge svg {
  display: block;
}

[data-theme="dark"] .premium-badge {
  color: var(--primary-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .premium-badge {
    color: var(--primary-400);
  }
}
}

@layer components{

/*
 * Empty State Component
 *
 * Available classes:
 *   .empty-state         - Container for empty content states
 *   .empty-state-icon    - Large icon/emoji display
 *   .empty-state-title   - Main heading
 *   .empty-state-text    - Description text
 *   .empty-state-hint    - Additional help text
 *   .empty-state-actions - Button container
 *   .empty-state-compact - Smaller variant for inline use
 *
 * Usage:
 *   <div class="empty-state">
 *     <div class="empty-state-icon">
 *       <svg>...</svg>
 *     </div>
 *     <h2 class="empty-state-title">No results found</h2>
 *     <p class="empty-state-text">Try adjusting your search filters</p>
 *     <p class="empty-state-hint">
 *       Tip: Use <code>name:pikachu</code> for exact matches
 *     </p>
 *     <div class="empty-state-actions">
 *       <a href="#" class="btn btn-primary">Create New</a>
 *     </div>
 *   </div>
 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-6);
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: var(--radius-full);
}

.empty-state-icon svg {
  width: 48px;
  height: 48px;
}

/* Support for emoji/text icons */
.empty-state-icon:not(:has(svg)) {
  font-size: 36px;
  line-height: 1;
  padding-top: 2px;
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}

.empty-state-text {
  font-size: var(--text-base);
  color: var(--text-2);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.empty-state-hint {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

.empty-state-hint code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--surface-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.empty-state-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Alias for backwards compatibility */
.empty-state h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}

.empty-state p {
  color: var(--text-2);
  margin: 0;
}

.empty-state a:not(.btn) {
  color: var(--link);
}

.empty-state a:not(.btn):hover {
  color: var(--link-hover);
}

/* Compact variant for smaller contexts */
.empty-state-compact {
  padding: var(--space-8) var(--space-4);
}

.empty-state-compact .empty-state-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
}

.empty-state-compact .empty-state-icon svg {
  width: 32px;
  height: 32px;
}

.empty-state-compact .empty-state-icon:not(:has(svg)) {
  font-size: 32px;
}

.empty-state-compact .empty-state-title,
.empty-state-compact h2 {
  font-size: var(--text-lg);
}

.empty-state-compact .empty-state-text {
  font-size: var(--text-sm);
}

/* Illustration variant (for large SVG illustrations) */
.empty-state-illustration {
  width: 200px;
  height: auto;
  margin-bottom: var(--space-6);
  opacity: 0.6;
}
}

@layer components{

/*
 * Flash Message Components
 *
 * Available classes:
 *   .flash-container  - Container for flash messages (fixed position)
 *   .flash-message    - Base flash message styling
 *   .flash-success    - Success message
 *   .flash-error      - Error message
 *   .flash-warning    - Warning message
 *   .flash-info       - Info message
 *   .flash-dismiss    - Dismiss button
 *   .flash-fade-out   - Fade out animation class
 *
 * Usage:
 *   <div class="flash-container">
 *     <div class="flash-message flash-success">
 *       <p>Changes saved successfully!</p>
 *       <button class="flash-dismiss">&times;</button>
 *     </div>
 *   </div>
 */

.flash-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
  pointer-events: none;
}

.flash-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  animation: flash-in 0.3s ease;
  pointer-events: auto;
}

.flash-message p {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Flash icon */
.flash-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Success */
.flash-success {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--text-1);
}

.flash-success .flash-icon {
  color: var(--success);
}

/* Error */
.flash-error {
  background: var(--danger-subtle);
  border-color: var(--danger);
  color: var(--text-1);
}

.flash-error .flash-icon {
  color: var(--danger);
}

/* Warning */
.flash-warning {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--text-1);
}

.flash-warning .flash-icon {
  color: var(--warning);
}

/* Info */
.flash-info {
  background: var(--info-subtle);
  border-color: var(--info);
  color: var(--text-1);
}

.flash-info .flash-icon {
  color: var(--info);
}

/* Dismiss button */
.flash-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -4px -4px -4px 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  transition: var(--transition-fast);
}

.flash-dismiss:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

/* Animations */
.flash-fade-out {
  animation: flash-out 0.3s ease forwards;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flash-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .flash-container {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}
}

@layer components{

/* Card Modal Dialog Styles */

/* Base dialog styling */
.card-modal {
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-xl);
  max-width: min(900px, 95vw);
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
}

/* Open state animation */
.card-modal[open] {
  animation: modal-slide-in 0.2s ease-out;
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Backdrop styling - must use ::backdrop pseudo-element */
.card-modal::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep scrolling inside the frame so dialog controls remain fixed. */
.card-modal > turbo-frame {
  display: block;
  max-height: 90vh;
  overflow-y: auto;
}

/* Modal content container */
.modal-content {
  padding: var(--space-6);
  background: var(--surface-1);
}

/* Close button stays outside the scrolling content. */
.modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  width: var(--space-12);
  height: var(--space-12);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-popover);
}

.modal-close:hover {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--border-default);
}

.modal-close:active {
  transform: scale(0.96);
}

.modal-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Modal actions */
.modal-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Loading state */
.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-2);
}

.modal-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Full-screen mobile modal */
@media (max-width: 639px) {
  .card-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .card-modal > turbo-frame {
    max-height: 100vh;
  }

  .modal-content {
    padding: var(--space-4);
  }

}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .card-modal[open] {
    animation: none;
  }
}
}

@layer components{

/*
 * Collection Components
 *
 * Styles for collection browsing and card ownership display.
 * Follows "Subtle Gaming" design philosophy.
 */

/* ============================================
   COLLECTION CONTAINER
   ============================================ */

.collection-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ============================================
   COLLECTION HEADER
   ============================================ */

.collection-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.collection-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.collection-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
}

.collection-stats {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.collection-actions {
  display: flex;
  gap: var(--space-2);
}

.collection-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.collection-stats-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.collection-header .collection-value {
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

.collection-search {
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .collection-header-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================
   COLLECTION CONTROLS (Inline - used in card views)
   ============================================ */

.collection-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.collection-quantity-display {
  min-width: 20px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.collection-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.collection-control-btn:hover {
  background: var(--surface-4);
  color: var(--text-1);
  border-color: var(--border-default);
}

.collection-control-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.collection-control-btn:active {
  transform: scale(0.95);
}

/* ============================================
   ADD TO COLLECTION BUTTON
   ============================================ */

.collection-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.collection-add-btn:hover {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--border-default);
}

.collection-add-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.collection-add-btn:active {
  transform: scale(0.98);
}

/* ============================================
   COLLECTION IMPORT PAGE
   ============================================ */

.collection-import-container {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-4);
}

.collection-import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.collection-import-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
}

/* Import instructions */
.import-instructions {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.import-instructions p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.import-format-help {
  margin-top: var(--space-3);
}

.import-format-help summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-1);
  padding: var(--space-2) 0;
}

.import-format-help summary:hover {
  color: var(--brand);
}

.format-details {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.format-details p {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: var(--space-2) 0;
}

.format-details p:first-child {
  margin-top: 0;
}

.format-details ul {
  margin: var(--space-1) 0 var(--space-3) var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.format-details li {
  margin: var(--space-1) 0;
}

.format-details pre {
  margin: var(--space-2) 0 0 0;
  padding: var(--space-3);
  background: var(--surface-3);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-1);
  overflow-x: auto;
}

/* Import form */
.import-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Radio group for mode selection */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.radio-option:hover {
  background: var(--surface-3);
  border-color: var(--border-default);
}

.radio-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--brand);
}

.radio-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.radio-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.radio-label strong {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.radio-label small {
  font-size: var(--text-xs);
  color: var(--text-3);
}

.radio-option--warning:has(input:checked) {
  border-color: var(--orange-6);
  background: oklch(from var(--orange-6) l c h / 0.1);
}

.form-hint--warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--orange-7);
}

[data-theme="dark"] .form-hint--warning,
:root:not([data-theme="light"]) .form-hint--warning {
  color: var(--orange-5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-hint--warning {
    color: var(--orange-5);
  }
}

.form-hint--warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Import tips */
.import-tips {
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.import-tips h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2) 0;
}

.import-tips ul {
  margin: 0;
  padding: 0 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.import-tips li {
  margin: var(--space-1) 0;
}

/* ============================================
   IMPORT RESULTS
   ============================================ */

.import-results {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.import-results h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-4) 0;
}

.import-stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  min-width: 100px;
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-1);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-item--success .stat-value {
  color: var(--green-7);
}

.stat-item--info .stat-value {
  color: var(--blue-7);
}

.stat-item--warning .stat-value {
  color: var(--orange-7);
}

[data-theme="dark"] .stat-item--success .stat-value,
:root:not([data-theme="light"]) .stat-item--success .stat-value {
  color: var(--green-5);
}

[data-theme="dark"] .stat-item--info .stat-value,
:root:not([data-theme="light"]) .stat-item--info .stat-value {
  color: var(--blue-5);
}

[data-theme="dark"] .stat-item--warning .stat-value,
:root:not([data-theme="light"]) .stat-item--warning .stat-value {
  color: var(--orange-5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-item--success .stat-value {
    color: var(--green-5);
  }
  :root:not([data-theme="light"]) .stat-item--info .stat-value {
    color: var(--blue-5);
  }
  :root:not([data-theme="light"]) .stat-item--warning .stat-value {
    color: var(--orange-5);
  }
}

/* Unmatched cards table */
.unmatched-cards {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.unmatched-cards h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2) 0;
}

.unmatched-hint {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin: 0 0 var(--space-3) 0;
}

.unmatched-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.unmatched-table th,
.unmatched-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.unmatched-table th {
  font-weight: var(--font-semibold);
  color: var(--text-2);
  background: var(--surface-3);
}

.unmatched-table td {
  color: var(--text-1);
}

.unmatched-table tbody tr:hover {
  background: var(--surface-3);
}

/* Import results actions */
.import-results-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* ============================================
   COLLECTION IMPORT PAGE REFRESH
   ============================================ */

.collection-import-container {
  max-width: var(--container-lg);
  padding: var(--space-6) var(--space-4);
}

.collection-import-header {
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.collection-import-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.import-form {
  gap: 0;
  margin-bottom: var(--space-4);
}

.import-panel {
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.import-section {
  padding: var(--space-5);
}

.import-section + .import-section {
  border-top: 1px solid var(--border-subtle);
}

.import-section-heading {
  margin-bottom: var(--space-3);
}

.import-section-heading h2,
.import-mode-fieldset legend {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.import-section-heading p {
  margin: var(--space-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.file-drop-zone {
  position: relative;
  display: flex;
  min-height: var(--space-24);
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  overflow: hidden;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.file-drop-zone:hover,
.file-drop-zone.is-dragging {
  background: var(--surface-3);
  border-color: var(--primary-500);
}

.file-drop-zone:has(.file-drop-input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.file-drop-zone.has-file {
  background: var(--success-subtle);
  border-color: var(--success);
  border-style: solid;
}

.file-drop-zone.is-invalid {
  background: var(--danger-subtle);
  border-color: var(--danger);
  border-style: solid;
}

.file-drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop-icon {
  display: inline-flex;
  width: var(--space-10);
  height: var(--space-10);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--link);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}

.file-drop-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.file-drop-copy strong {
  overflow: hidden;
  color: var(--text-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-drop-copy span {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.import-mode-fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.import-mode-fieldset legend {
  margin-bottom: var(--space-3);
}

.import-mode-fieldset .radio-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.import-mode-fieldset .radio-option {
  height: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.import-mode-fieldset .radio-option:has(input:checked) {
  background: var(--surface-3);
  border-color: var(--primary-500);
  box-shadow: inset 0 0 0 1px var(--primary-500);
}

.import-mode-fieldset .radio-option--warning:has(input:checked) {
  background: var(--warning-subtle);
  border-color: var(--warning);
  box-shadow: inset 0 0 0 1px var(--warning);
}

.import-mode-fieldset .form-hint--warning {
  display: none;
  margin: var(--space-3) 0 0;
  color: var(--text-3);
}

.import-mode-fieldset:has(.radio-option--warning input:checked) .form-hint--warning {
  display: flex;
}

.import-form-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
}

.import-format-help {
  margin-top: 0;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.import-format-help summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-1);
  list-style: none;
  transition: background-color var(--transition-fast);
}

.import-format-help summary::-webkit-details-marker {
  display: none;
}

.import-format-help summary:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

.import-format-summary-hint {
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}

.import-format-help[open] .import-format-summary-hint {
  visibility: hidden;
}

.import-format-help .format-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  margin: 0;
  background: var(--surface-2);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}

.format-requirements {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.format-requirements h3,
.format-example h3 {
  margin: 0 0 var(--space-1);
  color: var(--text-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.import-format-help .format-details p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.import-format-help .format-details pre {
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}

.import-tips-list {
  grid-column: 1 / -1;
  padding: var(--space-3) 0 0 var(--space-5);
  margin: 0;
  color: var(--text-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.import-tips-list li + li {
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
  .collection-import-container {
    padding-top: var(--space-4);
  }

  .collection-import-header {
    align-items: flex-start;
  }

  .import-section {
    padding: var(--space-4);
  }

  .file-drop-zone {
    flex-direction: column;
    text-align: center;
  }

  .import-mode-fieldset .radio-group,
  .import-format-help .format-details {
    grid-template-columns: 1fr;
  }

  .import-form-actions {
    padding: var(--space-4);
  }
}
}

@layer components{

/* Sets Browsing Styles */

/* ============================================
   SET INDEX PAGE
   ============================================ */

/* Page Container */
.sets-page {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.sets-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.sets-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}

.sets-count {
  color: var(--text-2);
  font-size: var(--text-sm);
  margin: 0;
}

/* Series Groups */
.series-group {
  margin-bottom: var(--space-8);
}

.series-header {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-500);
  display: inline-block;
}

/* Sets Grid */
.sets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .sets-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .sets-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .sets-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Set Card */
.set-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.set-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* Subtle glow in dark mode */
[data-theme="dark"] .set-card {
  box-shadow: var(--shadow-sm), var(--card-glow);
}

[data-theme="dark"] .set-card:hover {
  box-shadow: var(--shadow-md);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .set-card {
    box-shadow: var(--shadow-sm), var(--card-glow);
  }
  :root:not([data-theme]) .set-card:hover {
    box-shadow: var(--shadow-md);
  }
}

/* Set Logo */
.set-logo-wrapper {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  padding: var(--space-4);
}

.set-logo {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.set-symbol {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}

.set-logo-placeholder {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-3);
  border-radius: var(--radius-md);
}

/* Set Info */
.set-info {
  padding: var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.set-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
  line-height: var(--leading-tight);
  /* Truncate long names */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.set-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-2);
}

.set-release,
.set-count {
  white-space: nowrap;
}

/* Progress Bar */
.set-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-text {
  font-size: var(--text-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ============================================
   SET CHECKLIST PAGE (SHOW)
   ============================================ */

/* Checklist Header */
.checklist-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
  .checklist-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.checklist-set-info {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.checklist-logo {
  width: 120px;
  max-height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}

.checklist-details h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-1);
}

.checklist-series {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 0 var(--space-2);
}

.checklist-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-3);
  margin: 0;
}

.checklist-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.completion-stats {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--success-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.completion-count {
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.completion-percent {
  color: var(--success);
  margin-left: var(--space-1);
}

/* Checklist Filters */
.checklist-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Checklist Grid */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .checklist-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) {
  .checklist-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 768px) {
  .checklist-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .checklist-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1280px) {
  .checklist-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

/* Turbo frames in checklist grid need to behave as grid items */
.checklist-grid > turbo-frame {
  display: contents;
}

/* Checklist Card */
.checklist-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  will-change: transform;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}

.checklist-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.checklist-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.checklist-card-image {
  aspect-ratio: 63 / 88;
  position: relative;
  background: var(--surface-3);
  overflow: hidden;
}

.checklist-card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-slow);
}

.checklist-card:hover .checklist-card-image img {
  transform: scale(1.05);
}

.checklist-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-muted);
}

.checklist-card-name {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-1);
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collector Number Badge */
.collector-number {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  padding: 2px var(--space-1);
  background: oklch(0% 0 0 / 0.7);
  color: white;
  font-size: 10px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  line-height: 1;
}

/* Quantity Badge (for owned cards) */
.quantity-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--success);
  color: white;
  font-size: 11px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Owned Card Styling */
.checklist-card--owned {
  /* Normal appearance */
}

.checklist-card--owned .checklist-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--success);
  pointer-events: none;
  border-radius: inherit;
}

/* Missing Card Styling */
.checklist-card--missing {
  opacity: 0.5;
}

.checklist-card--missing:hover {
  opacity: 0.8;
}

.checklist-card--missing .checklist-card-image img {
  filter: grayscale(0.5);
}

.checklist-card--missing:hover .checklist-card-image img {
  filter: grayscale(0);
}

/* Quick-Collect Checkmark Button */
/* button_to generates a <form> wrapper, so we position the form */
.checklist-card > form {
  position: absolute;
  bottom: var(--space-1);
  right: var(--space-1);
  z-index: 2;
}

.checklist-collect-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: oklch(0% 0 0 / 0.55);
  color: oklch(100% 0 0 / 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.checklist-collect-btn:hover {
  background: oklch(0% 0 0 / 0.75);
  color: oklch(100% 0 0);
  transform: scale(1.1);
}

.checklist-collect-btn--owned {
  background: var(--success);
  color: oklch(100% 0 0);
}

.checklist-collect-btn--owned:hover {
  background: var(--danger);
  color: oklch(100% 0 0);
  transform: scale(1.1);
}
}

@layer components{

/*
 * Deck Needs Component
 *
 * Shows cards a user needs to complete a deck.
 * Follows "Subtle Gaming" design philosophy.
 */

/* ============================================
   CONTAINER
   ============================================ */

.deck-needs {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* ============================================
   HEADER
   ============================================ */

.deck-needs-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.deck-needs-count {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-2);
}

/* ============================================
   EMPTY STATES
   ============================================ */

.deck-needs-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-2);
}

.deck-needs-empty p {
  margin: 0 0 var(--space-2);
}

.deck-needs-empty p:last-child {
  margin-bottom: 0;
}

.deck-needs-empty .btn {
  margin-top: var(--space-2);
}

/* ============================================
   SUCCESS STATE
   ============================================ */

.deck-needs-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--success-subtle);
  border-radius: var(--radius-md);
  color: var(--success);
  font-weight: var(--font-medium);
}

.deck-needs-success-icon {
  font-size: var(--text-xl);
}

/* ============================================
   NEEDS LIST
   ============================================ */

.deck-needs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ============================================
   NEEDS ITEM
   ============================================ */

.deck-needs-item {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.deck-needs-item:hover {
  background: var(--surface-3);
  border-color: var(--border-default);
}

.deck-needs-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.deck-needs-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.deck-needs-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.deck-needs-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--text-lg);
  color: var(--text-3);
}

/* Info */
.deck-needs-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.deck-needs-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-needs-stats {
  font-size: var(--text-xs);
  color: var(--text-2);
}

.deck-needs-stats strong {
  color: var(--danger);
  font-weight: var(--font-semibold);
}

.deck-needs-owned {
  color: var(--text-3);
}

/* ============================================
   DARK MODE
   ============================================ */
  :is([data-theme="dark"] .deck-needs-success,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .deck-needs-success {
    background: var(--success-subtle);
    color: var(--success);
  }
}

@layer components{
/* Price display */
.price-link,
.price-text {
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
}

.price-link {
  color: var(--success);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.price-link:hover {
  color: var(--success);
  text-decoration: underline;
}

.price-text {
  color: var(--text-muted);
}

/* Price in card grid */
.card-price {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

/* Price in card detail */
.card-detail-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.card-detail-price .price-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.card-detail-price .price-link,
.card-detail-price .price-text {
  font-size: var(--text-base);
}

/* Collection/Deck value display */
.value-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.value-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.value-amount {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

/* Deck cost stats */
.deck-cost-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.cost-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.cost-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cost-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.cost-savings {
  font-size: var(--text-xs);
  color: var(--success);
}

.cost-stat--missing .cost-value {
  color: var(--warning);
}

/* Collection value display */
.collection-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.value-toggle {
  font-size: var(--text-xs);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-muted);
}

.toggle-label input[type="checkbox"] {
  accent-color: var(--input-border-focus);
}

/* Top valuable cards section */
.top-valuable-section {
  margin-bottom: var(--space-6);
}

.top-valuable-section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.top-valuable-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.top-valuable-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}

.top-rank {
  min-width: 2rem;
  color: var(--text-muted);
  font-weight: var(--font-semibold);
}

.top-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.top-card-link:hover {
  color: var(--link-hover);
}

.top-card-image {
  width: 40px;
  height: auto;
  border-radius: var(--radius-sm);
}

.top-card-info {
  display: flex;
  flex-direction: column;
}

.top-card-name {
  font-weight: var(--font-medium);
}

.top-card-set {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.top-card-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.top-card-qty {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Deck needs with prices */
.deck-needs-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.deck-needs-total-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.deck-needs-total-value {
  color: var(--warning);
  font-weight: var(--font-semibold);
}

.deck-needs-item {
  display: flex;
  align-items: center;
  padding-right: var(--space-2);
}

.deck-needs-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.deck-needs-price-total {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Deck index cost stat */
.deck-stat--cost .deck-stat-value {
  color: var(--success);
  font-size: var(--text-sm);
}

/* Deck show summary price stat */
.deck-stat-item--price .deck-stat-value {
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
}

@layer components{

/* Cookie Consent Banner */

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  background: var(--surface-1);
  border-top: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}

.cookie-consent-content {
  max-width: var(--container-lg);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie-consent-content p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-normal);
}

.cookie-consent-content p a {
  color: var(--link);
  text-decoration: underline;
}

.cookie-consent-content p a:hover {
  color: var(--link-hover);
}

.cookie-consent-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cookie-consent-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-consent-content p {
    margin-bottom: var(--space-2);
  }
}
}

@layer components{

/* Upgrade Prompt - inline premium feature gate */

.upgrade-prompt {
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.upgrade-prompt-text {
  color: var(--text-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .upgrade-prompt {
    background: var(--surface-3);
  }
}
}

@layer components{

/* Ad container styles */

.ad-container {
  margin: var(--space-4) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  max-width: 100%;
}

.ad-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-3);
  text-align: center;
  padding: var(--space-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: var(--text-3);
  font-size: var(--text-sm);
}
}

@layer components{

/* Test Hand Simulator Modal */

/* Base dialog styling - follows card-modal pattern */
.test-hand-modal {
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-xl);
  max-width: min(800px, 95vw);
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
}

/* Open state animation - reuses existing keyframes from dialog.css */
.test-hand-modal[open] {
  animation: modal-slide-in 0.2s ease-out;
}

/* Backdrop styling */
.test-hand-modal::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Content container */
.test-hand-content {
  padding: var(--space-6);
  max-height: 90vh;
  overflow-y: auto;
}

.test-hand-content h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  padding-right: var(--space-16);
}

/* Card grid - responsive on mobile, 7 columns on desktop */
.test-hand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .test-hand-cards {
    grid-template-columns: repeat(7, 1fr);
  }
}

.test-hand-card-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

/* Mulligan warning status */
.test-hand-mulligan {
  padding: var(--space-3) var(--space-4);
  background: var(--warning-subtle);
  color: var(--warning);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  text-align: center;
}

/* OK / ready status */
.test-hand-ok {
  padding: var(--space-3) var(--space-4);
  background: var(--success-subtle);
  color: var(--success);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  text-align: center;
}

/* Action buttons */
.test-hand-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}

/* Mobile full-screen - matches dialog.css pattern */
@media (max-width: 639px) {
  .test-hand-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .test-hand-content {
    padding: var(--space-4);
    max-height: 100vh;
    height: 100%;
  }
}

/* Prize Cards Section */
.test-hand-prizes {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}

.test-hand-prizes-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.test-hand-prizes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

@media (max-width: 639px) {
  .test-hand-prizes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Face-down prize card */
.prize-card-back {
  aspect-ratio: 63 / 88;
  width: 100%;
  background: var(--surface-3);
  background-image: radial-gradient(circle at 50% 50%, var(--surface-4) 0%, var(--surface-2) 100%);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0;
  font-family: inherit;
}

.prize-card-back:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.prize-card-back:active {
  transform: scale(0.97);
}

.prize-card-back:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.prize-card-back-symbol {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-3);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Revealed prize card */
.prize-card-back[data-revealed="true"] {
  background: none;
  border: none;
  cursor: default;
  padding: 0;
}

.prize-card-back[data-revealed="true"]:hover {
  transform: none;
  box-shadow: none;
}

.prize-card-back[data-revealed="true"] .test-hand-card-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .test-hand-modal[open] {
    animation: none;
  }

  .prize-card-back {
    transition: none;
  }
}
}

@layer components{
/* Username prompt - blocking setup page */
.username-prompt-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--space-4);
}

.username-prompt-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.username-prompt-card h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-1);
  margin-bottom: var(--space-2);
}

.username-prompt-subtitle {
  color: var(--text-2);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* Live availability status indicator */
.username-status {
  display: block;
  font-size: var(--text-sm);
  min-height: 1.25rem;
  margin-top: var(--space-1);
}

.username-status.checking {
  color: var(--text-3);
}

.username-status.available {
  color: var(--success);
}

.username-status.taken {
  color: var(--danger);
}
}

@layer components{

/* Visibility Selector - Segmented toggle for deck visibility settings */

.visibility-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.visibility-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.visibility-option:hover:not(.locked) {
  border-color: var(--border-default);
  background: var(--surface-3);
}

.visibility-option.active {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.visibility-option.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.visibility-option-label {
  font-weight: var(--font-semibold);
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.visibility-option-desc {
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Dark mode - explicit theme */
[data-theme="dark"] .visibility-option.active {
  background: var(--primary-900);
  border-color: var(--primary-400);
}

/* Dark mode - system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .visibility-option.active {
    background: var(--primary-900);
    border-color: var(--primary-400);
  }
}
}

@layer components{

/* Like Button Component
 * Heart icon with count for deck likes.
 * Used on deck cards, deck show pages, and profile listings.
 */

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.like-btn:hover {
  color: var(--text-1);
}

.like-btn--liked {
  color: oklch(0.65 0.25 15);
}

.like-btn--liked:hover {
  color: oklch(0.70 0.27 15);
}

.like-btn--animating {
  transform: scale(1.2);
  transition: transform 0.15s ease;
}

.like-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.like-count {
  font-size: var(--font-size-0);
  font-variant-numeric: tabular-nums;
}

/* Dark mode */
[data-theme="dark"] .like-btn {
  color: var(--text-2);
}

[data-theme="dark"] .like-btn:hover {
  color: var(--text-1);
}

[data-theme="dark"] .like-btn--liked {
  color: oklch(0.70 0.22 15);
}

[data-theme="dark"] .like-btn--liked:hover {
  color: oklch(0.75 0.24 15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .like-btn {
    color: var(--text-2);
  }

  :root:not([data-theme]) .like-btn:hover {
    color: var(--text-1);
  }

  :root:not([data-theme]) .like-btn--liked {
    color: oklch(0.70 0.22 15);
  }

  :root:not([data-theme]) .like-btn--liked:hover {
    color: oklch(0.75 0.24 15);
  }
}
}

@layer components{
/* Action buttons container - positioned inside the search input */
.search-input-actions {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 1;
}

/* Clear button */
.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.search-clear-btn:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

.search-clear-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.search-clear-btn[hidden] {
  display: none;
}

/* Help button */
.search-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.search-help-btn:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

.search-help-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Search Help Modal */
.search-help-modal {
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-xl);
  max-width: min(560px, 95vw);
  max-height: 85vh;
  width: 100%;
  overflow: hidden;
}

.search-help-modal[open] {
  animation: modal-slide-in 0.2s ease-out;
}

.search-help-modal::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-help-content {
  padding: var(--space-6);
  overflow-y: auto;
  max-height: 85vh;
}

.search-help-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-2) 0;
  padding-right: var(--space-16);
}

.search-help-intro {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 0 var(--space-4) 0;
}

.search-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.search-help-table th {
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--border-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-help-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-1);
}

.search-help-table code {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  white-space: nowrap;
}

.search-help-tips {
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.search-help-tips p {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0;
}

.search-help-tips p + p {
  margin-top: var(--space-1);
}

.search-help-tips code {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-1);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  color: var(--text-1);
}

/* Mobile full-screen */
@media (max-width: 639px) {
  .search-help-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .search-help-content {
    max-height: 100vh;
    padding: var(--space-4);
  }

  .search-help-table th:last-child,
  .search-help-table td:last-child {
    display: none;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .search-help-modal[open] {
    animation: none;
  }
}
}

/* Page-specific styles */

@layer pages{

/* Layout Styles */

/* Main layout structure */
body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  padding: var(--space-6) var(--space-4);
  overflow-x: hidden;
}

/* Container */
.container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Header */
.site-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.header-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-nav {
  display: flex;
  gap: var(--space-1);
}

.nav-link {
  color: var(--text-2);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-1);
  background: var(--surface-3);
}

.nav-link.active {
  color: var(--link);
  background: var(--primary-50);
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-full);
}

[data-theme="dark"] .nav-badge {
  background: var(--primary-900);
  color: var(--primary-200);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-badge {
    background: var(--primary-900);
    color: var(--primary-200);
  }
}
  :is([data-theme="dark"] .nav-link.active,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .nav-link.active {
    background: var(--primary-900);
  }

.header-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-account-link {
  text-decoration: none;
}

.user-account-link:hover .user-email {
  color: var(--text-1);
}

.user-email {
  font-size: var(--text-sm);
  color: var(--text-2);
  transition: color var(--transition-fast);
}

.auth-links {
  display: flex;
  gap: var(--space-2);
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--surface-3);
  border-color: var(--border-subtle);
  color: var(--text-1);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Footer */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-4);
  margin-top: auto;
}

.footer-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.footer-section p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.footer-section a {
  color: var(--text-2);
}

.footer-section a:hover {
  color: var(--link);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-legal a {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--link);
}

.footer-separator {
  color: var(--text-muted);
  font-size: var(--text-xs);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.footer-copyright {
  color: var(--text-muted);
}

.footer-disclaimer {
  max-width: var(--container-2xl);
  margin: var(--space-3) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.footer-disclaimer p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.footer-disclaimer p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }


  .footer-legal {
    justify-content: flex-start;
  }
}

/* Page headers */
.page-header {
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.page-description {
  font-size: var(--text-md);
  color: var(--text-2);
  margin: 0;
}

/* Section headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

/* Responsive */
@media (max-width: 640px) {
  .main-content {
    padding: var(--space-4) var(--space-3);
  }

  .header-nav {
    gap: 0;
    flex-wrap: wrap;
  }

  .page-title {
    font-size: var(--text-2xl);
  }
}
}

@layer pages{

/* Authentication Pages - Layout specific styles */

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--surface-1);
}

.auth-card {
  width: 100%;
  max-width: var(--container-xs);
  padding: var(--space-8);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.auth-card h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  text-align: center;
  color: var(--text-1);
}

.auth-subtitle {
  margin: 0 0 var(--space-5);
  text-align: center;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Auth-specific form group overrides */
.auth-form .form-group {
  margin-bottom: 0;
}

.auth-form .form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-2);
}

.auth-form .form-group input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-1);
  transition: border-color 0.2s ease;
}

.auth-form .form-group input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.auth-form .form-actions {
  margin-top: var(--space-2);
}

/* Auth-specific primary button (full width) */
.auth-form .btn-primary {
  width: 100%;
  background: var(--link);
  color: var(--text-inverse);
}

.auth-form .btn-primary:hover {
  background: var(--link-hover);
}

.auth-separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-2);
}

.auth-separator::before,
.auth-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-4);
}

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* OAuth Buttons */
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  background: var(--surface-1);
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  color: var(--text-1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-oauth:hover {
  background: var(--surface-2);
  border-color: var(--surface-3);
}

.oauth-icon {
  flex-shrink: 0;
}

.btn-google:hover {
  box-shadow: var(--shadow-sm);
}

.auth-switch,
.auth-forgot {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.auth-switch a,
.auth-forgot a {
  color: var(--link);
  text-decoration: none;
}

.auth-switch a:hover,
.auth-forgot a:hover {
  text-decoration: underline;
}
}

@layer pages{

/* ============================================
   BILLING - Pricing Page
   ============================================ */

.pricing-container {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-4);
}

.pricing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.pricing-header h1 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

.pricing-subtitle {
  max-width: var(--container-sm);
  margin: var(--space-2) 0 0;
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.billing-period-control {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-1);
}

.billing-period-label {
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.billing-toggle {
  display: inline-flex;
  padding: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.billing-toggle-btn {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.billing-toggle-btn:hover {
  color: var(--text-1);
}

.billing-toggle-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.billing-toggle-btn.active {
  color: var(--text-1);
  background: var(--surface-1);
  box-shadow: var(--shadow-xs);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.plan-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.plan-card--premium {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-md);
}

.plan-card-header {
  display: flex;
  min-height: var(--space-16);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.plan-card-header h2 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.plan-card-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.plan-recommended-badge {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  color: var(--primary-700);
  background: var(--primary-100);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

[data-theme="dark"] .plan-recommended-badge {
  color: var(--primary-300);
  background: var(--primary-900);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .plan-recommended-badge {
    color: var(--primary-300);
    background: var(--primary-900);
  }
}

.plan-price-section {
  min-height: var(--space-20);
  margin-bottom: var(--space-5);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.plan-price-amount {
  color: var(--text-1);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}

.plan-price-interval {
  color: var(--text-2);
  font-size: var(--text-sm);
}

.plan-savings {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  color: var(--success);
  background: var(--success-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.plan-features {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0 0 var(--space-6);
  list-style: none;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-1);
  font-size: var(--text-sm);
}

.plan-features li::before,
.feature-highlights li::before {
  display: inline-block;
  width: var(--space-5);
  height: var(--space-5);
  min-width: var(--space-5);
  background: var(--success);
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.plan-features-includes {
  color: var(--text-2);
  font-weight: var(--font-semibold);
}

.plan-features-includes::before {
  background: transparent !important;
}

.plan-cta {
  margin-top: auto;
}

.plan-cta form,
.plan-cta-button {
  width: 100%;
}

.plan-cta form .plan-cta-button {
  width: 100%;
  cursor: pointer;
}

.plan-current-status {
  display: flex;
  min-height: var(--space-12);
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.pricing-footnote {
  padding-top: var(--space-4);
  text-align: center;
}

.pricing-footnote p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-xs);
}

@media (max-width: 768px) {
  .pricing-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .billing-period-control,
  .billing-toggle {
    width: 100%;
  }

  .billing-toggle-btn {
    flex: 1;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pricing-container {
    padding: var(--space-3);
  }

  .pricing-header h1 {
    font-size: var(--text-2xl);
  }

  .plan-card {
    padding: var(--space-5);
  }
}

/* ============================================
   BILLING - Success Page
   ============================================ */

.billing-success {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.billing-success h1 {
  margin-bottom: var(--space-3);
  color: var(--primary-500);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

[data-theme="dark"] .billing-success h1 {
  color: var(--primary-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .billing-success h1 {
    color: var(--primary-400);
  }
}

.billing-success-subtitle {
  margin: 0 0 var(--space-8);
  color: var(--text-2);
  font-size: var(--text-lg);
}

.feature-highlights {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0 auto var(--space-8);
  list-style: none;
  text-align: left;
}

.feature-highlights li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-1);
  font-size: var(--text-base);
}

.billing-success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
}

@layer pages{

/* Card Browsing Styles */

/* Container */
.cards-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

/* Header */
.cards-header {
  margin-bottom: var(--space-5);
}

.cards-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
}

.cards-stats {
  color: var(--text-2);
  font-size: var(--text-sm);
}

/* Search Form */
.cards-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.cards-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-input-wrapper {
  display: flex;
  gap: var(--space-2);
}

.search-input-group {
  flex: 1;
  position: relative;
  min-width: 200px;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-16) 0 var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-1);
}

.search-input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.search-input::-moz-placeholder {
  color: var(--text-2);
}

.search-input::placeholder {
  color: var(--text-2);
}

/* Hide native clear button so it doesn't overlap the help icon */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.search-btn {
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

.search-clear {
  text-align: right;
}

.search-clear-link {
  font-size: var(--text-xs);
  color: var(--text-2);
}

.search-clear-link:hover {
  color: var(--link);
}

@media (max-width: 640px) {
  .cards-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .search-input-wrapper {
    width: 100%;
  }

  .search-input {
    min-width: 0;
  }
}

/* Card Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-5);
}

/* Scroll sentinel for infinite scroll - spans full width */
.scroll-sentinel {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: var(--space-6);
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-6);
  }
}

/* Focus states for keyboard navigation */
.card-link:focus-visible {
  outline: none;
}

.card-item:has(.card-link:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-shadow-hover);
}

/* Card Item - Collectible feel with premium interactions */
.card-item {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-subtle);
  transition: 
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.card-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-default);
}

/* Subtle glow in dark mode */
[data-theme="dark"] .card-item {
  box-shadow: var(--card-shadow), var(--card-glow);
}

[data-theme="dark"] .card-item:hover {
  box-shadow: var(--card-shadow-hover);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card-item {
    box-shadow: var(--card-shadow), var(--card-glow);
  }
  :root:not([data-theme]) .card-item:hover {
    box-shadow: var(--card-shadow-hover);
  }
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-image-wrapper {
  aspect-ratio: 63 / 88;  /* Standard Pokemon card ratio */
  overflow: hidden;
  background: var(--surface-3);
  position: relative;
}

/* Subtle inner shadow on image for depth */
.card-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
  pointer-events: none;
}

.card-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--transition-slow);
}

.card-item:hover .card-image {
  transform: scale(1.05);
}

.card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.card-info {
  padding: var(--space-3);
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
}

.card-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--leading-tight);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
  line-height: var(--leading-tight);
}

.card-set {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.card-rarity {
  margin-left: var(--space-2);
  white-space: nowrap;
  color: var(--text-3);
}

/* Loading */
.cards-loader {
  grid-column: 1 / -1;
  padding: var(--space-6);
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--link);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Card skeleton for loading states */
.card-skeleton {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.card-skeleton .card-image-wrapper {
  background: linear-gradient(
    90deg,
    var(--surface-3) 0%,
    var(--surface-4) 50%,
    var(--surface-3) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.card-skeleton .card-info {
  padding: var(--space-3);
}

.skeleton-line {
  height: 0.875rem;
  background: linear-gradient(
    90deg,
    var(--surface-3) 0%,
    var(--surface-4) 50%,
    var(--surface-3) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-line:first-child {
  width: 70%;
  margin-bottom: var(--space-2);
}

.skeleton-line:last-child {
  width: 50%;
  height: 0.75rem;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Card Detail */
.card-detail-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--link);
}

.card-detail {
  display: grid;
  gap: var(--space-6);
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .card-detail {
    grid-template-columns: 350px 1fr;
    padding: var(--space-8);
    gap: var(--space-8);
  }
}

.card-detail-info {
  min-width: 0;
}

/* Modal overrides live in the same cascade layer as the base card detail styles. */
.card-modal .card-detail-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.card-modal .card-detail-modal .card-detail-image {
  max-width: 280px;
  margin: 0 auto;
  flex-shrink: 0;
}

.card-modal .card-detail-modal .card-detail-header h1 {
  padding-right: var(--space-16);
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
}

@media (min-width: 900px) {
  .card-modal .card-detail-modal {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .card-modal .card-detail-modal .card-detail-image {
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 639px) {
  .card-modal .card-detail-modal .card-detail-image {
    max-width: 200px;
  }

  .card-modal .card-detail-modal .card-detail-header h1 {
    font-size: var(--text-xl);
  }
}

.card-detail-image {
  aspect-ratio: 63 / 88;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

/* Subtle frame around card image */
.card-detail-image::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--border-subtle) 0%, var(--border-default) 100%);
  border-radius: calc(var(--radius-lg) + 4px);
  z-index: -1;
}

.card-detail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.card-detail-placeholder {
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.card-detail-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-3);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.card-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Card sections */
.card-section {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}

.card-section:first-of-type {
  border-top: none;
  padding-top: var(--space-3);
}

.card-section h2 {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3);
}

.card-subtypes {
  color: var(--text-2);
  margin: 0;
}

.card-evolution {
  color: var(--text-2);
  font-style: italic;
  margin: var(--space-1) 0 0;
}

/* Abilities */
.ability {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--danger);
}

.ability:last-child {
  margin-bottom: 0;
}

.ability h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--text-1);
}

.ability-tag {
  width: 92px;
  height: auto;
  flex-shrink: 0;
}

.ability-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: var(--font-bold);
  color: var(--danger);
  letter-spacing: 0.05em;
}

.ability p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Attacks */
.attack {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.attack:last-child {
  margin-bottom: 0;
}

.attack-gx {
  background: linear-gradient(120deg, var(--surface-2), var(--info-subtle));
  border-left: 3px solid var(--info);
}

.attack-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.attack-cost {
  display: flex;
  gap: 3px;
}

.energy-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.type-badge .energy-icon {
  width: 16px;
  height: 16px;
}

.energy-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.attack h3 {
  min-width: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--text-1);
}

.gx-tag {
  width: 35px;
  height: auto;
  vertical-align: -0.15em;
}

@media (max-width: 479px) {
  .attack-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .attack-cost {
    grid-column: 1 / -1;
  }
}

.attack-damage {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.attack-text {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Stats row */
.card-stats-row {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.stat-group {
  min-width: 60px;
}

.stat-group h3 {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-1);
}

.card-stats-row .stat-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}


/* Rules */
.rule-text {
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  border-left: 2px solid var(--warning);
}

.rule-text:last-child {
  margin-bottom: 0;
}

/* Flavor text */
.flavor-text {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--leading-relaxed);
  margin: 0;
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

/* Collector info */
.collector-info {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.info-grid dt {
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.info-grid dd {
  margin: 0;
  color: var(--text-1);
}

/* Related cards */
.related-cards {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.related-cards h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
}

.related-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .related-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-5);
  }
}

/* Autocomplete dropdown */
.search-container {
  position: relative;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0 0;
  z-index: 1000;
}

.autocomplete-results[hidden] {
  display: none;
}

.autocomplete-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.autocomplete-item:hover {
  background: var(--surface-2);
}

.autocomplete-item[aria-selected="true"],
.autocomplete-item.selected {
  background: var(--primary-100);
  outline: 2px solid var(--link);
  outline-offset: -2px;
}

[data-theme="dark"] .autocomplete-item[aria-selected="true"],
[data-theme="dark"] .autocomplete-item.selected {
  background: var(--primary-800);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .autocomplete-item[aria-selected="true"],
  :root:not([data-theme]) .autocomplete-item.selected {
    background: var(--primary-800);
  }
}

.autocomplete-label {
  font-weight: var(--font-medium);
}

.autocomplete-hint {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* Prefix suggestions have monospace styling */
.autocomplete-item[data-type="prefix"] .autocomplete-label {
  font-family: var(--font-mono);
  color: var(--link);
}

/* Evolution Line */
.evolution-section {
  margin-top: var(--space-6);
}

.evolution-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.card-section.evolution-section h2 {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Text-based evolution chain */
.evolution-chain-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.evolution-arrow-text {
  color: var(--text-muted);
  padding: 0 var(--space-1);
}

.evolution-current-text {
  color: var(--text-1);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  background: var(--primary-100);
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .evolution-current-text {
  background: var(--primary-800);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .evolution-current-text {
    background: var(--primary-800);
  }
}

.evolution-link {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.evolution-link:hover {
  background: var(--surface-3);
  text-decoration: none;
}

/* Card item controls - collection buttons below card */
.card-item-controls {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}

/* Card detail collection section */
.card-detail-collection {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Advanced search link (in filter bar) */
.search-advanced-link {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-left: auto;
  transition: color var(--transition-fast);
}

.search-advanced-link:hover {
  color: var(--link);
}

/* Advanced Search */
.advanced-search-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-6);
}

.advanced-search-header {
  margin-bottom: var(--space-6);
}

.advanced-search-header h1 {
  margin-bottom: var(--space-2);
}

.advanced-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 640px) {
  .advanced-search-grid {
    grid-template-columns: 1fr;
  }
}

.advanced-search-grid .form-group {
  margin-bottom: 0;
}

.advanced-search-full-width {
  grid-column: 1 / -1;
}

.hp-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hp-range-inputs .form-input {
  flex: 1;
}

.hp-range-separator {
  color: var(--text-3);
  font-weight: var(--font-medium);
}

.query-preview {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.query-preview-label {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--space-2);
}

.query-preview-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text-1);
  min-height: 1.5em;
}

.query-preview-value.is-empty {
  color: var(--text-3);
  font-family: inherit;
}

.syntax-reference {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.syntax-reference h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.syntax-reference code {
  font-size: var(--text-sm);
}

.syntax-reference table {
  font-size: var(--text-sm);
}

.syntax-table-wrapper {
  overflow-x: auto;
}

.syntax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.syntax-table th,
.syntax-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.syntax-table th {
  font-weight: var(--font-semibold);
  color: var(--text-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.syntax-table td {
  color: var(--text-1);
}

.syntax-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
}
}

@layer pages{
/* Filter chips styling */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-3);
  margin-bottom: var(--space-4);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--primary-100);
  color: var(--primary-800);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.chip:hover {
  background: var(--primary-200);
}

.chip-label {
  font-weight: var(--font-medium);
}

.chip-value {
  color: var(--primary-700);
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  margin-left: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--primary-300);
  color: var(--primary-800);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
}

.chip:hover .chip-remove {
  background: var(--primary-400);
}

/* Dark mode for primary chips */
[data-theme="dark"] .chip {
  background: var(--primary-900);
  color: var(--primary-200);
}

[data-theme="dark"] .chip:hover {
  background: var(--primary-800);
}

[data-theme="dark"] .chip-value {
  color: var(--primary-300);
}

[data-theme="dark"] .chip-remove {
  background: var(--primary-700);
  color: var(--primary-200);
}

[data-theme="dark"] .chip:hover .chip-remove {
  background: var(--primary-600);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .chip {
    background: var(--primary-900);
    color: var(--primary-200);
  }

  :root:not([data-theme]) .chip:hover {
    background: var(--primary-800);
  }

  :root:not([data-theme]) .chip-value {
    color: var(--primary-300);
  }

  :root:not([data-theme]) .chip-remove {
    background: var(--primary-700);
    color: var(--primary-200);
  }

  :root:not([data-theme]) .chip:hover .chip-remove {
    background: var(--primary-600);
  }
}

/* Active chip state */
.chip--active {
  background: var(--primary-600);
  color: white;
}

.chip--active:hover {
  background: var(--primary-700);
}

[data-theme="dark"] .chip--active {
  background: var(--primary-500);
  color: white;
}

[data-theme="dark"] .chip--active:hover {
  background: var(--primary-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .chip--active {
    background: var(--primary-500);
    color: white;
  }

  :root:not([data-theme]) .chip--active:hover {
    background: var(--primary-400);
  }
}

.chip-search {
  background: var(--neutral-200);
  color: var(--neutral-800);
}

.chip-search:hover {
  background: var(--neutral-300);
}

.chip-search .chip-remove {
  background: var(--neutral-400);
}

.chip-search:hover .chip-remove {
  background: var(--neutral-500);
}

/* Dark mode for search chips */
[data-theme="dark"] .chip-search {
  background: var(--neutral-800);
  color: var(--neutral-200);
}

[data-theme="dark"] .chip-search:hover {
  background: var(--neutral-700);
}

[data-theme="dark"] .chip-search .chip-remove {
  background: var(--neutral-600);
}

[data-theme="dark"] .chip-search:hover .chip-remove {
  background: var(--neutral-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .chip-search {
    background: var(--neutral-800);
    color: var(--neutral-200);
  }

  :root:not([data-theme]) .chip-search:hover {
    background: var(--neutral-700);
  }

  :root:not([data-theme]) .chip-search .chip-remove {
    background: var(--neutral-600);
  }

  :root:not([data-theme]) .chip-search:hover .chip-remove {
    background: var(--neutral-500);
  }
}

.clear-all-link {
  font-size: var(--text-xs);
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.clear-all-link:hover {
  color: var(--text-1);
}

/* Filter links (plain text style, used alongside chip tabs) */
.filter-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.filter-link {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.filter-link:hover {
  color: var(--text-1);
}

.filter-link--active {
  color: var(--text-1);
  font-weight: var(--font-medium);
  border-bottom-color: var(--link);
}

/* Sort options */
.sort-options {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.sort-options label {
  color: var(--text-2);
}

.sort-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-1);
  font-size: var(--text-xs);
}

/* Responsive */
@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .sort-options {
    width: 100%;
    justify-content: flex-end;
  }
}
}

@layer pages{
/* Deck List Page */
.decks-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.decks-header {
  margin-bottom: var(--space-5);
}

.decks-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.decks-header h1 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

.decks-header-copy p {
  margin: var(--space-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.decks-stats {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.decks-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

/* Deck Tabs Navigation */
.decks-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.decks-tab {
  position: relative;
  padding: var(--space-3) 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.decks-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  border-radius: var(--radius-full);
  content: "";
  transition: background-color var(--transition-fast);
}

.decks-tab:hover {
  color: var(--text-1);
}

.decks-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

.decks-tab--active {
  color: var(--text-1);
}

.decks-tab--active::after {
  background: var(--link);
}

/* Browse Grid (used for Browse, Liked, and My Decks tabs) */
.decks-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

/* Compact landscape deck listing card */
.deck-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.deck-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.deck-card:has(.deck-card__link:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
}

.deck-card__link {
  display: grid;
  min-height: calc(var(--space-20) * 2);
  grid-template-columns: minmax(var(--space-24), 38%) minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}

.deck-card__link:hover {
  color: inherit;
}

.deck-card__link:focus-visible {
  outline: none;
}

.deck-card__image {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-3);
  border-right: 1px solid var(--border-subtle);
}

.deck-card__image--preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.deck-card__image--card img {
  width: auto;
  max-width: 85%;
  height: calc(100% - var(--space-4));
  -o-object-fit: contain;
     object-fit: contain;
}

.deck-card__placeholder {
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-3);
}

.deck-card__placeholder svg {
  width: var(--space-10);
  height: var(--space-10);
}

.deck-card__placeholder span {
  font-size: var(--text-xs);
}

.deck-card__info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.deck-card__name {
  margin: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-card__meta,
.deck-card__details {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deck-card__meta {
  justify-content: space-between;
}

.deck-card__count,
.deck-card__details {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.deck-card__details {
  min-height: var(--space-4);
  margin-top: auto;
}

.deck-card__visibility {
  color: var(--warning);
}

.deck-card__folder {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-md);
}

.deck-card__actions {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  display: flex;
}

/* Curated Sections */
.curated-section {
  margin-bottom: var(--space-8);
}

.curated-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.curated-section__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.curated-section__see-all {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.curated-section__see-all:hover {
  color: var(--link-hover);
}

/* Browse Results Info */
.browse-results-info,
.deck-list-summary {
  margin: 0 0 var(--space-4);
  color: var(--text-2);
  font-size: var(--text-sm);
}

/* Deck Card Actions (like button outside link) */
.deck-card-actions {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
}

/* Folder Navigation */
.folder-nav {
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.folder-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.folder-item {
  margin: 0;
}

.folder-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.folder-link:hover {
  background: var(--surface-3);
  border-color: var(--surface-4);
}

.folder-link--active {
  background: var(--primary-100);
  border-color: var(--primary-300);
  color: var(--primary-800);
}

[data-theme="dark"] .folder-link--active {
  background: var(--primary-900);
  border-color: var(--primary-700);
  color: var(--primary-200);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .folder-link--active {
    background: var(--primary-900);
    border-color: var(--primary-700);
    color: var(--primary-200);
  }
}

.folder-name {
  font-weight: var(--font-medium);
}

.folder-count {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-full);
  min-width: 1.5em;
  text-align: center;
}

/* Folder Actions (rename/remove) */
.folder-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.folder-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.folder-rename-toggle {
  position: relative;
}

.folder-rename-toggle summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.folder-rename-toggle summary::-webkit-details-marker {
  display: none;
}

.folder-rename-form {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.folder-rename-input {
  width: 160px;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
}

.folder-remove-btn {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.folder-remove-btn:hover:not(:disabled) {
  color: var(--danger);
}

.folder-link--active .folder-count {
  background: var(--primary-200);
}

[data-theme="dark"] .folder-link--active .folder-count {
  background: var(--primary-800);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .folder-link--active .folder-count {
    background: var(--primary-800);
  }
}

/* Responsive: Browse grid and deck cards */
@media (max-width: 640px) {
  .decks-header-top {
    flex-direction: column;
  }

  .decks-actions {
    width: 100%;
  }

  .decks-actions .btn {
    flex: 1;
  }

  .decks-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .decks-tabs::-webkit-scrollbar {
    display: none;
  }

  .decks-browse-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Deck stat elements (used on show page) */
.deck-stat {
  display: flex;
  flex-direction: column;
}

.deck-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.deck-stat-label {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* Deck Show Page */
.deck-show-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.deck-show-header {
  margin-bottom: var(--space-6);
}

.deck-show-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.deck-show-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.deck-show-title h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-show-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deck-show-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.deck-action-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deck-show-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* Notes + Stats side by side */
.deck-info-row {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.deck-info-row .deck-stats-panel {
  flex-shrink: 0;
  width: 280px;
}

.deck-info-row .deck-notes {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Deck Tabs */
.deck-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-1);
}

.deck-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.deck-tab:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

.deck-tab--active {
  background: var(--primary-600);
  color: oklch(98% 0 0);
}

.deck-tab--active:hover {
  background: var(--primary-700);
  color: oklch(98% 0 0);
}

/* Deck Actions Dropdown */
.deck-actions-dropdown {
  position: relative;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  min-width: 36px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 50;
  min-width: 180px;
  padding: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-1);
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--surface-3);
}

.dropdown-item svg {
  color: var(--text-2);
  flex-shrink: 0;
}

.dropdown-divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border-subtle);
}

/* Clone Attribution */
.deck-clone-attribution {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.deck-clone-attribution a {
  color: var(--link);
  text-decoration: none;
}

.deck-clone-attribution a:hover {
  text-decoration: underline;
}

/* Clone Count (legacy) */
.deck-clone-count {
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* Social Stats (views, clones) */
.deck-social-stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.deck-social-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.deck-social-stat svg {
  opacity: 0.7;
}

/* Deck Stats Panel */
.deck-stats-panel {
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.deck-stats-summary {
  display: flex;
  gap: var(--space-6);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.deck-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deck-stat-item .deck-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.deck-stat-item .deck-stat-label {
  font-size: var(--text-xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stats Breakdown with Visual Bars */
.deck-stats-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.deck-stat-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.deck-stat-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.deck-stat-bar-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-1);
}

.deck-stat-bar-count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.deck-stat-bar-track {
  height: 6px;
  background: var(--surface-4);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.deck-stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Type-specific bar colors */
.deck-stat-bar--pokemon {
  background: linear-gradient(90deg, oklch(55% 0.16 25), oklch(60% 0.18 30));
}

.deck-stat-bar--trainer {
  background: linear-gradient(90deg, oklch(55% 0.16 250), oklch(60% 0.18 250));
}

.deck-stat-bar--energy {
  background: linear-gradient(90deg, oklch(55% 0.16 90), oklch(65% 0.18 70));
}

[data-theme="dark"] .deck-stat-bar--pokemon {
  background: linear-gradient(90deg, oklch(60% 0.18 25), oklch(65% 0.20 30));
}

[data-theme="dark"] .deck-stat-bar--trainer {
  background: linear-gradient(90deg, oklch(60% 0.18 250), oklch(65% 0.18 250));
}

[data-theme="dark"] .deck-stat-bar--energy {
  background: linear-gradient(90deg, oklch(70% 0.16 90), oklch(75% 0.18 70));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .deck-stat-bar--pokemon {
    background: linear-gradient(90deg, oklch(60% 0.18 25), oklch(65% 0.20 30));
  }

  :root:not([data-theme]) .deck-stat-bar--trainer {
    background: linear-gradient(90deg, oklch(60% 0.18 250), oklch(65% 0.18 250));
  }

  :root:not([data-theme]) .deck-stat-bar--energy {
    background: linear-gradient(90deg, oklch(70% 0.16 90), oklch(75% 0.18 70));
  }
}

/* Legacy deck-stats class for backwards compatibility */
.deck-stats {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

/* Deck Notes */
.deck-notes {
  margin-bottom: var(--space-6);
}

.deck-notes h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.deck-notes-content {
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Deck Cards Section */

/* Flash prevention for view toggle (CSS matches inline script) */
[data-deck-view="grid"] [data-view-toggle-target="listView"] { display: none; }
[data-deck-view="grid"] [data-view-toggle-target="gridView"] { display: block !important; }
[data-deck-view="stacked"] [data-view-toggle-target="listView"] { display: none; }
[data-deck-view="stacked"] [data-view-toggle-target="gridView"] { display: none; }
[data-deck-view="stacked"] [data-view-toggle-target="stackedView"] { display: block !important; }

.deck-cards-section {
  margin-bottom: var(--space-6);
}

.deck-cards-section h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}

.deck-card-group {
  margin-bottom: var(--space-5);
}

.deck-group-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}

.deck-group-count {
  font-weight: var(--font-normal);
  color: var(--text-2);
}

.deck-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Deck Card Entry (within deck) - Note: this uses .deck-card class but in deck list context */
.deck-card-list .deck-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.deck-card-thumbnail {
  width: 48px;
  height: auto;
  border-radius: var(--radius-sm);
}

.deck-card-placeholder {
  width: 48px;
  height: 66px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--text-2);
}

.deck-card-info {
  flex: 1;
  min-width: 0;
}

.deck-card-info h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.deck-card-info a {
  color: inherit;
  text-decoration: none;
}

.deck-card-info a:hover {
  text-decoration: underline;
}

.deck-card-list .deck-card-meta {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
}

.deck-card-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.quantity-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.quantity-btn:hover {
  background: var(--surface-3);
}

.quantity-display {
  min-width: 24px;
  text-align: center;
  font-weight: var(--font-semibold);
}

.deck-card-remove {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: color 0.15s ease, background 0.15s ease;
}

.deck-card-remove:hover {
  color: var(--danger);
  background: var(--danger-subtle);
}

.deck-empty-cards {
  text-align: center;
  padding: var(--space-8);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  color: var(--text-2);
}

.deck-empty-cards a {
  color: var(--link);
}

/* Danger Zone */
.deck-danger-zone {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--surface-3);
}

.deck-danger-zone h2 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--danger);
  margin-bottom: var(--space-4);
}

.danger-zone-content {
  padding: var(--space-4);
  background: var(--danger-subtle);
  border: 1px solid oklch(75% 0.10 25);
  border-radius: var(--radius-lg);
}

[data-theme="dark"] .danger-zone-content {
  border-color: oklch(35% 0.10 25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .danger-zone-content {
    border-color: oklch(35% 0.10 25);
  }
}

.danger-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.danger-description strong {
  display: block;
  margin-bottom: var(--space-1);
}

.danger-description p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* Deck Form Page */
.deck-form-container {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: var(--space-4);
}

.deck-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.deck-form-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0;
}

.deck-form {
  background: var(--surface-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

/* Probability Calculator */
.probability-calculator {
  padding: var(--space-5);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.probability-calculator h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-4) 0;
}

.probability-controls {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.probability-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.probability-control label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-2);
}

.probability-control input {
  width: 80px;
  padding: var(--space-2);
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  font-size: var(--text-sm);
  text-align: center;
}

.probability-control input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.probability-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.probability-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.probability-table th,
.probability-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--surface-3);
}

.probability-table th {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.probability-table tbody tr:hover {
  background: var(--surface-3);
}

.probability-card-name {
  font-weight: var(--font-medium);
}

.probability-copies {
  text-align: center;
  color: var(--text-2);
}

.probability-value {
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}

/* Color coding for probability values */
.prob-high {
  color: var(--success);
  font-weight: var(--font-semibold);
}

.prob-medium {
  color: var(--warning);
}

.prob-low {
  color: var(--text-2);
}

.probability-note {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
}

/* Import Page */
.import-instructions {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--info-subtle);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-lg);
}

.import-instructions p {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-sm);
}

[data-theme="dark"] .import-instructions {
  border-color: var(--primary-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .import-instructions {
    border-color: var(--primary-700);
  }
}

.import-textarea {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  min-height: 400px;
}

/* Export Page */
.export-instructions {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--info-subtle);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-lg);
}

.export-instructions p {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-sm);
}

[data-theme="dark"] .export-instructions {
  border-color: var(--primary-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .export-instructions {
    border-color: var(--primary-700);
  }
}

.export-container {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.export-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--surface-3);
}

.copy-feedback {
  font-size: var(--text-xs);
  color: var(--success);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.copy-feedback.visible {
  opacity: 1;
}

.export-text {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-1);
  overflow-x: auto;
}

.export-formats {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.export-format-section {
  /* no extra styling needed, just groups heading + container */
}

.export-format-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2) 0;
  color: var(--text-1);
}

.export-stats {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.export-stats p {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
}

.export-stats p:last-child {
  margin-bottom: 0;
}

.visibility-locked {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-md);
}

.upgrade-link {
  margin-left: var(--space-2);
  color: var(--brand);
}

/* Settings Page */
.deck-settings-container {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-4);
}

.deck-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.deck-settings-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0;
}

.deck-settings-info {
  margin-bottom: var(--space-6);
}

.deck-settings-info h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}

.deck-settings-info-content {
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.deck-settings-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.deck-settings-field:last-child {
  border-bottom: none;
}

.deck-settings-label {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.deck-settings-value {
  font-weight: var(--font-medium);
  color: var(--text-1);
}

.deck-settings-edit {
  display: flex;
  justify-content: flex-end;
}

.deck-settings-visibility {
  margin-bottom: var(--space-6);
}

.deck-settings-visibility h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}


/* View Toggle */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: none;
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle-btn:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

.view-toggle-btn--active {
  background: var(--surface-3);
  color: var(--text-1);
}

.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--surface-4);
}

/* Deck Cards Toolbar */
.deck-cards-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Sort/Group Controls */
.deck-sort-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deck-sort-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.deck-sort-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: var(--text-sm);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  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='%236b7280' stroke-width='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-1) center;
}

.deck-sort-select:hover {
  border-color: var(--border-default);
  color: var(--text-1);
}

.deck-sort-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px oklch(58% 0.18 250 / 0.2);
}

@media (max-width: 640px) {
  .deck-cards-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .deck-cards-toolbar .deck-filter-input-wrapper {
    order: 4;
    width: 100%;
  }

  .deck-sort-controls {
    order: 3;
    width: 100%;
  }
}

/* ============================================
   DECK CARD FILTER
   ============================================ */

.deck-filter-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
}

.deck-filter-icon {
  position: absolute;
  left: var(--space-2);
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.deck-filter-input {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-8) 0 calc(14px + var(--space-3));
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  transition: var(--transition-fast);
  transition-property: border-color, box-shadow;
}

.deck-filter-input::-moz-placeholder {
  color: var(--input-placeholder);
}

.deck-filter-input::placeholder {
  color: var(--input-placeholder);
}

.deck-filter-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.deck-filter-clear {
  position: absolute;
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.deck-filter-clear:hover {
  color: var(--text-1);
  background: var(--surface-4);
}

.deck-filter-clear:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: -1px;
}

.deck-filter-count {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.deck-filter-no-results {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* Hide filtered-out cards and groups */
.deck-filter-hidden {
  display: none !important;
}

/* Deck Grid View */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.deck-grid-card {
  position: relative;
  cursor: default;
}

.deck-grid-card-image {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.deck-grid-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.deck-grid-qty {
  position: absolute;
  bottom: var(--space-1);
  right: var(--space-1);
  background: oklch(15% 0.02 250 / 0.85);
  color: oklch(98% 0 0);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  line-height: 1;
  pointer-events: none;
}

/* Grid View Group Headers */
.deck-grid-group {
  margin-bottom: var(--space-5);
}

.deck-grid-group-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}

/* Stacked/Pile View */
.deck-stacked-layout {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.deck-stacked-preview {
  display: none;
}

.deck-stacked-groups {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.deck-stacked-group {
  flex: 1;
  min-width: 0;
}

.deck-stacked-group-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}

.deck-stacked-pile {
  display: flex;
  flex-direction: column;
}

.deck-pile-card {
  position: relative;
  cursor: default;
  width: 120px;
}

.deck-pile-card + .deck-pile-card {
  margin-top: -140px;
}

.deck-pile-card-image {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}

.deck-pile-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.deck-pile-card:hover {
  z-index: 2;
}

.deck-pile-card:hover .deck-pile-card-image {
  box-shadow: var(--shadow-lg);
}

.deck-pile-card.is-active {
  z-index: 2;
}

.deck-pile-card.is-active .deck-pile-card-image {
  box-shadow: 0 0 0 2px var(--primary-400);
}

/* Responsive */
@media (max-width: 768px) {
  .deck-show-badges {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .deck-show-container {
    padding: var(--space-3);
  }

  .deck-show-header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .deck-show-title {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .deck-show-title h1 {
    font-size: var(--text-2xl);
    white-space: normal;
  }

  .deck-show-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .deck-info-row {
    flex-direction: column;
  }

  .deck-info-row .deck-stats-panel {
    width: 100%;
  }

  .deck-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .deck-tabs::-webkit-scrollbar {
    display: none;
  }

  .deck-show-actions {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }

  .deck-action-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .deck-action-buttons .btn {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }

  .deck-stats {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .deck-stats-panel {
    padding: var(--space-3);
  }

  .danger-action {
    flex-direction: column;
    align-items: flex-start;
  }

  .deck-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-2);
  }

  .deck-stacked-layout {
    flex-direction: column;
  }

  .deck-stacked-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    min-height: 200px;
  }

  .deck-stacked-preview img {
    display: none;
    width: 180px;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .deck-stacked-preview.has-image img {
    display: block;
  }

  .deck-stacked-preview.has-image .deck-stacked-preview-hint {
    display: none;
  }

  .deck-stacked-preview-hint {
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .deck-stacked-groups {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .deck-stacked-group {
    flex: 0 0 calc(50% - var(--space-2));
  }

  .deck-pile-card {
    width: 100%;
  }

  .deck-pile-card + .deck-pile-card {
    margin-top: -180px;
  }

  .deck-card-list .deck-card {
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .deck-card-thumbnail {
    width: 40px;
  }

  .deck-card-controls {
    gap: var(--space-1-5);
    flex-shrink: 0;
  }

  .quantity-btn {
    width: 24px;
    height: 24px;
  }

  .quantity-btn svg {
    width: 14px;
    height: 14px;
  }

  .quantity-display {
    min-width: 20px;
    font-size: var(--text-sm);
  }

  .deck-card-remove {
    width: 24px;
    height: 24px;
  }

  .deck-card-remove svg {
    width: 14px;
    height: 14px;
  }

  .deck-card-info h4 {
    font-size: var(--text-xs);
  }

  .deck-card-list .deck-card-meta {
    font-size: 0.65rem;
  }

  .probability-calculator {
    padding: var(--space-3);
  }

  .probability-table {
    min-width: 480px;
  }

  .probability-table th,
  .probability-table td {
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-sm);
  }
}

/* Deck Image Generator */
.deck-image-generating {
  position: relative;
}

.deck-image-generating::after {
  content: "Generating...";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-backdrop);
  color: var(--text-1);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

/* ============================================
   DECK COMPARISON
   ============================================ */

.deck-compare-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.deck-compare-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.deck-compare-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.deck-compare-title span {
  color: var(--text-2);
  font-weight: var(--font-normal);
}

/* Deck Selector */
.deck-compare-selector {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.deck-compare-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.deck-compare-form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  white-space: nowrap;
}

.deck-compare-select {
  flex: 1;
  min-width: 200px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-size: var(--text-sm);
  color: var(--text-1);
}

.deck-compare-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Summary Stats */
.deck-compare-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.deck-compare-summary-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  font-size: var(--text-sm);
}

.deck-compare-summary-stat--removed {
  background: var(--danger-subtle);
}

.deck-compare-summary-stat--added {
  background: var(--success-subtle);
}

.deck-compare-summary-stat--changed {
  background: var(--warning-subtle);
}

.deck-compare-summary-icon {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  line-height: 1;
}

.deck-compare-summary-stat--removed .deck-compare-summary-icon {
  color: var(--danger);
}

.deck-compare-summary-stat--added .deck-compare-summary-icon {
  color: var(--success);
}

.deck-compare-summary-stat--changed .deck-compare-summary-icon {
  color: var(--warning);
}

.deck-compare-summary-count {
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}

.deck-compare-summary-label {
  color: var(--text-2);
}

/* Two-Column Layout */
.deck-compare-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.deck-compare-column {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
}

.deck-compare-column-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
}

.deck-compare-column-header--removed {
  border-bottom-color: var(--danger);
}

.deck-compare-column-header--added {
  border-bottom-color: var(--success);
}

.deck-compare-column-count {
  font-weight: var(--font-normal);
  color: var(--text-2);
}

/* Card List */
.deck-compare-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deck-compare-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: background var(--transition-fast);
}

.deck-compare-card:hover {
  background: var(--surface-3);
}

.deck-compare-card--removed {
  border-left: 3px solid var(--danger);
}

.deck-compare-card--added {
  border-left: 3px solid var(--success);
}

.deck-compare-card-thumb {
  width: 36px;
  height: auto;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.deck-compare-card-qty {
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  min-width: 2em;
  text-align: right;
  flex-shrink: 0;
}

.deck-compare-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-compare-card-name a {
  color: var(--text-1);
  text-decoration: none;
}

.deck-compare-card-name a:hover {
  text-decoration: underline;
  color: var(--link);
}

.deck-compare-card-indicator {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  flex-shrink: 0;
  width: 1.5em;
  text-align: center;
}

.deck-compare-card--removed .deck-compare-card-indicator {
  color: var(--danger);
}

.deck-compare-card--added .deck-compare-card-indicator {
  color: var(--success);
}

.deck-compare-empty {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: var(--space-4);
  text-align: center;
}

/* Changed Quantities Section */
.deck-compare-changes {
  margin-bottom: var(--space-6);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
}

.deck-compare-section-header {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--warning);
}

.deck-compare-change-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deck-compare-change-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border-left: 3px solid var(--warning);
  transition: background var(--transition-fast);
}

.deck-compare-change-row:hover {
  background: var(--surface-3);
}

.deck-compare-qty-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.deck-compare-qty-old {
  color: var(--text-2);
}

.deck-compare-qty-arrow {
  color: var(--text-muted);
}

.deck-compare-qty-new {
  font-weight: var(--font-semibold);
}

.deck-compare-qty-diff {
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.deck-compare-qty-diff--plus {
  color: var(--success);
  background: var(--success-subtle);
}

.deck-compare-qty-diff--minus {
  color: var(--danger);
  background: var(--danger-subtle);
}

/* Shared Cards (Collapsible) */
.deck-compare-shared {
  margin-bottom: var(--space-6);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
}

.deck-compare-shared-toggle {
  cursor: pointer;
  border-bottom-color: var(--border-subtle);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.deck-compare-shared-toggle::marker {
  color: var(--text-2);
}

.deck-compare-shared-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.deck-compare-shared[open] .deck-compare-shared-toggle {
  margin-bottom: var(--space-3);
}

/* Responsive */
@media (max-width: 768px) {
  .deck-compare-header {
    flex-wrap: wrap;
  }

  .deck-compare-columns {
    grid-template-columns: 1fr;
  }

  .deck-compare-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 640px) {
  .deck-compare-summary {
    grid-template-columns: 1fr;
  }

  .deck-compare-form {
    flex-direction: column;
    align-items: stretch;
  }

  .deck-compare-change-row {
    flex-wrap: wrap;
  }

  .deck-compare-card-name {
    white-space: normal;
  }
}
}

@layer pages{

/*
 * Deck Editor Layout
 *
 * Two-panel CSS Grid layout for Hearthstone-style deck building.
 * Search panel on the left, deck list on the right.
 * Each panel scrolls independently.
 */

/* ============================================
   EDITOR CONTAINER
   ============================================ */

.deck-editor-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-6);
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
  height: calc(100vh - 80px); /* Account for header */
}

/* ============================================
   SEARCH PANEL (Left)
   ============================================ */

.search-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}

.search-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.search-panel-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
}

/* Collection toggle button */
.collection-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
}

.collection-toggle:hover {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--border-default);
}

.collection-toggle--active {
  color: var(--green-7);
  background: oklch(from var(--green-7) l c h / 0.1);
  border-color: var(--green-7);
}

.collection-toggle--active:hover {
  color: var(--green-8);
  background: oklch(from var(--green-8) l c h / 0.15);
  border-color: var(--green-8);
}
  :is([data-theme="dark"] .collection-toggle--active,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .collection-toggle--active {
    color: var(--green-5);
    background: oklch(from var(--green-5) l c h / 0.1);
    border-color: var(--green-5);
  }

.collection-toggle svg {
  flex-shrink: 0;
}

.search-panel-content {
  flex: 1;
  overflow-y: auto;
}

.search-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-3);
  text-align: center;
}

/* Search Form */
.search-panel-form {
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  position: relative;
}

.search-input-wrapper {
  display: flex;
  gap: var(--space-2);
}

.search-input {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--text-sm);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.search-input::-moz-placeholder {
  color: var(--text-3);
}

.search-input::placeholder {
  color: var(--text-3);
}

.search-submit {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
}

/* ============================================
   SEARCH RESULTS
   ============================================ */

.search-results-header {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--space-3);
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.search-result-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-result-card:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

.search-result-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88; /* Standard card ratio */
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-3);
}

.search-result-add-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0% 0 0 / 0.6);
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}

.search-result-card:hover .search-result-add-btn {
  opacity: 1;
}

.search-result-add-btn:focus {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.search-result-add-btn .add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  transition: transform 0.1s ease;
}

.search-result-add-btn:hover .add-icon {
  transform: scale(1.1);
}

.search-result-add-btn:active .add-icon {
  transform: scale(0.95);
}

/* Empty and Prompt States */
.search-results-empty,
.search-results-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  color: var(--text-2);
}

.search-results-empty p,
.search-results-prompt p {
  margin: 0;
}

.search-results-hint {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--space-2) !important;
  line-height: 1.6;
}

.search-results-hint code {
  background: var(--surface-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* ============================================
   DECK PANEL (Right)
   ============================================ */

.deck-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.deck-panel-header {
  flex-shrink: 0;
}

.deck-panel-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
}

.deck-panel-content {
  flex: 1;
  overflow-y: auto;
}

.deck-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-3);
  text-align: center;
}

.deck-panel-hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-4);
}

/* ============================================
   DECK HEADER
   ============================================ */

.deck-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}

.deck-header-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.deck-header-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.deck-header-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Editable name styles */
.deck-name-editable {
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.deck-name-editable:hover {
  background: var(--surface-3);
}

.deck-name-editable::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M17 3a2.85 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.deck-name-editable:hover::after {
  opacity: 0.6;
}

/* Inline edit form */
.deck-name-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deck-name-input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-1);
  background: var(--surface-1);
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  outline: none;
}

.deck-name-input:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.deck-name-actions {
  display: flex;
  gap: var(--space-2);
}

.deck-header-count {
  font-size: var(--text-sm);
  color: var(--text-3);
  flex-shrink: 0;
}

.deck-header-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.deck-header-toggle:hover {
  background: var(--surface-4);
  color: var(--text-1);
}

.deck-header-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.deck-header-toggle svg {
  flex-shrink: 0;
}

/* ============================================
   DECK HEADER ACTIONS
   ============================================ */

.deck-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.deck-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.deck-action-btn:hover {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--border-default);
}

.deck-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.deck-action-btn svg {
  flex-shrink: 0;
}

/* Share button feedback tooltip */
.deck-action-feedback {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-4);
  color: var(--text-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.deck-action-feedback.visible {
  opacity: 1;
}

/* ============================================
   DECK TYPE GROUPS
   ============================================ */

.deck-type-group {
  margin-bottom: var(--space-4);
}

.deck-type-group:last-child {
  margin-bottom: 0;
}

.deck-type-header {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}

.deck-type-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ============================================
   STACKED CARD VIEW
   ============================================ */

.deck-cards-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.deck-card-stacked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.deck-card-stacked:hover {
  background: var(--surface-4);
  transform: translateX(4px);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.15);
}

/* Stacked card image with quantity badge */
.stacked-card-image-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 50px;
}

.stacked-card-image {
  width: 50px;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.stacked-card-placeholder {
  width: 50px;
  height: 70px;
  background: var(--surface-4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--text-4);
}

.stacked-card-quantity {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--gray-0);
  background: var(--gray-9);
  border: 2px solid var(--surface-1);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px oklch(0% 0 0 / 0.3);
}

/* Needs indicator badge */
.stacked-card-need {
  position: absolute;
  bottom: -4px;
  left: -4px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--gray-0);
  background: var(--orange-6);
  border: 2px solid var(--surface-1);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 4px oklch(0% 0 0 / 0.3);
}

.stacked-card-need svg {
  flex-shrink: 0;
}

/* Cards that need acquisition have subtle indicator */
.deck-card-stacked--needs {
  border-left: 3px solid var(--orange-6);
}
  :is([data-theme="dark"] .stacked-card-need,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .stacked-card-need {
    background: var(--orange-5);
    color: var(--gray-9);
  }

/* Stacked card info */
.stacked-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stacked-card-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stacked-card-set {
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* Stacked card controls - hidden by default, shown on hover */
.stacked-card-controls {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.deck-card-stacked:hover .stacked-card-controls {
  opacity: 1;
}

.stacked-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.stacked-control-btn:hover {
  background: var(--surface-1);
  color: var(--text-1);
  border-color: var(--border-default);
}

.stacked-control-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.stacked-control-btn--disabled,
.stacked-control-btn--disabled:hover {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
  color: var(--text-3);
  border-color: var(--border-subtle);
}

/* ============================================
   LIST VIEW
   ============================================ */

.deck-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.deck-cards-list .deck-type-cards {
  gap: var(--space-2);
}

/* ============================================
   COMPACT STATS BAR
   ============================================ */

.deck-stats-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1;
}

.deck-stats-count {
  color: var(--text-2);
}

.deck-stats-count strong {
  color: var(--text-1);
  font-weight: var(--font-semibold);
}

.deck-stats-type {
  color: var(--text-2);
}

.deck-stats-type strong {
  font-weight: var(--font-semibold);
}

/* Type-specific accent colors */
.deck-stats-type[data-type="pokemon"] strong {
  color: var(--type-fire);
}

.deck-stats-type[data-type="trainer"] strong {
  color: var(--type-psychic);
}

.deck-stats-type[data-type="energy"] strong {
  color: var(--type-lightning);
}

.deck-stats-warning {
  display: inline-flex;
  align-items: center;
  color: var(--warning);
}

.deck-stats-warning svg {
  display: block;
}

/* ============================================
   CARD HOVER PREVIEW
   ============================================ */

.card-hover-preview {
  position: fixed;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.card-hover-preview.visible {
  opacity: 1;
}

.card-hover-preview img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
}

.card-hover-preview.touch-mode {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  cursor: pointer;
}

.card-hover-preview.touch-mode img {
  width: auto;
  max-width: 90vw;
  max-height: 85vh;
  cursor: default;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .deck-editor-container {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 80px);
  }

  .search-panel,
  .deck-panel {
    min-height: 50vh;
  }

  /* On mobile, deck panel comes first for context */
  .deck-panel {
    order: -1;
  }
}
}

@layer pages{
/* Game Bar - Top navigation for game selection */
.game-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  transition: transform var(--transition-slow);
  z-index: calc(var(--z-sticky) + 1);
  position: relative;
}

.game-bar--hidden {
  transform: translateY(-100%);
  position: relative;
  margin-bottom: -1px; /* prevent gap when hidden */
}

.game-bar-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.game-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.game-bar .site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-1);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  flex-shrink: 0;
}

.game-bar .site-logo:hover {
  color: var(--text-1);
}

.game-bar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.game-bar-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  transition-property: color, background-color;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.game-bar-icon {
  display: inline-flex;
  align-items: center;
}

.game-bar-icon svg {
  width: 16px;
  height: 16px;
}

.game-bar-link:hover {
  color: var(--text-1);
  background: var(--surface-3);
}

.game-bar-link.active {
  color: var(--link);
  background: var(--primary-50);
}
  :is([data-theme="dark"] .game-bar-link.active,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .game-bar-link.active {
    background: var(--primary-900);
  }

.game-bar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* User menu */
.user-dropdown {
  position: relative;
}

.user-menu-trigger {
  display: inline-flex;
  min-height: 36px;
  max-width: 320px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  color: var(--text-1);
  background: var(--surface-3);
  border-color: var(--border-subtle);
}

.user-menu-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.user-menu-trigger .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-chevron {
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}

.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);
  width: 220px;
  padding: var(--space-1);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.user-dropdown-item {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-dropdown-item:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

.user-dropdown-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.user-dropdown-item--danger:hover {
  color: var(--danger);
  background: var(--danger-subtle);
}

.user-dropdown-form {
  margin: 0;
}

.user-dropdown-divider {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--border-subtle);
}

/* Dark mode - slightly darker game bar */
[data-theme="dark"] .game-bar {
  background: var(--neutral-950);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .game-bar {
    background: var(--neutral-950);
  }
}

/* ============================================
   Mobile Menu
   ============================================ */

/* Hamburger button - hidden on desktop */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.mobile-menu-toggle:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.mobile-menu-toggle .close-icon {
  display: none;
}

body.mobile-menu-active .mobile-menu-toggle .hamburger-icon {
  display: none;
}

body.mobile-menu-active .mobile-menu-toggle .close-icon {
  display: block;
}

/* Mobile dropdown panel - hidden by default */
.mobile-menu {
  display: none;
}

/* Mobile menu section labels */
.mobile-menu-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1);
}

/* Mobile menu links */
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: left;
}

.mobile-menu-link:hover {
  background: var(--surface-3);
  color: var(--text-1);
}

.mobile-menu-link.active {
  color: var(--link);
  background: var(--primary-50);
}
  :is([data-theme="dark"] .mobile-menu-link.active,@media  (prefers-color-scheme: dark) ) :root:not([data-theme="light"]) .mobile-menu-link.active {
    background: var(--primary-900);
  }

.mobile-menu-signup {
  color: var(--link);
  font-weight: var(--font-semibold);
}

/* Sections divider */
.mobile-menu-section {
  padding: var(--space-2) 0;
}

.mobile-menu-section + .mobile-menu-section {
  border-top: 1px solid var(--border-subtle);
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
  .game-bar-container {
    gap: var(--space-3);
  }

  /* Hide desktop nav elements */
  .game-bar-nav,
  .game-bar-right {
    display: none;
  }

  /* Show hamburger */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Mobile menu panel */
  .mobile-menu {
    display: none;
    background: var(--surface-2);
    border-top: 1px solid var(--border-subtle);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu--open {
    display: block;
  }

  /* Hide the site-header on mobile - its content is in the mobile menu */
  .site-header {
    display: none;
  }
}

/* Dark mode for mobile menu */
[data-theme="dark"] .mobile-menu {
  background: var(--neutral-950);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-menu {
    background: var(--neutral-950);
  }
}

/* Desktop: hide email at smaller desktop widths */
@media (max-width: 900px) and (min-width: 769px) {
  .game-bar .user-email {
    display: none;
  }
}
}

@layer pages{
/* Header is now just the main nav bar (game bar handles logo/auth/game selection) */
/* Game-switcher styles removed - replaced by game-bar */
}

@layer pages{

/* ============================================
   LANDING PAGE
   ============================================ */

.landing-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  overflow: hidden;
}

/* ============================================
   HERO SECTION
   ============================================ */

.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-12) 0 var(--space-16);
  position: relative;
  min-height: 420px;
}

/* Subtle gradient glow behind hero */
.landing-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 20%;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse at center,
    oklch(58% 0.12 250 / 0.10) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

[data-theme="dark"] .landing-hero::before {
  background: radial-gradient(
    ellipse at center,
    oklch(50% 0.16 250 / 0.15) 0%,
    transparent 70%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-hero::before {
    background: radial-gradient(
      ellipse at center,
      oklch(50% 0.16 250 / 0.15) 0%,
      transparent 70%
    );
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.landing-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-1);
}

.landing-tagline {
  font-size: var(--text-lg);
  color: var(--text-2);
  max-width: 480px;
  line-height: var(--leading-relaxed);
}

/* Hero CTA Buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-actions .btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-actions .btn-lg svg {
  transition: transform var(--transition-fast);
}

.hero-actions .btn-lg:hover svg {
  transform: translateX(3px);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.hero-stat-label {
  font-size: var(--text-sm);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-stat-divider {
  width: 1px;
  height: var(--space-8);
  background: var(--border-subtle);
}

/* ============================================
   HERO CARD SHOWCASE
   ============================================ */

.hero-showcase {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-card {
  position: absolute;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
  will-change: transform;
}

.showcase-card img {
  display: block;
  width: 180px;
  height: auto;
  border-radius: var(--radius-xl);
}

.showcase-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Fan layout - cards spread behind each other */
.showcase-card-0 {
  z-index: 5;
  transform: rotate(-1deg);
}

.showcase-card-1 {
  z-index: 4;
  transform: translateX(-70px) translateY(10px) rotate(-8deg);
  opacity: 0.85;
}

.showcase-card-2 {
  z-index: 3;
  transform: translateX(70px) translateY(10px) rotate(6deg);
  opacity: 0.85;
}

.showcase-card-3 {
  z-index: 2;
  transform: translateX(-130px) translateY(25px) rotate(-14deg);
  opacity: 0.6;
}

.showcase-card-4 {
  z-index: 1;
  transform: translateX(130px) translateY(25px) rotate(12deg);
  opacity: 0.6;
}

.hero-showcase:hover .showcase-card-0 {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.hero-showcase:hover .showcase-card-1 {
  transform: translateX(-85px) translateY(6px) rotate(-10deg);
}

.hero-showcase:hover .showcase-card-2 {
  transform: translateX(85px) translateY(6px) rotate(8deg);
}

.hero-showcase:hover .showcase-card-3 {
  transform: translateX(-150px) translateY(20px) rotate(-16deg);
}

.hero-showcase:hover .showcase-card-4 {
  transform: translateX(150px) translateY(20px) rotate(14deg);
}

/* Dark mode glow on cards */
[data-theme="dark"] .showcase-card {
  box-shadow: var(--shadow-lg), 0 0 30px oklch(50% 0.14 250 / 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .showcase-card {
    box-shadow: var(--shadow-lg), 0 0 30px oklch(50% 0.14 250 / 0.15);
  }
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.landing-features-section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-subtle);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.feature-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: oklch(58% 0.18 250 / 0.08);
  color: var(--primary-500);
}

[data-theme="dark"] .feature-icon {
  background: oklch(58% 0.18 250 / 0.12);
  color: var(--primary-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feature-icon {
    background: oklch(58% 0.18 250 / 0.12);
    color: var(--primary-400);
  }
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.feature-card h3 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-1);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
}

/* ============================================
   GAMES SECTION
   ============================================ */

.landing-games {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-subtle);
}

.landing-games h2 {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  margin-bottom: var(--space-8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--container-lg);
  margin: 0 auto;
}

.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-300);
}

[data-theme="dark"] .game-card:hover {
  border-color: var(--primary-600);
  box-shadow: var(--shadow-lg), 0 0 20px oklch(58% 0.12 250 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .game-card:hover {
    border-color: var(--primary-600);
    box-shadow: var(--shadow-lg), 0 0 20px oklch(58% 0.12 250 / 0.1);
  }
}

.game-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.game-card-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.game-card-badge-soon {
  color: var(--text-3);
}

.game-name {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.game-card-count {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--space-3);
}

.game-action {
  font-size: var(--text-sm);
  color: var(--link);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.game-action svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.game-card:hover .game-action svg {
  transform: translateX(4px);
}

/* Coming soon cards */
.game-card-coming-soon {
  opacity: 0.6;
  cursor: default;
}

.game-card-coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

[data-theme="dark"] .game-card-coming-soon:hover {
  border-color: var(--border-subtle);
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .game-card-coming-soon:hover {
    border-color: var(--border-subtle);
    box-shadow: none;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .landing-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-10) 0 var(--space-8);
    min-height: auto;
  }

  .hero-content {
    align-items: center;
  }

  .landing-tagline {
    margin: 0 auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-showcase {
    height: 300px;
  }

  .showcase-card img {
    width: 140px;
  }

  .showcase-card-1 { transform: translateX(-55px) translateY(8px) rotate(-8deg); }
  .showcase-card-2 { transform: translateX(55px) translateY(8px) rotate(6deg); }
  .showcase-card-3 { transform: translateX(-105px) translateY(20px) rotate(-14deg); }
  .showcase-card-4 { transform: translateX(105px) translateY(20px) rotate(12deg); }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .landing-container {
    padding: var(--space-4) var(--space-3);
  }

  .landing-hero {
    padding: var(--space-6) 0 var(--space-4);
  }

  .landing-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .landing-tagline {
    font-size: var(--text-base);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn-lg {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .hero-stat-divider {
    display: none;
  }

  .hero-stat {
    align-items: center;
  }

  .hero-showcase {
    height: 240px;
  }

  .showcase-card img {
    width: 110px;
  }

  .showcase-card-1 { transform: translateX(-42px) translateY(6px) rotate(-8deg); }
  .showcase-card-2 { transform: translateX(42px) translateY(6px) rotate(6deg); }
  .showcase-card-3 { transform: translateX(-80px) translateY(16px) rotate(-14deg); }
  .showcase-card-4 { transform: translateX(80px) translateY(16px) rotate(12deg); }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .games-grid {
    grid-template-columns: 1fr;
  }

  .landing-features-section,
  .landing-games {
    padding: var(--space-8) 0;
  }
}
}

@layer pages{

/* Legal / Policy Pages */

.legal-container {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.legal-content h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.legal-content .legal-updated {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--space-8);
}

.legal-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--text-1);
}

.legal-content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--text-1);
}

.legal-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-2);
  margin-bottom: var(--space-4);
}

.legal-content ul,
.legal-content ol {
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.legal-content li {
  margin-bottom: var(--space-2);
}

.legal-content a {
  color: var(--link);
}

.legal-content a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.legal-content strong {
  color: var(--text-1);
  font-weight: var(--font-semibold);
}

/* Callout box for data request section on contact page */
.legal-callout {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.legal-callout h3 {
  margin-top: 0;
}

/* Cookie table */
.legal-content table {
  margin: var(--space-4) 0 var(--space-6);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-content th {
  background: var(--surface-2);
  font-size: var(--text-sm);
}

.legal-content td {
  font-size: var(--text-sm);
  color: var(--text-2);
}

@media (max-width: 640px) {
  .legal-container {
    padding: var(--space-4) var(--space-3);
  }

  .legal-content h1 {
    font-size: var(--text-2xl);
  }
}
}

@layer pages{

/* Account Settings Page */

.account-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

.account-header {
  margin-bottom: var(--space-5);
}

.account-header h1 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.account-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.account-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.account-sidebar {
  position: sticky;
  top: var(--space-4);
}

.account-mobile-nav {
  display: none;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-nav-link {
  padding: var(--space-2) var(--space-3);
  color: var(--text-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.account-nav-link:hover,
.account-nav-link--active {
  color: var(--text-1);
  background: var(--surface-2);
}

.account-nav-link--active {
  box-shadow: inset 2px 0 0 var(--link);
}

.account-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.account-nav-link--danger:hover,
.account-nav-link--danger.account-nav-link--active {
  color: var(--danger);
  background: var(--danger-subtle);
}

.account-nav-link--danger.account-nav-link--active {
  box-shadow: inset 2px 0 0 var(--danger);
}

.account-content {
  min-width: 0;
}

/* Sections */
.account-section {
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  scroll-margin-top: var(--space-20);
}

.account-section h2 {
  margin: 0 0 var(--space-4);
  color: var(--text-1);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.account-section p {
  color: var(--text-2);
  line-height: var(--leading-relaxed);
}

/* Forms */
.account-form .form-group {
  max-width: 520px;
}

.account-section--profile .account-form {
  max-width: var(--container-md);
}

.account-profile-link {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.account-form .form-actions {
  border-top: none;
  padding-top: var(--space-2);
  margin-top: var(--space-4);
}

/* Hint text */
.account-hint {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--space-4);
}

/* Connected Accounts */
.connected-accounts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.connected-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.connected-account-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-medium);
  color: var(--text-1);
}

.connected-account-icon {
  flex-shrink: 0;
}

.connected-account-email {
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Subscription Section */
.subscription-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subscription-plan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-medium);
  color: var(--text-1);
}

.subscription-detail {
  font-size: var(--text-sm);
  color: var(--text-3);
}

.subscription-notice {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-2);
}

.subscription-notice--warning {
  color: var(--warning);
}

.subscription-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.subscription-benefits li::before {
  content: "\2713\00a0";
  color: var(--success);
  font-weight: var(--font-bold);
}

.subscription-actions {
  margin-top: var(--space-2);
}

/* Account security */
.mfa-setup-card {
  max-width: var(--container-sm);
}

.mfa-setup-section + .mfa-setup-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.mfa-setup-section h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  color: var(--text-1);
}

.mfa-setup-section p {
  margin-bottom: var(--space-4);
  color: var(--text-2);
}

.mfa-qr-code {
  width: min(100%, 280px);
  padding: var(--space-2);
  margin-inline: auto;
  background: oklch(100% 0 0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.mfa-qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

.security-copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.security-copy-value {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-1);
}

.security-copy-row .btn {
  flex-shrink: 0;
}

.security-uri {
  font-size: var(--text-xs);
}

.mfa-advanced-setup {
  margin-top: var(--space-4);
  color: var(--text-2);
}

.mfa-advanced-setup summary {
  cursor: pointer;
  font-size: var(--text-sm);
}

.mfa-advanced-setup .security-copy-row {
  margin-top: var(--space-3);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  margin-block: var(--space-4);
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.recovery-codes-copy {
  width: 100%;
}

.recovery-acknowledgement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-12);
}

/* Danger Zone */
.account-danger-zone {
  border-color: var(--danger);
}

.account-danger-zone h2 {
  color: var(--danger);
}

/* Responsive */
@media (max-width: 1024px) {
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    position: static;
  }

  .account-nav {
    display: none;
  }

  .account-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .account-mobile-nav-label {
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }

  .account-section-select {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .account-container {
    padding: var(--space-3);
  }

  .account-header h1 {
    font-size: var(--text-2xl);
  }

  .account-section {
    padding: var(--space-4);
  }

  .connected-account {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .recovery-codes {
    grid-template-columns: 1fr;
  }

  .security-copy-row {
    align-items: stretch;
    flex-direction: column;
  }
}
}

@layer pages{

/* Profile Page */

.profile-container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-4);
}

/* Hero Section */
.profile-hero {
  margin-bottom: var(--space-4);
}

.profile-username {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.profile-joined {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--space-1);
  display: block;
}

.profile-bio {
  margin-top: var(--space-4);
  color: var(--text-2);
  max-width: var(--container-md);
  line-height: var(--leading-relaxed);
}

.profile-bio p:last-child {
  margin-bottom: 0;
}

/* Deck Listing */
.profile-section-heading,
.profile-game-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.profile-section-heading {
  margin-bottom: var(--space-5);
}

.profile-section-heading h2 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.profile-section-heading > span,
.profile-game-heading > span {
  color: var(--text-3);
  font-size: var(--text-sm);
}

.profile-game-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-game-heading {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.profile-game-heading h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.profile-game-icon {
  display: inline-flex;
  color: var(--text-2);
}

.profile-decks-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Author Attribution on Deck Show Page */
.deck-show-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--space-1);
}

.deck-show-author a {
  color: var(--link);
  font-weight: var(--font-medium);
}

.deck-show-author a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Profile Tabs */
.profile-tabs {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.profile-tab {
  position: relative;
  min-height: 44px;
  padding: var(--space-3) 0;
  color: var(--text-2);
  background: transparent;
  border: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.profile-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  border-radius: var(--radius-full);
  content: "";
}

.profile-tab:hover {
  color: var(--text-1);
}

.profile-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

.profile-tab--active {
  color: var(--text-1);
}

.profile-tab--active::after {
  background: var(--link);
}

/* Collection Stats (stats-only mode) */
.collection-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.collection-stats-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.collection-stats-set-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.collection-stats-set-logo {
  height: 20px;
  width: auto;
}

.collection-stats-set-name {
  font-weight: var(--font-medium);
  color: var(--text-1);
  font-size: var(--text-sm);
}

.collection-stats-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.collection-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.collection-progress-fill {
  height: 100%;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.collection-stats-count {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

/* Collection Card Grid (full browsable mode) */
.collection-set-group {
  margin-bottom: var(--space-4);
}

.collection-set-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-medium);
  list-style: none;
}

.collection-set-header::-webkit-details-marker {
  display: none;
}

.collection-set-name {
  flex: 1;
  color: var(--text-1);
  font-size: var(--text-md);
}

.collection-set-count {
  font-size: var(--text-sm);
  color: var(--text-3);
}

.collection-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.collection-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.collection-card-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.collection-card-placeholder {
  aspect-ratio: 63/88;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-align: center;
}

.collection-card--not-owned {
  opacity: 0.35;
  filter: grayscale(0.5);
}

.collection-card-owned-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: var(--success-light);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
}

[data-theme="dark"] .collection-card-owned-badge {
  background: var(--success-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .collection-card-owned-badge {
    background: var(--success-dark);
  }
}

/* Responsive */
@media (max-width: 640px) {
  .profile-username {
    font-size: var(--text-2xl);
  }

  .profile-decks-grid {
    grid-template-columns: 1fr;
  }

  .collection-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}
}

@layer pages{

/* ============================================
   ADMIN LAYOUT
   ============================================ */

/* Admin page body - override default flex column */
.admin-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Two-column layout: sidebar + content */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
}


/* ============================================
   ADMIN HEADER
   ============================================ */

.admin-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.admin-header-container {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin-header-left {
  flex-shrink: 0;
}

.admin-header-left .badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.admin-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-user-email {
  font-size: var(--text-sm);
  color: var(--text-2);
}


/* ============================================
   ADMIN SIDEBAR
   ============================================ */

.admin-sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
  position: sticky;
  top: 52px; /* header height */
  height: calc(100vh - 52px);
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-section {
  padding: 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-section + .sidebar-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}

.sidebar-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-link:hover {
  color: var(--text-1);
  background: var(--surface-3);
}

.sidebar-link.active {
  color: var(--link);
  background: var(--primary-50);
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .sidebar-link.active {
  background: var(--primary-900);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-link.active {
    background: var(--primary-900);
  }
}


/* ============================================
   ADMIN CONTENT
   ============================================ */

.admin-content {
  padding: var(--space-6) var(--space-8);
  min-width: 0;
  overflow-x: auto;
}


/* ============================================
   ADMIN PAGE HEADER
   ============================================ */

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-page-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}


/* ============================================
   ADMIN SEARCH FORM
   ============================================ */

.admin-search-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-search-form input[type="search"],
.admin-search-form input[type="text"] {
  flex: 1;
  max-width: 400px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-1);
  transition: border-color var(--transition-fast);
}

.admin-search-form input[type="search"]:focus,
.admin-search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.admin-search-form input::-moz-placeholder {
  color: var(--input-placeholder);
}

.admin-search-form input::placeholder {
  color: var(--input-placeholder);
}

.admin-search-form select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-1);
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
     -moz-appearance: none;
          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='%236b7280' stroke-width='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-2) center;
  cursor: pointer;
}

.admin-search-form select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.admin-search-select {
  min-width: 140px;
}

.admin-search-set {
  max-width: 160px;
}

.admin-results-count {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--space-4);
}


/* ============================================
   ADMIN PAGE ACTIONS
   ============================================ */

.admin-page-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}


/* ============================================
   ADMIN CARD DETAIL
   ============================================ */

.admin-card-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.admin-card-detail-image {
  flex-shrink: 0;
}

.admin-card-image {
  max-width: 300px;
  border-radius: var(--radius-lg);
}

.admin-card-no-image {
  width: 200px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-3);
  font-size: var(--text-sm);
}

.admin-detail-label {
  font-weight: var(--font-semibold);
  color: var(--text-2);
  white-space: nowrap;
  width: 160px;
}

.admin-card-thumb {
  border-radius: var(--radius-sm);
}


/* ============================================
   ADMIN FORM
   ============================================ */

.admin-form {
  max-width: var(--container-sm);
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}

.admin-back-link {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}


/* ============================================
   ADMIN STATS GRID
   ============================================ */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.admin-stat-card .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.admin-stat-card .stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-1);
  line-height: var(--leading-tight);
}

.admin-stat-card .stat-subtitle {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: var(--space-1);
}


/* ============================================
   ADMIN DATA TABLE
   ============================================ */

.admin-data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-data-table thead th {
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
}

.admin-data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-1);
  vertical-align: middle;
}

.admin-data-table tbody tr:hover {
  background: var(--surface-2);
}

.admin-data-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.admin-data-table tbody tr:nth-child(even):hover {
  background: var(--surface-3);
}

.admin-data-table .text-right {
  text-align: right;
}

.admin-data-table .text-center {
  text-align: center;
}

.admin-data-table .text-muted {
  color: var(--text-3);
}


/* ============================================
   RESPONSIVE: SIDEBAR COLLAPSES ON MOBILE
   ============================================ */

@media (max-width: 767px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-2) 0;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .sidebar-section {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
  }

  .sidebar-section + .sidebar-section {
    margin-top: 0;
    padding-top: var(--space-1);
    border-top: none;
    border-left: 1px solid var(--border-subtle);
  }

  .sidebar-section-label {
    display: none;
  }

  .sidebar-link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  .admin-content {
    padding: var(--space-4) var(--space-3);
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header-container {
    flex-wrap: wrap;
  }

  .admin-user-email {
    display: none;
  }

  .admin-search-form {
    flex-wrap: wrap;
  }

  .admin-card-detail {
    grid-template-columns: 1fr;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}
}