/* Shared surfaces for the public catalogue and streamer workspace. */
:root {
  --ink: #120f0c;
  --surface: #211913;
  --surface-raised: #2b2018;
  --stroke: #f7b6812b;
  --muted: #c8b5a5;
  --accent: #ffad58;
  --ui-radius: 16px;
  --gutter: clamp(16px, 4vw, 44px);
}
body {
  background: radial-gradient(ellipse at 75% 0, #382014 0%, transparent 46rem), var(--ink);
}
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button:disabled {cursor: not-allowed; opacity: .56}
.button.primary {background: var(--accent); color: #21150d}
.button.secondary {border-color: var(--stroke)}
.button.secondary:hover {background: #f7b68114}
.workspace-width {width: min(1160px, calc(100% - var(--gutter) * 2)); margin-inline: auto}
.workspace-bar {
  position: sticky; top: 0; z-index: 5;
  background: #1a130eee; border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
}
.workspace-bar nav {min-height: 62px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px}
.workspace-brand {font-weight: 900; letter-spacing: .06em; margin-right: auto; white-space: nowrap}
.workspace-brand span {color: var(--accent)}
.workspace-action {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 5px 11px; border: 1px solid var(--stroke); border-radius: 8px;
  color: #ffcd9b; background: #f79b4310; font-weight: 700;
}
.workspace-heading {padding: 15px 0 2px}
.workspace-heading h1,.preview-heading h1 {letter-spacing: -.05em; font-size: clamp(32px, 5vw, 54px)}
.workspace-heading h1 {margin: 5px 0 10px}
.workspace-heading p,.preview-heading p {margin: 0 0 10px}
.admin.workspace-width {max-width: 980px; margin: 24px auto 50px}
.admin section,.preview-card,.preview-screen {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--ui-radius);
}
.admin section {padding: clamp(15px, 3vw, 26px)}
.admin section h2 {margin: 0 0 6px}
#overlay-settings summary {cursor: pointer}
#overlay-settings summary::marker {color: var(--accent)}
#overlay-settings summary h2 {display: inline; margin: 0}
#overlay-settings[open] summary {margin-bottom: 9px}
.admin .muted,.preview-card .muted {color: var(--muted); font-size: 13px}
.admin .muted {margin: 4px 0 10px}
.admin #login {max-width: 520px}
.connection-status {color: #ffcf9c}
.board-settings,.board-counters {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 260px),1fr)); gap: 10px;
}
.board-settings label {display: grid; gap: 5px; margin: 5px 0 9px}
.board-settings select {width: 100%}
.counter-settings {min-width: 0; padding: 10px 13px 13px; border: 1px solid var(--stroke); border-radius: 11px; background: var(--surface-raised)}
.counter-settings legend {padding-inline: 5px; color: #ffd0a2; font-weight: 700}
.check-line,.admin .check-line {display: flex; align-items: center; gap: 8px; margin: 2px 0; line-height: 1.3}
.check-line input[type=checkbox],.preview-controls .check-line input[type=checkbox] {
  width: 18px; height: 18px; flex: none; padding: 0; accent-color: var(--accent);
}
.counter-step {display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; align-items: end}
.counter-step label {margin: 6px 0 0}
.counter-step .button {margin: 0; padding-inline: 10px; min-height: 46px}
.history-table {overflow-x: auto}
.history-table table {min-width: 510px}
.history-table th {color: #ffcea0; white-space: nowrap}
.history-table td:first-child {white-space: nowrap; font-variant-numeric: tabular-nums}
.history-table td {overflow-wrap: anywhere}
.history-pages {display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 0}
.history-pages button {min-width: 34px; min-height: 34px; border: 1px solid var(--stroke); border-radius: 7px; background: #18120e; color: var(--cream)}
.history-pages button[aria-current=page] {background: var(--accent); color: #21150d; font-weight: 800}
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 22px; margin: 12px 0;
  color: var(--muted); border: 1px dashed var(--stroke); border-radius: var(--ui-radius);
}
.preview-page.workspace-width {padding-inline: 0}
.preview-layout {grid-template-columns: minmax(250px, .58fr) minmax(0, 1fr)}
.preview-screen {top: 76px; scroll-margin-top: 76px}
.preview-canvas {max-width: max(190px, calc((100svh - 175px) * .88889)); margin-inline: auto}
.preview-options {border-color: #ffad585e}
.preview-card p {margin: 0}
.preview-thumb {background: radial-gradient(ellipse, #59301755, #17100d 78%)}
.catalog-bar .top {border: 0; height: 62px; min-height: 62px; gap: 8px}
.catalog-bar nav {display: flex; gap: clamp(8px, 2vw, 22px); min-height: 0}
.catalog-main .hero {
  min-height: 0; padding: clamp(18px, 4vw, 44px) 0;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(8px, 3vw, 42px);
}
.catalog-main .hero h1 {font-size: clamp(35px, 6.1vw, 78px); margin: 14px 0; letter-spacing: -.06em}
.catalog-main .hero-art {
  height: clamp(270px, 38vw, 455px); border: 1px solid var(--stroke); border-radius: 26px;
  background: radial-gradient(ellipse at 50% 53%, #783d1f 0, #3c2418 45%, #201712 75%);
}
.catalog-main .hero-art img {width: min(82%, 395px); max-height: 86%; object-fit: contain}
.catalog-main .orbit {width: 68%; height: auto; aspect-ratio: 1; opacity: .76}
.catalog-main .mini-tag {right: auto; left: 15px; top: 15px}
.catalog-main .art-caption {bottom: 20px; padding: 8px 18px}
.catalog-main .hero-actions {gap: 12px}
.catalog-main .how,.catalog-main .try-panel {border-color: var(--stroke)}
.catalog-main .how {padding-block: 18px}
.catalog-main .try-panel {margin-block: clamp(28px, 6vw, 65px); background: var(--surface); border-radius: var(--ui-radius)}
.catalog-main .card {border-color: var(--stroke); background: var(--surface)}
.catalog-main .card-image {background: radial-gradient(ellipse at center, #63371758, #1b140f)}
.catalog-main .card-info {background: var(--surface)}
.catalog-main .card h3 {white-space: normal; overflow-wrap: anywhere; min-height: 2.8em}
.catalog-main .toolbar {padding: 9px; border: 1px solid var(--stroke); background: var(--surface); border-radius: 13px}
.catalog-main .notice {background: #ffad5808; border: 1px solid var(--stroke); padding: 13px; border-radius: var(--ui-radius); margin-bottom: 20px}
#catalog,#try {scroll-margin-top: 68px}
@media(max-width: 740px) {
  .catalog-main .hero {grid-template-columns: 1fr}
  .catalog-main .hero-art {height: min(72vw, 350px)}
  .preview-layout {grid-template-columns: minmax(0, 1fr)}
  .preview-screen {position: static; grid-row: 1}
  .preview-canvas {max-width: 340px; margin-inline: auto}
}
@media(max-width: 430px) {
  .workspace-bar nav {gap: 7px 10px}
  .catalog-bar .top {height: auto; min-height: 58px; flex-wrap: wrap; padding-block: 7px}
  .catalog-bar nav {flex-wrap: wrap}
  .catalog-main .hero-actions {flex-wrap: wrap}
  .catalog-main .hero-actions .button {padding: 11px 13px}
  .catalog-main .toolbar {gap: 7px}
  .catalog-main .toolbar select {max-width: 61%}
  .catalog-main .card-actions {gap: 4px; flex-wrap: wrap}
}
@media(prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  .catalog-main .card,.catalog-main .card img {transition: none}
}