:root {
  --ink: #233b35; --ink-soft: #53675f; --muted: #77867d;
  --line: #e0e6df; --line-strong: #c6d2c8; --paper: #f7f7f2;
  --panel: #fffefa; --panel-alt: #f1f5ef; --canvas: #eaf0e8;
  --teal: #245c51; --teal-soft: #e6f0e8; --accent: #dc7950; --accent-dark: #ae512f;
  --focus: 0 0 0 3px #245c5133; --shadow: 0 14px 40px #293f3312;
  --radius: 11px; --header-height: 88px; --game-seat-gap: 5px;
  font-family: "Avenir Next", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none; color: var(--ink); background: var(--paper); color-scheme: light;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; font-size: 14px; line-height: 1.55; background: var(--paper); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .46; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
img { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
input, select, textarea { min-width: 0; }
input[type="text"], input[type="number"], input[type="search"], select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #8c988f; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 0; box-shadow: var(--focus); }
select { padding-right: 26px; }
textarea { resize: vertical; min-height: 88px; }
input[type="checkbox"] { accent-color: var(--teal); width: 17px; height: 17px; }
input[readonly] { color: var(--muted); background: #f5f7f2; }
.is-hidden { display: none !important; }
.access-gate { display: grid; place-items: center; height: 100vh; height: 100dvh; padding: 24px; background: var(--canvas); }
.access-card { width: min(100%, 400px); padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 14px 45px #233c2910; }
.access-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 14px; background: #e5eee3; color: var(--teal); }
.access-card h1 { margin: 0; font-size: 21px; line-height: 1.5; }
.access-card p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.access-card form { display: grid; gap: 18px; margin-top: 25px; }
.access-card .primary-button { width: 100%; }
.sharing-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 25px; overflow: visible; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); color: var(--ink); box-shadow: 0 20px 70px #152d3633; }
.sharing-dialog::backdrop { background: #183a3640; backdrop-filter: blur(3px); }
.sharing-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
.sharing-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 21px; }
.sharing-dialog .form-field > span { display: flex; align-items: center; gap: 8px; }
.sharing-dialog input { font-size: 13px; }
.sharing-message { min-height: 20px; margin: 12px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sharing-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.save-conflict { display: grid; gap: 10px; padding: 14px; margin-bottom: 4px; border: 1px solid #dcbd82; border-radius: 11px; background: #fff6e5; }
.save-conflict > strong { display: flex; align-items: center; gap: 8px; color: #85561d; font-size: 14px; }
.save-conflict > strong svg { width: 17px; height: 17px; }
.save-conflict p { margin: 0; color: #755f3e; font-size: 13px; line-height: 1.6; }
.save-conflict button { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The four working steps have a permanent home in the quiet header. */
.app-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.app-header { flex: 0 0 var(--header-height); display: flex; align-items: center; gap: 22px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--panel); z-index: 5; }
.brand-lockup { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #e4dcbe; border-radius: 13px; background: #f5e9bb; }
.brand-mark img { display: block; width: 33px; height: 33px; object-fit: contain; }
.brand-mark svg { width: 25px; height: 25px; color: var(--teal); }
.brand-copy h1, .brand-lockup h1 { margin: 0; font-size: 19px; letter-spacing: -.3px; line-height: 1.3; font-weight: 750; }
.brand-copy p, .brand-lockup p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.workflow-nav { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; flex: 1; }
.workflow-step { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 12px; min-height: 57px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; white-space: nowrap; color: var(--muted); }
.workflow-step:hover:not(:disabled) { background: #f2f5ee; color: var(--ink); }
.step-number { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border: 1px solid #d6dfd5; border-radius: 50%; color: #829086; background: #f6f7f1; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.step-number svg { width: 15px; height: 15px; }
.step-copy { display: grid; gap: 1px; }
.step-copy strong { font-size: 14px; font-weight: 700; }
.step-copy small { color: var(--muted); font-size: 12px; font-weight: 400; }
.workflow-step.is-active { border-color: #ceded0; color: var(--teal); background: var(--teal-soft); }
.workflow-step.is-active .step-number { color: white; border-color: var(--teal); background: var(--teal); }
.workflow-step.is-active .step-copy small { color: #628071; }
.workflow-step.is-complete .step-number { color: var(--teal); border-color: #d2e2d3; background: #e9f1e7; }
.workflow-step:disabled { opacity: .55; }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; color: #577464; font-size: 12px; white-space: nowrap; }
.connection-state.is-loading { color: var(--muted); }
.connection-state.is-error { color: var(--accent-dark); }
.state-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 11%, transparent); }
.header-actions button { min-height: 40px; padding: 0 10px; }
.icon-button, .field-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: #fff; font-size: 13px; }
.icon-button:hover, .field-icon-button:hover { border-color: var(--line-strong); background: var(--panel-alt); }
.icon-button.is-busy svg, .is-busy > svg { animation: spin .85s linear infinite; }
.mobile-tabs { display: none; }

/* Permanent library, game board, and one focused editing step. */
.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; flex: 1; min-height: 0; overflow: hidden; }
.pane, .library-pane, .canvas-pane, .inspector-pane { min-width: 0; min-height: 0; }
.library-pane { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.canvas-pane { display: flex; flex-direction: column; background: var(--canvas); overflow: hidden; }
.inspector-pane { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 23px 18px 17px; }
.pane-heading h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.25px; }
.eyebrow { display: block; margin: 0 0 7px; color: var(--teal); font-size: 12px; font-weight: 700; }
.count-badge { display: inline-grid; place-items: center; min-width: 30px; height: 25px; padding: 0 8px; border-radius: 8px; color: var(--ink-soft); background: #edf1e9; font-size: 12px; font-weight: 600; }
.library-filters { padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; display: flex; align-items: center; height: 42px; margin-bottom: 11px; }
.search-field > svg { position: absolute; z-index: 1; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-field input { height: 42px; padding-left: 35px; padding-right: 35px; font-size: 13px; background: #f6f7f2; border-color: var(--line); }
.search-field input:focus { background: white; }
.search-field .field-icon-button { position: absolute; right: 3px; min-width: 32px; width: 32px; height: 34px; padding: 0; border: 0; background: transparent; }
.search-field .field-icon-button svg { width: 15px; height: 15px; }
.quick-filters { display: flex; gap: 5px; margin-bottom: 11px; }
.quick-filter { flex: 1; min-height: 34px; padding: 0 6px; border: 1px solid transparent; border-radius: 8px; color: var(--ink-soft); background: #f1f4ed; font-size: 12px; white-space: nowrap; font-weight: 600; }
.quick-filter:hover { background: #e9eee4; }
.quick-filter.is-active { color: #fff; background: var(--teal); }
.advanced-filters summary, .technical-details summary { display: flex; align-items: center; gap: 7px; min-height: 31px; color: var(--ink-soft); font-size: 12px; cursor: pointer; list-style: none; }
.advanced-filters summary::-webkit-details-marker, .technical-details summary::-webkit-details-marker { display: none; }
.advanced-filters summary::after, .technical-details summary::after { content: '+'; margin-left: auto; font-size: 18px; color: var(--muted); }
.advanced-filters[open] summary::after, .technical-details[open] summary::after { content: '−'; }
.advanced-filters summary svg, .technical-details summary svg { width: 15px; height: 15px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding-top: 10px; }
.filter-grid label, .field-label { display: grid; gap: 5px; min-width: 0; color: var(--ink-soft); font-size: 12px; }
.filter-grid select { min-height: 38px; font-size: 12px; padding-left: 8px; }
.level-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 9px 20px; }
.level-list, .inspector-content, .map-viewport { scrollbar-width: thin; scrollbar-color: #becdc0 transparent; }
.level-list::-webkit-scrollbar, .inspector-content::-webkit-scrollbar, .map-viewport::-webkit-scrollbar { width: 9px; height: 9px; }
.level-list::-webkit-scrollbar-thumb, .inspector-content::-webkit-scrollbar-thumb, .map-viewport::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #bdcdbf; background-clip: padding-box; }
.level-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 82px; margin: 3px 0; padding: 11px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; transition: border-color .15s, background .15s; }
.level-row:hover { background: #f1f5ee; }
.level-row.is-selected { border-color: #aac7b0; background: #eaf2e7; }
.level-row.is-selected::before { content: ''; position: absolute; left: -1px; top: 19px; bottom: 19px; width: 3px; border-radius: 0 4px 4px 0; background: var(--teal); }
.level-main { min-width: 0; }
.level-title { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.level-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 5px; margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.meta-separator { color: #b0bbae; }
.level-source { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.level-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.status-pill, .source-pill, .db-pill, .validation-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-pill.draft { color: #846d32; background: #f5ecd5; }
.status-pill.review { color: #9a632c; background: #fff0d9; }
.status-pill.approved, .validation-pill { color: #3f7458; background: #e6f1e3; }
.status-pill.published { color: #456a8c; background: #e9f0f6; }
.status-pill.rejected, .validation-pill.invalid { color: #ab523a; background: #faeae2; }
.status-pill.retired { color: #778376; background: #eef1e9; }
.status-pill.source, .source-pill { color: #67785f; background: #edf1e7; }
.db-pill.active { color: #3c7956; background: #e6f2e7; }
.db-pill.inactive { color: #8b6a36; background: #faf0dc; }
.validation-pill svg { width: 12px; height: 12px; }
.level-number { display: none; }
.level-preview { display: grid; place-items: center; width: 42px; }
.mini-map { display: grid; width: 40px; height: 53px; gap: 1px; padding: 3px; border: 1px solid #c4d3c2; border-radius: 5px; background: #d8e3d3; overflow: hidden; }
.mini-map-empty { background: #edf2e8; }
.mini-w-4 { grid-template-columns: repeat(4, 1fr); }
.mini-w-5 { grid-template-columns: repeat(5, 1fr); }
.mini-w-6 { grid-template-columns: repeat(6, 1fr); }
.mini-w-7 { grid-template-columns: repeat(7, 1fr); }
.mini-h-7 { grid-template-rows: repeat(7, 1fr); }
.mini-h-8 { grid-template-rows: repeat(8, 1fr); }
.mini-h-10 { grid-template-rows: repeat(10, 1fr); }
.mini-h-11 { grid-template-rows: repeat(11, 1fr); }
.mini-h-12 { grid-template-rows: repeat(12, 1fr); }
.mini-cell { min-width: 0; min-height: 0; border-radius: 1px; background: #f0f4ea; }
.mini-cell.is-seat { background: var(--seat-color, #7faaa0); }
.mini-cell.is-obstacle { background: #849481; }
.mini-cell.is-wall { background: #425e4c; }
.mini-cell.is-door { outline: 1px solid #77a18a; outline-offset: -1px; }

.canvas-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 90px; padding: 19px 26px 17px; background: #f7f8f2; border-bottom: 1px solid #dce4d8; }
.canvas-title-wrap { min-width: 0; }
.canvas-title-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.canvas-title-line h2, .canvas-header h2 { margin: 0; overflow: hidden; font-size: 22px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.4px; }
.canvas-subtitle { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.canvas-subtitle code { font-size: 12px; }
.save-indicator, .save-state { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: #768371; font-size: 12px; white-space: nowrap; }
.save-indicator svg { width: 14px; height: 14px; }
.save-indicator.is-dirty, .save-indicator.is-unsaved { color: #ad7134; }
.save-indicator.is-saved { color: #548063; }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 21px; border-bottom: 1px solid #dce4d8; background: #f7f8f2; }
.tool-switcher, .history-tools { display: flex; align-items: center; gap: 4px; }
.history-tools { margin-left: auto; padding-left: 12px; border-left: 1px solid #dae1d5; }
.tool-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tool-button:hover:not(:disabled) { border-color: var(--line-strong); background: #fff; }
.tool-button.is-active { color: white; border-color: var(--teal); background: var(--teal); }
.tool-button svg { width: 17px; height: 17px; }
.history-tools .tool-button { font-size: 12px; }
.canvas-guide { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; min-height: 66px; padding: 13px 25px; color: var(--ink-soft); border-bottom: 1px solid #d9e4d5; background: #edf3e7; }
.guide-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #fffefa; color: var(--teal); font-size: 12px; font-weight: 700; }
.guide-number svg { width: 16px; height: 16px; }
.guide-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; min-width: 0; }
.guide-copy strong { font-size: 14px; color: var(--ink); font-weight: 650; }
.guide-copy span { font-size: 12px; color: #71816c; }
.canvas-guide.is-warning { background: #fbf1da; border-color: #eadcbc; }
.canvas-guide.is-warning .guide-copy strong { color: #967135; }

/* Auto margins center small boards; large boards remain reachable from
   their first row and column through native scrolling. */
.canvas-stage { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; padding: 18px; overflow: hidden; background-color: var(--canvas); background-image: radial-gradient(#bdcdb949 .9px, transparent 1px); background-size: 16px 16px; }
.map-viewport { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; padding: 13px; overscroll-behavior: contain; }
.map-grid { --cell-size: 54px; --grid-width: 7; --grid-height: 10; display: grid; flex: 0 0 auto; grid-template-columns: repeat(var(--grid-width), var(--cell-size)); grid-template-rows: repeat(var(--grid-height), var(--cell-size)); gap: var(--game-seat-gap); width: max-content; height: max-content; padding: 10px; margin: auto; border: 1px solid #b9cbb5; border-radius: 12px; background: #d8e2d2; box-shadow: 0 5px 0 #cbd6c4, 0 15px 28px #374b3314; user-select: none; overflow: visible; }
.map-grid.grid-w-4 { --grid-width: 4; } .map-grid.grid-w-5 { --grid-width: 5; } .map-grid.grid-w-6 { --grid-width: 6; } .map-grid.grid-w-7 { --grid-width: 7; }
.map-grid.grid-h-7 { --grid-height: 7; } .map-grid.grid-h-8 { --grid-height: 8; } .map-grid.grid-h-10 { --grid-height: 10; } .map-grid.grid-h-11 { --grid-height: 11; } .map-grid.grid-h-12 { --grid-height: 12; }
.map-grid.zoom-65 { --cell-size: 35px; } .map-grid.zoom-70 { --cell-size: 38px; } .map-grid.zoom-80 { --cell-size: 43px; } .map-grid.zoom-90 { --cell-size: 49px; } .map-grid.zoom-100 { --cell-size: 54px; } .map-grid.zoom-110 { --cell-size: 59px; } .map-grid.zoom-120 { --cell-size: 65px; } .map-grid.zoom-130 { --cell-size: 70px; } .map-grid.zoom-135 { --cell-size: 73px; }
.map-cell { position: relative; display: grid; place-items: center; width: var(--cell-size); height: var(--cell-size); min-width: 0; min-height: 0; padding: 0; border: 1px solid #c6d2c0; border-radius: 6px; background: #f3f5ed; color: var(--ink); overflow: visible; touch-action: none; }
.map-cell:hover { z-index: 3; background: #fdfef8; }
.map-cell:focus-visible { z-index: 5; outline: 2px solid var(--teal); outline-offset: 2px; }
.canvas-stage[data-mode="edit"] .map-cell { cursor: crosshair; }
.canvas-stage[data-tool="select"] .map-cell { cursor: pointer; }
.map-cell.is-seat { border-color: transparent; background: transparent; }
.map-cell.is-seat:hover, .map-cell.is-double-trailing:hover { background: transparent; }
.map-cell .cell-art, .map-cell .seat-art, .map-cell .obstacle-art { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.map-cell.is-seat .cell-art { position: relative; z-index: 2; filter: drop-shadow(0 2px 1px #2e412f12); }
.map-cell.is-double-anchor .cell-art, .map-cell.is-double-anchor .seat-art { position: absolute; inset: 0 auto auto 0; z-index: 3; width: calc(200% + var(--game-seat-gap)); height: 100%; }
.map-cell.is-double-trailing { border-color: transparent; background: transparent; visibility: visible; pointer-events: auto; }
.map-cell.is-double-trailing > * { visibility: hidden; }
.map-cell.is-selected::after, .map-cell.is-moving::after { content: ''; position: absolute; z-index: 4; inset: -3px; border: 2px solid var(--teal); border-radius: 9px; box-shadow: 0 0 0 2px #fffefa; pointer-events: none; }
.map-cell.is-double-anchor.is-selected::after, .map-cell.is-double-anchor.is-moving::after { width: calc(200% + var(--game-seat-gap) + 6px); }
.map-cell.is-double-trailing.is-selected::after, .map-cell.is-double-trailing.is-moving::after { left: calc(-100% - var(--game-seat-gap) - 3px); width: calc(200% + var(--game-seat-gap) + 6px); }
.map-cell.is-moving::after { border-style: dashed; border-color: var(--accent); }
.map-cell.is-moving .cell-art { opacity: .65; }
.map-cell.is-obstacle { background: #e1e8db; }
.map-cell.is-wall { border-color: #bbc9b6; background: #d3ddcc; }
.map-cell .wall-art { display: block; width: 83%; height: 25%; border-radius: 3px; background: #62775f; box-shadow: inset 0 2px 0 #91a287, inset 0 -3px 0 #465b43, 0 2px 2px #31432e18; pointer-events: none; }
.map-cell.is-door { border: 1px dashed #7fa988; background: #e5f0df; }
.map-cell .door-glyph { position: absolute; inset: auto 0 4px; display: block; color: #52815d; font-size: 11px; font-weight: 600; text-align: center; pointer-events: none; }
.map-cell .door-glyph svg { width: 15px; height: 15px; }
.map-cell .capacity-badge { position: absolute; z-index: 5; top: 1px; right: 1px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border: 1px solid #bac8b2; border-radius: 5px; color: #43573d; background: #fffef9f5; font-size: 11px; line-height: 1; font-weight: 750; pointer-events: none; }
.map-cell.is-double-anchor .capacity-badge { right: calc(-100% - var(--game-seat-gap) + 1px); }
.map-cell .lock-art { position: absolute; z-index: 6; top: 1px; left: 1px; width: 21px; height: 21px; max-width: 38%; object-fit: contain; pointer-events: none; }
.map-cell .cell-coord { position: absolute; z-index: 4; left: 3px; bottom: 2px; padding: 0 2px; border-radius: 3px; color: #66745f; background: #fffdf5de; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.4; opacity: 0; pointer-events: none; }
.canvas-stage[data-mode="edit"] .map-cell:hover .cell-coord, .map-cell:focus-visible .cell-coord { opacity: 1; }
.map-cell .cell-glyph { display: none; }
.map-cell.is-preview { animation: cell-pop .18s ease-out; }
.canvas-stage:not(.has-level) .map-viewport, .canvas-stage.has-level .canvas-empty { display: none; }
.canvas-empty, .inspector-empty { max-width: 310px; padding: 24px; margin: auto; text-align: center; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 17px; border: 1px solid #cdddc6; border-radius: 18px; color: var(--teal); background: #f3f7ed; }
.empty-icon svg { width: 26px; height: 26px; }
.canvas-empty h2, .inspector-empty h2 { margin: 0; color: var(--ink); font-size: 20px; }
.canvas-empty p, .inspector-empty p { margin: 8px 0 0; font-size: 14px; line-height: 1.75; }
.canvas-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 14px; min-height: 57px; padding: 9px 23px; border-top: 1px solid #d6dfd0; background: #f6f8f0; color: var(--ink-soft); font-size: 12px; }
.canvas-footer-left, .canvas-footer-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
.legend-item img { width: 19px; height: 19px; object-fit: contain; }
.legend-swatch { display: block; width: 11px; height: 11px; border: 1px solid #c4d0bd; border-radius: 3px; background: #f3f5ed; }
.legend-swatch.seat { background: #7099bc; border-color: #7099bc; }
.legend-swatch.wall { background: #62775f; border-color: #62775f; height: 5px; }
.legend-swatch.obstacle { background: #9cab89; }
.legend-swatch.door { border-style: dashed; border-color: #7fa988; background: #e5f0df; }
.zoom-control { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.zoom-control button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; height: 34px; padding: 0 7px; border: 1px solid #d6dfcf; border-radius: 8px; background: #fffefa; font-size: 12px; }
.zoom-control button:hover { border-color: #aabda4; background: #fff; }
.zoom-control svg { width: 15px; height: 15px; }
.zoom-control > span { min-width: 35px; text-align: center; }

/* The inspector shows the next decision; its primary action stays anchored. */
.inspector-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 23px 25px; overscroll-behavior: contain; }
.inspector-heading { padding: 26px 0 21px; border-bottom: 1px solid var(--line); }
.inspector-heading h2 { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.35; letter-spacing: -.4px; }
.inspector-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.inspector-section { padding: 21px 0; border-bottom: 1px solid var(--line); }
.inspector-section:last-child { border-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.section-heading h3 { margin: 0; font-size: 14px; font-weight: 700; }
.section-heading small { color: var(--muted); font-size: 12px; }
.section-helper { margin: -4px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.preview-card { padding: 20px 17px; margin: 19px 0 0; border: 1px solid #d6e3cf; border-radius: 13px; background: #eef4e8; }
.preview-card > h3 { margin: 0 0 12px; font-size: 15px; }
.preview-card > p { margin: 12px 0 0; font-size: 12px; color: #73816b; }
.preview-stats { display: flex; align-items: stretch; }
.preview-stat { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border-right: 1px solid #d8e2d1; text-align: center; }
.preview-stat:last-child { border-right: 0; }
.preview-stat strong { font-size: 26px; line-height: 1.1; color: var(--teal); font-weight: 650; font-variant-numeric: tabular-nums; }
.preview-stat span { color: #74826b; font-size: 12px; }
.preview-card .mini-map { width: 58px; height: 74px; }
.seat-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.seat-tool { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-width: 0; min-height: 72px; padding: 6px 3px 7px; border: 1px solid #e0e7da; border-radius: 9px; background: #f7f9f2; color: var(--ink-soft); }
.seat-tool:hover { border-color: #aac3a4; background: #f0f5e9; }
.seat-tool.is-active, .seat-tool.is-selected { border-color: var(--teal); background: #eaf2e5; box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); }
.seat-tool img, .seat-tool-art { display: block; width: 43px; height: 35px; object-fit: contain; pointer-events: none; }
.seat-tool-label { display: block; font-size: 12px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.seat-tool-glyph { display: none; }
.seat-tool[data-capacity="2"]::after { content: '2'; position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #c4d1bd; border-radius: 5px; background: #fffefa; font-size: 10px; color: var(--ink-soft); }
.segmented-controls { display: flex; padding: 4px; gap: 4px; border: 1px solid #dde5d5; border-radius: 10px; background: #f2f5ec; }
.segment-button { display: flex; align-items: center; justify-content: center; flex: 1; gap: 6px; min-height: 38px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 13px; }
.segment-button.is-active, .segment-button.active { color: var(--teal); border-color: #ccdaca; background: #fffefa; box-shadow: 0 1px 3px #32432b08; font-weight: 650; }
.segment-button:hover { background: #fffefa; }
.segment-button img { width: 29px; height: 25px; object-fit: contain; }
.brush-preview { display: flex; align-items: center; gap: 15px; min-height: 93px; margin-top: 15px; padding: 13px 14px; border-radius: 11px; background: #f1f5ea; }
.brush-preview > img { display: block; width: 78px; height: 62px; object-fit: contain; flex-shrink: 0; }
.brush-preview > svg { width: 37px; height: 37px; margin: 0 16px; color: var(--teal); }
.brush-preview strong { display: block; color: var(--ink); font-size: 14px; }
.brush-preview p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.form-field > span, .form-field > label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.form-field small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-with-unit { position: relative; }
.field-with-unit input { padding-right: 40px; }
.field-with-unit em { position: absolute; right: 11px; top: 11px; font-size: 12px; font-style: normal; color: var(--muted); }
.selection-card { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 14px; border: 1px solid #d4e0cd; border-radius: 11px; background: #f6f8f0; }
.selection-card > img { display: block; width: 70px; height: 55px; object-fit: contain; flex-shrink: 0; }
.selection-card > svg { width: 28px; height: 28px; margin: 0 13px; color: #728365; }
.selection-copy { flex: 1; min-width: 0; }
.selection-copy strong { display: block; font-size: 14px; }
.selection-copy p, .selection-copy span { display: block; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.selection-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 2px; }
.small-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 37px; padding: 0 6px; border: 1px solid #cfdbca; border-radius: 7px; color: var(--ink-soft); background: #fffefa; font-size: 12px; white-space: nowrap; }
.small-button svg { width: 14px; height: 14px; }
.small-button:hover { border-color: #a3b99a; background: #fff; }
.small-button.is-active { color: white; background: var(--teal); border-color: var(--teal); }
.small-button.is-danger, .small-button.danger { color: #ac6146; }
.empty-selection { padding: 17px 13px; border: 1px dashed #cfdbc7; border-radius: 10px; color: var(--muted); background: #f8faf3; font-size: 13px; text-align: center; }
.empty-selection svg { width: 24px; height: 24px; margin: 0 auto 7px; display: block; color: #91a586; }
.empty-selection p { margin: 0; }
.readonly-note, .context-note { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0 0; padding: 11px 12px; border-radius: 9px; color: #7d704d; background: #f8f1df; font-size: 12px; line-height: 1.7; }
.readonly-note svg, .context-note svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: #a28d56; }
.context-note { color: #6f8265; background: #f1f5e9; }
.context-note svg { color: #7d9a6f; }
.context-note p, .readonly-note p { margin: 0; }
.technical-details { margin-top: 18px; padding-top: 9px; border-top: 1px solid var(--line); }
.technical-details .form-grid, .technical-grid, .identity-grid { margin-top: 12px; }
.technical-details code { word-break: break-all; font-size: 12px; }
.step-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 23px 18px; border-top: 1px solid var(--line); background: #fffefa; box-shadow: 0 -5px 15px #384b2c04; }
.step-actions .step-next { width: 100%; min-height: 46px; }
.step-actions .step-back { align-self: center; }
.step-actions > p { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.primary-button, .secondary-button, .danger-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.primary-button { color: #fff; border-color: var(--teal); background: var(--teal); }
.primary-button:hover:not(:disabled) { border-color: #194d42; background: #194d42; }
.secondary-button { color: var(--ink-soft); border-color: var(--line-strong); background: #fffefa; }
.secondary-button:hover:not(:disabled) { border-color: #9db592; background: #f2f6eb; }
.danger-button { color: #ae5c3c; border-color: #e7cbb9; background: #fff6ee; }
.danger-button:hover:not(:disabled) { border-color: #ce9d80; background: #fdeadd; }
.text-button { min-height: 33px; padding: 0 7px; color: #637d5b; background: transparent; font-size: 12px; font-weight: 500; }
.text-button:hover:not(:disabled) { color: var(--teal); background: #f0f4e9; }
.primary-button svg, .secondary-button svg, .danger-button svg, .text-button svg { width: 16px; height: 16px; }
.action-stack { display: grid; gap: 10px; }
.inspector-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Queue chips keep both their order and colour name visible. */
.queue-panel { display: grid; gap: 16px; }
.queue-lane { padding: 13px 12px; border: 1px solid #dce5d4; border-radius: 11px; background: #f7f9f1; }
.queue-lane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--ink-soft); font-size: 13px; }
.queue-lane-heading strong { font-weight: 650; }
.queue-lane-heading span, .queue-lane-heading small { color: var(--muted); font-size: 12px; }
.queue-items { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 6px; min-height: 44px; }
.queue-chip { position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 0 4px; min-width: 56px; min-height: 55px; padding: 6px 6px 5px; border: 1px solid color-mix(in srgb, var(--chip-color, #577968) 35%, #fff); border-radius: 8px; background: color-mix(in srgb, var(--chip-color, #577968) 11%, #fffefa); color: var(--ink-soft); user-select: none; cursor: grab; }
.queue-chip:active { cursor: grabbing; }
.queue-chip > svg { width: 17px; height: 20px; grid-column: 1; grid-row: 2; color: var(--chip-color, #577968); fill: color-mix(in srgb, var(--chip-color, #577968) 25%, transparent); }
.queue-chip .queue-number { grid-column: 1 / -1; align-self: start; color: #809076; font-size: 11px; font-weight: 600; line-height: 1.25; }
.queue-chip .queue-number small { font-size: 11px; font-weight: 400; }
.queue-chip .label { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.queue-chip.is-dragging { opacity: .4; }
.queue-chip.is-drop-target { box-shadow: -3px 0 0 var(--teal); }
.queue-chip .remove-chip { position: absolute; z-index: 1; display: grid; place-items: center; top: -6px; right: -5px; width: 20px; height: 20px; padding: 0; border: 1px solid #e1d2c7; border-radius: 50%; background: #fffefa; color: #a9795d; opacity: 0; transition: opacity .15s; }
.queue-chip:hover .remove-chip, .queue-chip:focus-within .remove-chip { opacity: 1; }
.queue-chip .remove-chip svg { width: 11px; height: 11px; }
.queue-chip .remove-chip:hover { background: #fbebdf; border-color: #d7ad90; }
.queue-panel.is-readonly .remove-chip { display: none; }
.queue-add-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.queue-add-row > .tool-label { grid-column: 1 / -1; margin: 0 0 3px; color: var(--muted); font-size: 12px; }
.queue-add-color { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 35px; padding: 0 7px; border: 1px solid #dbe4d3; border-radius: 7px; color: var(--ink-soft); background: #fffefa; font-size: 12px; white-space: nowrap; }
.queue-add-color svg { width: 15px; height: 15px; color: var(--chip-color, #577968); fill: color-mix(in srgb, var(--chip-color, #577968) 15%, transparent); }
.queue-add-color:hover { border-color: var(--chip-color, #577968); background: color-mix(in srgb, var(--chip-color, #577968) 7%, #fffefa); }
.queue-add-color.is-selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.queue-empty { width: 100%; margin: 0; padding: 8px 3px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.queue-dot { display: block; width: 11px; height: 11px; flex-shrink: 0; border-radius: 50%; background: var(--chip-color, #7c8c72); }

/* Count comparisons use a small table rather than a paragraph of numbers. */
.balance-panel { display: grid; gap: 11px; }
.balance-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px; border: 1px solid #d6e3cf; border-radius: 10px; background: #edf5e7; }
.balance-total > div { display: grid; gap: 4px; min-width: 0; }
.balance-total strong { font-size: 15px; font-weight: 650; }
.balance-total span { color: #78866e; font-size: 12px; }
.balance-total.is-attention { border-color: #eadcc0; background: #fbf3df; }
.balance-total-status { flex-shrink: 0; color: #518152; font-size: 12px; font-weight: 650; white-space: nowrap; }
.balance-total-status.is-alert { color: #a57935; }
.balance-table { margin-top: 10px; border: 1px solid #dfe6d7; border-radius: 9px; overflow: hidden; background: #fffefa; }
.balance-table-head, .balance-row { display: grid; grid-template-columns: minmax(47px, 1fr) 43px 43px minmax(56px, auto); align-items: center; gap: 6px; }
.balance-table-head { padding: 9px; background: #f2f6eb; color: #7b8971; font-size: 11px; text-align: center; }
.balance-table-head > :first-child { text-align: left; }
.balance-table-head > :last-child { text-align: right; }
.balance-row { min-height: 43px; padding: 8px 9px; border-top: 1px solid #eaf0e2; }
.balance-row.is-unresolved { background: #fff5ed; }
.balance-row > strong { grid-column: 1; grid-row: 1; padding-left: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.balance-swatch { grid-column: 1; grid-row: 1; width: 12px; height: 12px; border: 1px solid #00000012; border-radius: 4px; background: var(--balance-color, var(--seat-color, #7d8d87)); }
.balance-number { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.balance-number b { color: var(--ink); font-size: 14px; font-weight: 600; }
.balance-number small { font-size: 11px; color: var(--muted); }
.balance-outcome { color: #54834f; font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.balance-outcome.is-extra { color: #b16847; }
.balance-outcome.is-missing { color: #ab7d36; }
.balance-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 11px 12px; border: 1px solid #eed7c3; border-radius: 9px; background: #fff4e9; color: #a26c46; font-size: 12px; }
.balance-warning svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; }
.balance-empty, .balance-help, .balance-helper { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.balance-empty { padding: 10px; margin: 0; }
.balance-helper.is-warning { color: #aa6a44; }
.validation-summary { display: grid; gap: 10px; }
.validation-banner { display: flex; align-items: flex-start; gap: 9px; padding: 13px 12px; border: 1px solid #d0e0c9; border-radius: 10px; color: #598253; background: #edf5e6; font-size: 13px; line-height: 1.65; }
.validation-banner.is-invalid { color: #a56a42; border-color: #edd8c3; background: #fff3e7; }
.validation-banner svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.validation-banner p { margin: 0; }
.issue-list { display: grid; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }
.issue-item { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 13px 12px; border-left: 3px solid #dcb48b; border-radius: 0 9px 9px 0; background: #fbf5e9; color: #8a775b; font-size: 12px; line-height: 1.65; }
.issue-item > span, .issue-copy { flex: 1; min-width: 0; }
.issue-item strong { color: #806547; font-size: 13px; font-weight: 650; }
.issue-item p { margin: 4px 0 0; }
.issue-item code { font-size: 12px; word-break: break-all; }
.issue-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.issue-location { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 31px; margin-top: 6px; padding: 0 9px; border: 1px solid #e5d0b2; border-radius: 7px; color: #986d3d; background: #fffdf7; font-size: 12px; }
.issue-location:hover { background: #fff6e7; border-color: #cdad85; }
.issue-location svg { margin: 0; width: 13px; height: 13px; }
.check-card { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.check-icon { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 9px; color: #548451; background: #eaf2e2; }
.check-icon svg { width: 17px; height: 17px; }
.check-copy { min-width: 0; flex: 1; }
.check-copy h3 { margin: 1px 0 0; font-size: 14px; font-weight: 650; }
.check-copy p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.check-card.is-invalid .check-icon { color: #ab783f; background: #f8ecd9; }
.completion-card { padding: 23px 17px; margin: 20px 0 0; border: 1px solid #cbdcc2; border-radius: 12px; text-align: center; background: #edf5e6; }
.completion-card > svg { width: 37px; height: 37px; margin: 0 auto 11px; color: #4d8050; }
.completion-card h3 { margin: 0; font-size: 19px; }
.completion-card p { margin: 8px 0 0; color: #74856a; font-size: 13px; line-height: 1.75; }
.change-package { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px dashed #cadcc0; border-radius: 10px; color: #718469; background: #f4f8ed; font-size: 12px; }
.change-package svg { flex-shrink: 0; width: 17px; height: 17px; }

/* Shared game colours keep the board, queue and comparison rows consistent. */
.color-0 { --seat-color: #7b8678; --chip-color: #7b8678; }
.color-1 { --seat-color: #5c99d7; --chip-color: #538dcb; }
.color-2 { --seat-color: #a4aba5; --chip-color: #89938b; }
.color-3 { --seat-color: #d98eae; --chip-color: #c9789f; }
.color-4 { --seat-color: #d86b60; --chip-color: #cb695f; }
.color-5 { --seat-color: #e7c357; --chip-color: #bb9a37; }
.color-21 { --seat-color: #ac8058; --chip-color: #a37854; }
.color-22 { --seat-color: #e19453; --chip-color: #cb844c; }
.color-23 { --seat-color: #a18aca; --chip-color: #967abc; }
.color-24 { --seat-color: #7eb66a; --chip-color: #6ea45d; }
.color-25 { --seat-color: #71b8bb; --chip-color: #579fa3; }
.inline-state { display: flex; align-items: flex-start; gap: 10px; margin: 15px 6px; padding: 14px 11px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9f1; }
.inline-state > svg { flex-shrink: 0; color: var(--teal); width: 19px; height: 19px; margin-top: 2px; }
.inline-state strong { display: block; font-size: 13px; }
.inline-state p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.inline-state.is-error { border-color: #e9d0ba; background: #fff4e9; }
.inline-state.is-error > svg { color: var(--accent-dark); }
.inline-state .secondary-button { margin-top: 10px; min-height: 34px; padding: 0 10px; font-size: 12px; }
.list-empty { margin: 34px 15px; color: var(--muted); text-align: center; }
.list-empty svg { width: 28px; height: 28px; margin-bottom: 10px; color: #849c78; }
.list-empty p { margin: 0; font-size: 13px; line-height: 1.75; }
.toast-region { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(390px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid #cfdec5; border-radius: 12px; background: #fffef9; box-shadow: 0 8px 32px #35462d1c; animation: toast-in .2s ease-out; pointer-events: auto; }
.toast > svg { flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px; color: var(--teal); }
.toast p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.toast.is-error { border-color: #e3c4aa; background: #fff7ee; }
.toast.is-error > svg { color: var(--accent-dark); }
.loading-overlay { position: fixed; z-index: 20; inset: var(--header-height) 0 0; display: grid; place-content: center; gap: 14px; background: #f7f7f2e8; backdrop-filter: blur(4px); }
.loading-overlay p { margin: 0; color: var(--muted); text-align: center; font-size: 14px; }
.loader { width: 28px; height: 28px; margin: 0 auto; border: 2px solid #d6e2cb; border-top-color: var(--teal); border-radius: 50%; animation: spin .85s linear infinite; }

/* Names used by the step renderer. */
.workflow-step > span:last-child { font-size: 14px; font-weight: 650; }
.step-connector { display: block; width: 18px; flex: 0 1 18px; height: 1px; background: #d9e1d2; }
.library-bottom { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; border-top: 1px solid var(--line); color: #829078; background: #f7f9f1; font-size: 11px; }
.library-bottom svg { width: 14px; height: 14px; }
.canvas-actions { display: flex; align-items: center; gap: 8px; }
.save-state.is-dirty { color: #ad7134; }
.tool-group { display: flex; align-items: center; gap: 3px; }
.tool-group-history { margin-left: auto; padding-left: 9px; border-left: 1px solid #dae1d5; }
.canvas-guidance { display: flex; align-items: center; gap: 10px; min-height: 35px; color: #71816c; font-size: 13px; }
.canvas-guidance > svg { color: #7b9870; width: 18px; height: 18px; }
.canvas-empty .primary-button { margin-top: 20px; }
.step-panel-heading { padding: 26px 0 21px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.step-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-panel-heading h2 { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.35; letter-spacing: -.4px; }
.step-panel-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.preview-card-label { display: block; margin-bottom: 6px; color: #788a6b; font-size: 12px; }
.preview-card > h3 { margin-bottom: 19px; font-size: 18px; }
.preview-facts { display: flex; align-items: stretch; }
.preview-facts > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 5px; padding: 0 8px; border-right: 1px solid #d8e2d1; text-align: center; }
.preview-facts > div:last-child { border-right: 0; }
.preview-facts strong { font-size: 26px; line-height: 1.1; color: var(--teal); font-weight: 650; font-variant-numeric: tabular-nums; }
.preview-facts span { color: #74826b; font-size: 12px; }
.step-callout { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0 0; padding: 12px; color: #72846a; background: #f2f6eb; border-radius: 9px; font-size: 12px; line-height: 1.7; }
.step-callout > svg { width: 16px; height: 16px; margin-top: 2px; color: #7c9a6f; }
.step-callout p { margin: 0; }
.step-callout > span { flex: 1; }
.step-callout .text-button { margin: -5px; }
.start-checklist { list-style: none; margin: 26px 0 0; padding: 0; }
.start-checklist li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-bottom: 20px; }
.start-checklist li:last-child { padding-bottom: 0; }
.start-checklist li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: #dde5d5; }
.start-checklist li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #dce5d5; border-radius: 50%; color: #819375; background: #f7f9f2; font-size: 11px; font-weight: 600; }
.start-checklist strong { display: block; font-size: 13px; color: #5e7555; font-weight: 650; }
.start-checklist p { margin: 3px 0 0; color: #8a9780; font-size: 12px; }
.selected-card { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 17px 0 0; padding: 13px; border: 1px solid #cfdcc7; border-radius: 11px; background: #f2f6ea; }
.selected-seat-preview { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 49px; }
.selected-seat-preview img { width: 100%; height: 100%; object-fit: contain; }
.selected-seat-preview svg { width: 27px; height: 27px; color: #84967a; }
.selected-seat-copy { flex: 1; min-width: 0; }
.selected-seat-copy span { display: block; color: #8a987e; font-size: 12px; }
.selected-seat-copy strong { display: block; margin-top: 3px; color: #4f6946; font-size: 13px; font-weight: 650; }
.selected-actions { display: flex; align-items: center; gap: 6px; width: 100%; }
.selected-actions .secondary-button, .selected-actions .text-button { flex: 1; min-height: 36px; padding: 0 7px; font-size: 12px; }
.selected-actions svg { width: 14px; height: 14px; }
.danger-text { color: #aa7450; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.segmented { display: flex; padding: 4px; gap: 4px; margin-bottom: 13px; border: 1px solid #dde5d5; border-radius: 10px; background: #f2f5ec; }
.segmented button { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 37px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 12px; white-space: nowrap; }
.segmented button.is-active { color: var(--teal); border-color: #ccdaca; background: #fffefa; font-weight: 650; }
.seat-choice { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-width: 0; min-height: 72px; padding: 6px 3px 7px; border: 1px solid #e0e7da; border-radius: 9px; background: #f7f9f2; color: var(--ink-soft); }
.seat-choice:hover { border-color: #aac3a4; background: #f0f5e9; }
.seat-choice.is-active { border-color: var(--teal); background: #eaf2e5; box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); }
.seat-choice img { display: block; width: 43px; height: 35px; object-fit: contain; pointer-events: none; }
.seat-choice span { font-size: 12px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.brush-preview > div { min-width: 0; flex: 1; }
.brush-preview > div > span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.brush-preview > button { flex: 0 0 100%; min-height: 35px; }
.brush-preview:has(> button) { flex-wrap: wrap; gap: 9px 13px; }
.detail-body { display: grid; gap: 14px; padding-top: 14px; }
.detail-body .section-helper { margin: 0; }
.secondary-button.is-active { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.queue-lane { margin-top: 17px; }
.queue-lane-heading h3 { margin: 0; font-size: 14px; font-weight: 650; }
.queue-chip .queue-index { grid-column: 1 / -1; align-self: start; color: #809076; font-size: 11px; font-weight: 600; line-height: 1.25; }
.queue-chip > span:not(.queue-index):not(.queue-number) { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.queue-add-color .add-mark { color: #94a285; margin-left: 2px; }
.fill-queue { width: 100%; min-height: 38px; margin-top: 12px; font-size: 12px; }
.balance-total > b { font-size: 12px; font-weight: 650; text-align: right; }
.balance-total > b.is-balanced { color: #54834f; }
.balance-total > b.is-alert { color: #ad7b3b; }
.balance-color { display: flex; align-items: center; gap: 7px; min-width: 0; }
.balance-color strong { font-size: 12px; font-weight: 600; }
.balance-color .balance-swatch { flex-shrink: 0; }
.balance-row > b { font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.technical-details + .section-helper { margin-top: 17px; }
.issue-copy details { margin-top: 7px; color: #968168; font-size: 12px; }
.issue-copy details summary { cursor: pointer; }
.issue-copy details span { display: block; padding-top: 5px; word-break: break-word; }
.validation-banner.is-pending { color: #7b886e; background: #f1f5e9; border-color: #dce5d3; }
.validation-banner.is-pending > svg { animation: spin .9s linear infinite; }
.step-actions > .primary-button { min-height: 46px; }
.help-button { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 1px solid #cbd5c8; border-radius: 50%; color: #7b8b75; background: transparent; font-size: 13px; font-weight: 600; line-height: 1; }
.help-button:hover, .help-button:focus-visible, .help-button[aria-describedby] { color: var(--teal); border-color: #78957c; background: #eaf2e7; }
.help-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(290px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 13px 15px; border: 1px solid #d2ddce; border-radius: 10px; color: #40584a; background: #fffefa; box-shadow: 0 8px 26px #243b3522; font-size: 13px; line-height: 1.8; }
.help-tooltip[hidden] { display: none; }
.detail-help { display: flex; justify-content: flex-end; }
.field-heading { display: flex; align-items: center; gap: 7px; }
.field-heading > label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.filter-field { display: grid; gap: 5px; min-width: 0; }
.filter-field .help-button { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
.validation-banner strong { margin: 0; }
.canvas-footer-left > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cell-pop { from { opacity: .6; } to { opacity: 1; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 1600px) {
  .workspace { grid-template-columns: 270px minmax(0, 1fr) 370px; }
  .app-header { padding-left: 29px; padding-right: 29px; }
  .workflow-step { padding-left: 18px; padding-right: 18px; }
  .inspector-content, .step-actions { padding-left: 28px; padding-right: 28px; }
  .seat-tool { min-height: 79px; } .seat-tool img { width: 48px; height: 39px; }
  .seat-choice { min-height: 79px; } .seat-choice img { width: 48px; height: 39px; }
}
@media (max-width: 1200px) {
  .app-header { gap: 12px; padding-left: 18px; padding-right: 18px; }
  .brand-copy h1, .brand-lockup h1 { font-size: 17px; } .brand-mark { width: 40px; height: 40px; }
  .workflow-nav { gap: 3px; } .workflow-step { gap: 7px; padding: 10px 8px; }
  .header-actions { gap: 10px; } .connection-label { display: none; }
  .workspace { grid-template-columns: 220px minmax(0, 1fr) 320px; }
  .inspector-content, .step-actions { padding-left: 18px; padding-right: 18px; }
  .canvas-header, .canvas-guide { padding-left: 20px; padding-right: 20px; }
  .editor-toolbar { padding-left: 14px; padding-right: 14px; }
  .tool-button { padding-left: 9px; padding-right: 9px; }
  .canvas-footer { padding-left: 17px; padding-right: 17px; }
  .map-legend { gap: 5px 9px; } .canvas-footer .legend-item { font-size: 11px; }
}
@media (max-width: 1050px) and (min-width: 851px) {
  :root { --header-height: 78px; }
  .workspace { grid-template-columns: 195px minmax(0, 1fr) 300px; }
  .brand-copy p, .brand-lockup p, .step-copy small { display: none; }
  .workflow-step { gap: 6px; min-height: 47px; padding: 8px; } .step-copy strong { font-size: 13px; }
  .step-number { flex-basis: 26px; width: 26px; height: 26px; font-size: 12px; }
  .pane-heading { padding-left: 14px; padding-right: 14px; }
  .library-filters { padding-left: 10px; padding-right: 10px; }
  .level-row { grid-template-columns: 33px minmax(0, 1fr); gap: 4px 8px; padding: 9px 8px; }
  .level-preview { width: 33px; grid-row: 1 / 3; } .mini-map { width: 32px; height: 45px; }
  .level-flags { flex-direction: row; grid-column: 2; align-items: center; } .level-main { align-self: end; } .level-meta { margin-top: 2px; }
  .canvas-header { min-height: 81px; padding: 16px; } .canvas-header h2 { font-size: 20px; }
  .save-indicator { max-width: 78px; white-space: normal; text-align: right; line-height: 1.5; }
  .editor-toolbar { padding: 8px 9px; gap: 5px; } .tool-button { gap: 5px; padding: 0 7px; font-size: 12px; } .history-tools { padding-left: 5px; }
  .canvas-guide { gap: 9px; padding: 11px 15px; } .guide-copy { display: grid; gap: 2px; }
  .canvas-stage, .map-viewport { padding: 9px; } .canvas-footer { gap: 8px; padding: 8px 12px; }
  .map-legend { gap: 5px 7px; } .legend-item { gap: 4px; }
  .inspector-content, .step-actions { padding-left: 16px; padding-right: 16px; }
  .seat-palette { gap: 5px; } .seat-tool { min-height: 68px; } .seat-tool img { width: 39px; height: 33px; }
  .seat-choice { min-height: 68px; } .seat-choice img { width: 39px; height: 33px; }
  .step-connector { width: 8px; flex-basis: 8px; }
  .workflow-step > span:last-child { font-size: 12px; }
  .balance-table-head, .balance-row { grid-template-columns: minmax(42px, 1fr) 38px 38px 53px; gap: 4px; } .balance-number small { display: none; }
}
@media (max-height: 760px) and (min-width: 851px) {
  :root { --header-height: 74px; }
  .canvas-header { min-height: 77px; padding-top: 13px; padding-bottom: 13px; }
  .editor-toolbar { padding-top: 7px; padding-bottom: 7px; }
  .canvas-guide { min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
  .canvas-stage { padding-top: 8px; padding-bottom: 8px; }
  .canvas-footer { min-height: 49px; padding-top: 6px; padding-bottom: 6px; }
  .inspector-heading { padding-top: 20px; padding-bottom: 17px; }
  .step-panel-heading { padding-top: 20px; padding-bottom: 17px; }
  .inspector-section { padding-top: 17px; padding-bottom: 17px; }
  .step-actions { padding-top: 12px; padding-bottom: 12px; gap: 5px; }
}
@media (max-width: 850px) {
  :root { --header-height: 127px; }
  .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 60px 66px; gap: 0; flex-basis: var(--header-height); padding: 0 14px; }
  .brand-lockup { gap: 9px; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .brand-mark img { width: 28px; height: 28px; } .brand-copy h1, .brand-lockup h1 { font-size: 16px; } .brand-copy p, .brand-lockup p { display: none; }
  .header-actions { grid-column: 2; grid-row: 1; gap: 9px; } .header-actions button { min-height: 36px; height: 36px; font-size: 12px; }
  .workflow-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; padding-bottom: 10px; }
  .workflow-step { justify-content: center; min-height: 48px; padding: 7px 5px; gap: 7px; border-radius: 9px; }
  .step-connector { display: none; } .workflow-step > span:last-child { font-size: 13px; }
  .step-number { width: 25px; height: 25px; flex-basis: 25px; font-size: 12px; } .step-copy strong { font-size: 13px; } .step-copy small { display: none; }
  .mobile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 0 47px; border-bottom: 1px solid var(--line); background: #fffefa; }
  .mobile-tab { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; }
  .mobile-tab svg { width: 16px; height: 16px; } .mobile-tab.is-active { border-bottom-color: var(--teal); color: var(--teal); font-weight: 650; background: #f5f8f0; }
  .workspace { position: relative; display: block; }
  .pane, .library-pane, .canvas-pane, .inspector-pane { display: none; width: 100%; height: 100%; min-height: 0; }
  .pane.is-mobile-visible, .library-pane.is-mobile-visible, .canvas-pane.is-mobile-visible, .inspector-pane.is-mobile-visible { display: flex; }
  .library-pane, .inspector-pane { border: 0; }
  .library-filters { padding-left: 18px; padding-right: 18px; } .pane-heading { padding: 19px 21px 14px; }
  .quick-filter { min-height: 38px; } .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-list { padding-left: 13px; padding-right: 13px; }
  .level-row { grid-template-columns: 51px minmax(0, 1fr) auto; gap: 13px; padding: 12px 13px; min-height: 90px; }
  .level-preview { width: 51px; } .mini-map { width: 44px; height: 60px; } .level-title { font-size: 16px; } .level-meta { font-size: 13px; }
  .status-pill { font-size: 12px; padding: 2px 8px; }
  .canvas-header { min-height: 82px; padding: 15px 19px; } .canvas-header h2 { font-size: 21px; }
  .editor-toolbar { padding: 9px 13px; gap: 7px; } .tool-button { padding-left: 10px; padding-right: 10px; }
  .canvas-guide { min-height: 65px; padding: 11px 18px; } .guide-copy { display: grid; gap: 2px; }
  .canvas-stage { padding: 9px; } .map-viewport { padding: 10px; }
  .canvas-footer { min-height: 54px; padding: 8px 16px; } .map-legend { gap: 6px 11px; } .canvas-footer .legend-item { font-size: 12px; }
  .inspector-content { width: 100%; max-width: 550px; margin: 0 auto; padding: 0 23px 25px; } .inspector-heading { padding-top: 23px; }
  .step-actions { padding: 13px 23px 15px; } .step-actions > * { width: 100%; max-width: 504px; margin-left: auto; margin-right: auto; }
  .seat-palette { gap: 9px; } .seat-tool { min-height: 82px; } .seat-tool img { width: 53px; height: 43px; } .seat-tool-label { font-size: 13px; }
  .seat-choice { min-height: 82px; } .seat-choice img { width: 53px; height: 43px; } .seat-choice span { font-size: 13px; }
  .brush-preview > img { width: 86px; height: 68px; } .queue-chip .remove-chip { opacity: 1; } .queue-chip { min-width: 62px; min-height: 58px; } .queue-add-color { min-height: 40px; }
  .balance-table-head, .balance-row { grid-template-columns: minmax(60px, 1fr) 62px 62px 75px; }
  .balance-table-head { font-size: 12px; } .balance-row { min-height: 45px; } .balance-outcome, .balance-row > strong { font-size: 13px; }
  .toast-region { right: 16px; bottom: 16px; }
}
@media (max-width: 470px) {
  .app-header { padding-left: 10px; padding-right: 10px; } .workflow-nav { gap: 3px; }
  .workflow-step { gap: 5px; padding-left: 3px; padding-right: 3px; } .step-copy strong { font-size: 12px; }
  .workflow-step > span:last-child { font-size: 12px; }
  .step-number { flex-basis: 23px; width: 23px; height: 23px; font-size: 11px; }
  .header-actions { gap: 7px; } .header-actions button { padding-left: 8px; padding-right: 8px; } .connection-state { gap: 0; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canvas-header { padding-left: 14px; padding-right: 14px; } .canvas-header h2 { font-size: 20px; } .canvas-subtitle { gap: 5px; font-size: 12px; }
  .save-indicator { max-width: 86px; text-align: right; white-space: normal; }
  .editor-toolbar { padding: 8px 9px; gap: 6px; } .tool-switcher, .history-tools { gap: 2px; }
  .tool-button { gap: 5px; padding: 0 7px; min-height: 38px; font-size: 12px; } .tool-button svg { width: 15px; height: 15px; }
  .history-tools { padding-left: 5px; } .history-tools .tool-button { padding-left: 5px; padding-right: 5px; }
  .canvas-guide { padding-left: 13px; padding-right: 13px; gap: 9px; } .guide-copy strong { font-size: 13px; } .guide-copy span { font-size: 12px; }
  .canvas-footer { padding: 8px 11px; gap: 8px; } .map-legend { gap: 4px 8px; } .canvas-footer .legend-item { font-size: 11px; }
  .zoom-control { gap: 4px; } .zoom-control button { padding-left: 5px; padding-right: 5px; }
  .inspector-content, .step-actions { padding-left: 19px; padding-right: 19px; }
  .seat-palette { gap: 6px; } .seat-tool { min-height: 74px; } .seat-tool img { width: 45px; height: 37px; } .seat-tool-label { font-size: 12px; }
  .seat-choice { min-height: 74px; } .seat-choice img { width: 45px; height: 37px; } .seat-choice span { font-size: 12px; }
  .balance-table-head, .balance-row { grid-template-columns: minmax(51px, 1fr) 43px 43px 63px; gap: 5px; }
  .balance-table-head { font-size: 11px; } .balance-outcome, .balance-row > strong { font-size: 12px; } .form-grid { gap: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}