@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --ui-canvas: #f3f3f1;
  --ui-surface: #ffffff;
  --ui-surface-muted: #eaeae7;
  --ui-ink: #111111;
  --ui-ink-soft: #4a4a47;
  --ui-ink-faint: #777773;
  --ui-line: #d7d7d2;
  --ui-line-strong: #b8b8b1;
  --ui-live: #111111;
  --ui-suggestion: #6a6a63;
  --ui-confirmed: #111111;
  --ui-warning: #5b5b54;
  --ui-focus: #111111;
  --ui-radius: 5px;
}

html, body { background: var(--ui-canvas) !important; color: var(--ui-ink) !important; }
body { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 13px !important; user-select: none; }
#app { height: 100dvh !important; background: var(--ui-canvas) !important; }

.titlebar {
  height: 48px !important;
  padding: 0 14px !important;
  gap: 12px !important;
  background: var(--ui-ink) !important;
  border-bottom: 1px solid var(--ui-ink) !important;
  box-shadow: none !important;
}
.brand { color: #fff !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; letter-spacing: .02em !important; }
.brand-sub { color: #c9c9c4 !important; }
.tb-divider { background: #4c4c48 !important; }
.web-menu-label { color: #d9d9d4 !important; border-radius: 3px !important; }
.web-menu-label:hover, .web-menu.open .web-menu-label { color: #fff !important; background: #2d2d2a !important; }
.tb-btn { color: #d9d9d4 !important; background: transparent !important; border-color: transparent !important; border-radius: 3px !important; }
.tb-btn:hover, .tb-btn.active { color: #fff !important; background: #2d2d2a !important; border-color: #4c4c48 !important; }
.go-live-btn { background: #fff !important; color: #111 !important; border: 1px solid #fff !important; border-radius: 4px !important; box-shadow: none !important; font-weight: 700 !important; }
.go-live-btn.active { background: #111 !important; color: #fff !important; border-color: #fff !important; box-shadow: inset 0 0 0 1px #fff !important; }
.live-indicator { background: currentColor !important; box-shadow: none !important; }

#mainGrid, .grid { gap: 0 !important; background: var(--ui-canvas) !important; }
#col1 { flex-basis: 292px !important; min-width: 260px !important; }
#col2 { flex-basis: 242px !important; min-width: 220px !important; }
#col4 { flex-basis: 320px !important; min-width: 290px !important; }
.col-resizer, .row-resizer { background: var(--ui-line) !important; }
.col-resizer:hover, .row-resizer:hover { background: var(--ui-ink) !important; }

.panel { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.panel-header { min-height: 40px !important; padding: 0 11px !important; background: var(--ui-surface) !important; border-bottom: 1px solid var(--ui-line) !important; }
.panel-title { color: var(--ui-ink) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .01em !important; }
.panel-actions { gap: 5px !important; }
.panel-body { background: var(--ui-surface) !important; color: var(--ui-ink) !important; }

button, select, input, textarea { font-family: inherit !important; }
button, .tb-btn, .btn-sm, .link-btn, .icon-btn, select, input, textarea { border-radius: var(--ui-radius) !important; }
button { transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important; }
.btn-sm, .link-btn, .icon-btn { background: var(--ui-surface) !important; color: var(--ui-ink-soft) !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important; }
.btn-sm:hover, .link-btn:hover, .icon-btn:hover { background: var(--ui-surface-muted) !important; color: var(--ui-ink) !important; border-color: var(--ui-line-strong) !important; }
.btn-sm:active, .link-btn:active, .icon-btn:active { transform: translateY(1px) !important; }
.btn-record, #recordBtn { min-height: 42px !important; padding: 0 14px !important; border-radius: 4px !important; background: var(--ui-ink) !important; color: #fff !important; border: 1px solid var(--ui-ink) !important; box-shadow: none !important; animation: none !important; }
.btn-record:hover, #recordBtn:hover { background: #333 !important; }
.btn-record.active, #recordBtn.active { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-ink) !important; box-shadow: none !important; }

.transcript-footer { background: var(--ui-surface) !important; border-top: 1px solid var(--ui-line) !important; padding: 10px !important; }
.transcript-footer__actions { gap: 5px !important; }
#srcToggleWrap { padding: 4px 6px !important; border: 1px solid var(--ui-line) !important; border-radius: 4px !important; background: var(--ui-surface-muted) !important; }
#srcToggleDot { background: var(--ui-ink) !important; }
#srcToggleLabel { color: var(--ui-ink) !important; }
.mic-bar { background: var(--ui-ink) !important; }
.empty-state { color: var(--ui-ink-faint) !important; }
.empty-state strong { color: var(--ui-ink) !important; }
.empty-icon { filter: grayscale(1) !important; opacity: .75 !important; }

.transcript-line { border-bottom: 1px solid var(--ui-line) !important; padding: 10px 11px !important; }
.transcript-line.active, .transcript-line:last-child { background: #fafaf8 !important; border-left: 3px solid var(--ui-ink) !important; }
.transcript-line__text, .transcript-text { color: var(--ui-ink) !important; line-height: 1.55 !important; }
.interim-line, .transcript-interim { color: var(--ui-ink-soft) !important; border-left-color: var(--ui-line-strong) !important; }

#queueBody, #searchResults, #detectionsBody, #transcriptBody, #livePanel .panel-body { scrollbar-color: var(--ui-line-strong) transparent; }
.queue-item, .song-slide-item, .bible-slide-card, .media-card, .theme-card { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 4px !important; box-shadow: none !important; }
.queue-item:hover, .song-slide-item:hover, .bible-slide-card:hover, .media-card:hover, .theme-card:hover { background: var(--ui-surface-muted) !important; border-color: var(--ui-line-strong) !important; }
.queue-item.active, .song-slide-item.active, .bible-slide-card.active, .theme-card.active { background: var(--ui-ink) !important; color: #fff !important; border-color: var(--ui-ink) !important; box-shadow: none !important; }

#previewPanel, #livePanel { background: #e5e5e1 !important; }
.verse-canvas, #previewCanvas, #liveCanvas { border-radius: 0 !important; border: 1px solid var(--ui-ink) !important; box-shadow: none !important; }
#previewPanel .panel-header, #livePanel .panel-header { background: var(--ui-surface) !important; }
#previewPanelTitle { letter-spacing: .02em !important; }
.search-tabs { background: var(--ui-surface-muted) !important; border-bottom: 1px solid var(--ui-line) !important; }
.search-tab { color: var(--ui-ink-faint) !important; border-radius: 0 !important; }
.search-tab.active { color: var(--ui-ink) !important; background: var(--ui-surface) !important; border-bottom: 2px solid var(--ui-ink) !important; }
.search-input, .trans-select, input, textarea, select { background: var(--ui-surface) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important; }
.search-input::placeholder, input::placeholder, textarea::placeholder { color: var(--ui-ink-faint) !important; }

#detectionsPanel .panel-header { background: var(--ui-ink) !important; color: #fff !important; }
#detectionsPanel .panel-title, #detectionsPanel .panel-header .link-btn, #detectionsPanel .panel-header .icon-btn { color: #fff !important; }
#detectionsPanel .panel-header .link-btn, #detectionsPanel .panel-header .icon-btn { background: transparent !important; border-color: #4c4c48 !important; }
#detectionsPanel .panel-header .link-btn:hover, #detectionsPanel .panel-header .icon-btn:hover { background: #2d2d2a !important; }
.detection-item { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-left: 4px solid var(--ui-line-strong) !important; border-radius: 0 !important; padding: 11px !important; margin: 8px !important; box-shadow: none !important; }
.detection-item:hover { border-color: var(--ui-ink) !important; border-left-color: var(--ui-ink) !important; background: #fafaf8 !important; }
.detection-item .det-header { gap: 7px !important; }
.det-dot { background: var(--ui-ink) !important; box-shadow: none !important; }
.det-dot.med, .det-dot.low { background: var(--ui-ink-faint) !important; }
.det-ref { color: var(--ui-ink) !important; font-size: 13px !important; font-weight: 700 !important; }
.det-score { color: var(--ui-ink) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12px !important; font-weight: 700 !important; }
.det-type { color: var(--ui-ink-soft) !important; background: var(--ui-surface-muted) !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; }
.det-preview { color: var(--ui-ink-soft) !important; line-height: 1.45 !important; }
.det-trigger { display: block; margin-top: 7px; padding: 6px 7px; color: var(--ui-ink-soft); background: var(--ui-surface-muted); border-left: 2px solid var(--ui-ink); font-size: 10px; line-height: 1.4; }
.det-trigger strong { color: var(--ui-ink); font-weight: 700; }
.det-confidence { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--ui-ink-faint); font-size: 10px; }
.det-confidence-bar { flex: 1; height: 4px; background: var(--ui-line); overflow: hidden; }
.det-confidence-fill { height: 100%; background: var(--ui-ink); }
.det-actions { gap: 5px !important; margin-top: 9px !important; }
.det-btn { background: var(--ui-surface) !important; color: var(--ui-ink-soft) !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; }
.det-btn:hover { background: var(--ui-ink) !important; color: #fff !important; border-color: var(--ui-ink) !important; }

.modal, [id$="Modal"] > div, #commandCenter, #postServiceReportModal > div { background: var(--ui-surface) !important; color: var(--ui-ink) !important; border-color: var(--ui-line-strong) !important; border-radius: 5px !important; box-shadow: 0 16px 48px rgba(0,0,0,.18) !important; }
.form-label, .form-hint { color: var(--ui-ink-soft) !important; }

@media (max-width: 1080px) {
  #col1 { flex-basis: 250px !important; min-width: 220px !important; }
  #col2 { flex-basis: 210px !important; min-width: 190px !important; }
  #col4 { flex-basis: 280px !important; min-width: 250px !important; }
  .web-menubar { display: none !important; }
}
@media (max-width: 820px) {
  html, body { overflow: auto !important; }
  #app { min-height: 100dvh !important; height: auto !important; }
  #mainGrid { display: flex !important; flex-direction: column !important; overflow: visible !important; }
  #mainGrid .col { flex: 0 0 auto !important; min-width: 0 !important; width: 100% !important; min-height: 360px !important; }
  #mainGrid .col-resizer, #mainGrid .row-resizer { display: none !important; }
  .panel--top, .panel--bot { min-height: 340px !important; }
  .titlebar { overflow-x: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}