/* Website theme for the editor UI; board content keeps its own colors. */
@font-face {
  font-family: "Cineslate Footer";
  src: url("./assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #080a0b;
  --panel: #1c1c1c;
  --panel-strong: #242424;
  --line: #383838;
  --line-strong: rgba(43, 215, 216, .55);
  --text: #f4f5f3;
  --muted: #a6acae;
  --cyan: #2bd7d8;
  --cyan-strong: #64e5e6;
  --font: "Inter", "Segoe UI", sans-serif;
}

body { background: var(--bg); -webkit-font-smoothing: antialiased; }

.quickboard-top-toolbar,
.share-edit-panel,
.moodboard,
.quickboard-lite-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.quickboard-top-toolbar { border-radius: 10px; }
.toolbar-group { background: var(--panel-strong); border-color: var(--line); box-shadow: none; border-radius: 8px; }
.export-action-group { background: transparent; border: 0; }
.mode-toggle { background: var(--bg); border-color: var(--line); }
.toolbar-field, .lite-card-copy { color: var(--text); }
.toolbar-field span, .toolbar-label { color: var(--muted); }

.toolbar-field select,
.toolbar-field input[type="number"],
.toolbar-btn,
.toolbar-icon-btn,
.share-tool-btn,
.viewer-btn,
.viewer-zoom,
.cell-zoom-control,
.text-edit-font,
.text-edit-value,
.text-edit-rot-btn,
.text-edit-align-btn,
.text-edit-style-btn,
.text-edit-color,
.text-link-field input,
.share-modal-close {
  color: var(--text);
  background: #141414;
  border-color: #484848;
  box-shadow: none;
}

.toolbar-field input[type="color"] { border-color: #484848; }
.toolbar-field input[type="number"]::-webkit-outer-spin-button,
.toolbar-field input[type="number"]::-webkit-inner-spin-button { filter: none; }
.toolbar-btn, .mode-btn, .viewer-btn, .viewer-zoom, .cell-zoom-control, .empty-action, .lite-card-cta { font-weight: 600; }

.toolbar-btn:hover,
.toolbar-icon-btn:hover,
.toolbar-icon-btn:focus-visible,
.toolbar-export-btn:focus-visible,
.toolbar-export-menu-wrap.is-open .toolbar-export-btn,
.share-tool-btn:hover,
.share-tool-btn:focus-visible,
.viewer-btn:hover,
.viewer-btn:focus-visible {
  background: #303030;
  border-color: var(--cyan);
  box-shadow: none;
}

.mode-btn.is-active,
.toolbar-icon-btn.is-active,
.toolbar-btn-accent,
.empty-action-primary,
.viewer-btn-accent,
.lite-card-cta {
  color: #081820;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: none;
}

.toolbar-btn-accent:hover,
.empty-action-primary:hover,
.empty-action-primary:focus-visible,
.viewer-btn-accent:hover,
.viewer-btn-accent:focus-visible,
.lite-card-cta:hover,
.lite-card-cta:focus-visible {
  color: #081820;
  background: var(--cyan-strong);
  border-color: var(--cyan-strong);
  box-shadow: none;
}

.share-tool-btn.active,
.share-tool-btn.is-active,
.text-edit-rot-btn.is-active,
.text-edit-align-btn.is-active,
.text-edit-style-btn.is-active {
  color: var(--text);
  background: #203839;
  border-color: var(--cyan);
  box-shadow: none;
}

.share-tool-btn.is-disabled,
.share-tool-btn:disabled { background: #141414; border-color: var(--line); }
.share-tool-icon { filter: brightness(0) invert(1); }

.toolbar-export-dropdown,
.layout-menu,
.board-topbar-dropdown,
.share-modal-panel,
.text-edit-modal .share-modal-panel,
.text-link-modal .share-modal-panel {
  background: var(--panel);
  border-color: #484848;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
}

.toolbar-export-option,
.board-topbar-option { color: var(--text); }
.toolbar-export-option-icon,
.board-topbar-option-icon { color: var(--cyan); }
.toolbar-export-option:hover,
.toolbar-export-option:focus-visible,
.board-topbar-option:hover,
.board-topbar-option:focus-visible { background: #303030; }
.layout-menu button:hover { color: #081820; background: var(--cyan); }
.board-topbar,
.board-topbar:hover,
.board-topbar:focus-within,
.board:has(.board-topbar-menu-wrap.is-open) .board-topbar,
.board.board-moving .board-topbar { background: rgba(28, 28, 28, .94); }
.board-topbar-menu { background: var(--panel-strong); border-color: #484848; color: var(--text); }
.board-topbar-menu:hover { background: #303030; border-color: var(--cyan); }
.board-topbar-title[contenteditable="true"] { background: var(--panel-strong); }
.share-drag-ghost, .reposition-hint { background: var(--panel-strong); color: var(--text); }
.board-topbar-lock, .cell-export { background: var(--panel); border-color: var(--line-strong); color: var(--cyan); box-shadow: none; }
.cell-export:hover { background: #203839; border-color: var(--cyan); }
.cell-delete, .cell-lock-badge { background: var(--panel); }

.board-viewer { background: var(--bg); border-color: var(--line); }
.board-viewer.is-dragover { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.moodboard:fullscreen { background: var(--bg); }
.board-stage { background: var(--board-bg-color, rgba(3, 9, 15, .72)); }
.board-stage.is-slot-mode {
  background:
    linear-gradient(var(--grid-color-line, rgba(34, 216, 220, .48)) var(--grid-line, 1px), transparent var(--grid-line, 1px)),
    linear-gradient(90deg, var(--grid-color-line, rgba(34, 216, 220, .48)) var(--grid-line, 1px), transparent var(--grid-line, 1px)),
    var(--board-bg-color, rgba(3, 9, 15, .72));
  background-size:
    var(--slot-cell-w, 33.333%) var(--slot-cell-h, 25%),
    var(--slot-cell-w, 33.333%) var(--slot-cell-h, 25%),
    auto;
}

.empty-state {
  border-color: #383838;
  color: var(--text);
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}
.empty-state::before { background: linear-gradient(transparent, rgba(0, 0, 0, .18)); }
.empty-state-icon { color: var(--cyan); filter: none; }
.empty-state strong { color: var(--text); font-weight: 500; letter-spacing: -.035em; text-shadow: none; }
.empty-action-secondary { background: var(--panel-strong); border-color: #484848; color: var(--text); box-shadow: none; }
.empty-action-secondary:hover,
.empty-action-secondary:focus-visible { background: #303030; border-color: #777; color: var(--text); }

.quickboard-lite-card { border-radius: 10px; }
.lite-card-badge { color: var(--cyan); background: var(--panel-strong); border-color: #484848; box-shadow: none; font-weight: 600; }
.lite-card-divider { background: var(--line); }
.lite-card-lock-row { color: var(--muted); background: var(--panel-strong); border-color: var(--line); }
.lite-card-lock { background: var(--muted); }
.share-modal:not(.text-edit-modal) { background: rgba(0, 0, 0, .78); }
.text-edit-toolbar { background: var(--panel-strong); border-color: var(--line); }
.text-edit-slider::-webkit-slider-runnable-track { border-color: #484848; background: linear-gradient(90deg, var(--cyan) 0 var(--slider-fill, 50%), #383838 var(--slider-fill, 50%) 100%); }
.text-edit-slider::-moz-range-track { border-color: #484848; background: #383838; }
.text-edit-slider::-moz-range-progress { background: var(--cyan); }
.text-edit-slider::-webkit-slider-thumb { border-color: var(--cyan); background: var(--text); }
.text-edit-slider::-moz-range-thumb { border-color: var(--cyan); background: var(--text); }

/* Keep keyboard focus visible across the editor's different control styles. */
body :is(button, a, input, select):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Centered footer using the same brand lockup as the shared presentation viewer. */
.site-footer {
  display: flex;
  justify-content: center;
  width: min(560px, calc(100% - 36px));
  margin: 24px auto 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 1rem/1.6 var(--font);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer img { display: block; max-width: 100%; }
.site-footer .footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #f4f5f3; }
.site-footer .footer-icon-frame { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; padding: 1px; border: 0; border-radius: 7px; box-shadow: none; }
.footer-icon-frame img { width: 54px; height: 54px; object-fit: contain; border-radius: 5px; }
.footer-brand-copy { display: flex; flex-direction: column; gap: 0; text-align: left; }
.footer-brand-title { font-family: "Cineslate Footer", "Bebas Neue", "Arial Narrow", Arial, sans-serif; font-size: 30.4px; font-weight: 400; line-height: .96; letter-spacing: .16em; white-space: nowrap; }
.footer-brand-tagline { font-family: "Cineslate Footer", "Bebas Neue", "Arial Narrow", Arial, sans-serif; font-size: 13.5px; font-weight: 400; line-height: 1.2; letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 640px) {
  .footer-brand-title { font-size: 27px; }
  .footer-brand-tagline { font-size: 12px; }
}
@media (max-width: 540px) {
  .site-footer .footer-brand { gap: 10px; }
  .site-footer .footer-icon-frame { flex-basis: 50px; width: 50px; height: 50px; }
  .footer-icon-frame img { width: 46px; height: 46px; }
}