:root {
    --font-main: 'Plus Jakarta Sans', sans-serif;
    color-scheme: light;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 20px;
    --r-pill: 999px;

    --shadow-card: 0 4px 20px -5px rgba(0, 0, 0, 0.06);


    --hl-qris-bg: #fef3c7;
    --hl-qris-txt: #b45309;
    --hl-edc-bg: #dcfce7;
    --hl-edc-txt: #15803d;
    --hl-ops-bg: #e0f2fe;
    --hl-ops-txt: #0369a1;
    --hl-setoran-bg: #fce7f3;
    --hl-setoran-txt: #be185d;


    --bg-main: #fafafa;
    --surface: #ffffff;
    --surface-hover: #f4f4f5;
    --text-main: #18181b;
    --text-muted: #57575f;
    --border-color: #e4e4e7;
    --border-hover: #d4d4d8;
    --summary-bg: #f4f4f5;
    --summary-text: #27272a;
    --input-bg: #ffffff;

    --accent-color: #8b5cf6;
    --accent-end: #6d28d9;
    --accent-shadow: rgba(139, 92, 246, 0.25);
    --title-accent-color: var(--accent-color);
    --decorative-outline: color-mix(in srgb, var(--accent-color) 32%, transparent);
    --copy-success-bg: #7c3aed;
    --copy-success-icon: #ffffff;

    --text-danger: #dc2626;
    --text-success: #059669;
}

.site-magnetic-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0.48;
}

html[data-grid-enabled="false"] .site-magnetic-grid,
html[data-grid-enabled="false"] .page-grid {
    display: none !important;
}

body > main {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .site-magnetic-grid {
        display: none;
    }

    .theme-picker-panel .theme-effects {
        display: none;
    }
}


[data-theme="dark"],
[data-theme="midnight"],
[data-theme="dracula"],
[data-theme="nord"],
[data-theme="solarized-dark"],
[data-theme="forest"],
[data-theme="crimson"],
[data-theme="coffee"],
[data-theme="cyberpunk"],
[data-theme="monokai"],
[data-theme="obsidian"],
[data-theme="ocean"],
[data-theme="ember"],
[data-theme="plum"],
[data-theme="matrix"],
[data-theme="slate"] {
    color-scheme: dark;
    --shadow-card: 0 6px 24px -6px rgba(0, 0, 0, 0.55);

    --text-danger: #f87171;
    --text-success: #34d399;
    --decorative-outline: color-mix(in srgb, var(--accent-color) 18%, transparent);

    --hl-qris-bg: rgba(234, 179, 8, 0.15);
    --hl-qris-txt: #fcd34d;
    --hl-edc-bg: rgba(34, 197, 94, 0.15);
    --hl-edc-txt: #86efac;
    --hl-ops-bg: rgba(56, 189, 248, 0.15);
    --hl-ops-txt: #7dd3fc;
    --hl-setoran-bg: rgba(236, 72, 153, 0.15);
    --hl-setoran-txt: #f9a8d4;
}


[data-theme="dark"] {
    --bg-main: #18181b;
    --surface: #27272a;
    --surface-hover: #3f3f46;
    --text-main: #fafafa;
    --text-muted: #a1a1aa;
    --border-color: #3f3f46;
    --border-hover: #52525b;
    --summary-bg: #1c1c1f;
    --summary-text: #fafafa;
    --input-bg: #1c1c1f;
    --accent-color: #a78bfa;
    --accent-end: #4c1d95;
    --accent-shadow: rgba(167, 139, 250, 0.25);
    --copy-success-bg: #7c3aed;
}


[data-theme="midnight"] {
    --bg-main: #0f172a;
    --surface: #1e293b;
    --surface-hover: #334155;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --border-hover: #475569;
    --summary-bg: #16213a;
    --summary-text: #f1f5f9;
    --input-bg: #16213a;
    --accent-color: #38bdf8;
    --accent-end: #0284c7;
    --accent-shadow: rgba(56, 189, 248, 0.25);
    --copy-success-bg: #0ea5e9;
}


[data-theme="dracula"] {
    --bg-main: #15172b;
    --surface: #222640;
    --surface-hover: #303655;
    --text-main: #eef2ff;
    --text-muted: #a8b0d0;
    --border-color: #303655;
    --border-hover: #424a70;
    --summary-bg: #101121;
    --summary-text: #eef2ff;
    --input-bg: #101121;
    --accent-color: #a5b4fc;
    --accent-end: #6366f1;
    --accent-shadow: rgba(165, 180, 252, 0.25);
    --copy-success-bg: #6366f1;
}


[data-theme="nord"] {
    --bg-main: #062029;
    --surface: #0d3440;
    --surface-hover: #164957;
    --text-main: #e6fbff;
    --text-muted: #91bdc7;
    --border-color: #164957;
    --border-hover: #216270;
    --summary-bg: #04171d;
    --summary-text: #e6fbff;
    --input-bg: #04171d;
    --accent-color: #22d3ee;
    --accent-end: #0891b2;
    --accent-shadow: rgba(34, 211, 238, 0.25);
    --copy-success-bg: #0891b2;
}


[data-theme="solarized-dark"] {
    --bg-main: #002b36;
    --surface: #073642;
    --surface-hover: #0a4754;
    --text-main: #eee8d5;
    --text-muted: #93a1a1;
    --border-color: #0a4754;
    --border-hover: #14606f;
    --summary-bg: #00212b;
    --summary-text: #eee8d5;
    --input-bg: #00212b;
    --accent-color: #268bd2;
    --accent-end: #2075c7;
    --accent-shadow: rgba(38, 139, 210, 0.25);
    --copy-success-bg: #268bd2;
    --text-danger: #dc322f;
    --text-success: #859900;
}


[data-theme="forest"] {
    --bg-main: #0e1f16;
    --surface: #173024;
    --surface-hover: #1f4231;
    --text-main: #e6f4ea;
    --text-muted: #8fb3a0;
    --border-color: #1f4231;
    --border-hover: #2c5a44;
    --summary-bg: #0a180f;
    --summary-text: #e6f4ea;
    --input-bg: #0a180f;
    --accent-color: #34d399;
    --accent-end: #059669;
    --accent-shadow: rgba(52, 211, 153, 0.25);
    --copy-success-bg: #059669;
}


[data-theme="crimson"] {
    --bg-main: #1c1512;
    --surface: #2d211c;
    --surface-hover: #423129;
    --text-main: #f6ece5;
    --text-muted: #bca496;
    --border-color: #423129;
    --border-hover: #594237;
    --summary-bg: #15100d;
    --summary-text: #f6ece5;
    --input-bg: #15100d;
    --accent-color: #d08a68;
    --accent-end: #a95f43;
    --accent-shadow: rgba(208, 138, 104, 0.24);
    --copy-success-bg: #b86f50;
}


[data-theme="coffee"] {
    --bg-main: #1b1916;
    --surface: #2a2722;
    --surface-hover: #3a362f;
    --text-main: #f3eee7;
    --text-muted: #b7aea2;
    --border-color: #3d3831;
    --border-hover: #514a40;
    --summary-bg: #151310;
    --summary-text: #f3eee7;
    --input-bg: #151310;
    --accent-color: #c2a276;
    --accent-end: #92754f;
    --accent-shadow: rgba(194, 162, 118, 0.22);
    --copy-success-bg: #9f8058;
}


[data-theme="cyberpunk"] {
    --bg-main: #1c0d18;
    --surface: #301426;
    --surface-hover: #47203a;
    --text-main: #fdebf7;
    --text-muted: #c79ab9;
    --border-color: #48213b;
    --border-hover: #633052;
    --summary-bg: #150912;
    --summary-text: #fdebf7;
    --input-bg: #150912;
    --accent-color: #f472b6;
    --accent-end: #db2777;
    --accent-shadow: rgba(244, 114, 182, 0.26);
    --copy-success-bg: #db2777;
}


[data-theme="monokai"] {
    --bg-main: #1b1015;
    --surface: #2c1821;
    --surface-hover: #412331;
    --text-main: #fcebf1;
    --text-muted: #c59aa8;
    --border-color: #422432;
    --border-hover: #5b3246;
    --summary-bg: #140b10;
    --summary-text: #fcebf1;
    --input-bg: #140b10;
    --accent-color: #fb7185;
    --accent-end: #e11d48;
    --accent-shadow: rgba(251, 113, 133, 0.25);
    --copy-success-bg: #e11d48;
}


[data-theme="obsidian"] {
    --bg-main: #0b0b0d;
    --surface: #18181b;
    --surface-hover: #26262b;
    --text-main: #f4f4f5;
    --text-muted: #9b9ba3;
    --border-color: #26262b;
    --border-hover: #3a3a42;
    --summary-bg: #060607;
    --summary-text: #f4f4f5;
    --input-bg: #060607;
    --accent-color: #fbbf24;
    --accent-end: #d97706;
    --accent-shadow: rgba(251, 191, 36, 0.25);
    --copy-success-bg: #d97706;
}


[data-theme="ocean"] {
    --bg-main: #08201c;
    --surface: #10332d;
    --surface-hover: #174940;
    --text-main: #e4fbf5;
    --text-muted: #8ebdb2;
    --border-color: #174940;
    --border-hover: #226157;
    --summary-bg: #061713;
    --summary-text: #e4fbf5;
    --input-bg: #061713;
    --accent-color: #2dd4bf;
    --accent-end: #0f766e;
    --accent-shadow: rgba(45, 212, 191, 0.25);
    --copy-success-bg: #0f766e;
}


[data-theme="ember"] {
    --bg-main: #1a120b;
    --surface: #2a1d12;
    --surface-hover: #3d2a1a;
    --text-main: #fcefe2;
    --text-muted: #c2a589;
    --border-color: #3d2a1a;
    --border-hover: #553a24;
    --summary-bg: #130c07;
    --summary-text: #fcefe2;
    --input-bg: #130c07;
    --accent-color: #fb923c;
    --accent-end: #ea580c;
    --accent-shadow: rgba(251, 146, 60, 0.25);
    --copy-success-bg: #ea580c;
}


[data-theme="plum"] {
    --bg-main: #1a1023;
    --surface: #281836;
    --surface-hover: #38244b;
    --text-main: #f3e8ff;
    --text-muted: #b29ac6;
    --border-color: #38244b;
    --border-hover: #4d3367;
    --summary-bg: #120a18;
    --summary-text: #f3e8ff;
    --input-bg: #120a18;
    --accent-color: #c084fc;
    --accent-end: #9333ea;
    --accent-shadow: rgba(192, 132, 252, 0.25);
    --copy-success-bg: #9333ea;
}


[data-theme="matrix"] {
    --bg-main: #111a09;
    --surface: #1d2b11;
    --surface-hover: #2a3d19;
    --text-main: #f0fbe6;
    --text-muted: #a6bd91;
    --border-color: #2a3d19;
    --border-hover: #3a5423;
    --summary-bg: #0c1206;
    --summary-text: #f0fbe6;
    --input-bg: #0c1206;
    --accent-color: #a3e635;
    --accent-end: #65a30d;
    --accent-shadow: rgba(163, 230, 53, 0.24);
    --copy-success-bg: #65a30d;
}


[data-theme="slate"] {
    --bg-main: #17191d;
    --surface: #24272d;
    --surface-hover: #333740;
    --text-main: #eef1f4;
    --text-muted: #a2aab4;
    --border-color: #343942;
    --border-hover: #49505c;
    --summary-bg: #111317;
    --summary-text: #eef1f4;
    --input-bg: #111317;
    --accent-color: #94a3b8;
    --accent-end: #64748b;
    --accent-shadow: rgba(148, 163, 184, 0.22);
    --copy-success-bg: #64748b;
}




[data-theme="solarized-light"] {
    --bg-main: #fdf6e3;
    --surface: #fffbf0;
    --surface-hover: #eee8d5;
    --text-main: #586e75;
    --text-muted: #839496;
    --border-color: #e6dfc8;
    --border-hover: #d9d0b4;
    --summary-bg: #eee8d5;
    --summary-text: #586e75;
    --input-bg: #fffbf0;
    --accent-color: #268bd2;
    --accent-end: #2075c7;
    --accent-shadow: rgba(38, 139, 210, 0.25);
    --copy-success-bg: #268bd2;
    --text-danger: #dc322f;
    --text-success: #859900;
}


[data-theme="sandstone"] {
    --bg-main: #f5f0e8;
    --surface: #fffdf9;
    --surface-hover: #ece4d6;
    --text-main: #44403c;
    --text-muted: #78716c;
    --border-color: #e7ddcc;
    --border-hover: #d6c9b2;
    --summary-bg: #ece4d6;
    --summary-text: #44403c;
    --input-bg: #fffdf9;
    --accent-color: #c2724f;
    --accent-end: #a85a3a;
    --accent-shadow: rgba(194, 114, 79, 0.25);
    --copy-success-bg: #b25e3c;
    --text-danger: #b91c1c;
    --text-success: #4d7c0f;
}


[data-theme="rose"] {
    --bg-main: #fff1f3;
    --surface: #fffafb;
    --surface-hover: #ffe4e8;
    --text-main: #4c1130;
    --text-muted: #9d6b7b;
    --border-color: #fbd5dc;
    --border-hover: #f5b9c4;
    --summary-bg: #ffe4e8;
    --summary-text: #4c1130;
    --input-bg: #fffafb;
    --accent-color: #e11d6b;
    --accent-end: #be145a;
    --accent-shadow: rgba(225, 29, 107, 0.22);
    --copy-success-bg: #db2777;
    --text-danger: #e11d48;
    --text-success: #0d9488;
}


[data-theme="mint"] {
    --bg-main: #f0faf4;
    --surface: #f9fffb;
    --surface-hover: #dcf3e4;
    --text-main: #14342b;
    --text-muted: #5b7d6f;
    --border-color: #cdecd7;
    --border-hover: #b3e0c3;
    --summary-bg: #dcf3e4;
    --summary-text: #14342b;
    --input-bg: #f9fffb;
    --accent-color: #10b981;
    --accent-end: #059669;
    --accent-shadow: rgba(16, 185, 129, 0.22);
    --copy-success-bg: #059669;
    --text-success: #047857;
}


[data-theme="sky"] {
    --bg-main: #f0f7ff;
    --surface: #f9fcff;
    --surface-hover: #ddebfb;
    --text-main: #102a43;
    --text-muted: #5c7794;
    --border-color: #cfe2f7;
    --border-hover: #b3d2f2;
    --summary-bg: #ddebfb;
    --summary-text: #102a43;
    --input-bg: #f9fcff;
    --accent-color: #0ea5e9;
    --accent-end: #0284c7;
    --accent-shadow: rgba(14, 165, 233, 0.22);
    --copy-success-bg: #0284c7;
}


[data-theme="lavender"] {
    --bg-main: #f6f3ff;
    --surface: #fcfaff;
    --surface-hover: #eae6fc;
    --text-main: #2e1065;
    --text-muted: #6d6391;
    --border-color: #e2dafa;
    --border-hover: #cdbef5;
    --summary-bg: #eae6fc;
    --summary-text: #2e1065;
    --input-bg: #fcfaff;
    --accent-color: #7c3aed;
    --accent-end: #6d28d9;
    --accent-shadow: rgba(124, 58, 237, 0.22);
    --copy-success-bg: #7c3aed;
}


[data-theme="peach"] {
    --bg-main: #fff5ed;
    --surface: #fffbf7;
    --surface-hover: #ffe6d3;
    --text-main: #43271a;
    --text-muted: #8a6a57;
    --border-color: #ffdcc0;
    --border-hover: #ffc59c;
    --summary-bg: #ffe6d3;
    --summary-text: #43271a;
    --input-bg: #fffbf7;
    --accent-color: #f97316;
    --accent-end: #ea580c;
    --accent-shadow: rgba(249, 115, 22, 0.22);
    --copy-success-bg: #ea580c;
    --text-success: #15803d;
}


[data-theme="seafoam"] {
    --bg-main: #ecfbf7;
    --surface: #f6fffd;
    --surface-hover: #d6f5ee;
    --text-main: #0f3b35;
    --text-muted: #5b8a82;
    --border-color: #c4ece4;
    --border-hover: #a7e0d5;
    --summary-bg: #d6f5ee;
    --summary-text: #0f3b35;
    --input-bg: #f6fffd;
    --accent-color: #0d9488;
    --accent-end: #0f766e;
    --accent-shadow: rgba(13, 148, 136, 0.22);
    --copy-success-bg: #0d9488;
    --text-success: #047857;
}


[data-theme="graphite"] {
    --bg-main: #eef1f4;
    --surface: #ffffff;
    --surface-hover: #e2e6eb;
    --text-main: #1f2933;
    --text-muted: #66727f;
    --border-color: #d4dae1;
    --border-hover: #bcc5cf;
    --summary-bg: #e2e6eb;
    --summary-text: #1f2933;
    --input-bg: #ffffff;
    --accent-color: #475569;
    --accent-end: #334155;
    --accent-shadow: rgba(71, 85, 105, 0.20);
    --copy-success-bg: #475569;
}


[data-theme="lemon"] {
    --bg-main: #fefce8;
    --surface: #fffef5;
    --surface-hover: #fdf6c8;
    --text-main: #422006;
    --text-muted: #897a4a;
    --border-color: #f7eaa3;
    --border-hover: #f0dd7a;
    --summary-bg: #fdf6c8;
    --summary-text: #422006;
    --input-bg: #fffef5;
    --accent-color: #ca8a04;
    --accent-end: #a16207;
    --accent-shadow: rgba(202, 138, 4, 0.22);
    --copy-success-bg: #a16207;
    --text-success: #4d7c0f;
}


[data-theme="bubblegum"] {
    --bg-main: #fdf2fb;
    --surface: #fffafe;
    --surface-hover: #fbe2f6;
    --text-main: #500724;
    --text-muted: #a16d8d;
    --border-color: #f8d3ec;
    --border-hover: #f3b6df;
    --summary-bg: #fbe2f6;
    --summary-text: #500724;
    --input-bg: #fffafe;
    --accent-color: #ec4899;
    --accent-end: #c026d3;
    --accent-shadow: rgba(236, 72, 153, 0.22);
    --copy-success-bg: #db2777;
}


[data-theme="aqua"] {
    --bg-main: #ecfeff;
    --surface: #f5ffff;
    --surface-hover: #d4f7fb;
    --text-main: #083344;
    --text-muted: #5b8a96;
    --border-color: #bdeef4;
    --border-hover: #9ce2ec;
    --summary-bg: #d4f7fb;
    --summary-text: #083344;
    --input-bg: #f5ffff;
    --accent-color: #0891b2;
    --accent-end: #0e7490;
    --accent-shadow: rgba(8, 145, 178, 0.22);
    --copy-success-bg: #0e7490;
}


[data-theme="linen"] {
    --bg-main: #faf6f0;
    --surface: #fffdfa;
    --surface-hover: #f0e9df;
    --text-main: #3a352e;
    --text-muted: #8a8073;
    --border-color: #e8ddcd;
    --border-hover: #d9cab2;
    --summary-bg: #f0e9df;
    --summary-text: #3a352e;
    --input-bg: #fffdfa;
    --accent-color: #9a7b4f;
    --accent-end: #7c5e37;
    --accent-shadow: rgba(154, 123, 79, 0.22);
    --copy-success-bg: #7c5e37;
}


[data-theme="periwinkle"] {
    --bg-main: #eef2ff;
    --surface: #f7f9ff;
    --surface-hover: #dfe5fc;
    --text-main: #1e1b4b;
    --text-muted: #6b6e96;
    --border-color: #d2daf9;
    --border-hover: #b6c2f4;
    --summary-bg: #dfe5fc;
    --summary-text: #1e1b4b;
    --input-bg: #f7f9ff;
    --accent-color: #6366f1;
    --accent-end: #4f46e5;
    --accent-shadow: rgba(99, 102, 241, 0.22);
    --copy-success-bg: #4f46e5;
}


[data-theme="meadow"] {
    --bg-main: #f3fbe9;
    --surface: #fafff2;
    --surface-hover: #e4f3cd;
    --text-main: #1a2e05;
    --text-muted: #647552;
    --border-color: #d4ecb5;
    --border-hover: #bfe096;
    --summary-bg: #e4f3cd;
    --summary-text: #1a2e05;
    --input-bg: #fafff2;
    --accent-color: #65a30d;
    --accent-end: #4d7c0f;
    --accent-shadow: rgba(101, 163, 13, 0.22);
    --copy-success-bg: #4d7c0f;
    --text-success: #3f6212;
}

html {
    background-color: var(--bg-main);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eye-catching-card {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-end)) !important;
    border: none !important;
    border-radius: var(--r-lg) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px -8px var(--accent-shadow) !important;
    position: relative;
    overflow: hidden;
}

.eye-catching-card * {
    color: #fff !important;
    position: relative;
    z-index: 2;
}

.eye-catching-card .summary-title {
    opacity: 0.85;
}

.eye-catching-card .summary-amount span {
    font-weight: 900 !important;
    letter-spacing: -1px;
    font-size: 1.1em;
}

.eye-catching-card svg {
    stroke: #fff !important;
    stroke-width: 2.5px;
}

.eye-catching-card .btn-copy {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
}

.eye-catching-card .btn-copy:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}

.eye-catching-card .btn-copy.copied {
    background: #fff !important;
    border-color: #fff !important;
}

.eye-catching-card .btn-copy.copied svg {
    stroke: var(--accent-end) !important;
}


.theme-picker-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border-hover);
    border-radius: var(--r-pill);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    box-shadow: var(--shadow-card);
    z-index: 100;
    transition: background-color 0.3s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.theme-picker-btn:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 14px var(--accent-shadow);
}

.theme-picker-btn:active {
    transform: scale(0.94);
}

.theme-picker-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.theme-picker-panel {
    position: fixed;
    top: 60px;
    right: 16px;
    width: min(300px, calc(100vw - 32px));
    max-height: min(72vh, 500px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 48px -10px rgba(0, 0, 0, 0.35);
    z-index: 101;
    padding: 8px;
    display: none;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}

.theme-picker-panel.open {
    display: grid;
    grid-template-columns: auto minmax(92px, 1fr) auto;
    column-gap: 6px;
    align-items: center;
    animation: fadeIn 0.18s ease;
}

.theme-picker-panel::-webkit-scrollbar {
    width: 6px;
}

.theme-picker-panel::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 999px;
}

.theme-picker-title {
    grid-column: 1;
    margin: 0;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    font-weight: 700;
}

.theme-picker-tabs {
    grid-column: 2;
    display: flex;
    gap: 4px;
    background: var(--summary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 2px;
    margin: 0;
}

.theme-tab {
    flex: 1;
    padding: 4px 6px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.theme-tab:hover {
    color: var(--text-main);
}

.theme-tab.active {
    background: var(--surface);
    color: var(--accent-color);
    box-shadow: var(--shadow-card);
}

.theme-picker-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 7px;
}

.theme-effects {
    grid-column: 3;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.theme-effects-title {
    display: none;
}

.theme-effect-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    min-height: 21px;
}

.theme-effect-row + .theme-effect-row {
    border-top: 0;
}

.theme-effect-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.theme-effect-copy strong {
    color: var(--text-main);
    font-size: 0.61rem;
}

.theme-effect-copy small {
    display: none;
}

.theme-effect-switch {
    position: relative;
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--border-hover);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, opacity 0.18s;
}

.theme-effect-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.18s, background-color 0.18s;
}

.theme-effect-switch.active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 24%, var(--surface));
}

.theme-effect-switch.active::after {
    background: var(--accent-color);
    transform: translateX(12px);
}

.theme-effect-switch:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}


.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.theme-swatch[data-mode="light"] {
    background: #f4f4f5 !important;
    color: #27272a;
}

.theme-swatch[data-mode="dark"] {
    background: #27272a !important;
    color: #f4f4f5;
}

.theme-swatch[data-mode="light"]:hover {
    background: #e4e4e7 !important;
    transform: translateY(-1px);
}

.theme-swatch[data-mode="dark"]:hover {
    background: #3f3f46 !important;
    transform: translateY(-1px);
}

.theme-swatch .sw-palette {
    position: relative;
    width: 20px;
    height: 9px;
    flex: 0 0 9px;
}

.theme-swatch .sw-color {
    position: absolute;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.38);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.theme-swatch .sw-color-bg {
    left: 0;
    z-index: 1;
    background: var(--swatch-bg);
}

.theme-swatch .sw-color-surface {
    left: 6px;
    z-index: 2;
    background: var(--swatch-surface);
}

.theme-swatch .sw-color-accent {
    left: 12px;
    z-index: 3;
    background: var(--swatch-accent);
}

.theme-swatch .sw-label {
    width: 100%;
    min-width: 0;
    color: inherit;
    font-size: 0.54rem;
    font-weight: 600;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}

:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}