/**
 * Coauthored Styles
 * Terminal/Developer aesthetic with dark mode support
 *
 * Organized using CSS @layer for clear precedence:
 * 1. reset - Box model, defaults
 * 2. theme - CSS variables for light/dark
 * 3. base - Typography, links, body
 * 4. layout - App structure, header, footer
 * 5. components - Matrix, sliders, details, buttons, cards
 * 6. utilities - Helpers, screen reader, hidden
 */

@layer reset, theme, base, layout, components, utilities;

/* ========================================
   RESET LAYER
   ======================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }
}

/* ========================================
   THEME LAYER - CSS Variables
   ======================================== */
@layer theme {
  :root {
    /* Dark theme (default) */
    --bg-base: #0d1117;
    --bg-surface: #161b22;
    --bg-elevated: #1c2128;
    --bg-hover: #21262d;
    --bg-active: #282e36;

    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-link: #58a6ff;

    --border-default: #30363d;
    --border-muted: #21262d;
    --border-focus: #58a6ff;

    /* Colorblind-safe palette (Okabe-Ito / IBM Design) */
    --accent-green: #009e73;
    --accent-green-dim: rgba(0, 158, 115, 0.15);
    --accent-blue: #0072b2;
    --accent-blue-dim: rgba(0, 114, 178, 0.15);
    --accent-purple: #cc79a7;
    --accent-purple-dim: rgba(204, 121, 167, 0.15);
    --accent-amber: #e69f00;
    --accent-amber-dim: rgba(230, 159, 0, 0.15);
    --accent-red: #d55e00;
    --accent-red-dim: rgba(213, 94, 0, 0.15);

    --glow-green: 0 0 20px rgba(74, 222, 128, 0.3),
      0 0 40px rgba(74, 222, 128, 0.1);
    --glow-blue: 0 0 20px rgba(88, 166, 255, 0.3),
      0 0 40px rgba(88, 166, 255, 0.1);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-sans: 'Space Grotesk', system-ui, sans-serif;

    --transition-fast: 120ms ease-out;
    --transition-normal: 200ms ease-out;
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
  }

  [data-theme='light'] {
    --bg-base: #f6f8fa;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-hover: #f3f4f6;
    --bg-active: #e5e7eb;

    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-link: #2563eb;

    --border-default: #d1d5db;
    --border-muted: #e5e7eb;
    --border-focus: #2563eb;

    /* Colorblind-safe palette (Okabe-Ito / IBM Design) - light mode */
    --accent-green: #007a5a;
    --accent-green-dim: rgba(0, 122, 90, 0.1);
    --accent-blue: #005a8c;
    --accent-blue-dim: rgba(0, 90, 140, 0.1);
    --accent-purple: #a35d87;
    --accent-purple-dim: rgba(163, 93, 135, 0.1);
    --accent-amber: #b37d00;
    --accent-amber-dim: rgba(179, 125, 0, 0.1);
    --accent-red: #a84a00;
    --accent-red-dim: rgba(168, 74, 0, 0.1);

    --glow-green: none;
    --glow-blue: none;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* ========================================
   BASE LAYER - Typography & Body
   ======================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Subtle scan line overlay for terminal feel */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
  }

  [data-theme='light'] body::before {
    display: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

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

  a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--accent-green);
  }
}

/* ========================================
   LAYOUT LAYER - App Structure
   ======================================== */
@layer layout {
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  main {
    flex: 1;
    padding: 2rem 0;
  }

  /* Header */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-muted);
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(
      135deg,
      var(--accent-green),
      var(--accent-blue)
    );
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bg-base);
  }

  .logo-text {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Footer */
  .footer {
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
  }

  .keyboard-hints {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .keyboard-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--border-default);
  }
}

/* ========================================
   COMPONENTS LAYER
   ======================================== */
@layer components {
  /* Icon Button */
  .icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

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

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

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

  /* Theme toggle icon states */
  .icon-sun {
    display: none;
  }
  .icon-moon {
    display: block;
  }
  [data-theme='dark'] .icon-sun {
    display: block;
  }
  [data-theme='dark'] .icon-moon {
    display: none;
  }

  /* ========================================
     MATRIX - Risk Grid Visualization
     ======================================== */

  .matrix-section {
    margin-bottom: 2rem;
  }

  .matrix-heading {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .matrix-container {
    display: grid;
    grid-template-areas:
      "ylabel grid"
      ".      xlabel";
    grid-template-columns: 2rem minmax(340px, 500px);
    grid-template-rows: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
  }

  .matrix-y-label {
    grid-area: ylabel;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .matrix-x-label {
    grid-area: xlabel;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 0.25rem;
  }

  .matrix-grid,
  .viewer-matrix-grid {
    grid-area: grid;
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background:
      linear-gradient(135deg,
        rgba(0, 158, 115, 0.08) 0%,
        rgba(204, 121, 167, 0.08) 50%,
        rgba(213, 94, 0, 0.08) 100%
      );
    cursor: crosshair;
    overflow: hidden;
  }

  .matrix-grid:focus {
    outline: 3px solid var(--border-focus);
    outline-offset: 2px;
  }

  .matrix-grid:focus:not(:focus-visible) {
    outline: none;
  }

  .matrix-grid:focus-visible {
    outline: 3px solid var(--border-focus);
    outline-offset: 2px;
  }

  /* Quadrant color zones - colorblind-safe Okabe-Ito palette */
  .matrix-grid::before,
  .viewer-matrix-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      /* Top-left: Vibe Coded (amber/yellow) */
      radial-gradient(ellipse at 25% 25%, rgba(230, 159, 0, 0.12) 0%, transparent 50%),
      /* Top-right: Unvetted (vermillion/orange) */
      radial-gradient(ellipse at 75% 25%, rgba(213, 94, 0, 0.12) 0%, transparent 50%),
      /* Bottom-left: Handcrafted (bluish green/teal) */
      radial-gradient(ellipse at 25% 75%, rgba(0, 158, 115, 0.12) 0%, transparent 50%),
      /* Bottom-right: Professional (blue) */
      radial-gradient(ellipse at 75% 75%, rgba(0, 114, 178, 0.12) 0%, transparent 50%),
      /* Center: Collaborative (reddish purple/pink) */
      radial-gradient(ellipse at 50% 50%, rgba(204, 121, 167, 0.1) 0%, transparent 35%);
    pointer-events: none;
  }

  /* Grid lines */
  .matrix-grid::after,
  .viewer-matrix-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      /* Vertical lines at 25%, 50%, 75% */
      repeating-linear-gradient(90deg,
        transparent, transparent calc(25% - 0.5px),
        var(--border-muted) calc(25% - 0.5px), var(--border-muted) calc(25% + 0.5px),
        transparent calc(25% + 0.5px)
      ),
      /* Horizontal lines at 25%, 50%, 75% */
      repeating-linear-gradient(0deg,
        transparent, transparent calc(25% - 0.5px),
        var(--border-muted) calc(25% - 0.5px), var(--border-muted) calc(25% + 0.5px),
        transparent calc(25% + 0.5px)
      );
    pointer-events: none;
  }

  /* Quadrant labels */
  .matrix-quadrant-label {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    opacity: 0.4;
    transition: opacity var(--transition-normal), color var(--transition-normal);
    pointer-events: none;
    z-index: 1;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .matrix-quadrant-label.active {
    opacity: 1;
  }

  .matrix-quadrant-label--top-left {
    top: 12%;
    left: 12%;
  }
  .matrix-quadrant-label--top-left.active {
    color: var(--accent-amber);
  }

  .matrix-quadrant-label--top-right {
    top: 12%;
    right: 12%;
    text-align: right;
  }
  .matrix-quadrant-label--top-right.active {
    color: var(--accent-red);
  }

  .matrix-quadrant-label--bottom-left {
    bottom: 12%;
    left: 12%;
  }
  .matrix-quadrant-label--bottom-left.active {
    color: var(--accent-green);
  }

  .matrix-quadrant-label--bottom-right {
    bottom: 12%;
    right: 12%;
    text-align: right;
  }
  .matrix-quadrant-label--bottom-right.active {
    color: var(--accent-blue);
  }

  .matrix-quadrant-label--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .matrix-quadrant-label--center.active {
    color: var(--accent-purple);
  }

  /* Dot */
  .matrix-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dot-color, var(--accent-purple));
    border: 2px solid var(--bg-base);
    transform: translate(-50%, -50%);
    z-index: 3;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--dot-color, var(--accent-purple)) 40%, transparent),
      0 0 12px color-mix(in srgb, var(--dot-color, var(--accent-purple)) 30%, transparent);
    transition: left var(--transition-normal), top var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
  }

  /* Crosshair lines */
  .matrix-crosshair-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cross-color, var(--accent-purple));
    opacity: 0.25;
    z-index: 2;
    transition: top var(--transition-normal);
    pointer-events: none;
  }

  .matrix-crosshair-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--cross-color, var(--accent-purple));
    opacity: 0.25;
    z-index: 2;
    transition: left var(--transition-normal);
    pointer-events: none;
  }

  /* ========================================
     SLIDERS
     ======================================== */

  .matrix-sliders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .slider-name {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
  }

  .slider-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-weight: 600;
  }

  .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    outline: none;
    cursor: pointer;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid var(--bg-base);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
  }

  .slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
  }

  .slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid var(--bg-base);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

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

  /* ========================================
     QUADRANT BANNER
     ======================================== */

  .quadrant-banner,
  .viewer-quadrant-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: color-mix(in srgb, var(--banner-color, var(--accent-purple)) 10%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--banner-color, var(--accent-purple)) 30%, transparent);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
  }

  .quadrant-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .quadrant-name {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .quadrant-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }

  /* ========================================
     DETAILS PANEL (Expandable)
     ======================================== */

  .details-panel {
    margin: 1.5rem 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .details-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    list-style: none;
  }

  .details-toggle::-webkit-details-marker {
    display: none;
  }

  .details-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
  }

  .details-chevron {
    transition: transform var(--transition-normal);
    flex-shrink: 0;
  }

  .details-panel[open] .details-chevron {
    transform: rotate(90deg);
  }

  .details-content {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-muted);
  }

  .details-content .field-group {
    margin-top: 1.25rem;
  }

  /* ========================================
     FORM CONTROLS
     ======================================== */

  .field-group {
    margin-bottom: 1.5rem;
  }

  .field-group:last-child {
    margin-bottom: 0;
  }

  .field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
  }

  .field-description {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
  }

  select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }

  select:hover {
    border-color: var(--text-muted);
  }

  select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-blue-dim);
  }

  input[type='text'],
  textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  input[type='text']:hover,
  textarea:hover {
    border-color: var(--text-muted);
  }

  input[type='text']:focus,
  textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-blue-dim);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--text-muted);
  }

  textarea {
    min-height: 100px;
    resize: vertical;
  }

  /* Checkbox Cards */
  .checkbox-grid {
    display: grid;
    gap: 0.5rem;
  }

  .checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .checkbox-card:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
  }

  .checkbox-card:has(input:checked) {
    background: var(--accent-blue-dim);
    border-color: var(--accent-blue);
  }

  .checkbox-card:has(input:focus-visible) {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }

  .checkbox-card input[type='checkbox'] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
  }

  .checkbox-card input[type='checkbox']:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
  }

  .checkbox-card input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-base);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .checkbox-content {
    flex: 1;
    min-width: 0;
  }

  .checkbox-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
  }

  .checkbox-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
  }

  /* ========================================
     BUTTONS
     ======================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

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

  .btn svg {
    width: 16px;
    height: 16px;
  }

  .btn-primary {
    background: var(--accent-blue);
    color: var(--bg-base);
    border-color: var(--accent-blue);
  }

  .btn-primary:hover {
    background: #4c9aff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--glow-blue);
  }

  .btn-primary:active {
    transform: translateY(0);
  }

  .btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
  }

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

  /* ========================================
     SUBMIT ROW
     ======================================== */

  .submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  /* ========================================
     PREVIEW / OUTPUT PANEL
     ======================================== */

  .preview-panel {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
  }

  .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .preview-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .preview-badge {
    height: 24px;
  }

  .preview-badge img {
    height: 100%;
  }

  .output-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .output-row:last-child {
    margin-bottom: 0;
  }

  .output-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .output-field {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .output-input {
    flex: 1;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-green);
    background: var(--bg-base);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn-copy {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
  }

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

  .btn-copy:active {
    background: var(--bg-active);
  }

  /* ========================================
     VIEWER MODE
     ======================================== */

  .viewer {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .viewer-notice {
    padding: 1rem 1.5rem;
    background: var(--accent-blue-dim);
    border-bottom: 1px solid var(--border-default);
  }

  .viewer-notice-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .viewer-quadrant-banner {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-default);
  }

  .viewer-matrix-readonly {
    padding: 1.5rem;
  }

  .viewer-matrix-grid {
    aspect-ratio: 1;
    max-height: 400px;
    margin: 0 auto 1rem;
  }

  .viewer-axis-values {
    display: flex;
    gap: 0.5rem 2rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .viewer-axis-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .viewer-axis-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .viewer-axis-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .viewer-section-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
  }

  .viewer-details {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-muted);
  }

  .viewer-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .viewer-details li {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
  }

  .viewer-details li::before {
    content: '>';
    color: var(--accent-blue);
    font-family: var(--font-mono);
    font-weight: 600;
    flex-shrink: 0;
  }

  .viewer-details .bullet-label {
    color: var(--text-muted);
    min-width: 110px;
    flex-shrink: 0;
  }

  .viewer-details .bullet-label::after {
    content: ':';
  }

  /* Legacy v1 viewer */
  .viewer-legacy-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-muted);
    font-size: 0.8125rem;
    color: var(--text-muted);
  }

  .legacy-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
  }

  .viewer-bullets {
    padding: 1.25rem 1.5rem;
  }

  .viewer-bullets ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .viewer-bullets li {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
  }

  .viewer-bullets li::before {
    content: '>';
    color: var(--accent-blue);
    font-family: var(--font-mono);
    font-weight: 600;
    flex-shrink: 0;
  }

  .viewer-bullets .bullet-label {
    color: var(--text-muted);
    min-width: 110px;
    flex-shrink: 0;
  }

  .viewer-bullets .bullet-label::after {
    content: ':';
  }

  .viewer-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
  }

  /* ========================================
     NOTICE BOX
     ======================================== */

  .notice {
    padding: 1rem 1.25rem;
    background: var(--accent-blue-dim);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
  }

  .notice-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 0.25rem;
  }

  .notice-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* ========================================
     TOAST NOTIFICATIONS
     ======================================== */

  .toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
    pointer-events: none;
  }

  .toast {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-primary);
    pointer-events: auto;
    animation: toastIn 300ms ease-out forwards;
  }

  .toast--success {
    border-color: var(--accent-green);
  }

  .toast--success::before {
    content: '\2713';
    color: var(--accent-green);
    font-weight: 600;
  }

  .toast--exiting {
    animation: toastOut 200ms ease-in forwards;
  }

  @keyframes toastIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

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

/* ========================================
   UTILITIES LAYER
   ======================================== */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hidden {
    display: none !important;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .app {
      padding: 0 1rem;
    }

    .matrix-container {
      grid-template-columns: 1.5rem 1fr;
      justify-content: center;
    }

    .matrix-grid,
    .viewer-matrix-grid {
      max-height: 280px;
    }

    /* Smaller quadrant labels on mobile to prevent overlap */
    .matrix-quadrant-label {
      font-size: 0.5rem;
      letter-spacing: 0.02em;
    }

    .matrix-sliders {
      gap: 0.75rem;
    }

    .viewer-axis-values {
      flex-direction: column;
      align-items: center;
    }

    .preview-panel {
      padding: 1rem;
    }

    .output-row {
      flex-direction: column;
    }

    .btn-copy {
      width: 100%;
    }

    .keyboard-hints {
      display: none;
    }

    .footer {
      flex-direction: column;
      text-align: center;
    }
  }
}