/* Board inspector "Appearance" section: theme cards and scene thumbnails. */
.appearance { margin-bottom: 8px; }
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.scene-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden; border: 2px solid var(--glass-border); background: var(--bg-1) center / cover no-repeat; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.scene-thumb:hover { transform: translateY(-2px); border-color: var(--glass-border-hi); }
.scene-thumb.on { border-color: var(--brand); box-shadow: var(--glow-accent); }
.scene-thumb.is-default::after { content: "default"; position: absolute; left: 3px; top: 3px; padding: 0 4px; border-radius: 3px; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.6); }
.scene-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 2px 2px; font-size: 9.5px; line-height: 1.1; text-align: center; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); }
.scene-thumb.none { background: repeating-linear-gradient(45deg, var(--bg-1) 0 6px, var(--bg-2) 6px 12px); }
.scene-thumb.none span { color: var(--ink-1); background: none; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0; }

/* Theme previews: photo thumbnail with a paper card chip, name in plain readable UI text (no display font, nothing over the photo) */
.theme-prev { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 4px; border-radius: var(--radius-m); border: 1px solid var(--glass-border); background: var(--panel-bg); color: var(--ink-0); text-align: center; }
.theme-prev:hover { border-color: var(--glass-border-hi); }
.theme-prev.on { border-color: var(--brand); box-shadow: var(--glow-accent); }
.theme-prev:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.theme-prev-thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-s); background: var(--bg-1) center / cover no-repeat; }
.theme-prev-thumb i { position: absolute; left: 12%; bottom: 14%; width: 46%; height: 42%; border: 1px solid; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.theme-prev-thumb i b { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.theme-prev-name { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--ink-0); }
.theme-switch { display: inline-flex; gap: 6px; margin-right: 8px; }
.theme-switch .theme-prev { width: 68px; }
.theme-switch .theme-prev-name { font-size: 11px; }

/* Even theme grid in the side panel; compact aligned row in the landing and library nav */
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.theme-prev { min-width: 0; padding: 5px 5px 7px; }
.theme-prev-thumb { width: 100%; overflow: hidden; }
.theme-prev-name { display: block; overflow-wrap: anywhere; line-height: 1.25; padding: 0 2px; }
.theme-prev.on { box-shadow: 0 0 0 2px var(--brand); }
.theme-switch { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.theme-switch .theme-prev { flex: none; width: 84px; } .theme-switch .theme-prev-name { font-size: 11px; letter-spacing: 0; }