/* ============================================================
   w000t — MULTI-THEME DESIGN SYSTEM
   9 themes: classic, kung-fury, minimal, nature, bauhaus,
             pastel, brutalist, corporate, typewriter
   ============================================================ */

.hidden { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;700&family=Courier+Prime:wght@400;700&display=swap');

/* ============================================================
   BASE TOKENS (shared)
   ============================================================ */
:root {
  --type-base-size: 1rem;
  --space-unit: 0.5rem;
  --space-2x: calc(var(--space-unit) * 2);
  --space-3x: calc(var(--space-unit) * 3);
  --space-4x: calc(var(--space-unit) * 4);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --blur-glass: 14px;
  --blur-glass-heavy: 24px;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-micro: 120ms;
  --duration-short: 200ms;
  --duration-medium: 350ms;
  --duration-long: 600ms;

  /* Theme-specific flags (overridden per theme) */
  --use-scanlines: 1;
  --use-grid-floor: 1;
  --use-glow: 1;
  --h1-clip: 1; /* 1 = gradient clipped text, 0 = solid color */
  --topbar-border-bottom: 1px solid var(--color-border-subtle);
}

/* ============================================================
   THEME 0: CLASSIC — original w000t.me (slate-blue + steel-blue,
   Verdana, Bootstrap-3 era, with the "WOOOT IT" mascot on home)
   ============================================================ */
html[data-theme="classic"] {
  --font-display: Verdana, Arial, Helvetica, sans-serif;
  --font-body: Verdana, Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  --color-surface-primary: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-recessed: #f5f5f5;
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #637F9B;   /* steel-blue submit button */
  --color-accent-secondary: #34495e; /* slate-blue navbar */
  --color-accent-tertiary: #46637f;  /* hover blue */

  --color-border-subtle: #e0e0e0;
  --color-border-strong: #34495e;

  --color-feedback-success: #1e7e34;
  --color-feedback-warning: #c88a2e;
  --color-feedback-error: #c0392b;

  --color-gradient-mesh-a: rgba(0, 0, 0, 0);
  --color-gradient-mesh-b: rgba(0, 0, 0, 0);
  --color-gradient-mesh-c: rgba(0, 0, 0, 0);

  --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.12);

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #333333;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(52, 73, 94, 0.92);
  --topbar-border-bottom: 1px solid #2c3e50;

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* ============================================================
   THEME 1: KUNG FURY — neon 80s VHS synthwave
   ============================================================ */
html[data-theme="kung-fury"] {
  --font-display: "Orbitron", "Impact", sans-serif;
  --font-body: "Rajdhani", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-surface-primary: #0a0015;
  --color-surface-elevated: rgba(18, 5, 40, 0.85);
  --color-surface-recessed: #06000e;
  --color-text-primary: #f0e6ff;
  --color-text-secondary: #b498d4;
  --color-text-inverse: #0a0015;

  --color-accent-primary: #ff2d7b;
  --color-accent-secondary: #00f0ff;
  --color-accent-tertiary: #b44dff;

  --color-border-subtle: rgba(180, 77, 255, 0.25);
  --color-border-strong: #00f0ff;

  --color-feedback-success: #39ff14;
  --color-feedback-warning: #ffe600;
  --color-feedback-error: #ff2d7b;

  --color-gradient-mesh-a: rgba(255, 45, 123, 0.25);
  --color-gradient-mesh-b: rgba(0, 240, 255, 0.18);
  --color-gradient-mesh-c: rgba(180, 77, 255, 0.22);

  --shadow-elevation-1: 0 4px 20px rgba(255, 45, 123, 0.15), 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-elevation-2: 0 8px 32px rgba(255, 45, 123, 0.25), 0 4px 16px rgba(0, 0, 0, 0.7);

  --glow-accent: 0 0 10px rgba(255, 45, 123, 0.6), 0 0 30px rgba(255, 45, 123, 0.3);
  --glow-secondary: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 30px rgba(0, 240, 255, 0.3);
  --glow-text-accent: 0 0 8px rgba(255, 45, 123, 0.8);
  --glow-text-secondary: 0 0 8px rgba(0, 240, 255, 0.8);

  --h1-gradient: linear-gradient(180deg, #ffe066 0%, #fff 40%, #ffb347 70%, #ffe600 100%);
  --h1-color: #ffe066;
  --grid-color: rgba(0, 240, 255, 0.12);
  --grid-color-alt: rgba(180, 77, 255, 0.1);
  --scanline-opacity: 0.06;
  --topbar-bg: rgba(10, 0, 21, 0.88);

  --use-scanlines: 1;
  --use-grid-floor: 1;
  --use-glow: 1;
  --h1-clip: 1;
}

/* ============================================================
   THEME 2: MINIMAL / EDITORIAL — clean, typographic, light
   ============================================================ */
html[data-theme="minimal"] {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-surface-primary: #fafafa;
  --color-surface-elevated: #ffffff;
  --color-surface-recessed: #f0f0f0;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #1a1a1a;
  --color-accent-secondary: #c0392b;
  --color-accent-tertiary: #555;

  --color-border-subtle: #e0e0e0;
  --color-border-strong: #1a1a1a;

  --color-feedback-success: #27ae60;
  --color-feedback-warning: #f39c12;
  --color-feedback-error: #c0392b;

  --color-gradient-mesh-a: rgba(0, 0, 0, 0);
  --color-gradient-mesh-b: rgba(0, 0, 0, 0);
  --color-gradient-mesh-c: rgba(0, 0, 0, 0);

  --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.1);

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #1a1a1a;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(255, 255, 255, 0.92);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;
}

/* ============================================================
   THEME 3: NATURE / ORGANIC — earth tones, calming
   ============================================================ */
html[data-theme="nature"] {
  --font-display: "DM Sans", "Avenir", sans-serif;
  --font-body: "DM Sans", "Avenir", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-surface-primary: #f5f0e8;
  --color-surface-elevated: #fffdf8;
  --color-surface-recessed: #ece5d8;
  --color-text-primary: #2c3e2d;
  --color-text-secondary: #5a7a5c;
  --color-text-inverse: #f5f0e8;

  --color-accent-primary: #4a7c59;
  --color-accent-secondary: #8b6914;
  --color-accent-tertiary: #6b8f71;

  --color-border-subtle: #d4c9b5;
  --color-border-strong: #4a7c59;

  --color-feedback-success: #4a7c59;
  --color-feedback-warning: #c88a2e;
  --color-feedback-error: #a84432;

  --color-gradient-mesh-a: rgba(74, 124, 89, 0.06);
  --color-gradient-mesh-b: rgba(139, 105, 20, 0.04);
  --color-gradient-mesh-c: rgba(168, 68, 50, 0.03);

  --shadow-elevation-1: 0 2px 8px rgba(44, 62, 45, 0.08);
  --shadow-elevation-2: 0 6px 20px rgba(44, 62, 45, 0.12);

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #2c3e2d;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(245, 240, 232, 0.92);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;
}

/* ============================================================
   THEME 4: BAUHAUS / PLAYFUL — bold primaries, chunky geometry
   ============================================================ */
html[data-theme="bauhaus"] {
  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", monospace;

  --color-surface-primary: #fffef2;
  --color-surface-elevated: #ffffff;
  --color-surface-recessed: #f0ede0;
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #444444;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #e63946;
  --color-accent-secondary: #1d4ed8;
  --color-accent-tertiary: #f4a900;

  --color-border-subtle: #0a0a0a;
  --color-border-strong: #0a0a0a;

  --color-feedback-success: #16a34a;
  --color-feedback-warning: #f4a900;
  --color-feedback-error: #e63946;

  --color-gradient-mesh-a: rgba(230, 57, 70, 0.05);
  --color-gradient-mesh-b: rgba(29, 78, 216, 0.04);
  --color-gradient-mesh-c: rgba(244, 169, 0, 0.04);

  --shadow-elevation-1: 4px 4px 0 #0a0a0a;
  --shadow-elevation-2: 6px 6px 0 #0a0a0a;

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #0a0a0a;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(255, 254, 242, 0.95);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
}

/* ============================================================
   THEME 5: PASTEL / CUTE — soft kawaii-inspired
   ============================================================ */
html[data-theme="pastel"] {
  --font-display: "DM Sans", "Avenir", sans-serif;
  --font-body: "DM Sans", "Avenir", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-surface-primary: #fdf2f8;
  --color-surface-elevated: #ffffff;
  --color-surface-recessed: #fce7f3;
  --color-text-primary: #4a1942;
  --color-text-secondary: #9b5094;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #ec4899;
  --color-accent-secondary: #8b5cf6;
  --color-accent-tertiary: #06b6d4;

  --color-border-subtle: #ecd6e5;
  --color-border-strong: #ec4899;

  /* Slightly desaturated/darker than the surface tints so chips, badges
     and inline status text remain readable on the near-white pastel
     surface (the original neon-pastel hues had ~2:1 contrast). */
  --color-feedback-success: #0d9488;
  --color-feedback-warning: #b45309;
  --color-feedback-error: #be123c;

  --color-gradient-mesh-a: rgba(236, 72, 153, 0.08);
  --color-gradient-mesh-b: rgba(139, 92, 246, 0.06);
  --color-gradient-mesh-c: rgba(6, 182, 212, 0.05);

  --shadow-elevation-1: 0 2px 10px rgba(236, 72, 153, 0.1);
  --shadow-elevation-2: 0 6px 24px rgba(139, 92, 246, 0.12);

  --glow-accent: 0 0 12px rgba(236, 72, 153, 0.2);
  --glow-secondary: 0 0 12px rgba(139, 92, 246, 0.2);
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  --h1-color: #ec4899;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(253, 242, 248, 0.9);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 1;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

/* ============================================================
   THEME 6: BRUTALIST / MONO — raw, dense, newspaper
   ============================================================ */
html[data-theme="brutalist"], html:not([data-theme]) {
  --font-display: "Space Mono", "Courier New", monospace;
  --font-body: "Space Mono", "Courier New", monospace;
  --font-mono: "Space Mono", "Courier New", monospace;

  --color-surface-primary: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-recessed: #f0f0f0;
  --color-text-primary: #000000;
  --color-text-secondary: #333333;
  --color-text-inverse: #ffffff;

  --color-accent-primary: #000000;
  --color-accent-secondary: #444444;
  --color-accent-tertiary: #555555;

  --color-border-subtle: #000000;
  --color-border-strong: #000000;

  /* Brutalist keeps the ink-on-paper aesthetic, but feedback colors must
     stay semantically distinguishable — otherwise dead chips, error badges,
     and confirm-delete dialogs look like every other element. */
  --color-feedback-success: #0a5d34;
  --color-feedback-warning: #8a6d00;
  --color-feedback-error: #9b1c1c;

  --color-gradient-mesh-a: rgba(0, 0, 0, 0);
  --color-gradient-mesh-b: rgba(0, 0, 0, 0);
  --color-gradient-mesh-c: rgba(0, 0, 0, 0);

  --shadow-elevation-1: 3px 3px 0 #000;
  --shadow-elevation-2: 5px 5px 0 #000;

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #000000;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: #ffffff;

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --blur-glass: 0;
  --blur-glass-heavy: 0;
}

/* ============================================================
   THEME 7: CORPORATE DARK / PREMIUM — deep blues, gold accents
   ============================================================ */
html[data-theme="corporate"] {
  --font-display: "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-surface-primary: #0c1222;
  --color-surface-elevated: rgba(16, 24, 44, 0.92);
  --color-surface-recessed: #080e1a;
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #8899aa;
  --color-text-inverse: #0c1222;

  --color-accent-primary: #c9a227;
  --color-accent-secondary: #4a9eff;
  --color-accent-tertiary: #64748b;

  --color-border-subtle: rgba(74, 158, 255, 0.15);
  --color-border-strong: #c9a227;

  --color-feedback-success: #22c55e;
  --color-feedback-warning: #eab308;
  --color-feedback-error: #ef4444;

  --color-gradient-mesh-a: rgba(74, 158, 255, 0.06);
  --color-gradient-mesh-b: rgba(201, 162, 39, 0.04);
  --color-gradient-mesh-c: rgba(100, 116, 139, 0.05);

  --shadow-elevation-1: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-elevation-2: 0 8px 32px rgba(0, 0, 0, 0.5);

  --glow-accent: 0 0 8px rgba(201, 162, 39, 0.3);
  --glow-secondary: 0 0 8px rgba(74, 158, 255, 0.3);
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: linear-gradient(135deg, #c9a227, #f5e6a3, #c9a227);
  --h1-color: #c9a227;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(12, 18, 34, 0.95);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 1;
}

/* ============================================================
   THEME 8: TYPEWRITER / RETRO ANALOG — sepia, vintage paper
   ============================================================ */
html[data-theme="typewriter"] {
  --font-display: "Courier Prime", "Courier New", monospace;
  --font-body: "Courier Prime", "Courier New", monospace;
  --font-mono: "Courier Prime", "Courier New", monospace;

  --color-surface-primary: #f4efe4;
  --color-surface-elevated: #faf6ed;
  --color-surface-recessed: #ebe4d4;
  --color-text-primary: #2b2118;
  --color-text-secondary: #6b5c4f;
  --color-text-inverse: #faf6ed;

  --color-accent-primary: #8b3a3a;
  --color-accent-secondary: #2b5e4a;
  --color-accent-tertiary: #5c4a1e;

  --color-border-subtle: #c9b99a;
  --color-border-strong: #2b2118;

  --color-feedback-success: #2b5e4a;
  --color-feedback-warning: #8b6914;
  --color-feedback-error: #8b3a3a;

  --color-gradient-mesh-a: rgba(0, 0, 0, 0);
  --color-gradient-mesh-b: rgba(0, 0, 0, 0);
  --color-gradient-mesh-c: rgba(0, 0, 0, 0);

  --shadow-elevation-1: 0 1px 4px rgba(43, 33, 24, 0.1);
  --shadow-elevation-2: 0 3px 12px rgba(43, 33, 24, 0.15);

  --glow-accent: none;
  --glow-secondary: none;
  --glow-text-accent: none;
  --glow-text-secondary: none;

  --h1-gradient: none;
  --h1-color: #2b2118;
  --grid-color: transparent;
  --grid-color-alt: transparent;
  --scanline-opacity: 0;
  --topbar-bg: rgba(244, 239, 228, 0.95);

  --use-scanlines: 0;
  --use-grid-floor: 0;
  --use-glow: 0;
  --h1-clip: 0;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-base-size);
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
  letter-spacing: 0.01em;
}

/* === AMBIENT MESH (only visible in themes with mesh colors) === */
.ambient-mesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-gradient-mesh-a) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, var(--color-gradient-mesh-b) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, var(--color-gradient-mesh-c) 0%, transparent 50%),
    var(--color-surface-primary);
  animation: mesh-drift 25s ease-in-out infinite alternate;
}

/* Scanlines — only shown in themes that use them */
.ambient-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(128, 128, 128, var(--scanline-opacity)) 2px,
    rgba(128, 128, 128, var(--scanline-opacity)) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Perspective retro grid floor — controlled by theme */
.ambient-mesh::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -20%;
  right: -20%;
  height: 40%;
  background:
    linear-gradient(to bottom, transparent 0%, var(--color-gradient-mesh-a) 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(50% - 1px),
      var(--grid-color) calc(50% - 1px),
      var(--grid-color) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 40px,
      var(--grid-color-alt) 40px,
      var(--grid-color-alt) 41px
    );
  background-size: 100% 100%, 80px 100%, 100% 42px;
  transform: perspective(400px) rotateX(45deg);
  transform-origin: bottom center;
  pointer-events: none;
}

@keyframes mesh-drift {
  0% { background-position: 0% 0%, 0% 100%, 100% 50%; }
  100% { background-position: 20% 10%, 30% 70%, 60% 40%; }
}

/* Body scanline overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, var(--scanline-opacity)) 3px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
}

/* === TYPOGRAPHY === */
h1, h2, h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
}

/* Themes with text-transform (kung-fury keeps uppercase, others don't) */
html[data-theme="kung-fury"] h1,
html[data-theme="kung-fury"] h2,
html[data-theme="kung-fury"] h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  color: var(--h1-color);
}

/* Gradient clip for themes that use it */
html[data-theme="kung-fury"] h1,
html[data-theme="pastel"] h1,
html[data-theme="corporate"] h1 {
  background: var(--h1-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
}

h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  color: var(--color-accent-secondary);
}

/* Glow on h2 only for kung-fury */
html[data-theme="kung-fury"] h2 {
  text-shadow: var(--glow-text-secondary);
}

h3 {
  font-size: 1.1rem;
  color: var(--color-accent-tertiary);
}

p, li, label, input, select, textarea, button {
  font-size: var(--type-base-size);
}

a {
  color: var(--color-accent-secondary);
  text-decoration: none;
  text-underline-offset: 0.2rem;
  transition: color var(--duration-micro) var(--ease-default);
}

a:hover, a:focus-visible {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}

/* === TOPBAR === */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: var(--topbar-border-bottom);
  background: var(--topbar-bg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.topbar-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--color-accent-primary);
  text-decoration: none;
}

html[data-theme="kung-fury"] .brand {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: var(--glow-text-accent);
}

.brand:hover {
  color: var(--color-accent-secondary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.nav-links a {
  padding: 0.4rem 0.7rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: all var(--duration-short) var(--ease-default);
}

.nav-links a:hover {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
  text-decoration: none;
}

/* Kung Fury nav special styling */
html[data-theme="kung-fury"] .nav-links a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="kung-fury"] .nav-links a:hover {
  box-shadow: var(--glow-secondary);
  text-shadow: var(--glow-text-secondary);
}

/* === THEME SWITCHER === */
.theme-switcher {
  position: relative;
}

.theme-switcher-btn {
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-short) var(--ease-default);
  box-shadow: none;
}

.theme-switcher-btn:hover {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

.theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 0.4rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  backdrop-filter: blur(var(--blur-glass-heavy));
  -webkit-backdrop-filter: blur(var(--blur-glass-heavy));
  box-shadow: var(--shadow-elevation-2);
  z-index: 100;
  list-style: none;
  margin: 0;
}

.theme-menu.is-open {
  display: block;
}

.theme-menu li { margin: 0; }

.theme-menu button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  min-height: 38px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--duration-micro) var(--ease-default);
}

.theme-menu button:hover {
  background: var(--color-surface-recessed);
  box-shadow: none;
}

.theme-menu button.is-active {
  color: var(--color-accent-primary);
  font-weight: 700;
}

/* === USER MENU === */
.user-menu {
  position: relative;
}

.user-menu-btn {
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-short) var(--ease-default);
  box-shadow: none;
}

.user-menu-btn:hover {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 0.4rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  backdrop-filter: blur(var(--blur-glass-heavy));
  -webkit-backdrop-filter: blur(var(--blur-glass-heavy));
  box-shadow: var(--shadow-elevation-2);
  z-index: 100;
  list-style: none;
  margin: 0;
}

.user-dropdown.is-open {
  display: block;
}

.user-dropdown li { margin: 0; }

.user-dropdown a,
.user-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 38px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--duration-micro) var(--ease-default);
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: var(--color-surface-recessed);
  box-shadow: none;
}

.user-dropdown-form {
  margin: 0;
  padding: 0;
}

/* === MAIN LAYOUT === */
main {
  max-width: 1080px;
  margin: 1.5rem auto 2.5rem;
  padding: 1rem;
  display: grid;
  gap: 1.2rem;
}

section {
  margin: 0;
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
}

.page-intro {
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
}

.lead, .muted {
  color: var(--color-text-secondary);
}

/* === CARD GLASS === */
.card-glass {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevation-1);
  position: relative;
  overflow: hidden;
}

/* Rainbow border only for kung-fury */
html[data-theme="kung-fury"] .card-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(180, 77, 255, 0.2), rgba(255, 45, 123, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* === HERO === */
.hero-panel {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.5rem;
}

.hero-mark {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-tertiary, var(--color-accent-secondary)));
  box-shadow: var(--shadow-elevation-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pulse animation only for kung-fury */
html[data-theme="kung-fury"] .hero-mark {
  box-shadow: var(--glow-accent);
}

html[data-theme="kung-fury"] .hero-mark::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--color-accent-primary);
  opacity: 0.5;
  animation: hero-pulse 2s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

/* === FORMS === */
.form-grid { display: grid; gap: 0.6rem; }
button, input, select, textarea { font: inherit; }

input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
textarea,
select {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  background: var(--color-surface-recessed);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: border-color var(--duration-short) var(--ease-default),
              box-shadow var(--duration-short) var(--ease-default);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 1px var(--color-border-strong);
}

button,
input[type="submit"] {
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.2rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-inverse);
  background: var(--color-accent-primary);
  box-shadow: var(--shadow-elevation-1);
  cursor: pointer;
  transition: transform var(--duration-micro) var(--ease-default),
              box-shadow var(--duration-short) var(--ease-default),
              background var(--duration-short) var(--ease-default);
}

button:hover, input[type="submit"]:hover {
  box-shadow: var(--shadow-elevation-2);
}

button:active, input[type="submit"]:active {
  transform: scale(0.97);
}

/* Theme primary-button overrides — scoped to actual form submit buttons,
   and explicitly NOT to dropdown menu items (which are also type=submit
   when they wrap a form action like Sign out). Without role="menuitem"
   exclusion, the Sign-out item ends up styled as a primary CTA. */

/* Kung Fury button special */
html[data-theme="kung-fury"] button[type="submit"]:not([role="menuitem"]),
html[data-theme="kung-fury"] input[type="submit"] {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-tertiary));
  box-shadow: var(--glow-accent);
}

/* Bauhaus button — hard shadow */
html[data-theme="bauhaus"] button[type="submit"]:not([role="menuitem"]),
html[data-theme="bauhaus"] input[type="submit"] {
  background: var(--color-accent-primary);
  color: #fff;
}

/* Brutalist button */
html[data-theme="brutalist"] button[type="submit"]:not([role="menuitem"]),
html[data-theme="brutalist"] input[type="submit"],
html:not([data-theme]) button[type="submit"]:not([role="menuitem"]),
html:not([data-theme]) input[type="submit"] {
  background: #000;
  color: #fff;
  border: 2px solid #000;
}

/* === LISTS === */
.list-table {
  margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
}

.list-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  justify-content: space-between; align-items: center;
  margin: 0; padding: 0.85rem;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-short) var(--ease-default);
}

.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--color-surface-recessed); }

.row-url { flex: 1; min-width: 220px; }

.row-meta {
  display: inline-flex; flex-wrap: wrap; gap: 0.45rem;
  align-items: center; color: var(--color-text-secondary);
}

.chip, .status-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  min-height: 1.8rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-recessed);
}

.status-badge.error {
  border-color: var(--color-feedback-error);
  color: var(--color-feedback-error);
}

/* === DETAIL GRID === */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}

.detail-grid article {
  padding: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
}

pre, code { font-family: var(--font-mono); }

pre {
  margin: 0.7rem 0; overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  background: var(--color-surface-recessed);
  color: var(--color-text-primary);
  font-size: 0.85rem;
}

/* === WALL === */
.wall-grid { display: flex; align-items: flex-start; gap: 0.95rem; }
.wall-column { flex: 1; display: flex; flex-direction: column; gap: 0.95rem; }

.wall-card {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-elevation-1);
  transition: transform var(--duration-short) var(--ease-default),
              box-shadow var(--duration-short) var(--ease-default);
}

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

.wall-card img {
  display: block; width: 100%; min-height: 140px; height: auto;
  object-fit: cover;
  background: var(--color-surface-recessed);
}

.wall-image.is-loading {
  animation: wallSkeleton 1.2s ease-in-out infinite;
  background: linear-gradient(90deg, var(--color-surface-recessed) 10%, var(--color-surface-elevated) 40%, var(--color-surface-recessed) 80%);
  background-size: 200% 100%;
}

@keyframes wallSkeleton {
  0% { background-position: 180% 0; }
  100% { background-position: -20% 0; }
}

.sentinel {
  margin: 1rem 0; text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* Wall infinite-scroll: an invisible trigger zone that sits 2 viewports
   above the visible "Loading more..." text, so htmx fires its `revealed`
   trigger ~200vh before the user actually reaches the bottom. The wrapper
   provides the positioning context. */
#wall-sentinel {
  position: relative;
}

.sentinel-prefetch {
  position: absolute;
  top: -200vh;
  left: 0;
  right: 0;
  height: 200vh;
  pointer-events: none;
}

/* === DASHBOARD === */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.metric-card, .token-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-elevation-1);
  padding: 0.9rem;
  position: relative;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary), var(--color-accent-tertiary, var(--color-accent-secondary)));
}

.metric-card h2 {
  margin: 0 0 0.3rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-shadow: none;
}

.metric-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--color-accent-secondary);
}

.token-form, .token-inline-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0;
}

.token-inline-form input { flex: 1; min-width: 200px; }

.token-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.token-card-uses {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-left: auto;
}
.token-card-value {
  display: block;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  margin: 0.3rem 0;
  background: var(--color-surface-recessed);
  border-radius: var(--radius-sm);
  word-break: break-all;
}
.token-card-meta {
  font-size: 0.75rem;
  margin: 0.2rem 0 0.4rem;
}
.job-url {
  font-size: 0.75rem;
  word-break: break-all;
}
.token-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
}

/* === ADMIN TABLES === */
.admin-section { margin: 1.5rem 0; }
.admin-section h2 { margin-bottom: 0.5rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table th, .admin-table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}
.admin-table th {
  font-weight: 600;
  color: var(--color-accent-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-table a { color: var(--color-accent-primary); }
.admin-table .error-text {
  color: var(--color-feedback-error);
  font-size: 0.8rem;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  background: transparent;
}
.status-chip.status-queued { color: var(--color-feedback-warning); }
.status-chip.status-running { color: var(--color-accent-secondary); }
.status-chip.status-done { color: var(--color-feedback-success); }
.status-chip.status-dead { color: var(--color-feedback-error); }

/* ── Admin action cards ── */
.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.admin-action-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-action-card h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}
.admin-action-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.action-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
}
.action-input-row input,
.action-input-row select {
  flex: 1;
  min-width: 0;
}
.admin-action-card > button {
  margin-top: auto;
  align-self: flex-start;
}

/* ── Confirm modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-dialog {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 1.5rem 2rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.modal-message {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.modal-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.modal-btn {
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border-subtle);
  min-height: auto;
  box-shadow: none;
}
.modal-btn-cancel {
  background: var(--color-surface-recessed);
  color: var(--color-text-secondary);
}
.modal-btn-cancel:hover { color: var(--color-text-primary); }
.modal-btn-confirm {
  background: var(--color-feedback-error);
  color: #fff;
  border-color: transparent;
}
.modal-btn-confirm:hover { opacity: 0.85; }

/* === ROW ACTIONS === */
.row-actions {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
}

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0; margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-recessed);
  color: var(--color-text-secondary);
  box-shadow: none; min-height: auto;
  cursor: pointer;
  transition: color var(--duration-short), background var(--duration-short), border-color var(--duration-short);
}
.btn-icon-inline { vertical-align: middle; margin-left: 0.3rem; }
.btn-icon:hover { color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.btn-icon.btn-danger:hover { color: var(--color-feedback-error); border-color: var(--color-feedback-error); }
.btn-icon.btn-admin:hover { color: var(--color-accent-secondary); border-color: var(--color-accent-secondary); }
.btn-icon.is-copied { color: var(--color-feedback-success); border-color: var(--color-feedback-success); }

.inline-form { display: inline-flex; margin: 0; padding: 0; }

/* Action dropdown (status change menu in list rows) */
.action-dropdown { position: relative; display: inline-flex; }
.action-dropdown-menu {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  z-index: 100;
  min-width: 140px;
  padding: 0.3rem 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-elevation-2);
}
.action-dropdown-menu.is-open { display: block; }
.action-dropdown-menu form { margin: 0; }

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  min-height: 38px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-micro) var(--ease-default);
}
.dropdown-item:hover {
  background: var(--color-surface-recessed);
  color: var(--color-text-primary);
  box-shadow: none;
}
.dropdown-item-danger { color: var(--color-feedback-error); }
.dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--color-feedback-error) 12%, transparent);
  color: var(--color-feedback-error);
}

/* Archived + dead badges */
.badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 0.4rem;
}
.badge-archived { background: transparent; border: 1px solid currentColor; color: var(--color-feedback-warning); }
.badge-dead { background: transparent; border: 1px solid currentColor; color: var(--color-feedback-error); }

.http-status {
  border: 1px solid currentColor;
  background: transparent;
  font-weight: 700;
}
.http-status-2xx { color: var(--color-feedback-success); }
.http-status-3xx,
.http-status-other { color: var(--color-accent-primary); }
.http-status-4xx { color: var(--color-feedback-warning); }
.http-status-5xx { color: var(--color-feedback-error); }
.http-status-unknown { color: var(--color-text-muted); }

.list-row.is-archived { opacity: 0.6; }
.list-row.is-dead .row-url a { text-decoration: line-through; }

.chip-tag {
  background: rgba(var(--color-accent-rgb, 99,102,241), 0.12);
  color: var(--color-accent-primary);
}

/* Wall card overlay menu */
.wall-card { position: relative; }
.wall-card-menu {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 10;
  opacity: 0;
  transition: opacity var(--duration-short) var(--ease-default);
}
.wall-card:hover .wall-card-menu { opacity: 1; }

.wall-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--radius-sm);
  box-shadow: none; min-height: auto;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.wall-menu-toggle:hover { background: rgba(0,0,0,0.8); }

.wall-menu-dropdown {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  margin-top: 4px;
  min-width: 130px;
  padding: 0.3rem 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-elevation-2);
}
.wall-menu-dropdown.is-open { display: block; }
.wall-menu-dropdown form { margin: 0; }

/* === REVEAL === */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-long) var(--ease-default),
                transform var(--duration-long) var(--ease-default);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* === ACCESSIBILITY === */
@media (prefers-contrast: more) {
  body::after { display: none; }
  .ambient-mesh::before, .ambient-mesh::after { display: none; }

  .card-glass, .metric-card, .token-card, .wall-card, .list-table, section {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-width: 2px;
  }

  h1 { -webkit-text-fill-color: currentColor; filter: none; background: none; }
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
  main { margin: 1rem auto 1.5rem; padding: 0.8rem; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-mark { width: 76px; height: 76px; font-size: 0.9rem; }
}

@media (max-width: 560px) {
  .wall-grid { display: block; }
  .wall-column { margin-bottom: 0.95rem; }
  .nav-links { gap: 0.3rem; }
  .nav-links a { font-size: 0.7rem; padding: 0.35rem 0.5rem; }
}

/* ============================================================
   HOME PAGE — centered single-input hero
   ============================================================ */
.home-main {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
}

.home-hero {
  text-align: center;
  background: transparent;
  border: 0;
  padding: 2rem 0;
  width: 100%;
}

.home-hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  margin-bottom: 0.4rem;
}

.home-hero .lead {
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

.home-form {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.home-input-row {
  display: flex;
  gap: 0;
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-recessed);
  transition: border-color var(--duration-short) var(--ease-default),
              box-shadow var(--duration-short) var(--ease-default);
}

.home-input-row:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 2px var(--color-border-strong);
}

html[data-theme="kung-fury"] .home-input-row:focus-within {
  box-shadow: var(--glow-secondary);
}

.home-input-row input {
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
  max-width: none;
  min-height: 52px;
}

.home-input-row input:focus {
  box-shadow: none;
  border-color: transparent;
  outline: none;
}

.home-input-row button {
  border: 0;
  border-radius: 0;
  padding: 0.9rem 1.5rem;
  min-height: 52px;
  white-space: nowrap;
}

.home-auth {
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.home-result {
  width: 100%;
  max-width: 560px;
  margin: 1rem auto 0;
  min-height: 0;
}

.home-result:empty {
  display: none;
}

.w000t-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-recessed);
}

.w000t-result-url {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  padding: 0.2rem 0;
  max-width: none;
  min-height: 0;
}

.w000t-result-url:focus {
  outline: none;
  box-shadow: none;
}

.w000t-result-copy {
  flex: 0 0 auto;
}

.w000t-result-error {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-danger, #c33);
  border-radius: var(--radius-md);
  background: var(--color-surface-recessed);
  color: var(--color-danger, #c33);
  font-size: 0.95rem;
}

/* ============================================================
   WALL — improved layout with full-bleed, better cards
   ============================================================ */
.wall-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem;
}

.wall-main .page-intro {
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
}

.wall-main .wall-grid {
  padding: 0.5rem;
  gap: 0.7rem;
}

.wall-main .wall-column {
  gap: 0.7rem;
}

.wall-main .wall-card {
  border-radius: var(--radius-lg);
  border: none;
  position: relative;
  box-shadow: var(--shadow-elevation-1);
}

.wall-main .wall-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--color-border-subtle);
  pointer-events: none;
}

.wall-main .wall-card img {
  border-radius: var(--radius-lg);
  min-height: 120px;
}

.wall-main .wall-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-elevation-2);
}

.wall-main .sentinel {
  padding: 2rem;
  font-size: 0.9rem;
}

/* ── Admin dashboard tabs ── */
.admin-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1.5rem auto;
  max-width: var(--content-width, 960px);
  border-bottom: 2px solid var(--color-surface-elevated);
}
.admin-tab {
  background: none;
  border: none;
  box-shadow: none;
  min-height: auto;
  padding: 0.75rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.admin-tab:hover { color: var(--color-text-primary); }
.admin-tab.active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}
.admin-tab-reload {
  display: none;
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.panel-title {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.btn-reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-recessed);
  color: var(--color-text-secondary);
  box-shadow: none;
  min-height: auto;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.4s;
}
.btn-reload:hover {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  transform: rotate(180deg);
}

/* ── Throughput bar chart ── */
.throughput-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 120px;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.throughput-bar {
  flex: 1 0 4px;
  min-width: 4px;
  max-width: 12px;
  background: var(--color-accent-primary);
  opacity: 0.8;
  border-radius: 2px 2px 0 0;
  height: 2px;
  position: relative;
  transition: opacity 0.2s, height 0.3s;
}
.throughput-bar:hover { opacity: 1; }

/* ── Owner list search/filter form ── */
.owner-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: var(--content-width, 960px);
  margin: 1rem auto;
  padding: 0 1rem;
}
.owner-search-form input[type="text"],
.owner-search-form select {
  flex: 1 1 150px;
  min-width: 120px;
  max-width: none;
}
.owner-search-form select { flex: 0 1 160px; }
.btn-clear {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-elevation-1);
}
.btn-clear:hover { text-decoration: none; opacity: 0.85; }
.filter-info {
  max-width: var(--content-width, 960px);
  margin: 0.5rem auto;
  padding: 0 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* ============================================================
   W000T DETAIL — image preview
   ============================================================ */
.w000t-preview {
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
}

.w000t-preview-image {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-1);
  background: var(--color-surface-recessed);
}

/* ============================================================
   "WOOOT IT" MASCOT — shown on every theme's home page.
   When authenticated, the image is wrapped in a button that toggles
   between the URL form and the image-upload form (original w000t.me
   behaviour). Anonymous visitors see the image as decoration only.
   ============================================================ */
.wat-mascot {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-in-out;
  user-select: none;
}

.wat-mascot:hover { transform: scale(1.05); }

.wat-toggle {
  display: block;
  margin: 0 auto 1rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  line-height: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wat-toggle .wat-mascot { margin: 0; }

.wat-toggle:hover .wat-mascot { transform: scale(1.05); }
.wat-toggle:active .wat-mascot { transform: scale(0.97); }

.wat-toggle:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 4px;
}

/* CLASSIC THEME — slate-blue topbar overrides */
/* Slate-blue topbar needs light text on dark background.
   Note the child combinator (`>`): we want to recolor the top-level
   nav links and the user/theme menu *triggers*, but not the items
   inside the dropdowns (those live on a white surface). */
html[data-theme="classic"] .brand,
html[data-theme="classic"] .nav-links > a,
html[data-theme="classic"] .theme-switcher-btn,
html[data-theme="classic"] .user-menu-btn {
  color: #ecf0f1;
}

html[data-theme="classic"] .nav-links > a,
html[data-theme="classic"] .theme-switcher-btn,
html[data-theme="classic"] .user-menu-btn {
  border-color: rgba(236, 240, 241, 0.25);
}

html[data-theme="classic"] .nav-links > a:hover,
html[data-theme="classic"] .theme-switcher-btn:hover,
html[data-theme="classic"] .user-menu-btn:hover {
  color: #ffffff;
  border-color: #ecf0f1;
  background: rgba(70, 99, 127, 0.5);
}

html[data-theme="classic"] .brand:hover {
  color: #ffffff;
}

/* The submit button keeps the original steel-blue look. */
html[data-theme="classic"] button[type="submit"]:not([role="menuitem"]),
html[data-theme="classic"] input[type="submit"] {
  background: var(--color-accent-primary);
  color: #ffffff;
  border-color: var(--color-accent-primary);
}

html[data-theme="classic"] button[type="submit"]:not([role="menuitem"]):hover,
html[data-theme="classic"] input[type="submit"]:hover {
  background: var(--color-accent-tertiary);
  border-color: var(--color-accent-tertiary);
}

/* Calm down the home hero — original site had no big headline. */
html[data-theme="classic"] .home-hero h1 {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: normal;
  text-transform: none;
}