/* cyberdesign v0.1.0 — generated by build.ts, DO NOT EDIT */

/* Variables */
:root {
  --cd-bg: #05060a;
  --cd-bg-panel: #0b0f18;
  --cd-bg-panel-hover: #111827;
  --cd-bg-surface: rgba(11, 15, 24, 0.94);
  --cd-border: #26324c;
  --cd-border-dim: #1e1e24;
  --cd-text: #e8e4e0;
  --cd-text-alt: #f2f7ff;
  --cd-text-secondary: #a7b7d6;
  --cd-text-muted: #8a8078;
  --cd-text-muted-alt: #7a8599;
  --cd-text-dim: #6a625c;
  --cd-accent-secondary: #ff2bd6;
  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
  --cd-neon-green: #52ff9f;
  --cd-neon-red: #ff456c;
  --cd-neon-blue: #6aa8ff;
  --cd-neon-purple: #9d7cff;
  --cd-neon-yellow: #f7ff5a;
  --cd-neon-amber: #ffaa00;
  --cd-neon-orange: #ff8800;
  --cd-neon-cyan: #47f6ff;
  --cd-neon-magenta: #ff2bd6;
  --cd-orange: #ff8800;
  --cd-amber: #ffaa00;
  --cd-gold: #ffcc00;
  --cd-cyan: #47f6ff;
  --cd-magenta: #ff2bd6;
  --cd-purple: #9d7cff;
  --cd-green: #52ff9f;
  --cd-red: #ff456c;
  --cd-blue: #6aa8ff;
  --cd-yellow: #f7ff5a;
  --cd-scanline-color: rgba(0, 0, 0, 0.18);
  --cd-pixel-grid-color: rgba(71, 246, 255, 0.055);
  --cd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --cd-text-xs: 0.6875rem;
  --cd-text-sm: 0.75rem;
  --cd-text-base: 0.8125rem;
  --cd-text-md: 0.875rem;
  --cd-text-lg: 0.9375rem;
}

.theme-orange {
  --cd-accent: #ff8800;
  --cd-accent-bright: #ffaa00;
  --cd-accent-subtle: rgba(255, 136, 0, 0.12);
  --cd-accent-glow: rgba(255, 136, 0, 0.40);
  --cd-accent-subtle-glow: rgba(255, 136, 0, 0.20);
  --cd-border-glow: rgba(255, 136, 0, 0.20);
  --cd-scrollbar-thumb: rgba(255, 136, 0, 0.20);
  --cd-panel-shadow: inset 0 0 0 1px rgba(255, 136, 0, 0.04), 0 0 24px rgba(255, 136, 0, 0.07);
  --cd-accent-secondary: #ff2bd6;
  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
}

.theme-cyan {
  --cd-accent: #47f6ff;
  --cd-accent-bright: #bdffff;
  --cd-accent-subtle: rgba(71, 246, 255, 0.12);
  --cd-accent-glow: rgba(71, 246, 255, 0.34);
  --cd-accent-subtle-glow: rgba(71, 246, 255, 0.20);
  --cd-border-glow: rgba(71, 246, 255, 0.20);
  --cd-scrollbar-thumb: rgba(71, 246, 255, 0.20);
  --cd-panel-shadow: inset 0 0 0 1px rgba(71, 246, 255, 0.04), 0 0 24px rgba(71, 246, 255, 0.07);
  --cd-accent-secondary: #ff2bd6;
  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
}

.theme-green {
  --cd-accent: #00ff00;
  --cd-accent-bright: #52ff9f;
  --cd-accent-subtle: rgba(0, 255, 0, 0.12);
  --cd-accent-glow: rgba(0, 255, 0, 0.34);
  --cd-accent-subtle-glow: rgba(0, 255, 0, 0.20);
  --cd-border-glow: rgba(0, 255, 0, 0.20);
  --cd-scrollbar-thumb: rgba(0, 255, 0, 0.20);
  --cd-panel-shadow: inset 0 0 0 1px rgba(0, 255, 0, 0.04), 0 0 24px rgba(0, 255, 0, 0.07);
  --cd-accent-secondary: #9d7cff;
  --cd-accent-secondary-glow: rgba(157, 124, 255, 0.32);
  --cd-accent-secondary-subtle: rgba(157, 124, 255, 0.12);
}

.theme-red {
  --cd-accent: #ff4444;
  --cd-accent-bright: #ff7777;
  --cd-accent-subtle: rgba(255, 68, 68, 0.12);
  --cd-accent-glow: rgba(255, 68, 68, 0.34);
  --cd-accent-subtle-glow: rgba(255, 68, 68, 0.20);
  --cd-border-glow: rgba(255, 68, 68, 0.20);
  --cd-scrollbar-thumb: rgba(255, 68, 68, 0.20);
  --cd-panel-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.04), 0 0 24px rgba(255, 68, 68, 0.07);
  --cd-accent-secondary: #6aa8ff;
  --cd-accent-secondary-glow: rgba(106, 168, 255, 0.32);
  --cd-accent-secondary-subtle: rgba(106, 168, 255, 0.12);
}

.theme-steel {
  --cd-accent: #9aafc4;
  --cd-accent-bright: #c8d8e8;
  --cd-accent-subtle: rgba(154, 175, 196, 0.12);
  --cd-accent-glow: rgba(154, 175, 196, 0.28);
  --cd-accent-subtle-glow: rgba(154, 175, 196, 0.16);
  --cd-border-glow: rgba(154, 175, 196, 0.18);
  --cd-scrollbar-thumb: rgba(154, 175, 196, 0.20);
  --cd-panel-shadow: inset 0 0 0 1px rgba(154, 175, 196, 0.06), 0 0 24px rgba(154, 175, 196, 0.06);
  --cd-accent-secondary: #ffaa00;
  --cd-accent-secondary-glow: rgba(255, 170, 0, 0.28);
  --cd-accent-secondary-subtle: rgba(255, 170, 0, 0.12);
}

/* Base */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  font-family: var(--cd-font-mono);
  background-color: var(--cd-bg);
  color: var(--cd-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: color-mix(in srgb, var(--cd-accent) 24%, transparent);
  color: var(--cd-text);
}

/* Focus indicators (high priority accessibility fix)
   Visible keyboard focus ring using theme accent. Cyber glow aesthetic.
   Components that use custom focus (e.g. neon box-shadow on inputs) layer
   on top of this. outline:none removed from focusables so this applies.
   See also per-component :focus-visible enhancements. */
:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
}

/* Utilities */
/* ── Glow box-shadows ─────────────────────────────────── */

.cd-glow {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 25%, transparent),
    0 0 20px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

.cd-glow-secondary {
  box-shadow:
    0 0 8px var(--cd-accent-secondary-subtle),
    0 0 20px var(--cd-accent-secondary-subtle),
    inset 0 0 8px var(--cd-accent-secondary-subtle);
}

/* Named backward-compat variants */
.glow-orange {
  box-shadow:
    0 0 8px rgba(255,136,0,0.25),
    0 0 20px rgba(255,136,0,0.12),
    inset 0 0 8px rgba(255,136,0,0.06);
}
.glow-amber {
  box-shadow:
    0 0 8px rgba(255,170,0,0.25),
    0 0 20px rgba(255,170,0,0.12),
    inset 0 0 8px rgba(255,170,0,0.06);
}
.glow-magenta {
  box-shadow:
    0 0 8px rgba(255,43,214,0.25),
    0 0 20px rgba(255,43,214,0.12),
    inset 0 0 8px rgba(255,43,214,0.06);
}
.glow-green {
  box-shadow:
    0 0 8px rgba(82,255,159,0.25),
    0 0 20px rgba(82,255,159,0.12),
    inset 0 0 8px rgba(82,255,159,0.06);
}
.glow-red {
  box-shadow:
    0 0 8px rgba(255,69,108,0.25),
    0 0 20px rgba(255,69,108,0.12),
    inset 0 0 8px rgba(255,69,108,0.06);
}
.glow-cyan {
  box-shadow:
    0 0 8px rgba(71,246,255,0.25),
    0 0 20px rgba(71,246,255,0.12),
    inset 0 0 8px rgba(71,246,255,0.06);
}
.glow-blue {
  box-shadow:
    0 0 8px rgba(106,168,255,0.25),
    0 0 20px rgba(106,168,255,0.12),
    inset 0 0 8px rgba(106,168,255,0.06);
}

/* ── Text glow ─────────────────────────────────────────── */

.cd-text-glow {
  text-shadow:
    0 0 6px color-mix(in srgb, var(--cd-accent) 60%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.text-glow-orange  { text-shadow: 0 0 6px rgba(255,136,0,0.6), 0 0 12px rgba(255,136,0,0.3); }
.text-glow-amber   { text-shadow: 0 0 6px rgba(255,170,0,0.6), 0 0 12px rgba(255,170,0,0.3); }
.text-glow-magenta { text-shadow: 0 0 6px rgba(255,43,214,0.6), 0 0 12px rgba(255,43,214,0.3); }
.text-glow-green   { text-shadow: 0 0 6px rgba(82,255,159,0.6), 0 0 12px rgba(82,255,159,0.3); }
.text-glow-red     { text-shadow: 0 0 6px rgba(255,69,108,0.6), 0 0 12px rgba(255,69,108,0.3); }
.text-glow-cyan    { text-shadow: 0 0 6px rgba(71,246,255,0.6), 0 0 12px rgba(71,246,255,0.3); }
.text-glow-blue    { text-shadow: 0 0 6px rgba(106,168,255,0.6), 0 0 12px rgba(106,168,255,0.3); }

/* ── 3D offset shadow (AI-shell app pattern) ─────────────── */

.cd-shadow-3d {
  box-shadow:
    3px 3px 0 var(--cd-accent-secondary-subtle),
    0 0 12px color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-shadow-3d-hover:hover {
  box-shadow:
    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

/* ── CRT scanline overlay ───────────────────────────────── */

.cd-scanline {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--cd-scanline-color) 2px,
    var(--cd-scanline-color) 4px
  );
  mix-blend-mode: multiply;
}

/* ── Pixel grid background (AI-shell app pattern) ────────── */

.cd-pixel-grid {
  background-image:
    linear-gradient(90deg, var(--cd-pixel-grid-color) 1px, transparent 1px),
    linear-gradient(0deg, var(--cd-pixel-grid-color) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ── Thin neon scrollbar ────────────────────────────────── */

.cd-scrollbar::-webkit-scrollbar       { width: 4px; height: 4px; }
.cd-scrollbar::-webkit-scrollbar-track { background: transparent; }
.cd-scrollbar::-webkit-scrollbar-thumb {
  background: var(--cd-scrollbar-thumb);
  border-radius: 2px;
}
.cd-scrollbar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cd-scrollbar-thumb) 200%, transparent);
}
.cd-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--cd-scrollbar-thumb) transparent;
}

/* ── Typography utilities ───────────────────────────────── */

.cd-label {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.cd-label-wide {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

/* ── Chromatic aberration / glitch text ─────────────────── */

.cd-glitch-text {
  text-shadow:
    2px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
    0 0 8px color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

/* ── Frosted glass surface ──────────────────────────────── */

.cd-glass {
  background: var(--cd-bg-surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Animations */
/* ── Keyframes ──────────────────────────────────────────── */

@keyframes cd-pulse-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes cd-flicker {
  0%, 94%, 96%, 98%, 100% { opacity: 1; }
  95%, 97%                 { opacity: 0.1; }
}

@keyframes cd-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes cd-logo-glitch {
  0%, 90%, 100% {
    text-shadow:
      2px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
      0 0 8px color-mix(in srgb, var(--cd-accent) 40%, transparent);
    transform: none;
  }
  92% {
    text-shadow:
      -3px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 80%, transparent),
      3px 0 0 color-mix(in srgb, var(--cd-accent) 80%, transparent);
    transform: translateX(2px);
  }
  94% {
    text-shadow:
      3px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 80%, transparent),
      -2px 0 0 color-mix(in srgb, var(--cd-accent) 80%, transparent);
    transform: translateX(-1px);
  }
}

@keyframes cd-neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 6px color-mix(in srgb, var(--cd-accent) 30%, transparent),
      0 0 12px color-mix(in srgb, var(--cd-accent) 15%, transparent);
  }
  50% {
    box-shadow:
      0 0 12px color-mix(in srgb, var(--cd-accent) 60%, transparent),
      0 0 24px color-mix(in srgb, var(--cd-accent) 30%, transparent);
  }
}

@keyframes cd-header-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(200%); opacity: 0; }
}

@keyframes cd-skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes cd-crt-boot {
  0%   { filter: brightness(0); }
  10%  { filter: brightness(3) blur(2px); }
  30%  { filter: brightness(1.2) blur(0); }
  100% { filter: brightness(1); }
}

/* ── Animation classes ──────────────────────────────────── */

.cd-animate-pulse-glow  { animation: cd-pulse-glow    2s   ease-in-out infinite; }
.cd-animate-flicker     { animation: cd-flicker        3s   ease-in-out infinite; }
.cd-animate-cursor-blink{ animation: cd-cursor-blink   1.2s step-end    infinite; }
.cd-animate-logo-glitch { animation: cd-logo-glitch    9s   ease-in-out infinite; }
.cd-animate-neon-pulse  { animation: cd-neon-pulse     2.2s ease-in-out infinite; }
.cd-animate-sweep       { animation: cd-header-sweep   10s  ease-in-out infinite; }
.cd-animate-crt-boot    { animation: cd-crt-boot       0.6s ease-out    both; }

.cd-skel {
  background: linear-gradient(
    90deg,
    var(--cd-bg-panel) 0%,
    color-mix(in srgb, var(--cd-accent) 6%, var(--cd-bg-panel)) 50%,
    var(--cd-bg-panel) 100%
  );
  background-size: 200% 100%;
  animation: cd-skel-shimmer 1.5s linear infinite;
}

/* Backward-compat aliases for dashboard-app class names */
.animate-pulse-glow { animation: cd-pulse-glow 2s ease-in-out infinite; }
.animate-flicker    { animation: cd-flicker 3s ease-in-out infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-animate-pulse-glow,
  .cd-animate-flicker,
  .cd-animate-cursor-blink,
  .cd-animate-logo-glitch,
  .cd-animate-neon-pulse,
  .cd-animate-sweep,
  .cd-animate-crt-boot,
  .cd-skel,
  .animate-pulse-glow,
  .animate-flicker {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}

/* Component: GlowCard */
.cd-glow-card {
  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  backdrop-filter: blur(var(--cd-card-blur, 4px));
  -webkit-backdrop-filter: blur(var(--cd-card-blur, 4px));
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.cd-glow-card:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel-hover) 80%, transparent);
}

.cd-glow-card[data-active="true"],
.cd-glow-card.is-active {
  border-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 25%, transparent),
    0 0 20px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

/* Color variant modifiers — override --cd-accent locally for the card */
.cd-glow-card--orange  { --cd-accent: #ff8800; }
.cd-glow-card--amber   { --cd-accent: #ffaa00; }
.cd-glow-card--gold    { --cd-accent: #ffcc00; }
.cd-glow-card--cyan    { --cd-accent: #47f6ff; }
.cd-glow-card--magenta { --cd-accent: #ff2bd6; }
.cd-glow-card--green   { --cd-accent: #52ff9f; }
.cd-glow-card--red     { --cd-accent: #ff456c; }
.cd-glow-card--blue    { --cd-accent: #6aa8ff; }
.cd-glow-card--purple  { --cd-accent: #9d7cff; }

/* Component: PanelHeader */
.cd-panel-header {
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--cd-border-glow);
  background: var(--cd-bg-surface);
  color: var(--cd-accent);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-shadow:
    2px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
    0 0 6px color-mix(in srgb, var(--cd-accent) 60%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.cd-panel-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cd-accent) 40%,
    var(--cd-accent-secondary) 60%,
    transparent
  );
  opacity: 0.6;
  transform: translateX(-100%);
  animation: cd-header-sweep 10s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cd-panel-header::after {
    animation-duration: 0.001ms;
  }
}

.cd-panel-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cd-text-muted);
}

/* Component: Badge */
.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  line-height: 1.6;
}

/* Color variants */
.cd-badge--orange  { color: #ff8800; border-color: rgba(255,136,0,0.25);  background: rgba(255,136,0,0.06); }
.cd-badge--amber   { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
.cd-badge--gold    { color: #ffcc00; border-color: rgba(255,204,0,0.25);  background: rgba(255,204,0,0.06); }
.cd-badge--cyan    { color: #47f6ff; border-color: rgba(71,246,255,0.25); background: rgba(71,246,255,0.06); }
.cd-badge--magenta { color: #ff2bd6; border-color: rgba(255,43,214,0.25); background: rgba(255,43,214,0.06); }
.cd-badge--green   { color: #52ff9f; border-color: rgba(82,255,159,0.25); background: rgba(82,255,159,0.06); }
.cd-badge--red     { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
.cd-badge--blue    { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
.cd-badge--purple  { color: #9d7cff; border-color: rgba(157,124,255,0.25);background: rgba(157,124,255,0.06); }
.cd-badge--yellow  { color: #f7ff5a; border-color: rgba(247,255,90,0.25); background: rgba(247,255,90,0.06); }

/* Backward-compat aliases for the dashboard app's category badge classes */
.badge-government { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
.badge-event      { color: #ff2bd6; border-color: rgba(255,43,214,0.25); background: rgba(255,43,214,0.06); }
.badge-crime      { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
.badge-fire       { color: #ff6600; border-color: rgba(255,102,0,0.25);  background: rgba(255,102,0,0.06); }
.badge-weather    { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
.badge-transit    { color: #52ff9f; border-color: rgba(82,255,159,0.25); background: rgba(82,255,159,0.06); }
.badge-air_quality{ color: #a8ff8f; border-color: rgba(168,255,143,0.25);background: rgba(168,255,143,0.06); }
.badge-earthquake { color: #cc8844; border-color: rgba(204,136,68,0.25); background: rgba(204,136,68,0.06); }
.badge-traffic    { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
.badge-power      { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
.badge-coastal    { color: #00aaff; border-color: rgba(0,170,255,0.25);  background: rgba(0,170,255,0.06); }
.badge-flood      { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
.badge-airport    { color: #cc88ff; border-color: rgba(204,136,255,0.25);background: rgba(204,136,255,0.06); }
.badge-health     { color: #ff8888; border-color: rgba(255,136,136,0.25);background: rgba(255,136,136,0.06); }
.badge-news       { color: #ffff00; border-color: rgba(255,255,0,0.25);  background: rgba(255,255,0,0.06); }
.badge-permit     { color: #f59e0b; border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.06); }
.badge-other      { color: #888888; border-color: rgba(136,136,136,0.25);background: rgba(136,136,136,0.06); }

/* Component: Button */
.cd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px; /* enlarged for target size a11y (was 28px) */
  padding: 0 12px;
  border: 1px solid var(--cd-border);
  border-radius: 0;
  background: rgba(5, 6, 10, 0.55);
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

/* Corner pixel accent dot */
.cd-btn::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 3px;
  height: 3px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 120ms ease;
}

.cd-btn:hover:not(:disabled) {
  color: var(--cd-accent);
  border-color: var(--cd-border-glow);
  background: var(--cd-accent-subtle);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-btn:hover:not(:disabled)::before {
  opacity: 1;
}

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

.cd-btn:focus-visible:not(:disabled) {
  color: var(--cd-accent);
  border-color: var(--cd-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 40%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

/* Primary variant */
.cd-btn--primary {
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
  color: var(--cd-accent);
}

.cd-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
  border-color: var(--cd-accent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent),
    0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent),
    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 30%, transparent);
}

.cd-btn--primary:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
  border-color: var(--cd-accent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent),
    0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent),
    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 30%, transparent);
}

/* Danger variant */
.cd-btn--danger {
  color: #ff456c;
  border-color: rgba(255, 69, 108, 0.30);
}

.cd-btn--danger:hover:not(:disabled) {
  color: #ff456c;
  background: rgba(255, 69, 108, 0.10);
  border-color: rgba(255, 69, 108, 0.60);
  box-shadow:
    0 0 12px rgba(255, 69, 108, 0.20),
    inset 0 -2px 0 rgba(255, 69, 108, 0.20);
}

.cd-btn--danger:focus-visible:not(:disabled) {
  color: #ff456c;
  background: rgba(255, 69, 108, 0.10);
  border-color: rgba(255, 69, 108, 0.60);
  box-shadow:
    0 0 12px rgba(255, 69, 108, 0.20),
    inset 0 -2px 0 rgba(255, 69, 108, 0.20);
}

/* Small variant */
.cd-btn--sm {
  height: 26px; /* enlarged (was 22px) */
  padding: 0 8px;
  font-size: var(--cd-text-xs);
}

/* Icon-only variant */
.cd-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
}

.cd-btn--icon.cd-btn--sm {
  width: 26px;
  height: 26px;
}

/* Component: Input + Textarea */
/* ── Base input ─────────────────────────────────────────── */

.cd-input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: rgba(5, 6, 10, 0.82);
  color: var(--cd-text);
  border: 1px solid var(--cd-border);
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  line-height: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.cd-input::placeholder {
  color: var(--cd-text-dim);
  font-style: italic;
}

.cd-input:focus {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    inset 0 0 4px color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

.cd-input:hover:not(:focus):not(:disabled) {
  border-color: var(--cd-border-mid, #26324c);
}

.cd-input:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Left-accent variant (AI-shell corpus search pattern) */
.cd-input--accent {
  border-left: 2px solid var(--cd-accent);
  padding-left: 9px;
}

/* Error state */
.cd-input--error {
  border-color: rgba(255, 69, 108, 0.55);
  box-shadow: 0 0 6px rgba(255, 69, 108, 0.15);
}

.cd-input--error:focus {
  border-color: rgba(255, 69, 108, 0.80);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 69, 108, 0.20),
    0 0 8px rgba(255, 69, 108, 0.25),
    inset 0 0 4px rgba(255, 69, 108, 0.08);
}

/* Small variant */
.cd-input--sm {
  height: 26px;
  font-size: var(--cd-text-sm);
  padding: 0 8px;
}

/* Large variant */
.cd-input--lg {
  height: 40px;
  font-size: var(--cd-text-md);
  padding: 0 14px;
}

/* Number — hide spin buttons */
.cd-input[type="number"]::-webkit-inner-spin-button,
.cd-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cd-input[type="number"] {
  -moz-appearance: textfield;
}

/* ── Textarea ─────────────────────────────────────────── */

.cd-textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: rgba(5, 6, 10, 0.82);
  color: var(--cd-text);
  border: 1px solid var(--cd-border);
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  line-height: 1.55;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cd-textarea::placeholder {
  color: var(--cd-text-dim);
  font-style: italic;
}

.cd-textarea:focus {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    inset 0 0 4px color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

.cd-textarea:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  resize: none;
}

.cd-textarea--error {
  border-color: rgba(255, 69, 108, 0.55);
}

.cd-textarea--error:focus {
  border-color: rgba(255, 69, 108, 0.80);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 69, 108, 0.20),
    0 0 8px rgba(255, 69, 108, 0.25);
}

/* ── Input group (prefix / suffix) ─────────────────────── */

.cd-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.cd-input-group .cd-input {
  flex: 1;
  min-width: 0;
}

.cd-input-addon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(5, 6, 10, 0.60);
  border: 1px solid var(--cd-border);
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

/* Prefix addon: remove right border so it merges with input */
.cd-input-group .cd-input-addon:first-child {
  border-right: none;
}

/* Suffix addon: remove left border so it merges with input */
.cd-input-group .cd-input-addon:last-child {
  border-left: none;
}

/* When the input is focused, light up the whole group border */
.cd-input-group:focus-within .cd-input-addon {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
}

/* Component: Select */
/* ── Select wrapper ─────────────────────────────────────── */
/* Wrap <select> in .cd-select-wrap to get the custom arrow  */

.cd-select-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
}

/* Custom chevron arrow */
.cd-select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--cd-text-muted);
  transition: border-top-color 150ms ease;
}

.cd-select-wrap:focus-within::after {
  border-top-color: var(--cd-accent);
}

/* ── Select element ─────────────────────────────────────── */

.cd-select {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 32px 0 10px;
  background: rgba(5, 6, 10, 0.82);
  color: var(--cd-text);
  border: 1px solid var(--cd-border);
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Style native option elements */
.cd-select option {
  background: #0b0f18;
  color: #e8e4e0;
}

.cd-select:focus {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-select:hover:not(:focus):not(:disabled) {
  border-color: var(--cd-border-mid, #26324c);
}

.cd-select:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cd-select--error {
  border-color: rgba(255, 69, 108, 0.55);
}

.cd-select--error:focus {
  border-color: rgba(255, 69, 108, 0.80);
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 69, 108, 0.20),
    0 0 8px rgba(255, 69, 108, 0.25);
}

.cd-select--sm {
  height: 26px;
  font-size: var(--cd-text-sm);
  padding-right: 28px;
  padding-left: 8px;
}

/* Uppercase label variant (AI-shell viz-controls pattern) */
.cd-select--label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--cd-text-sm);
}

/* Component: Checkbox + Radio */
/* ── Shared control base ────────────────────────────────── */

.cd-checkbox,
.cd-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0; /* enlarged for target size (was 14px) */
  background: rgba(5, 6, 10, 0.82);
  border: 1px solid var(--cd-border);
  cursor: pointer;
  position: relative;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  vertical-align: middle;
  margin: 0;
}

.cd-checkbox:hover:not(:disabled),
.cd-radio:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
}

.cd-checkbox:focus-visible,
.cd-radio:focus-visible {
  outline: 1px solid var(--cd-accent);
  outline-offset: 2px;
}

.cd-checkbox:disabled,
.cd-radio:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Checkbox ───────────────────────────────────────────── */

.cd-checkbox {
  border-radius: 0;
}

/* Checked state: neon fill + checkmark */
.cd-checkbox:checked {
  background: color-mix(in srgb, var(--cd-accent) 20%, transparent);
  border-color: var(--cd-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

/* Checkmark via clip-path on a pseudo-element */
.cd-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--cd-accent);
  border-bottom: 1.5px solid var(--cd-accent);
  transform: rotate(-45deg) translateY(-2px);
}

/* Indeterminate state */
.cd-checkbox:indeterminate {
  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
}

.cd-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background: var(--cd-accent);
  transform: translateY(-50%);
}

/* ── Radio ──────────────────────────────────────────────── */

.cd-radio {
  border-radius: 50%;
}

/* Checked: filled dot */
.cd-radio:checked {
  border-color: var(--cd-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-radio:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--cd-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px color-mix(in srgb, var(--cd-accent) 60%, transparent);
}

/* ── Control label (checkbox/radio + text wrapper) ──────── */

.cd-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  color: var(--cd-text-secondary);
  user-select: none;
  transition: color 120ms ease;
}

.cd-control:hover {
  color: var(--cd-text);
}

.cd-control input:disabled ~ .cd-control__label {
  opacity: 0.3;
}

.cd-control__label {
  line-height: 1;
}

.cd-control__desc {
  display: block;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Component: Switch */
/* ── Switch / Toggle ────────────────────────────────────── */
/*
  Usage:
  <label class="cd-switch">
    <input type="checkbox" class="cd-switch__input">
    <span class="cd-switch__track">
      <span class="cd-switch__thumb"></span>
    </span>
    <span class="cd-switch__label">Enable feature</span>
  </label>
*/

.cd-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  color: var(--cd-text-secondary);
  user-select: none;
  transition: color 120ms ease;
}

.cd-switch:hover {
  color: var(--cd-text);
}

.cd-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Track */
.cd-switch__track {
  position: relative;
  display: flex;
  align-items: center;
  width: 36px; /* enlarged target */
  height: 18px;
  flex-shrink: 0;
  background: rgba(5, 6, 10, 0.82);
  border: 1px solid var(--cd-border);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.cd-switch:hover .cd-switch__track {
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

/* Thumb */
.cd-switch__thumb {
  position: absolute;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--cd-text-dim);
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

/* Checked state */
.cd-switch__input:checked + .cd-switch__track {
  border-color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--cd-accent) 25%, transparent),
    inset 0 0 4px color-mix(in srgb, var(--cd-accent) 8%, transparent);
}

.cd-switch__input:checked + .cd-switch__track .cd-switch__thumb {
  transform: translateX(18px);
  background: var(--cd-accent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--cd-accent) 60%, transparent),
    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 40%, transparent);
}

/* Focus */
.cd-switch__input:focus-visible + .cd-switch__track {
  outline: 1px solid var(--cd-accent);
  outline-offset: 2px;
}

/* Disabled */
.cd-switch__input:disabled + .cd-switch__track {
  opacity: 0.3;
  cursor: not-allowed;
}

.cd-switch__input:disabled ~ .cd-switch__label {
  opacity: 0.3;
}

/* Size: small */
.cd-switch--sm .cd-switch__track {
  width: 28px;
  height: 14px;
}

.cd-switch--sm .cd-switch__thumb {
  width: 10px;
  height: 10px;
}

.cd-switch--sm .cd-switch__input:checked + .cd-switch__track .cd-switch__thumb {
  transform: translateX(14px);
}

/* Component: Slider */
/* ── Range Slider ───────────────────────────────────────── */
/* Mirrors an AI-shell app's sophisticated slider with neon track + 3D thumb */

.cd-slider {
  display: block;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
}

/* ── WebKit ─────────────────────────────────────────────── */

.cd-slider::-webkit-slider-runnable-track {
  height: 4px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--cd-accent) 35%, transparent),
      color-mix(in srgb, var(--cd-accent-secondary) 25%, transparent)
    ),
    var(--cd-bg-panel);
  border: 1px solid var(--cd-border);
  border-radius: 0;
}

.cd-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
  margin-top: -9px;
  background: var(--cd-accent-bright, #bdffff);
  border: 1px solid var(--cd-bg);
  border-radius: 0;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 50%, transparent),
    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
  transition: box-shadow 150ms ease;
}

.cd-slider:focus::-webkit-slider-thumb,
.cd-slider:hover::-webkit-slider-thumb {
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cd-accent) 70%, transparent),
    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
}

/* ── Firefox ────────────────────────────────────────────── */

.cd-slider::-moz-range-track {
  height: 4px;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border);
  border-radius: 0;
}

.cd-slider::-moz-range-progress {
  height: 4px;
  background: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  border-radius: 0;
}

.cd-slider::-moz-range-thumb {
  width: 14px;
  height: 20px;
  background: var(--cd-accent-bright, #bdffff);
  border: 1px solid var(--cd-bg);
  border-radius: 0;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 50%, transparent),
    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
}

.cd-slider:focus-visible {
  outline: 1px solid var(--cd-accent);
  outline-offset: 4px;
}

.cd-slider:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Slider with value label ────────────────────────────── */
/*
  Usage:
  <div class="cd-slider-wrap">
    <input type="range" class="cd-slider">
    <span class="cd-slider-value">74</span>
  </div>
*/

.cd-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cd-slider-wrap .cd-slider {
  flex: 1;
}

.cd-slider-value {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cd-accent);
  min-width: 3ch;
  text-align: right;
  flex-shrink: 0;
}

/* Component: Form (label, field, separator, tooltip, progress) */
/* ── Form label ─────────────────────────────────────────── */

.cd-form-label {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cd-text-secondary);
  user-select: none;
}

/* Required asterisk */
.cd-form-label[data-required]::after,
.cd-form-label--required::after {
  content: ' *';
  color: var(--cd-neon-red);
}

/* ── Form field wrapper ─────────────────────────────────── */
/*
  Usage:
  <div class="cd-field">
    <label class="cd-label">Field Name</label>
    <input class="cd-input">
    <p class="cd-field-desc">Helper text</p>
    <p class="cd-field-error">Error message</p>
  </div>
*/

.cd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

/* Inline layout: label left, control right */
.cd-field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cd-field--inline .cd-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.cd-field--inline > *:last-child:not(.cd-label) {
  flex: 1;
  min-width: 0;
}

.cd-field-desc {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0;
}

.cd-field-error {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  color: var(--cd-neon-red);
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cd-field-error::before {
  content: '⚠';
  font-size: var(--cd-text-xs);
}

/* ── Form section ───────────────────────────────────────── */

.cd-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Separator ──────────────────────────────────────────── */

.cd-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cd-separator::before,
.cd-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cd-border-dim);
}

/* With content (e.g. "OR") */
.cd-separator--label {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cd-text-dim);
  white-space: nowrap;
}

/* No content — pure line */
.cd-separator--plain::before { flex: 1; }
.cd-separator--plain::after  { display: none; }

/* Neon variant */
.cd-separator--neon::before,
.cd-separator--neon::after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--cd-accent) 35%, transparent) 40%,
    color-mix(in srgb, var(--cd-accent-secondary) 25%, transparent) 60%,
    transparent
  );
}

/* Vertical */
.cd-separator--vertical {
  flex-direction: column;
  width: 1px;
  height: 100%;
  gap: 6px;
}

.cd-separator--vertical::before,
.cd-separator--vertical::after {
  flex: 1;
  width: 1px;
  height: auto;
}

/* ── Tooltip (CSS-only) ─────────────────────────────────── */
/*
  Usage: <span class="cd-tooltip" data-tip="Helpful hint">hover me</span>
*/

.cd-tooltip {
  position: relative;
  cursor: help;
}

.cd-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-text);
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
  padding: 4px 8px;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 20%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 9998;
}

/* Arrow */
.cd-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 9999;
}

.cd-tooltip:hover::after,
.cd-tooltip:hover::before {
  opacity: 1;
}

/* Tooltip below */
.cd-tooltip--below::after {
  bottom: auto;
  top: calc(100% + 8px);
}

.cd-tooltip--below::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top: none;
  border-bottom: 5px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
}

/* ── Progress bar ───────────────────────────────────────── */
/*
  Usage:
  <div class="cd-progress">
    <div class="cd-progress__bar" style="width: 65%"></div>
  </div>
*/

.cd-progress {
  width: 100%;
  height: 4px;
  background: var(--cd-bg-panel-hover);
  border: 1px solid var(--cd-border-dim);
  overflow: hidden;
  position: relative;
}

.cd-progress__bar {
  height: 100%;
  background: var(--cd-accent);
  transition: width 300ms ease;
  position: relative;
}

.cd-progress__bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: color-mix(in srgb, var(--cd-accent-bright, var(--cd-accent)) 80%, white);
  filter: blur(2px);
}

/* Indeterminate / scanning */
.cd-progress--indeterminate .cd-progress__bar {
  width: 40% !important;
  animation: cd-progress-scan 1.8s ease-in-out infinite;
}

@keyframes cd-progress-scan {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

/* Color variants */
.cd-progress--danger .cd-progress__bar  { background: var(--cd-neon-red); }
.cd-progress--success .cd-progress__bar { background: var(--cd-neon-green); }
.cd-progress--warning .cd-progress__bar { background: var(--cd-neon-amber); }

/* Thick variant */
.cd-progress--thick {
  height: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .cd-progress--indeterminate .cd-progress__bar {
    animation-duration: 0.001ms;
  }
}

/* Component: Terminal / Console */
/* ── Terminal / Console ────────────────────────────────────────────────────── */
/*
  Pure CSS terminal/console window in the cyberpunk aesthetic.

  Usage (static):
  <div class="cd-terminal">
    <div class="cd-terminal__header">
      <span class="cd-terminal__title">WINTERMUTE // SEC-07</span>
      <div class="cd-terminal__controls">
        <span class="cd-terminal__dot cd-terminal__dot--min"></span>
        <span class="cd-terminal__dot cd-terminal__dot--max"></span>
        <span class="cd-terminal__dot cd-terminal__dot--close"></span>
      </div>
    </div>
    <div class="cd-terminal__body cd-scrollbar">
      <div class="cd-terminal__line cd-terminal__line--system">SYSTEM BOOT 0xA4F2</div>
      <div class="cd-terminal__line cd-terminal__line--prompt"><span class="cd-terminal__prompt">root@net&gt; </span>status</div>
      <div class="cd-terminal__line">CONNECTION: SECURE • LATENCY: 4ms</div>
      <div class="cd-terminal__line cd-terminal__line--error">ERR: SUBNET BREACH DETECTED</div>
      <div class="cd-terminal__line">... RECOVERING FEED ...</div>
    </div>
    <div class="cd-terminal__input">
      <span class="cd-terminal__prompt">root@net&gt; </span>
      <input class="cd-terminal__field" placeholder="type command..." />
    </div>
  </div>

  Modifiers:
  .cd-terminal--crt        // extra inner scanline effect (compose or internal)
  .cd-terminal--compact    // tighter spacing / smaller text

  Line modifiers:
  .cd-terminal__line--prompt
  .cd-terminal__line--command
  .cd-terminal__line--output
  .cd-terminal__line--error
  .cd-terminal__line--system

  Compose with existing utilities:
  - .cd-scanline (child inside body)
  - .cd-glitch-text on error lines
  - .cd-glow on header or lines
  - .cd-animate-flicker on system messages
*/

.cd-terminal {
  display: flex;
  flex-direction: column;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border);
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  color: var(--cd-text);
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 8%, transparent),
    0 0 16px color-mix(in srgb, var(--cd-accent) 12%, transparent);
  min-width: 280px;
  max-width: 100%;
}

/* Header bar */
.cd-terminal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--cd-bg) 88%, var(--cd-accent) 3%);
  border-bottom: 1px solid var(--cd-border-dim);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cd-text-muted);
  user-select: none;
  flex-shrink: 0;
}

.cd-terminal__title {
  color: var(--cd-accent);
  letter-spacing: 0.08em;
  text-shadow: 0 0 4px var(--cd-accent-glow);
}

.cd-terminal__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cd-terminal__dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--cd-border);
  background: var(--cd-bg-panel-hover);
  transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  cursor: pointer;
}

.cd-terminal__dot:hover {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-accent);
  box-shadow: 0 0 6px var(--cd-accent-glow);
}

.cd-terminal__dot--min:hover { background: color-mix(in srgb, var(--cd-accent) 30%, transparent); }
.cd-terminal__dot--max:hover { background: color-mix(in srgb, var(--cd-green) 30%, transparent); }
.cd-terminal__dot--close:hover {
  background: color-mix(in srgb, var(--cd-red) 35%, transparent);
  border-color: var(--cd-neon-red);
  box-shadow: 0 0 6px rgba(255, 69, 108, 0.5);
}

/* Scrollable body */
.cd-terminal__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--cd-bg) 96%, transparent);
  min-height: 120px;
  max-height: 260px; /* sensible default for demos; override as needed */
}

/* Individual log lines */
.cd-terminal__line {
  margin: 1px 0;
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--cd-text-sm);
}

.cd-terminal__line--system {
  color: var(--cd-text-muted);
  font-size: var(--cd-text-xs);
  letter-spacing: 0.08em;
}

.cd-terminal__line--prompt {
  color: var(--cd-accent);
}

.cd-terminal__prompt {
  color: var(--cd-accent);
  font-weight: 700;
}

.cd-terminal__line--command {
  color: var(--cd-text);
}

.cd-terminal__line--output {
  color: var(--cd-text-secondary);
  padding-left: 12px;
}

.cd-terminal__line--error {
  color: var(--cd-neon-red);
  text-shadow: 0 0 4px rgba(255, 69, 108, 0.6);
}

/* Bottom input row */
.cd-terminal__input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(5, 6, 10, 0.75);
  border-top: 1px solid var(--cd-border-dim);
  flex-shrink: 0;
}

.cd-terminal__input .cd-terminal__prompt {
  color: var(--cd-accent);
  font-weight: 700;
  white-space: nowrap;
}

.cd-terminal__field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  color: var(--cd-text);
  caret-color: var(--cd-accent);
  padding: 0;
}

.cd-terminal__field::placeholder {
  color: var(--cd-text-dim);
  font-style: italic;
}

.cd-terminal__field:focus {
  /* subtle neon underline instead of ring to stay inside terminal aesthetic */
  box-shadow: 0 1px 0 var(--cd-accent);
}

/* Modifiers */
.cd-terminal--compact {
  font-size: var(--cd-text-xs);
}

.cd-terminal--compact .cd-terminal__header {
  padding: 4px 8px;
  font-size: 8px;
}

.cd-terminal--compact .cd-terminal__body {
  padding: 6px 8px;
  min-height: 80px;
  max-height: 160px;
}

.cd-terminal--compact .cd-terminal__line {
  font-size: var(--cd-text-xs);
  margin: 0;
}

.cd-terminal--compact .cd-terminal__input {
  padding: 4px 8px;
}

/* Optional CRT inner scan effect (user can also compose with .cd-scanline child) */
.cd-terminal--crt {
  position: relative;
}

.cd-terminal--crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--cd-scanline-color) 2px,
    var(--cd-scanline-color) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.7;
  z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-terminal__dot {
    transition: none;
  }
  .cd-terminal--crt::after {
    animation: none;
  }
}

/* Component: HUD Frames & Status Bars */
/* ── HUD Frames, Bars & Segments ──────────────────────────────────────────── */
/*
  Heads-up display elements for cyberpunk / neo-futuristic interfaces.

  Usage examples:
  <!-- Floating frame / panel wrapper -->
  <div class="cd-hud-frame">
    <div class="cd-hud__label">THREAT LEVEL</div>
    <div class="cd-hud__value cd-hud__value--warn">HIGH</div>
  </div>

  <!-- Top / bottom status bar -->
  <div class="cd-hud-bar cd-hud-bar--top">
    <div class="cd-hud-segment">
      <span class="cd-hud-segment__label">LOC</span>
      <span class="cd-hud-segment__value">SECTOR-7</span>
    </div>
    ...
  </div>

  Compose with: .cd-corners, .cd-glow, .cd-scanline (as child), existing badges/stats.

  Modifiers: --top, --bottom, --side, --floating, --compact
*/

.cd-hud-frame,
.cd-hud {
  position: relative;
  background: color-mix(in srgb, var(--cd-bg-panel) 94%, transparent);
  border: 1px solid var(--cd-border-glow);
  padding: 14px 16px;
  color: var(--cd-text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 10%, transparent);
}

.cd-hud-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
  pointer-events: none;
  opacity: 0.5;
}

/* Inner label / readout */
.cd-hud__label {
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cd-text-muted);
  margin-bottom: 4px;
}

.cd-hud__value {
  font-size: var(--cd-text-base);
  font-weight: 700;
  color: var(--cd-accent);
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px var(--cd-accent-glow);
}

.cd-hud__value--ok   { color: var(--cd-neon-green); }
.cd-hud__value--warn { color: var(--cd-amber); }
.cd-hud__value--err  { color: var(--cd-neon-red); }
.cd-hud__value--dim  { color: var(--cd-text-secondary); font-weight: 400; }

/* Status / data bar (top or bottom of screen or panels) */
.cd-hud-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: color-mix(in srgb, var(--cd-bg) 92%, var(--cd-accent) 2%);
  border: 1px solid var(--cd-border-dim);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cd-text-muted);
  user-select: none;
  overflow: hidden;
}

.cd-hud-bar--top {
  border-bottom-color: var(--cd-accent);
  box-shadow: 0 0 8px var(--cd-accent-glow);
}

.cd-hud-bar--bottom {
  border-top-color: var(--cd-accent);
  box-shadow: 0 0 8px var(--cd-accent-glow);
}

.cd-hud-bar--side {
  flex-direction: column;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8px 4px;
}

/* Individual data segment inside bar or frame */
.cd-hud-segment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-right: 1px solid var(--cd-border-dim);
  white-space: nowrap;
  height: 100%;
}

.cd-hud-bar--side .cd-hud-segment {
  border-right: none;
  border-bottom: 1px solid var(--cd-border-dim);
  padding: 8px 4px;
  height: auto;
}

.cd-hud-segment:last-child {
  border-right: none;
  border-bottom: none;
}

.cd-hud-segment__label {
  color: var(--cd-text-dim);
  letter-spacing: 0.2em;
  font-size: 8px;
}

.cd-hud-segment__value {
  color: var(--cd-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.cd-hud-segment__value--ok   { color: var(--cd-neon-green); }
.cd-hud-segment__value--warn { color: var(--cd-amber); }
.cd-hud-segment__value--err  { color: var(--cd-neon-red); }

/* Compact variant for dense UIs */
.cd-hud-bar--compact .cd-hud-segment {
  padding: 0 8px;
  font-size: 8px;
}

.cd-hud-frame.cd-hud--compact {
  padding: 8px 10px;
}

/* Floating / AR style */
.cd-hud--floating {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: color-mix(in srgb, var(--cd-bg-surface) 70%, transparent);
}

/* Reduced motion (no extra pulses etc.) */
@media (prefers-reduced-motion: reduce) {
  .cd-hud-frame,
  .cd-hud-bar {
    box-shadow: none;
  }
}

/* Component: Gauge / Radial Meter */
/* ── Gauge / Radial Meter ──────────────────────────────────────────────────── */
/*
  Circular/radial progress gauges with neon cyberpunk styling.

  Usage:
  <div class="cd-gauge" style="--value: 78;">
    <div class="cd-gauge__track"></div>
    <div class="cd-gauge__fill"></div>
    <div class="cd-gauge__center">
      <div class="cd-gauge__value">78</div>
      <div class="cd-gauge__label">INTEGRITY</div>
    </div>
    <!-- optional ticks via CSS or children -->
  </div>

  The --value (0-100) drives the conic fill. Color via current --cd-accent (or override).

  Modifiers / variants:
  .cd-gauge--small
  .cd-gauge--danger / --success (changes accent locally)
  .cd-gauge--radar (concentric rings + sweep)

  Works great inside .cd-hud-frame or .cd-glow-card.
*/

.cd-gauge {
  --size: 128px;
  --thickness: 12px;
  position: relative;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cd-gauge__track,
.cd-gauge__fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.cd-gauge__track {
  background: conic-gradient(
    var(--cd-border) 0deg 360deg
  );
  border: 1px solid var(--cd-border-dim);
}

.cd-gauge__fill {
  background: conic-gradient(
    var(--cd-accent) 0deg calc(var(--value, 0) * 3.6deg),
    transparent calc(var(--value, 0) * 3.6deg) 360deg
  );
  transition: background 300ms ease;
  box-shadow: 0 0 8px var(--cd-accent-glow);
}

/* Center content */
.cd-gauge__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - var(--thickness) * 2 - 8px);
  height: calc(100% - var(--thickness) * 2 - 8px);
  background: var(--cd-bg-panel);
  border-radius: 50%;
  border: 1px solid var(--cd-border-dim);
  text-align: center;
}

.cd-gauge__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--cd-accent);
  text-shadow: 0 0 6px var(--cd-accent-glow);
  font-variant-numeric: tabular-nums;
}

.cd-gauge__label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cd-text-muted);
  margin-top: 2px;
}

/* Size variants */
.cd-gauge--small {
  --size: 92px;
  --thickness: 9px;
}

.cd-gauge--small .cd-gauge__value {
  font-size: 20px;
}

.cd-gauge--small .cd-gauge__label {
  font-size: 7px;
}

/* Color variants (override accent locally) */
.cd-gauge--danger { --cd-accent: var(--cd-neon-red); }
.cd-gauge--success { --cd-accent: var(--cd-neon-green); }
.cd-gauge--warn   { --cd-accent: var(--cd-amber); }

/* Radar / sweep style */
.cd-gauge--radar .cd-gauge__track {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 48%,
      var(--cd-border-dim) 48%,
      var(--cd-border-dim) 50%,
      transparent 50%
    ),
    conic-gradient(var(--cd-border) 0deg 360deg);
}

.cd-gauge--radar .cd-gauge__fill {
  background: conic-gradient(
    color-mix(in srgb, var(--cd-accent) 85%, transparent) 0deg calc(var(--value, 0) * 3.6deg),
    transparent calc(var(--value, 0) * 3.6deg) 360deg
  );
  box-shadow: 0 0 12px var(--cd-accent-glow);
}

/* Optional tick marks (add as children or via ::before multiple) */
.cd-gauge__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cd-gauge__tick {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 1px;
  height: 6px;
  background: var(--cd-accent);
  transform-origin: 50% calc(var(--size) / 2 - 4px);
  box-shadow: 0 0 2px var(--cd-accent-glow);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-gauge__fill {
    transition: none;
  }
}

/* Component: Ticker / Data Stream */
/* ── Ticker / Data Stream ──────────────────────────────────────────────────── */
/*
  Horizontal (or vertical) scrolling data ticker / feed.

  Usage:
  <div class="cd-ticker">
    <div class="cd-ticker__inner">
      <span class="cd-ticker__item">NEURAL FEED LIVE</span>
      <span class="cd-ticker__item">BREACH IN SECTOR 4</span>
      ...
    </div>
  </div>

  Items auto-scroll. Pause on hover (respects reduced-motion).

  Modifiers: --vertical, --fast, --slow, --glitch-on (items get occasional glitch)
*/

.cd-ticker {
  overflow: hidden;
  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
  border: 1px solid var(--cd-border-dim);
  white-space: nowrap;
  position: relative;
}

.cd-ticker__inner {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 6px 0;
  animation: cd-ticker-scroll 18s linear infinite;
}

.cd-ticker:hover .cd-ticker__inner {
  animation-play-state: paused;
}

.cd-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cd-text-sm);
  color: var(--cd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cd-ticker__item::before {
  content: '•';
  color: var(--cd-accent);
  font-size: 1.2em;
  line-height: 1;
}

.cd-ticker__item--glitch {
  animation: cd-logo-glitch 4s ease-in-out infinite;
}

/* Speed variants */
.cd-ticker--fast .cd-ticker__inner { animation-duration: 9s; }
.cd-ticker--slow .cd-ticker__inner { animation-duration: 32s; }

/* Vertical variant */
.cd-ticker--vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: normal;
}

.cd-ticker--vertical .cd-ticker__inner {
  flex-direction: column;
  animation: cd-ticker-scroll-vertical 22s linear infinite;
  gap: 18px;
}

.cd-ticker--vertical .cd-ticker__item {
  writing-mode: horizontal-tb;
  text-orientation: initial;
}

@keyframes cd-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes cd-ticker-scroll-vertical {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-ticker__inner {
    animation: none;
  }
  .cd-ticker--vertical .cd-ticker__inner {
    animation: none;
  }
}

/* Component: Scanner / Sweep Line */
/* ── Scanner / Sweep Line ──────────────────────────────────────────────────── */
/*
  Animated glowing scan/sweep line (lidar, radar, document scanner, "analyzing").

  Usage (standalone or over content):
  <div class="cd-scanner" style="--sweep-duration: 2.2s;">
    <div class="cd-scanner__line"></div>
    <!-- your content here, e.g. image or panel -->
  </div>

  Or apply to existing panels: <div class="cd-hud-frame cd-scanner">...</div>

  The line sweeps left-to-right (or top-to-bottom in vertical).

  Modifiers: --vertical, --fast, --slow, --ping (fainter return sweep)
*/

.cd-scanner {
  position: relative;
  overflow: hidden;
}

.cd-scanner__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--cd-accent) 15%,
    var(--cd-accent) 85%,
    transparent
  );
  box-shadow:
    0 0 6px var(--cd-accent-glow),
    0 0 18px var(--cd-accent-glow);
  animation: cd-scanner-sweep var(--sweep-duration, 2.4s) ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.cd-scanner--vertical .cd-scanner__line {
  width: 100%;
  height: 2px;
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--cd-accent) 15%,
    var(--cd-accent) 85%,
    transparent
  );
  animation: cd-scanner-sweep-vertical var(--sweep-duration, 2.4s) ease-in-out infinite;
}

.cd-scanner--ping .cd-scanner__line {
  opacity: 0.6;
  box-shadow: 0 0 10px var(--cd-accent-glow);
}

@keyframes cd-scanner-sweep {
  0%   { left: -10%; }
  45%  { left: 105%; }
  55%  { left: 105%; }
  100% { left: -10%; }
}

@keyframes cd-scanner-sweep-vertical {
  0%   { top: -10%; }
  45%  { top: 105%; }
  55%  { top: 105%; }
  100% { top: -10%; }
}

/* Optional trailing glow bar */
.cd-scanner::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--cd-accent) 8%, transparent) 50%,
    transparent
  );
  pointer-events: none;
  z-index: 1;
  animation: cd-scanner-trail var(--sweep-duration, 2.4s) ease-in-out infinite;
  mix-blend-mode: screen;
}

.cd-scanner--vertical::after {
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--cd-accent) 8%, transparent) 50%,
    transparent
  );
  animation: cd-scanner-trail-vertical var(--sweep-duration, 2.4s) ease-in-out infinite;
}

@keyframes cd-scanner-trail {
  0%   { transform: translateX(-30%); }
  50%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

@keyframes cd-scanner-trail-vertical {
  0%   { transform: translateY(-30%); }
  50%  { transform: translateY(110%); }
  100% { transform: translateY(110%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-scanner__line,
  .cd-scanner::after {
    animation: none;
    opacity: 0.3;
  }
}

/* Component: Interference / Corruption Overlay */
/* ── Interference / Corruption Overlay ─────────────────────────────────────── */
/*
  Dramatic animated static/noise + data corruption effects for cyberpunk "damaged signal",
  hacked feeds, low-bandwidth, or corrupted data states.

  Usage (compose freely):
  <div class="cd-interference cd-interference--heavy cd-interference--glitch">
    <div class="cd-interference__noise"></div>
    <div class="cd-interference__content" data-text="CORRUPTED FEED">
      ...your content (text, logs, panels, even images)...
    </div>
  </div>

  Or direct on text:
  <span class="cd-corrupt-text" data-text="SYSTEM FAILURE">SYSTEM FAILURE</span>

  Modifiers:
    --light     subtle static
    --heavy     intense, fast noise + stronger corruption
    --glitch    enables the text/data corruption effect (requires data-text attr on child)
    --intense   extra aggressive version (combine with heavy)

  Works great over .cd-terminal, .cd-hud-frame, .cd-glow-card, images, or raw text blocks.
  Noise uses screen blend + theme accent for colored glitch tint.
*/

.cd-interference {
  position: relative;
  overflow: hidden;
}

/* The noise layer — multiple moving grain fields for realistic analog/digital static */
.cd-interference__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* fine vertical scan */
    linear-gradient(rgba(255,255,255,0.035) 50%, transparent 50%),
    /* horizontal grain */
    linear-gradient(90deg, rgba(255,255,255,0.025) 50%, transparent 50%),
    /* colored interference tint using theme colors */
    linear-gradient(45deg,
      color-mix(in srgb, var(--cd-accent-secondary) 8%, transparent) 0%,
      transparent 40%,
      color-mix(in srgb, var(--cd-accent) 6%, transparent) 60%,
      transparent 100%);
  background-size: 2px 3px, 3px 2px, 120px 120px;
  animation: cd-interference-noise 65ms steps(3) infinite;
  mix-blend-mode: screen;
  opacity: 0.65;
  filter: contrast(1.15) saturate(0.8);
}

.cd-interference--light .cd-interference__noise {
  opacity: 0.28;
  animation-duration: 120ms;
  filter: contrast(1.05);
}

.cd-interference--heavy .cd-interference__noise {
  opacity: 0.92;
  animation-duration: 42ms;
  background-size: 1.5px 2px, 2px 1.5px, 80px 80px;
  filter: contrast(1.4) saturate(1.1);
}

.cd-interference--intense .cd-interference__noise {
  opacity: 1;
  animation-duration: 28ms;
  filter: contrast(1.6) hue-rotate(8deg);
}

/* Block-level corruption effect (when --glitch modifier is present) */
.cd-interference--glitch .cd-interference__content,
.cd-interference--glitch .cd-interference__text {
  position: relative;
  display: block;
}

/* Primary corruption layer — aggressive clipping + offset + color bleed */
.cd-interference--glitch .cd-interference__content::before,
.cd-interference--glitch .cd-interference__text::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  color: var(--cd-accent-secondary);
  overflow: hidden;
  animation: cd-interference-corrupt 1.35s steps(5) infinite;
  opacity: 0.75;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 3;
  text-shadow:
    1px 0 0 var(--cd-accent),
    -1px 0 0 var(--cd-neon-red);
}

/* Secondary echo layer for richer glitch (double vision / RGB split feel) */
.cd-interference--glitch .cd-interference__content::after,
.cd-interference--glitch .cd-interference__text::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  color: var(--cd-accent);
  overflow: hidden;
  animation: cd-interference-corrupt 1.35s steps(5) infinite 0.15s;
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 4;
  transform: translate(1.5px, 0);
}

/* Direct .cd-corrupt-text utility (no wrapper needed) */
.cd-corrupt-text {
  position: relative;
  display: inline-block;
}

.cd-corrupt-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  color: var(--cd-neon-red);
  animation: cd-interference-corrupt 1.1s steps(4) infinite;
  opacity: 0.8;
  mix-blend-mode: difference;
  pointer-events: none;
  text-shadow: 2px 0 0 var(--cd-accent-secondary);
  z-index: 1;
}

.cd-corrupt-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  color: var(--cd-accent-secondary);
  animation: cd-interference-corrupt 1.1s steps(4) infinite 0.08s;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

/* Much more aggressive corruption keyframes */
@keyframes cd-interference-noise {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 2px 3px, 3px 2px, 80px 80px; }
}

@keyframes cd-interference-corrupt {
  0% {
    -webkit-clip-path: inset(0 0 82% 0);
    clip-path: inset(0 0 82% 0);
    transform: translate(0, -1.5px) scale(1);
  }
  15% {
    -webkit-clip-path: inset(18% 0 55% 0);
    clip-path: inset(18% 0 55% 0);
    transform: translate(2px, 0.5px) scale(1.01);
  }
  32% {
    -webkit-clip-path: inset(48% 0 22% 0);
    clip-path: inset(48% 0 22% 0);
    transform: translate(-2.5px, -1px);
  }
  48% {
    -webkit-clip-path: inset(8% 0 71% 0);
    clip-path: inset(8% 0 71% 0);
    transform: translate(1.5px, 1.5px) scale(0.995);
  }
  65% {
    -webkit-clip-path: inset(35% 0 38% 0);
    clip-path: inset(35% 0 38% 0);
    transform: translate(-1px, 0);
  }
  82% {
    -webkit-clip-path: inset(62% 0 12% 0);
    clip-path: inset(62% 0 12% 0);
    transform: translate(3px, -0.5px);
  }
  100% {
    -webkit-clip-path: inset(0 0 82% 0);
    clip-path: inset(0 0 82% 0);
    transform: translate(0, -1.5px) scale(1);
  }
}

/* Reduced motion — keep subtle static but kill the wild animation */
@media (prefers-reduced-motion: reduce) {
  .cd-interference__noise {
    animation: none;
    opacity: 0.18;
    background-size: 3px 3px, 4px 4px, 200px 200px;
  }
  .cd-interference--heavy .cd-interference__noise {
    opacity: 0.32;
  }
  .cd-interference--glitch .cd-interference__content::before,
  .cd-interference--glitch .cd-interference__content::after,
  .cd-corrupt-text::before,
  .cd-corrupt-text::after {
    animation: none;
    opacity: 0.25;
    transform: none;
    -webkit-clip-path: none;
    clip-path: none;
  }
}

/* Component: Modal */
/* ── Modal / Dialog ───────────────────────────────────────────────────────── */

@keyframes cd-modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-modal-panel-in   { from { opacity: 0; transform: scale(0.96) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cd-modal-panel-out  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96) translateY(-6px); } }

/* ── Overlay ──────────────────────────────────────────────────────────────── */

.cd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 10, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.cd-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */

.cd-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  filter: drop-shadow(0 0 20px var(--cd-accent-glow)) drop-shadow(0 0 2px var(--cd-accent));
  -webkit-clip-path: polygon(
    var(--cd-clip-lg) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-lg)),
    calc(100% - var(--cd-clip-lg)) 100%,
    0% 100%,
    0% var(--cd-clip-lg)
  );
  clip-path: polygon(
    var(--cd-clip-lg) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-lg)),
    calc(100% - var(--cd-clip-lg)) 100%,
    0% 100%,
    0% var(--cd-clip-lg)
  );
  transform: scale(0.96) translateY(-10px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cd-modal-overlay.is-open .cd-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.cd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-modal__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cd-accent);
  text-shadow: 0 0 8px var(--cd-accent-glow);
}

.cd-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--cd-border-dim);
  color: var(--cd-text-muted);
  font: var(--cd-text-base)/1 var(--cd-font-mono);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.cd-modal__close:hover {
  border-color: var(--cd-red);
  color: var(--cd-red);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.cd-modal__body {
  padding: 18px;
  font-size: var(--cd-text-base);
  color: var(--cd-text-secondary);
  line-height: 1.65;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.cd-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--cd-border-dim);
}

/* ── Size variants ────────────────────────────────────────────────────────── */

.cd-modal--sm { max-width: 340px; }
.cd-modal--lg { max-width: 680px; }
.cd-modal--xl { max-width: 900px; }

/* Full-screen on small viewports */
@media (max-width: 520px) {
  .cd-modal-overlay { padding: 0; align-items: flex-end; }
  .cd-modal {
    max-width: 100%;
    -webkit-clip-path: polygon(var(--cd-clip-lg) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--cd-clip-lg));
    clip-path: polygon(var(--cd-clip-lg) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--cd-clip-lg));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-modal { transition: none; }
  .cd-modal-overlay { transition: none; }
}

/* Component: Toast */
/* ── Toast / Notification ─────────────────────────────────────────────────── */

@keyframes cd-toast-in  { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes cd-toast-out { from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 8px; } to { opacity: 0; transform: translateX(110%); max-height: 0; margin-bottom: 0; } }

/* ── Region (fixed container) ─────────────────────────────────────────────── */

.cd-toast-region {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: 320px;
}

/* Placement modifiers */
.cd-toast-region--tr { top: 16px;    right: 16px; }
.cd-toast-region--br { bottom: 16px; right: 16px; flex-direction: column-reverse; }
.cd-toast-region--tl { top: 16px;    left: 16px;  }
.cd-toast-region--bl { bottom: 16px; left: 16px;  flex-direction: column-reverse; }
.cd-toast-region--tc { top: 16px;    left: 50%;   transform: translateX(-50%); }

/* Default placement */
.cd-toast-region:not([class*="--"]) { top: 16px; right: 16px; }

/* ── Individual toast ─────────────────────────────────────────────────────── */

.cd-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border-mid);
  font-family: var(--cd-font-mono);
  pointer-events: auto;
  overflow: hidden;
  animation: cd-toast-in 0.22s ease forwards;
}

.cd-toast.is-dismissing {
  animation: cd-toast-out 0.22s ease forwards;
}

/* Left accent bar */
.cd-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

.cd-toast__icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.3;
}

.cd-toast__content { flex: 1; min-width: 0; }

.cd-toast__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.cd-toast__body {
  font-size: var(--cd-text-sm);
  color: var(--cd-text-secondary);
  line-height: 1.5;
}

.cd-toast__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font: var(--cd-text-sm)/1 var(--cd-font-mono);
  cursor: pointer;
  opacity: 0.35;
  padding: 0;
  margin-top: 1px;
  transition: opacity 0.15s;
}

.cd-toast__dismiss:hover { opacity: 0.9; }

/* ── Color variants ───────────────────────────────────────────────────────── */

.cd-toast--info {
  border-color: color-mix(in srgb, var(--cd-blue) 30%, transparent);
}
.cd-toast--info::before    { background: var(--cd-blue); }
.cd-toast--info .cd-toast__title  { color: var(--cd-blue); }
.cd-toast--info .cd-toast__icon   { color: var(--cd-blue); }
.cd-toast--info .cd-toast__dismiss { color: var(--cd-blue); }

.cd-toast--success {
  border-color: color-mix(in srgb, var(--cd-green) 30%, transparent);
}
.cd-toast--success::before { background: var(--cd-green); }
.cd-toast--success .cd-toast__title  { color: var(--cd-green); }
.cd-toast--success .cd-toast__icon   { color: var(--cd-green); }
.cd-toast--success .cd-toast__dismiss { color: var(--cd-green); }

.cd-toast--warning {
  border-color: color-mix(in srgb, var(--cd-amber) 30%, transparent);
}
.cd-toast--warning::before { background: var(--cd-amber); }
.cd-toast--warning .cd-toast__title  { color: var(--cd-amber); }
.cd-toast--warning .cd-toast__icon   { color: var(--cd-amber); }
.cd-toast--warning .cd-toast__dismiss { color: var(--cd-amber); }

.cd-toast--error {
  border-color: color-mix(in srgb, var(--cd-red) 30%, transparent);
}
.cd-toast--error::before { background: var(--cd-red); }
.cd-toast--error .cd-toast__title  { color: var(--cd-red); }
.cd-toast--error .cd-toast__icon   { color: var(--cd-red); }
.cd-toast--error .cd-toast__dismiss { color: var(--cd-red); }

.cd-toast--accent {
  border-color: var(--cd-border-glow);
}
.cd-toast--accent::before { background: var(--cd-accent); }
.cd-toast--accent .cd-toast__title  { color: var(--cd-accent); }
.cd-toast--accent .cd-toast__icon   { color: var(--cd-accent); }
.cd-toast--accent .cd-toast__dismiss { color: var(--cd-accent); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-toast, .cd-toast.is-dismissing { animation: none; }
}

/* Component: Accordion */
/* ── Accordion ────────────────────────────────────────────────────────────── */
/* Uses native <details>/<summary> for zero-JS open/close semantics.          */
/* Smooth animation via grid-template-rows trick (modern browsers).           */

.cd-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Item (<details>) ─────────────────────────────────────────────────────── */

.cd-accordion__item {
  border: 1px solid var(--cd-border-dim);
  border-bottom: none;
  font-family: var(--cd-font-mono);
  overflow: hidden;
  transition: border-color 0.15s;
}

.cd-accordion__item:last-child {
  border-bottom: 1px solid var(--cd-border-dim);
}

.cd-accordion__item[open] {
  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
}

.cd-accordion__item[open]:last-child {
  border-bottom-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
}

/* ── Trigger (<summary>) ──────────────────────────────────────────────────── */

.cd-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cd-text-secondary);
  background: var(--cd-bg-panel);
  transition: color 0.15s, background 0.15s;
}

/* Remove default browser disclosure marker */
.cd-accordion__trigger::-webkit-details-marker { display: none; }
.cd-accordion__trigger::marker { display: none; }

.cd-accordion__trigger:hover {
  background: var(--cd-bg-panel-hover);
  color: var(--cd-text);
}

.cd-accordion__trigger:focus-visible {
  color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 4%, var(--cd-bg-panel));
}

.cd-accordion__item[open] > .cd-accordion__trigger {
  color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 4%, var(--cd-bg-panel));
}

/* Chevron arrow via ::after */
.cd-accordion__trigger::after {
  content: '›';
  font-size: 14px;
  font-weight: 400;
  color: var(--cd-text-dim);
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.15s;
  line-height: 1;
}

.cd-accordion__item[open] > .cd-accordion__trigger::after {
  transform: rotate(90deg);
  color: var(--cd-accent);
}

/* Optional icon slot before the label */
.cd-accordion__icon {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.6;
}

.cd-accordion__item[open] > .cd-accordion__trigger .cd-accordion__icon {
  opacity: 1;
  color: var(--cd-accent);
}

/* ── Content — smooth height animation ────────────────────────────────────── */

.cd-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.cd-accordion__item[open] > .cd-accordion__body {
  grid-template-rows: 1fr;
}

.cd-accordion__content {
  overflow: hidden;
}

.cd-accordion__content-inner {
  padding: 12px 14px 14px;
  font-size: var(--cd-text-base);
  color: var(--cd-text-secondary);
  line-height: 1.65;
  border-top: 1px solid var(--cd-border-dim);
}

/* ── Flush variant — no outer border, full-width separators ───────────────── */

.cd-accordion--flush .cd-accordion__item {
  border-left: none;
  border-right: none;
}

.cd-accordion--flush .cd-accordion__item:first-child {
  border-top: none;
}

/* ── Separated variant — gaps between items ───────────────────────────────── */

.cd-accordion--sep {
  gap: 4px;
}

.cd-accordion--sep .cd-accordion__item {
  border-bottom: 1px solid var(--cd-border-dim);
}

.cd-accordion--sep .cd-accordion__item[open] {
  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
}

/* Component: Pagination */
/* ── Pagination ───────────────────────────────────────────────────────────── */

.cd-pagination {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--cd-font-mono);
  flex-wrap: wrap;
}

/* ── Base page item ───────────────────────────────────────────────────────── */

.cd-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  background: none;
  border: 1px solid var(--cd-border-dim);
  color: var(--cd-text-muted);
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s;
  user-select: none;
}

.cd-pagination__item:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 45%, transparent);
  color: var(--cd-text);
}

.cd-pagination__item:focus-visible {
  border-color: var(--cd-accent);
  color: var(--cd-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

/* Active page */
.cd-pagination__item.is-active,
.cd-pagination__item[aria-current="page"] {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-accent);
  color: var(--cd-accent);
  box-shadow: 0 0 8px var(--cd-accent-glow), inset 0 0 8px color-mix(in srgb, var(--cd-accent) 6%, transparent);
  cursor: default;
}

/* Disabled */
.cd-pagination__item:disabled,
.cd-pagination__item[aria-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Prev / Next arrows ───────────────────────────────────────────────────── */

.cd-pagination__prev,
.cd-pagination__next {
  min-width: 36px;
  gap: 4px;
}

/* ── Ellipsis ─────────────────────────────────────────────────────────────── */

.cd-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 30px;
  font-size: var(--cd-text-sm);
  color: var(--cd-text-dim);
  cursor: default;
  user-select: none;
  letter-spacing: 0.1em;
}

/* ── Size variants ────────────────────────────────────────────────────────── */

.cd-pagination--sm .cd-pagination__item {
  min-width: 28px;
  height: 28px;
  font-size: var(--cd-text-xs);
}

.cd-pagination--lg .cd-pagination__item {
  min-width: 36px;
  height: 36px;
  font-size: var(--cd-text-sm);
}

/* ── Compact — no gaps, items share borders ───────────────────────────────── */

.cd-pagination--compact {
  gap: 0;
}

.cd-pagination--compact .cd-pagination__item {
  margin-left: -1px;
}

.cd-pagination--compact .cd-pagination__item:first-child { margin-left: 0; }

.cd-pagination--compact .cd-pagination__item.is-active {
  z-index: 1;
  position: relative;
}

/* ── Info text (e.g. "Page 3 of 12") ─────────────────────────────────────── */

.cd-pagination__info {
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-text-dim);
  margin: 0 8px;
}

/* Component: Dropdown */
/* ── Dropdown Menu ────────────────────────────────────────────────────────── */

.cd-dropdown {
  position: relative;
  display: inline-block;
}

/* ── Menu panel ───────────────────────────────────────────────────────────── */

.cd-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 500;
  min-width: 180px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
  padding: 4px 0;
  font-family: var(--cd-font-mono);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px var(--cd-accent-glow);
  -webkit-clip-path: polygon(
    var(--cd-clip-sm) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-sm)),
    calc(100% - var(--cd-clip-sm)) 100%,
    0% 100%,
    0% var(--cd-clip-sm)
  );
  clip-path: polygon(
    var(--cd-clip-sm) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-sm)),
    calc(100% - var(--cd-clip-sm)) 100%,
    0% 100%,
    0% var(--cd-clip-sm)
  );
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Right-aligned variant */
.cd-dropdown__menu--right {
  left: auto;
  right: 0;
  -webkit-clip-path: polygon(
    var(--cd-clip-sm) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-sm)),
    calc(100% - var(--cd-clip-sm)) 100%,
    0% 100%,
    0% var(--cd-clip-sm)
  );
  clip-path: polygon(
    var(--cd-clip-sm) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip-sm)),
    calc(100% - var(--cd-clip-sm)) 100%,
    0% 100%,
    0% var(--cd-clip-sm)
  );
  transform-origin: top right;
}

/* Open state — toggled by JS or :focus-within */
.cd-dropdown.is-open > .cd-dropdown__menu,
.cd-dropdown:focus-within > .cd-dropdown__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Trigger ──────────────────────────────────────────────────────────────── */

.cd-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Chevron indicator */
.cd-dropdown__trigger::after {
  content: '▾';
  font-size: var(--cd-text-sm);
  color: var(--cd-text-dim);
  transition: transform 0.15s, color 0.15s;
  line-height: 1;
}

.cd-dropdown.is-open .cd-dropdown__trigger::after {
  transform: rotate(180deg);
  color: var(--cd-accent);
}

/* ── Menu items ───────────────────────────────────────────────────────────── */

.cd-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px; /* larger tap target */
  background: none;
  border: none;
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
  text-align: left;
}

.cd-dropdown__item:hover {
  background: var(--cd-accent-subtle);
  color: var(--cd-accent);
}

.cd-dropdown__item:focus-visible {
  background: var(--cd-accent-subtle);
  color: var(--cd-accent);
  outline-offset: 0; /* tighter for menu items */
}

.cd-dropdown__item:active {
  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

/* Danger item */
.cd-dropdown__item--danger { color: var(--cd-text-muted); }
.cd-dropdown__item--danger:hover {
  background: color-mix(in srgb, var(--cd-red) 10%, transparent);
  color: var(--cd-red);
}

/* Disabled item */
.cd-dropdown__item:disabled,
.cd-dropdown__item[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* Item icon slot */
.cd-dropdown__item-icon {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.6;
  width: 14px;
  text-align: center;
}

/* Item shortcut hint — right-aligned */
.cd-dropdown__item-kbd {
  margin-left: auto;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-dim);
  letter-spacing: 0.05em;
}

/* ── Separator ────────────────────────────────────────────────────────────── */

.cd-dropdown__sep {
  height: 1px;
  background: var(--cd-border-dim);
  margin: 4px 0;
}

/* ── Section label ────────────────────────────────────────────────────────── */

.cd-dropdown__label {
  padding: 6px 14px 3px;
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cd-text-dim);
  cursor: default;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-dropdown__menu { transition: none; }
}

/* Component: Table */
/* ── Table ───────────────────────────────────────────────────────────────── */

.cd-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  color: var(--cd-text);
}

/* Header */
.cd-table thead tr {
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cd-accent);
  white-space: nowrap;
  background: color-mix(in srgb, var(--cd-accent) 4%, transparent);
}

/* Sortable column header */
.cd-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.cd-table th[data-sort]::after {
  content: ' ·';
  color: var(--cd-text-dim);
}

.cd-table th[data-sort="asc"]::after  { content: ' ↑'; color: var(--cd-accent); }
.cd-table th[data-sort="desc"]::after { content: ' ↓'; color: var(--cd-accent); }

.cd-table th[data-sort]:hover {
  color: var(--cd-accent-bright);
}

/* Rows */
.cd-table tbody tr {
  border-bottom: 1px solid var(--cd-border-dim);
  transition: background 0.1s;
}

.cd-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--cd-accent) 2%, transparent);
}

.cd-table tbody tr:hover {
  background: var(--cd-accent-subtle);
}

/* Cells */
.cd-table td {
  padding: 8px 12px;
  color: var(--cd-text-secondary);
  vertical-align: middle;
}

.cd-table td:first-child {
  color: var(--cd-text);
}

/* Variants */
.cd-table--compact th,
.cd-table--compact td {
  padding: 5px 10px;
  font-size: var(--cd-text-xs);
}

.cd-table--compact th {
  font-size: var(--cd-text-xs);
}

.cd-table--bordered td,
.cd-table--bordered th {
  border: 1px solid var(--cd-border-dim);
}

.cd-table--bordered thead tr {
  border-bottom-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
}

/* Cell status dots — <td data-status="ok|warn|err"> */
.cd-table td[data-status]::before {
  content: '●';
  margin-right: 6px;
  font-size: var(--cd-text-xs); /* bumped; decorative */
}

.cd-table td[data-status="ok"]::before    { color: var(--cd-green); }
.cd-table td[data-status="warn"]::before  { color: var(--cd-amber); }
.cd-table td[data-status="err"]::before   { color: var(--cd-red);   }
.cd-table td[data-status="idle"]::before  { color: var(--cd-text-dim); }

/* Numeric cell — right-align, accent color */
.cd-table td.cd-table__num,
.cd-table th.cd-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cd-table td.cd-table__num { color: var(--cd-accent); }

/* Component: Tabs */
/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.cd-tabs { display: flex; flex-direction: column; }

/* Tab list */
.cd-tabs__list {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid var(--cd-border-dim);
  flex-shrink: 0;
}

/* Individual tab trigger */
.cd-tabs__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: none;
  border: none;
  cursor: pointer;
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cd-text-muted);
  white-space: nowrap;
  transition: color 0.15s;
}

/* Neon underline indicator */
.cd-tabs__trigger::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cd-accent);
  box-shadow: 0 0 8px var(--cd-accent-glow);
  transform: scaleX(0);
  transition: transform 0.18s ease;
  transform-origin: left center;
}

.cd-tabs__trigger:hover { color: var(--cd-text-secondary); }

.cd-tabs__trigger:focus-visible {
  color: var(--cd-text);
  text-shadow: 0 0 6px var(--cd-accent-glow);
}

.cd-tabs__trigger[aria-selected="true"],
.cd-tabs__trigger.is-active {
  color: var(--cd-accent);
  text-shadow: 0 0 8px var(--cd-accent-glow);
}

.cd-tabs__trigger[aria-selected="true"]::after,
.cd-tabs__trigger.is-active::after {
  transform: scaleX(1);
}

/* Badge count on a tab */
.cd-tabs__trigger .cd-badge {
  font-size: var(--cd-text-xs);
  padding: 1px 5px;
  height: auto;
  line-height: 1.4;
}

/* Tab panels */
.cd-tabs__panels { flex: 1; min-height: 0; }

.cd-tabs__panel {
  display: none;
  padding-top: 16px;
}

.cd-tabs__panel[data-active],
.cd-tabs__panel.is-active {
  display: block;
}

/* ── Pills variant ────────────────────────────────────────────────────────── */

.cd-tabs--pills .cd-tabs__list {
  gap: 4px;
  border-bottom: none;
  padding-bottom: 12px;
}

.cd-tabs--pills .cd-tabs__trigger {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--cd-border-mid);
  color: var(--cd-text-secondary);
}

.cd-tabs--pills .cd-tabs__trigger::after { display: none; }

.cd-tabs--pills .cd-tabs__trigger:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
  color: var(--cd-text);
}

.cd-tabs--pills .cd-tabs__trigger[aria-selected="true"],
.cd-tabs--pills .cd-tabs__trigger.is-active {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-accent);
  color: var(--cd-accent);
  text-shadow: none;
  box-shadow: 0 0 8px var(--cd-accent-glow);
}

/* ── Vertical variant ─────────────────────────────────────────────────────── */

.cd-tabs--vertical {
  flex-direction: row;
  gap: 0;
}

.cd-tabs--vertical .cd-tabs__list {
  flex-direction: column;
  align-items: flex-start;
  border-bottom: none;
  border-right: 1px solid var(--cd-border-dim);
  padding: 0;
  width: 140px;
  flex-shrink: 0;
}

.cd-tabs--vertical .cd-tabs__trigger {
  width: 100%;
  height: 32px;
  padding: 0 16px;
  justify-content: flex-start;
}

.cd-tabs--vertical .cd-tabs__trigger::after {
  top: 0;
  left: auto;
  right: -1px;
  bottom: 0;
  width: 2px;
  height: auto;
  transform: scaleY(0);
  transform-origin: top center;
}

.cd-tabs--vertical .cd-tabs__trigger[aria-selected="true"]::after,
.cd-tabs--vertical .cd-tabs__trigger.is-active::after {
  transform: scaleY(1);
}

.cd-tabs--vertical .cd-tabs__panels { padding-top: 0; padding-left: 16px; }
.cd-tabs--vertical .cd-tabs__panel  { padding-top: 0; }

/* Component: Alert */
/* ── Alert / Banner ──────────────────────────────────────────────────────── */

.cd-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid;
  font-family: var(--cd-font-mono);
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

/* Left accent bar */
.cd-alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0.7;
}

.cd-alert__icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
}

.cd-alert__content { flex: 1; min-width: 0; }

.cd-alert__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
}

.cd-alert__body {
  font-size: var(--cd-text-base);
  opacity: 0.8;
}

/* Dismiss button */
.cd-alert__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  opacity: 0.45;
  font-family: var(--cd-font-mono);
  transition: opacity 0.15s;
}

.cd-alert__dismiss:hover { opacity: 0.9; }

/* ── Color variants ───────────────────────────────────────────────────────── */

.cd-alert--info {
  background: color-mix(in srgb, var(--cd-blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--cd-blue) 30%, transparent);
  color: var(--cd-blue);
}
.cd-alert--info .cd-alert__body { color: var(--cd-text-secondary); }

.cd-alert--success {
  background: color-mix(in srgb, var(--cd-green) 7%, transparent);
  border-color: color-mix(in srgb, var(--cd-green) 28%, transparent);
  color: var(--cd-green);
}
.cd-alert--success .cd-alert__body { color: var(--cd-text-secondary); }

.cd-alert--warning {
  background: color-mix(in srgb, var(--cd-amber) 8%, transparent);
  border-color: color-mix(in srgb, var(--cd-amber) 30%, transparent);
  color: var(--cd-amber);
}
.cd-alert--warning .cd-alert__body { color: var(--cd-text-secondary); }

.cd-alert--error {
  background: color-mix(in srgb, var(--cd-red) 8%, transparent);
  border-color: color-mix(in srgb, var(--cd-red) 30%, transparent);
  color: var(--cd-red);
}
.cd-alert--error .cd-alert__body { color: var(--cd-text-secondary); }

/* Accent variant — uses the current theme accent */
.cd-alert--accent {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-border-glow);
  color: var(--cd-accent);
}
.cd-alert--accent .cd-alert__body { color: var(--cd-text-secondary); }

/* ── Size variant ─────────────────────────────────────────────────────────── */

.cd-alert--sm {
  padding: 8px 12px;
  gap: 8px;
}

.cd-alert--sm .cd-alert__title { font-size: var(--cd-text-xs); margin-bottom: 2px; }
.cd-alert--sm .cd-alert__body  { font-size: var(--cd-text-sm); }
.cd-alert--sm .cd-alert__icon  { font-size: 12px; }

/* Inline (no left bar, more compact) */
.cd-alert--inline { border-left-width: 0; }
.cd-alert--inline::before { display: none; }

/* Component: Skeleton */
/* ── Skeleton / Loading Placeholder ─────────────────────────────────────── */
/* Reuses @keyframes cd-skel-shimmer from animations.css                     */

.cd-skeleton {
  display: block;
  background: color-mix(in srgb, var(--cd-accent) 6%, var(--cd-bg-panel));
  position: relative;
  overflow: hidden;
}

.cd-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cd-accent) 10%, transparent) 40%,
    color-mix(in srgb, var(--cd-accent) 14%, transparent) 50%,
    color-mix(in srgb, var(--cd-accent) 10%, transparent) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: cd-skel-shimmer 1.5s ease-in-out infinite;
}

/* Shape variants */
.cd-skeleton--text {
  height: 10px;
  border-radius: 2px;
}

.cd-skeleton--heading {
  height: 16px;
  border-radius: 2px;
}

.cd-skeleton--avatar {
  border-radius: 50%;
}

.cd-skeleton--btn {
  height: 32px;
  border-radius: 0;
  width: 80px;
}

/* Width helpers */
.cd-skeleton--w-full  { width: 100%; }
.cd-skeleton--w-3\/4  { width: 75%;  }
.cd-skeleton--w-1\/2  { width: 50%;  }
.cd-skeleton--w-1\/3  { width: 33%;  }

/* ── Skeleton block — compound line group ─────────────────────────────────── */

.cd-skeleton-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row = inline group (avatar + text, etc.) */
.cd-skeleton-block__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pre-built card skeleton */
.cd-skeleton-card {
  padding: 16px;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border-dim);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Component: Kbd */
/* ── Kbd — Keyboard Shortcut ─────────────────────────────────────────────── */

.cd-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cd-text-secondary);
  background: var(--cd-bg-panel-hover);
  border: 1px solid var(--cd-border-mid);
  border-bottom-width: 2px;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}

/* Accent-highlighted key */
.cd-kbd--accent {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
  border-bottom-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
  box-shadow: 0 0 6px var(--cd-accent-glow);
}

/* Larger variant for standalone display */
.cd-kbd--lg {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: var(--cd-text-base);
}

/* Key combination group — wraps multiple .cd-kbd with a + separator */
.cd-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.cd-kbd-group .cd-kbd { vertical-align: baseline; }

/* Separator between keys */
.cd-kbd-group__sep {
  font-size: var(--cd-text-xs);
  color: var(--cd-text-dim);
  font-family: var(--cd-font-mono);
  line-height: 1;
}

/* Component: Avatar */
/* ── Avatar ───────────────────────────────────────────────────────────────── */

.cd-avatar {
  --cd-avatar-size: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cd-avatar-size);
  height: var(--cd-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--cd-bg-panel-hover);
  border: 1px solid var(--cd-border-mid);
  flex-shrink: 0;
  font-family: var(--cd-font-mono);
}

.cd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback initials shown when no image */
.cd-avatar__fallback {
  font-size: calc(var(--cd-avatar-size) * 0.35);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cd-accent);
  line-height: 1;
  user-select: none;
}

/* Neon ring variant */
.cd-avatar--glow {
  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
  box-shadow: 0 0 0 2px var(--cd-bg), 0 0 10px var(--cd-accent-glow);
}

/* ── Size variants ────────────────────────────────────────────────────────── */

.cd-avatar--xs  { --cd-avatar-size: 24px; }
.cd-avatar--sm  { --cd-avatar-size: 30px; }
.cd-avatar--lg  { --cd-avatar-size: 48px; }
.cd-avatar--xl  { --cd-avatar-size: 64px; }

/* ── Status indicator dot ─────────────────────────────────────────────────── */

.cd-avatar[data-status]::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: calc(var(--cd-avatar-size) * 0.26);
  height: calc(var(--cd-avatar-size) * 0.26);
  border-radius: 50%;
  border: 2px solid var(--cd-bg);
}

.cd-avatar[data-status="online"]::after  { background: var(--cd-green); }
.cd-avatar[data-status="away"]::after    { background: var(--cd-amber); }
.cd-avatar[data-status="busy"]::after    { background: var(--cd-red);   }
.cd-avatar[data-status="offline"]::after { background: var(--cd-text-dim); }

/* ── Avatar group — overlapping stack ────────────────────────────────────── */

.cd-avatar-group {
  display: flex;
  align-items: center;
}

.cd-avatar-group .cd-avatar {
  margin-left: -10px;
  border: 2px solid var(--cd-bg);
  transition: transform 0.15s, z-index 0s;
  z-index: 1;
}

.cd-avatar-group .cd-avatar:first-child { margin-left: 0; }

.cd-avatar-group .cd-avatar:hover {
  transform: translateY(-3px);
  z-index: 10;
}

/* +N overflow badge */
.cd-avatar-group__more {
  margin-left: -10px;
  width: var(--cd-avatar-size, 36px);
  height: var(--cd-avatar-size, 36px);
  border-radius: 50%;
  background: var(--cd-bg-panel);
  border: 2px solid var(--cd-border-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  color: var(--cd-text-muted);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  z-index: 0;
}

/* Component: Breadcrumb */
/* ── Breadcrumb ───────────────────────────────────────────────────────────── */

.cd-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cd-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

/* Separator — inserted via ::before on non-first items */
.cd-breadcrumb__item + .cd-breadcrumb__item::before {
  content: var(--cd-breadcrumb-sep, '/');
  margin: 0 8px;
  color: var(--cd-text-dim);
  font-weight: 400;
  opacity: 0.5;
}

/* Arrow separator variant */
.cd-breadcrumb--arrow .cd-breadcrumb__item + .cd-breadcrumb__item::before {
  content: '›';
  font-size: 11px;
  font-weight: 400;
}

/* Dot separator variant */
.cd-breadcrumb--dot .cd-breadcrumb__item + .cd-breadcrumb__item::before {
  content: '·';
}

.cd-breadcrumb__link {
  color: var(--cd-text-muted);
  text-decoration: none;
  transition: color 0.15s;
  padding: 2px 0;
}

.cd-breadcrumb__link:hover {
  color: var(--cd-accent);
  text-shadow: 0 0 6px var(--cd-accent-glow);
}

.cd-breadcrumb__link:focus-visible {
  color: var(--cd-accent);
  text-shadow: 0 0 6px var(--cd-accent-glow);
  outline-offset: 1px;
}

/* Current / active crumb */
.cd-breadcrumb__item--active .cd-breadcrumb__link,
.cd-breadcrumb__item--active span {
  color: var(--cd-accent);
  cursor: default;
  pointer-events: none;
}

/* Home icon prefix — place a span or icon before the first link */
.cd-breadcrumb__item:first-child .cd-breadcrumb__link {
  color: var(--cd-text-secondary);
}

.cd-breadcrumb__item:first-child .cd-breadcrumb__link:hover {
  color: var(--cd-accent);
}

/* Component: Spinner */
/* ── Spinner / Loader ─────────────────────────────────────────────────────── */

@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-spin-rev { to { transform: rotate(-360deg); } }
@keyframes cd-pulse-dots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Ring spinner (default) ───────────────────────────────────────────────── */

.cd-spinner {
  --cd-spinner-size: 20px;
  --cd-spinner-stroke: 2px;
  display: inline-block;
  width: var(--cd-spinner-size);
  height: var(--cd-spinner-size);
  border-radius: 50%;
  border: var(--cd-spinner-stroke) solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  border-top-color: var(--cd-accent);
  animation: cd-spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* Dual-ring variant — inner ring counter-rotates */
.cd-spinner--dual {
  position: relative;
  border-top-color: var(--cd-accent);
  border-right-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
}

.cd-spinner--dual::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: var(--cd-spinner-stroke) solid transparent;
  border-bottom-color: var(--cd-accent-bright);
  animation: cd-spin-rev 0.6s linear infinite;
}

/* ── Size variants ────────────────────────────────────────────────────────── */

.cd-spinner--xs { --cd-spinner-size: 12px; --cd-spinner-stroke: 1.5px; }
.cd-spinner--sm { --cd-spinner-size: 16px; --cd-spinner-stroke: 2px;   }
.cd-spinner--lg { --cd-spinner-size: 32px; --cd-spinner-stroke: 3px;   }
.cd-spinner--xl { --cd-spinner-size: 48px; --cd-spinner-stroke: 3px;   }

/* ── Dot pulse variant ────────────────────────────────────────────────────── */

.cd-spinner--dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  animation: none;
  width: auto;
  height: auto;
}

.cd-spinner--dots::before,
.cd-spinner--dots::after,
.cd-spinner--dots span {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cd-accent);
  animation: cd-pulse-dots 1.2s ease-in-out infinite;
}

.cd-spinner--dots::before { animation-delay: 0s;    }
.cd-spinner--dots span    { animation-delay: 0.2s;  }
.cd-spinner--dots::after  { animation-delay: 0.4s;  }

/* ── Inline loading state — wrap content with this ───────────────────────── */

.cd-loading {
  position: relative;
  pointer-events: none;
}

.cd-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cd-bg) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-spinner       { animation: none; opacity: 0.5; }
  .cd-spinner--dots::before,
  .cd-spinner--dots span,
  .cd-spinner--dots::after { animation: none; opacity: 0.5; }
}

/* Component: Charts (stat, bar chart, histogram, sparkline, timeline, canvas shells) */
/* ── Stat card ──────────────────────────────────────────── */
/*
  Usage:
  <div class="cd-stat cd-stat--accent">
    <span class="cd-stat__label">Active Incidents</span>
    <span class="cd-stat__value">142</span>
    <span class="cd-stat__delta cd-stat__delta--up">+12 today</span>
  </div>
*/

.cd-stat {
  background: rgba(5, 6, 10, 0.72);
  border: 1px solid var(--cd-border);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--cd-accent) 8%, transparent);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cd-stat:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-stat__label {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cd-text-muted);
}

.cd-stat__value {
  font-family: var(--cd-font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--cd-neon-green);
  text-shadow:
    2px 0 0 rgba(255, 43, 214, 0.35),
    0 0 6px rgba(82, 255, 159, 0.35);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cd-stat__delta {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cd-text-muted);
}

.cd-stat__delta--up   { color: var(--cd-neon-green); }
.cd-stat__delta--down { color: var(--cd-neon-red); }

/* Color variants override the value color */
.cd-stat--accent .cd-stat__value {
  color: var(--cd-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 50%, transparent);
}
.cd-stat--red .cd-stat__value {
  color: var(--cd-neon-red);
  text-shadow: 0 0 8px rgba(255, 69, 108, 0.5);
}
.cd-stat--yellow .cd-stat__value {
  color: var(--cd-neon-yellow);
  text-shadow: 0 0 8px rgba(247, 255, 90, 0.5);
}
.cd-stat--blue .cd-stat__value {
  color: var(--cd-neon-blue);
  text-shadow: 0 0 8px rgba(106, 168, 255, 0.5);
}
.cd-stat--magenta .cd-stat__value {
  color: var(--cd-accent-secondary);
  text-shadow: 0 0 8px rgba(255, 43, 214, 0.5);
}

/* ── Stats grid ─────────────────────────────────────────── */
/* Grid of cd-stat cards separated by 1px border lines */

.cd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1px;
  background: var(--cd-border-dim);
  border: 1px solid var(--cd-border-dim);
}

.cd-stats .cd-stat {
  border: none;
  box-shadow: none;
}

/* ── Horizontal bar chart ───────────────────────────────── */
/*
  Set per-bar color+width via CSS custom properties:
  <div class="cd-hbar" style="--bar-color: #52ff9f; --bar-w: 72%">
*/

.cd-hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.cd-hbar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cd-font-mono);
}

.cd-hbar__dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: var(--bar-color, var(--cd-accent));
  box-shadow: 0 0 4px var(--bar-color, var(--cd-accent));
}

.cd-hbar__label {
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-text-muted);
  width: 80px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-hbar__track {
  flex: 1;
  height: 4px;
  background: var(--cd-bg-panel-hover);
  border: 1px solid var(--cd-border-dim);
  overflow: hidden;
  position: relative;
}

.cd-hbar__fill {
  height: 100%;
  width: var(--bar-w, 50%);
  background: var(--bar-color, var(--cd-accent));
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Glowing tip at the right edge of the fill */
.cd-hbar__fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: color-mix(in srgb, var(--bar-color, var(--cd-accent)) 80%, white);
  filter: blur(2px);
}

.cd-hbar__value {
  font-size: var(--cd-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cd-text-muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Thick variant */
.cd-hbar-chart--thick .cd-hbar__track { height: 8px; }
.cd-hbar-chart--thick .cd-hbar__dot   { width: 8px; height: 8px; }

/* ── Histogram (vertical bars) ──────────────────────────── */
/*
  Set per-bar height via CSS custom property:
  <div class="cd-histogram__bar" style="--bar-h: 65%; --bar-color: #47f6ff">
*/

.cd-histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 80px;
  position: relative;
}

/* Horizontal grid lines */
.cd-histogram__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cd-histogram__grid-line {
  width: 100%;
  height: 1px;
  background: var(--cd-border-dim);
}

.cd-histogram__bar {
  flex: 1;
  height: var(--bar-h, 50%);
  background: var(--bar-color, var(--cd-accent));
  opacity: 0.75;
  min-height: 2px;
  transition: height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease;
  cursor: pointer;
  position: relative;
}

.cd-histogram__bar:hover {
  opacity: 1;
  box-shadow: 0 0 6px var(--bar-color, var(--cd-accent));
}

/* Stacked bar: flex children */
.cd-histogram__bar--stack {
  display: flex;
  flex-direction: column-reverse;
  background: none;
  opacity: 1;
}

.cd-histogram__segment {
  width: 100%;
  height: var(--seg-h, 50%);
  background: var(--seg-color, var(--cd-accent));
  opacity: 0.78;
  min-height: 1px;
}

/* ── Sparkline ──────────────────────────────────────────── */
/*
  Tiny inline bar series. Use --bar-h per bar.
  <div class="cd-sparkline">
    <div class="cd-sparkline__bar" style="--bar-h: 80%"></div>
    ...
  </div>
*/

.cd-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 24px;
}

.cd-sparkline__bar {
  flex: 1;
  height: var(--bar-h, 50%);
  background: var(--bar-color, var(--cd-accent));
  min-height: 2px;
  opacity: 0.65;
  transition: opacity 120ms ease;
}

.cd-sparkline__bar:hover {
  opacity: 1;
}

/* Fixed-width bars (less elastic) */
.cd-sparkline--fixed .cd-sparkline__bar {
  flex: none;
  width: 3px;
}

/* Activity grid (like GitHub contributions) */
.cd-activity-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.cd-activity-cell {
  width: 10px;
  height: 10px;
  background: var(--cell-color, var(--cd-bg-panel-hover));
  opacity: var(--cell-opacity, 0.15);
  transition: opacity 120ms ease;
  cursor: default;
}

.cd-activity-cell:hover {
  outline: 1px solid var(--cd-accent);
  opacity: 1;
}

/* ── Event timeline ─────────────────────────────────────── */
/*
  <div class="cd-timeline">
    <div class="cd-timeline__item">
      <div class="cd-timeline__spine">
        <div class="cd-timeline__dot" style="--dot-color: #ff456c"></div>
        <div class="cd-timeline__connector"></div>
      </div>
      <div class="cd-timeline__body">
        <div class="cd-timeline__time">14:32</div>
        <div class="cd-timeline__title">Event title</div>
        <div class="cd-timeline__desc">Optional description</div>
      </div>
    </div>
  </div>
*/

.cd-timeline {
  display: flex;
  flex-direction: column;
}

.cd-timeline__item {
  display: flex;
  gap: 12px;
}

.cd-timeline__spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 8px;
}

.cd-timeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--dot-color, var(--cd-accent));
  box-shadow: 0 0 6px var(--dot-color, var(--cd-accent));
}

.cd-timeline__connector {
  flex: 1;
  width: 1px;
  background: var(--cd-border-dim);
  margin-top: 4px;
  min-height: 8px;
}

/* Last item: hide connector */
.cd-timeline__item:last-child .cd-timeline__connector {
  display: none;
}

.cd-timeline__body {
  flex: 1;
  padding-bottom: 16px;
}

.cd-timeline__time {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--cd-accent);
  text-transform: uppercase;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.cd-timeline__title {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-base);
  color: var(--cd-text);
  line-height: 1.4;
  margin-bottom: 4px;
}

.cd-timeline__desc {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  color: var(--cd-text-muted);
  line-height: 1.5;
}

/* ── Canvas chart containers ────────────────────────────── */
/* Shell that canvas-based charts (from charts.js) render into */

.cd-chart {
  position: relative;
  width: 100%;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border-glow);
  box-shadow: var(--cd-panel-shadow);
  overflow: hidden;
}

.cd-chart canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Inset top + bottom neon gradient accent lines (AI-shell visualizer pattern) */
.cd-chart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cd-accent) 55%, transparent) 40%,
    color-mix(in srgb, var(--cd-accent-secondary) 40%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Chart header inside the container */
.cd-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--cd-border-dim);
  flex-shrink: 0;
}

.cd-chart__title {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cd-accent);
}

.cd-chart__meta {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  letter-spacing: 0.06em;
}

/* Scope variant: shorter, scope-specific accent */
.cd-chart--scope {
  height: 60px;
}

.cd-chart--scope::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cd-neon-yellow) 55%, transparent) 50%,
    transparent 100%
  );
}

/* Component: Augmented (clip-path shapes, neon glow, aug-panel, aug-btn, corners) */
/* ── Augmented Clip-Path Utilities ─────────────────────────────────────────
   Inspired by augmented-ui (propjockey.io) — lightweight subset using
   clip-path: polygon() + filter: drop-shadow() for neon-bordered clipped shapes.
   ─────────────────────────────────────────────────────────────────────────── */

/* Clip size tokens — override per-element with --cd-clip */
:root {
  --cd-clip-sm: 6px;
  --cd-clip-md: 12px;
  --cd-clip-lg: 20px;
  --cd-clip-xl: 32px;
}

/* Internal fallback for all clip utilities */
.cd-clip-tl, .cd-clip-tr, .cd-clip-br, .cd-clip-bl,
.cd-clip-2, .cd-clip-2r, .cd-clip-4,
.cd-step-tr, .cd-step-tl, .cd-step-br, .cd-step-bl {
  --_cs: var(--cd-clip, var(--cd-clip-md));
}

/* ── Single corner clips ──────────────────────────────────────────────────── */

.cd-clip-tl {
  -webkit-clip-path: polygon(
    var(--_cs) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--_cs)
  );
  clip-path: polygon(
    var(--_cs) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--_cs)
  );
}

.cd-clip-tr {
  -webkit-clip-path: polygon(
    0% 0%, calc(100% - var(--_cs)) 0%, 100% var(--_cs), 100% 100%, 0% 100%
  );
  clip-path: polygon(
    0% 0%, calc(100% - var(--_cs)) 0%, 100% var(--_cs), 100% 100%, 0% 100%
  );
}

.cd-clip-br {
  -webkit-clip-path: polygon(
    0% 0%, 100% 0%, 100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%, 0% 100%
  );
  clip-path: polygon(
    0% 0%, 100% 0%, 100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%, 0% 100%
  );
}

.cd-clip-bl {
  -webkit-clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, var(--_cs) 100%, 0% calc(100% - var(--_cs))
  );
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, var(--_cs) 100%, 0% calc(100% - var(--_cs))
  );
}

/* ── Dual corner clips ────────────────────────────────────────────────────── */

/* Diagonal TL+BR — the classic cyberpunk slash shape */
.cd-clip-2 {
  -webkit-clip-path: polygon(
    var(--_cs) 0%,
    100% 0%,
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    0% 100%,
    0% var(--_cs)
  );
  clip-path: polygon(
    var(--_cs) 0%,
    100% 0%,
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    0% 100%,
    0% var(--_cs)
  );
}

/* Reverse diagonal TR+BL */
.cd-clip-2r {
  -webkit-clip-path: polygon(
    0% 0%,
    calc(100% - var(--_cs)) 0%,
    100% var(--_cs),
    100% 100%,
    var(--_cs) 100%,
    0% calc(100% - var(--_cs))
  );
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--_cs)) 0%,
    100% var(--_cs),
    100% 100%,
    var(--_cs) 100%,
    0% calc(100% - var(--_cs))
  );
}

/* ── All four corners clipped ─────────────────────────────────────────────── */

.cd-clip-4 {
  -webkit-clip-path: polygon(
    var(--_cs) 0%,
    calc(100% - var(--_cs)) 0%,
    100% var(--_cs),
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    var(--_cs) 100%,
    0% calc(100% - var(--_cs)),
    0% var(--_cs)
  );
  clip-path: polygon(
    var(--_cs) 0%,
    calc(100% - var(--_cs)) 0%,
    100% var(--_cs),
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    var(--_cs) 100%,
    0% calc(100% - var(--_cs)),
    0% var(--_cs)
  );
}

/* ── Step notches (right-angle cutout, pixel aesthetic) ──────────────────── */

.cd-step-tr {
  -webkit-clip-path: polygon(
    0% 0%,
    calc(100% - var(--_cs)) 0%,
    calc(100% - var(--_cs)) var(--_cs),
    100% var(--_cs),
    100% 100%,
    0% 100%
  );
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--_cs)) 0%,
    calc(100% - var(--_cs)) var(--_cs),
    100% var(--_cs),
    100% 100%,
    0% 100%
  );
}

.cd-step-tl {
  -webkit-clip-path: polygon(
    0% var(--_cs),
    var(--_cs) var(--_cs),
    var(--_cs) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
  clip-path: polygon(
    0% var(--_cs),
    var(--_cs) var(--_cs),
    var(--_cs) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

.cd-step-br {
  -webkit-clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    0% 100%
  );
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) calc(100% - var(--_cs)),
    calc(100% - var(--_cs)) 100%,
    0% 100%
  );
}

.cd-step-bl {
  -webkit-clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    var(--_cs) 100%,
    var(--_cs) calc(100% - var(--_cs)),
    0% calc(100% - var(--_cs))
  );
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    var(--_cs) 100%,
    var(--_cs) calc(100% - var(--_cs)),
    0% calc(100% - var(--_cs))
  );
}

/* ── Neon glow on clipped shapes ─────────────────────────────────────────── */
/* filter: drop-shadow() traces the rendered silhouette, following clip-path  */

.cd-aug-glow {
  filter: drop-shadow(0 0 4px var(--cd-accent)) drop-shadow(0 0 10px var(--cd-accent-glow));
}

.cd-aug-glow:hover {
  filter: drop-shadow(0 0 6px var(--cd-accent)) drop-shadow(0 0 16px var(--cd-accent-glow));
}

.cd-aug-glow-secondary {
  filter:
    drop-shadow(0 0 4px var(--cd-accent-secondary))
    drop-shadow(0 0 10px var(--cd-accent-secondary-glow));
}

/* ── Augmented panel ─────────────────────────────────────────────────────── */

.cd-aug-panel {
  --cd-clip: var(--cd-clip-lg);
  position: relative;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  padding: 20px;
  color: var(--cd-text);
  filter: drop-shadow(0 0 4px var(--cd-accent-glow)) drop-shadow(0 0 1px var(--cd-accent));
  -webkit-clip-path: polygon(
    var(--cd-clip) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    0% 100%,
    0% var(--cd-clip)
  );
  clip-path: polygon(
    var(--cd-clip) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    0% 100%,
    0% var(--cd-clip)
  );
  transition: filter 0.2s, border-color 0.2s;
}

.cd-aug-panel:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
  filter: drop-shadow(0 0 8px var(--cd-accent-glow)) drop-shadow(0 0 2px var(--cd-accent));
}

.cd-aug-panel--sm { --cd-clip: var(--cd-clip-sm); padding: 12px 14px; }
.cd-aug-panel--lg { --cd-clip: var(--cd-clip-xl); padding: 28px; }
.cd-aug-panel--4 {
  -webkit-clip-path: polygon(
    var(--cd-clip) 0%,
    calc(100% - var(--cd-clip)) 0%,
    100% var(--cd-clip),
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    var(--cd-clip) 100%,
    0% calc(100% - var(--cd-clip)),
    0% var(--cd-clip)
  );
  clip-path: polygon(
    var(--cd-clip) 0%,
    calc(100% - var(--cd-clip)) 0%,
    100% var(--cd-clip),
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    var(--cd-clip) 100%,
    0% calc(100% - var(--cd-clip)),
    0% var(--cd-clip)
  );
}

/* ── Augmented button ────────────────────────────────────────────────────── */

.cd-aug-btn {
  --cd-clip: var(--cd-clip-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--cd-accent);
  color: var(--cd-accent);
  font: 700 var(--cd-text-sm)/1 var(--cd-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
  -webkit-clip-path: polygon(
    var(--cd-clip) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    0% 100%,
    0% var(--cd-clip)
  );
  clip-path: polygon(
    var(--cd-clip) 0%,
    100% 0%,
    100% calc(100% - var(--cd-clip)),
    calc(100% - var(--cd-clip)) 100%,
    0% 100%,
    0% var(--cd-clip)
  );
}

.cd-aug-btn:hover {
  color: var(--cd-accent-bright);
  border-color: var(--cd-accent-bright);
  filter: drop-shadow(0 0 6px var(--cd-accent)) drop-shadow(0 0 12px var(--cd-accent-glow));
}

.cd-aug-btn:active {
  background: var(--cd-accent-subtle);
}

.cd-aug-btn:focus-visible {
  color: var(--cd-accent-bright);
  border-color: var(--cd-accent-bright);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-accent) 50%, transparent);
}

.cd-aug-btn--primary {
  background: var(--cd-accent-subtle);
  filter: drop-shadow(0 0 3px var(--cd-accent-glow));
}

.cd-aug-btn--primary:hover {
  background: color-mix(in srgb, var(--cd-accent) 18%, transparent);
}

.cd-aug-btn--sm {
  --cd-clip: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: var(--cd-text-xs);
}

.cd-aug-btn--lg {
  --cd-clip: var(--cd-clip-md);
  height: 40px;
  padding: 0 24px;
  font-size: var(--cd-text-base);
}

/* Reverse diagonal variant — TR+BL cut */
.cd-aug-btn--rev {
  -webkit-clip-path: polygon(
    0% 0%,
    calc(100% - var(--cd-clip)) 0%,
    100% var(--cd-clip),
    100% 100%,
    var(--cd-clip) 100%,
    0% calc(100% - var(--cd-clip))
  );
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--cd-clip)) 0%,
    100% var(--cd-clip),
    100% 100%,
    var(--cd-clip) 100%,
    0% calc(100% - var(--cd-clip))
  );
}

/* ── Corner bracket decoration ───────────────────────────────────────────── */
/* Adds glowing corner tick marks without clipping the element's content      */

.cd-corners {
  position: relative;
}

.cd-corners::before,
.cd-corners::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transition: opacity 0.2s;
}

.cd-corners::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
  box-shadow: -2px -2px 6px var(--cd-accent-glow), 0 0 3px var(--cd-accent-glow);
}

.cd-corners::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
  box-shadow: 2px 2px 6px var(--cd-accent-glow), 0 0 3px var(--cd-accent-glow);
}

/* Four-corner variant — uses a child wrapper technique via shadow DOM trick */
.cd-corners-4 {
  position: relative;
  --_c: color-mix(in srgb, var(--cd-accent) 80%, transparent);
}

.cd-corners-4::before,
.cd-corners-4::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.cd-corners-4::before {
  top: 0; left: 0;
  border-top: 1px solid var(--_c);
  border-left: 1px solid var(--_c);
}

.cd-corners-4::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--_c);
  border-right: 1px solid var(--_c);
}

/* Companion spans for all-four-corner version */
.cd-corners-4 > .cd-corner-tr {
  position: absolute;
  top: 0; right: 0;
  width: 10px; height: 10px;
  border-top: 1px solid var(--_c);
  border-right: 1px solid var(--_c);
  pointer-events: none;
}

.cd-corners-4 > .cd-corner-bl {
  position: absolute;
  bottom: 0; left: 0;
  width: 10px; height: 10px;
  border-bottom: 1px solid var(--_c);
  border-left: 1px solid var(--_c);
  pointer-events: none;
}

/* Hover brightens the corners */
.cd-corners:hover::before,
.cd-corners:hover::after {
  border-color: var(--cd-accent-bright);
  box-shadow: -2px -2px 8px var(--cd-accent-glow), 0 0 4px var(--cd-accent-glow);
}

.cd-corners-4:hover::before,
.cd-corners-4:hover::after {
  border-color: var(--cd-accent-bright);
}

/* ── Size modifier classes ────────────────────────────────────────────────── */

.cd-clip--sm { --cd-clip: var(--cd-clip-sm); }
.cd-clip--md { --cd-clip: var(--cd-clip-md); }
.cd-clip--lg { --cd-clip: var(--cd-clip-lg); }
.cd-clip--xl { --cd-clip: var(--cd-clip-xl); }

/* Component: VectorBg (spinning SVG background containers + keyframes) */
/* ── Spinning Vector Backgrounds ────────────────────────────────────────────
   CSS animation layer for inline SVG decorative backgrounds.
   All SVGs use viewBox="0 0 240 240" and inherit --cd-* colors from the DOM.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes cd-vbg-cw  { to { transform: rotate(360deg);  } }
@keyframes cd-vbg-ccw { to { transform: rotate(-360deg); } }

/* ── Container ───────────────────────────────────────────────────────────── */

.cd-vectorbg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 240px;
  height: 240px;
}

.cd-vectorbg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cd-vectorbg--sm   { width: 160px; height: 160px; }
.cd-vectorbg--lg   { width: 360px; height: 360px; }
.cd-vectorbg--fill { width: 100%;  height: 100%;  }

/* ── Spin utility classes (apply directly to SVG <g> elements) ───────────── */
/* All groups include a full-size invisible <rect> to anchor transform-origin  */
/* at the SVG center via transform-box: fill-box; transform-origin: center    */

.cd-vbg-cw {
  animation: cd-vbg-cw 12s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.cd-vbg-ccw {
  animation: cd-vbg-ccw 8s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Speed modifiers — combine with .cd-vbg-cw / .cd-vbg-ccw */
.cd-vbg-xl   { animation-duration: 48s;  }
.cd-vbg-slow { animation-duration: 24s;  }
.cd-vbg-med  { animation-duration: 10s;  }
.cd-vbg-fast { animation-duration: 3.5s; }

/* Reduced motion — freeze all spinning */
@media (prefers-reduced-motion: reduce) {
  .cd-vbg-cw,
  .cd-vbg-ccw { animation: none; }
}

/* Component: Image treatments (frames, glitch, scan/CRT, holo) */
/* ── Images & Media Frames ─────────────────────────────────────────────────── */
/*
  Cyberpunk-styled image treatments and containers.
  Use on <img> or <picture> elements, or wrap for frames.

  Base:
  <img class="cd-img" src="..." alt="...">

  Framed / bordered:
  <div class="cd-img-frame">
    <img class="cd-img" src="..." />
  </div>

  Effects (apply to the img or wrapper):
  .cd-img-glitch
  .cd-img-scan   (adds CRT scan overlay)
  .cd-img-crt    (scan + subtle flicker feel)
  .cd-img-holo   (holographic glow + slight perspective on hover)

  Compose with existing:
  - .cd-glow, .cd-glow-card
  - .cd-corners or .cd-aug-panel for clipped frames
  - .cd-interference for noise over images
  - .cd-vectorbg for SVG illustrations instead of photos

  All respect --cd-* tokens and reduced-motion.
*/

.cd-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--cd-border);
  background: var(--cd-bg-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent);
  object-fit: cover;
  image-rendering: auto;
}

/* Neon / accent border variant */
.cd-img--neon {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 18%, transparent);
}

/* Frame wrapper — adds outer structure, glow, and optional corners */
.cd-img-frame {
  position: relative;
  display: inline-block;
  padding: 3px;
  background: var(--cd-bg);
  border: 1px solid var(--cd-border-glow);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    0 0 16px color-mix(in srgb, var(--cd-accent) 10%, transparent);
}

.cd-img-frame .cd-img {
  border: 1px solid var(--cd-border-dim);
  box-shadow: none;
  width: 100%;
  height: 100%;
}

.cd-img-frame--glow {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 25%, transparent),
    0 0 24px var(--cd-accent-glow);
}

/* Glitch effect — digital distortion / signal noise on the image */
.cd-img-glitch {
  position: relative;
  overflow: hidden;
}

.cd-img-glitch img {
  animation: cd-img-glitch-jitter 0.4s linear infinite alternate;
  filter: contrast(1.1) saturate(1.05);
}

@keyframes cd-img-glitch-jitter {
  0%   { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(1.05); }
  20%  { transform: translate(-1px, 1px); filter: hue-rotate(-8deg) contrast(1.15); }
  40%  { transform: translate(1px, -1px); filter: hue-rotate(6deg) contrast(1.1); }
  60%  { transform: translate(-2px, 0); filter: hue-rotate(4deg) contrast(1.2); }
  80%  { transform: translate(1px, 1px); filter: hue-rotate(-5deg) contrast(1.08); }
  100% { transform: translate(0, -1px); filter: hue-rotate(0deg) contrast(1.05); }
}

/* Scan / CRT overlay effect */
.cd-img-scan,
.cd-img-crt {
  position: relative;
}

.cd-img-scan::after,
.cd-img-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--cd-scanline-color) 2px,
    var(--cd-scanline-color) 4px
  );
  mix-blend-mode: multiply;
  z-index: 2;
}

.cd-img-crt::after {
  opacity: 0.65;
}

/* Holographic / projection style */
.cd-img-holo {
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cd-img-holo:hover {
  transform: perspective(600px) rotateX(3deg) rotateY(-4deg) translateY(-1px);
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 30%, transparent),
    0 0 18px var(--cd-accent-glow);
}

.cd-img-holo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 20%,
    color-mix(in srgb, var(--cd-accent) 8%, transparent) 40%,
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Size helpers for frames */
.cd-img-frame--sm .cd-img { max-height: 120px; }
.cd-img-frame--lg .cd-img { max-height: 420px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-img-glitch img {
    animation: none;
  }
  .cd-img-holo:hover {
    transform: none;
  }
}

/* Component: SVG / Vector art helpers (icons, grids, reticles, wireframes) */
/* ── SVG & Vector Art Components ───────────────────────────────────────────── */
/*
  Base styles and helpers for inline <svg> cyberpunk vector art and icons.

  Use with the existing .cd-vectorbg for animated backgrounds,
  or standalone for icons, reticles, wireframes, HUD elements.

  Examples in the test harness under Decorative → Vector backgrounds & icons.

  All SVGs should use currentColor or var(--cd-*) for theming.
*/

.cd-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

/* Icon base — sized, colored via currentColor or accent */
.cd-svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cd-svg-icon--accent {
  color: var(--cd-accent);
  stroke: var(--cd-accent);
}

.cd-svg-icon--secondary {
  color: var(--cd-accent-secondary);
  stroke: var(--cd-accent-secondary);
}

.cd-svg-icon--sm { width: 0.875em; height: 0.875em; }
.cd-svg-icon--lg { width: 1.5em; height: 1.5em; }

/* Common cyberpunk icon styles */
.cd-svg-icon circle,
.cd-svg-icon path,
.cd-svg-icon line,
.cd-svg-icon rect,
.cd-svg-icon polygon {
  transition: stroke 120ms ease, fill 120ms ease;
}

.cd-svg-icon:hover {
  filter: drop-shadow(0 0 2px currentColor);
}

/* Grid / circuit pattern helper (apply to <g> or use as pattern fill) */
.cd-svg-grid {
  stroke: var(--cd-accent);
  stroke-opacity: 0.15;
  stroke-width: 1;
}

/* Reticle / target helper classes for SVGs */
.cd-svg-reticle {
  stroke: var(--cd-accent);
  stroke-opacity: 0.6;
}

.cd-svg-reticle--secondary {
  stroke: var(--cd-accent-secondary);
  stroke-opacity: 0.55;
}

/* Wireframe / low-poly look */
.cd-svg-wire {
  stroke: var(--cd-accent);
  stroke-opacity: 0.4;
  stroke-width: 1.25;
  fill: var(--cd-accent);
  fill-opacity: 0.03;
}

/* Neon glow on SVG elements (add to <g> or specific paths) */
.cd-svg-neon {
  filter: drop-shadow(0 0 1px var(--cd-accent)) drop-shadow(0 0 3px var(--cd-accent-glow));
}

.cd-svg-neon--secondary {
  filter: drop-shadow(0 0 1px var(--cd-accent-secondary)) drop-shadow(0 0 3px var(--cd-accent-secondary-glow, var(--cd-accent-secondary)));
}

/* Reduced motion — disable any SVG animations if added */
@media (prefers-reduced-motion: reduce) {
  .cd-svg-icon,
  .cd-vectorbg svg * {
    animation: none !important;
    transition: none !important;
  }
}

/* Component: Card */
/* ── Card (structured surface — Header / Title / Description / Content / Footer) ─ */

.cd-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--cd-bg-panel);
  border: 1px solid var(--cd-border);
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  box-shadow: var(--cd-panel-shadow, none);
}

.cd-card--glow {
  border-color: color-mix(in srgb, var(--cd-accent) 30%, transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

.cd-card__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--cd-border-dim);
}

.cd-card__header--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cd-card__title {
  margin: 0;
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cd-accent);
}

.cd-card__description {
  margin: 0;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.cd-card__content {
  padding: 14px 16px;
  flex: 1;
}

.cd-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--cd-border-dim);
}

.cd-card__footer--end {
  justify-content: flex-end;
}

/* Component: Sheet / Drawer */
/* ── Sheet / Drawer — side or bottom panel over dimmed backdrop ─────────────── */

.cd-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 6, 10, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.cd-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cd-sheet {
  position: fixed;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent);
  transition: transform 0.22s ease, opacity 0.18s ease;
  opacity: 0;
}

.cd-sheet-overlay.is-open .cd-sheet {
  opacity: 1;
  transform: translate(0, 0);
}

/* Sides */
.cd-sheet--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 400px);
  border-left: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
  border-right: none;
  transform: translateX(100%);
}

.cd-sheet--left {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(100%, 400px);
  border-right: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
  border-left: none;
  transform: translateX(-100%);
}

.cd-sheet--top {
  top: 0;
  left: 0;
  right: 0;
  max-height: min(80vh, 480px);
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
  border-top: none;
  transform: translateY(-100%);
}

.cd-sheet--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  max-height: min(80vh, 480px);
  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
  border-bottom: none;
  transform: translateY(100%);
}

.cd-sheet--sm.cd-sheet--right,
.cd-sheet--sm.cd-sheet--left { width: min(100%, 320px); }

.cd-sheet--lg.cd-sheet--right,
.cd-sheet--lg.cd-sheet--left { width: min(100%, 560px); }

.cd-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  flex-shrink: 0;
}

.cd-sheet__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cd-accent);
}

.cd-sheet__description {
  margin: 4px 0 0;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
}

.cd-sheet__body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.cd-sheet__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  flex-shrink: 0;
}

.cd-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--cd-border-dim);
  color: var(--cd-text-muted);
  font: var(--cd-text-base)/1 var(--cd-font-mono);
  cursor: pointer;
  flex-shrink: 0;
}

.cd-sheet__close:hover {
  border-color: var(--cd-red);
  color: var(--cd-red);
}

@media (prefers-reduced-motion: reduce) {
  .cd-sheet,
  .cd-sheet-overlay { transition: none; }
}

/* Component: Popover / Hover Card */
/* ── Popover / Hover Card ──────────────────────────────────────────────────── */

.cd-popover {
  position: relative;
  display: inline-block;
}

.cd-popover__content {
  position: absolute;
  z-index: 600;
  min-width: 200px;
  max-width: 320px;
  padding: 12px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 16px color-mix(in srgb, var(--cd-accent) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.cd-popover.is-open > .cd-popover__content,
.cd-popover:focus-within > .cd-popover__content {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Placement */
.cd-popover__content--bottom {
  top: calc(100% + 6px);
  left: 0;
}

.cd-popover__content--bottom-end {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}

.cd-popover__content--top {
  bottom: calc(100% + 6px);
  left: 0;
  transform: translateY(-4px) scale(0.98);
}

.cd-popover.is-open > .cd-popover__content--top {
  transform: translateY(0) scale(1);
}

.cd-popover__content--right {
  left: calc(100% + 6px);
  top: 0;
  transform: translateX(4px) scale(0.98);
}

.cd-popover.is-open > .cd-popover__content--right {
  transform: translateX(0) scale(1);
}

.cd-popover__title {
  margin: 0 0 4px;
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cd-accent);
}

.cd-popover__description {
  margin: 0;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  line-height: 1.5;
}

/* Hover card — open on hover of host */
.cd-hover-card {
  position: relative;
  display: inline-block;
}

.cd-hover-card__content {
  position: absolute;
  z-index: 600;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 300px;
  padding: 12px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  color: var(--cd-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--cd-accent) 15%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 80ms;
}

.cd-hover-card:hover > .cd-hover-card__content,
.cd-hover-card:focus-within > .cd-hover-card__content {
  opacity: 1;
  pointer-events: auto;
}

/* Component: Toggle / Button Group */
/* ── Toggle / Toggle Group / Button Group ──────────────────────────────────── */

.cd-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid var(--cd-border);
  background: rgba(5, 6, 10, 0.55);
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.cd-toggle:hover:not(:disabled):not([data-state='on']) {
  color: var(--cd-accent);
  border-color: var(--cd-border-glow);
}

.cd-toggle:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cd-toggle[data-state='on'],
.cd-toggle.is-on {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  background: var(--cd-accent-subtle);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 18%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-toggle--sm {
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  font-size: var(--cd-text-xs);
}

.cd-toggle--outline {
  background: transparent;
}

.cd-toggle-group {
  display: inline-flex;
  align-items: stretch;
}

.cd-toggle-group > .cd-toggle {
  border-radius: 0;
}

.cd-toggle-group > .cd-toggle:not(:first-child) {
  margin-left: -1px;
}

.cd-toggle-group > .cd-toggle:hover,
.cd-toggle-group > .cd-toggle[data-state='on'] {
  z-index: 1;
}

/* Button group */
.cd-btn-group {
  display: inline-flex;
  align-items: stretch;
}

.cd-btn-group > .cd-btn {
  border-radius: 0;
}

.cd-btn-group > .cd-btn:not(:first-child) {
  margin-left: -1px;
}

.cd-btn-group > .cd-btn:hover,
.cd-btn-group > .cd-btn:focus-visible {
  z-index: 1;
}

.cd-btn-group--vertical {
  flex-direction: column;
}

.cd-btn-group--vertical > .cd-btn:not(:first-child) {
  margin-left: 0;
  margin-top: -1px;
}

/* Component: Layout extras (aspect, scroll, empty, collapsible, resizable, item) */
/* ── Aspect Ratio / Scroll Area / Empty / Collapsible / Resizable / Item ───── */

.cd-aspect-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cd-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-scroll-area {
  overflow: auto;
  position: relative;
}

.cd-scroll-area--thin {
  scrollbar-width: thin;
  scrollbar-color: var(--cd-scrollbar-thumb, color-mix(in srgb, var(--cd-accent) 25%, transparent)) transparent;
}

.cd-scroll-area--thin::-webkit-scrollbar { width: 4px; height: 4px; }
.cd-scroll-area--thin::-webkit-scrollbar-track { background: transparent; }
.cd-scroll-area--thin::-webkit-scrollbar-thumb {
  background: var(--cd-scrollbar-thumb, color-mix(in srgb, var(--cd-accent) 25%, transparent));
  border-radius: 2px;
}

/* Empty state */
.cd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--cd-border) 80%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel) 50%, transparent);
  font-family: var(--cd-font-mono);
  color: var(--cd-text-muted);
}

.cd-empty__icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cd-accent);
  opacity: 0.85;
  margin-bottom: 4px;
}

.cd-empty__title {
  margin: 0;
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cd-text);
}

.cd-empty__description {
  margin: 0;
  max-width: 280px;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  line-height: 1.5;
}

.cd-empty__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Collapsible */
.cd-collapsible {
  width: 100%;
}

.cd-collapsible__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: left;
}

.cd-collapsible__trigger:hover {
  color: var(--cd-accent);
}

.cd-collapsible__chevron {
  color: var(--cd-text-dim);
  transition: transform 0.15s ease;
  font-size: var(--cd-text-xs);
}

.cd-collapsible.is-open .cd-collapsible__chevron {
  transform: rotate(180deg);
  color: var(--cd-accent);
}

.cd-collapsible__content {
  overflow: hidden;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  color: var(--cd-text-secondary);
  line-height: 1.55;
}

.cd-collapsible:not(.is-open) > .cd-collapsible__content {
  display: none;
}

/* Resizable panels */
.cd-resizable {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border: 1px solid var(--cd-border);
  background: var(--cd-bg);
  font-family: var(--cd-font-mono);
  overflow: hidden;
}

.cd-resizable--vertical {
  flex-direction: column;
}

.cd-resizable__panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: var(--cd-bg-panel);
}

.cd-resizable__handle {
  flex: 0 0 6px;
  background: var(--cd-border-dim);
  position: relative;
  cursor: col-resize;
  transition: background 0.12s ease;
}

.cd-resizable--vertical > .cd-resizable__handle {
  cursor: row-resize;
  flex-basis: 6px;
}

.cd-resizable__handle:hover,
.cd-resizable__handle:active {
  background: color-mix(in srgb, var(--cd-accent) 45%, transparent);
}

.cd-resizable__handle::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2px;
  height: 24px;
  background: color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

.cd-resizable--vertical > .cd-resizable__handle::after {
  width: 24px;
  height: 2px;
}

/* Item (list row primitive) */
.cd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  text-align: left;
  width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.cd-item--bordered {
  border-color: var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 60%, transparent);
}

.cd-item--interactive {
  cursor: pointer;
}

.cd-item--interactive:hover {
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
}

.cd-item__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cd-accent);
}

.cd-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-item__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cd-item__description {
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  line-height: 1.4;
}

.cd-item__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cd-item-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Component: Command / Combobox */
/* ── Command palette / Combobox list ───────────────────────────────────────── */

.cd-command {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  font-family: var(--cd-font-mono);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 20px color-mix(in srgb, var(--cd-accent) 15%, transparent);
  overflow: hidden;
}

.cd-command__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
}

.cd-command__input-wrap::before {
  content: '›';
  color: var(--cd-accent);
  font-weight: 700;
}

.cd-command__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
}

.cd-command__input::placeholder {
  color: var(--cd-text-dim);
  font-style: italic;
}

.cd-command__list {
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}

.cd-command__group-label {
  padding: 6px 8px 4px;
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cd-text-dim);
}

.cd-command__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text-secondary);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  text-align: left;
  cursor: pointer;
}

.cd-command__item:hover,
.cd-command__item[data-selected='true'],
.cd-command__item.is-selected {
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
  color: var(--cd-accent);
}

.cd-command__item:disabled,
.cd-command__item[aria-disabled='true'] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cd-command__item-kbd {
  margin-left: auto;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-dim);
}

.cd-command__empty {
  padding: 24px 12px;
  text-align: center;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cd-command__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--cd-border-dim);
}

/* Combobox host reuses popover + command list */
.cd-combobox {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 320px;
}

.cd-combobox__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 220px;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.cd-combobox.is-open > .cd-combobox__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cd-combobox__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--cd-text-secondary);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  text-align: left;
  cursor: pointer;
}

.cd-combobox__option:hover,
.cd-combobox__option[aria-selected='true'] {
  background: var(--cd-accent-subtle);
  color: var(--cd-accent);
}

/* Component: Calendar / Date Picker */
/* ── Calendar / Date grid ──────────────────────────────────────────────────── */

.cd-calendar {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  font-family: var(--cd-font-mono);
  color: var(--cd-text);
  user-select: none;
  min-width: 260px;
}

.cd-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cd-calendar__title {
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cd-accent);
}

.cd-calendar__nav {
  display: flex;
  gap: 4px;
}

.cd-calendar__nav-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cd-border);
  background: rgba(5, 6, 10, 0.55);
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  cursor: pointer;
}

.cd-calendar__nav-btn:hover {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 45%, transparent);
}

.cd-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cd-calendar__weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-text-dim);
  padding: 4px 0;
}

.cd-calendar__day {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text-secondary);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
}

.cd-calendar__day:hover:not(:disabled):not(.is-outside) {
  border-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
  color: var(--cd-accent);
}

.cd-calendar__day.is-outside {
  color: var(--cd-text-dim);
  opacity: 0.45;
}

.cd-calendar__day.is-today {
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

.cd-calendar__day.is-selected {
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  color: var(--cd-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-calendar__day:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Date picker shell */
.cd-date-picker {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 280px;
}

.cd-date-picker__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.cd-date-picker.is-open > .cd-date-picker__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Component: Carousel */
/* ── Carousel ──────────────────────────────────────────────────────────────── */

.cd-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family: var(--cd-font-mono);
}

.cd-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.cd-carousel__track {
  display: flex;
  transition: transform 0.28s ease;
}

.cd-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px;
  box-sizing: border-box;
}

.cd-carousel__slide-inner {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 22%, transparent);
  color: var(--cd-text);
  padding: 20px;
}

.cd-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.cd-carousel__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex: 1;
}

.cd-carousel__dot {
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--cd-accent) 40%, transparent);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.cd-carousel__dot.is-active {
  background: var(--cd-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cd-carousel__track { transition: none; }
}

/* Component: Menubar / Nav / Context Menu / Sidebar */
/* ── Menubar / Navigation Menu / Context Menu / Sidebar ────────────────────── */

.cd-menubar {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--cd-border);
  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
  font-family: var(--cd-font-mono);
}

.cd-menubar__item {
  position: relative;
}

.cd-menubar__trigger {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.cd-menubar__trigger:hover,
.cd-menubar__item.is-open > .cd-menubar__trigger {
  color: var(--cd-accent);
  background: var(--cd-accent-subtle);
}

.cd-menubar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  min-width: 160px;
  padding: 4px 0;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.cd-menubar__item.is-open > .cd-menubar__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cd-menubar__action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--cd-text-secondary);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  text-align: left;
  cursor: pointer;
}

.cd-menubar__action:hover {
  background: var(--cd-accent-subtle);
  color: var(--cd-accent);
}

/* Navigation menu (horizontal links) */
.cd-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cd-font-mono);
}

.cd-nav-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  color: var(--cd-text-muted);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}

.cd-nav-menu__link:hover,
.cd-nav-menu__link.is-active {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 30%, transparent);
  background: var(--cd-accent-subtle);
}

/* Context menu */
.cd-context-menu {
  position: fixed;
  z-index: 1100;
  min-width: 180px;
  padding: 4px 0;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
  font-family: var(--cd-font-mono);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px color-mix(in srgb, var(--cd-accent) 15%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.cd-context-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.cd-context-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--cd-text-secondary);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  text-align: left;
  cursor: pointer;
}

.cd-context-menu__item:hover:not(:disabled) {
  background: var(--cd-accent-subtle);
  color: var(--cd-accent);
}

.cd-context-menu__item--danger:hover:not(:disabled) {
  background: rgba(255, 69, 108, 0.1);
  color: var(--cd-neon-red);
}

.cd-context-menu__item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cd-context-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--cd-border-dim);
}

.cd-context-menu__kbd {
  margin-left: auto;
  font-size: var(--cd-text-xs);
  color: var(--cd-text-dim);
}

/* Sidebar layout */
.cd-sidebar-layout {
  display: flex;
  width: 100%;
  min-height: 280px;
  border: 1px solid var(--cd-border);
  background: var(--cd-bg);
  font-family: var(--cd-font-mono);
  overflow: hidden;
}

.cd-sidebar {
  flex: 0 0 auto;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--cd-bg-panel);
  border-right: 1px solid var(--cd-border);
  transition: width 0.18s ease, opacity 0.15s ease;
}

.cd-sidebar--collapsed {
  width: 52px;
}

.cd-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--cd-border-dim);
  min-height: 48px;
}

.cd-sidebar__title {
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cd-accent);
  white-space: nowrap;
  overflow: hidden;
}

.cd-sidebar--collapsed .cd-sidebar__title {
  display: none;
}

.cd-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  flex: 1;
  overflow: auto;
}

.cd-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.cd-sidebar__link:hover,
.cd-sidebar__link.is-active {
  color: var(--cd-accent);
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 22%, transparent);
}

.cd-sidebar__link-icon {
  flex-shrink: 0;
  width: 1.25em;
  text-align: center;
}

.cd-sidebar--collapsed .cd-sidebar__link-label {
  display: none;
}

.cd-sidebar__main {
  flex: 1;
  min-width: 0;
  padding: 16px;
  overflow: auto;
  color: var(--cd-text);
}

@media (prefers-reduced-motion: reduce) {
  .cd-sidebar { transition: none; }
}

/* Component: Input OTP */
/* ── Input OTP ─────────────────────────────────────────────────────────────── */

.cd-input-otp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cd-font-mono);
}

.cd-input-otp__slot {
  width: 36px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cd-border);
  background: rgba(5, 6, 10, 0.82);
  color: var(--cd-text);
  font-size: var(--cd-text-lg);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  caret-color: var(--cd-accent);
}

.cd-input-otp__slot:focus {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
}

.cd-input-otp__slot.is-filled {
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
  color: var(--cd-accent);
}

.cd-input-otp__slot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cd-input-otp__sep {
  color: var(--cd-text-dim);
  font-weight: 700;
}

.cd-input-otp--sm .cd-input-otp__slot {
  width: 28px;
  height: 32px;
  font-size: var(--cd-text-base);
}

/* Component: Typography */
/* ── Typography primitives ─────────────────────────────────────────────────── */

.cd-typography {
  font-family: var(--cd-font-mono);
  color: var(--cd-text);
}

.cd-h1,
.cd-h2,
.cd-h3,
.cd-h4 {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-text);
  line-height: 1.25;
}

.cd-h1 {
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  color: var(--cd-accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-h2 {
  font-size: 1.35rem;
  color: var(--cd-accent);
}

.cd-h3 {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.cd-h4 {
  font-size: var(--cd-text-md);
  letter-spacing: 0.12em;
  color: var(--cd-text-secondary);
}

.cd-p {
  margin: 0;
  font-size: var(--cd-text-base);
  line-height: 1.65;
  color: var(--cd-text-secondary);
}

.cd-lead {
  margin: 0;
  font-size: var(--cd-text-md);
  line-height: 1.6;
  color: var(--cd-text);
}

.cd-muted {
  margin: 0;
  font-size: var(--cd-text-sm);
  color: var(--cd-text-muted);
  line-height: 1.5;
}

.cd-small {
  font-size: var(--cd-text-xs);
  color: var(--cd-text-dim);
  letter-spacing: 0.06em;
}

.cd-code {
  font-family: var(--cd-font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--cd-bg) 80%, transparent);
  border: 1px solid var(--cd-border-dim);
  color: var(--cd-accent);
}

.cd-pre {
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  background: rgba(5, 6, 10, 0.9);
  border: 1px solid var(--cd-border);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  line-height: 1.55;
  color: var(--cd-text-secondary);
}

.cd-blockquote {
  margin: 0;
  padding: 8px 14px;
  border-left: 2px solid var(--cd-accent);
  color: var(--cd-text-muted);
  font-style: italic;
  font-size: var(--cd-text-sm);
  line-height: 1.55;
}

.cd-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--cd-text-secondary);
  font-size: var(--cd-text-sm);
  line-height: 1.65;
}

.cd-list li::marker {
  color: var(--cd-accent);
}

.cd-inline-link {
  color: var(--cd-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
}

.cd-inline-link:hover {
  border-bottom-color: var(--cd-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

/* Component: Toaster viewport */
/* ── Toast viewport / Sonner-style stack ───────────────────────────────────── */

.cd-toaster {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(100vw - 24px, 380px);
  width: 100%;
  pointer-events: none;
}

.cd-toaster--top-right {
  top: 16px;
  right: 16px;
}

.cd-toaster--top-left {
  top: 16px;
  left: 16px;
}

.cd-toaster--bottom-right {
  bottom: 16px;
  right: 16px;
}

.cd-toaster--bottom-left {
  bottom: 16px;
  left: 16px;
}

.cd-toaster--top-center {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.cd-toaster--bottom-center {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.cd-toaster > * {
  pointer-events: auto;
}

/* Component: App patterns */
/* ── App patterns (dashboard + AI-shell app inspiration) ───────────────────────── */

/* Section header — dashboard app "▸ METRICS / INTEL FEED" rows */
.cd-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 50%, transparent);
  font-family: var(--cd-font-mono);
  user-select: none;
}

.cd-section-header__caret {
  color: var(--cd-accent);
  font-size: var(--cd-text-xs);
  line-height: 1;
  flex-shrink: 0;
}

.cd-section-header__title {
  margin: 0;
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cd-text);
}

.cd-section-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Chip / filter toggle — dashboard app NEAR / TOP / category filters */
.cd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--cd-border-dim);
  background: transparent;
  color: var(--cd-text-dim);
  font-family: var(--cd-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.cd-chip:hover:not(:disabled) {
  color: var(--cd-text-muted);
  border-color: var(--cd-border);
}

.cd-chip[data-active='true'],
.cd-chip.is-active {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
  background: color-mix(in srgb, var(--cd-accent) 10%, transparent);
}

.cd-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cd-chip--sm {
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
}

.cd-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Status / live dot — dashboard app SYS.ACTIVE, AI-shell app Live */
.cd-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cd-text-muted);
}

.cd-status-dot__orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cd-text-dim);
  flex-shrink: 0;
}

.cd-status-dot--live .cd-status-dot__orb,
.cd-status-dot--success .cd-status-dot__orb {
  background: var(--cd-neon-green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-neon-green) 50%, transparent);
  animation: cd-status-pulse 2s ease-in-out infinite;
}

.cd-status-dot--live {
  color: var(--cd-neon-green);
}

.cd-status-dot--warn .cd-status-dot__orb {
  background: var(--cd-neon-amber);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-neon-amber) 45%, transparent);
}

.cd-status-dot--warn {
  color: var(--cd-neon-amber);
}

.cd-status-dot--danger .cd-status-dot__orb {
  background: var(--cd-neon-red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-neon-red) 45%, transparent);
  animation: cd-status-pulse 1.2s ease-in-out infinite;
}

.cd-status-dot--danger {
  color: var(--cd-neon-red);
}

.cd-status-dot--paused .cd-status-dot__orb {
  background: var(--cd-text-muted);
  border-radius: 1px;
  width: 7px;
  height: 7px;
  animation: none;
}

@keyframes cd-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-status-dot__orb { animation: none !important; }
}

/* Status pill — situation DEVELOPING / ACTIVE / RESOLVED */
.cd-status-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--cd-border);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-text-muted);
  background: transparent;
}

.cd-status-pill--active {
  border-color: color-mix(in srgb, var(--cd-neon-red) 60%, transparent);
  color: var(--cd-neon-red);
  animation: cd-status-pulse 2s ease-in-out infinite;
}

.cd-status-pill--developing {
  border-color: color-mix(in srgb, var(--cd-neon-amber) 60%, transparent);
  color: var(--cd-neon-amber);
}

.cd-status-pill--resolved,
.cd-status-pill--success {
  border-color: color-mix(in srgb, var(--cd-neon-green) 60%, transparent);
  color: var(--cd-neon-green);
}

.cd-status-pill--critical {
  border-color: color-mix(in srgb, var(--cd-neon-red) 70%, transparent);
  color: var(--cd-neon-red);
  background: color-mix(in srgb, var(--cd-neon-red) 8%, transparent);
}

.cd-status-pill--muted {
  border-color: var(--cd-border-dim);
  color: var(--cd-text-dim);
}

/* Feed item — dashboard app intel feed row */
.cd-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-feed-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 70%, transparent);
  font-family: var(--cd-font-mono);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  color: inherit;
}

.cd-feed-item:hover {
  border-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel-hover) 70%, transparent);
}

.cd-feed-item.is-selected,
.cd-feed-item[data-active='true'] {
  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--cd-accent) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 8%, transparent);
}

.cd-feed-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cd-feed-item__title {
  font-size: var(--cd-text-sm);
  font-weight: 700;
  color: var(--cd-text);
  line-height: 1.35;
}

.cd-feed-item__subtitle {
  font-size: var(--cd-text-xs);
  color: var(--cd-text-muted);
  line-height: 1.4;
}

.cd-feed-item__time {
  margin-left: auto;
  font-size: 9px;
  color: var(--cd-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Bottom nav — dashboard app mobile tab bar */
.cd-bottom-nav {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 95%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--cd-font-mono);
}

.cd-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--cd-text-dim);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color 0.12s ease;
}

.cd-bottom-nav__item:hover {
  color: var(--cd-text-muted);
}

.cd-bottom-nav__item.is-active,
.cd-bottom-nav__item[data-active='true'] {
  color: var(--cd-accent);
}

.cd-bottom-nav__item.is-active::before,
.cd-bottom-nav__item[data-active='true']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--cd-accent);
}

.cd-bottom-nav__icon {
  font-size: 14px;
  line-height: 1;
}

.cd-bottom-nav__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cd-bottom-nav__badge {
  position: absolute;
  top: 4px;
  right: 22%;
  font-size: 8px;
  color: var(--cd-accent);
  font-variant-numeric: tabular-nums;
}

/* Status bar — AI-shell app footer strip */
.cd-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  padding: 0 12px;
  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel) 90%, transparent);
  font-family: var(--cd-font-mono);
  font-size: 9px;
  color: var(--cd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cd-status-bar__message {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-status-bar__message::before {
  content: '> ';
  color: var(--cd-accent);
  text-shadow: 0 0 4px color-mix(in srgb, var(--cd-accent) 50%, transparent);
}

.cd-status-bar__message--cursor::after {
  content: '▊';
  margin-left: 3px;
  color: var(--cd-accent);
  opacity: 0.75;
  animation: cd-cursor-blink 1.2s steps(1) infinite;
}

@keyframes cd-cursor-blink {
  0%, 49% { opacity: 0.75; }
  50%, 100% { opacity: 0; }
}

.cd-status-bar__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Chat — AI-shell app panel primitives */
.cd-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  font-family: var(--cd-font-mono);
  position: relative;
}

.cd-chat::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--cd-accent-secondary) 5%, transparent), transparent 26%);
  opacity: 0.7;
}

.cd-chat__messages {
  flex: 1;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
  min-height: 120px;
}

.cd-chat-msg {
  max-width: 92%;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.cd-chat-msg--user {
  align-self: flex-end;
  background: var(--cd-accent);
  color: #05060a;
  font-weight: 600;
  box-shadow:
    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 30%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-chat-msg--assistant {
  align-self: flex-start;
  background: rgba(11, 15, 24, 0.82);
  color: var(--cd-text);
  border: 1px solid var(--cd-border);
  border-left: 2px solid var(--cd-accent);
}

.cd-chat-msg--system {
  align-self: center;
  color: var(--cd-text-dim);
  font-size: 10px;
  padding: 2px 8px;
  max-width: 100%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cd-chat-msg--error {
  align-self: flex-start;
  border-left: 2px solid var(--cd-neon-red);
  background: rgba(11, 15, 24, 0.82);
  color: var(--cd-text);
  border: 1px solid var(--cd-border);
  border-left-color: var(--cd-neon-red);
}

.cd-chat__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
  position: relative;
  z-index: 2;
}

.cd-chat__composer {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 15%, transparent);
  position: relative;
  z-index: 2;
}

.cd-chat__composer .cd-input,
.cd-chat__composer .cd-textarea {
  flex: 1;
  min-width: 0;
}

/* Horizontal bar row — dashboard app category breakdown */
.cd-hbar-row {
  display: grid;
  grid-template-columns: minmax(48px, 80px) 1fr auto;
  align-items: center;
  gap: 8px;
  font-family: var(--cd-font-mono);
  font-size: 10px;
}

.cd-hbar-row__label {
  color: var(--cd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-hbar-row__track {
  height: 6px;
  background: var(--cd-bg-panel-hover);
  border: 1px solid var(--cd-border-dim);
  overflow: hidden;
}

.cd-hbar-row__fill {
  height: 100%;
  background: var(--cd-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 35%, transparent);
  transition: width 0.25s ease;
}

.cd-hbar-row__value {
  color: var(--cd-text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}

/* Transport strip — AI-shell app play/stop group shell */
.cd-transport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cd-font-mono);
}

.cd-transport__group {
  display: inline-flex;
  align-items: stretch;
}

.cd-transport__group > .cd-btn:not(:first-child) {
  margin-left: -1px;
}

/* Clock readout — dashboard app header clock */
.cd-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--cd-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cd-text-muted);
  font-size: var(--cd-text-xs);
}

.cd-clock__time {
  color: var(--cd-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cd-clock__date {
  color: var(--cd-text-dim);
}

/* ── Chat message rows + hover actions (AI chat layout) ────────────────────── */

.cd-chat-row {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 94%;
  gap: 4px;
}

.cd-chat-row--user {
  align-self: flex-end;
  align-items: flex-end;
}

.cd-chat-row--assistant,
.cd-chat-row--error {
  align-self: flex-start;
  align-items: flex-start;
}

.cd-chat-row--system {
  align-self: center;
  align-items: center;
  max-width: 100%;
}

.cd-chat-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-text-dim);
  padding: 0 2px;
}

.cd-chat-row__meta-right {
  margin-left: auto;
}

/* Hover action toolbar — appears on message hover/focus-within */
.cd-chat-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  background: var(--cd-bg-panel);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 0 12px color-mix(in srgb, var(--cd-accent) 12%, transparent);
  padding: 2px;
  z-index: 5;
}

.cd-chat-row:hover .cd-chat-actions,
.cd-chat-row:focus-within .cd-chat-actions,
.cd-chat-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cd-chat-actions--overlay {
  position: absolute;
  top: -12px;
  right: 0;
}

.cd-chat-row--user .cd-chat-actions--overlay {
  right: 0;
  left: auto;
}

.cd-chat-actions--below {
  margin-top: 2px;
}

.cd-chat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text-muted);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s ease, border-color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}

.cd-chat-action:hover:not(:disabled) {
  color: var(--cd-accent);
  border-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
  background: var(--cd-accent-subtle);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-chat-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cd-chat-action.is-active {
  color: var(--cd-accent);
  background: var(--cd-accent-subtle);
  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

.cd-chat-action--danger:hover:not(:disabled) {
  color: var(--cd-neon-red);
  border-color: color-mix(in srgb, var(--cd-neon-red) 40%, transparent);
  background: color-mix(in srgb, var(--cd-neon-red) 10%, transparent);
  box-shadow: none;
}

.cd-chat-action__icon {
  font-size: 11px;
  line-height: 1;
}

.cd-chat-action__label {
  font-size: 9px;
}

/* Code block inside assistant messages */
.cd-chat-code {
  position: relative;
  margin: 6px 0 0;
  background: rgba(5, 6, 10, 0.92);
  border: 1px solid var(--cd-border);
  border-left: 2px solid color-mix(in srgb, var(--cd-accent) 55%, transparent);
  overflow: hidden;
}

.cd-chat-code__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 70%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cd-text-dim);
}

.cd-chat-code__header-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.cd-chat-code:hover .cd-chat-code__header-actions,
.cd-chat-code:focus-within .cd-chat-code__header-actions {
  opacity: 1;
}

.cd-chat-code pre {
  margin: 0;
  padding: 10px;
  overflow: auto;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--cd-text-secondary);
  white-space: pre;
}

.cd-chat-code code {
  font-family: inherit;
  color: var(--cd-accent);
}

/* Typing / streaming indicator */
.cd-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-accent);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
}

.cd-chat-typing__dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--cd-accent);
  animation: cd-chat-dot 1.2s ease-in-out infinite;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cd-accent) 40%, transparent);
}

.cd-chat-typing__dots span:nth-child(2) { animation-delay: 0.15s; }
.cd-chat-typing__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cd-chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Composer with tools row */
.cd-chat__composer-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 15%, transparent);
  background: color-mix(in srgb, var(--cd-bg) 55%, transparent);
  position: relative;
  z-index: 2;
}

.cd-chat__composer-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 0;
  flex-wrap: wrap;
}

.cd-chat__composer-tools .cd-chat-action {
  height: 22px;
  min-width: 22px;
  opacity: 0.75;
}

.cd-chat__composer-tools .cd-chat-action:hover {
  opacity: 1;
}

.cd-chat .cd-chat__composer {
  border-top: none;
}

/* Full AI workspace layout */
.cd-ai-layout {
  display: flex;
  width: 100%;
  min-height: 480px;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--cd-accent) 22%, transparent);
  background: var(--cd-bg);
  font-family: var(--cd-font-mono);
  overflow: hidden;
}

.cd-ai-layout__chat {
  flex: 0 0 340px;
  width: 340px;
  min-width: 280px;
  max-width: 420px;
  border-right: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cd-ai-layout__chat .cd-chat {
  border: none;
  height: 100%;
}

.cd-ai-layout__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cd-ai-layout__editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cd-bg-panel) 40%, transparent);
}

.cd-ai-layout__editor-body {
  flex: 1;
  overflow: auto;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cd-text-secondary);
  white-space: pre-wrap;
}

.cd-ai-layout__editor-body .tok-fn { color: var(--cd-accent); }
.cd-ai-layout__editor-body .tok-str { color: var(--cd-neon-green); }
.cd-ai-layout__editor-body .tok-cm { color: var(--cd-text-dim); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .cd-chat-actions { transition: none; }
  .cd-chat-typing__dots span { animation: none; opacity: 0.7; }
}

/* Component: Spreadsheet (editable grid) */
/* ── Spreadsheet — editable cyber grid ─────────────────────────────────────── */

.cd-sheetgrid {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--cd-bg);
  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
  font-family: var(--cd-font-mono);
  color: var(--cd-text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent),
    0 0 24px color-mix(in srgb, var(--cd-accent) 8%, transparent);
  outline: none;
}

.cd-sheetgrid:focus-visible {
  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 20%, transparent),
    0 0 20px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

/* Formula / address bar */
.cd-sheetgrid__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 22%, transparent);
  background: color-mix(in srgb, var(--cd-bg-panel) 85%, transparent);
}

.cd-sheetgrid__addr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 10px;
  border-right: 1px solid var(--cd-border-dim);
  font-size: var(--cd-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cd-accent);
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}

.cd-sheetgrid__fx-label {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--cd-border-dim);
  font-size: 11px;
  font-weight: 700;
  color: var(--cd-text-dim);
  user-select: none;
}

.cd-sheetgrid__fx-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  padding: 0 10px;
  outline: none;
}

.cd-sheetgrid__fx-input:focus {
  background: color-mix(in srgb, var(--cd-accent) 6%, transparent);
}

.cd-sheetgrid__fx-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollable grid body */
.cd-sheetgrid__viewport {
  overflow: auto;
  max-height: var(--cd-sheetgrid-max-height, 420px);
  position: relative;
}

.cd-sheetgrid__table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

/* Corner + headers */
.cd-sheetgrid__corner,
.cd-sheetgrid__col-head,
.cd-sheetgrid__row-head {
  position: sticky;
  z-index: 2;
  background: color-mix(in srgb, var(--cd-bg-panel) 96%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-text-dim);
  user-select: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 20%, transparent);
  border-right: 1px solid var(--cd-border-dim);
}

.cd-sheetgrid__corner {
  left: 0;
  top: 0;
  z-index: 4;
  width: 40px;
  min-width: 40px;
  height: 28px;
  background: color-mix(in srgb, var(--cd-bg-panel) 98%, var(--cd-accent) 2%);
}

.cd-sheetgrid__col-head {
  top: 0;
  z-index: 3;
  height: 28px;
  width: var(--cd-sheetgrid-col-width, 96px);
  min-width: var(--cd-sheetgrid-col-width, 96px);
  text-align: center;
  color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 5%, var(--cd-bg-panel));
}

.cd-sheetgrid__col-head.is-active {
  color: var(--cd-accent-bright, var(--cd-accent));
  background: color-mix(in srgb, var(--cd-accent) 12%, var(--cd-bg-panel));
  box-shadow: inset 0 -2px 0 var(--cd-accent);
}

.cd-sheetgrid__row-head {
  left: 0;
  z-index: 3;
  width: 40px;
  min-width: 40px;
  text-align: center;
  padding: 0 4px;
  color: var(--cd-text-muted);
  border-bottom: 1px solid var(--cd-border-dim);
}

.cd-sheetgrid__row-head.is-active {
  color: var(--cd-accent);
  background: color-mix(in srgb, var(--cd-accent) 10%, var(--cd-bg-panel));
  box-shadow: inset -2px 0 0 var(--cd-accent);
}

/* Cells */
.cd-sheetgrid__cell {
  position: relative;
  width: var(--cd-sheetgrid-col-width, 96px);
  min-width: var(--cd-sheetgrid-col-width, 96px);
  height: 28px;
  max-width: var(--cd-sheetgrid-col-width, 96px);
  padding: 0;
  border-right: 1px solid var(--cd-border-dim);
  border-bottom: 1px solid var(--cd-border-dim);
  background: rgba(5, 6, 10, 0.55);
  vertical-align: middle;
  cursor: cell;
}

.cd-sheetgrid__cell-display {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 28px;
  font-size: var(--cd-text-sm);
  color: var(--cd-text-secondary);
  pointer-events: none;
}

.cd-sheetgrid__cell--number .cd-sheetgrid__cell-display {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--cd-accent);
}

.cd-sheetgrid__cell--formula .cd-sheetgrid__cell-display {
  color: var(--cd-neon-cyan, var(--cd-cyan, #47f6ff));
}

.cd-sheetgrid__cell--error .cd-sheetgrid__cell-display {
  color: var(--cd-neon-red);
}

/* Selection states */
.cd-sheetgrid__cell.is-active {
  z-index: 1;
  outline: 2px solid var(--cd-accent);
  outline-offset: -2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cd-accent) 30%, transparent),
    0 0 12px color-mix(in srgb, var(--cd-accent) 25%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--cd-accent) 8%, transparent);
  background: color-mix(in srgb, var(--cd-accent) 8%, rgba(5, 6, 10, 0.7));
}

.cd-sheetgrid__cell.is-active .cd-sheetgrid__cell-display {
  color: var(--cd-text);
}

.cd-sheetgrid__cell.is-selected:not(.is-active) {
  background: color-mix(in srgb, var(--cd-accent) 14%, rgba(5, 6, 10, 0.6));
}

.cd-sheetgrid__cell.is-selected:not(.is-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
  pointer-events: none;
}

/* Editing */
.cd-sheetgrid__cell.is-editing {
  outline: 2px solid var(--cd-accent-bright, var(--cd-accent));
  outline-offset: -2px;
  background: rgba(5, 6, 10, 0.95);
  z-index: 2;
  box-shadow: 0 0 16px color-mix(in srgb, var(--cd-accent) 30%, transparent);
}

.cd-sheetgrid__cell-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0 8px;
  background: transparent;
  color: var(--cd-text);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-sm);
  outline: none;
  box-sizing: border-box;
}

.cd-sheetgrid__cell-input--number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Compact density */
.cd-sheetgrid--compact .cd-sheetgrid__corner,
.cd-sheetgrid--compact .cd-sheetgrid__col-head {
  height: 24px;
}

.cd-sheetgrid--compact .cd-sheetgrid__cell {
  height: 24px;
}

.cd-sheetgrid--compact .cd-sheetgrid__cell-display {
  line-height: 24px;
  font-size: var(--cd-text-xs);
  padding: 0 6px;
}

.cd-sheetgrid--compact .cd-sheetgrid__cell-input {
  font-size: var(--cd-text-xs);
  padding: 0 6px;
}

/* Read-only dim */
.cd-sheetgrid--readonly .cd-sheetgrid__cell {
  cursor: default;
}

.cd-sheetgrid--readonly .cd-sheetgrid__fx-input {
  cursor: default;
}

/* Status strip under grid */
.cd-sheetgrid__status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  padding: 0 10px;
  border-top: 1px solid var(--cd-border-dim);
  background: color-mix(in srgb, var(--cd-bg-panel) 70%, transparent);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-text-dim);
}

.cd-sheetgrid__status strong {
  color: var(--cd-accent);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .cd-sheetgrid__cell.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 40%, transparent);
  }
}

/* Accessibility layer (opt-in via .cd-a11y) */
/* ── Accessibility layer (opt-in) ──────────────────────────────────────────
   Add the class `cd-a11y` to any container you want bumped for readability.
   It overrides three things, and ONLY inside `.cd-a11y` — defaults are untouched:
     1. Type scale  — captions/body cross the 12px floor (was 10–12px).
     2. Muted text  — low-contrast greys lifted toward AAA (defaults already AA).
     3. Body glow   — text-shadow on small/running text dampened, NOT removed.
   The art stays: neon hues, uppercase, pixel corners, and the big glowing
   stat/gauge/HUD readouts are left alone. */

.cd-a11y {
  /* 1 ── Type scale — same ratios, shifted up ~+2px so nothing sits below 12px */
  --cd-text-xs:   0.75rem;    /* 10px → 12px */
  --cd-text-sm:   0.8125rem;  /* 11px → 13px */
  --cd-text-base: 0.875rem;   /* 12px → 14px */
  --cd-text-md:   0.9375rem;  /* 13px → 15px */
  --cd-text-lg:   1rem;       /* 14px → 16px */

  /* 2 ── Muted text lifted toward AAA on --cd-bg, keeping the warm/cool tone */
  --cd-text-muted:     #b3aaa0;
  --cd-text-muted-alt: #9aa6bd;
  --cd-text-dim:       #968d84;
  --cd-text-secondary: #b6c3dd;
}

/* 3 ── Dampen glow on running / small text (keep it, just stop the smear).
        currentColor keeps each glow on its own hue. */
.cd-a11y .cd-text-glow,
.cd-a11y .text-glow-orange,
.cd-a11y .text-glow-amber,
.cd-a11y .text-glow-magenta,
.cd-a11y .text-glow-green,
.cd-a11y .text-glow-red,
.cd-a11y .text-glow-cyan,
.cd-a11y .text-glow-blue {
  text-shadow: 0 0 3px color-mix(in srgb, currentColor 32%, transparent);
}

/* Interactive running text: tabs, breadcrumbs, terminal lines — soften only */
.cd-a11y .cd-tabs__trigger:focus-visible,
.cd-a11y .cd-tabs__trigger.is-active,
.cd-a11y .cd-breadcrumb__link:hover,
.cd-a11y .cd-breadcrumb__link:focus-visible {
  text-shadow: 0 0 3px var(--cd-accent-glow);
}
.cd-a11y .cd-terminal__line--error {
  text-shadow: 0 0 2px rgba(255, 69, 108, 0.4);
}

/* Note: .cd-stat__value, gauge centre readouts, HUD values and the glitch
   logo are intentionally left glowing — they're display type, not content. */

/* Stronger, always-on focus ring — an offset halo so it reads against busy
   neon borders without relying on colour alone. */
.cd-a11y :focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-accent) 22%, transparent);
}

/* Respect users who ask for less motion: kill the glitch/scan loops inside
   the a11y scope as a belt-and-braces over the components' own guards. */
@media (prefers-reduced-motion: reduce) {
  .cd-a11y .cd-glitch-text,
  .cd-a11y [class*="cd-logo-glitch"] {
    animation: none !important;
  }
}