/* =========================================================
   02-theme-appearance.css
   Theme variables, theme picker, appearance modal and palette previews.
   S2 owner cleanup: rules were regrouped by selector responsibility.
   Do not add late override dumps; keep future edits in this owner.
========================================================= */

.theme-system-note {
display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 10px 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--sheet-header);
    color: var(--text-sub);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.45;
}

#appearanceModal .modal-body {
padding: 0;
}

body[data-app-theme="natural"][data-theme="light"] {
--bg-body: #eef3f1;
    --text-main: #172033;
    --text-sub: #667085;
    --bg-card: #ffffff;
    --border-color: #dbe4df;
    --accent-color: #2f7fbd;
    --accent-soft: #e4f1fb;
    --app-surface: rgba(255, 255, 255, 0.95);
    --sheet-header: #f7faf8;
    --hover-bg: #f4f8f6;
}

body[data-app-theme="natural"][data-theme="dark"] {
--bg-body: #0f172a;
    --text-main: #f1f5f9;
    --text-sub: #94a3b8;
    --bg-card: #1e293b;
    --border-color: #334155;
    --accent-color: #61a8df;
    --accent-soft: rgba(97, 168, 223, 0.22);
    --app-surface: rgba(30, 41, 59, 0.95);
    --sheet-header: #162033;
    --hover-bg: #243247;
}

body[data-app-theme="github"][data-theme="light"] {
--bg-body: #f6f8fa;
    --text-main: #1f2328;
    --text-sub: #59636e;
    --bg-card: #ffffff;
    --border-color: #d0d7de;
    --accent-color: #0969da;
    --accent-soft: #ddf4ff;
    --app-surface: rgba(255,255,255,0.97);
    --sheet-header: #f6f8fa;
    --hover-bg: #f3f4f6;
}

body[data-app-theme="github"][data-theme="dark"] {
--bg-body: #0d1117;
    --text-main: #e6edf3;
    --text-sub: #8b949e;
    --bg-card: #161b22;
    --border-color: #30363d;
    --accent-color: #2f81f7;
    --accent-soft: rgba(47,129,247,0.18);
    --app-surface: rgba(22,27,34,0.96);
    --sheet-header: #0d1117;
    --hover-bg: #21262d;
}

body[data-app-theme="solarized"][data-theme="light"] {
--bg-body: #fdf6e3;
    --text-main: #073642;
    --text-sub: #657b83;
    --bg-card: #fffdf2;
    --border-color: #e8dfc7;
    --accent-color: #268bd2;
    --accent-soft: #e4f1f5;
    --app-surface: rgba(255,253,242,0.96);
    --sheet-header: #fbf1d3;
    --hover-bg: #f4edcf;
}

body[data-app-theme="solarized"][data-theme="dark"] {
--bg-body: #002b36;
    --text-main: #eee8d5;
    --text-sub: #93a1a1;
    --bg-card: #073642;
    --border-color: #31545d;
    --accent-color: #2aa198;
    --accent-soft: rgba(42,161,152,0.18);
    --app-surface: rgba(7,54,66,0.96);
    --sheet-header: #06313b;
    --hover-bg: #0b4250;
}

body[data-app-theme="dracula"][data-theme="light"] {
--bg-body: #f8f7fb;
    --text-main: #282a36;
    --text-sub: #6272a4;
    --bg-card: #ffffff;
    --border-color: #dedaf0;
    --accent-color: #7c3aed;
    --accent-soft: #f1e8ff;
    --app-surface: rgba(255,255,255,0.96);
    --sheet-header: #faf7ff;
    --hover-bg: #f3ecff;
}

body[data-app-theme="dracula"][data-theme="dark"] {
--bg-body: #282a36;
    --text-main: #f8f8f2;
    --text-sub: #bdc3e3;
    --bg-card: #343746;
    --border-color: #52566b;
    --accent-color: #bd93f9;
    --accent-soft: rgba(189,147,249,0.18);
    --app-surface: rgba(52,55,70,0.96);
    --sheet-header: #303240;
    --hover-bg: #44475a;
}

.theme-settings-wrap {
display: grid;
    gap: 14px;
}

.theme-preview-panel {
border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--bg-card);
    overflow: hidden;
}

.theme-preview-head {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-color);
    background: var(--sheet-header);
    font-size: 0.82rem;
    font-weight: 850;
}

.theme-preview-body {
padding: 12px;
    background: var(--bg-body);
}

.theme-app-preview {
border: 1px solid var(--border-color);
    /* Use the unified large radius for the app preview cards */
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.theme-section-title {
font-size: 0.82rem;
    font-weight: 900;
    color: var(--text-main);
    margin: 2px 0 8px;
}

.theme-mode-grid,
.theme-preset-grid {
display: grid;
    gap: 8px;
}

.theme-mode-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-preset-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-mode-btn,
.theme-preset-card {
border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--bg-card);
    color: var(--text-main);
    min-height: 46px;
    padding: 11px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 850;
}

.theme-mode-btn {
justify-content: center;
    text-align: center;
}

.theme-mode-btn.active,
.theme-preset-card.active {
border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
    background: var(--accent-soft);
}

.theme-preset-card {
min-height: 76px;
    align-items: flex-start;
}

.theme-preset-main {
min-width: 0;
    display: grid;
    gap: 4px;
}

.theme-preset-main strong {
font-size: 0.86rem;
    line-height: 1.2;
}

.theme-preset-main small {
color: var(--text-sub);
    font-size: 0.7rem;
    line-height: 1.35;
}

.theme-swatch-row {
display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding-top: 1px;
}

.theme-swatch {
width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
}

.theme-current-note {
display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--sheet-header);
    color: var(--text-sub);
    font-size: 0.76rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
.theme-preset-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.theme-mode-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.theme-mode-btn,
.theme-preset-card {
min-height: 52px;
        padding: 13px;
}
}

@media (max-width: 640px) {
.theme-preview-body {
padding: 10px;
}
}

@media (max-width: 640px) {
.theme-current-note {
padding: 11px 12px;
}
}

[data-theme="dark"] .theme-preview-tab.active {
background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

body[data-app-theme="light-plus"][data-theme="light"] {
--bg-body:#f3f3f3; --text-main:#1f1f1f; --text-sub:#5f6368; --bg-card:#ffffff; --border-color:#d6d6d6;
    --accent-color:#007acc; --accent-soft:#e5f3ff; --app-surface:rgba(255,255,255,0.96); --sheet-header:#f7f7f7; --hover-bg:#eeeeee;
}

body[data-app-theme="dark-plus"][data-theme="dark"] {
--bg-body:#1e1e1e; --text-main:#d4d4d4; --text-sub:#9d9d9d; --bg-card:#252526; --border-color:#3c3c3c;
    --accent-color:#007acc; --accent-soft:rgba(0,122,204,0.22); --app-surface:rgba(37,37,38,0.96); --sheet-header:#2d2d30; --hover-bg:#333333;
}

body[data-app-theme="one-dark"][data-theme="dark"] {
--bg-body:#282c34; --text-main:#abb2bf; --text-sub:#8b93a1; --bg-card:#21252b; --border-color:#3a3f4b;
    --accent-color:#61afef; --accent-soft:rgba(97,175,239,0.18); --app-surface:rgba(33,37,43,0.96); --sheet-header:#2c313a; --hover-bg:#333842;
}

body[data-app-theme="tokyo-night"][data-theme="dark"] {
--bg-body:#1a1b26; --text-main:#c0caf5; --text-sub:#9aa5ce; --bg-card:#24283b; --border-color:#414868;
    --accent-color:#7aa2f7; --accent-soft:rgba(122,162,247,0.17); --app-surface:rgba(36,40,59,0.96); --sheet-header:#202436; --hover-bg:#2f354f;
}

body[data-app-theme="night-owl"][data-theme="dark"] {
--bg-body:#011627; --text-main:#d6deeb; --text-sub:#91a7bd; --bg-card:#0b253a; --border-color:#1d3b53;
    --accent-color:#82aaff; --accent-soft:rgba(130,170,255,0.18); --app-surface:rgba(11,37,58,0.96); --sheet-header:#071d31; --hover-bg:#11304a;
}

body[data-app-theme="monokai-pro"][data-theme="dark"] {
--bg-body:#2d2a2e; --text-main:#fcfcfa; --text-sub:#c1bdbf; --bg-card:#403e41; --border-color:#5b575d;
    --accent-color:#ffd866; --accent-soft:rgba(255,216,102,0.18); --app-surface:rgba(64,62,65,0.96); --sheet-header:#363338; --hover-bg:#4b484d;
}

body[data-app-theme="catppuccin"][data-theme="dark"] {
--bg-body:#1e1e2e; --text-main:#cdd6f4; --text-sub:#a6adc8; --bg-card:#313244; --border-color:#45475a;
    --accent-color:#cba6f7; --accent-soft:rgba(203,166,247,0.18); --app-surface:rgba(49,50,68,0.96); --sheet-header:#292a3a; --hover-bg:#3b3c52;
}

body[data-app-theme="ayu"][data-theme="light"] {
--bg-body:#fafafa; --text-main:#5c6773; --text-sub:#7f8a96; --bg-card:#ffffff; --border-color:#e6e8eb;
    --accent-color:#ff9940; --accent-soft:#fff0e0; --app-surface:rgba(255,255,255,0.97); --sheet-header:#f6f8fa; --hover-bg:#f0f3f6;
}

body[data-app-theme="catppuccin"][data-theme="light"] {
--bg-body:#eff1f5; --text-main:#4c4f69; --text-sub:#6c6f85; --bg-card:#ffffff; --border-color:#ccd0da;
    --accent-color:#8839ef; --accent-soft:#efe4ff; --app-surface:rgba(255,255,255,0.97); --sheet-header:#f5f6fb; --hover-bg:#e6e9ef;
}

body[data-app-theme="gameboy-classic"][data-theme="light"] {
--bg-body:#f0f4e8; --text-main:#24331f; --text-sub:#68755e; --bg-card:#ffffff; --border-color:#c7d3a6;
    --accent-color:#5d4a9b; --accent-soft:#e8e0f5; --app-surface:rgba(255,255,255,0.96); --sheet-header:#d2df9f; --sheet-grid:#aab985; --hover-bg:#e6edd8;
    --driver-bg:#e2ebc2; --seat-bg:#d2df9f; --seat-slot-bg:#fbfdf4; --tray-bg:#f6f8ef; --modal-bg:#fffff8; --modal-header-bg:#f6f8ef; --modal-footer-bg:#eef3df;
}

body[data-app-theme="gameboy-classic"][data-theme="dark"] {
--bg-body:#0f1d12; --text-main:#d8e982; --text-sub:#9daf66; --bg-card:#18341d; --border-color:#315336;
    --accent-color:#8fbf45; --accent-soft:rgba(143,191,69,0.18); --app-surface:rgba(24,52,29,0.96); --sheet-header:#122817; --sheet-grid:#315336; --hover-bg:#214227;
    --driver-bg:#122817; --seat-bg:#142b18; --seat-slot-bg:#18341d; --tray-bg:#152d19; --modal-bg:#18341d; --modal-header-bg:#152d19; --modal-footer-bg:#102314;
}

body[data-app-theme="eight-bit"][data-theme="light"] {
--bg-body:#ffffff; --text-main:#111111; --text-sub:#555555; --bg-card:#ffffff; --border-color:#d7d7d7;
    --accent-color:#165dff; --accent-soft:#fff34d; --app-surface:rgba(255,255,255,0.98); --sheet-header:#fff200; --sheet-grid:#d7d7d7; --hover-bg:#f2f2f2;
    --driver-bg:#fffef0; --seat-bg:#f6f6f6; --seat-slot-bg:#ffffff; --tray-bg:#ffffff; --modal-bg:#ffffff; --modal-header-bg:#fffef0; --modal-footer-bg:#f7f7f7;
}

body[data-app-theme="eight-bit"][data-theme="dark"] {
--bg-body:#000000; --text-main:#ffffff; --text-sub:#bdbdbd; --bg-card:#050505; --border-color:#303030;
    --accent-color:#22ff22; --accent-soft:rgba(34,255,34,0.16); --app-surface:rgba(5,5,5,0.96); --sheet-header:#101010; --sheet-grid:#303030; --hover-bg:#141414;
    --driver-bg:#050505; --seat-bg:#0c0c0c; --seat-slot-bg:#050505; --tray-bg:#050505; --modal-bg:#050505; --modal-header-bg:#101010; --modal-footer-bg:#000000;
}

body[data-app-theme="earthbound"][data-theme="light"] {
--bg-body:#edf4ed; --text-main:#293b31; --text-sub:#667c6f; --bg-card:#ffffff; --border-color:#b8ceb9;
    --accent-color:#5f806b; --accent-soft:#dbeadc; --app-surface:rgba(255,255,255,0.96); --sheet-header:#c7ddc7; --sheet-grid:#a9c2ad; --hover-bg:#e3eee3;
    --driver-bg:#d9ead9; --seat-bg:#e7f1e7; --seat-slot-bg:#fbfefb; --tray-bg:#f6faf5; --modal-bg:#ffffff; --modal-header-bg:#f6faf5; --modal-footer-bg:#edf4ed;
}

body[data-app-theme="earthbound"][data-theme="dark"] {
--bg-body:#12091d; --text-main:#f0e7ff; --text-sub:#baa9d6; --bg-card:#211431; --border-color:#3b2a55;
    --accent-color:#8f5cff; --accent-soft:rgba(143,92,255,0.20); --app-surface:rgba(33,20,49,0.96); --sheet-header:#1a1028; --sheet-grid:#3b2a55; --hover-bg:#2b1b40;
    --driver-bg:#1a1028; --seat-bg:#201430; --seat-slot-bg:#26173a; --tray-bg:#1d122c; --modal-bg:#211431; --modal-header-bg:#1d122c; --modal-footer-bg:#160d22;
}

body[data-app-theme="everforest"][data-theme="light"] {
--bg-body:#fff8dc; --text-main:#5c6a72; --text-sub:#829181; --bg-card:#fffbeb; --border-color:#ded7b5;
    --accent-color:#8da101; --accent-soft:#ecf0cf; --app-surface:rgba(255,251,235,0.96); --sheet-header:#f3efcf; --sheet-grid:#d8d0a8; --hover-bg:#f4efcf;
    --driver-bg:#f5f1d5; --seat-bg:#f7f3da; --seat-slot-bg:#fffdf2; --tray-bg:#fff9e6; --modal-bg:#fffbeb; --modal-header-bg:#fff9e6; --modal-footer-bg:#f5f1d5;
}

body[data-app-theme="everforest"][data-theme="dark"] {
--bg-body:#2d353b; --text-main:#d3c6aa; --text-sub:#a7b0a0; --bg-card:#343f44; --border-color:#4b565c;
    --accent-color:#a7c080; --accent-soft:rgba(167,192,128,0.18); --app-surface:rgba(52,63,68,0.96); --sheet-header:#2b3339; --sheet-grid:#4b565c; --hover-bg:#3d484d;
    --driver-bg:#2b3339; --seat-bg:#323c41; --seat-slot-bg:#343f44; --tray-bg:#303a3f; --modal-bg:#343f44; --modal-header-bg:#303a3f; --modal-footer-bg:#2b3339;
}

body[data-app-theme="horizon"][data-theme="light"] {
--bg-body:#fff5f7; --text-main:#1c1e26; --text-sub:#7d6d74; --bg-card:#fffafd; --border-color:#f1cdd5;
    --accent-color:#e95678; --accent-soft:#ffe4ea; --app-surface:rgba(255,250,253,0.96); --sheet-header:#fff0f3; --sheet-grid:#ecc8d1; --hover-bg:#ffeef3;
    --driver-bg:#fff0f3; --seat-bg:#fff6f8; --seat-slot-bg:#fffafd; --tray-bg:#fffafd; --modal-bg:#fffafd; --modal-header-bg:#fff6f8; --modal-footer-bg:#fff0f3;
}

body[data-app-theme="horizon"][data-theme="dark"] {
--bg-body:#1c1e26; --text-main:#fdf0ed; --text-sub:#b9a9aa; --bg-card:#232530; --border-color:#44465a;
    --accent-color:#e95678; --accent-soft:rgba(233,86,120,0.20); --app-surface:rgba(35,37,48,0.96); --sheet-header:#1f212b; --sheet-grid:#44465a; --hover-bg:#2e303d;
    --driver-bg:#1f212b; --seat-bg:#232530; --seat-slot-bg:#282a36; --tray-bg:#20222c; --modal-bg:#232530; --modal-header-bg:#20222c; --modal-footer-bg:#1c1e26;
}

body[data-app-theme="warm-burnout"][data-theme="light"] {
--bg-body:#f6efe5; --text-main:#34251c; --text-sub:#7a6656; --bg-card:#fffaf2; --border-color:#dcc8b4;
    --accent-color:#c76843; --accent-soft:#f8dfd0; --app-surface:rgba(255,250,242,0.96); --sheet-header:#efe4d5; --sheet-grid:#d7c1ad; --hover-bg:#f2e6d8;
    --driver-bg:#f3e6d8; --seat-bg:#f8efe5; --seat-slot-bg:#fffaf2; --tray-bg:#fbf4eb; --modal-bg:#fffaf2; --modal-header-bg:#fbf4eb; --modal-footer-bg:#f3e6d8;
}

body[data-app-theme="warm-burnout"][data-theme="dark"] {
--bg-body:#241a16; --text-main:#f5e6d6; --text-sub:#c8a993; --bg-card:#33241e; --border-color:#594136;
    --accent-color:#e07a4f; --accent-soft:rgba(224,122,79,0.20); --app-surface:rgba(51,36,30,0.96); --sheet-header:#2a1e19; --sheet-grid:#594136; --hover-bg:#3d2b24;
    --driver-bg:#2a1e19; --seat-bg:#30221d; --seat-slot-bg:#33241e; --tray-bg:#2c201b; --modal-bg:#33241e; --modal-header-bg:#2c201b; --modal-footer-bg:#241a16;
}

body[data-app-theme="anthropic-warm"][data-theme="light"] {
--bg-body:#f7f3ea; --text-main:#28231d; --text-sub:#70685c; --bg-card:#fffdf8; --border-color:#ddd5c7;
    --accent-color:#c96f50; --accent-soft:#f5ded3; --app-surface:rgba(255,253,248,0.96); --sheet-header:#f0ebe2; --sheet-grid:#d8cfc1; --hover-bg:#f2ece3;
    --driver-bg:#f0ebe2; --seat-bg:#f7f3ea; --seat-slot-bg:#fffdf8; --tray-bg:#fbf8f1; --modal-bg:#fffdf8; --modal-header-bg:#fbf8f1; --modal-footer-bg:#f0ebe2;
}

body[data-app-theme="anthropic-warm"][data-theme="dark"] {
--bg-body:#1f1b17; --text-main:#f1e9dc; --text-sub:#bfb3a4; --bg-card:#2d2721; --border-color:#4a4037;
    --accent-color:#d98263; --accent-soft:rgba(217,130,99,0.18); --app-surface:rgba(45,39,33,0.96); --sheet-header:#252019; --sheet-grid:#4a4037; --hover-bg:#382f28;
    --driver-bg:#252019; --seat-bg:#2a241e; --seat-slot-bg:#2d2721; --tray-bg:#28231d; --modal-bg:#2d2721; --modal-header-bg:#28231d; --modal-footer-bg:#1f1b17;
}

body[data-app-theme="gruvbox-material"][data-theme="light"] {
--bg-body:#f9f5d7; --text-main:#3c3836; --text-sub:#7c6f64; --bg-card:#fff9d9; --border-color:#d8c68a;
    --accent-color:#b57614; --accent-soft:#f0e5b8; --app-surface:rgba(255,249,217,0.96); --sheet-header:#efe3b3; --sheet-grid:#d5bf7f; --hover-bg:#f2e9c0;
    --driver-bg:#efe3b3; --seat-bg:#f6edc8; --seat-slot-bg:#fff9d9; --tray-bg:#fcf4cf; --modal-bg:#fff9d9; --modal-header-bg:#fcf4cf; --modal-footer-bg:#efe3b3;
}

body[data-app-theme="gruvbox-material"][data-theme="dark"] {
--bg-body:#282828; --text-main:#ddc7a1; --text-sub:#a89984; --bg-card:#32302f; --border-color:#504945;
    --accent-color:#d8a657; --accent-soft:rgba(216,166,87,0.18); --app-surface:rgba(50,48,47,0.96); --sheet-header:#2a2928; --sheet-grid:#504945; --hover-bg:#3c3836;
    --driver-bg:#2a2928; --seat-bg:#302d2c; --seat-slot-bg:#32302f; --tray-bg:#2e2c2b; --modal-bg:#32302f; --modal-header-bg:#2e2c2b; --modal-footer-bg:#282828;
}

body[data-app-theme="claude-warm"][data-theme="light"] {
--bg-body:#f5efe6; --text-main:#2d2924; --text-sub:#766b5e; --bg-card:#fffaf4; --border-color:#ded2c2;
    --accent-color:#b8623d; --accent-soft:#f2dccb; --app-surface:rgba(255,250,244,0.96); --sheet-header:#eee5da; --sheet-grid:#d6c8b7; --hover-bg:#f1e7dd;
    --driver-bg:#eee5da; --seat-bg:#f7f0e8; --seat-slot-bg:#fffaf4; --tray-bg:#fbf5ee; --modal-bg:#fffaf4; --modal-header-bg:#fbf5ee; --modal-footer-bg:#eee5da;
}

body[data-app-theme="claude-warm"][data-theme="dark"] {
--bg-body:#211b16; --text-main:#f2e8dc; --text-sub:#c3afa0; --bg-card:#302720; --border-color:#514136;
    --accent-color:#d97757; --accent-soft:rgba(217,119,87,0.19); --app-surface:rgba(48,39,32,0.96); --sheet-header:#271f1a; --sheet-grid:#514136; --hover-bg:#3a3028;
    --driver-bg:#271f1a; --seat-bg:#2e251f; --seat-slot-bg:#302720; --tray-bg:#2a221d; --modal-bg:#302720; --modal-header-bg:#2a221d; --modal-footer-bg:#211b16;
}

body[data-app-theme="skyblue"][data-theme="light"] {
--bg-body:#eef8ff; --text-main:#17324a; --text-sub:#61778b; --bg-card:#ffffff; --border-color:#c4dceb;
    --accent-color:#1f6aa5; --accent-soft:#dff1ff; --app-surface:rgba(255,255,255,0.96); --sheet-header:#e3f3ff; --sheet-grid:#b8d4e6; --hover-bg:#e8f5ff;
    --driver-bg:#e3f3ff; --seat-bg:#eef8ff; --seat-slot-bg:#ffffff; --tray-bg:#f7fcff; --modal-bg:#ffffff; --modal-header-bg:#f7fcff; --modal-footer-bg:#e3f3ff;
}

body[data-app-theme="skyblue"][data-theme="dark"] {
--bg-body:#0b1f33; --text-main:#e4f3ff; --text-sub:#9bc5df; --bg-card:#102f4c; --border-color:#28506e;
    --accent-color:#58b6ff; --accent-soft:rgba(88,182,255,0.18); --app-surface:rgba(16,47,76,0.96); --sheet-header:#0d2740; --sheet-grid:#28506e; --hover-bg:#163957;
    --driver-bg:#0d2740; --seat-bg:#0f2d49; --seat-slot-bg:#102f4c; --tray-bg:#0e2944; --modal-bg:#102f4c; --modal-header-bg:#0e2944; --modal-footer-bg:#0b1f33;
}

body[data-app-theme="retro-keyboard"][data-theme="light"] {
--bg-body:#f4efe4; --text-main:#2c2821; --text-sub:#706657; --bg-card:#fffaf0; --border-color:#d0c2ad;
    --accent-color:#8b5e34; --accent-soft:#eadac2; --app-surface:rgba(255,250,240,0.96); --sheet-header:#e7dcc9; --sheet-grid:#c9b8a0; --hover-bg:#eee4d3;
    --driver-bg:#e7dcc9; --seat-bg:#f2eadc; --seat-slot-bg:#fffaf0; --tray-bg:#fbf5ea; --modal-bg:#fffaf0; --modal-header-bg:#fbf5ea; --modal-footer-bg:#e7dcc9;
}

body[data-app-theme="retro-keyboard"][data-theme="dark"] {
--bg-body:#1f1a14; --text-main:#f3e6ce; --text-sub:#b9a58b; --bg-card:#2b251e; --border-color:#4d4032;
    --accent-color:#d7a35d; --accent-soft:rgba(215,163,93,0.19); --app-surface:rgba(43,37,30,0.96); --sheet-header:#241e18; --sheet-grid:#4d4032; --hover-bg:#352d25;
    --driver-bg:#241e18; --seat-bg:#2a231d; --seat-slot-bg:#2b251e; --tray-bg:#262019; --modal-bg:#2b251e; --modal-header-bg:#262019; --modal-footer-bg:#1f1a14;
}

body[data-app-theme="candy-pop"][data-theme="light"] {
--bg-body:#fff0f7; --text-main:#4a2233; --text-sub:#93657b; --bg-card:#fffafd; --border-color:#efbfd3;
    --accent-color:#d9468f; --accent-soft:#ffd8ec; --app-surface:rgba(255,250,253,0.96); --sheet-header:#ffe4f1; --sheet-grid:#edb6ce; --hover-bg:#ffeaf4;
    --driver-bg:#ffe4f1; --seat-bg:#fff2f8; --seat-slot-bg:#fffafd; --tray-bg:#fff7fb; --modal-bg:#fffafd; --modal-header-bg:#fff7fb; --modal-footer-bg:#ffe4f1;
}

body[data-app-theme="candy-pop"][data-theme="dark"] {
--bg-body:#251323; --text-main:#ffe4f2; --text-sub:#d6a3c2; --bg-card:#382035; --border-color:#5d3152;
    --accent-color:#f472b6; --accent-soft:rgba(244,114,182,0.20); --app-surface:rgba(56,32,53,0.96); --sheet-header:#2e182c; --sheet-grid:#5d3152; --hover-bg:#45283f;
    --driver-bg:#2e182c; --seat-bg:#351e32; --seat-slot-bg:#382035; --tray-bg:#301a2e; --modal-bg:#382035; --modal-header-bg:#301a2e; --modal-footer-bg:#251323;
}

body[data-app-theme="graphite-red"][data-theme="light"] {
--bg-body:#f5f5f5; --text-main:#252525; --text-sub:#6b6b6b; --bg-card:#ffffff; --border-color:#d7d7d7;
    --accent-color:#c73b3b; --accent-soft:#f3dede; --app-surface:rgba(255,255,255,0.96); --sheet-header:#eeeeee; --sheet-grid:#d1d1d1; --hover-bg:#eeeeee;
    --driver-bg:#eeeeee; --seat-bg:#f7f7f7; --seat-slot-bg:#ffffff; --tray-bg:#fafafa; --modal-bg:#ffffff; --modal-header-bg:#fafafa; --modal-footer-bg:#eeeeee;
}

body[data-app-theme="graphite-red"][data-theme="dark"] {
--bg-body:#171717; --text-main:#e8e8e8; --text-sub:#a3a3a3; --bg-card:#242424; --border-color:#3f3f3f;
    --accent-color:#f87171; --accent-soft:rgba(248,113,113,0.18); --app-surface:rgba(36,36,36,0.96); --sheet-header:#1f1f1f; --sheet-grid:#3f3f3f; --hover-bg:#303030;
    --driver-bg:#1f1f1f; --seat-bg:#242424; --seat-slot-bg:#292929; --tray-bg:#202020; --modal-bg:#242424; --modal-header-bg:#202020; --modal-footer-bg:#171717;
}

.theme-settings-wrap-v44 {
display: grid;
    gap: 12px;
    padding: 0 12px 14px;
}

.theme-preview-panel {
position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -12px;
    border-radius: 0 0 var(--radius-main) var(--radius-main);
    border-top: 0;
    background: var(--bg-card);
    box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

.theme-preview-head {
padding: 10px 12px 6px;
}

#appearanceCurrentLabel {
display: none;
}

.theme-preview-body {
padding: 0 12px 12px;
}

.theme-app-preview {
border-radius: var(--radius-main);
    overflow: hidden;
}

.theme-picker-grid {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.theme-picker {
border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--bg-card);
    overflow: hidden;
}

.theme-picker summary {
min-height: 46px;
    padding: 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon label" "icon value";
    gap: 1px 8px;
    cursor: pointer;
    list-style: none;
    color: var(--text-main);
}

.theme-picker summary::-webkit-details-marker {
display: none;
}

.theme-picker summary i {
grid-area: icon; align-self: center; color: var(--accent-color); font-size: 1rem;
}

.theme-picker summary span {
grid-area: label; font-size: 0.75rem; font-weight: 900; color: var(--text-main);
}

.theme-picker summary strong {
grid-area: value; font-size: 0.68rem; font-weight: 800; color: var(--text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.theme-picker[open] summary {
border-bottom: 1px solid var(--border-color);
}

.theme-choice-scroller {
display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 9px 8px 10px;
}

.theme-choice-scroller .theme-preset-card {
flex: 0 0 128px;
    min-height: 86px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 9px;
    border-radius: var(--radius-main);
    background: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.theme-choice-scroller .theme-preset-card.stored {
border-color: var(--accent-color);
}

.theme-choice-scroller .theme-preset-card.active {
background: var(--accent-soft);
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.theme-choice-scroller .theme-preset-main strong {
font-size: 0.78rem; line-height: 1.15;
}

.theme-choice-scroller .theme-preset-main small {
font-size: 0.64rem; line-height: 1.25;
}

.theme-current-note,
.theme-section-title,
.theme-mode-grid,
.theme-preset-grid:not(.theme-choice-scroller) {
display: none;
}

@media (max-width: 520px) {
.theme-settings-wrap-v44 {
padding: 0 9px 12px;
}
}

@media (max-width: 520px) {
.theme-preview-panel {
margin: 0 -9px;
}
}

@media (max-width: 520px) {
.theme-picker-grid {
grid-template-columns: 1fr 1fr; gap: 8px;
}
}

@media (max-width: 520px) {
.theme-choice-scroller .theme-preset-card {
flex-basis: 118px; min-height: 82px;
}
}

@media (max-width: 520px) {
.theme-picker summary {
padding: 9px 8px;
}
}

@media (max-width: 520px) {
.theme-picker summary span {
font-size: 0.7rem;
}
}

@media (max-width: 520px) {
.theme-picker summary strong {
font-size: 0.64rem;
}
}

.appearance-modal .modal-content,
#appearanceModal .modal-content {
background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.appearance-modal .modal-header,
#appearanceModal .modal-header {
border-bottom: 1px solid var(--border-color);
}

.appearance-modal .modal-footer,
#appearanceModal .modal-footer {
border-top: 1px solid var(--border-color);
}

.theme-picker-grid,
.theme-palette-grid,
.appearance-theme-grid {
display: grid;
    gap: 10px;
}

.theme-option,
.theme-palette-option,
 .appearance-theme-option {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    /* Use the unified main radius for theme tiles */
    border-radius: var(--radius-main);
    min-height: 44px;
    padding: 10px 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.theme-option:hover,
.theme-palette-option:hover,
.appearance-theme-option:hover {
border-color: var(--accent-color);
    background: var(--hover-bg);
}

.theme-option.active,
.theme-palette-option.active,
.appearance-theme-option.active,
.theme-option[aria-pressed="true"],
.theme-palette-option[aria-pressed="true"],
.appearance-theme-option[aria-pressed="true"] {
border-color: var(--accent-color);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 24%, transparent);
}

.theme-dropdown,
.theme-menu,
 .appearance-dropdown {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    /* Use the unified large radius for dropdown menus */
    border-radius: var(--radius-lg);
    /* Use the same floating shadow as defined in base tokens */
    box-shadow: var(--shadow-float);
}

.theme-dropdown [role="option"],
.theme-menu [role="option"],
.appearance-dropdown [role="option"] {
min-height: 42px;
    border-radius: 10px;
}

.theme-dropdown [role="option"]:hover,
.theme-menu [role="option"]:hover,
.appearance-dropdown [role="option"]:hover {
background: var(--hover-bg);
}

@media (max-width: 640px) {
.theme-picker-grid,
.theme-palette-grid,
.appearance-theme-grid {
gap: 8px;
}
}

@media (max-width: 640px) {
.theme-option,
.theme-palette-option,
.appearance-theme-option {
min-height: 42px;
        padding: 9px 10px;
        border-radius: 12px;
}
}

.theme-system-note i {
color: var(--accent-color);
    margin-top: 2px;
}

#appearanceModal .theme-preview-panel {
position: static;
    margin: 0;
    border-radius: var(--radius-main);
    box-shadow: none;
}

#appearanceModal .theme-preview-head {
padding: 10px 12px 6px;
    border-bottom: 0;
    background: transparent;
}

#appearanceModal .theme-preview-body {
padding: 8px 12px 12px;
    background: transparent;
}

#appearanceModal .theme-simple-preview {
display: grid;
    gap: 8px;
    border: 1px solid var(--border-color);
    /* Use unified large radius for the simple preview container */
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 38%),
        var(--bg-body);
    padding: 10px;
    overflow: hidden;
}

#appearanceModal .theme-simple-top,
#appearanceModal .theme-simple-tabs,
#appearanceModal .theme-simple-body {
display: grid;
    gap: 6px;
}

#appearanceModal .theme-simple-top {
grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

#appearanceModal .theme-simple-title {
min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 900;
}

#appearanceModal .theme-simple-pill {
border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
    padding: 5px 9px;
    font-size: 0.68rem;
    font-weight: 900;
}

#appearanceModal .theme-simple-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    border: 1px solid var(--border-color);
}

#appearanceModal .theme-simple-tabs span {
min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--text-sub);
    font-size: 0.68rem;
    font-weight: 850;
}

#appearanceModal .theme-simple-tabs span.active {
background: var(--accent-soft);
    color: var(--accent-color);
}

#appearanceModal .theme-simple-body {
grid-template-columns: minmax(0, 1fr) minmax(92px, 0.55fr);
}

#appearanceModal .theme-simple-card {
display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 9px;
}

#appearanceModal .theme-simple-card strong {
color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.15;
}

#appearanceModal .theme-simple-card span,
#appearanceModal .theme-simple-card small {
min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sub);
    font-size: 0.68rem;
    font-weight: 750;
}

#appearanceModal .theme-simple-card.accent {
background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
}

@media (max-width: 390px) {
#appearanceModal .theme-simple-body {
grid-template-columns: 1fr;
}
}

@media (max-width: 390px) {
#appearanceModal .theme-preview-head {
padding-left: 10px;
        padding-right: 10px;
}
}

@media (max-width: 390px) {
#appearanceModal .theme-preview-body {
padding-left: 10px;
        padding-right: 10px;
}
}

#appearanceModal .theme-settings-wrap-v44 {
display: grid;
    gap: 12px;
}

#appearanceModal .theme-picker-grid {
position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    z-index: 50;
}

#appearanceModal .theme-picker {
position: relative;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--bg-card);
    overflow: visible;
}

#appearanceModal .theme-picker[open] {
z-index: 91;
}

#appearanceModal .theme-picker summary {
min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon label arrow" "icon value arrow";
    align-items: center;
    gap: 1px 6px;
    padding: 8px 7px;
    border-bottom: 0;
    cursor: pointer;
    list-style: none;
    color: var(--text-main);
}

#appearanceModal .theme-picker summary::-webkit-details-marker {
display: none;
}

#appearanceModal .theme-picker summary i {
grid-area: icon;
    align-self: center;
    color: var(--accent-color);
    font-size: 0.92rem;
}

#appearanceModal .theme-picker summary span {
grid-area: label;
    color: var(--text-main);
    font-size: 0.68rem;
    font-weight: 900;
}

#appearanceModal .theme-picker summary strong {
grid-area: value;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sub);
    font-size: 0.62rem;
    font-weight: 800;
}

#appearanceModal .theme-picker summary::after {
content: "";
    grid-area: arrow;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--accent-color);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.64rem;
    line-height: 1;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#appearanceModal .theme-picker[open] summary {
background: var(--hover-bg);
}

#appearanceModal .theme-picker[open] summary::after {
transform: rotate(180deg);
    background: var(--accent-soft);
    border-color: var(--accent-color);
}

#appearanceModal .theme-choice-scroller {
position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    max-height: min(32dvh, 240px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    background: var(--bg-card);
    box-shadow: var(--shadow-float);
    z-index: 90;
}

#appearanceModal .theme-choice-scroller .theme-preset-card {
width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px 7px;
    text-align: left;
    border-radius: var(--radius-main);
    background: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

#appearanceModal .theme-choice-scroller .theme-preset-card.stored {
border-color: var(--accent-color);
}

#appearanceModal .theme-choice-scroller .theme-preset-card.active {
background: var(--accent-soft);
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

#appearanceModal .theme-choice-scroller .theme-swatch-row {
min-width: 0;
    display: flex;
    gap: 3px;
    margin: 0;
}

#appearanceModal .theme-choice-scroller .theme-swatch {
width: 12px;
    height: 12px;
}

#appearanceModal .theme-choice-scroller .theme-preset-main {
min-width: 0;
}

#appearanceModal .theme-choice-scroller .theme-preset-main strong,
#appearanceModal .theme-choice-scroller .theme-preset-main small {
display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#appearanceModal .theme-choice-scroller .theme-preset-main strong {
font-size: 0.78rem;
    line-height: 1.15;
}

#appearanceModal .theme-choice-scroller .theme-preset-main small {
color: var(--text-sub);
    font-size: 0.64rem;
    line-height: 1.25;
}

#appearanceModal .theme-current-note,
#appearanceModal .theme-section-title,
#appearanceModal .theme-mode-grid,
#appearanceModal .theme-preset-grid:not(.theme-choice-scroller) {
display: none;
}

@media (max-width: 390px) {
#appearanceModal .theme-picker-grid {
gap: 7px;
}
}

@media (max-width: 390px) {
#appearanceModal .theme-picker summary {
min-height: 48px;
        padding: 8px 7px;
}
}

@media (max-width: 390px) {
#appearanceModal .theme-choice-scroller {
max-height: min(28dvh, 200px);
}
}

#appearanceModal .modal-dialog {
height: min(100dvh, calc(100dvh - 16px));
    max-height: calc(100dvh - 16px);
    margin-top: 8px;
    margin-bottom: 8px;
}

#appearanceModal .modal-content {
position: relative;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#appearanceModal .modal-header {
flex: 0 0 auto;
}

#appearanceModal .modal-body {
flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
}

#appearanceModal .modal-footer {
position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 320;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
    gap: 8px;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 82%, transparent), var(--bg-card));
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12);
    pointer-events: auto;
}

#appearanceModal .modal-footer .btn {
position: relative;
    z-index: 41;
    min-height: 42px;
    border-radius: var(--radius-sm);
    font-weight: 850;
    pointer-events: auto;
    touch-action: manipulation;
}

#appearanceModal .modal-footer .btn-primary {
background: var(--accent-color);
    border-color: var(--accent-color);
}

#appearanceModal .theme-settings-wrap-v44 {
min-height: 0;
    padding-bottom: 4px;
}

#appearanceModal .theme-picker-grid {
align-items: start;
}

#appearanceModal .theme-choice-scroller {
max-height: min(32dvh, 240px);
    z-index: 90;
}

#appearanceModal .theme-picker[open] {
z-index: 91;
}

@media (max-width: 640px) {
#appearanceModal .modal-dialog {
height: 100dvh;
        max-height: 100dvh;
        margin: 0;
}
}

@media (max-width: 640px) {
#appearanceModal .modal-content {
border-radius: 0;
}
}

@media (max-width: 640px) {
#appearanceModal .modal-body {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
}
}

@media (max-width: 640px) {
#appearanceModal .modal-footer {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        padding-left: 10px;
        padding-right: 10px;
}
}

@media (max-width: 640px) {
#appearanceModal .modal-footer .btn {
min-height: 44px;
}
}

@media (max-width: 640px) {
#appearanceModal .theme-choice-scroller {
max-height: min(28dvh, 200px);
        z-index: 90;
}
}

@media (max-width: 360px) {
#appearanceModal .modal-footer {
grid-template-columns: 1fr;
}
}

#appearanceModal .modal-footer {
min-height: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

#appearanceModal .modal-footer .btn {
box-shadow: none;
}

#appearanceModal .theme-picker summary {
border-radius: calc(var(--radius-main) - 1px);
}

#appearanceModal .theme-choice-scroller .theme-preset-card {
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

#appearanceModal .theme-choice-scroller .theme-preset-card:active {
transform: scale(0.99);
}

.theme-option-btn,
.appearance-choice {
border-radius: var(--radius-main);
}

.theme-simple-pill,
.theme-pill {
border-radius: var(--radius-sm);
}

/* Modern default theme tuning. */
body[data-app-theme="natural"][data-theme="light"] {
    --bg-body: #f5f7fb;
    --text-main: #111827;
    --text-sub: #667085;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --accent-color: #2f7fbd;
    --accent-soft: #e4f1fb;
    --app-surface: rgba(255, 255, 255, 0.94);
    --sheet-header: #f8fafc;
    --hover-bg: #f9fafb;
}

body[data-app-theme="natural"][data-theme="dark"] {
    --bg-body: #0b1220;
    --text-main: #f8fafc;
    --text-sub: #a7b1c2;
    --bg-card: #111827;
    --border-color: #263244;
    --accent-color: #61a8df;
    --accent-soft: rgba(97, 168, 223, 0.22);
    --app-surface: rgba(17, 24, 39, 0.9);
    --sheet-header: #0f172a;
    --hover-bg: #172033;
}

.theme-settings-wrap {
    gap: 16px;
}

.theme-preview-panel,
.theme-app-preview,
.theme-mode-btn,
.theme-preset-card {
    border-color: var(--hairline, var(--border-color));
    box-shadow: var(--shadow-card);
}

.theme-preview-panel,
.theme-app-preview {
    border-radius: var(--radius-lg);
}

.theme-preview-head {
    background: linear-gradient(180deg, var(--sheet-header), color-mix(in srgb, var(--sheet-header) 80%, var(--bg-card)));
    padding: 13px 15px;
}

.theme-mode-btn,
.theme-preset-card {
    border-radius: var(--radius-main);
    background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
}

.theme-mode-btn:hover,
.theme-preset-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
    background: var(--hover-bg);
    transform: translateY(-1px);
}

.theme-mode-btn.active,
.theme-preset-card.active {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-color) 56%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}