/* === Palette anchors === */
:root,
html[data-theme="1"] {
    --theme-primary: #FFE295;
    --theme-secondary: #86D7EE;
    --theme-tertiary: #FFE295;
    --on-primary: #302915;
    --on-secondary: #16323a;
    --on-accent: #1f3030;
    --on-video: #183138;
}

html[data-theme="2"] {
    --theme-primary: #5DAEA0;
    --theme-secondary: #F8F3ED;
    --theme-tertiary: #5DAEA0;
    --on-primary: #102a26;
    --on-secondary: #292620;
    --on-accent: #18302b;
    --on-video: #29302c;
}

html[data-theme="3"] {
    --theme-primary: #D3FFAF;
    --theme-secondary: #05A5FA;
    --theme-tertiary: #D3FFAF;
    --on-primary: #203019;
    --on-secondary: #062b40;
    --on-accent: #16332d;
    --on-video: #082e40;
}

html[data-theme="4"] {
    --theme-primary: #012696;
    --theme-secondary: #A4E2C6;
    --theme-tertiary: #012696;
    --on-primary: #ffffff;
    --on-secondary: #18352b;
    --on-accent: #ffffff;
    --on-video: #172f2b;
}

html[data-theme="5"] {
    --theme-primary: #C0D392;
    --theme-secondary: #FFA6A0;
    --theme-tertiary: #C0D392;
    --on-primary: #28301a;
    --on-secondary: #3a211f;
    --on-accent: #332821;
    --on-video: #392522;
}

html[data-theme="6"] {
    --theme-primary: #73AE52;
    --theme-secondary: #FBF1D7;
    --theme-tertiary: #73AE52;
    --on-primary: #173010;
    --on-secondary: #302b20;
    --on-accent: #263219;
    --on-video: #302e23;
}

html[data-theme="7"] {
    --theme-primary: #B18739;
    --theme-secondary: #1F4A39;
    --theme-tertiary: #2A221D;
    --on-primary: #211a10;
    --on-secondary: #f8f3e8;
    --on-accent: #ffffff;
    --on-video: #ffffff;
}

/* === Shared light theme tokens === */
html[data-theme] {
    --canvas: color-mix(in srgb, var(--theme-primary) 10%, color-mix(in srgb, var(--theme-secondary) 14%, #ffffff));
    --surface: color-mix(in srgb, var(--theme-primary) 8%, rgba(255, 255, 255, 0.78));
    --surface-strong: color-mix(in srgb, var(--theme-secondary) 7%, rgba(255, 255, 255, 0.9));
    --surface-soft: color-mix(in srgb, var(--theme-secondary) 8%, rgba(248, 250, 249, 0.72));
    --surface-inset: color-mix(in srgb, var(--theme-secondary) 12%, rgba(226, 233, 232, 0.72));
    --text: #172126;
    --text-soft: color-mix(in srgb, var(--theme-primary) 7%, #39474b);
    --text-muted: color-mix(in srgb, var(--theme-secondary) 10%, #667479);
    --border: color-mix(in srgb, var(--theme-primary) 15%, rgba(75, 91, 95, 0.18));
    --border-strong: color-mix(in srgb, var(--theme-secondary) 18%, rgba(58, 75, 79, 0.3));
    --primary: var(--theme-primary);
    --primary-dark: color-mix(in srgb, var(--theme-primary) 44%, #20292b);
    --primary-soft: color-mix(in srgb, var(--theme-primary) 22%, rgba(255, 255, 255, 0.82));
    --secondary: var(--theme-secondary);
    --secondary-dark: color-mix(in srgb, var(--theme-secondary) 46%, #20292b);
    --secondary-soft: color-mix(in srgb, var(--theme-secondary) 22%, rgba(255, 255, 255, 0.82));
    --blue: color-mix(in srgb, var(--theme-secondary) 52%, #172126);
    --blue-soft: var(--secondary-soft);
    --glass-border: color-mix(in srgb, var(--theme-primary) 10%, rgba(255, 255, 255, 0.76));
    --glass-border-strong: color-mix(in srgb, var(--theme-secondary) 20%, rgba(255, 255, 255, 0.84));
    --glass-raised: color-mix(in srgb, var(--theme-primary) 7%, rgba(255, 255, 255, 0.76));
    --glass-raised-strong: color-mix(in srgb, var(--theme-secondary) 6%, rgba(255, 255, 255, 0.9));
    --glass-soft: color-mix(in srgb, var(--theme-secondary) 9%, rgba(246, 249, 248, 0.72));
    --glass-inset: color-mix(in srgb, var(--theme-secondary) 10%, rgba(231, 237, 236, 0.72));
    --glass-hover: color-mix(in srgb, var(--theme-primary) 8%, rgba(255, 255, 255, 0.86));
    --glass-selected: color-mix(in srgb, var(--theme-primary) 25%, rgba(255, 255, 255, 0.72));
    --glass-selected-secondary: color-mix(in srgb, var(--theme-secondary) 25%, rgba(255, 255, 255, 0.72));
    --field-bg: color-mix(in srgb, var(--theme-secondary) 7%, rgba(248, 250, 249, 0.78));
    --table-head-bg: color-mix(in srgb, var(--theme-secondary) 11%, rgba(229, 235, 234, 0.7));
    --avatar-bg: color-mix(in srgb, var(--theme-secondary) 15%, #dfe7e8);
    --control-off: color-mix(in srgb, var(--theme-secondary) 12%, #cbd4d5);
    --focus-ring: color-mix(in srgb, var(--theme-secondary) 34%, transparent);
    --shadow-color: color-mix(in srgb, var(--theme-secondary) 10%, rgba(48, 62, 66, 0.14));
    --shadow-highlight: color-mix(in srgb, var(--theme-primary) 6%, rgba(255, 255, 255, 0.78));
    --action-primary: var(--theme-primary);
    --action-secondary: var(--theme-secondary);
    --action-accent: color-mix(in srgb, var(--theme-primary) 62%, var(--theme-secondary));
    --action-video: color-mix(in srgb, var(--theme-secondary) 72%, var(--theme-primary));
    --modal-surface: color-mix(in srgb, var(--theme-secondary) 8%, rgba(248, 250, 249, 0.94));
    --scrim: rgba(21, 30, 33, 0.54);
    --media-bg: #111719;
    --shadow: 9px 9px 24px var(--shadow-color), -8px -8px 22px var(--shadow-highlight), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --shadow-hover: 11px 12px 28px color-mix(in srgb, var(--theme-secondary) 12%, rgba(48, 62, 66, 0.17)), -9px -9px 24px var(--shadow-highlight), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --shadow-inset: inset 3px 3px 8px color-mix(in srgb, var(--theme-secondary) 8%, rgba(50, 65, 69, 0.11)), inset -3px -3px 8px rgba(255, 255, 255, 0.78);
    color-scheme: light;
    scrollbar-color: var(--border-strong) transparent;
}

/* === Forest and brass dark theme === */
html[data-theme="7"] {
    --canvas: #2A221D;
    --surface: color-mix(in srgb, #1F4A39 28%, rgba(42, 34, 29, 0.88));
    --surface-strong: color-mix(in srgb, #1F4A39 34%, rgba(42, 34, 29, 0.95));
    --surface-soft: color-mix(in srgb, #1F4A39 24%, rgba(42, 34, 29, 0.82));
    --surface-inset: color-mix(in srgb, #1F4A39 31%, rgba(27, 23, 20, 0.9));
    --text: color-mix(in srgb, #B18739 14%, #ffffff);
    --text-soft: color-mix(in srgb, #B18739 25%, #ffffff);
    --text-muted: color-mix(in srgb, #1F4A39 22%, #d8d3c8);
    --border: color-mix(in srgb, #B18739 25%, transparent);
    --border-strong: color-mix(in srgb, #B18739 42%, transparent);
    --primary: #B18739;
    --primary-dark: color-mix(in srgb, #B18739 72%, #ffffff);
    --primary-soft: color-mix(in srgb, #B18739 22%, transparent);
    --secondary: #1F4A39;
    --secondary-dark: color-mix(in srgb, #1F4A39 56%, #ffffff);
    --secondary-soft: color-mix(in srgb, #1F4A39 58%, transparent);
    --blue: color-mix(in srgb, #1F4A39 42%, #ffffff);
    --blue-soft: color-mix(in srgb, #1F4A39 52%, transparent);
    --success: #75c39b;
    --success-soft: color-mix(in srgb, #1F4A39 58%, transparent);
    --warning: #d3a957;
    --warning-soft: color-mix(in srgb, #B18739 22%, transparent);
    --danger: #ef8c8b;
    --danger-soft: rgba(195, 65, 74, 0.17);
    --glass-border: color-mix(in srgb, #B18739 24%, rgba(255, 255, 255, 0.08));
    --glass-border-strong: color-mix(in srgb, #B18739 42%, rgba(255, 255, 255, 0.09));
    --glass-raised: color-mix(in srgb, #1F4A39 25%, rgba(42, 34, 29, 0.84));
    --glass-raised-strong: color-mix(in srgb, #1F4A39 35%, rgba(42, 34, 29, 0.92));
    --glass-soft: color-mix(in srgb, #1F4A39 20%, rgba(42, 34, 29, 0.78));
    --glass-inset: color-mix(in srgb, #1F4A39 28%, rgba(24, 20, 17, 0.9));
    --glass-hover: color-mix(in srgb, #1F4A39 44%, rgba(42, 34, 29, 0.88));
    --glass-selected: color-mix(in srgb, #B18739 22%, rgba(42, 34, 29, 0.82));
    --glass-selected-secondary: color-mix(in srgb, #1F4A39 62%, rgba(42, 34, 29, 0.78));
    --field-bg: color-mix(in srgb, #1F4A39 24%, rgba(24, 20, 17, 0.86));
    --table-head-bg: color-mix(in srgb, #1F4A39 38%, rgba(31, 26, 22, 0.9));
    --avatar-bg: color-mix(in srgb, #1F4A39 56%, #2A221D);
    --control-off: color-mix(in srgb, #1F4A39 34%, #2A221D);
    --focus-ring: color-mix(in srgb, #B18739 42%, transparent);
    --shadow-color: rgba(9, 8, 7, 0.42);
    --shadow-highlight: rgba(177, 135, 57, 0.08);
    --modal-surface: color-mix(in srgb, #1F4A39 28%, rgba(42, 34, 29, 0.97));
    --scrim: rgba(8, 7, 6, 0.72);
    --media-bg: #100e0c;
    --shadow: 9px 10px 25px var(--shadow-color), -7px -7px 20px var(--shadow-highlight), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-hover: 11px 13px 29px rgba(8, 7, 6, 0.5), -8px -8px 22px rgba(177, 135, 57, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-inset: inset 3px 3px 8px rgba(8, 7, 6, 0.38), inset -3px -3px 8px rgba(177, 135, 57, 0.07);
    color-scheme: dark;
}

/* === Themed application surfaces === */
html[data-theme] body {
    background: var(--canvas);
    transition: background-color 180ms ease, color 180ms ease;
}

html[data-theme] .app-backdrop {
    background-color: var(--canvas);
    background-image:
        linear-gradient(132deg, color-mix(in srgb, var(--theme-primary) 30%, transparent) 0%, transparent 47%),
        linear-gradient(318deg, color-mix(in srgb, var(--theme-secondary) 28%, transparent) 0%, transparent 52%),
        linear-gradient(28deg, rgba(255, 255, 255, 0.4) 0%, transparent 44%);
}

html[data-theme="7"] .app-backdrop {
    background-color: #2A221D;
    background-image:
        linear-gradient(135deg, rgba(177, 135, 57, 0.16) 0%, transparent 42%),
        linear-gradient(315deg, rgba(31, 74, 57, 0.72) 0%, transparent 58%),
        linear-gradient(25deg, rgba(42, 34, 29, 0.9) 0%, transparent 46%);
}

html[data-theme] .app-backdrop::after {
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-secondary) 20%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 16%, transparent) 1px, transparent 1px);
}

html[data-theme] button:focus-visible,
html[data-theme] a:focus-visible,
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible {
    outline-color: var(--focus-ring);
}

html[data-theme] ::selection {
    background: color-mix(in srgb, var(--theme-primary) 34%, transparent);
}

html[data-theme] .navbar {
    border-bottom-color: var(--glass-border);
    background: color-mix(in srgb, var(--canvas) 76%, transparent);
    box-shadow: 0 8px 24px var(--shadow-color);
}

html[data-theme] .brand-mark,
html[data-theme] .nav-toggle,
html[data-theme] .theme-toggle,
html[data-theme] .card-heading-icon,
html[data-theme] .stat-icon,
html[data-theme] .login-emblem {
    border-color: var(--glass-border-strong);
    background: var(--glass-raised-strong);
    box-shadow: 5px 5px 12px var(--shadow-color), -5px -5px 12px var(--shadow-highlight), inset 0 1px 0 color-mix(in srgb, #ffffff 52%, transparent);
}

html[data-theme] .brand-mark,
html[data-theme] .login-emblem {
    color: var(--primary-dark);
}

html[data-theme] .brand-mark svg {
    fill: color-mix(in srgb, var(--theme-primary) 22%, transparent);
}

html[data-theme] .nav-links a:hover {
    border-color: var(--glass-border);
    background: var(--glass-hover);
    box-shadow: 3px 3px 9px var(--shadow-color), -3px -3px 9px var(--shadow-highlight);
}

html[data-theme] .nav-links a.is-active {
    border-color: color-mix(in srgb, var(--theme-primary) 38%, transparent);
    background: var(--glass-selected);
    color: var(--primary-dark);
}

html[data-theme] .card,
html[data-theme] .stat-card,
html[data-theme] .friend-card {
    border-color: var(--glass-border);
    background: var(--surface);
}

html[data-theme] .card-heading-icon.is-coral,
html[data-theme] .streak-active .stat-icon,
html[data-theme] .library-source-icon.is-liked {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

html[data-theme] .card-heading-icon.is-teal,
html[data-theme] .empty-icon,
html[data-theme] .library-source-icon.is-collected {
    background: var(--secondary-soft);
    color: var(--secondary-dark);
}

html[data-theme] .card-heading-icon.is-blue,
html[data-theme] .stat-icon {
    background: var(--blue-soft);
    color: var(--blue);
}

html[data-theme] .btn-primary {
    border-color: color-mix(in srgb, var(--action-primary) 52%, transparent);
    background: var(--action-primary);
    color: var(--on-primary);
    box-shadow: 4px 5px 12px color-mix(in srgb, var(--action-primary) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

html[data-theme] .btn-primary:hover {
    background: color-mix(in srgb, var(--action-primary) 88%, #000000);
    color: var(--on-primary);
}

html[data-theme] .btn-secondary {
    border-color: color-mix(in srgb, var(--action-secondary) 52%, transparent);
    background: var(--action-secondary);
    color: var(--on-secondary);
    box-shadow: 4px 5px 12px color-mix(in srgb, var(--action-secondary) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme] .btn-secondary:hover {
    background: color-mix(in srgb, var(--action-secondary) 88%, #000000);
    color: var(--on-secondary);
}

html[data-theme] .btn-accent {
    border-color: color-mix(in srgb, var(--action-accent) 52%, transparent);
    background: var(--action-accent);
    color: var(--on-accent);
    box-shadow: 4px 5px 12px color-mix(in srgb, var(--action-accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme] .btn-accent:hover {
    background: color-mix(in srgb, var(--action-accent) 88%, #000000);
    color: var(--on-accent);
}

html[data-theme] .btn-video {
    border-color: color-mix(in srgb, var(--action-video) 52%, transparent);
    background: var(--action-video);
    color: var(--on-video);
    box-shadow: 4px 5px 12px color-mix(in srgb, var(--action-video) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme] .btn-video:hover {
    background: color-mix(in srgb, var(--action-video) 88%, #000000);
    color: var(--on-video);
}

html[data-theme] .btn-outline,
html[data-theme] .notification-switch {
    border-color: var(--glass-border-strong);
    background: var(--glass-raised);
    color: var(--text-soft);
    box-shadow: 4px 4px 11px var(--shadow-color), -4px -4px 11px var(--shadow-highlight);
}

html[data-theme] .btn-outline:hover {
    border-color: color-mix(in srgb, var(--theme-secondary) 42%, transparent);
    background: var(--glass-hover);
    color: var(--secondary-dark);
}

html[data-theme] .number-input,
html[data-theme] .time-input,
html[data-theme] .mode-select,
html[data-theme] .text-input,
html[data-theme] .cookie-input,
html[data-theme] .verify-tools input {
    border-color: var(--border);
    background: var(--field-bg);
}

html[data-theme] .number-input:focus,
html[data-theme] .time-input:focus,
html[data-theme] .mode-select:focus,
html[data-theme] .text-input:focus,
html[data-theme] .cookie-input:focus,
html[data-theme] .verify-tools input:focus {
    border-color: color-mix(in srgb, var(--theme-secondary) 64%, transparent);
    background: var(--glass-raised-strong);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--focus-ring);
}

html[data-theme] .toggle-label input,
html[data-theme] .notification-switch input {
    border-color: var(--border-strong);
    background: var(--control-off);
    box-shadow: var(--shadow-inset);
}

html[data-theme] .toggle-label input:checked,
html[data-theme] .notification-switch input:checked {
    border-color: color-mix(in srgb, var(--theme-secondary) 64%, transparent);
    background: var(--theme-secondary);
}

html[data-theme] .flash-msg {
    box-shadow: 4px 4px 12px var(--shadow-color), -4px -4px 12px var(--shadow-highlight);
}

html[data-theme] .schedule-item,
html[data-theme] .account-count,
html[data-theme] .refresh-pill,
html[data-theme] .count-badge {
    border-color: var(--border);
    background: var(--glass-inset);
}

html[data-theme] .account-switch-item,
html[data-theme] .favorite-item,
html[data-theme] .renewal-group,
html[data-theme] .table-scroll {
    border-color: var(--border);
    background: var(--glass-raised);
}

html[data-theme] .account-switch-item:hover:not(:disabled),
html[data-theme] .favorite-item:hover {
    border-color: color-mix(in srgb, var(--theme-secondary) 44%, transparent);
    background: var(--glass-hover);
    box-shadow: 4px 5px 12px var(--shadow-color);
}

html[data-theme] .account-switch-item.is-active {
    border-color: color-mix(in srgb, var(--theme-primary) 44%, transparent);
    background: var(--glass-selected);
}

html[data-theme] .account-avatar,
html[data-theme] .friend-avatar {
    border-color: var(--glass-border-strong);
    background: var(--avatar-bg);
    box-shadow: 2px 3px 7px var(--shadow-color);
}

html[data-theme] .table-scroll,
html[data-theme] .empty-state {
    background: color-mix(in srgb, var(--glass-raised) 82%, transparent);
}

html[data-theme] .log-table th {
    background: var(--table-head-bg);
}

html[data-theme] .log-table th,
html[data-theme] .log-table td,
html[data-theme] .schedule-row,
html[data-theme] .template-row,
html[data-theme] .add-schedule,
html[data-theme] .add-template {
    border-color: var(--border);
}

html[data-theme] .log-table tbody tr:hover {
    background: var(--glass-hover);
}

html[data-theme] .friend-card.has-streak {
    border-color: color-mix(in srgb, var(--warning) 36%, transparent);
    background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface));
}

html[data-theme] .badge-muted {
    border-color: var(--border);
    background: var(--glass-inset);
}

html[data-theme] .empty-state {
    border-color: var(--border-strong);
}

html[data-theme] .favorite-thumb {
    border-color: var(--glass-border);
    background: var(--avatar-bg);
}

html[data-theme] .renewal-group,
html[data-theme] .library-section-header,
html[data-theme] .group-title,
html[data-theme] .renewal-friend-row {
    border-color: var(--border);
}

html[data-theme] .group-title,
html[data-theme] .library-section-header {
    background: var(--glass-inset);
}

html[data-theme] .group-title:hover,
html[data-theme] .library-section-header:hover,
html[data-theme] .renewal-friend-row:hover {
    background: var(--glass-hover);
}

html[data-theme] .group-chevron {
    background: var(--glass-raised);
    box-shadow: 2px 2px 6px var(--shadow-color), -2px -2px 6px var(--shadow-highlight);
}

html[data-theme] .renewal-friend-row {
    background: color-mix(in srgb, var(--glass-raised) 86%, transparent);
}

html[data-theme] .viewer-audio {
    border-color: var(--glass-border);
    background: color-mix(in srgb, var(--canvas) 80%, transparent);
}

html[data-theme] .viewer-image-frame,
html[data-theme] .viewer-image-frame img,
html[data-theme] .verify-stage,
html[data-theme] .verify-dialog img {
    background: var(--media-bg);
}

html[data-theme] .login-tabs {
    border-color: var(--glass-border);
    background: var(--glass-inset);
    box-shadow: 6px 6px 16px var(--shadow-color), -6px -6px 16px var(--shadow-highlight);
}

html[data-theme] .tab-btn.active {
    border-color: var(--glass-border-strong);
    background: var(--glass-selected);
    color: var(--primary-dark);
    box-shadow: 3px 3px 9px var(--shadow-color), -3px -3px 9px var(--shadow-highlight);
}

html[data-theme] .qr-section {
    border-color: var(--glass-border);
    border-top-color: var(--border);
    background: var(--surface);
}

html[data-theme] .qr-image {
    border-color: var(--border-strong);
    background: color-mix(in srgb, #ffffff 94%, var(--theme-secondary));
    box-shadow: var(--shadow-inset), 0 0 0 8px color-mix(in srgb, var(--theme-primary) 13%, transparent);
}

html[data-theme="7"] .qr-image {
    background: #ffffff;
}

html[data-theme] .cookie-status:not(:empty) {
    background: var(--glass-raised);
}

html[data-theme] .verify-modal {
    background: var(--scrim);
}

html[data-theme] .verify-dialog {
    border-color: var(--glass-border-strong);
    background: var(--modal-surface);
    box-shadow: 18px 22px 54px rgba(10, 10, 10, 0.34), inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

html[data-theme="7"] .flash-info {
    border-color: color-mix(in srgb, var(--blue) 34%, transparent);
    background: var(--blue-soft);
    color: color-mix(in srgb, var(--blue) 72%, #ffffff);
}

html[data-theme="7"] .flash-success,
html[data-theme="7"] .status-msg.status-success {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

html[data-theme="7"] .flash-error,
html[data-theme="7"] .status-msg.status-error {
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

html[data-theme="7"] .flash-warning {
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

/* === Theme picker === */
.nav-links {
    margin-left: auto;
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.theme-picker {
    position: relative;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border-strong);
    border-radius: 7px;
    background: var(--glass-raised);
    color: var(--text-soft);
    box-shadow: 4px 4px 10px var(--shadow-color), -4px -4px 10px var(--shadow-highlight);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.theme-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border: 1px solid color-mix(in srgb, #ffffff 74%, transparent);
    border-radius: 50%;
    background: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--glass-raised-strong);
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
}

.theme-toggle:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 42%, transparent);
    background: var(--glass-hover);
    color: var(--primary-dark);
}

.theme-toggle.is-open {
    border-color: color-mix(in srgb, var(--theme-primary) 48%, transparent);
    background: var(--glass-selected);
    color: var(--primary-dark);
    box-shadow: var(--shadow-inset);
}

.theme-menu {
    width: 334px;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 130;
    padding: 12px;
    border: 1px solid var(--glass-border-strong);
    border-radius: 8px;
    background: var(--modal-surface);
    box-shadow: 12px 16px 34px var(--shadow-color), -5px -5px 18px var(--shadow-highlight), inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent);
    backdrop-filter: blur(26px) saturate(138%);
    -webkit-backdrop-filter: blur(26px) saturate(138%);
}

.theme-menu-heading {
    min-height: 30px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 2px 9px;
    color: var(--text);
    font-size: 12px;
    font-weight: 760;
}

.theme-menu-heading small {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.theme-option {
    min-width: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--glass-soft);
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.theme-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary) 44%, transparent);
    background: var(--glass-hover);
    box-shadow: 3px 4px 9px var(--shadow-color);
}

.theme-option.is-selected {
    border-color: color-mix(in srgb, var(--theme-primary) 58%, transparent);
    background: var(--glass-selected);
    color: var(--text);
    box-shadow: var(--shadow-inset);
}

.theme-swatch {
    width: 39px;
    height: 38px;
    display: flex;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, #ffffff 72%, transparent);
    border-radius: 6px;
    background: var(--canvas);
    box-shadow: 1px 2px 5px rgba(20, 28, 30, 0.16);
}

.theme-swatch i {
    min-width: 0;
    flex: 1;
    background: var(--swatch-color);
}

.theme-option-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.theme-option-check {
    width: 15px;
    height: 15px;
    color: var(--primary-dark);
    opacity: 0;
}

.theme-option.is-selected .theme-option-check {
    opacity: 1;
}

html[data-theme="7"] .nav-links a.is-active,
html[data-theme="7"] .brand-mark,
html[data-theme="7"] .login-emblem,
html[data-theme="7"] .theme-toggle:hover,
html[data-theme="7"] .theme-toggle.is-open,
html[data-theme="7"] .theme-option-check {
    color: var(--primary-dark);
}

@media (max-width: 760px) {
    .nav-container {
        gap: 8px;
    }

    .nav-links {
        margin-left: 0;
        border-color: var(--glass-border-strong);
        background: var(--modal-surface);
        box-shadow: 10px 14px 30px var(--shadow-color), inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
    }

    .nav-tools {
        margin-left: auto;
    }

    .theme-menu {
        width: min(334px, calc(100vw - 28px));
        position: fixed;
        top: calc(var(--nav-height) + 8px);
        right: 14px;
    }
}

@media (max-width: 360px) {
    .theme-menu {
        padding: 10px;
    }

    .theme-options {
        gap: 6px;
    }

    .theme-option {
        grid-template-columns: 34px minmax(0, 1fr) 13px;
        gap: 5px;
        padding: 6px;
    }

    .theme-swatch {
        width: 34px;
        height: 36px;
    }
}