/* ═══════════════════════════════════════════════════════════════
   KoPeOn — Színrendszer, témák, dark mode, header controls
   (a main.css-ből kibontva; betöltő: /css/main.css)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BASE COLOR SYSTEM
   ═══════════════════════════════════════════════════════════════ */

:root {
    --primary-color: #facc15;
    --primary-dark: #eab308;
    --primary-gradient: #facc15;              /* flat kitöltés — neo-brutál */
    --primary-glare: rgba(250, 204, 21, 0.25);
    --primary-glow: rgba(250, 204, 21, 0.4);
    --primary-subtle: rgba(250, 204, 21, 0.14);
    --primary-on: #111111;
    --primary-text: #facc15;

    --secondary-color: #a3a3a3;
    --accent-color: var(--primary-color);

    --bg-color: #1e1e1e;
    --bg-secondary: #171717;
    --app-bg: #1e1e1e;
    --bg-main: var(--bg-color);
    --surface: var(--card-bg);
    --surface-secondary: var(--bg-secondary);

    --card-bg: #333333;
    --glass-bg: #1e1e1e;
    --glass-border: #525252;

    --text-main: #f5f5f5;
    --text-light: #d4d4d4;
    --text-muted: #a3a3a3;
    --text-secondary: var(--text-light);

    --border-color: #525252;
    --border-strong: #737373;

    --success-color: var(--primary-color);
    --success-text: var(--primary-text);
    --info-color: var(--primary-color);
    --danger-color: #dc2626;
    --danger-dark: #b91c1c;
    --danger-text: #f87171;
    --danger-subtle: rgba(220, 38, 38, 0.14);
    --danger-on: #ffffff;
    --warning-color: var(--danger-color);
    --warning-text: var(--danger-text);
    --nb-danger: var(--danger-color);

    --shadow-sm: 3px 3px 0 var(--ink);
    --shadow-md: 5px 5px 0 var(--ink);
    --shadow-lg: 8px 8px 0 var(--ink);
    --shadow-glow: 4px 4px 0 var(--ink);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.18s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Neo-brutal accent */
    --nb-yellow: #facc15;
    --nb-yellow-hover: #fde047;

    /* Tintapanel + papírkártya shell — sötét mód alapértelmezett */
    --ink: #111111;
    --field-bg: #1e1e1e;
    --panel-bg: #111111;
    --panel-line: rgba(229, 229, 229, 0.22);
    --panel-text: #fafafa;
    --panel-muted: rgba(229, 229, 229, 0.78);
    --panel-soft: rgba(255, 255, 255, 0.06);
    --panel-shadow: rgba(0, 0, 0, 0.7);
}

/* Light palettes share the same component contracts as the existing dark theme. */
html[data-theme="light"] {
    --bg-color: #eff6ff;
    --bg-secondary: #dbeafe;
    --card-bg: #ffffff;
    --text-main: #111111;
    --text-light: #374151;
    --text-muted: #4b5563;
    --primary-color: #2563eb;
    --nb-yellow: #facc15;
    --nb-yellow-hover: #fde047;
    --border-color: #778599;
    --border-strong: #4b5563;
    --ink: #111111;
}

html[data-theme="cream"] {
    --bg-color: #faf7f0;
    --bg-secondary: #f2eadd;
    --card-bg: #fffaf0;
    --text-main: #29231d;
    --text-light: #514334;
    --text-muted: #665746;
    --primary-color: #80532e;
    --nb-yellow: #edcf87;
    --nb-yellow-hover: #f4dfa9;
    --border-color: #998770;
    --border-strong: #6c5b47;
    --ink: #29231d;
}

html[data-theme="green"] {
    --bg-color: #f4faf3;
    --bg-secondary: #e6f0e4;
    --card-bg: #f8fcf7;
    --text-main: #182c20;
    --text-light: #314f3b;
    --text-muted: #486450;
    --primary-color: #237044;
    --nb-yellow: #c9e3ad;
    --nb-yellow-hover: #dbedc8;
    --border-color: #7b957f;
    --border-strong: #4b6a52;
    --ink: #182c20;
}

html:is([data-theme="light"], [data-theme="cream"], [data-theme="green"]) {
    --primary-dark: color-mix(in srgb, var(--primary-color) 85%, #000);
    --primary-gradient: var(--primary-color);
    --primary-glare: color-mix(in srgb, var(--primary-color) 18%, transparent);
    --primary-glow: color-mix(in srgb, var(--primary-color) 30%, transparent);
    --primary-subtle: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --primary-on: #ffffff;
    --primary-text: var(--primary-color);
    --secondary-color: var(--text-muted);
    --app-bg: var(--bg-color);
    --nb-app-bg: var(--bg-color);
    --nb-grid-line: color-mix(in srgb, var(--ink) 6%, transparent);
    --glass-bg: var(--card-bg);
    --glass-border: var(--border-color);
    --field-bg: var(--card-bg);
    --panel-bg: var(--card-bg);
    --panel-text: var(--text-main);
    --panel-muted: var(--text-light);
    --panel-line: var(--border-color);
    --panel-soft: color-mix(in srgb, var(--ink) 5%, transparent);
    --panel-shadow: color-mix(in srgb, var(--ink) 20%, transparent);
    --danger-text: #b91c1c;
}

/* ═══════════════════════ DARK MODE ═══════════════════════ */

[data-theme="dark"] body {
    color: var(--text-main);
}

[data-theme="dark"] .upload-area {
    background: var(--card-bg);
}

[data-theme="dark"] .upload-area:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] #searchInput {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] #searchInput:focus {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .table-header {
    background: var(--card-bg);
}

[data-theme="dark"] .table-row:hover {
    background: rgba(250, 204, 21, 0.12);
    color: var(--text-main);
}

[data-theme="dark"] .table-row.selected {
    background: color-mix(in srgb, var(--nb-yellow) 20%, transparent);
    border-left-color: var(--nb-yellow);
    color: var(--text-main);
}

[data-theme="dark"] .ab-nav {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] .ab-nav:hover:not(:disabled) {
    background: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] .btn-secondary {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] .btn-icon {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-light);
}

[data-theme="dark"] .btn-page {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] .btn-page:disabled {
    background: var(--bg-secondary);
}

/* Kártya-jellegű elemek egységes dark háttere (összevont szabály) */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .export-card,
[data-theme="dark"] .export-summary,
[data-theme="dark"] .preview-toolbar,
[data-theme="dark"] .file-info-bar,
[data-theme="dark"] .manual-input-card,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .table-container,
[data-theme="dark"] .lp-faq-item,
[data-theme="dark"] .help-section,
[data-theme="dark"] .support-reason-card,
[data-theme="dark"] .support-cost-card,
[data-theme="dark"] .support-other-card,
[data-theme="dark"] .support-thanks-card,
[data-theme="dark"] .custom-size-panel,
[data-theme="dark"] .custom-style-panel,
[data-theme="dark"] .gyik-categories {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-card-header {
    background: var(--primary-subtle);
}

[data-theme="dark"] .size-btn,
[data-theme="dark"] .style-btn {
    background: var(--card-bg);
    border-color: var(--border-strong);
}

/* Dark mode - Language selector */
[data-theme="dark"] .lang-selector__btn {
    background: var(--bg-secondary, #1e1e1e);
    border-color: var(--border-color, rgba(63, 63, 63, 0.6));
    color: var(--text-main, #f5f5f5);
}

[data-theme="dark"] .lang-selector__btn:hover {
    background: var(--border-strong, #525252);
    border-color: var(--primary-color, #facc15);
}

[data-theme="dark"] .lang-selector__code {
    color: var(--text-main, #f5f5f5);
}

[data-theme="dark"] .lang-selector__badge {
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-light, #a3a3a3);
}

[data-theme="dark"] .lang-selector__arrow {
    color: var(--text-light, #a3a3a3);
}

[data-theme="dark"] .lang-selector__dropdown {
    background: var(--card-bg, rgba(40, 40, 40, 0.85));
    border-color: var(--border-color, rgba(63, 63, 63, 0.6));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .lang-selector__option {
    color: var(--text-main, #f5f5f5);
}

[data-theme="dark"] .lang-selector__option:hover {
    background: var(--bg-secondary, #1e1e1e);
}

[data-theme="dark"] .lang-selector__option--active {
    background: var(--primary-subtle, rgba(250, 204, 21, 0.12));
    color: var(--primary-text);
}

[data-theme="dark"] .lang-selector__option--active::after {
    color: var(--primary-text);
}

/* ═══ KÖZÖS GENERÁTOR-TÉMA SZABÁLYOK ═══
   A korábban oldalanként (label/barcode/pricelist/sale) ismételt
   upload/tab/footer szabályok egyetlen token-alapú változata.
   A színt mindig az adott oldal --primary-color tokenje adja. */

/* Generator upload appearance is shared by the page-hero component in 04-components.css. */


[data-theme="dark"] .page-label .footer-links a:hover,
[data-theme="dark"] .page-barcode .footer-links a:hover,
[data-theme="dark"] .page-pricelist .footer-links a:hover,
[data-theme="dark"] .page-sale .footer-links a:hover {
    color: color-mix(in srgb, var(--primary-text) 78%, #fff);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

[data-theme="dark"] .action-bar {
    background: var(--bg-secondary);
    border-color: var(--ink);
}

[data-theme="dark"] .lp-section--alt {
    background: var(--bg-secondary);
}

[data-theme="dark"] .lp-cta-card {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .help-info-box {
    background: var(--primary-subtle);
    border-color: var(--ink);
}

[data-theme="dark"] .help-table th {
    background: var(--primary-subtle);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .support-donate-card {
    background: var(--card-bg);
}

[data-theme="dark"] .support-amount-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════ DARK MODE — INPUTS & FORMS ═══════════════════════ */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

[data-theme="dark"] .color-input-wrap {
    background: var(--card-bg);
    border-color: var(--border-strong);
}

[data-theme="dark"] input[type="color"] {
    border-color: var(--border-strong);
}

[data-theme="dark"] .color-input-wrap span {
    color: var(--text-light);
}

/* ═══════════════════════ DARK MODE — BUTTONS ═══════════════════════ */

[data-theme="dark"] .btn-file-new,
[data-theme="dark"] .btn-file-delete {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-light);
}

[data-theme="dark"] .btn-file-new:hover,
[data-theme="dark"] .btn-file-delete:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .btn-primary {
    background: var(--primary-gradient);
    color: var(--primary-on);
}

[data-theme="dark"] .btn-quick-action {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-light);
}

[data-theme="dark"] .btn-generate-full {
    background: var(--primary-gradient);
    color: var(--primary-on);
}

/* ═══════════════════════ DARK MODE — HELP PAGE ═══════════════════════ */

[data-theme="dark"] .help-list li {
    background: var(--card-bg);
    border-color: var(--ink);
    color: var(--text-light);
}

[data-theme="dark"] .help-settings-list li {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .help-step {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .help-style-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-size-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-toc {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-toc-link {
    color: var(--text-light);
}

[data-theme="dark"] .help-toc-link:hover,
[data-theme="dark"] .help-toc-link.active {
    background: var(--primary-subtle);
    color: var(--primary-text);
}

[data-theme="dark"] .help-hero {
    background: var(--card-bg);
    border-color: var(--ink);
}

/* ═══════════════════════ DARK MODE — TABS ═══════════════════════ */

[data-theme="dark"] .tab-content {
    background: transparent;
}

[data-theme="dark"] .tab-content-header {
    color: var(--text-main);
}

[data-theme="dark"] .tab-content-title {
    color: var(--text-main);
}

[data-theme="dark"] .tab-content-subtitle {
    color: var(--text-light);
}

/* ═══════════════════════ DARK MODE — MISC ═══════════════════════ */

[data-theme="dark"] .settings-card-body {
    background: transparent;
}

[data-theme="dark"] .logo-upload-area {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .logo-upload-content {
    color: var(--text-light);
}

[data-theme="dark"] .preview-page {
    background: #fff;
    border-color: var(--border-color);
}

[data-theme="dark"] .preview-viewport {
    background: #222222;
    background-image:
        radial-gradient(circle at 20px 20px, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 24px 24px;
}

[data-theme="dark"] .preview-empty {
    color: var(--text-muted);
}

[data-theme="dark"] .search-wrapper i {
    color: var(--text-muted);
}

[data-theme="dark"] .preview-info {
    color: var(--text-light);
}

[data-theme="dark"] .preview-zoom {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .zoom-btn {
    background: var(--card-bg);
    border-color: var(--ink);
    color: var(--text-light);
}

[data-theme="dark"] .preview-nav-btn {
    background: var(--card-bg);
    border-color: var(--ink);
    color: var(--text-light);
}

[data-theme="dark"] .export-card-icon {
    background: var(--nb-yellow, #facc15);
    color: var(--ink);
}

[data-theme="dark"] .lp-feature-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .lp-feature-card:hover {
    border-color: var(--ink);
}

[data-theme="dark"] .lp-why-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .lp-step {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .lp-detail-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .lp-table th {
    background: var(--primary-subtle);
    border-color: var(--border-color);
}

[data-theme="dark"] .lp-table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .support-hero {
    background: var(--card-bg);
}

[data-theme="dark"] .support-section h2 {
    color: var(--text-main);
}

[data-theme="dark"] .support-cost-fill {
    background: var(--primary-gradient);
}

[data-theme="dark"] .support-amount-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-on);
}

[data-theme="dark"] .btn-donate {
    background: var(--primary-gradient);
    color: var(--primary-on);
}

[data-theme="dark"] .support-note {
    color: var(--text-muted);
}

[data-theme="dark"] .support-hero-icon {
    background: #facc15;
    color: var(--primary-on);
    border: 2px solid #111;
    box-shadow: 3px 3px 0 var(--ink);
}

[data-theme="dark"] .main-footer {
    background: var(--bg-secondary);
    border-top: 2px solid #111;
}

[data-theme="dark"] .footer-col h4 {
    color: rgba(231, 231, 231, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .footer-links a {
    color: var(--text-muted);
}

[data-theme="dark"] .footer-links a:hover {
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
}

[data-theme="dark"] .footer-brand-text {
    color: var(--text-muted);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .footer-bottom p {
    color: var(--text-muted);
}

[data-theme="dark"] .footer-bottom-links a {
    color: var(--text-muted);
}

[data-theme="dark"] .footer-logo-wrap::before {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .custom-size-info {
    background: var(--card-bg);
    color: var(--primary-text);
}

[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.6;
}

[data-theme="dark"] .result-badge {
    background: var(--card-bg);
    border-color: var(--ink);
    color: var(--text-light);
}

[data-theme="dark"] .page-info {
    color: var(--text-light);
}

[data-theme="dark"] .tab-quick-actions {
    background: transparent;
}

[data-theme="dark"] .btn-sort.active {
    background: var(--nb-yellow, #facc15);
    border-color: var(--ink);
    color: var(--ink);
}

[data-theme="dark"] .instructions {
    background: transparent;
}

[data-theme="dark"] .logo-preview-wrap img {
    background: var(--card-bg);
    border-color: var(--ink);
}

[data-theme="dark"] .btn-logo-remove {
    background: var(--card-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

[data-theme="dark"] .btn-logo-remove:hover {
    background: var(--danger-color);
    color: #fff;
}

[data-theme="dark"] .custom-size-field input,
[data-theme="dark"] .custom-style-field input[type="text"] {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text-main);
}

[data-theme="dark"] .custom-size-field input:focus,
[data-theme="dark"] .custom-style-field input[type="text"]:focus {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .custom-font-grid {
    background: transparent;
}



/* ═══════════════════════ HEADER CONTROLS ═══════════════════════ */

.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
}

/* Four-choice theme selector. Swatches intentionally show each fixed palette. */
.theme-selector { position: relative; flex-shrink: 0; }
.theme-selector__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 7px 12px;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 3px 3px 0 var(--ink);
    font: 700 13px 'Outfit', sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.theme-selector__trigger:hover,
.theme-selector--open .theme-selector__trigger {
    background: var(--nb-yellow);
    color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}
.theme-selector__arrow { font-size: 10px; }
.theme-selector--open .theme-selector__arrow { transform: rotate(180deg); }
.theme-selector__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 120;
    width: 292px;
    max-width: calc(100vw - 76px);
    padding: 16px;
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 6px 6px 0 var(--ink);
}
@keyframes theme-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
}
.theme-selector__panel:not([hidden]) { animation: theme-panel-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .theme-selector__panel:not([hidden]) { animation: none; }
}
.theme-selector__panel fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.theme-selector__panel legend {
    width: 100%;
    padding: 0 0 14px;
    font: 800 15px/1.3 'Outfit', sans-serif;
}
.theme-selector__panel legend::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 1.5px solid var(--ink);
    border-radius: 3px;
    background: var(--nb-yellow);
    transform: rotate(-8deg);
}
.theme-selector__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px 6px;
    min-width: 0;
    margin: 0;
    padding: 9px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-color);
    color: var(--text-main);
    font: 700 13px/1.3 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-selector__option:hover { border-color: var(--primary-color); box-shadow: 2px 2px 0 var(--ink); background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-color)); }
.theme-selector__option:has(input:checked) { background: var(--primary-subtle); border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.theme-selector__option:has(input:focus-visible) { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.theme-selector__option-name { grid-row: 2; grid-column: 1; overflow-wrap: anywhere; }
.theme-selector__option input[type="radio"] {
    appearance: auto;
    grid-row: 2;
    grid-column: 2;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
    accent-color: var(--primary-color);
    cursor: pointer;
}
/* Neutralise the shared neo-brutal input:focus box-shadow/transform on the radio itself. */
.theme-selector__option input[type="radio"]:focus,
.theme-selector__option input[type="radio"]:focus-visible {
    outline: none;
    border: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
}
.theme-selector__swatch {
    position: relative;
    display: block;
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    height: 62px;
    overflow: hidden;
    border: 1px solid var(--preview-line);
    border-radius: 7px;
    background: var(--preview-bg);
}
.theme-selector__swatch::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 13px;
    border-bottom: 1px solid var(--preview-line);
    background: radial-gradient(circle at 7px 6px, var(--preview-accent) 2px, transparent 2.5px),
        radial-gradient(circle at 14px 6px, var(--preview-line) 2px, transparent 2.5px),
        radial-gradient(circle at 21px 6px, var(--preview-line) 2px, transparent 2.5px), var(--preview-card);
}
.theme-selector__swatch::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 9px;
    right: 9px;
    height: 27px;
    border: 1px solid var(--preview-line);
    border-left: 14px solid var(--preview-accent);
    border-radius: 4px;
    background: linear-gradient(var(--preview-text), var(--preview-text)) 7px 7px / 55% 3px no-repeat,
        linear-gradient(var(--preview-line), var(--preview-line)) 7px 15px / 35% 3px no-repeat, var(--preview-card);
    box-shadow: 2px 2px 0 var(--preview-line);
}
.theme-selector__swatch--dark { --preview-bg: #1e1e1e; --preview-card: #333333; --preview-accent: #facc15; --preview-text: #f5f5f5; --preview-line: #737373; }
.theme-selector__swatch--light { --preview-bg: #eff6ff; --preview-card: #ffffff; --preview-accent: #2563eb; --preview-text: #111111; --preview-line: #778599; }
.theme-selector__swatch--cream { --preview-bg: #faf7f0; --preview-card: #fffaf0; --preview-accent: #80532e; --preview-text: #29231d; --preview-line: #998770; }
.theme-selector__swatch--green { --preview-bg: #f4faf3; --preview-card: #f8fcf7; --preview-accent: #237044; --preview-text: #182c20; --preview-line: #7b957f; }
@media (prefers-reduced-motion: reduce) {
    .theme-selector__option { transition: none; }
}
@media (max-width: 640px) {
    .theme-selector__name, .theme-selector__arrow { display: none; }
    .theme-selector__trigger { width: 40px; padding: 7px; }
}
@media print { .theme-selector { display: none; } }