* { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: #3a3a3a #141414; }
*:focus { outline: none; }
:root {
    --panel-min: 280px;
    --code-panel-width: 280px;
    --board-side-space: 405px;
    --board-y-space: 170px;
    --board-max: 680px;
    --board: min(var(--board-max), calc(100vh - var(--board-y-space)), calc(100vw - var(--board-side-space)));
    --sq: calc(var(--board) / 8);
    --piece: calc(var(--sq) * 0.8667);
    --accent: #d4a64a;
    --accent-bright: #e8be60;
    --accent-soft: rgba(212,166,74,0.14);
}
html { height: 100%; overflow: hidden; color-scheme: dark; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
::-webkit-scrollbar-corner { background: #141414; }
body { background: #0F0F10; color: #c8c8c8; font-family: 'SF Mono', 'Cascadia Code', 'Fira Mono', monospace; font-size: 12px; display: flex; flex-direction: row; width: 100vw; height: 100vh; overflow: hidden; }
html.code-mode-active { --panel-min: var(--code-panel-width); --board-side-space: 480px; --board-y-space: 380px; --board-max: 420px; }
html.code-mode-active #eval-wrap { display: none; }
html.code-mode-active #board-area { justify-content: flex-start; align-items: stretch; }
html.code-mode-active .captured-inline { display: none; }
.build-readout { display: none; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 14px 0 0; background: #0F0F10; border: 1px solid #1f1f1f; font-size: 11px; line-height: 1.4; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; }
html.code-mode-active .build-readout { display: flex; }
.build-readout-row { display: flex; justify-content: space-between; gap: 12px; }
.build-readout-label { color: #666; }
.build-readout-val { color: #cfcfcf; font-variant-numeric: tabular-nums; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-readout-val.accent { color: #e8b964; }
.build-readout-val.good { color: #7bc26b; }

#top { display: flex; align-items: stretch; flex: 1; min-height: 0; overflow: hidden; }

/* Evaluation bar. */
#eval-wrap { position: absolute; right: 100%; top: 0; margin-right: 8px; width: 30px; height: var(--board); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 0; }
#eval-bar { width: 30px; height: var(--board); background: #2a2a2a; position: relative; border-radius: 0; overflow: hidden; }
#eval-fill { position: absolute; bottom: 0; width: 100%; background: #ddd; transition: height 0.3s; height: 50%; z-index: 1; }
#eval-text { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 800; pointer-events: none; z-index: 2; letter-spacing: 0.2px; }
#eval-text.eval-white-side { bottom: 4px; top: auto; color: #2a2a2a; }
#eval-text.eval-black-side { top: 4px; bottom: auto; color: #e6e6e6; }

/* Board layout. */
#board-area { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 20px 12px 60px; flex: 0 0 auto; }
html.code-mode-active #board-area { flex: 0 0 auto; min-width: 0; padding: 14px 16px; gap: 0; }
.code-board-toolbar { display: none; width: 100%; padding: 14px 0 0; flex-direction: column; gap: 14px; }
html.code-mode-active .code-board-toolbar { display: flex; }
.code-board-toolbar .toolbar-section { display: flex; flex-direction: column; gap: 6px; }
.code-board-toolbar .toolbar-section-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; text-transform: lowercase; letter-spacing: 1.4px; }
.code-board-toolbar .toolbar-section-label::before { content: '# '; color: #4a4a4a; }
.code-board-toolbar .toolbar-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.code-board-toolbar button { padding: 4px 10px; font-size: 11px; }
.code-board-toolbar .build-limit-row { gap: 6px; align-items: center; flex-wrap: nowrap; }
.code-board-toolbar #build-limit-mode { flex: 0 0 auto; width: auto; }
.code-board-toolbar .build-limit-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.code-board-toolbar .build-limit-wrap input[type="range"] { flex: 1; min-width: 60px; }
.code-board-toolbar .build-limit-wrap input[type="number"] { width: 50px; flex-shrink: 0; }
.code-board-toolbar .build-limit-wrap #build-time-ms { flex: 1; width: auto; min-width: 0; }
.code-board-toolbar .build-limit-unit { color: #666; font-size: 10px; }
.build-movegen-badge { font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10.5px; color: #aaa; padding: 4px 0 0; white-space: pre-wrap; }
.build-movegen-badge.ok   { color: #84c756; }
.build-movegen-badge.warn { color: #e6944e; }
.build-movegen-badge.err  { color: #e05b57; }
.build-movegen-inline { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; margin-right: 8px; }
.build-movegen-inline .build-movegen-row { display: flex; align-items: center; gap: 4px; }
.build-movegen-inline .build-movegen-row button { padding: 4px 8px; font-size: 11px; }
.build-movegen-inline .build-movegen-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; margin-right: 4px; }
.build-movegen-inline .build-movegen-label::before { content: '# '; color: #4a4a4a; }
.build-movegen-inline .build-movegen-badge { padding: 0; font-size: 10px; max-width: 280px; }
#board.board-custom { position: relative; overflow: hidden; }
#board.board-custom .cb-square { box-sizing: border-box; cursor: pointer; }
#board.board-custom .cb-square-sel { box-shadow: inset 0 0 0 2px var(--accent); }
#board.board-custom .cb-square-dest::after { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: rgba(0,0,0,0.22); pointer-events: none; }
#board-outer { display: grid; grid-template-columns: var(--board); column-gap: 0; row-gap: 2px; align-items: start; }
#board-row { display: flex; flex-direction: row; align-items: flex-start; gap: 0; }
.player-label { grid-column: 1; width: var(--board); min-height: 0; color: #999; font-size: 14px; text-align: left; background: transparent; border: 0; border-radius: 0; padding: 4px 0; white-space: nowrap; overflow: visible; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; position: relative; line-height: 1.2; }
.player-clock { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; font-variant-numeric: tabular-nums; background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 0; padding: 3px 7px; color: #888; letter-spacing: 0.5px; }
.player-label.active .player-clock { color: #ddd; border-color: #3a3a3a; }
.player-clock.low { color: #e05555 !important; border-color: #5a2020 !important; animation: clock-pulse 1s ease-in-out infinite; }
@keyframes clock-pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.player-label.active { color: #ddd; background: transparent; border-color: #2a2a2a; }
.player-label.active .player-name-text::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #55d66f; box-shadow: 0 0 6px rgba(85,214,111,0.55); vertical-align: middle; flex-shrink: 0; }
.player-name-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; position: relative; }
#top-player .player-name-text { order: 2; }
#top-player .captured-inline { order: 1; }
.player-label.thinking .player-name-text { overflow: visible; }
.player-label.thinking .player-name-text::after { content: 'thinking...'; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); color: #777; font-size: 10px; font-style: italic; white-space: nowrap; pointer-events: none; }
.captured-inline { display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 22px; }
.captured-inline img { width: 22px; height: 22px; margin-left: -4px; opacity: 0.82; }
.captured-inline .mat-plus { margin-left: 5px; color: #ddd; font-size: 13px; }
#board-col { display: flex; flex-direction: column; position: relative; }
#board { display: grid; grid-template-columns: repeat(8, var(--sq)); grid-template-rows: repeat(8, var(--sq)); border-radius: 0; overflow: visible; position: relative; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
#rank-labels { position: absolute; top: 0; left: 0; height: var(--board); width: var(--sq); margin: 0; padding: 0; pointer-events: none; display: flex; flex-direction: column; z-index: 0; }
#board-col { --sq-light: #d4c5a9; --sq-dark: #967a5f; }
#rank-labels { z-index: 0; }
#rank-labels span { width: var(--sq); height: var(--sq); display: flex; align-items: flex-start; justify-content: flex-start; padding: calc(var(--sq) * 0.05) 0 0 calc(var(--sq) * 0.08); font-size: calc(var(--sq) * 0.18); font-weight: 800; box-sizing: border-box; line-height: 1; }
/* Rank labels sit on the a-file. From white's perspective the a-file alternates
   light(a8), dark(a7), light(a6)... so label on a8 takes the dark color. */
#rank-labels span:nth-child(odd) { color: var(--sq-dark); }
#rank-labels span:nth-child(even) { color: var(--sq-light); }
#file-labels { position: absolute; bottom: 0; left: 0; width: var(--board); margin: 0; padding: 0; display: flex; pointer-events: none; z-index: 0; }
#file-labels span { width: var(--sq); height: var(--sq); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 calc(var(--sq) * 0.08) calc(var(--sq) * 0.05) 0; font-size: calc(var(--sq) * 0.18); font-weight: 800; box-sizing: border-box; line-height: 1; }
/* File labels sit on rank 1. The a1 square is dark, b1 light, c1 dark...
   so label 'a' takes the light color (contrasts with dark a1). */
#file-labels span:nth-child(odd) { color: var(--sq-light); }
#file-labels span:nth-child(even) { color: var(--sq-dark); }
/* Flipped board: rank order reverses (rank 1 at top, file 'h' at left), so
   the alternation parity flips for both label sets. */
#board.flipped + #rank-labels span:nth-child(odd) { color: var(--sq-light); }
#board.flipped + #rank-labels span:nth-child(even) { color: var(--sq-dark); }
#board.flipped + #rank-labels + #file-labels span:nth-child(odd) { color: var(--sq-dark); }
#board.flipped + #rank-labels + #file-labels span:nth-child(even) { color: var(--sq-light); }
#board-row { grid-column: 1; }

/* Board squares. */
.sq { width: var(--sq); height: var(--sq); display: flex; align-items: center; justify-content: center; position: relative; cursor: default; user-select: none; }
.sq.light { background: #d4c5a9; }
.sq.dark  { background: #967a5f; }
#board.board-image .sq.light, #board.board-image .sq.dark { background: transparent; }
.sq.sel   { box-shadow: inset 0 0 0 9999px rgba(255, 241, 91, 0.7); }
.sq.valid::after { content:''; position:absolute; width:calc(var(--sq) * 0.32); height:calc(var(--sq) * 0.32); border-radius:50%; background:rgba(0,0,0,0.22); pointer-events:none; z-index:3; }
.sq.valid.occ::after { width:calc(var(--piece) * 0.88); height:calc(var(--piece) * 0.88); border-radius:50%; background:rgba(0,0,0,0.08); border:calc(var(--sq) * 0.045) solid rgba(0,0,0,0.24); }
.sq.drag-target::before { content:''; position:absolute; inset:calc(var(--sq) * 0); border:calc(var(--sq) * 0.06) solid rgba(255,255,255,0.62); border-radius:0; pointer-events:none; z-index:4; }
.sq.check::after { content:''; position:absolute; width:calc(var(--sq) - 2px); height:calc(var(--sq) - 2px); border-radius:50%; background:radial-gradient(circle, rgba(255,35,35,0.72) 0%, rgba(255,35,35,0.42) 38%, rgba(255,35,35,0.14) 62%, rgba(255,35,35,0) 78%); filter:blur(1px); pointer-events:none; z-index:1; }
@property --king-tilt { syntax: '<number>'; inherits: true; initial-value: 1; }
:root { --king-tilt: 1; }
.sq.mate img { transform: translate(11%, -1%) rotate(calc(-58deg * var(--king-tilt))); transform-origin: 50% 92%; animation: king-fall 620ms both; }
html.no-mate-anim .sq.mate img { transform: none; animation: none; }
@keyframes king-fall {
    0% { transform: translate(0,0) rotate(0deg); animation-timing-function: cubic-bezier(.55,0,1,.75); }
    72% { transform: translate(13%, -1%) rotate(calc(-66deg * var(--king-tilt))); animation-timing-function: cubic-bezier(.12,.95,.25,1); }
    85% { transform: translate(8%, -1%) rotate(calc(-51deg * var(--king-tilt))); animation-timing-function: cubic-bezier(.55,0,1,.8); }
    96% { transform: translate(12%, -1%) rotate(calc(-60deg * var(--king-tilt))); animation-timing-function: cubic-bezier(.12,.85,.25,1); }
    100% { transform: translate(11%, -1%) rotate(calc(-58deg * var(--king-tilt))); }
}
.sq.lf::before, .sq.lt::before { content:''; position:absolute; inset:0; background:rgba(184,168,0,0.16); pointer-events:none; z-index:1; }
.sq.lt::before { background:rgba(184,168,0,0.22); }
.sq.grab { cursor: grab; }
.sq img { width: var(--piece); height: var(--piece); pointer-events: none; position: relative; z-index:2; }
.move-grade-square { position:absolute; inset:0; pointer-events:none; z-index:1; }
.move-grade-square.best,
.move-grade-square.excellent { background:rgba(93, 224, 121, 0.34); }
.move-grade-square.book { background:rgba(130, 92, 54, 0.34); }
.move-grade-square.good { background:rgba(82, 148, 102, 0.28); }
.move-grade-square.inaccuracy { background:rgba(226, 201, 55, 0.38); }
.move-grade-square.mistake { background:rgba(222, 127, 42, 0.40); }
.move-grade-square.blunder { background:rgba(214, 55, 55, 0.44); }
.move-grade { position:absolute; right:calc(var(--sq) * 0.08); top:calc(var(--sq) * 0.08); min-width:calc(var(--sq) * 0.28); height:calc(var(--sq) * 0.28); padding:0 calc(var(--sq) * 0.04); border-radius:0; display:flex; align-items:center; justify-content:center; color:#f4f4f4; font-size:calc(var(--sq) * 0.19); font-weight:800; line-height:1; z-index:7; box-shadow:0 2px 5px rgba(0,0,0,0.35); pointer-events:none; }
.move-grade.best { background:#65dc7c; }
.move-grade.excellent { background:#65dc7c; }
.move-grade.book { background:#8a5f33; color:#fff; }
.move-grade.good { background:#5a9a68; }
.move-grade.inaccuracy { background:#dfc63a; }
.move-grade.mistake { background:#dc7f2d; }
.move-grade.blunder { background:#c83c3c; }
.board-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; overflow: visible; }
.board-arrow-group { opacity: 0.82; }
.board-arrow-group.preview { opacity: 0.6; }
.board-arrow { stroke: rgb(229, 162, 73); stroke-width: 3; stroke-linecap: butt; }
.board-arrow-head { fill: rgb(229, 162, 73); }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* Right side panel. */
#panel { flex: 1; padding: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; background: #0F0F10; min-width: var(--panel-min); border-left: 1px solid #1f1f1f; }
html.code-mode-active #panel { flex: 1 1 auto; min-width: 280px; max-width: none; overflow: hidden; }

/* PGN side panel */
#pgn-side { width: 340px; flex-shrink: 0; background: #0F0F10; border-left: 1px solid #1f1f1f; display: flex; flex-direction: column; overflow: hidden; }
.pgn-side-header { padding: 14px 16px 12px; border-bottom: 1px solid #1f1f1f; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; color: #6a6a6a; letter-spacing: 1.4px; text-transform: lowercase; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.pgn-side-header > span:first-child::before { content: '# '; color: #4a4a4a; }
.pgn-side-section { padding: 12px; border-bottom: 1px solid #1f1f1f; flex-shrink: 0; }
.pgn-side-section:last-child { border-bottom: 0; }
.pgn-list-section { flex: 1 1 auto; min-height: 0; padding: 12px; display: flex; }
.pgn-list-section #move-list { flex: 1; min-height: 0; }
.pgn-actions-section .btn-row { flex-wrap: nowrap; margin-top: 0; }
.pgn-actions-section .btn-row button { flex: 1; min-width: 0; padding: 6px 6px; font-size: 10.5px; text-align: center; }
.pgn-side-label { font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; color: #6a6a6a; letter-spacing: 1.4px; text-transform: lowercase; margin-bottom: 6px; font-weight: 400; }
.pgn-side-label::before { content: '# '; color: #4a4a4a; }
.pgn-text { width: 100%; box-sizing: border-box; background: #0A0A0B; border: 1px solid #222; color: #d8d8d8; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; line-height: 1.55; padding: 10px 12px; resize: vertical; outline: none; }
.pgn-text:focus { border-color: #2e2e2e; }
.pgn-engine-section { font-size: 11px; color: #888; min-height: 60px; }
.pgn-engine-section #search-info { color: #aaa; font-size: 11px; line-height: 1.6; min-height: 18px; word-break: break-word; }
html.code-mode-active #pgn-side, #panel.batch-mode ~ #pgn-side { display: none; }

/* PGN move list as grid: number | white move | black move per row */
#move-list { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 4px 6px; background: transparent; border: 0; height: 100%; overflow-y: auto; align-content: start; font-size: 12px; line-height: 1.4; max-height: none; margin-top: 0; padding: 4px 0; }
#move-list .mn { color: #5a5a5a; padding: 5px 8px 5px 0; text-align: right; font-variant-numeric: tabular-nums; }
#move-list .move-link { color: #cfcfcf; padding: 5px 18px 5px 10px; cursor: pointer; background: transparent; font-weight: 500; position: relative; }
#move-list .move-link:hover { color: #fff; }
#move-list .move-link.active { color: #fff; background: rgba(255,255,255,0.05); }
#move-list .move-link[class*=" q-"] { background: var(--q-bg, transparent); }
#move-list .move-link[class*=" q-"]::after { content: ''; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 10px; border-radius: 1px; background: var(--q-color, transparent); }
#move-list .move-link.q-best { --q-color: #84c756; --q-bg: rgba(132,199,86,0.10); }
#move-list .move-link.q-excellent { --q-color: #84c756; --q-bg: rgba(132,199,86,0.10); }
#move-list .move-link.q-good { --q-color: #5a9a68; --q-bg: rgba(90,154,104,0.09); }
#move-list .move-link.q-inaccuracy { --q-color: #f0c33a; --q-bg: rgba(240,195,58,0.12); }
#move-list .move-link.q-mistake { --q-color: #e6944e; --q-bg: rgba(230,148,78,0.13); }
#move-list .move-link.q-blunder { --q-color: #e05b57; --q-bg: rgba(224,91,87,0.15); }
#move-list .move-link.q-book { --q-color: #cba06c; --q-bg: rgba(203,160,108,0.10); }
#move-list .move-link[class*=" q-"].active { background: var(--q-bg, rgba(255,255,255,0.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.mode-tabs { display: flex; flex-direction: column; gap: 0; background: #0A0A0B; flex-shrink: 0; width: 64px; height: 100vh; border-right: 1px solid #1f1f1f; }
.mode-tabs-brand { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; font-family: 'SF Mono','Cascadia Code','Fira Mono',monospace; font-size: 13px; font-weight: 700; color: #e6c34a; letter-spacing: 0.5px; border-bottom: 1px solid #1f1f1f; user-select: none; }
.mode-tabs button { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; color: #777; background: transparent; border: 0; border-bottom: 1px solid #141414; border-radius: 0; font-size: 11px; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mode-tabs button:hover { background: #0A0A0B; color: #bbb; }
.mode-tabs button.active { background: #0F0F10; color: #ffffff; box-shadow: inset 2px 0 0 var(--accent); }
.mode-tabs-spacer { flex: 1 1 auto; }
.app-settings { margin-top: auto; position: relative; display: flex; align-items: stretch; }
.mode-tabs .app-settings { width: 64px; height: 64px; justify-content: center; padding: 0; border-top: 1px solid #1f1f1f; }
.mode-tabs .app-settings .settings-btn { flex: 0 0 auto; width: 64px; height: 64px; min-width: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: #777; border: 0; border-radius: 0; }
.mode-tabs .app-settings .settings-btn:hover { background: #0A0A0B; color: #bbb; }
.mode-tabs .app-settings .settings-btn.open { color: #ddd; background: #0F0F10; }
.settings-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 500; width: 224px; padding: 9px; background: #202020; border: 1px solid #333; border-radius: 0; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.settings-menu.open { display: block; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #858585; font-size: 10.5px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row label { color: #858585; white-space: nowrap; }
.settings-row select { width: 104px; flex: 0 0 104px; }
.settings-menu .check-row { margin: 0; }
#panel { position: relative; }
.settings-slot { display: flex; align-items: center; }
.panel-settings-slot { position: sticky; top: 12px; z-index: 520; justify-content: flex-end; box-sizing: border-box; height: 34px; padding: 6px 6px 0 0; margin-bottom: -34px; pointer-events: none; }
.mode-tabs .panel-settings-slot { position: static; height: auto; padding: 0; margin: 0; pointer-events: auto; justify-content: center; }
.mode-tabs .panel-settings-slot .settings-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
.panel-settings-slot .app-settings { pointer-events: auto; margin: 0 0 0 auto; }
.code-settings-slot { flex: 0 0 auto; }
.code-settings-slot .app-settings { margin: 0; }
.panel-settings { position: relative; right: auto; top: auto; z-index: 520; margin-left: 0; align-items: center; flex: 0 0 auto; }
.panel-settings .settings-btn { width: 28px; height: 28px; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: #202020; color: #8a8a8a; border: 1px solid #2d2d2d; }
.panel-settings .settings-btn:hover, .panel-settings .settings-btn.open { background: #2a2a2a; color: #ddd; border-color: #3b3b3b; }
.panel-settings .settings-btn svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.panel-settings .settings-menu { top: calc(100% + 8px); right: 0; }
#main-panel { display: flex; flex-direction: column; gap: 8px; }
#code-panel { display: none; flex: 1; min-height: 0; }
#eval-panel { display: none; flex: 1; min-height: 0; }
#pst-panel  { display: none; flex: 1; min-height: 0; }
#tuner-panel { display: none; flex: 1; min-height: 0; }
#panel.code-mode #main-panel, #panel.eval-mode #main-panel, #panel.batch-mode #main-panel, #panel.pst-mode #main-panel, #panel.tuner-mode #main-panel { display: none; }
#panel.code-mode #code-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
#panel.eval-mode #eval-panel { display: flex; flex-direction: column; gap: 0; }
#panel.tuner-mode #tuner-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#top:has(#panel.tuner-mode) #board-area,
#top:has(#panel.tuner-mode) #pgn-side { display: none; }
#batch-panel { display: none; flex: 1; min-height: 0; }
#panel.batch-mode #batch-panel { display: flex; flex-direction: column; gap: 10px; }
#panel.pst-mode #pst-panel  { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#top:has(#panel.pst-mode) #board-area,
#top:has(#panel.pst-mode) #pgn-side { display: none; }
#pst-header { background: #0A0A0B; border-bottom: 1px solid #1f1f1f; padding: 18px 24px 18px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
#pst-header .pst-header-text { flex: 1; min-width: 0; }
#pst-header .pst-kicker { color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; margin-bottom: 6px; }
#pst-header .pst-kicker::before { content: '$ '; color: var(--accent); }
#pst-header h4 { color: #e6e6e6; font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; margin: 0; }
#pst-header .pst-sub { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; margin-top: 6px; }
#pst-header .pst-sub::before { content: '// '; color: #4a4a4a; }
.pst-body { flex: 1; min-height: 0; padding: 18px; overflow: auto; display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pst-sidebar { display: flex; flex-direction: column; gap: 18px; }
.pst-sidebar-section { display: flex; flex-direction: column; gap: 8px; }
.pst-sidebar-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; }
.pst-sidebar-label::before { content: '# '; color: #4a4a4a; }
.pst-sidebar-section select { width: 100%; }
.pst-phase-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pst-phase-group button { padding: 6px 0; }
.pst-phase-group button + button { border-left: 0; margin-left: -1px; }
.pst-phase-group button.active { background: rgba(255,255,255,0.08); color: #fff; border-color: #4a4a4a; z-index: 1; }
.pst-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pst-tool-grid button { padding: 6px 4px; font-size: 11px; }
.pst-tool-grid button.full { grid-column: 1 / -1; }
.pst-tool-grid button.danger { color: #c97070; border-color: #2a1818; }
.pst-tool-grid button.danger:hover { background: #1a0e0e; color: #d88080; border-color: #3a2020; }
.pst-stats { display: flex; flex-direction: column; gap: 4px; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; }
.pst-stats-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed #1a1a1a; }
.pst-stats-row:last-child { border-bottom: 0; }
.pst-stats-key { color: #6a6a6a; }
.pst-stats-val { color: #cfcfcf; font-variant-numeric: tabular-nums; }
.pst-stats-val.high { color: #4ec9b0; }
.pst-stats-val.low { color: #d97676; }
.pst-stats-val.emph { color: #e6e6e6; font-weight: 600; }
.pst-grid-area { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: stretch; max-width: 560px; margin: 0 auto; width: 100%; }
.pst-grid-header { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; }
.pst-grid-header::before { content: '// '; color: #4a4a4a; }
.pst-files-row { display: grid; grid-template-columns: 22px repeat(8, 1fr); gap: 1px; padding: 0 1px; }
.pst-files-row span { color: #5a5a5a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; text-align: center; }
.pst-grid-row { display: grid; grid-template-columns: 22px 1fr; gap: 0; align-items: stretch; }
.pst-ranks-col { display: grid; grid-template-rows: repeat(8, 1fr); padding: 1px 0; }
.pst-ranks-col span { color: #5a5a5a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.pst-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; gap: 1px; background: #1f1f1f; border: 1px solid #1f1f1f; }
.pst-cell { display: flex; align-items: center; justify-content: center; cursor: ew-resize; position: relative; user-select: none; }
.pst-cell input { width: 100%; height: 100%; background: transparent; border: 0; color: inherit; text-align: center; font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; padding: 0; cursor: ew-resize; -moz-appearance: textfield; appearance: textfield; }
.pst-cell input::-webkit-outer-spin-button,
.pst-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pst-cell input:focus { background: rgba(255,255,255,0.06); cursor: text; }
.pst-cell.selected { box-shadow: inset 0 0 0 2px #ffffff; }
.pst-cell-corner { position: absolute; top: 2px; left: 3px; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 8px; color: rgba(255,255,255,0.35); pointer-events: none; user-select: none; letter-spacing: 0; }
.pst-range-bar { display: flex; align-items: center; gap: 8px; padding: 0 0 0 22px; margin-top: 6px; }
.pst-range-bar-end { color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; font-variant-numeric: tabular-nums; min-width: 36px; }
.pst-range-bar-end:first-child { text-align: right; color: #d97676; }
.pst-range-bar-end:last-child { text-align: left; color: #4ec9b0; }
.pst-range-gradient { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(to right, hsl(0,55%,42%), #1f1f1f 50%, hsl(170,55%,42%)); border: 1px solid #1a1a1a; }
.pst-output-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pst-output-head { display: flex; justify-content: space-between; align-items: center; }
.pst-output-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; }
.pst-output-label::before { content: '# '; color: #4a4a4a; }
.pst-output-head button { padding: 4px 10px; font-size: 10px; }
#pst-output { background: #0A0A0B; border: 1px solid #1f1f1f; padding: 12px 14px; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10.5px; line-height: 1.55; color: #cfcfcf; overflow: auto; white-space: pre; max-height: 540px; user-select: text; margin: 0; }
body.pst-scrubbing, body.pst-scrubbing * { cursor: ew-resize !important; user-select: none !important; }
body.pst-selecting, body.pst-selecting * { cursor: crosshair !important; user-select: none !important; }

/* Texel tuner. */
#tuner-header { background: #0A0A0B; border-bottom: 1px solid #1f1f1f; padding: 18px 24px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
#tuner-header .tuner-header-text { flex: 1; min-width: 0; }
#tuner-header .tuner-kicker { color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; margin-bottom: 6px; }
#tuner-header .tuner-kicker::before { content: '$ '; color: var(--accent); }
#tuner-header h4 { color: #e6e6e6; font-size: 18px; font-weight: 600; padding: 0; margin: 0; }
#tuner-header .tuner-sub { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; margin-top: 6px; }
.tuner-body { flex: 1; min-height: 0; padding: 16px 18px; display: grid; grid-template-columns: 240px minmax(0,1fr) 320px; gap: 18px; overflow: hidden; align-items: stretch; }
/* Sidebar scrolls on its own when its content overflows. min-height:0 in the
   grid track lets the inner overflow:auto actually clip + scroll rather than
   pushing the grid taller and dragging the whole page along.
   The `direction: rtl` flips the scrollbar to the LEFT edge; children get
   `direction: ltr` so their text/layout still reads left-to-right. */
.tuner-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; align-self: stretch; direction: rtl; padding-left: 14px; padding-right: 4px; }
.tuner-sidebar > * { direction: ltr; }
.tuner-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tuner-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; }
.tuner-label::before { content: '# '; color: #4a4a4a; }
.tuner-mini-meta { color: #5a5a5a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; }
.tuner-groups { display: flex; flex-direction: column; gap: 4px; }
.tuner-group-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 6px; cursor: pointer; padding: 4px 4px; border-bottom: 1px dashed #1a1a1a; user-select: none; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; color: #cfcfcf; }
.tuner-group-row:hover { background: rgba(255,255,255,0.03); }
.tuner-group-row .tuner-group-count { color: #5a5a5a; font-variant-numeric: tabular-nums; }
.tuner-group-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tuner-group-row input[type=checkbox] { position: absolute; left: 4px; top: 50%; width: 13px; height: 13px; margin: 0; transform: translateY(-50%); opacity: 0; cursor: pointer; z-index: 1; }
.tuner-group-row:hover .check-box { background: #393939; border-color: #666; }
.tuner-group-row input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: #0A0A0B; }
.tuner-group-name { color: inherit; }
/* Greyed-out state: rows declared in tune`...` DSL but not gradient-tunable
 * (no `feature:`, or `tuner: coordinate`). Shown so the user knows the
 * block exists but isn't reachable in gradient mode. */
.tuner-group-row.tuner-group-disabled { opacity: 0.42; cursor: not-allowed; color: #888; }
.tuner-group-row.tuner-group-disabled:hover { background: transparent; }
.tuner-group-row.tuner-group-disabled .check-box { background: #1c1c1c; border-color: #2a2a2a; }
.tuner-group-row.tuner-group-disabled:hover .check-box { background: #1c1c1c; border-color: #2a2a2a; }
.tuner-group-row.tuner-group-disabled input { cursor: not-allowed; }
.tuner-group-coord-tag { color: #6a6a6a; font-size: 9px; font-style: italic; margin-left: 4px; }
.tuner-empty { color: #4a4a4a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; }
.tuner-ckpts { display: flex; flex-direction: column; gap: 2px; max-height: 130px; overflow-y: auto; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; }
.tuner-ckpt-row { display: flex; justify-content: space-between; padding: 2px 4px; cursor: pointer; color: #cfcfcf; }
.tuner-ckpt-row:hover { background: rgba(255,255,255,0.04); }
.tuner-ckpt-row .tuner-ckpt-meta { color: #5a5a5a; font-variant-numeric: tabular-nums; }
.tuner-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; align-self: stretch; }
.tuner-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.tuner-stat-card { background: #0A0A0B; border: 1px solid #1f1f1f; padding: 12px 14px; }
.tuner-stat-label { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; }
.tuner-stat-val { color: #e6e6e6; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 6px; }
.tuner-loss-chart { background: #0A0A0B; border: 1px solid #1f1f1f; height: 200px; padding: 8px; display: flex; align-items: center; justify-content: center; color: #4a4a4a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; }
.tuner-loss-chart svg { width: 100%; height: 100%; }
.tuner-loss-chart .train-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tuner-loss-chart .val-line { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.7; }
.tuner-loss-chart .axis-line { stroke: #1f1f1f; stroke-width: 1; }
.tuner-params { background: #0A0A0B; border: 1px solid #1f1f1f; max-height: 360px; overflow-y: auto; }
.tuner-params-group-head { padding: 6px 12px; background: #131313; color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.2px; text-transform: lowercase; cursor: pointer; user-select: none; display: flex; justify-content: space-between; }
.tuner-params-group-head::before { content: '▾  '; color: #4a4a4a; }
.tuner-params-group-head.collapsed::before { content: '▸  '; }
.tuner-params-row { display: grid; grid-template-columns: 1fr 60px 60px 60px 1fr; gap: 8px; padding: 4px 12px; align-items: center; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; color: #cfcfcf; border-top: 1px solid #131313; }
.tuner-params-row .tuner-pname { color: #cfcfcf; }
.tuner-params-row .tuner-pstart { color: #888; text-align: right; font-variant-numeric: tabular-nums; }
.tuner-params-row .tuner-pcurr { color: #e6e6e6; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tuner-params-row .tuner-pdelta { text-align: right; font-variant-numeric: tabular-nums; }
.tuner-params-row .tuner-pdelta.up { color: #84c756; }
.tuner-params-row .tuner-pdelta.down { color: #e6944e; }
.tuner-params-row .tuner-spark { width: 100%; height: 18px; }
.tuner-log-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; align-self: stretch; }
.tuner-log-head { display: flex; justify-content: space-between; align-items: center; }
.tuner-log { background: #0A0A0B; border: 1px solid #1f1f1f; padding: 10px 12px; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10.5px; line-height: 1.55; color: #cfcfcf; overflow-y: auto; white-space: pre-wrap; word-break: break-word; max-height: 600px; min-height: 200px; flex: 1; margin: 0; user-select: text; }
.tuner-log .lt-boot { color: #6a6a6a; }
.tuner-log .lt-load { color: #84c756; }
.tuner-log .lt-warm { color: var(--accent); }
.tuner-log .lt-ep   { color: #cfcfcf; }
.tuner-log .lt-chk  { color: #84c756; }
.tuner-log .lt-tune { color: var(--accent); }
.tuner-log .lt-err  { color: #e05b57; }
.tuner-log .lt-time { color: #4a4a4a; }

/* Panel sections. */
.section { background: transparent; border: 0; border-bottom: 1px solid #1f1f1f; border-radius: 0; padding: 14px 16px 16px; }
#game-header, #eval-header, #code-header { background: #0A0A0B; border-bottom: 1px solid #1f1f1f; padding: 18px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#code-header .code-header-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
#code-header h4 { color: #ddd; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; margin: 0; }
#code-header .code-header-sub { color: #888; font-size: 11px; }
#code-header #dev-gen-out { color: #666; font-size: 10.5px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; }
#code-header button { flex-shrink: 0; }
#game-header .game-header-text { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
#game-header .game-kicker { color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; margin-bottom: 6px; }
#game-header .game-kicker::before { content: '$ '; color: var(--accent); }
#game-header #game-title { color: #e6e6e6; font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; margin: 0; }
#game-header #status { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; margin-top: 6px; }
#game-header #status::before { content: '// '; color: #4a4a4a; }
#game-header #search-info { color: #666; font-size: 10.5px; }
#game-header #resign-btn { flex-shrink: 0; }
#eval-header .eval-header-text { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
#eval-header .eval-kicker { color: #888; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: lowercase; margin-bottom: 6px; }
#eval-header .eval-kicker::before { content: '$ '; color: var(--accent); }
#eval-header h4 { color: #e6e6e6; font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; margin: 0; }
#eval-header h4::before { content: ''; }
#eval-header .eval-header-sub { color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; margin-top: 6px; }
#eval-header .eval-header-sub::before { content: '// '; color: #4a4a4a; }
#eval-header .eval-header-sub:empty::before { content: ''; }
#eval-header button { flex-shrink: 0; }
.section h4 { color: #6a6a6a; margin-bottom: 10px; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; text-transform: lowercase; letter-spacing: 1.4px; font-size: 10px; padding-bottom: 0; font-weight: 400; }
.section h4::before { content: '# '; color: #4a4a4a; }
.sub-label { font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; color: #6a6a6a; text-transform: lowercase; letter-spacing: 1.4px; margin-top: 14px; margin-bottom: 6px; font-weight: 400; }
.sub-label::before { content: '# '; color: #4a4a4a; }

/* Buttons. */
button { font-family: inherit; font-size: 11px; padding: 5px 12px; background: transparent; color: #bbb; border: 1px solid #2a2a2a; border-radius: 0; cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; white-space: nowrap; }
button:hover { background: rgba(255,255,255,0.04); color: #eee; border-color: #3a3a3a; }
button.active { background: var(--accent-soft); color: var(--accent-bright); border-color: var(--accent); }
button.primary { background: transparent; color: var(--accent); border-color: rgba(212,166,74,0.45); }
button.primary:hover { background: var(--accent-soft); color: var(--accent-bright); border-color: var(--accent); }
button.danger { background: transparent; color: #c05050; border-color: #3a2020; }
button.danger:hover { background: rgba(192,80,80,0.07); color: #d77; border-color: #4a2828; }

/* Inputs. */
select, textarea, input[type=number] { font-family: inherit; font-size: 11px; background: transparent; color: #bbb; border: 1px solid #2a2a2a; border-radius: 0; padding: 4px 6px; outline: none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
select:focus, textarea:focus, input[type=number]:focus { border-color: #3a3a3a; }
textarea { resize: vertical; width: 100%; }
select { width: 100%; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; }
select option { background: #1a1a1a; color: #cfcfcf; }
.check-row { position: relative; display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; align-self: flex-start; color: #858585; font-size: 10.5px; margin-top: 5px; cursor: pointer; user-select: none; }
.check-row input { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: 0; transform: translateY(-50%); opacity: 0; cursor: pointer; }
.check-box { width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid #4a4a4a; border-radius: 0; background: #2d2d2d; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 10px; line-height: 1; pointer-events: none; }
.check-row:hover .check-box { background: #393939; border-color: #666; }
.check-row input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: #0A0A0B; }
/* Range slider. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; background: transparent; border-radius: 999px; outline: none; cursor: pointer; border: none; padding: 0; vertical-align: middle; flex: 1; min-width: 40px; --val: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) 0 var(--val), #2c2c2c var(--val) 100%); border: 1px solid #1a1a1a; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid #0F0F10; box-shadow: 0 0 0 1px var(--accent); transition: background 0.1s, box-shadow 0.1s; }
input[type=range]:hover::-webkit-slider-thumb { background: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright); }
input[type=range]:active::-webkit-slider-thumb { background: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: #2c2c2c; border: 1px solid #1a1a1a; }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid #0F0F10; box-shadow: 0 0 0 1px var(--accent); }

/* Layout helpers. */
.row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.row label { color: #555; white-space: nowrap; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Status text. */
#status { font-size: 12px; color: #999; min-height: 18px; }

/* Move Generator collapsible. */
#generator-details { margin-top: 14px; border-top: 1px solid #242424; padding-top: 10px; }
#generator-details > summary { font-size: 10px; color: #505050; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; user-select: none; list-style: none; outline: none; display: block; }
#generator-details > summary::-webkit-details-marker { display: none; }
#generator-details > summary::marker { display: none; }
#generator-details > summary:hover { color: #888; }
#search-info { color: #5f5f5f; font-size: 10.5px; min-height: 14px; margin-top: 2px; }
.gen-out { color: #666; font-size: 10.5px; line-height: 1.5; margin-top: 5px; word-break: break-word; }
.btn-wide { width: 100%; }
.status-stop { margin-left: 8px; color: #9a9a9a; text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.status-stop:hover { color: #c0c0c0; }
.eval-summary { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.eval-summary-row { display:grid; grid-template-columns:110px 1fr; align-items:center; column-gap:10px; min-height:22px; }
.eval-summary-label { color:#d9d9d9; font-weight:500; font-size:12px; display:flex; align-items:center; gap:8px; }
.eval-summary-label::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; background: var(--quality-color, #888); }
.eval-summary-stats { display:grid; grid-template-columns:24px 1fr 1fr 24px; column-gap:6px; align-items:center; }
.eval-summary-count { font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:#aaa; }
.eval-summary-count.eval-w { text-align:right; }
.eval-summary-count.eval-b { text-align:left; }
.eval-summary-line { height:2px; background: var(--quality-color, #888); opacity:0.85; border-radius:0; }
.eval-summary-line.line-w { justify-self:end; width: var(--frac, 0%); }
.eval-summary-line.line-b { justify-self:start; width: var(--frac, 0%); }
.eval-summary-total { font-size:12px; font-weight:700; color:#ddd; font-variant-numeric:tabular-nums; padding:0 6px; min-width:14px; text-align:center; }
.eval-summary-icon { display:none; }
.eval-summary-icon img, .eval-summary-icon svg { display:none !important; }
.eval-summary-row.best { --quality-color:#84c756; }
.eval-summary-row.book { --quality-color:#cba06c; }
.eval-summary-row.excellent { --quality-color:#84c756; }
.eval-summary-row.good { --quality-color:#5a9a68; }
.eval-summary-row.inaccuracy { --quality-color:#f0c33a; }
.eval-summary-row.mistake { --quality-color:#e6944e; }
.eval-summary-row.blunder { --quality-color:#e05b57; }
.eval-results { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.eval-pair-row { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: center; padding: 0; }
.eval-move-num { color: #404040; font-size: 10px; text-align: right; padding-right: 5px; }
.eval-move-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 0; cursor: pointer; font-size: 10.5px; color: #777; background: transparent; transition: background 0.12s, color 0.12s; white-space: nowrap; justify-self: start; }
.eval-move-chip:hover { background: #1e1e1e; color: #ccc; }
.eval-move-chip.active { outline: 1px solid #3a3a3a; }
.eval-move-chip .chip-san { font-weight: 500; }
.eval-move-chip .chip-sym { font-size: 10px; font-weight: 800; color: #fff; line-height: 1; }
.eval-move-chip.capture { background: #1c2a20; color: #8abf8a; }
.eval-move-chip.capture:hover { background: #233224; }
.eval-move-chip.book { background: #3a2b1f; color: #d1ab7a; }
.eval-move-chip.book:hover { background: #473424; }
.eval-move-chip.good { background: #243126; color: #7fbc8e; }
.eval-move-chip.good:hover { background: #2b3a2e; }
.eval-move-chip.mistake { background: #2e1e0e; color: #d4854a; }
.eval-move-chip.mistake:hover { background: #38250f; }
.eval-move-chip.blunder { background: #2e1010; color: #d45050; }
.eval-move-chip.blunder:hover { background: #3a1212; }
.book-icon { width: 12px; height: 12px; display: block; fill: currentColor; }
.move-grade .book-icon { width: calc(var(--sq) * 0.16); height: calc(var(--sq) * 0.16); }
.move-grade.best, .move-grade.excellent, .move-grade.good, .move-grade.inaccuracy, .move-grade.mistake, .move-grade.blunder { background: transparent; box-shadow: none; padding: 0; width: calc(var(--sq) * 0.38); min-width: 0; height: calc(var(--sq) * 0.38); right: calc(var(--sq) * -0.085); top: calc(var(--sq) * -0.085); }
.move-rating-icon { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.move-grade .move-rating-icon { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(0,0,0,0.4)); }
.eval-move-chip .move-rating-icon { width: 12px; height: 12px; }
.eval-accuracy { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:0; }
.accuracy-card { background:#0A0A0B; border:1px solid #1f1f1f; border-radius:0; padding:14px 16px; text-align:left; color:#6a6a6a; font-family:'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size:10px; letter-spacing:1.4px; text-transform:lowercase; }
.accuracy-card strong { display:block; color:#e6e6e6; font-size:24px; font-weight:600; font-family:inherit; letter-spacing:0; text-transform:none; margin-top:8px; font-variant-numeric:tabular-nums; }
.accuracy-card.white-side, .accuracy-card { background:#0A0A0B; }
.accuracy-card.white-side strong { color:#e6e6e6; }
.accuracy-card.lead strong { color: var(--accent); }
.eval-graph { height:96px; margin-top:8px; background:#f2f2f2; border-radius:0; overflow:hidden; }
.eval-graph:empty { display:none; }
.eval-graph svg { width:100%; height:100%; display:block; }
.eval-graph .graph-mid { stroke:#bebebe; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.eval-graph .graph-line { fill:none; stroke: var(--accent); stroke-width:2.2; vector-effect:non-scaling-stroke; }
.eval-graph .graph-fill-black { fill:#3f3e3b; }

/* Batch result bar. */
.res-bar { height: 5px; background: #1a1a1a; display: flex; border-radius: 0; overflow: hidden; margin-top: 6px; }
.res-w { background: #4a844a; }
.res-d { background: #555; }
.res-l { background: #844a4a; }
.batch-result-bar { height: 6px; background: #1a1a1a; margin: 6px 0 6px; }
.batch-result-bar .res-w { background: #5fae5f; }
.batch-result-bar .res-d { background: #5a5a5a; }
.batch-result-bar .res-l { background: #c25040; }
.batch-result-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.batch-elo-block { display: flex; align-items: baseline; gap: 6px; }
.batch-elo { color: #ddd; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.batch-elo-suffix { color: #888; font-size: 11px; }
.batch-elo-err { color: #777; font-size: 11px; font-variant-numeric: tabular-nums; }
.batch-count { color: #888; font-size: 11px; font-variant-numeric: tabular-nums; }
.batch-result-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; }
.batch-wdl { display: flex; gap: 14px; }
.batch-wdl .wdl-w { color: #888; }
.batch-wdl .wdl-w span { color: #5fae5f; font-weight: 700; }
.batch-wdl .wdl-d { color: #888; }
.batch-wdl .wdl-d span { color: #ccc; font-weight: 700; }
.batch-wdl .wdl-l { color: #888; }
.batch-wdl .wdl-l span { color: #c25040; font-weight: 700; }
.batch-llr-foot { color: #888; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Move list. */

/* Live eval sparkline (in-game). */
#live-eval-bar { margin-top:7px; height:48px; border-radius:0; overflow:hidden; }
#live-eval-bar svg { width:100%; height:100%; display:block; }

/* Perft results table. */
.perft-table { width:100%; border-collapse:collapse; font-size:11px; color:#888; margin-top:2px; }
.perft-table th { color:#555; font-weight:normal; text-align:left; padding:3px 6px; border-bottom:1px solid #2a2a2a; }
.perft-table td { padding:3px 6px; font-variant-numeric:tabular-nums; }
.perft-table tr:nth-child(even) td { background:#181818; }
.perft-pass { color:#5a9a5a; font-weight:600; }
.perft-fail { color:#a05a5a; font-weight:600; }


/* EPD results. */
.epd-table { width:100%; border-collapse:collapse; font-size:11px; color:#aaa; margin-top:6px; }
.epd-table th { color:#666; font-weight:normal; text-align:left; padding:4px 8px; border-bottom:1px solid #2a2a2a; }
.epd-table td { padding:4px 8px; font-variant-numeric:tabular-nums; }
.epd-table tr:nth-child(even) td { background:#181818; }
.epd-table td.epd-status-ok { color:#5a9a5a; }
.epd-table td.epd-status-fail { color:#a05a5a; }
.epd-summary-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.epd-acc-big { font-size:22px; font-weight:600; color:#9bcf9b; }
.epd-acc-big.bad { color:#cf9b9b; }
.epd-acc-big.warn { color:#cfb89b; }
.epd-progress-bar { background:#1c1c1c; height:6px; border-radius:3px; overflow:hidden; margin:4px 0 8px; }
.epd-progress-fill { background:linear-gradient(90deg,#4a8a4a,#6ba86b); height:100%; transition:width 0.2s; }
.epd-stat-row { display:flex; justify-content:space-between; color:#888; font-size:11px; }

/* Batch output. */
.batch-subtabs { display:flex; gap:6px; margin-bottom:8px; }
.batch-subtabs button { flex:1; }
.batch-subtabs button.active { background:#2a2a2a; color:#e0e0e0; }
.batch-subpanel { display:none; }
.batch-subpanel.active { display:block; }
.batch-match { display: flex; flex-direction: column; gap: 6px; }
.batch-engine-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: center; }
.batch-engine-row label { color: #777; font-size: 11px; text-align: center; }
.batch-note { font-size: 10px; color: #404040; margin-top: 4px; }
.batch-control-block { margin-top: 9px; padding-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.batch-limit-row { display: flex; gap: 6px; align-items: center; }
.batch-limit-row label, .batch-field label { color: #555; white-space: nowrap; }
.batch-limit-row select { width: 74px; flex-shrink: 0; }
.batch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; align-items: end; }
.batch-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.batch-field-line { display: flex; gap: 6px; align-items: center; min-width: 0; }
.batch-field-line input[type=number] { width: 52px; flex-shrink: 0; }
.batch-options { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.batch-actions { display: flex; gap: 5px; margin-top: 2px; }
.batch-actions button { flex: 1; }
.bench-actions { display:flex; gap:5px; margin-top:8px; }
.bench-actions button { flex:1; }
.bench-controls { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.bench-grid { display:flex; flex-direction:column; gap:8px; }
.bench-output { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bench-summary { color:#aaa; font-size:11px; line-height:1.5; background:#181818; border-radius:0; padding:8px; }
.bench-results { display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; padding-right:3px; }
.bench-row { display:grid; grid-template-columns:minmax(0,1fr) 58px 58px 82px 56px; gap:6px; align-items:center; background:#181818; border-radius:0; padding:6px 8px; font-size:10.5px; color:#999; }
.bench-row-head { color:#666; text-transform:uppercase; letter-spacing:1px; background:transparent; padding:0 2px; }
.bench-row span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bench-row .bench-name { color:#d0d0d0; }
.bench-row .bench-move { color:#9ecbff; }
.bench-empty { color:#444; font-size:10.5px; }
.score-line { font-size: 13px; color: #ccc; letter-spacing: 0.5px; }
#bprog { color: #4a4a4a; margin-left: 8px; font-size: 11px; }
#batch-prof { color: #555; margin-top: 4px; line-height: 1.6; font-size: 10px; }
.batch-history { margin-top: 8px; padding-top: 8px; }
.batch-history-title { display: flex; justify-content: space-between; align-items: center; color: #6a6a6a; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 10px; text-transform: lowercase; letter-spacing: 1.4px; margin-bottom: 5px; }
.batch-history-title > span:first-child::before { content: '# '; color: #4a4a4a; }
.batch-history-list { display: flex; flex-direction: column; gap: 5px; }
.batch-history-item { color: #777; background: #181818; border-radius: 0; padding: 6px 7px; font-size: 10.5px; line-height: 1.45; }
.batch-history-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.batch-history-item b { color: #aaa; font-weight: 100; }
.batch-history-item .res-bar { margin: 5px 0 4px; height: 4px; }
.batch-history-del { font-size: 10px; padding: 1px 6px; color: #966; flex-shrink: 0; }
.batch-history-empty { color: #444; font-size: 10.5px; }

/* Saved versions. */
.ver-divider { border: none; margin: 8px 0; }
.ver-add-label { font-size: 10px; color: #505050; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }

/* Custom engine dropdown. */
.csel { position: relative; width: 100%; }
.batch-csel { flex: 1; min-width: 0; }
.csel-trigger { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 4px 6px; background: transparent; color: #bbb; border: 1px solid #2a2a2a; border-radius: 0; cursor: pointer; user-select: none; font-size: 11px; min-height: 27px; }
.csel-trigger:hover { color: #ddd; }
.csel-trigger.open { border-bottom-color: transparent; border-radius: 0; }
.csel-arrow { color: #555; font-size: 9px; flex-shrink: 0; margin-left: 6px; transition: transform 0.15s; }
.csel-trigger.open .csel-arrow { transform: rotate(180deg); }
.csel-list { display: none; position: static; background: #0A0A0B; border: 1px solid #2a2a2a; border-top: none; border-radius: 0; list-style: none; max-height: none; overflow: visible; margin: 0; padding: 0; }
.csel-list.open { display: block; }
.batch-csel .csel-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 220; border-top: none; border-bottom: 1px solid transparent; border-radius: 0; }
.batch-csel .csel-trigger.open { border-top-color: transparent; border-bottom-color: transparent; border-radius: 0; }
.csel-list li { padding: 6px 8px; cursor: pointer; font-size: 11px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csel-list li:hover { background: #303030; color: #e0e0e0; }
.csel-list li.csel-selected { background: #333; color: #eee; }
.csel-list li.csel-empty { color: #444; cursor: default; font-style: italic; }
.csel-list li.csel-empty:hover { background: transparent; color: #444; }
.csel-list li.csel-sort { color: #777; font-size: 10px; }
.csel-list li.csel-sort:hover { color: #ccc; background: #303030; }
/* Sticky save bar at top of code panel. */
.code-hscroll-dock { display: none; }
#code-hscroll { width: 100%; height: 14px; margin: 0; background: transparent; }
#code-hscroll::-webkit-slider-runnable-track { height: 14px; background: rgba(255,255,255,0.08); border-radius: 0; }
#code-hscroll::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 40px; height: 14px; margin-top: 0; border-radius: 0; background: rgba(255,255,255,0.26); border: 0; }
#code-hscroll::-moz-range-track { height: 14px; background: rgba(255,255,255,0.08); border-radius: 0; }
#code-hscroll::-moz-range-thumb { width: 40px; height: 14px; border-radius: 0; background: rgba(255,255,255,0.26); border: 0; }
#code-hscroll:disabled { opacity: 0.22; }
#code-panel.drag-over .code-editor { background: #222; }

/* Code editor. */
.code-editor { position: relative; z-index: 0; flex: 1 1 auto; min-height: 260px; background: var(--code-editor-bg, #161616); border: 1px solid transparent; border-radius: 0; overflow: hidden; }
#code-panel .code-editor, #code-panel .code-hscroll-dock, #code-panel .code-tab-bar { margin-left: -16px; margin-right: -16px; }
.code-tab-bar { display: flex; align-items: stretch; background: #0F0F10; border-bottom: 1px solid #1f1f1f; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; min-height: 32px; scrollbar-width: none; }
.code-tab-bar:empty { display: none; }
.code-tab-bar::-webkit-scrollbar { display: none; }
.code-tab { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; font-size: 11px; color: #888; cursor: pointer; border-right: 1px solid #1f1f1f; background: transparent; border-top: 2px solid transparent; user-select: none; white-space: nowrap; flex-shrink: 0; }
.code-tab:hover { background: rgba(255,255,255,0.03); color: #ccc; }
.code-tab.active { color: #ddd; background: var(--code-editor-bg, #161616); border-top-color: #ddd; }
.code-tab-name { font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', monospace; }
.code-tab-close { color: #555; padding: 0 2px; line-height: 1; font-size: 14px; border-radius: 0; }
.code-tab-close:hover { color: #ddd; }
.code-editor:focus-within { border-color: transparent; }
#paste-code { width: 100%; min-height: 260px; box-sizing: border-box; margin: 0; padding: 8px 10px; border: 0; background: transparent; color: transparent; caret-color: transparent; font-family: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace; font-size: 10.5px; font-weight: 400; line-height: 1.55; tab-size: 4; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; resize: none; outline: 0; }
#code-editor-host { display: none; width: 100%; height: 100%; min-height: 260px; }
.monaco-editor, .monaco-editor .overflow-guard { border-radius: 0; }
.monaco-editor { background: var(--code-editor-bg, #161616) !important; }
.monaco-editor .margin, .monaco-editor .monaco-editor-background, .monaco-editor .inputarea.ime-input { background: var(--code-editor-bg, #161616) !important; }
.monaco-editor .decorationsOverviewRuler,
.monaco-editor .minimap {
    display: none !important;
}
.monaco-editor .inputarea,
.monaco-editor textarea.inputarea,
.monaco-editor .inputarea.ime-input {
    color: transparent !important;
    caret-color: transparent !important;
    background: transparent !important;
    opacity: 0 !important;
    transform: none !important;
    clip-path: inset(100%) !important;
}
.monaco-editor .lines-content, .monaco-editor .view-lines { font-family: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace !important; font-size: 10.5px !important; }
.monaco-editor .cursors-layer .cursor { background: #ddd !important; border-color: #ddd !important; }
#code-panel .code-row { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }
#code-panel .build-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid #1f1f1f; padding: 14px 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overflow-x: hidden; background: #0F0F10; transition: width 0.18s ease; position: relative; }
#code-panel .build-sidebar.collapsed { width: 28px; padding: 14px 0; gap: 0; }
#code-panel .build-sidebar.collapsed .build-sidebar-section:not(.keep-when-collapsed) { display: none; }
#code-panel .build-sidebar.collapsed .build-sidebar-section.keep-when-collapsed > *:not(.build-sidebar-section-header) { display: none; }
#code-panel .build-sidebar.collapsed .build-sidebar-section.keep-when-collapsed { padding: 0; }
#code-panel .build-sidebar.collapsed .build-sidebar-section-header { justify-content: center; }
#code-panel .build-sidebar.collapsed .build-sidebar-section-header .build-sidebar-label { display: none; }
.build-sidebar-section-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.build-sidebar-section-header .build-sidebar-label { margin: 0; }
.engines-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.engines-label .engines-chev { display: inline-block; transition: transform 0.15s; font-size: 10px; color: #555; }
#engines-section.list-collapsed .engines-chev { transform: rotate(-90deg); }
.engine-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
#engines-section.list-collapsed .engine-list .engine-item:not(.active) { display: none; }
.engine-item { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 6px; cursor: pointer; font-size: 11.5px; color: #aaa; border-left: 2px solid transparent; }
.engine-item:hover { color: #ddd; background: rgba(255,255,255,0.03); }
.engine-item.active { color: #fff; background: rgba(232,185,100,0.07); border-left-color: #e8b964; }
.engine-context-menu { position: fixed; z-index: 9999; min-width: 120px; background: #0A0A0B; border: 1px solid #2a2a2a; padding: 4px 0; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; font-size: 11px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); user-select: none; }
.engine-context-menu .ecm-item { padding: 5px 12px; color: #cfcfcf; cursor: pointer; }
.engine-context-menu .ecm-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.engine-context-menu .ecm-danger { color: #c97070; }
.engine-context-menu .ecm-danger:hover { background: #1a0e0e; color: #d88080; }
.engine-glyph { color: #555; font-size: 10.5px; flex-shrink: 0; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; }
.engine-item.active .engine-glyph { color: #e8b964; }
.engine-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-active-tag { font-size: 9.5px; color: #e8b964; flex-shrink: 0; }
.engine-new-btn { margin-top: 6px; width: 100%; }

/* ---------------------------------------------------------------------------
 * Project tree (replaces the flat engine list). Rows are flat <div>s; one
 * .pt-guide cell per ancestor-depth column is prepended for indentation +
 * the visual tree connector (vertical line / tee / elbow). Connectors are
 * drawn with CSS borders so they line up exactly regardless of font.
 * --------------------------------------------------------------------------- */
.project-tree { display: flex; flex-direction: column; gap: 0; margin-top: 4px; user-select: none; }
.pt-empty { padding: 6px 8px; color: #666; font-size: 11px; font-style: italic; }
.pt-row { display: flex; align-items: stretch; padding: 0 8px 0 6px; cursor: pointer; font-size: 11.5px; color: #aaa; border-left: 2px solid transparent; min-height: 22px; }
.pt-row > * { align-self: center; }
.pt-row:hover { color: #ddd; background: rgba(255,255,255,0.03); }
.pt-row.pt-active-file { color: #fff; background: rgba(232,185,100,0.08); border-left-color: var(--accent); }

/* Tree-guide column: each indent step is 24px wide. The vertical line sits
 * at left: 10px and the horizontal tick extends 13px to the right, giving
 * children noticeably more offset from the parent than a flush 16-18px
 * step. Connectors are CSS borders so they align pixel-perfectly. */
.pt-guide { position: relative; width: 24px; align-self: stretch; flex-shrink: 0; }
.pt-guide-line::before {
    content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: #2a2a2a;
}
.pt-guide-tee::before {
    content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: #2a2a2a;
}
.pt-guide-tee::after {
    content: ''; position: absolute; left: 10px; top: 50%; width: 13px; height: 1px; background: #2a2a2a;
}
.pt-guide-elbow::before {
    content: ''; position: absolute; left: 10px; top: 0; height: 50%; width: 1px; background: #2a2a2a;
}
.pt-guide-elbow::after {
    content: ''; position: absolute; left: 10px; top: 50%; width: 13px; height: 1px; background: #2a2a2a;
}
.pt-guide-blank { /* purely for indent, no lines */ }

.pt-chev { display: inline-block; width: 10px; color: #555; font-size: 9px; line-height: 1; flex-shrink: 0; transition: transform 0.12s; text-align: center; margin-right: 4px; }
.pt-chev.pt-chev-open { transform: rotate(90deg); }
.pt-icon { color: #555; font-size: 10px; flex-shrink: 0; font-family: 'JetBrains Mono','Cascadia Mono',Consolas,'SF Mono',monospace; min-width: 14px; text-align: center; margin-right: 4px; }
.pt-icon-folder { color: #6e6e6e; }
.pt-row.pt-active-file .pt-icon { color: var(--accent); }
.pt-file .pt-chev { display: none; }   /* files have no expand affordance */
.pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Action-button row (+ file / + folder). Same guide cells in front so the
 * buttons sit at the same indent as the would-be children. */
.pt-actions { display: flex; align-items: stretch; gap: 4px; padding: 2px 6px 4px 6px; min-height: 22px; }
.pt-actions .pt-guide { align-self: stretch; }
.pt-action-btn { font-size: 10.5px; padding: 2px 6px; background: transparent; color: #666; border: 1px dashed #2a2a2a; border-radius: 2px; cursor: pointer; align-self: center; }
.pt-action-btn:hover { color: var(--accent); border-color: rgba(212,166,74,0.45); background: rgba(212,166,74,0.05); }
.project-new-btn { margin-top: 8px; width: 100%; }

/* Save-status indicator next to the editor header. */
.pt-save-status { font-size: 10px; padding: 1px 6px; border-radius: 2px; margin-left: 8px; }
.pt-save-status.pt-saved { color: #5a8a5a; }
.pt-save-status.pt-unsaved { color: #c8a040; }
.build-sidebar-toggle { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #2a2a2a; background: transparent; color: #aaa; cursor: pointer; flex-shrink: 0; }
.build-sidebar-toggle:hover { color: #ddd; border-color: #3a3a3a; background: rgba(255,255,255,0.04); }
.build-sidebar-toggle-icon { font-size: 12px; line-height: 1; }
#code-panel .build-sidebar-section { display: flex; flex-direction: column; gap: 6px; padding: 0 14px; }
#code-panel .build-sidebar-label { font-size: 10.5px; color: #666; }
#code-panel .build-sidebar-label::before { content: '# '; color: #4a4a4a; }
#code-panel .build-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
#code-panel .build-doc-list li { padding: 4px 6px; font-size: 11.5px; color: #aaa; cursor: pointer; }
#code-panel .build-doc-list li:hover { color: #ddd; background: rgba(255,255,255,0.03); }
#code-panel .build-doc-list li::before { content: '› '; color: #555; }
#code-panel .build-editor-area { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#code-panel .build-editor-area > h4 { display: none; }
/* Engine help docs: hide by default, only show active one in place of the editor */
#code-panel .engine-help { display: none; }
#code-panel .engine-help summary { display: none; }
#code-panel .engine-help.active-doc { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -16px -16px; padding: 18px 22px 24px; background: var(--code-editor-bg, #161616); border: 0; }
#code-panel .engine-help.active-doc .engine-help-body { padding: 0; }
#code-panel.docs-mode .code-editor, #code-panel.docs-mode .code-hscroll-dock { display: none; }
.doc-back { display: none; align-items: center; gap: 6px; padding: 4px 10px; background: transparent; color: #aaa; border: 1px solid #2a2a2a; cursor: pointer; font-size: 11px; margin-bottom: 14px; }
.doc-back:hover { color: #ddd; border-color: #3a3a3a; }
#code-panel .engine-help.active-doc .doc-back { display: inline-flex; }
.engine-help { border-radius: 0; background: #181818; margin-bottom: 8px; color: #777; font-size: 10.5px; line-height: 1.45; }
.engine-help summary { cursor: pointer; padding: 6px 8px; color: #aaa; user-select: none; }
.engine-help-body { padding: 0 8px 8px; }
.engine-help-body h5 { margin: 6px 0 5px; color: #aaa; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; }
.engine-help-body p + h5 { margin-top: 12px; }
.engine-help-body ul { margin: 6px 0 8px 16px; padding: 0; }
.engine-help-body li { margin: 3px 0; }
.engine-help code { color: #aaa; }
.engine-help a { color: #9fb6e0; text-decoration: underline dotted; text-decoration-color: #52617a; text-underline-offset: 2px; }
.engine-help a code { color: #9fb6e0; }
.engine-help a:hover { color: #c7d6f6; text-decoration-color: #9fb6e0; }
.engine-help-code-wrap { margin: 7px 0 0; }
.engine-help-code-actions { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.engine-help-copy { padding: 3px 8px; font-size: 10px; }
.engine-help-code { background: #111; border-radius: 0; padding: 7px; margin: 0; color: #c5d0d0; overflow: auto; white-space: pre; }
.engine-help-code.engine-help-code-host { position: relative; padding: 0; overflow: hidden; min-height: 120px; background: var(--code-editor-bg, #161616); }
.engine-help-code.engine-help-code-host .monaco-editor,
.engine-help-code.engine-help-code-host .monaco-editor .overflow-guard,
.engine-help-code.engine-help-code-host .monaco-editor .margin,
.engine-help-code.engine-help-code-host .monaco-editor .monaco-editor-background { background: var(--code-editor-bg, #161616) !important; }

/* Promotion picker. */
#promo-picker { position: absolute; z-index: 100; display: flex; flex-direction: column; border-radius: 0; background: #222; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
#promo-picker div { width: var(--sq); height: var(--sq); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#promo-picker div:hover { background: #444; }
#promo-picker img { width: calc(var(--sq) * 0.8); height: calc(var(--sq) * 0.8); pointer-events: none; }

#drag-clone { position: fixed; pointer-events: none; z-index: 999; width: var(--piece); height: var(--piece); transform: translate(-50%,-50%); transform-origin: 50% 62%; will-change: left, top, transform; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.28)); }