* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep: #0D0F13;
  --bg-panel: #15171C;
  --bg-card: #D8D8D8;
  --bg-card-hover: #E5E5E5;
  --card-text: #1A1A1A;
  --card-text-secondary: #4A4A4A;
  --card-text-muted: #6B6B6B;
  --card-border: #BFBFBF;
  --border: #1E2128;
  --border-light: #2A2D35;
  --text-primary: #E8E6E1;
  --text-secondary: #7A8B99;
  --text-muted: #5A6570;
  --text-dim: #3A3D45;
  --green: #4A6741;
  --green-light: #5A7E4F;
  --red: #D94F4F;
  --amber: #E8A838;
  --safe: #6B8F71;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3A3D45; }

/* Top Bar */
.topbar {
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.logo-icon {
  width: 36px; height: 36px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0;
}

.brand { font-size: 19px; font-weight: 700; letter-spacing: 0.04em; }
.brand span { color: #2D7CC4; }
.brand-sub {
  font-size: 10px; color: #2D7CC4;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Shift Selector */
.shift-selector {
  display: flex; background: var(--bg-panel);
  border-radius: 6px; border: 1px solid var(--border-light);
  overflow: hidden;
}

.shift-btn {
  padding: 6px 14px; background: transparent;
  border: none; color: #9AA0A8;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font-mono);
  letter-spacing: 0.04em; transition: all 0.15s;
}

.shift-btn.active { background: #2A2D35; color: #FFFFFF; }
.shift-btn:hover { color: #C8CCD4; }

/* Buttons */
.btn-green {
  padding: 8px 18px;
  background: linear-gradient(135deg, #2E8B57, #3DA868);
  border: none; border-radius: 6px;
  color: #FFFFFF; font-size: 12px;
  font-weight: 700; cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(46,139,87,0.35);
  transition: filter 0.15s;
}

.btn-green:hover { filter: brightness(1.1); }

.btn-outline {
  padding: 8px 14px; background: #1A1D23;
  border: 1px solid #3A3D45;
  border-radius: 6px; color: #C8CCD4;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}

.btn-outline:hover { background: #2A2D35; color: #FFFFFF; border-color: #555; }

/* Metrics Bar */
.metrics-wrap { padding: 16px 24px 8px; }

.metrics-bar {
  display: flex; gap: 28px; justify-content: center;
  padding: 12px 20px; background: var(--bg-panel);
  border-radius: 8px; border: 1px solid var(--border);
  flex-wrap: wrap;
}

.metric-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.metric-value { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.metric-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--text-muted);
  text-transform: uppercase; font-family: var(--font-mono);
}

.metric-divider { width: 1px; background: var(--border-light); align-self: stretch; }

/* Board */
.board {
  flex: 1; padding: 12px 24px 24px;
  display: flex; gap: 12px;
  overflow-x: auto; align-items: flex-start;
}

/* Station Column */
.station-col {
  flex: 1 1 0; min-width: 220px; max-width: 280px;
  background: var(--bg-panel); border-radius: 8px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  transition: all 0.2s ease; overflow: hidden;
}

.station-col.drag-over { border-color: rgba(74,103,65,0.5); background: #1E2128; }
.station-col.wip-exceeded { border-color: rgba(217,79,79,0.2); }

.station-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.station-col.wip-exceeded .station-header { background: #2A1515; }

.station-title-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 8px;
}

.station-title {
  display: flex; align-items: center; gap: 8px;
}

.station-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

.station-name {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.station-wip {
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono);
}

.wip-bar {
  height: 4px; background: var(--border-light);
  border-radius: 2px; overflow: hidden;
}

.wip-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.4s ease, background 0.4s ease;
}

.wip-warning {
  margin-top: 6px; font-size: 9px;
  color: var(--red); font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  animation: pulse-warn 1.5s infinite;
}

.station-cards {
  padding: 10px; flex: 1;
  overflow-y: auto; min-height: 100px;
}

.empty-hint {
  text-align: center; color: var(--dim);
  font-size: 11px; padding: 20px 0;
  font-style: italic; color: #3A3D45;
}

/* Cards */
.kanban-card {
  background: var(--bg-card); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; border-left: 3px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative; color: var(--card-text);
}

.kanban-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.kanban-card.dragging { opacity: 0.5; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }

.priority-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 3px 8px;
  border-radius: 3px; font-family: var(--font-mono);
}

.aging-badge {
  font-size: 9px; color: #B91C1C;
  font-family: var(--font-mono); font-weight: 700;
}

.card-title {
  font-size: 15px; font-weight: 600;
  margin-bottom: 4px; line-height: 1.3;
  color: var(--card-text);
}

.card-meta {
  display: flex; justify-content: space-between;
  align-items: center;
}

.card-partno, .card-qty {
  font-size: 12px; color: var(--card-text-secondary);
  font-family: var(--font-mono); letter-spacing: 0.03em;
}

.card-notes {
  font-size: 12px; color: var(--card-text-muted);
  font-style: italic; border-top: 1px solid var(--card-border);
  padding-top: 6px; margin-top: 6px;
}

.card-footer {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 8px;
  padding-top: 6px; border-top: 1px solid var(--card-border);
}

.cycle-time {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--card-text-muted);
}

.cycle-time.aging { color: #B91C1C; }

.move-btns { display: flex; gap: 4px; }

.move-btn {
  background: rgba(0,0,0,0.1); border: none;
  color: var(--card-text-secondary); font-size: 12px;
  cursor: pointer; border-radius: 3px;
  width: 22px; height: 20px;
  display: flex; align-items: center;
  justify-content: center; padding: 0;
  transition: background 0.15s;
}

.move-btn:hover { background: rgba(0,0,0,0.2); color: var(--card-text); }

.delete-btn {
  background: transparent; border: none;
  color: var(--card-text-muted); font-size: 11px;
  cursor: pointer; padding: 0 2px;
  transition: color 0.15s;
}

.delete-btn:hover { color: #B91C1C; }

/* Footer */
.footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
  align-items: center; font-size: 11px;
  color: var(--text-dim); font-family: var(--font-mono);
  letter-spacing: 0.06em; flex-wrap: wrap; gap: 8px;
}

.footer-brand-text {
  color: #2D7CC4; font-weight: 600;
  letter-spacing: 0.08em;
}

.footer-link {
  color: #2D7CC4; text-decoration: none;
  transition: color 0.15s;
}

.footer-link:hover { color: #4A9DD9; text-decoration: underline; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center;
  justify-content: center; z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--bg-panel); border-radius: 12px;
  padding: 28px; width: 400px;
  max-width: 90vw; border: 1px solid var(--border-light);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal h3 {
  margin-bottom: 20px; font-size: 16px;
  font-weight: 700; letter-spacing: 0.02em;
}

.form-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.form-full { width: 100%; }
.form-half { flex: 1; min-width: 140px; }

.form-grid label {
  display: block; font-size: 10px;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-secondary); text-transform: uppercase;
  margin-bottom: 4px; font-family: var(--font-mono);
}

.form-grid input, .form-grid select {
  width: 100%; background: #1A1D23;
  border: 1px solid var(--border-light);
  border-radius: 6px; padding: 10px 12px;
  color: var(--text-primary); font-size: 13px;
  font-family: var(--font-body); outline: none;
  transition: border-color 0.15s;
}

.form-grid input:focus, .form-grid select:focus {
  border-color: #2D7CC4;
}

.form-grid select { cursor: pointer; }
.form-grid select option { background: #1A1D23; }

.modal-actions {
  display: flex; gap: 10px; margin-top: 22px;
}

.btn-cancel {
  flex: 1; padding: 10px;
  background: var(--border-light); border: none;
  border-radius: 6px; color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}

.btn-cancel:hover { background: #3A3D45; color: var(--text-primary); }

.modal-actions .btn-green { flex: 1; }

/* Priority colors - light card safe */
.priority-urgent { color: #FFFFFF; background: #B91C1C; }
.priority-high { color: #FFFFFF; background: #B45309; }
.priority-normal { color: #FFFFFF; background: #15803D; }
.priority-low { color: #FFFFFF; background: #64748B; }

/* Downtime Button */
.btn-downtime {
  padding: 8px 18px;
  background: linear-gradient(135deg, #8b0000, #a51c1c);
  border: none; border-radius: 6px;
  color: var(--text-primary); font-size: 12px;
  font-weight: 700; cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(139,0,0,0.3);
  transition: filter 0.15s;
}

.btn-downtime:hover { filter: brightness(1.2); }

.btn-downtime-confirm {
  flex: 1; padding: 10px;
  background: linear-gradient(135deg, #8b0000, #a51c1c);
  border: none; border-radius: 6px;
  color: var(--text-primary); font-size: 13px;
  font-weight: 700; cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 0.15s;
}

.btn-downtime-confirm:hover { filter: brightness(1.2); }

.downtime-modal h3 { color: #FF6B6B; }

/* Downtime Card */
.kanban-card.downtime {
  background: #F5D5D5;
  border-left-color: #B91C1C !important;
  color: #1A1A1A;
}

.kanban-card.downtime:hover {
  background: #FADCDC;
  box-shadow: 0 4px 16px rgba(185,28,28,0.25);
}

.kanban-card.downtime.resolved {
  background: #E0E0E0;
  border-left-color: #8B8B8B !important;
  opacity: 0.85;
}

.downtime-badge {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 6px;
  border-radius: 3px; font-family: var(--font-mono);
  color: #FFFFFF; background: #B91C1C;
}

.downtime-badge.resolved {
  color: #FFFFFF; background: #64748B;
}

.downtime-machine {
  font-size: 10px; color: #7F1D1D;
  font-family: var(--font-mono);
  font-weight: 600; letter-spacing: 0.04em;
}

.kanban-card.downtime.resolved .downtime-machine {
  color: #6B6B6B;
}

.downtime-status {
  font-size: 10px; font-family: var(--font-mono);
  font-weight: 600; letter-spacing: 0.04em;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.downtime-status.active {
  color: #B91C1C;
  animation: pulse-warn 1.5s infinite;
}

.downtime-status.done { color: #6B6B6B; }

.resolve-btn {
  background: #B91C1C;
  border: none;
  color: #FFFFFF; font-size: 10px;
  font-weight: 700; cursor: pointer;
  border-radius: 4px; padding: 4px 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: all 0.15s;
}

.resolve-btn:hover {
  background: #991B1B;
}

/* Station Rename */
.station-name {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 2px 4px;
  border-radius: 3px; border: 1px solid transparent;
  transition: all 0.15s;
}

.station-name:hover {
  border-color: var(--border-light);
  background: rgba(255,255,255,0.05);
}

.station-name-input {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-body);
  background: var(--bg-deep); color: var(--text-primary);
  border: 1px solid #2D7CC4;
  border-radius: 3px; padding: 2px 4px;
  outline: none; width: 120px;
}

/* About & Help Buttons */
.btn-about {
  padding: 6px 14px; background: transparent;
  border: 1px solid #3A3D45;
  border-radius: 6px; color: #C8CCD4;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.btn-about:hover { border-color: #555; color: #FFFFFF; }

/* About Modal */
.about-modal { width: 360px; }

.about-modal h3 {
  display: flex; align-items: center; gap: 10px;
}

.about-logo {
  width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
}

.about-logo img { width: 100%; height: 100%; object-fit: contain; }

.about-body {
  font-size: 13px; line-height: 1.7;
  color: var(--text-secondary); margin-bottom: 20px;
}

.about-body strong { color: var(--text-primary); }

.about-version {
  font-size: 10px; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.06em;
}

.about-footer {
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 16px;
}

.about-company {
  font-size: 13px; color: var(--text-primary);
  letter-spacing: 0.04em;
}

.about-company strong {
  color: #2D7CC4; letter-spacing: 0.08em;
}

.about-link a {
  font-size: 12px; color: #2D7CC4;
  text-decoration: none; font-family: var(--font-mono);
  letter-spacing: 0.03em; transition: color 0.15s;
}

.about-link a:hover { color: #4A9DD9; text-decoration: underline; }

/* Andon Alert Banner */
.andon-banner {
  padding: 0; overflow: hidden;
  transition: all 0.3s ease;
}

.andon-alert {
  padding: 8px 24px;
  display: flex; align-items: center;
  gap: 12px; font-size: 12px;
  font-weight: 700; font-family: var(--font-mono);
  letter-spacing: 0.06em;
  animation: andon-flash 2s infinite;
}

.andon-alert.critical {
  background: linear-gradient(90deg, #991B1B, #B91C1C, #991B1B);
  color: #FFFFFF;
}

.andon-alert.warning {
  background: linear-gradient(90deg, #92400E, #B45309, #92400E);
  color: #FFFFFF;
}

.andon-alert .andon-icon { font-size: 16px; }
.andon-alert .andon-items { flex: 1; display: flex; gap: 20px; flex-wrap: wrap; }
.andon-alert .andon-item { display: flex; align-items: center; gap: 6px; }

@keyframes andon-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Takt Time Pacing in Metrics */
.takt-pace { display: flex; align-items: center; gap: 6px; }

.pace-indicator {
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono); letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 3px;
}

.pace-ahead { color: #FFFFFF; background: #15803D; }
.pace-on { color: #FFFFFF; background: #2563EB; }
.pace-behind { color: #FFFFFF; background: #B91C1C; animation: pulse-warn 1.5s infinite; }

/* Shift Notes */
.shiftnotes-modal { width: 460px; }

.shiftnotes-modal textarea {
  width: 100%; background: #1A1D23;
  border: 1px solid var(--border-light);
  border-radius: 6px; padding: 10px 12px;
  color: var(--text-primary); font-size: 13px;
  font-family: var(--font-body); outline: none;
  resize: vertical; transition: border-color 0.15s;
}

.shiftnotes-modal textarea:focus { border-color: #2D7CC4; }

body.light .shiftnotes-modal textarea {
  background: #F3F4F6; color: #1A1D23; border-color: #D1D5DB;
}

.shiftnotes-history {
  max-height: 200px; overflow-y: auto;
  margin-bottom: 14px;
}

.shiftnote-entry {
  padding: 10px 12px; margin-bottom: 8px;
  background: rgba(91,184,245,0.08);
  border-left: 3px solid #2D7CC4;
  border-radius: 0 6px 6px 0;
  font-size: 12px; line-height: 1.5;
}

.shiftnote-meta {
  font-size: 9px; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.shiftnote-text { color: var(--text-primary); }

.shiftnotes-empty {
  text-align: center; color: var(--text-muted);
  font-size: 12px; font-style: italic;
  padding: 16px 0;
}

/* Summary Modal */
.summary-modal { width: 460px; }

.summary-content {
  font-size: 13px; line-height: 1.7;
  color: var(--text-secondary); margin-bottom: 16px;
}

.summary-section {
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.summary-section:last-child { border-bottom: none; margin-bottom: 0; }

.summary-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #2D7CC4; font-family: var(--font-mono);
  margin-bottom: 6px;
}

.summary-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 4px 0;
  font-size: 13px;
}

.summary-label { color: var(--text-secondary); }
.summary-value { font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }

/* Station Focus Bar */
.focus-bar {
  padding: 8px 24px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.focus-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text-muted);
  font-family: var(--font-mono); flex-shrink: 0;
}

.focus-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.focus-tab {
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid #3A3D45;
  background: transparent; color: #C8CCD4;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
  transition: all 0.15s; white-space: nowrap;
}

.focus-tab:hover { border-color: #555; color: #FFFFFF; }

.focus-tab.active {
  background: #2D7CC4; color: #FFFFFF;
  border-color: #2D7CC4;
}

body.light .focus-bar { border-bottom-color: #D8DAE0; }
body.light .focus-tab { border-color: #D1D5DB; color: #6B7280; }
body.light .focus-tab:hover { border-color: #9CA3AF; color: #1A1D23; }
body.light .focus-tab.active { background: #2D7CC4; color: #FFFFFF; border-color: #2D7CC4; }

/* Station Focus Mode - expand focused column */
.station-col.focused {
  flex: 3 1 0; max-width: none; min-width: 400px;
}

.station-col.dimmed {
  opacity: 0.35; flex: 0.5 1 0; min-width: 140px;
  pointer-events: none;
}

/* Theme Toggle - Visible */
.btn-theme-visible {
  padding: 6px 14px;
  background: linear-gradient(135deg, #2D7CC4, #3A8FD8);
  border: none; border-radius: 6px;
  color: #FFFFFF; font-size: 12px;
  font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(45,124,196,0.3);
}

.btn-theme-visible:hover { filter: brightness(1.1); }
.btn-theme-visible .theme-icon { font-size: 14px; }

/* ============================================================
   LIGHT MODE
   ============================================================ */

body.light {
  --bg-deep: #F0F2F5;
  --bg-panel: #FFFFFF;
  --bg-card: #E8E8E8;
  --bg-card-hover: #F0F0F0;
  --card-text: #111111;
  --card-text-secondary: #333333;
  --card-text-muted: #555555;
  --card-border: #C8C8C8;
  --border: #D0D3DA;
  --border-light: #BFC3CC;
  --text-primary: #111111;
  --text-secondary: #333333;
  --text-muted: #555555;
  --text-dim: #777777;
  --red: #DC2626;
}

body.light .topbar { background: #FFFFFF; border-bottom-color: #D0D3DA; }

body.light .shift-btn { color: #555555; }
body.light .shift-btn.active { background: #E0E2E8; color: #111111; font-weight: 700; }

body.light .btn-outline { background: #FFFFFF; color: #333333; border-color: #BFC3CC; font-weight: 700; }
body.light .btn-outline:hover { background: #F0F2F5; color: #111111; border-color: #999; }

body.light .btn-about { color: #333333; border-color: #BFC3CC; }
body.light .btn-about:hover { color: #111111; border-color: #999; }

body.light .btn-theme-visible { background: linear-gradient(135deg, #1A1D23, #2A2D35); color: #F0F0F0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

body.light .btn-downtime { color: #FFFFFF; }

body.light .metrics-bar { background: #FFFFFF; border-color: #D0D3DA; }
body.light .metric-value { color: #111111; }
body.light .metric-label { color: #555555; }

body.light .station-col { background: #FFFFFF; border-color: #D0D3DA; }
body.light .station-col.drag-over { background: #F3F4F6; border-color: rgba(46,139,87,0.5); }
body.light .station-col.wip-exceeded .station-header { background: #FEF2F2; }
body.light .station-header { border-bottom-color: #E0E2E8; }
body.light .station-name { color: #111111; }
body.light .station-wip { color: #555555; }

body.light .station-col.dimmed {
  opacity: 0.45;
  background: #F5F5F5;
}

body.light .station-name:hover { border-color: #BFC3CC; background: rgba(0,0,0,0.04); }
body.light .station-name-input { background: #FFFFFF; color: #111111; border-color: #2D7CC4; }

body.light .wip-bar { background: #E0E2E8; }

body.light .empty-hint { color: #AAAAAA; }

body.light .kanban-card { box-shadow: 0 1px 4px rgba(0,0,0,0.1); border-left-width: 4px; }
body.light .kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.14); }

body.light .kanban-card.downtime { background: #FEE2E2; }
body.light .kanban-card.downtime:hover { background: #FECACA; }
body.light .kanban-card.downtime.resolved { background: #E5E7EB; }

body.light .modal { background: #FFFFFF; border-color: #D0D3DA; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
body.light .modal h3 { color: #111111; }
body.light .form-grid input, body.light .form-grid select { background: #F5F6F8; color: #111111; border-color: #BFC3CC; }
body.light .form-grid input:focus, body.light .form-grid select:focus { border-color: #2D7CC4; }
body.light .form-grid select option { background: #F5F6F8; }
body.light .form-grid label { color: #333333; }
body.light .btn-cancel { background: #E0E2E8; color: #333333; }
body.light .btn-cancel:hover { background: #D0D3DA; color: #111111; }

body.light .about-body { color: #333333; }
body.light .about-body strong { color: #111111; }
body.light .about-version { color: #555555; }
body.light .about-company { color: #111111; }

body.light .footer { border-top-color: #D0D3DA; color: #777777; }

body.light .downtime-modal h3 { color: #DC2626; }

body.light .shiftnote-entry { background: rgba(45,124,196,0.06); }
body.light .shiftnote-meta { color: #555555; }
body.light .shiftnote-text { color: #111111; }

body.light .summary-label { color: #333333; }
body.light .summary-value { color: #111111; }
body.light .summary-section { border-bottom-color: #E0E2E8; }

body.light ::-webkit-scrollbar-thumb { background: #C8CCD4; }
body.light ::-webkit-scrollbar-thumb:hover { background: #999; }

/* Help Modal */
.help-modal { width: 500px; max-height: 85vh; overflow-y: auto; }

.help-section { margin-bottom: 18px; }
.help-section:last-child { margin-bottom: 0; }

.help-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #2D7CC4; font-family: var(--font-mono);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

.help-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; padding: 5px 0;
  font-size: 13px; line-height: 1.5;
  gap: 16px;
}

.help-key {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; color: var(--text-primary);
  background: rgba(45,124,196,0.1);
  padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}

.help-desc { color: var(--text-secondary); flex: 1; }

.help-tip {
  font-size: 12px; color: var(--text-muted);
  font-style: italic; padding: 10px 12px;
  background: rgba(45,124,196,0.05);
  border-radius: 6px; margin-top: 12px;
  line-height: 1.5;
}

/* Animations */
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Responsive */
@media (max-width: 768px) {
  .topbar { padding: 12px 16px; }
  .board { padding: 8px 16px 16px; }
  .station-col { min-width: 200px; }
  .metrics-wrap { padding: 12px 16px 8px; }
  .metrics-bar { gap: 16px; padding: 10px 12px; }
  .ext-banner-inner { flex-direction: column; text-align: center; }
}

/* Extension Install Banner */
.ext-banner {
  background: linear-gradient(135deg, #1A3A5C, #0F2440);
  border-bottom: 1px solid rgba(45,124,196,0.3);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.ext-banner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2D7CC4, transparent);
}

.ext-banner-inner {
  max-width: 100%;
  padding: 12px 24px;
  display: flex; align-items: center;
  justify-content: center; gap: 16px;
  font-size: 13px;
}

.ext-banner-text {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
}

.ext-banner-text strong { color: #FFFFFF; }

.ext-banner-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 6px;
  background: #2D7CC4; color: #FFFFFF;
  font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: all 0.2s;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

.ext-banner-cta:hover {
  background: #3A8FD8;
  box-shadow: 0 2px 12px rgba(45,124,196,0.4);
}

.ext-banner-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  transition: color 0.2s; line-height: 1;
}

.ext-banner-dismiss:hover { color: rgba(255,255,255,0.8); }

.ext-banner-home {
  color: rgba(255,255,255,0.55);
  text-decoration: none; font-size: 12px;
  font-family: var(--font-mono);
  transition: color 0.2s;
}

.ext-banner-home:hover { color: #FFFFFF; }

body.light .ext-banner {
  background: linear-gradient(135deg, #E8F2FC, #D4E8F8);
  border-bottom-color: #B8D4E8;
}

body.light .ext-banner::before {
  background: linear-gradient(90deg, transparent, #2D7CC4, transparent);
}

body.light .ext-banner-text { color: #333; }
body.light .ext-banner-text strong { color: #111; }
body.light .ext-banner-dismiss { color: rgba(0,0,0,0.3); }
body.light .ext-banner-dismiss:hover { color: rgba(0,0,0,0.6); }
body.light .ext-banner-home { color: #555; }
body.light .ext-banner-home:hover { color: #111; }