/* ═══════════════════════════════════════════════════════════════════════════
   TackIT Board Themes  ·  /css/themes.css
   Applied via body.theme-{name} when the board loads (app.js).
   DEFAULT theme = no overrides (base style.css is the default canvas).
   Pro/Enterprise only: synthwave, cyberpunk, corporate.
═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   THEME PICKER UI  (setup page)
════════════════════════════════════════════════ */

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .theme-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Individual theme card ───────────────────── */
.theme-card {
  position: relative;
  background: none;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.theme-card:hover            { border-color: #9ca3af; }
.theme-card.active           { border-color: #E83F3F; box-shadow: 0 0 0 3px rgba(232,63,63,0.15); }
.theme-card.active::after    {
  content: "✓";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #E83F3F;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.theme-card.theme-locked { cursor: default; }
.theme-card.theme-locked:hover { border-color: #e5e7eb; }
.theme-card.theme-locked .theme-preview { opacity: 0.55; filter: grayscale(0.3); }

/* Lock overlay on non-default cards for free tier */
.theme-card-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
  font-size: 18px;
  pointer-events: none;
  border-radius: 8px;
}

/* ── Mini preview canvas ─────────────────────── */
.theme-preview {
  width: 100%;
  height: 76px;
  position: relative;
  overflow: hidden;
}

.tp-toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
  z-index: 2;
}
.tp-tabbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  z-index: 2;
}
.tp-canvas {
  position: absolute;
  inset: 12px 0 8px;
  z-index: 1;
}
.tp-tack {
  position: absolute;
  width: 22px; height: 18px;
  border-radius: 3px;
}
.tp-tack-1 { top: 8px;  left: 6px; }
.tp-tack-2 { top: 8px;  left: 34px; }
.tp-tack-3 { top: 26px; left: 20px; }

/* ── Default preview ─────────────────────────── */
.theme-prev-default .tp-toolbar  { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.theme-prev-default .tp-tabbar   { background: #13132a; }
.theme-prev-default .tp-canvas   {
  background: #f0ece8;
  background-image: radial-gradient(circle, #d9d4cf 1px, transparent 1px);
  background-size: 8px 8px;
}
.theme-prev-default .tp-tack-1   { background: #fef9c3; }
.theme-prev-default .tp-tack-2   { background: #ffe4e6; }
.theme-prev-default .tp-tack-3   { background: #dbeafe; }

/* ── Synthwave preview ───────────────────────── */
.theme-prev-synthwave .tp-toolbar {
  background: #1a003a;
  border-bottom: 2px solid #ff006e;
  box-shadow: 0 2px 8px rgba(255,0,110,0.5);
}
.theme-prev-synthwave .tp-tabbar  {
  background: #0d0015;
  border-top: 2px solid #ff006e;
}
.theme-prev-synthwave .tp-canvas  {
  background: #0d0015;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(255,0,110,0.2) 9px, rgba(255,0,110,0.2) 10px),
    repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(255,0,110,0.2) 9px, rgba(255,0,110,0.2) 10px);
}
.theme-prev-synthwave .tp-tack-1  { background: #ffd60a; box-shadow: 0 0 5px #ffd60a; }
.theme-prev-synthwave .tp-tack-2  { background: #ff006e; box-shadow: 0 0 5px #ff006e; }
.theme-prev-synthwave .tp-tack-3  { background: #00f5ff; box-shadow: 0 0 5px #00f5ff; }

/* ── Cyberpunk preview ───────────────────────── */
.theme-prev-cyberpunk .tp-toolbar {
  background: #080810;
  border-bottom: 1px solid #00fff5;
  box-shadow: 0 1px 6px rgba(0,255,245,0.3);
}
.theme-prev-cyberpunk .tp-tabbar  {
  background: #050508;
  border-top: 1px solid #00fff5;
}
.theme-prev-cyberpunk .tp-canvas  {
  background: #0a0a0f;
  background-image:
    repeating-linear-gradient(60deg, transparent, transparent 9px, rgba(0,255,245,0.06) 9px, rgba(0,255,245,0.06) 10px),
    repeating-linear-gradient(-60deg, transparent, transparent 9px, rgba(0,255,245,0.06) 9px, rgba(0,255,245,0.06) 10px);
}
.theme-prev-cyberpunk .tp-tack-1  { background: #131300; border: 1px solid #f5e642; }
.theme-prev-cyberpunk .tp-tack-2  { background: #00040a; border: 1px solid #00fff5; }
.theme-prev-cyberpunk .tp-tack-3  { background: #0a0004; border: 1px solid #ff2d78; }

/* ── Corporate preview ───────────────────────── */
.theme-prev-corporate .tp-toolbar {
  background: #ffffff;
  border-bottom: 1px solid #d1d5db;
}
.theme-prev-corporate .tp-tabbar  {
  background: #f3f4f6;
  border-top: 1px solid #d1d5db;
}
.theme-prev-corporate .tp-canvas  {
  background: #ffffff;
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 8px 8px;
}
.theme-prev-corporate .tp-tack-1  { background: #fff; border: 1px solid #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.theme-prev-corporate .tp-tack-2  { background: #fff; border: 1px solid #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.theme-prev-corporate .tp-tack-3  { background: #fff; border: 1px solid #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── Theme card footer ───────────────────────── */
.theme-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: #fff;
  border-top: 1px solid #f3f4f6;
}
.theme-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark card footers for dark themes */
.theme-prev-synthwave ~ .theme-card-footer,
.theme-prev-cyberpunk ~ .theme-card-footer {
  background: #0d0015;
  border-top-color: #2a1040;
}
.theme-prev-synthwave ~ .theme-card-footer .theme-card-name { color: #e2d9f3; }
.theme-prev-cyberpunk ~ .theme-card-footer .theme-card-name { color: #c0e8e8; }


/* ════════════════════════════════════════════════
   @KEYFRAMES  (all themes)
════════════════════════════════════════════════ */

@keyframes synth-bg-drift {
  0%   { background-color: #0d0015; }
  25%  { background-color: #0a001e; }
  60%  { background-color: #130028; }
  100% { background-color: #0d0015; }
}

@keyframes synth-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255,0,110,0.6), 0 0 28px rgba(123,47,255,0.3);
  }
  50% {
    box-shadow: 0 0 24px rgba(255,0,110,0.9), 0 0 50px rgba(123,47,255,0.6), 0 0 80px rgba(255,0,110,0.2);
  }
}

@keyframes synth-neon-flicker {
  0%, 94%, 96%, 98%, 100% { opacity: 1; }
  95%, 97%                { opacity: 0.85; }
}

@prefers-reduced-motion: reduce {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-synthwave .board              { animation: none !important; }
  body.theme-synthwave .btn-add            { animation: none !important; }
  body.theme-synthwave .board-watermark    { animation: none !important; }
}


/* ════════════════════════════════════════════════
   THEME: 80S SYNTHWAVE
   Outrun · Miami Vice · Tron · CRT monitor vibes.
   Go all out on the neon — this is the wow theme.
════════════════════════════════════════════════ */

/* ── Gate / join screen ──────────────────────── */
body.theme-synthwave #gate {
  background: linear-gradient(160deg, #0d0015 0%, #120025 60%, #0a001e 100%);
}
body.theme-synthwave .gate-card {
  background: #1a003a;
  border: 1px solid #ff006e;
  box-shadow: 0 0 40px rgba(255,0,110,0.3), 0 0 80px rgba(123,47,255,0.15);
}
body.theme-synthwave .gate-title { color: #e2d9f3; }
body.theme-synthwave .gate-sub   { color: #b899e0; }
body.theme-synthwave .gate-logo  {
  color: #ff006e;
  text-shadow: 0 0 12px #ff006e, 0 0 24px rgba(255,0,110,0.5);
  text-decoration: none;
  display: block;
}
body.theme-synthwave .field-group label { color: #c9a8f0; }
body.theme-synthwave .field-group input,
body.theme-synthwave .field-group select {
  background: #120025;
  border-color: #6a1099;
  color: #e2d9f3;
}
body.theme-synthwave .field-group input:focus {
  border-color: #ff006e;
  box-shadow: 0 0 0 3px rgba(255,0,110,0.2);
}

/* ── Board canvas ────────────────────────────── */
body.theme-synthwave .board {
  background-color: #0d0015;
  background-image:
    /* hot-pink horizontal grid lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 49px,
      rgba(255, 0, 110, 0.18) 49px,
      rgba(255, 0, 110, 0.18) 50px
    ),
    /* hot-pink vertical grid lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 49px,
      rgba(255, 0, 110, 0.18) 49px,
      rgba(255, 0, 110, 0.18) 50px
    );
  animation: synth-bg-drift 18s ease-in-out infinite;
}

/* CRT scanlines — overlaid on top of everything including tacks */
body.theme-synthwave .board::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 9000;
}

/* ── Tacks ───────────────────────────────────── */
body.theme-synthwave .note {
  border-radius: 4px;
  border-bottom: none;
  border-right: none;
}

body.theme-synthwave .note[data-color="yellow"] {
  background: #ffd60a;
  box-shadow: 0 0 10px #ffd60a, 0 0 22px rgba(255,214,10,0.5), 3px 5px 16px rgba(0,0,0,0.6);
}
body.theme-synthwave .note[data-color="pink"] {
  background: #ff006e;
  box-shadow: 0 0 10px #ff006e, 0 0 22px rgba(255,0,110,0.5), 3px 5px 16px rgba(0,0,0,0.6);
}
body.theme-synthwave .note[data-color="blue"] {
  background: #7b2fff;
  box-shadow: 0 0 10px #7b2fff, 0 0 22px rgba(123,47,255,0.5), 3px 5px 16px rgba(0,0,0,0.6);
}
body.theme-synthwave .note[data-color="green"] {
  background: #00f5ff;
  box-shadow: 0 0 10px #00f5ff, 0 0 22px rgba(0,245,255,0.5), 3px 5px 16px rgba(0,0,0,0.6);
}
body.theme-synthwave .note[data-color="mint"] {
  background: #ff6ec7;
  box-shadow: 0 0 10px #ff6ec7, 0 0 22px rgba(255,110,199,0.5), 3px 5px 16px rgba(0,0,0,0.6);
}

/* Neon glow intensifies on hover/drag */
body.theme-synthwave .note:hover {
  filter: brightness(1.12) saturate(1.1);
}
body.theme-synthwave .note:hover.note[data-color="yellow"] { box-shadow: 0 0 18px #ffd60a, 0 0 36px rgba(255,214,10,0.7), 4px 7px 20px rgba(0,0,0,0.7); }
body.theme-synthwave .note:hover.note[data-color="pink"]   { box-shadow: 0 0 18px #ff006e, 0 0 36px rgba(255,0,110,0.7),   4px 7px 20px rgba(0,0,0,0.7); }
body.theme-synthwave .note:hover.note[data-color="blue"]   { box-shadow: 0 0 18px #7b2fff, 0 0 36px rgba(123,47,255,0.7),  4px 7px 20px rgba(0,0,0,0.7); }
body.theme-synthwave .note:hover.note[data-color="green"]  { box-shadow: 0 0 18px #00f5ff, 0 0 36px rgba(0,245,255,0.7),   4px 7px 20px rgba(0,0,0,0.7); }
body.theme-synthwave .note:hover.note[data-color="mint"]   { box-shadow: 0 0 18px #ff6ec7, 0 0 36px rgba(255,110,199,0.7), 4px 7px 20px rgba(0,0,0,0.7); }

/* Note headers — dark translucent strip */
body.theme-synthwave .note[data-color="yellow"] .note-header,
body.theme-synthwave .note[data-color="pink"]   .note-header,
body.theme-synthwave .note[data-color="blue"]   .note-header,
body.theme-synthwave .note[data-color="green"]  .note-header,
body.theme-synthwave .note[data-color="mint"]   .note-header {
  background: rgba(0, 0, 0, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

/* Note text colour — dark on bright neon, white on deep purple */
body.theme-synthwave .note[data-color="yellow"] .note-text,
body.theme-synthwave .note[data-color="yellow"] .note-author,
body.theme-synthwave .note[data-color="yellow"] .note-drag-handle {
  color: #1a0030;
}
body.theme-synthwave .note[data-color="pink"] .note-text,
body.theme-synthwave .note[data-color="pink"] .note-author,
body.theme-synthwave .note[data-color="pink"] .note-drag-handle {
  color: #fff;
}
body.theme-synthwave .note[data-color="blue"] .note-text,
body.theme-synthwave .note[data-color="blue"] .note-author,
body.theme-synthwave .note[data-color="blue"] .note-drag-handle {
  color: #f0e6ff;
}
body.theme-synthwave .note[data-color="green"] .note-text,
body.theme-synthwave .note[data-color="green"] .note-author,
body.theme-synthwave .note[data-color="green"] .note-drag-handle {
  color: #001a1a;
}
body.theme-synthwave .note[data-color="mint"] .note-text,
body.theme-synthwave .note[data-color="mint"] .note-author,
body.theme-synthwave .note[data-color="mint"] .note-drag-handle {
  color: #1a0030;
}

/* ── Toolbar ─────────────────────────────────── */
body.theme-synthwave .toolbar {
  background: #1a003a;
  border-bottom: 2px solid #ff006e;
  /* Neon underglow */
  box-shadow:
    0 2px 16px rgba(255, 0, 110, 0.45),
    0 4px 40px rgba(255, 0, 110, 0.2),
    0 0  80px rgba(255, 0, 110, 0.08);
}

body.theme-synthwave .board-topic {
  color: #ff006e;
  text-shadow: 0 0 8px #ff006e, 0 0 16px rgba(255,0,110,0.4);
  animation: synth-neon-flicker 8s ease-in-out infinite;
}

body.theme-synthwave .toolbar-logo {
  filter: drop-shadow(0 0 6px #ff006e);
}

/* Toolbar buttons */
body.theme-synthwave .btn-leave {
  background: transparent;
  border-color: rgba(255,0,110,0.5);
  color: #ff6ec7;
}
body.theme-synthwave .btn-leave:hover {
  background: rgba(255,0,110,0.15);
  border-color: #ff006e;
  color: #ff006e;
  box-shadow: 0 0 10px rgba(255,0,110,0.3);
}
body.theme-synthwave .btn-host-sm {
  background: transparent;
  border-color: rgba(123,47,255,0.5);
  color: #c9a8f0;
}
body.theme-synthwave .btn-host-sm:hover {
  background: rgba(123,47,255,0.15);
  border-color: #7b2fff;
  color: #e2d9f3;
}

/* Add tack button — pulsing neon gradient */
body.theme-synthwave .btn-add {
  background: linear-gradient(135deg, #ff006e 0%, #7b2fff 100%);
  border: none;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,0,110,0.6), 0 0 28px rgba(123,47,255,0.3);
  animation: synth-btn-pulse 2.4s ease-in-out infinite;
}
body.theme-synthwave .btn-add:hover {
  background: linear-gradient(135deg, #ff2d8e 0%, #9b4fff 100%);
  box-shadow: 0 0 24px rgba(255,0,110,0.9), 0 0 50px rgba(123,47,255,0.6);
}

/* ── Tab bar (neon signs) ────────────────────── */
body.theme-synthwave .tab-bar {
  background: #0d0015;
  border-bottom: 2px solid #ff006e;
  box-shadow: 0 2px 20px rgba(255, 0, 110, 0.35), 0 4px 40px rgba(255, 0, 110, 0.15);
}

body.theme-synthwave .tab-pill {
  border-color: rgba(255, 0, 110, 0.45);
  color: #c06090;
  background: transparent;
  text-shadow: 0 0 6px rgba(255, 0, 110, 0.4);
}
body.theme-synthwave .tab-pill:hover {
  background: rgba(255, 0, 110, 0.12);
  border-color: #ff006e;
  color: #ff6ec7;
  text-shadow: 0 0 10px #ff006e;
  box-shadow: 0 0 14px rgba(255, 0, 110, 0.4);
}
body.theme-synthwave .tab-pill.active {
  background: transparent;
  border-color: #ff006e;
  color: #ff006e;
  text-shadow: 0 0 10px #ff006e, 0 0 20px #ff006e, 0 0 40px rgba(255,0,110,0.5);
  box-shadow: 0 0 16px rgba(255,0,110,0.5), inset 0 0 16px rgba(255,0,110,0.08);
}

/* ── Vote buttons ────────────────────────────── */
body.theme-synthwave .btn-vote {
  background: rgba(255, 214, 10, 0.1);
  border-color: rgba(255, 214, 10, 0.6);
  color: #ffd60a;
  text-shadow: 0 0 8px rgba(255, 214, 10, 0.8);
}
body.theme-synthwave .btn-vote:hover {
  background: rgba(255, 214, 10, 0.2);
  border-color: #ffd60a;
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.4);
}
body.theme-synthwave .btn-vote.voted {
  background: #ffd60a;
  border-color: #ffd60a;
  color: #0d0015;
  text-shadow: none;
  box-shadow: 0 0 10px #ffd60a, 0 0 22px rgba(255,214,10,0.5);
}

/* ── Watermark ───────────────────────────────── */
body.theme-synthwave .board-watermark {
  color: #ff006e;
  text-shadow:
    0 0 16px #ff006e,
    0 0 32px #ff006e,
    0 0 64px rgba(255, 0, 110, 0.5),
    0 0 96px rgba(255, 0, 110, 0.25);
  opacity: 0.55;
  animation: synth-neon-flicker 12s ease-in-out infinite;
}

/* ── Online presence ─────────────────────────── */
body.theme-synthwave .online-dot {
  color: #39ff14;
  text-shadow: 0 0 6px #39ff14, 0 0 12px rgba(57,255,20,0.6);
  filter: drop-shadow(0 0 4px #39ff14);
}
body.theme-synthwave .online-indicator {
  color: #39ff14;
  text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* ── Modal overlays ──────────────────────────── */
body.theme-synthwave .modal-overlay {
  background: rgba(13, 0, 21, 0.88);
}
body.theme-synthwave .modal {
  background: #1a003a;
  border: 1px solid #ff006e;
  box-shadow:
    0 0 30px rgba(255, 0, 110, 0.4),
    0 0 60px rgba(255, 0, 110, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.7);
}
body.theme-synthwave .modal-header h2 {
  color: #ff006e;
  text-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}
body.theme-synthwave .modal-x {
  color: #c06090;
  border-color: rgba(255,0,110,0.3);
  background: transparent;
}
body.theme-synthwave .modal-x:hover {
  background: rgba(255,0,110,0.15);
  color: #ff006e;
  box-shadow: 0 0 8px rgba(255,0,110,0.3);
}
body.theme-synthwave .modal-body { color: #d4b8e8; }
body.theme-synthwave .modal-body input,
body.theme-synthwave .modal-body select,
body.theme-synthwave .modal-body textarea {
  background: #120025;
  border-color: #6a1099;
  color: #e2d9f3;
}
body.theme-synthwave .modal-body input:focus,
body.theme-synthwave .modal-body textarea:focus {
  border-color: #ff006e;
  box-shadow: 0 0 0 3px rgba(255,0,110,0.2);
}
/* Primary button in modals */
body.theme-synthwave .btn-primary {
  background: linear-gradient(135deg, #ff006e, #7b2fff);
  border: none;
  box-shadow: 0 0 12px rgba(255,0,110,0.4);
}
body.theme-synthwave .btn-primary:hover {
  box-shadow: 0 0 20px rgba(255,0,110,0.6), 0 0 40px rgba(123,47,255,0.3);
}

/* ── Note text textarea ──────────────────────── */
body.theme-synthwave .note-text {
  font-family: 'Courier New', 'Courier', monospace;
  font-weight: 600;
  background: transparent;
}
body.theme-synthwave .note-text:focus {
  outline: none;
}

/* ── Insights panel / slide-out panels ───────── */
body.theme-synthwave .insights-panel {
  background: #1a003a;
  border-left: 2px solid #ff006e;
  box-shadow: -4px 0 30px rgba(255,0,110,0.2);
}
body.theme-synthwave .insights-title { color: #ff006e; text-shadow: 0 0 8px rgba(255,0,110,0.4); }
body.theme-synthwave .insights-close { color: #c06090; }


/* ════════════════════════════════════════════════
   THEME: CYBERPUNK
   Dark hex grid · cyan & yellow accents · glitch
════════════════════════════════════════════════ */

/* ── Board canvas ────────────────────────────── */
body.theme-cyberpunk .board {
  background-color: #0a0a0f;
  /* Hex-approximation grid: two sets of 60° lines */
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 19px,
      rgba(0, 255, 245, 0.05) 19px,
      rgba(0, 255, 245, 0.05) 20px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 19px,
      rgba(0, 255, 245, 0.05) 19px,
      rgba(0, 255, 245, 0.05) 20px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(0, 255, 245, 0.03) 19px,
      rgba(0, 255, 245, 0.03) 20px
    );
}

/* ── Gate screen ─────────────────────────────── */
body.theme-cyberpunk #gate {
  background: linear-gradient(160deg, #0a0a0f 0%, #060610 100%);
}
body.theme-cyberpunk .gate-card {
  background: #0d0d1a;
  border: 1px solid #00fff5;
  box-shadow: 0 0 30px rgba(0,255,245,0.2), 0 0 60px rgba(0,255,245,0.08);
}
body.theme-cyberpunk .gate-logo  {
  color: #00fff5;
  text-shadow: 0 0 10px #00fff5;
  text-decoration: none;
  display: block;
}
body.theme-cyberpunk .gate-title { color: #e0f8f8; }
body.theme-cyberpunk .field-group label { color: #80e8e8; }
body.theme-cyberpunk .field-group input {
  background: #070712;
  border-color: #00fff540;
  color: #e0f8f8;
}
body.theme-cyberpunk .field-group input:focus {
  border-color: #00fff5;
  box-shadow: 0 0 0 3px rgba(0,255,245,0.15);
}

/* ── Tacks ───────────────────────────────────── */
body.theme-cyberpunk .note {
  border-radius: 2px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.7);
}
body.theme-cyberpunk .note:hover {
  box-shadow: 2px 4px 12px rgba(0,0,0,0.7), 0 0 0 1px currentColor;
}

/* Dark base + accent border on each tack colour */
body.theme-cyberpunk .note[data-color="yellow"] {
  background: #0f0f00;
  border-left: 3px solid #f5e642;
}
body.theme-cyberpunk .note[data-color="pink"] {
  background: #100005;
  border-left: 3px solid #ff2d78;
}
body.theme-cyberpunk .note[data-color="blue"] {
  background: #00080f;
  border-left: 3px solid #00fff5;
}
body.theme-cyberpunk .note[data-color="green"] {
  background: #020f02;
  border-left: 3px solid #39ff14;
}
body.theme-cyberpunk .note[data-color="mint"] {
  background: #001208;
  border-left: 3px solid #00ffc8;
}

/* Note headers */
body.theme-cyberpunk .note[data-color="yellow"] .note-header { background: #1a1a00; border-bottom-color: #f5e64240; }
body.theme-cyberpunk .note[data-color="pink"]   .note-header { background: #1a0008; border-bottom-color: #ff2d7840; }
body.theme-cyberpunk .note[data-color="blue"]   .note-header { background: #001018; border-bottom-color: #00fff540; }
body.theme-cyberpunk .note[data-color="green"]  .note-header { background: #031403; border-bottom-color: #39ff1440; }
body.theme-cyberpunk .note[data-color="mint"]   .note-header { background: #001810; border-bottom-color: #00ffc840; }

/* Note text — accent colour per tack */
body.theme-cyberpunk .note[data-color="yellow"] .note-text,
body.theme-cyberpunk .note[data-color="yellow"] .note-author { color: #f5e642; }
body.theme-cyberpunk .note[data-color="pink"]   .note-text,
body.theme-cyberpunk .note[data-color="pink"]   .note-author { color: #ff2d78; }
body.theme-cyberpunk .note[data-color="blue"]   .note-text,
body.theme-cyberpunk .note[data-color="blue"]   .note-author { color: #00fff5; }
body.theme-cyberpunk .note[data-color="green"]  .note-text,
body.theme-cyberpunk .note[data-color="green"]  .note-author { color: #39ff14; }
body.theme-cyberpunk .note[data-color="mint"]   .note-text,
body.theme-cyberpunk .note[data-color="mint"]   .note-author { color: #00ffc8; }

body.theme-cyberpunk .note .note-drag-handle { color: rgba(255,255,255,0.25); }
body.theme-cyberpunk .note-text { font-family: 'Courier New', monospace; font-size: 0.85rem; background: transparent; }

/* ── Toolbar ─────────────────────────────────── */
body.theme-cyberpunk .toolbar {
  background: #080810;
  border-bottom: 1px solid #00fff5;
  box-shadow: 0 2px 16px rgba(0, 255, 245, 0.2), 0 4px 40px rgba(0,255,245,0.06);
}
body.theme-cyberpunk .board-topic {
  color: #00fff5;
  text-shadow: 0 0 8px rgba(0,255,245,0.6);
}
body.theme-cyberpunk .toolbar-logo { filter: drop-shadow(0 0 6px #00fff5); }
body.theme-cyberpunk .btn-add {
  background: #00fff5;
  color: #0a0a0f;
  border: none;
  box-shadow: 0 0 12px rgba(0,255,245,0.4);
}
body.theme-cyberpunk .btn-add:hover {
  background: #4ffff9;
  box-shadow: 0 0 22px rgba(0,255,245,0.7);
}
body.theme-cyberpunk .btn-leave {
  background: transparent;
  border-color: rgba(0,255,245,0.4);
  color: #80e8e8;
}
body.theme-cyberpunk .btn-leave:hover { border-color: #00fff5; color: #00fff5; }

/* ── Tab bar ─────────────────────────────────── */
body.theme-cyberpunk .tab-bar {
  background: #050508;
  border-bottom: 1px solid rgba(0,255,245,0.3);
}
body.theme-cyberpunk .tab-pill {
  border-color: rgba(0,255,245,0.25);
  color: #60a0a0;
}
body.theme-cyberpunk .tab-pill:hover {
  background: rgba(0,255,245,0.08);
  border-color: #00fff5;
  color: #00fff5;
}
body.theme-cyberpunk .tab-pill.active {
  background: #00fff520;
  border-color: #00fff5;
  color: #00fff5;
  box-shadow: 0 0 10px rgba(0,255,245,0.3);
}

/* ── Vote buttons ────────────────────────────── */
body.theme-cyberpunk .btn-vote {
  background: rgba(245,230,66,0.08);
  border-color: rgba(245,230,66,0.4);
  color: #f5e642;
}
body.theme-cyberpunk .btn-vote:hover {
  background: rgba(245,230,66,0.15);
  border-color: #f5e642;
}
body.theme-cyberpunk .btn-vote.voted {
  background: #f5e642;
  border-color: #f5e642;
  color: #0a0a0f;
  box-shadow: 0 0 8px rgba(245,230,66,0.5);
}

/* ── Watermark ───────────────────────────────── */
body.theme-cyberpunk .board-watermark {
  color: #00fff5;
  text-shadow: 0 0 12px #00fff5, 0 0 24px rgba(0,255,245,0.4);
  opacity: 0.3;
}

/* ── Online dot ──────────────────────────────── */
body.theme-cyberpunk .online-dot    { color: #39ff14; filter: drop-shadow(0 0 4px #39ff14); }
body.theme-cyberpunk .online-indicator { color: #39ff14; }

/* ── Modals ──────────────────────────────────── */
body.theme-cyberpunk .modal-overlay { background: rgba(5,5,15,0.9); }
body.theme-cyberpunk .modal {
  background: #0d0d1a;
  border: 1px solid #00fff5;
  box-shadow: 0 0 24px rgba(0,255,245,0.25), 0 20px 60px rgba(0,0,0,0.8);
}
body.theme-cyberpunk .modal-header h2 { color: #00fff5; text-shadow: 0 0 8px rgba(0,255,245,0.4); }
body.theme-cyberpunk .modal-body { color: #80e8e8; }
body.theme-cyberpunk .btn-primary { background: #00fff5; color: #0a0a0f; border: none; }
body.theme-cyberpunk .btn-primary:hover { background: #4ffff9; box-shadow: 0 0 16px rgba(0,255,245,0.5); }


/* ════════════════════════════════════════════════
   THEME: CORPORATE CLEAN
   Pure white · dot grid · sharp shadows · minimal
════════════════════════════════════════════════ */

/* ── Board canvas ────────────────────────────── */
body.theme-corporate .board {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #c8cdd4 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ── Gate screen ─────────────────────────────── */
body.theme-corporate #gate {
  background: #f1f5f9;
}
body.theme-corporate .gate-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}
body.theme-corporate .gate-logo  {
  color: #1a1a2e;
  text-decoration: none;
  display: block;
}
body.theme-corporate .gate-title { color: #1a1a2e; }

/* ── Tacks — all-white with accent left border ── */
body.theme-corporate .note {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 2px 10px rgba(0,0,0,0.05);
}
body.theme-corporate .note:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.08);
}
body.theme-corporate .note.dragging {
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

body.theme-corporate .note[data-color="yellow"] { background: #ffffff; border-top: 3px solid #eab308; }
body.theme-corporate .note[data-color="pink"]   { background: #ffffff; border-top: 3px solid #f43f5e; }
body.theme-corporate .note[data-color="blue"]   { background: #ffffff; border-top: 3px solid #3b82f6; }
body.theme-corporate .note[data-color="green"]  { background: #ffffff; border-top: 3px solid #22c55e; }
body.theme-corporate .note[data-color="mint"]   { background: #ffffff; border-top: 3px solid #14b8a6; }

/* Note headers — clean white */
body.theme-corporate .note[data-color="yellow"] .note-header,
body.theme-corporate .note[data-color="pink"]   .note-header,
body.theme-corporate .note[data-color="blue"]   .note-header,
body.theme-corporate .note[data-color="green"]  .note-header,
body.theme-corporate .note[data-color="mint"]   .note-header {
  background: #f8fafc;
  border-bottom-color: #e5e7eb;
}

/* Note text — dark clean */
body.theme-corporate .note-text   { color: #1a1a2e; font-family: 'DM Sans', sans-serif; background: transparent; }
body.theme-corporate .note-author { color: #6b7280; }
body.theme-corporate .note-drag-handle { color: #9ca3af; }

/* ── Toolbar ─────────────────────────────────── */
body.theme-corporate .toolbar {
  background: #ffffff;
  border-bottom: 1px solid #d1d5db;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
body.theme-corporate .board-topic { color: #1a1a2e; font-weight: 700; }
body.theme-corporate .btn-add     { background: #1a1a2e; color: #fff; border: none; }
body.theme-corporate .btn-add:hover { background: #2d2d4e; }
body.theme-corporate .btn-leave   { border-color: #d1d5db; color: #374151; }

/* ── Tab bar ─────────────────────────────────── */
body.theme-corporate .tab-bar {
  background: #f3f4f6;
  border-bottom: 1px solid #d1d5db;
}
body.theme-corporate .tab-pill {
  border-color: #d1d5db;
  color: #374151;
  background: transparent;
}
body.theme-corporate .tab-pill:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #1a1a2e;
}
body.theme-corporate .tab-pill.active {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
}

/* ── Vote buttons ────────────────────────────── */
body.theme-corporate .btn-vote {
  background: #f8fafc;
  border-color: #d1d5db;
  color: #374151;
}
body.theme-corporate .btn-vote:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}
body.theme-corporate .btn-vote.voted {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
  box-shadow: none;
}

/* ── Watermark ───────────────────────────────── */
body.theme-corporate .board-watermark {
  color: #94a3b8;
  opacity: 0.25;
  text-shadow: none;
}

/* ── Online dot ──────────────────────────────── */
body.theme-corporate .online-dot { color: #16a34a; filter: none; }

/* ── Modals ──────────────────────────────────── */
body.theme-corporate .modal-overlay { background: rgba(0,0,0,0.45); }
body.theme-corporate .modal {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 20px 60px rgba(0,0,0,0.08);
}
body.theme-corporate .modal-header h2 { color: #1a1a2e; }
body.theme-corporate .btn-primary { background: #1a1a2e; border: none; }
body.theme-corporate .btn-primary:hover { background: #2d2d4e; }