.board-appearance-controls { gap: 12px; }
.appearance-library-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: var(--settings-control, #f0efe9); }
.appearance-library-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 7px; color: var(--fable-muted, #65716d); background: transparent; font: 600 12px/1.4 var(--sans, system-ui); cursor: pointer; }
.appearance-library-tabs button[aria-selected="true"] { background: var(--fable-surface, white); color: var(--fable-text, #23352b); box-shadow: 0 1px 4px #0000000c; }
.appearance-library-tabs button:focus-visible, .appearance-preview-actions button:focus-visible { outline: 2px solid var(--fable-accent, #54826d); outline-offset: 2px; }
.appearance-library-search { box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--fable-line, #dbded6); border-radius: 8px; color: var(--fable-text, #23352b); background: var(--settings-control, #fafbf7); font: 12px var(--sans, system-ui); }
.appearance-library-search:focus-visible { outline: 2px solid var(--fable-accent, #54826d); outline-offset: 2px; }
.appearance-library-count { color: var(--fable-muted, #6a746d); font-size: 11px; margin: -4px 0 0; }
.settings-page .board-appearance-layout { grid-template-columns: minmax(260px, .95fr) minmax(0, 1.1fr); gap: 26px; }
.settings-page .board-appearance-preview-shell { top: 24px; padding: 12px; }
.settings-page .board-appearance-controls .board-preference-group[role="tabpanel"] legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.settings-page :is(.piece-set-options, .board-color-options) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 490px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; scrollbar-width: thin; align-content: start; }
.settings-page .appearance-option { position: relative; min-height: 113px; padding: 13px 5px 8px; flex-direction: column; justify-content: center; gap: 7px; text-align: center; }
.appearance-option[hidden], .board-preference-group[hidden] { display: none !important; }
.appearance-option-caption { min-width: 0; max-width: 100%; }
.appearance-option-caption strong { display: block; font: 600 10px/1.3 var(--sans, system-ui); white-space: normal !important; overflow-wrap: anywhere; }
.appearance-piece-sample { display: flex; width: 82px; height: 43px; border-radius: 5px; overflow: hidden; background: linear-gradient(90deg, #dfd8c2 50%, #8c9d93 50%); }
.appearance-piece-sample img { width: 41px; height: 43px; object-fit: contain; padding: 1px; box-sizing: border-box; }
.appearance-board-sample, .appearance-board-sample img { display: block; width: 58px; height: 58px; border-radius: 4px; }
.appearance-new { position: absolute; top: 4px; right: 5px; color: var(--fable-accent, #49775f); font: 650 7px/1.2 var(--sans, system-ui); letter-spacing: .02em; }
.appearance-preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.appearance-preview-actions button { flex: 1; min-height: 36px; padding: 7px; border: 1px solid var(--fable-line, #dce0d7); border-radius: 7px; background: var(--fable-surface, #fff); color: var(--fable-text, #23352b); cursor: pointer; font: 550 11px var(--sans, system-ui); }
.appearance-preview-summary { font-weight: 600; color: var(--fable-text, #23352b) !important; }
@media (max-width: 1100px) { .settings-page .board-appearance-layout { grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); gap: 16px; } }
@media (max-width: 760px) { .settings-page .board-appearance-layout { grid-template-columns: 1fr; } .settings-page .board-appearance-preview-shell { position: static; width: 100%; max-width: 340px; box-sizing: border-box; } .settings-page :is(.piece-set-options, .board-color-options) { max-height: 460px; } }
@media (max-width: 390px) { .appearance-piece-sample { width: 68px; height: 38px; } .appearance-piece-sample img { width: 34px; height: 38px; } }