@import "tailwindcss";

/* ==========================================================================
   FONTS
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Chakra+Petch:wght@400;600;700&family=Rajdhani:wght@500;700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300..700&display=swap");

/* ==========================================================================
   THEME CONFIGURATION (Tailwind v4)
   ========================================================================== */
@theme {
  /* Fonts */
  --font-vt323: "VT323", monospace;
  --font-share-tech: "Share Tech Mono", monospace;
  --font-chakra: "Chakra Petch", sans-serif;
  --font-rajdhani: "Rajdhani", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Semantic Mappings */
  --font-mono-display: var(--font-display);
  --font-mono-body: var(--font-body);
  --font-sans-display: var(--font-ui);
  --font-sans-label: var(--font-label);

  /* Colors - Mapped to Variables */
  --color-background: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-surface-highlight: var(--c-surface-highlight);
  --color-border: var(--c-border);
  --color-border-active: var(--c-border-active);

  --color-main: var(--c-text-main);
  --color-bright: var(--c-text-bright);
  --color-muted: var(--c-text-muted);

  --color-accent: var(--c-accent);
  --color-danger: var(--c-danger);
  --color-success: var(--c-success);
  --color-info: var(--c-info);
  --color-warning: var(--c-fallout-orange);

  /* Component Specifics */
  --color-terminal-bg: var(--c-terminal-bg);
  --color-terminal-border: var(--c-terminal-border);
  --color-terminal-header: var(--c-terminal-header-bg);

  /* Z-Index Scale */
  --z-scanline: 5;
  --z-bracket: 10;
  --z-crt: 9999;

  /* Animations */
  --animate-flicker: flicker 4s infinite;
  --animate-scan-moving: scanMoving 8s linear infinite;

  @keyframes flicker {
    0%,
    19.9%,
    22%,
    62.9%,
    64%,
    64.9%,
    93%,
    100% {
      opacity: 1;
    }
    20%,
    21.9%,
    63%,
    63.9%,
    65%,
    69.9% {
      opacity: 0.98;
    }
  }

  @keyframes scanMoving {
    0% {
      transform: translateY(-100vh);
    }
    100% {
      transform: translateY(100vh);
    }
  }
}

/* Theme Variants */
@custom-variant cyborg (&:where([data-theme="cyborg"], [data-theme="cyborg"] *));
@custom-variant cyberpunk (&:where([data-theme="cyberpunk"], [data-theme="cyberpunk"] *));
@custom-variant vault (&:where([data-theme="vault"], [data-theme="vault"] *));

/* ==========================================================================
   BASE & VARIABLE DEFINITIONS
   ========================================================================== */
@layer base {
  :root {
    /* Global Defaults */
    --c-bg: oklch(15% 0.01 142);
    --font-body: sans-serif;
    --effect-text-shadow: 0 0 5px currentColor;
  }

  /* === THEME: VAULT === */
  [data-theme="vault"] {
    /* Typography */
    --font-display: "VT323", monospace;
    --font-body: "Share Tech Mono", monospace;
    --font-ui: "Chakra Petch", sans-serif;
    --font-label: "Rajdhani", sans-serif;

    /* Shapes & Effects */
    --border-radius: 2px;
    --crt-opacity: 1;
    --shadow-card: 0 0 0 1px var(--c-border);

    &[data-mode="dark"] {
      --c-bg: oklch(15% 0.01 142);
      --c-surface: oklch(18% 0.02 142);
      --c-surface-highlight: oklch(22% 0.03 142);
      --c-text-main: oklch(90% 0.15 142);
      --c-text-bright: oklch(85% 0.29 142);
      --c-text-muted: oklch(50% 0.08 142);
      --c-border: oklch(45% 0.06 142);
      --c-border-active: oklch(85% 0.29 142);
      --c-grid: oklch(85% 0.29 142 / 0.05);

      --c-accent: oklch(85% 0.29 142);
      --c-danger: oklch(60% 0.24 29);
      --c-success: oklch(85% 0.29 142);
      --c-info: oklch(80% 0.22 230);
      --c-fallout-orange: oklch(82% 0.18 85);

      /* Button hover backgrounds */
      --c-btn-hover-danger: oklch(60% 0.24 29 / 0.15);
      --c-btn-hover-success: oklch(85% 0.29 142 / 0.12);
      --c-btn-hover-info: oklch(80% 0.22 230 / 0.15);
      --c-btn-hover-accent: oklch(85% 0.29 142 / 0.15);

      /* Glows & Overlays */
      --c-glow-primary-low: oklch(85% 0.29 142 / 0.1);
      --c-glow-primary-med: oklch(85% 0.29 142 / 0.2);
      --c-glow-primary-high: oklch(85% 0.29 142 / 0.25);
      --c-scanline-overlay: oklch(85% 0.29 142 / 0.05);
      --c-scanline-bg: oklch(85% 0.29 142 / 0.02);

      --c-terminal-bg: oklch(12% 0 0);
      --c-terminal-border: var(--c-accent);
      --c-terminal-header-bg: oklch(85% 0.29 142 / 0.05);
    }

    &[data-mode="light"] {
      --c-bg: oklch(96% 0.01 260);
      --c-surface: oklch(100% 0 0);
      --c-surface-highlight: oklch(98% 0.01 260);
      --c-text-main: oklch(40% 0.05 260);
      --c-text-bright: oklch(20% 0.06 260);
      --c-text-muted: oklch(70% 0.05 260);
      --c-border: oklch(88% 0.03 260);
      --c-border-active: oklch(55% 0.22 260);
      --c-grid: oklch(0% 0 0 / 0.03);

      --c-accent: oklch(55% 0.22 260);
      --c-danger: oklch(60% 0.2 25);
      --c-success: oklch(65% 0.18 150);
      --c-info: oklch(60% 0.15 230);
      --c-fallout-orange: oklch(75% 0.18 85);

      --c-btn-hover-danger: oklch(60% 0.2 25 / 0.15);
      --c-btn-hover-success: oklch(65% 0.18 150 / 0.15);
      --c-btn-hover-info: oklch(60% 0.15 230 / 0.15);
      --c-btn-hover-accent: oklch(55% 0.22 260 / 0.15);

      --c-glow-primary-low: oklch(55% 0.22 260 / 0.1);
      --c-glow-primary-med: oklch(55% 0.22 260 / 0.2);
      --c-glow-primary-high: oklch(55% 0.22 260 / 0.25);
      --c-scanline-overlay: oklch(0% 0 0 / 0.05);
      --c-scanline-bg: oklch(0% 0 0 / 0.02);

      --c-terminal-bg: var(--c-surface);
      --c-terminal-border: var(--c-border);
      --c-terminal-header-bg: var(--c-surface-highlight);

      --shadow-card: 4px 4px 0px oklch(0% 0 0 / 0.1);
      --crt-opacity: 0;
      --border-radius: 6px;

      /* Tonal Button Opacities (Vault specific) */
      /* Vault buttons are transparent by default */
      --alpha-tonal-bg: 0%;
      --alpha-tonal-bg-hover: 15%;
    }
  }

  /* === THEME: CYBORG === */
  [data-theme="cyborg"] {
    /* Fonts */
    --font-family-base: "Inter", sans-serif;
    --font-family-headings: "Space Grotesk", sans-serif;

    /* Mappings */
    --font-display: var(--font-family-headings);
    --font-body: var(--font-family-base);
    --font-ui: var(--font-family-headings);
    --font-label: var(--font-family-base);

    /* Physics */
    --border-radius: 16px;
    --crt-opacity: 0;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Features */
    --c-scanline-overlay: transparent;
    --c-scanline-bg: transparent;
    --effect-text-shadow: none;

    /* Tonal Button Opacities */
    --alpha-tonal-bg: 15%;
    --alpha-tonal-bg-hover: 25%;
    --alpha-tonal-text: 100%;

    &[data-mode="dark"] {
      --c-bg: oklch(25% 0.02 260);
      --c-surface: oklch(30% 0.02 260);
      --c-surface-highlight: oklch(35% 0.03 260);
      --c-text-main: oklch(95% 0.01 260);
      --c-text-bright: oklch(100% 0 0);
      --c-text-muted: oklch(75% 0.02 260);
      --c-border: oklch(40% 0.03 260);
      --c-border-active: oklch(70% 0.15 280);
      --c-grid: transparent;

      --c-accent: oklch(65% 0.2 280);
      --c-danger: oklch(70% 0.2 20);
      --c-success: oklch(80% 0.2 150);
      --c-info: oklch(75% 0.15 240);
      --c-fallout-orange: oklch(75% 0.18 50);

      --c-glow-primary-low: transparent;
      --c-glow-primary-med: transparent;

      --c-terminal-bg: var(--c-surface);
      --c-terminal-border: transparent;
      --c-terminal-header-bg: var(--c-surface-highlight);
      --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    &[data-mode="light"] {
      --c-bg: oklch(98% 0 0);
      --c-surface: oklch(100% 0 0);
      --c-surface-highlight: oklch(96% 0 0);
      --c-text-main: oklch(25% 0.01 260);
      --c-text-bright: oklch(8% 0.01 260);
      --c-text-muted: oklch(55% 0.01 260);
      --c-border: oklch(90% 0 0);
      --c-border-active: oklch(50% 0.2 280);
      --c-grid: transparent;

      --c-accent: oklch(50% 0.2 280);
      --c-danger: oklch(60% 0.2 25);
      --c-success: oklch(60% 0.18 150);
      --c-info: oklch(55% 0.18 240);
      --c-fallout-orange: oklch(65% 0.18 50);

      --c-glow-primary-low: transparent;

      --c-terminal-bg: var(--c-surface);
      --c-terminal-border: transparent;
      --c-terminal-header-bg: var(--c-surface-highlight);
    }
  }

  /* === THEME: CYBERPUNK === */
  [data-theme="cyberpunk"] {
    /* Typography */
    --font-display: "Rajdhani", sans-serif;
    --font-body: "Rajdhani", sans-serif;
    --font-ui: "Share Tech Mono", monospace;
    --font-label: "Share Tech Mono", monospace;

    /* Physics & Effects */
    --border-radius: 0px;
    --crt-opacity: 0.05;
    --shadow-card: 0 0 0 1px var(--c-border);
    --effect-text-shadow: 0 0 2px currentColor;

    /* Base Colors - Dark Mode (Primary) */
    &[data-mode="dark"] {
      --c-bg: oklch(10% 0.02 20);
      --c-surface: oklch(14% 0.03 20);
      --c-surface-highlight: oklch(25% 0.08 20);

      --c-text-main: oklch(90% 0.02 20);
      --c-text-bright: oklch(99% 0.01 20);
      --c-text-muted: oklch(60% 0.05 20);

      --c-border: oklch(50% 0.2 25);
      --c-border-active: oklch(75% 0.25 25);
      --c-grid: oklch(85% 0.25 190 / 0.05);

      --c-accent: oklch(85% 0.25 190);
      --c-danger: oklch(60% 0.28 25);
      --c-success: oklch(75% 0.18 145);
      --c-info: oklch(85% 0.25 190);
      --c-fallout-orange: oklch(88% 0.18 95);

      /* Global CRT Overlay */
      --crt-opacity: 1;
      --c-scanline-overlay: oklch(85% 0.25 190 / 0.05);
      --c-scanline-bg: oklch(85% 0.25 190 / 0.02);

      --c-btn-hover-danger: oklch(60% 0.28 25 / 0.2);
      --c-btn-hover-success: oklch(75% 0.18 145 / 0.2);
      --c-btn-hover-info: oklch(85% 0.25 190 / 0.2);
      --c-btn-hover-accent: oklch(85% 0.25 190 / 0.2);

      --c-glow-primary-low: oklch(85% 0.25 190 / 0.1);
      --c-glow-primary-med: oklch(85% 0.25 190 / 0.2);
      --c-glow-primary-high: oklch(85% 0.25 190 / 0.4);

      --c-terminal-bg: oklch(12% 0.05 20);
      --c-terminal-border: var(--c-accent);
      --c-terminal-header-bg: oklch(85% 0.25 190 / 0.1);

      /* Cyberpunk Extras */
      --c-scanline-overlay: oklch(85% 0.25 190 / 0.02);
      --c-scanline-bg: oklch(0% 0 0 / 0.3);
    }

    /* Light Mode */
    &[data-mode="light"] {
      --c-bg: oklch(94% 0.01 240);
      --c-surface: oklch(99% 0 0);
      --c-surface-highlight: oklch(96% 0.01 240);

      --c-text-main: oklch(30% 0.04 240);
      --c-text-bright: oklch(10% 0.04 240);
      --c-text-muted: oklch(60% 0.02 240);

      --c-border: oklch(88% 0.02 240);
      --c-border-active: oklch(55% 0.18 220);
      --c-grid: oklch(0% 0 0 / 0.04);

      --c-accent: oklch(55% 0.18 220);
      --c-danger: oklch(55% 0.2 25);
      --c-success: oklch(60% 0.16 150);
      --c-info: oklch(55% 0.16 250);
      --c-fallout-orange: oklch(70% 0.16 80);

      --c-btn-hover-danger: oklch(55% 0.2 25 / 0.1);
      --c-btn-hover-success: oklch(60% 0.16 150 / 0.1);
      --c-btn-hover-info: oklch(55% 0.16 250 / 0.1);
      --c-btn-hover-accent: oklch(55% 0.18 220 / 0.1);

      --c-glow-primary-low: oklch(55% 0.18 220 / 0.05);
      --c-glow-primary-med: oklch(55% 0.18 220 / 0.1);

      --c-terminal-bg: var(--c-surface);
      --c-terminal-border: var(--c-border);
      --c-terminal-header-bg: var(--c-surface-highlight);

      --c-scanline-overlay: transparent;
      --c-scanline-bg: transparent;
      --effect-text-shadow: none;
    }
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .text-effect-emphasis {
    text-shadow: var(--effect-text-shadow);
  }
  [data-mode="light"] .text-effect-emphasis {
    text-shadow: none;
  }

  .bg-pattern-grid {
    background-image: linear-gradient(var(--c-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
    background-size: 30px 30px;
  }

  /* Scrollbars */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--c-bg);
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 4px;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Visibility */
  [data-mode="light"] .hide-in-light-mode {
    display: none !important;
  }
  .show-in-light-mode {
    display: none;
  }
  [data-mode="light"] .show-in-light-mode {
    display: block !important;
  }

  /* Shared Utilities */
  .link-tech {
    font-family: var(--font-mono-body);
    font-size: 0.75rem;
    color: var(--c-text-muted);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: all 0.2s;
    cursor: pointer;

    &:hover {
      color: var(--c-accent);
      border-bottom-color: var(--c-accent);
    }
  }
  .form-group {
    position: relative;
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* =========================================================
       VAULT THEME COMPONENTS
       ========================================================= */
  [data-theme="vault"] {
    /* --- Primary & Submit Button Shared --- */
    .btn-primary,
    .btn-submit {
      @apply bg-transparent border border-border font-sans-display font-bold tracking-wider transition-all duration-200 relative overflow-hidden;
    }

    /* --- Primary Button --- */
    .btn-primary {
      @apply text-main;

      &:hover {
        @apply bg-surface-highlight text-bright border-accent;
        background: var(--c-glow-primary-low);
        box-shadow: 0 0 6px var(--c-glow-primary-med);
      }
    }

    &[data-mode="light"] .btn-primary:hover {
      background: var(--c-btn-hover-accent, oklch(55% 0.22 260 / 0.15));
      box-shadow: 2px 2px 0 oklch(0% 0 0 / 0.1);
      transform: translate(-1px, -1px);
    }

    /* --- Submit/Action Button --- */
    .btn-submit {
      @apply text-bright;
      background: var(--c-btn-hover-accent);
      border-color: color-mix(in srgb, var(--c-accent), transparent 60%);
      box-shadow: 0 0 10px var(--c-glow-primary-low);

      &:hover {
        background: var(--c-glow-primary-high);
        box-shadow: 0 0 15px var(--c-glow-primary-med);
        border-color: var(--c-accent);
      }
    }

    &[data-mode="light"] {
      .btn-submit {
        background-color: var(--c-accent);
        color: white;
        border-color: var(--c-accent);

        &:hover {
          background-color: oklch(45% 0.22 260);
          color: white;
          border-color: oklch(45% 0.22 260);
        }
      }
    }

    /* --- Toggle Button --- */
    .btn-toggle {
      transition: all 0.2s;
      border: 1px solid var(--c-border);
      background: oklch(0% 0 0 / 0.2);
      position: relative;

      &:hover,
      &.active {
        background: oklch(100% 0 0 / 0.05);
        box-shadow: 0 0 8px oklch(100% 0 0 / 0.08);
      }

      &[data-outcome="yes"] {
        &:hover {
          border-color: var(--c-success);
          background: var(--c-glow-primary-low);
          color: var(--c-success);
        }
        &.active {
          border-color: var(--c-success);
          background: var(--c-glow-primary-high);
          box-shadow: 0 0 15px oklch(85% 0.29 142 / 0.4);
          color: var(--c-success);
        }
      }

      &[data-outcome="no"] {
        &:hover {
          border-color: var(--c-danger);
          background: oklch(60% 0.24 29 / 0.1);
          color: var(--c-danger);
        }
        &.active {
          border-color: var(--c-danger);
          background: oklch(60% 0.24 29 / 0.25);
          box-shadow: 0 0 15px oklch(60% 0.24 29 / 0.4);
          color: var(--c-danger);
        }
      }
    }

    &[data-mode="light"] .btn-toggle {
      &.active {
        color: white;
        border-color: oklch(0% 0 0);
        box-shadow: 2px 2px 0 oklch(0% 0 0);
        transform: translate(-1px, -1px);
      }
      &[data-outcome="yes"] {
        &:hover {
          background: oklch(65% 0.18 150 / 0.1);
          border-color: var(--c-success);
          color: var(--c-success);
        }
        &.active {
          background: oklch(65% 0.18 150 / 0.25);
          border-color: var(--c-success);
          color: var(--c-success);
          box-shadow: 0 0 8px oklch(65% 0.18 150 / 0.4);
        }
      }
      &[data-outcome="no"] {
        &:hover {
          background: oklch(60% 0.2 25 / 0.1);
          border-color: var(--c-danger);
          color: var(--c-danger);
        }
        &.active {
          background: oklch(60% 0.2 25 / 0.25);
          border-color: var(--c-danger);
          color: var(--c-danger);
          box-shadow: 0 0 8px oklch(60% 0.2 25 / 0.4);
        }
      }
    }

    /* --- Secondary Button --- */
    .btn-secondary {
      display: block;
      width: 100%;
      background: var(--c-surface-highlight);
      border: 1px solid var(--c-border);
      color: var(--c-text-muted);
      font-family: var(--font-sans-display);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 1rem;
      position: relative;
      overflow: hidden;
      transition: all 0.2s;
      cursor: pointer;
      border-radius: var(--border-radius);

      &:hover {
        background: oklch(100% 0 0 / 0.1);
        color: var(--c-text-main);
        border-color: var(--c-fallout-orange);
        color: var(--c-fallout-orange);
        background: oklch(82% 0.18 85 / 0.1);
        box-shadow: 0 0 8px oklch(82% 0.18 85 / 0.2);
      }
      &.active {
        border-color: var(--c-fallout-orange);
        color: var(--c-fallout-orange);
        background: oklch(82% 0.18 85 / 0.25);
        box-shadow: 0 0 10px oklch(82% 0.18 85 / 0.4);
      }

      /* Unified Dynamic Tonal Buttons (Vault Style) */
      &[data-color="danger"] {
        --local-btn-color: var(--c-danger);
      }
      &[data-color="success"] {
        --local-btn-color: var(--c-success);
      }
      &[data-color="info"] {
        --local-btn-color: var(--c-info);
      }
      &[data-color="accent"] {
        --local-btn-color: var(--c-accent);
      }

      &:where(
          [data-color="danger"],
          [data-color="success"],
          [data-color="info"],
          [data-color="accent"]
        ) {
        &:hover {
          background-color: color-mix(
            in srgb,
            var(--local-btn-color) var(--alpha-tonal-bg-hover),
            transparent
          );
          border-color: var(--local-btn-color);
          color: var(--local-btn-color);
          /* Vault retro glow effect */
          box-shadow: 0 0 12px
            color-mix(in srgb, var(--local-btn-color), transparent 75%);
        }
        .tech-dot {
          background-color: var(--local-btn-color);
        }
      }
    }

    &[data-mode="light"] .btn-secondary {
      border-radius: 0;
      &[data-color="var(--c-danger)"]:hover {
        box-shadow: 0 0 8px oklch(60% 0.2 25 / 0.4);
        background: var(--c-btn-hover-danger);
        transform: none;
        border-color: var(--c-danger);
        color: var(--c-danger);
      }
    }

    /* --- Cards --- */
    .card {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      box-shadow: var(--shadow-card);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      border-radius: var(--border-radius);

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          var(--c-scanline-overlay) 3px
        );
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        z-index: var(--z-scanline);
        background-color: var(--c-scanline-bg);
      }

      &:hover {
        transform: translateY(-2px) scale(1.01);
        border-color: var(--local-color, var(--c-border-active));
        box-shadow: 0 0 10px oklch(85% 0.29 142 / 0.12);

        &::after {
          opacity: 0.5;
          background-color: var(--c-glow-primary-low);
        }
      }
    }

    &[data-mode="light"] .card {
      &:hover {
        box-shadow: 6px 6px 0px var(--local-color, var(--c-accent));
        background: var(--c-surface);
        transform: translate(-1px, -1px);
      }
      &::after {
        display: none;
      }
    }

    /* --- Card Warning --- */
    .card-warning {
      --local-color: var(--c-fallout-orange);
      border-color: var(--c-fallout-orange);
      box-shadow: 0 0 5px oklch(82% 0.18 85 / 0.15);

      &::after {
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          oklch(82% 0.18 85 / 0.05) 3px
        );
        background-color: oklch(82% 0.18 85 / 0.02);
        opacity: 0.4;
      }
      &:hover {
        box-shadow: 0 0 15px oklch(82% 0.18 85 / 0.25);
        border-color: var(--c-fallout-orange);
        &::after {
          background-color: oklch(82% 0.18 85 / 0.1);
          opacity: 0.6;
        }
      }
    }

    &[data-mode="light"] .card-warning {
      box-shadow: 4px 4px 0px oklch(75% 0.18 85 / 0.2);
      border-color: var(--c-fallout-orange);
      background: oklch(98% 0.02 85);

      &::after {
        display: none;
      }
      &:hover {
        box-shadow: 6px 6px 0px var(--c-fallout-orange);
        transform: translate(-2px, -2px);
      }
    }

    /* --- Auth Card --- */
    .auth-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      box-shadow: var(--shadow-card);
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius);
      transition: all 0.3s ease;

      &:hover .corner-accent {
        width: 16px;
        height: 16px;
        border-color: var(--c-accent);
      }
    }

    /* --- Inputs --- */
    .form-input {
      width: 100%;
      background: transparent;
      border: 1px solid var(--c-border);
      padding: 1rem 1rem;
      font-family: var(--font-mono-body);
      color: var(--c-text-bright);
      font-size: 1rem;
      border-radius: var(--border-radius);
      outline: none;
      transition: all 0.2s ease;

      &:focus {
        border-color: var(--c-accent);
        box-shadow: 0 0 10px var(--c-glow-primary-low);
      }

      &::placeholder {
        color: transparent;
        transition: color 0.2s;
      }
      &:focus::placeholder {
        color: var(--c-text-muted);
        opacity: 0.5;
      }
    }

    &[data-mode="light"] .form-input:focus {
      border-color: var(--c-accent);
      box-shadow: 2px 2px 0 oklch(0% 0 0 / 0.08);
    }

    /* --- Floating Labels --- */
    .form-label-floating {
      position: absolute;
      left: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      padding: 0 0.4rem;
      color: var(--c-text-muted);
      font-family: var(--font-sans-label);
      font-weight: 600;
      letter-spacing: 0.05em;
      pointer-events: none;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
      font-size: 1rem;
    }

    .form-input:focus ~ .form-label-floating,
    .form-input:not(:placeholder-shown) ~ .form-label-floating {
      top: 0;
      transform: translateY(-50%) scale(0.85);
      color: var(--c-accent);
      border: 1px solid var(--c-accent);
      border-radius: 2px;
      background-color: var(--c-surface);
      font-size: 1rem;
    }

    /* --- Corner Accents --- */
    .corner-accent {
      position: absolute;
      width: 8px;
      height: 8px;
      transition: all 0.3s ease;
      border-color: var(--c-border);
      z-index: var(--z-bracket);
      display: block;
    }
    .corner-accent-tl {
      top: 0;
      left: 0;
      border-top: 2px solid;
      border-left: 2px solid;
    }
    .corner-accent-tr {
      top: 0;
      right: 0;
      border-top: 2px solid;
      border-right: 2px solid;
    }
    .corner-accent-bl {
      bottom: 0;
      left: 0;
      border-bottom: 2px solid;
      border-left: 2px solid;
    }
    .corner-accent-br {
      bottom: 0;
      right: 0;
      border-bottom: 2px solid;
      border-right: 2px solid;
    }
    .card:hover .corner-accent {
      width: 20px;
      height: 20px;
      border-color: var(--local-color, var(--c-border-active));
    }
  }

  /* =========================================================
       CYBORG THEME COMPONENTS (Refined Material 3 Expressive)
       ========================================================= */
  [data-theme="cyborg"] {
    /* --- Buttons --- */
    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .btn-toggle {
      @apply relative overflow-hidden flex items-center justify-center transition-all duration-200;
      font-family: var(--font-label);
      font-weight: 500;
      letter-spacing: 0.1px;
      border-radius: 8px;
    }

    /* Filled Button (High Emphasis) */
    .btn-submit {
      background-color: var(--c-accent);
      color: white;
      border: 1px solid transparent;
      padding: 0 24px;
      min-height: 40px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);

      &:hover {
        background-color: color-mix(in srgb, var(--c-accent), white 15%);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
      }
      &:active {
        background-color: color-mix(in srgb, var(--c-accent), black 10%);
        box-shadow: none;
        transform: none;
      }
    }

    /* Tonal Button (Medium Emphasis) */
    .btn-secondary {
      background-color: var(--c-surface-highlight);
      color: var(--c-text-main);
      border: 1px solid transparent;
      padding: 0 24px;
      min-height: 40px;
      width: 100%;

      &:hover {
        background-color: color-mix(
          in srgb,
          var(--c-surface-highlight),
          white 5%
        );
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
      &.active {
        background-color: var(--c-text-main);
        color: var(--c-surface);
      }

      /* Unified Dynamic Tonal Buttons */
      &[data-color="danger"] {
        --local-btn-color: var(--c-danger);
      }
      &[data-color="success"] {
        --local-btn-color: var(--c-success);
      }
      &[data-color="info"] {
        --local-btn-color: var(--c-info);
      }
      &[data-color="accent"] {
        --local-btn-color: var(--c-accent);
      }

      &:where(
          [data-color="danger"],
          [data-color="success"],
          [data-color="info"],
          [data-color="accent"]
        ) {
        background-color: color-mix(
          in srgb,
          var(--local-btn-color) var(--alpha-tonal-bg),
          transparent
        );
        color: var(--local-btn-color);

        &:hover {
          background-color: color-mix(
            in srgb,
            var(--local-btn-color) var(--alpha-tonal-bg-hover),
            transparent
          );
        }
        .tech-dot {
          background-color: var(--local-btn-color);
        }
      }
    }
    &[data-mode="light"] .btn-secondary.active {
      background-color: var(--c-accent);
      color: white;
    }

    /* Outlined Button (Medium Emphasis) */
    .btn-primary {
      background-color: transparent;
      border: 1px solid var(--c-border);
      color: var(--c-accent);
      padding: 0 24px;
      min-height: 40px;

      &:hover {
        background-color: color-mix(in srgb, var(--c-accent), transparent 92%);
        border-color: var(--c-accent);
      }
      &:active {
        background-color: color-mix(in srgb, var(--c-accent), transparent 88%);
      }
    }

    /* Toggle Button (Outlined Card style) */
    .btn-toggle {
      background-color: var(--c-surface);
      border: 1px solid var(--c-border);
      color: var(--c-text-muted);
      border-radius: 12px;

      &:hover {
        background-color: var(--c-surface-highlight);
        border-color: var(--c-text-muted);
      }
      &.active {
        background-color: color-mix(in srgb, var(--c-accent), transparent 90%);
        border-color: var(--c-accent);
        color: var(--c-accent);
        border-width: 2px;
      }

      &[data-outcome="yes"].active {
        background-color: color-mix(in srgb, var(--c-success), transparent 90%);
        border-color: var(--c-success);
        color: var(--c-success);
      }
      &[data-outcome="no"].active {
        background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
        border-color: var(--c-danger);
        color: var(--c-danger);
      }
    }

    /* --- Cards --- */
    .card {
      position: relative;
      background: var(--c-surface);
      border: 1px solid transparent;
      border-radius: 16px;
      box-shadow: var(--shadow-card);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      overflow: hidden;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
    }

    &[data-mode="dark"] .card {
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.125);
      &:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
      }
    }

    &[data-mode="light"] .card:hover {
      border-color: transparent;
      transform: translateY(-4px) scale(1.005);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      background-color: var(--c-surface);
    }

    /* Hide Vault Elements */
    .corner-accent,
    .card::after,
    .crt-container,
    .hide-in-light-mode {
      display: none !important;
    }
    .bg-pattern-grid {
      background-image: none;
    }

    /* --- Inputs --- */
    .form-input {
      width: 100%;
      background-color: var(--c-surface-highlight);
      border: 1px solid transparent;
      border-bottom: 2px solid var(--c-border);
      padding: 1rem 1rem;
      font-family: var(--font-body);
      color: var(--c-text-bright);
      font-size: 1rem;
      border-radius: 8px 8px 0 0;
      outline: none;
      transition: all 0.2s ease;

      &:focus {
        background-color: color-mix(
          in srgb,
          var(--c-surface-highlight),
          white 5%
        );
        border-bottom-color: var(--c-accent);
      }

      &::placeholder {
        color: transparent;
        transition: color 0.2s;
      }
      &:focus::placeholder {
        color: var(--c-text-muted);
        opacity: 0.5;
      }
    }

    /* --- Floating Labels --- */
    .form-label-floating {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--c-text-muted);
      font-family: var(--font-body);
      font-size: 1rem;
      pointer-events: none;
      transition: all 0.2s ease;
    }
    .form-input:focus ~ .form-label-floating,
    .form-input:not(:placeholder-shown) ~ .form-label-floating {
      top: 0.4rem;
      transform: none;
      font-size: 0.75rem;
      color: var(--c-accent);
    }

    /* Glow Removal */

    .drop-shadow-\[0_0_5px_var\(--local-color\)\] {
      filter: none !important;
    }
    .group:hover .shadow-\[0_0_10px_var\(--c-success\)\] {
      box-shadow: none;
    }
  }

  /* =========================================================
       CYBERPUNK THEME COMPONENTS
       ========================================================= */
  [data-theme="cyberpunk"] {
    /* --- Buttons --- */
    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .btn-toggle {
      @apply relative uppercase tracking-wider font-bold transition-all duration-200 flex items-center justify-center;

      --cut: 10px;
      /* 
         Compensate for 45deg diagonal thickness discrepancy. 
         For inset: 1px (1px border), straight thickness is 1px.
         Diagonal thickness without adjustment is 1.414px.
         To reduce diagonal to 1px, we adjust the inner cut: 
         Adjustment = 1px * (sqrt(2) - 1) * sqrt(2) approx 0.6px? 
         Calculation check: L = K - 0.586. 0.6px is close enough.
      */
      --cut-inner: calc(var(--cut) - 0.6px);

      --clip-btn: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
      );

      --clip-btn-inner: polygon(
        var(--cut-inner) 0,
        100% 0,
        100% calc(100% - var(--cut-inner)),
        calc(100% - var(--cut-inner)) 100%,
        0 100%,
        0 var(--cut-inner)
      );

      font-family: var(--font-ui);
      clip-path: var(--clip-btn);
      border: none;

      &:hover {
        transform: translate(-1px, -1px);
        text-shadow: var(--effect-text-shadow);
      }
      &:active {
        transform: translate(1px, 1px);
      }
    }

    /* Primary (Ghost/Outline) - NOW WITH UNIFORM ANGLER BORDER SUPPORT */
    .btn-primary {
      background: currentColor; /* The "Border" Color */
      color: var(
        --c-accent
      ); /* Default color, overridden by inline styles if present */
      min-height: 40px;
      padding: 0 20px;
      isolation: isolate;

      /* Inner "Fill" (Mask) */
      &::before {
        content: "";
        position: absolute;
        inset: 1px;
        background: var(--c-bg);
        clip-path: var(--clip-btn-inner);
        z-index: -1;
        transition: background-color 0.2s;
      }

      /* Active Border (Wipe Effect) */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--c-accent);
        z-index: -2;
        clip-path: var(--clip-btn);
        width: 0%;
        transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Tech ease */
      }

      &:hover {
        background: currentColor !important;
        box-shadow: 0 0 10px var(--c-glow-primary-low);
        &::before {
          background: color-mix(in srgb, var(--c-bg), var(--c-accent) 10%);
        }
        &::after {
          width: 100%;
        }
      }
    }

    /* Submit (Solid Neon) */
    .btn-submit {
      background: var(--c-accent);
      color: var(--c-bg);
      border: 1px solid var(--c-accent);
      min-height: 40px;
      padding: 0 24px;

      &:hover {
        background: color-mix(in srgb, var(--c-accent), white 20%);
        box-shadow: 0 0 15px var(--c-accent);
        color: var(--c-bg); /* Ensure contrast */
      }
    }

    /* Secondary (Panel) */
    .btn-secondary {
      background: var(--c-surface-highlight);
      color: var(--c-text-main);
      border: 1px solid transparent;
      border-left: 2px solid var(--c-border);
      width: 100%;
      min-height: 40px;
      padding: 0 20px;

      &:hover {
        background: var(--c-surface);
        border-left-color: var(--c-accent);
        color: var(--c-accent);
        box-shadow: 0 0 8px var(--c-glow-primary-low);
      }

      &.active {
        background: var(--c-accent);
        color: var(--c-bg);
        border-left-color: white;
      }

      /* Unified Dynamic Tonal Buttons */
      &:where(
          [data-color="danger"],
          [data-color="success"],
          [data-color="info"],
          [data-color="accent"]
        ) {
        /* Ref to local colors if needed, but for now standard secondary behavior + accent coloring overrides */
        &[data-color="danger"] {
          --local-btn-color: var(--c-danger);
        }
        &[data-color="success"] {
          --local-btn-color: var(--c-success);
        }
        &[data-color="info"] {
          --local-btn-color: var(--c-info);
        }
        &[data-color="accent"] {
          --local-btn-color: var(--c-accent);
        }

        &:hover {
          border-left-color: var(--local-btn-color);
          color: var(--local-btn-color);
          background: color-mix(
            in srgb,
            var(--local-btn-color),
            transparent 90%
          );
          box-shadow: 0 0 8px
            color-mix(in srgb, var(--local-btn-color), transparent 60%);
        }

        .tech-dot {
          background-color: var(--local-btn-color);
        }
      }
    }

    /* Toggle */
    .btn-toggle {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      color: var(--c-text-muted);
      clip-path: none; /* Better for rounded toggles or simple boxes */
      border-radius: 2px;

      &:hover {
        border-color: var(--c-accent);
        color: var(--c-accent);
      }

      &.active {
        background: var(--c-surface-highlight);
        border: 1px solid var(--c-accent);
        color: var(--c-accent);
        box-shadow: inset 0 0 8px var(--c-glow-primary-low);
      }

      &[data-outcome="yes"].active {
        border-color: var(--c-success);
        color: var(--c-success);
        box-shadow: inset 0 0 8px var(--c-btn-hover-success);
      }
      &[data-outcome="no"].active {
        border-color: var(--c-danger);
        color: var(--c-danger);
        box-shadow: inset 0 0 8px var(--c-btn-hover-danger);
      }
    }

    /* --- Cards --- */
    .card {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 0;

      &::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--c-border-active);
        border-left: 2px solid var(--c-border-active);
        transition: all 0.3s;
        pointer-events: none;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid var(--c-border-active);
        border-right: 2px solid var(--c-border-active);
        transition: all 0.3s;
        pointer-events: none;
      }

      &:hover {
        border-color: var(--c-border-active);
        box-shadow: 0 0 15px var(--c-glow-primary-low);

        &::before,
        &::after {
          width: 100%;
          height: 100%;
          border-color: var(--c-accent);
          transition: width 0.4s ease-out, height 0.4s ease-out;
        }
      }
    }

    .card-warning {
      border-color: var(--c-fallout-orange);
      &:hover {
        box-shadow: 0 0 15px
          color-mix(in srgb, var(--c-fallout-orange), transparent 80%);
      }
      &::before,
      &::after {
        border-color: var(--c-fallout-orange);
      }
    }

    /* --- Inputs --- */
    .form-input {
      background: transparent;
      border: 1px solid transparent;
      border-bottom: 1px solid var(--c-border);
      font-family: var(--font-ui);
      color: var(--c-text-main);
      border-radius: 0;
      padding: 0.5rem;
      width: 100%;
      min-width: 0;
      transition: all 0.2s;

      &:focus {
        border-bottom-color: var(--c-accent);
        background: linear-gradient(
          to bottom,
          transparent,
          var(--c-glow-primary-low)
        );
        box-shadow: 0 2px 0 var(--c-accent);
        outline: none;
      }

      &::placeholder {
        color: var(--c-text-muted);
        text-transform: uppercase;
        font-size: 0.8em;
      }
    }

    /* Floating Labels */
    .form-label-floating {
      font-family: var(--font-ui);
      color: var(--c-text-muted);
      position: absolute;
      left: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      transition: all 0.2s ease;
      font-size: 1rem;
    }
    .form-input:focus ~ .form-label-floating,
    .form-input:not(:placeholder-shown) ~ .form-label-floating {
      color: var(--c-accent);
      text-shadow: 0 0 5px var(--c-accent);
      top: -10px;
      left: 0;
      transform: none;
      font-size: 0.75rem;
      background: var(--c-bg); /* Optional: prevents border overlap if needed */
      padding: 0 4px;
    }

    /* Decoration overrides */
    .bg-pattern-grid {
      background-image: linear-gradient(var(--c-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
    }

    /* Light Mode Specifics */
    &[data-mode="light"] {
      .card {
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
        &::before,
        &::after {
          display: none;
        }
        &:hover {
          border-color: var(--c-accent);
          box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
        }
      }
      .btn-primary,
      .btn-submit,
      .btn-secondary {
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
        &:hover {
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  /* =========================================================
       SHARED FILTERS
       ========================================================= */
  .filter-category-btn.active {
    background-color: color-mix(
      in srgb,
      var(--filter-color) 40%,
      transparent
    ) !important;
  }
  [data-mode="light"] .filter-category-btn.active {
    background-color: color-mix(
      in srgb,
      var(--filter-color) 15%,
      transparent
    ) !important;
  }

  /* =========================================================
       CRT OVERLAY (Global)
       ========================================================= */
  .crt-container {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-crt);
    overflow: hidden;
    opacity: var(--crt-opacity);
    transition: opacity 0.5s ease;
  }

  .crt-scanlines {
    @apply w-full h-full;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.2)
    );
    background-size: 100% 4px;
  }

  .crt-vignette {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background: radial-gradient(
      circle,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.4) 90%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }

  .crt-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: var(--c-accent);
    box-shadow: 0 0 10px var(--c-accent);
    animation: scanMoving 20s linear infinite;
    opacity: 0.05;
  }
}