* { box-sizing: border-box; }

html,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--waybar-accent) transparent;
}

html::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background: transparent;
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 4px solid transparent;
    border-radius: 999px;
    background: var(--waybar-accent);
    background-clip: padding-box;
}

html::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

:root {
    color-scheme: light;
    --page-bg: #e5e9f0;
    --text: #2e3440;
    --card-bg: #eceff4;
    --card-border: #d8dee9;
    --divider: #d8dee9;
    --link: #5e81ac;
    --card-shadow: 0 5px 18px rgba(46,52,64,.10);
    --toggle-icon: #d08770;
    --toggle-ring: rgba(235,203,139,.34);
    --waybar-bg: rgba(236,239,244,.94);
    --waybar-border: rgba(94,129,172,.30);
    --waybar-text: #2e3440;
    --waybar-muted: #4c566a;
    --waybar-hover: rgba(136,192,208,.22);
    --waybar-active: rgba(129,161,193,.22);
    --waybar-accent: #5e81ac;
    --waybar-shadow: 0 12px 32px rgba(46,52,64,.12);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #2e3440;
    --text: #eceff4;
    --card-bg: #3b4252;
    --card-border: #4c566a;
    --divider: #434c5e;
    --link: #88c0d0;
    --card-shadow: 0 8px 24px rgba(0,0,0,.24);
    --toggle-icon: #88c0d0;
    --toggle-ring: rgba(136,192,208,.28);
    --waybar-bg: rgba(59,66,82,.94);
    --waybar-border: rgba(136,192,208,.34);
    --waybar-text: #eceff4;
    --waybar-muted: #d8dee9;
    --waybar-hover: rgba(136,192,208,.16);
    --waybar-active: rgba(129,161,193,.24);
    --waybar-accent: #88c0d0;
    --waybar-shadow: 0 14px 36px rgba(0,0,0,.28);
}

html[data-color-theme="rose-pine"] {
    color-scheme: light;
    --page-bg: #faf4ed;
    --text: #575279;
    --card-bg: #fffaf3;
    --card-border: #dfdad9;
    --divider: #f2e9e1;
    --link: #286983;
    --card-shadow: 0 5px 18px rgba(87, 82, 121, .10);
    --toggle-icon: #b4637a;
    --toggle-ring: rgba(180, 99, 122, .26);
    --waybar-bg: rgba(255, 250, 243, .94);
    --waybar-border: rgba(180, 99, 122, .28);
    --waybar-text: #575279;
    --waybar-muted: #797593;
    --waybar-hover: rgba(215, 130, 126, .15);
    --waybar-active: rgba(144, 122, 169, .16);
    --waybar-accent: #b4637a;
    --waybar-shadow: 0 12px 32px rgba(87, 82, 121, .13);
}

html[data-color-theme="rose-pine"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #232136;
    --text: #e0def4;
    --card-bg: #2a273f;
    --card-border: #44415a;
    --divider: #393552;
    --link: #9ccfd8;
    --card-shadow: 0 8px 24px rgba(12, 10, 20, .30);
    --toggle-icon: #f6c177;
    --toggle-ring: rgba(246, 193, 119, .25);
    --waybar-bg: rgba(42, 39, 63, .94);
    --waybar-border: rgba(196, 167, 231, .28);
    --waybar-text: #e0def4;
    --waybar-muted: #908caa;
    --waybar-hover: rgba(196, 167, 231, .14);
    --waybar-active: rgba(235, 111, 146, .18);
    --waybar-accent: #c4a7e7;
    --waybar-shadow: 0 14px 36px rgba(12, 10, 20, .34);
}

html[data-color-theme="tokyo-night"] {
    color-scheme: light;
    --page-bg: #e1e2e7;
    --text: #343b58;
    --card-bg: #e6e7ed;
    --card-border: #c4c8da;
    --divider: #d0d5e3;
    --link: #2959aa;
    --card-shadow: 0 5px 18px rgba(52, 59, 88, .11);
    --toggle-icon: #8f5e15;
    --toggle-ring: rgba(140, 108, 62, .25);
    --waybar-bg: rgba(230, 231, 237, .94);
    --waybar-border: rgba(41, 89, 170, .27);
    --waybar-text: #343b58;
    --waybar-muted: #6c6e75;
    --waybar-hover: rgba(46, 125, 233, .13);
    --waybar-active: rgba(120, 71, 189, .14);
    --waybar-accent: #2959aa;
    --waybar-shadow: 0 12px 32px rgba(52, 59, 88, .13);
}

html[data-color-theme="tokyo-night"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #1a1b26;
    --text: #c0caf5;
    --card-bg: #24283b;
    --card-border: #414868;
    --divider: #292e42;
    --link: #7dcfff;
    --card-shadow: 0 8px 24px rgba(12, 14, 20, .34);
    --toggle-icon: #e0af68;
    --toggle-ring: rgba(224, 175, 104, .25);
    --waybar-bg: rgba(36, 40, 59, .94);
    --waybar-border: rgba(122, 162, 247, .30);
    --waybar-text: #c0caf5;
    --waybar-muted: #a9b1d6;
    --waybar-hover: rgba(122, 162, 247, .14);
    --waybar-active: rgba(187, 154, 247, .17);
    --waybar-accent: #7aa2f7;
    --waybar-shadow: 0 14px 36px rgba(12, 14, 20, .38);
}

html[data-color-theme="catppuccin"] {
    color-scheme: light;
    --page-bg: #eff1f5;
    --text: #4c4f69;
    --card-bg: #e6e9ef;
    --card-border: #bcc0cc;
    --divider: #ccd0da;
    --link: #1e66f5;
    --card-shadow: 0 5px 18px rgba(76, 79, 105, .11);
    --toggle-icon: #df8e1d;
    --toggle-ring: rgba(223, 142, 29, .24);
    --waybar-bg: rgba(230, 233, 239, .94);
    --waybar-border: rgba(30, 102, 245, .25);
    --waybar-text: #4c4f69;
    --waybar-muted: #6c6f85;
    --waybar-hover: rgba(30, 102, 245, .12);
    --waybar-active: rgba(136, 57, 239, .13);
    --waybar-accent: #8839ef;
    --waybar-shadow: 0 12px 32px rgba(76, 79, 105, .13);
}

html[data-color-theme="catppuccin"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #1e1e2e;
    --text: #cdd6f4;
    --card-bg: #313244;
    --card-border: #45475a;
    --divider: #45475a;
    --link: #89dceb;
    --card-shadow: 0 8px 24px rgba(17, 17, 27, .34);
    --toggle-icon: #f9e2af;
    --toggle-ring: rgba(249, 226, 175, .23);
    --waybar-bg: rgba(49, 50, 68, .94);
    --waybar-border: rgba(203, 166, 247, .28);
    --waybar-text: #cdd6f4;
    --waybar-muted: #bac2de;
    --waybar-hover: rgba(137, 220, 235, .13);
    --waybar-active: rgba(203, 166, 247, .16);
    --waybar-accent: #cba6f7;
    --waybar-shadow: 0 14px 36px rgba(17, 17, 27, .38);
}

html[data-color-theme="northern-lights"] {
    color-scheme: light;
    --page-bg: #fff5fb;
    --text: #3c174e;
    --card-bg: #fffafd;
    --card-border: #e7c9f1;
    --divider: #f1dcee;
    --link: #62079b;
    --card-shadow: 0 5px 20px rgba(98, 7, 155, .11);
    --toggle-icon: #62079b;
    --toggle-ring: rgba(98, 7, 155, .22);
    --waybar-bg: rgba(255, 250, 253, .94);
    --waybar-border: rgba(98, 7, 155, .25);
    --waybar-text: #3c174e;
    --waybar-muted: #704e7b;
    --waybar-hover: rgba(250, 162, 213, .25);
    --waybar-active: rgba(217, 178, 255, .36);
    --waybar-accent: #62079b;
    --waybar-shadow: 0 12px 34px rgba(98, 7, 155, .15);
}

html[data-color-theme="northern-lights"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #170925;
    --text: #f8edff;
    --card-bg: #27103b;
    --card-border: #542270;
    --divider: #3b1754;
    --link: #67c3c8;
    --card-shadow: 0 8px 26px rgba(4, 2, 10, .40);
    --toggle-icon: #90e680;
    --toggle-ring: rgba(144, 230, 128, .25);
    --waybar-bg: rgba(39, 16, 59, .94);
    --waybar-border: rgba(217, 178, 255, .32);
    --waybar-text: #f8edff;
    --waybar-muted: #d9b2ff;
    --waybar-hover: rgba(103, 195, 200, .15);
    --waybar-active: rgba(255, 36, 207, .18);
    --waybar-accent: #ff24cf;
    --waybar-shadow: 0 14px 40px rgba(4, 2, 10, .44);
}

html[data-color-theme="gruvbox"] {
    color-scheme: light;
    --page-bg: #fbf1c7;
    --text: #3c3836;
    --card-bg: #ebdbb2;
    --card-border: #bdae93;
    --divider: #d5c4a1;
    --link: #076678;
    --card-shadow: 0 5px 18px rgba(60, 56, 54, .13);
    --toggle-icon: #d65d0e;
    --toggle-ring: rgba(214, 93, 14, .24);
    --waybar-bg: rgba(235, 219, 178, .94);
    --waybar-border: rgba(7, 102, 120, .28);
    --waybar-text: #3c3836;
    --waybar-muted: #665c54;
    --waybar-hover: rgba(66, 123, 88, .16);
    --waybar-active: rgba(214, 93, 14, .16);
    --waybar-accent: #d65d0e;
    --waybar-shadow: 0 12px 32px rgba(60, 56, 54, .15);
}

html[data-color-theme="gruvbox"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #282828;
    --text: #ebdbb2;
    --card-bg: #3c3836;
    --card-border: #665c54;
    --divider: #504945;
    --link: #83a598;
    --card-shadow: 0 8px 24px rgba(20, 18, 16, .38);
    --toggle-icon: #fabd2f;
    --toggle-ring: rgba(250, 189, 47, .24);
    --waybar-bg: rgba(60, 56, 54, .94);
    --waybar-border: rgba(254, 128, 25, .30);
    --waybar-text: #ebdbb2;
    --waybar-muted: #bdae93;
    --waybar-hover: rgba(142, 192, 124, .14);
    --waybar-active: rgba(254, 128, 25, .18);
    --waybar-accent: #fe8019;
    --waybar-shadow: 0 14px 36px rgba(20, 18, 16, .42);
}

html[data-color-theme="everforest"] {
    color-scheme: light;
    --page-bg: #fdf6e3;
    --text: #5c6a72;
    --card-bg: #f4f0d9;
    --card-border: #d3c6aa;
    --divider: #e6e2cc;
    --link: #3a94c5;
    --card-shadow: 0 5px 18px rgba(92, 106, 114, .11);
    --toggle-icon: #dfa000;
    --toggle-ring: rgba(223, 160, 0, .22);
    --waybar-bg: rgba(244, 240, 217, .94);
    --waybar-border: rgba(141, 161, 1, .28);
    --waybar-text: #5c6a72;
    --waybar-muted: #5c6a72;
    --waybar-hover: rgba(53, 167, 124, .14);
    --waybar-active: rgba(141, 161, 1, .16);
    --waybar-accent: #8da101;
    --waybar-shadow: 0 12px 32px rgba(92, 106, 114, .13);
}

html[data-color-theme="everforest"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #2d353b;
    --text: #d3c6aa;
    --card-bg: #343f44;
    --card-border: #4f585e;
    --divider: #3d484d;
    --link: #7fbbb3;
    --card-shadow: 0 8px 24px rgba(20, 24, 27, .36);
    --toggle-icon: #dbbc7f;
    --toggle-ring: rgba(219, 188, 127, .23);
    --waybar-bg: rgba(52, 63, 68, .94);
    --waybar-border: rgba(167, 192, 128, .28);
    --waybar-text: #d3c6aa;
    --waybar-muted: #a7b0a2;
    --waybar-hover: rgba(131, 192, 146, .14);
    --waybar-active: rgba(167, 192, 128, .17);
    --waybar-accent: #a7c080;
    --waybar-shadow: 0 14px 36px rgba(20, 24, 27, .40);
}

html[data-color-theme="ayu"] {
    color-scheme: light;
    --page-bg: #fafafa;
    --text: #5c6166;
    --card-bg: #f3f4f5;
    --card-border: #d9d9d9;
    --divider: #e7e8e9;
    --link: #399ee6;
    --card-shadow: 0 5px 18px rgba(92, 97, 102, .11);
    --toggle-icon: #fa8d3e;
    --toggle-ring: rgba(250, 141, 62, .23);
    --waybar-bg: rgba(243, 244, 245, .94);
    --waybar-border: rgba(250, 141, 62, .27);
    --waybar-text: #5c6166;
    --waybar-muted: #696f75;
    --waybar-hover: rgba(57, 158, 230, .13);
    --waybar-active: rgba(250, 141, 62, .15);
    --waybar-accent: #fa8d3e;
    --waybar-shadow: 0 12px 32px rgba(92, 97, 102, .13);
}

html[data-color-theme="ayu"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0b0e14;
    --text: #bfbdb6;
    --card-bg: #131721;
    --card-border: #2d3640;
    --divider: #202631;
    --link: #59c2ff;
    --card-shadow: 0 8px 24px rgba(0, 0, 0, .42);
    --toggle-icon: #e6b450;
    --toggle-ring: rgba(230, 180, 80, .23);
    --waybar-bg: rgba(19, 23, 33, .95);
    --waybar-border: rgba(255, 143, 64, .30);
    --waybar-text: #bfbdb6;
    --waybar-muted: #8a9199;
    --waybar-hover: rgba(89, 194, 255, .13);
    --waybar-active: rgba(255, 143, 64, .17);
    --waybar-accent: #ff8f40;
    --waybar-shadow: 0 14px 38px rgba(0, 0, 0, .48);
}

html[data-color-theme="dracula"] {
    color-scheme: light;
    --page-bg: #fffbeb;
    --text: #1f1f1f;
    --card-bg: #f3f0df;
    --card-border: #cfcfde;
    --divider: #dedccf;
    --link: #036a96;
    --card-shadow: 0 5px 18px rgba(31, 31, 31, .11);
    --toggle-icon: #846e15;
    --toggle-ring: rgba(132, 110, 21, .22);
    --waybar-bg: rgba(243, 240, 223, .94);
    --waybar-border: rgba(100, 74, 201, .27);
    --waybar-text: #1f1f1f;
    --waybar-muted: #6c664b;
    --waybar-hover: rgba(3, 106, 150, .13);
    --waybar-active: rgba(100, 74, 201, .15);
    --waybar-accent: #644ac9;
    --waybar-shadow: 0 12px 32px rgba(31, 31, 31, .13);
}

html[data-color-theme="dracula"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #282a36;
    --text: #f8f8f2;
    --card-bg: #343746;
    --card-border: #6272a4;
    --divider: #44475a;
    --link: #8be9fd;
    --card-shadow: 0 8px 24px rgba(16, 17, 22, .38);
    --toggle-icon: #f1fa8c;
    --toggle-ring: rgba(241, 250, 140, .22);
    --waybar-bg: rgba(52, 55, 70, .94);
    --waybar-border: rgba(189, 147, 249, .30);
    --waybar-text: #f8f8f2;
    --waybar-muted: #b7bad1;
    --waybar-hover: rgba(139, 233, 253, .13);
    --waybar-active: rgba(189, 147, 249, .17);
    --waybar-accent: #bd93f9;
    --waybar-shadow: 0 14px 36px rgba(16, 17, 22, .43);
}

html[data-color-theme="solarized"] {
    color-scheme: light;
    --page-bg: #fdf6e3;
    --text: #52676e;
    --card-bg: #eee8d5;
    --card-border: #c9c3ad;
    --divider: #ddd6c1;
    --link: #268bd2;
    --card-shadow: 0 5px 18px rgba(88, 110, 117, .12);
    --toggle-icon: #b58900;
    --toggle-ring: rgba(181, 137, 0, .23);
    --waybar-bg: rgba(238, 232, 213, .94);
    --waybar-border: rgba(38, 139, 210, .27);
    --waybar-text: #52676e;
    --waybar-muted: #52676e;
    --waybar-hover: rgba(42, 161, 152, .13);
    --waybar-active: rgba(38, 139, 210, .15);
    --waybar-accent: #268bd2;
    --waybar-shadow: 0 12px 32px rgba(88, 110, 117, .14);
}

html[data-color-theme="solarized"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #002b36;
    --text: #93a1a1;
    --card-bg: #073642;
    --card-border: #31545d;
    --divider: #174853;
    --link: #268bd2;
    --card-shadow: 0 8px 24px rgba(0, 20, 25, .40);
    --toggle-icon: #b58900;
    --toggle-ring: rgba(181, 137, 0, .24);
    --waybar-bg: rgba(7, 54, 66, .95);
    --waybar-border: rgba(42, 161, 152, .30);
    --waybar-text: #93a1a1;
    --waybar-muted: #93a1a1;
    --waybar-hover: rgba(42, 161, 152, .14);
    --waybar-active: rgba(38, 139, 210, .17);
    --waybar-accent: #2aa198;
    --waybar-shadow: 0 14px 38px rgba(0, 20, 25, .46);
}

html[data-color-theme="kanagawa"] {
    color-scheme: light;
    --page-bg: #f2ecbc;
    --text: #545464;
    --card-bg: #e5ddb0;
    --card-border: #c7bfa0;
    --divider: #dcd5ac;
    --link: #4d699b;
    --card-shadow: 0 5px 18px rgba(84, 84, 100, .12);
    --toggle-icon: #cc6d00;
    --toggle-ring: rgba(204, 109, 0, .22);
    --waybar-bg: rgba(229, 221, 176, .94);
    --waybar-border: rgba(77, 105, 155, .28);
    --waybar-text: #545464;
    --waybar-muted: #625f54;
    --waybar-hover: rgba(89, 123, 117, .14);
    --waybar-active: rgba(77, 105, 155, .16);
    --waybar-accent: #4d699b;
    --waybar-shadow: 0 12px 32px rgba(84, 84, 100, .14);
}

html[data-color-theme="kanagawa"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #1f1f28;
    --text: #dcd7ba;
    --card-bg: #2a2a37;
    --card-border: #54546d;
    --divider: #363646;
    --link: #7e9cd8;
    --card-shadow: 0 8px 24px rgba(13, 13, 18, .40);
    --toggle-icon: #e6c384;
    --toggle-ring: rgba(230, 195, 132, .23);
    --waybar-bg: rgba(42, 42, 55, .94);
    --waybar-border: rgba(126, 156, 216, .30);
    --waybar-text: #dcd7ba;
    --waybar-muted: #c8c093;
    --waybar-hover: rgba(106, 149, 137, .14);
    --waybar-active: rgba(126, 156, 216, .17);
    --waybar-accent: #7e9cd8;
    --waybar-shadow: 0 14px 38px rgba(13, 13, 18, .46);
}

html[data-color-theme="christmas"] {
    color-scheme: light;
    --page-bg: #edf7f1;
    --text: #17392e;
    --card-bg: #fbfffc;
    --card-border: #a9cdb8;
    --divider: #d5e8dc;
    --link: #9d2635;
    --card-shadow: 0 7px 22px rgba(15,61,46,.13);
    --toggle-icon: #b78a21;
    --toggle-ring: rgba(200,61,74,.22);
    --waybar-bg: rgba(251,255,252,.95);
    --waybar-border: rgba(15,61,46,.28);
    --waybar-text: #17392e;
    --waybar-muted: #4c6c60;
    --waybar-hover: rgba(200,61,74,.12);
    --waybar-active: rgba(15,61,46,.14);
    --waybar-accent: #b82f3f;
    --waybar-shadow: 0 13px 34px rgba(15,61,46,.15);
}

html[data-color-theme="christmas"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #09261d;
    --text: #f2faf5;
    --card-bg: #12392d;
    --card-border: #276749;
    --divider: #1d4c3c;
    --link: #f5d06f;
    --card-shadow: 0 9px 28px rgba(0,0,0,.38);
    --toggle-icon: #f5d06f;
    --toggle-ring: rgba(245,208,111,.25);
    --waybar-bg: rgba(18,57,45,.95);
    --waybar-border: rgba(200,61,74,.4);
    --waybar-text: #f2faf5;
    --waybar-muted: #b8d8c5;
    --waybar-hover: rgba(200,61,74,.18);
    --waybar-active: rgba(245,208,111,.14);
    --waybar-accent: #ee6572;
    --waybar-shadow: 0 15px 40px rgba(0,0,0,.42);
}

html[data-color-theme="easter"] {
    color-scheme: light;
    --page-bg: #fff1f8;
    --text: #574266;
    --card-bg: #fffafd;
    --card-border: #dcc8ec;
    --divider: #f0ddec;
    --link: #5477bd;
    --card-shadow: 0 7px 22px rgba(100,79,121,.12);
    --toggle-icon: #d78b25;
    --toggle-ring: rgba(220,184,255,.32);
    --waybar-bg: rgba(255,250,253,.95);
    --waybar-border: rgba(134,168,231,.34);
    --waybar-text: #574266;
    --waybar-muted: #806e8d;
    --waybar-hover: rgba(220,184,255,.22);
    --waybar-active: rgba(155,217,197,.24);
    --waybar-accent: #8a5bb6;
    --waybar-shadow: 0 13px 34px rgba(100,79,121,.14);
}

html[data-color-theme="easter"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #282038;
    --text: #f8efff;
    --card-bg: #382d4b;
    --card-border: #6d5785;
    --divider: #4c3c63;
    --link: #a9c7ff;
    --card-shadow: 0 9px 28px rgba(10,6,18,.38);
    --toggle-icon: #ffd17c;
    --toggle-ring: rgba(220,184,255,.28);
    --waybar-bg: rgba(56,45,75,.95);
    --waybar-border: rgba(220,184,255,.35);
    --waybar-text: #f8efff;
    --waybar-muted: #d7c5e7;
    --waybar-hover: rgba(220,184,255,.16);
    --waybar-active: rgba(155,217,197,.17);
    --waybar-accent: #dcb8ff;
    --waybar-shadow: 0 15px 40px rgba(10,6,18,.43);
}

html[data-color-theme="new-year"] {
    color-scheme: light;
    --page-bg: #eaf2ff;
    --text: #132957;
    --card-bg: #f8fbff;
    --card-border: #afc8e9;
    --divider: #d6e4f6;
    --link: #275fa8;
    --card-shadow: 0 7px 22px rgba(7,26,64,.13);
    --toggle-icon: #b58716;
    --toggle-ring: rgba(246,196,83,.3);
    --waybar-bg: rgba(248,251,255,.95);
    --waybar-border: rgba(75,163,255,.34);
    --waybar-text: #132957;
    --waybar-muted: #52698d;
    --waybar-hover: rgba(75,163,255,.16);
    --waybar-active: rgba(134,103,215,.15);
    --waybar-accent: #8c6810;
    --waybar-shadow: 0 13px 34px rgba(7,26,64,.15);
}

html[data-color-theme="new-year"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #050e24;
    --text: #e8f1ff;
    --card-bg: #0c1d42;
    --card-border: #294f89;
    --divider: #173565;
    --link: #72b7ff;
    --card-shadow: 0 9px 28px rgba(0,0,0,.42);
    --toggle-icon: #f6c453;
    --toggle-ring: rgba(246,196,83,.28);
    --waybar-bg: rgba(12,29,66,.95);
    --waybar-border: rgba(246,196,83,.34);
    --waybar-text: #e8f1ff;
    --waybar-muted: #a8bde0;
    --waybar-hover: rgba(75,163,255,.17);
    --waybar-active: rgba(246,196,83,.14);
    --waybar-accent: #f6c453;
    --waybar-shadow: 0 15px 40px rgba(0,0,0,.48);
}

html[data-color-theme="halloween"] {
    color-scheme: light;
    --page-bg: #f8eee4;
    --text: #382040;
    --card-bg: #fff9f2;
    --card-border: #d8b8b0;
    --divider: #ead7cf;
    --link: #7a3fc2;
    --card-shadow: 0 7px 22px rgba(56,32,64,.13);
    --toggle-icon: #c65300;
    --toggle-ring: rgba(255,122,24,.3);
    --waybar-bg: rgba(255,249,242,.95);
    --waybar-border: rgba(143,92,255,.3);
    --waybar-text: #382040;
    --waybar-muted: #755d78;
    --waybar-hover: rgba(255,122,24,.15);
    --waybar-active: rgba(143,92,255,.15);
    --waybar-accent: #a64700;
    --waybar-shadow: 0 13px 34px rgba(56,32,64,.15);
}

html[data-color-theme="halloween"][data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #12091b;
    --text: #f4e9ff;
    --card-bg: #241130;
    --card-border: #58326f;
    --divider: #371b49;
    --link: #bd96ff;
    --card-shadow: 0 9px 28px rgba(0,0,0,.44);
    --toggle-icon: #ff7a18;
    --toggle-ring: rgba(255,122,24,.3);
    --waybar-bg: rgba(36,17,48,.95);
    --waybar-border: rgba(255,122,24,.4);
    --waybar-text: #f4e9ff;
    --waybar-muted: #cbb5d8;
    --waybar-hover: rgba(255,122,24,.18);
    --waybar-active: rgba(143,92,255,.2);
    --waybar-accent: #ff8b34;
    --waybar-shadow: 0 15px 40px rgba(0,0,0,.5);
}

html[data-color-theme="gamesense"] {
    color-scheme: dark;
    --page-bg: #171717;
    --text: #d4d4d4;
    --card-bg: #232323;
    --card-border: #080808;
    --divider: #3a3a3a;
    --link: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 82%, white);
    --card-shadow: 0 0 0 1px #3b3b3b, 0 10px 24px rgba(0,0,0,.42);
    --toggle-icon: var(--gamesense-accent, #9ac84b);
    --toggle-ring: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 24%, transparent);
    --waybar-bg: rgba(32,32,32,.98);
    --waybar-border: #070707;
    --waybar-text: #e5e5e5;
    --waybar-muted: #a0a0a0;
    --waybar-hover: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 12%, transparent);
    --waybar-active: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 20%, transparent);
    --waybar-accent: var(--gamesense-accent, #9ac84b);
    --waybar-shadow: 0 0 0 1px #414141, 0 14px 30px rgba(0,0,0,.5);
}

html[data-color-theme="gamesense"][data-theme="light"] {
    --page-bg: #292929;
    --text: #f0f0f0;
    --card-bg: #363636;
    --card-border: #111111;
    --divider: #505050;
    --link: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 76%, white);
    --card-shadow: 0 0 0 1px #555, 0 9px 22px rgba(0,0,0,.34);
    --toggle-icon: var(--gamesense-accent, #9ac84b);
    --toggle-ring: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 24%, transparent);
    --waybar-bg: rgba(51,51,51,.98);
    --waybar-border: #111;
    --waybar-text: #fff;
    --waybar-muted: #c4c4c4;
    --waybar-hover: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 13%, transparent);
    --waybar-active: color-mix(in srgb, var(--gamesense-accent, #9ac84b) 21%, transparent);
    --waybar-accent: var(--gamesense-accent, #9ac84b);
    --waybar-shadow: 0 0 0 1px #5a5a5a, 0 13px 28px rgba(0,0,0,.4);
}

html {
    min-height: 100%;
    background: var(--page-bg);
    transition: background-color .35s ease;
}

body {
    margin: 0;
    padding: 18px 24px 40px;
    font-family: 'JetBrains Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
    background: transparent;
    color: var(--text);
    transition: background-color .35s ease, color .35s ease;
    isolation: isolate;
    min-height: 100vh;
}

html[data-color-theme="gamesense"] body {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    background:
        radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--gamesense-accent, #9ac84b) 8%, transparent), transparent 34rem),
        repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px);
    letter-spacing: .01em;
}

html[data-color-theme="gamesense"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.008) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
}

html[data-color-theme="gamesense"] :is(
    .waybar,
    .home-panel,
    .home-launch-card,
    .home-window-panel,
    .casino-card,
    .page-card,
    .page-menu,
    .member-card,
    .member-find-panel,
    .members-panel,
    .public-profile-card,
    .profile-comments-panel,
    .profile-menu,
    .profile-notifications-menu,
    .bonus-card,
    .bonus-panel,
    .cdn-card,
    .cdn-admin-panel,
    .login-card,
    .spotify-login-card,
    .spotify-popover,
    .spotify-queue-panel,
    .spotify-queue-open,
    .spotify-search-panel,
    .now-playing-popover,
    .admin-create-panel,
    .admin-login-card,
    .admin-metric-card,
    .admin-overview-card,
    .admin-user-card,
    .theme-chooser-panel,
    .custom-theme-panel,
    .background-chooser-panel,
    .cursor-pack-panel,
    .avatar-crop-panel,
    .banner-crop-panel,
    .profile-ban-panel
) {
    border-color: #080808;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, #444), var(--card-bg));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 1px #414141, 0 10px 24px rgba(0,0,0,.42);
}

html[data-color-theme="gamesense"] :is(
    .waybar,
    .home-panel,
    .members-panel,
    .public-profile-card,
    .profile-comments-panel,
    .page-card,
    .login-card,
    .spotify-popover,
    .spotify-queue-panel,
    .now-playing-popover,
    .theme-chooser-panel,
    .custom-theme-panel,
    .background-chooser-panel,
    .cursor-pack-panel
) {
    border-top-color: var(--waybar-accent);
}

html[data-color-theme="gamesense"] :is(h1, h2, h3, h4, strong) {
    color: #f2f2f2;
    text-shadow: 0 1px #000;
}

html[data-color-theme="gamesense"] :is(input, select, textarea) {
    border-color: #090909;
    background: linear-gradient(#171717, #1e1e1e);
    color: #e0e0e0;
    box-shadow: inset 0 0 0 1px #3d3d3d, inset 0 1px 3px rgba(0,0,0,.7);
}

html[data-color-theme="gamesense"] .playlist-rail {
    border-right-color: #4a4a4a;
    box-shadow: inset -1px 0 #080808;
}

html[data-color-theme="gamesense"] .spotify-search-panel input {
    padding-inline: 9px;
}

html[data-color-theme="gamesense"] :is(button, [role="button"]):focus-visible,
html[data-color-theme="gamesense"] :is(a, input, select, textarea):focus-visible {
    outline-color: var(--waybar-accent);
}

html[data-color-theme="gamesense"] ::selection {
    background: var(--gamesense-accent, #9ac84b);
    color: #101010;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--personal-background-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--personal-background-opacity, 0);
    pointer-events: none;
    transition: opacity .2s ease;
}

html[data-event-theme]:not([data-event-theme=""]) body::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--page-bg) 48%, transparent), color-mix(in srgb, var(--page-bg) 62%, transparent)),
        var(--personal-background-image, none);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

h1 {
    margin: 0 0 26px;
    padding: 0 58px;
    text-align: center;
    font-size: 30px;
}

.waybar-wrap {
    max-width: 1400px;
    margin: 0 auto 28px;
    position: sticky;
    top: 12px;
    z-index: 50;
}

.home-shortcut {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--waybar-muted);
    text-decoration: none;
    transform: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.home-shortcut:hover,
.home-shortcut:focus-visible {
    color: var(--waybar-text);
    background: var(--waybar-hover);
    border-color: var(--waybar-border);
    text-decoration: none;
    transform: translateY(-1px);
}

.home-shortcut:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--waybar-accent) 34%, transparent);
    outline-offset: 2px;
}

.home-shortcut[aria-current="page"] {
    color: var(--waybar-text);
    background: var(--waybar-active);
}

.home-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.waybar {
    min-height: 54px;
    padding: 7px 9px 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--waybar-border);
    border-radius: 20px;
    background: var(--waybar-bg);
    color: var(--waybar-text);
    box-shadow: var(--waybar-shadow);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease;
}

.waybar-left,
.waybar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.waybar-left {
    gap: 4px;
    flex-wrap: wrap;
}

.waybar-right {
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

.waybar-link {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--waybar-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, transform .18s ease;
}

.waybar-link:hover {
    color: var(--waybar-text);
    background: var(--waybar-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.waybar-link[aria-current="page"] {
    color: var(--waybar-text);
    background: var(--waybar-active);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--waybar-accent) 30%, transparent);
}

.waybar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--waybar-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .18s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.waybar-icon-btn:hover {
    background: var(--waybar-hover);
    border-color: var(--waybar-border);
    transform: translateY(-1px);
    text-decoration: none;
}

.waybar-icon-btn:focus-visible,
.waybar-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--waybar-accent) 34%, transparent);
    outline-offset: 2px;
}

.outlook-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.waybar-icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: max-content;
    max-width: min(280px, calc(100vw - 28px));
    padding: 8px 10px;
    border: 1px solid var(--waybar-border);
    border-radius: 10px;
    background: var(--waybar-bg);
    color: var(--waybar-text);
    box-shadow: var(--waybar-shadow);
    font-family: 'JetBrains Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease;
}

.waybar-icon-btn[data-tooltip]:hover::after,
.waybar-icon-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--toggle-icon);
    box-shadow: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    isolation: isolate;
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--toggle-ring);
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
}

.theme-toggle:active {
    transform: translateY(0) scale(.94);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--toggle-ring);
    outline-offset: 3px;
}

.theme-toggle.is-switching {
    animation: toggle-pop .42s cubic-bezier(.2,.85,.25,1.2);
}

.theme-toggle.is-switching::before {
    animation: toggle-ripple .48s ease-out;
}

.theme-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(.55);
}

html[data-theme="dark"] .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(.55);
}

html[data-theme="dark"] .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@keyframes toggle-pop {
    0% { transform: scale(1); }
    45% { transform: scale(.84) rotate(-8deg); }
    75% { transform: scale(1.08) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes toggle-ripple {
    0% { opacity: .8; transform: scale(.72); }
    100% { opacity: 0; transform: scale(1.65); }
}

.page-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 34px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.page-card h1 {
    margin-bottom: 14px;
}

.page-card p {
    margin: 0 auto;
    max-width: 620px;
    color: var(--text);
    line-height: 1.65;
    opacity: .78;
}

.casino-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.casino-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.logo-wrap {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.logo-wrap img {
    width: 250px;
    height: 150px;
    max-width: 100%;
    object-fit: contain;
}

.replacement-casino-name {
    color: var(--text);
    cursor: default;
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    user-select: none;
}

.contacts,
.phones {
    text-align: left;
    margin: 0 auto;
    max-width: 360px;
}

.contacts {
    display: grid;
    gap: 8px;
}

.contact-email-copy,
.contact-phone-copy {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--divider);
    border-radius: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    background: color-mix(in srgb, var(--card-bg) 88%, var(--waybar-accent) 12%);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.contact-email-copy:hover,
.contact-phone-copy:hover {
    border-color: color-mix(in srgb, var(--waybar-accent) 52%, var(--divider));
    background: color-mix(in srgb, var(--card-bg) 78%, var(--waybar-accent) 22%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--waybar-accent) 40%, transparent),
        0 0 16px color-mix(in srgb, var(--waybar-accent) 38%, transparent),
        0 0 30px color-mix(in srgb, var(--waybar-accent) 20%, transparent);
    transform: translateY(-1px);
}

.contact-email-copy:focus-visible,
.contact-phone-copy:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--waybar-accent) 34%, transparent);
    outline-offset: 2px;
}

.contact-email-label {
    grid-column: 1;
    color: var(--waybar-accent);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-email-address {
    min-width: 0;
    grid-column: 1;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.contact-copy-icon {
    width: 18px;
    height: 18px;
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--waybar-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.copy-toast {
    position: fixed;
    left: 50%;
    top: 62%;
    z-index: 220;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 13px 18px;
    border: 1px solid color-mix(in srgb, var(--waybar-accent) 55%, var(--card-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--waybar-bg) 94%, var(--waybar-accent) 6%);
    color: var(--waybar-text);
    box-shadow: 0 0 24px color-mix(in srgb, var(--waybar-accent) 24%, transparent), var(--waybar-shadow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    pointer-events: none;
    translate: -50% -50%;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.copy-toast.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: copy-toast-bounce .42s cubic-bezier(.2, .8, .2, 1);
}

.copy-toast.is-error {
    border-color: color-mix(in srgb, #bf616a 62%, var(--card-border));
}

@keyframes copy-toast-bounce {
    0% { transform: translateY(6px) scale(.97); }
    58% { transform: translateY(0) scale(1.025); }
    82% { transform: translateY(0) scale(.992); }
    100% { transform: translateY(0) scale(1); }
}

.phones {
    border-top: 1px solid var(--divider);
    margin-top: 18px;
    padding-top: 16px;
    display: grid;
    gap: 6px;
    transition: border-color .35s ease;
}

.contact-phone-copy {
    min-height: 39px;
    padding: 7px 9px;
    grid-template-columns: auto minmax(0, 1fr) 18px;
    grid-template-rows: auto;
    column-gap: 8px;
}

.contact-phone-label {
    color: var(--waybar-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.contact-phone-number {
    min-width: 0;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.contact-phone-copy .contact-copy-icon {
    grid-column: 3;
    grid-row: 1;
    width: 16px;
    height: 16px;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color .35s ease;
}

a:hover {
    text-decoration: underline;
}

@media (max-width: 950px) {
    .casino-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body {
        padding: 10px 14px 24px;
    }

    .waybar-wrap {
        top: 8px;
        margin-bottom: 22px;
    }

    .home-shortcut {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 12px;
    }

    .home-icon {
        width: 19px;
        height: 19px;
    }

    .waybar {
        border-radius: 17px;
        padding: 7px;
        gap: 8px;
        align-items: flex-start;
    }

    .waybar-left {
        gap: 2px;
    }

    .waybar-link {
        min-height: 36px;
        padding: 0 9px;
        font-size: 12px;
    }

    .waybar-icon-btn,
    .theme-toggle {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    h1 {
        padding: 0;
        font-size: 26px;
    }

    .casino-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .casino-card,
    .phones,
    a,
    .waybar,
    .waybar-link,
    .waybar-icon-btn,
    .theme-toggle,
    .theme-icon,
    .copy-toast {
        transition: none !important;
    }

    .copy-toast.is-visible {
        animation: none !important;
    }

    .theme-toggle.is-switching,
    .theme-toggle.is-switching::before {
        animation: none !important;
    }

}

.theme-effects-layer,
.theme-weather-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.theme-effects-layer { z-index: 45; }
.theme-weather-layer { z-index: -1; }

.theme-effects-layer::before {
    content: "";
    position: absolute;
    inset: -24%;
    background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--waybar-accent) 16%, transparent), transparent 31%),
        radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--link) 13%, transparent), transparent 29%);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

html[data-ambient-motion="on"] .theme-effects-layer::before {
    opacity: 1;
    animation: theme-ambient-drift 18s ease-in-out infinite alternate;
}

@media (pointer: fine) {
    html[data-cursor-pack],
    html[data-cursor-pack] body,
    html[data-cursor-pack] body * {
        cursor: var(--cursor-normal, auto) !important;
    }

    html[data-cursor-pack] :is(a, button, select, summary, label[for], [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"]),
    html[data-cursor-pack] :is(a, button, select, summary, label[for], [role="button"], [role="link"]) * {
        cursor: var(--cursor-pointer, pointer) !important;
    }

    html[data-cursor-pack] :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, [contenteditable="true"]) {
        cursor: var(--cursor-text, text) !important;
    }

    html[data-cursor-pack] :is([disabled], [aria-disabled="true"]) {
        cursor: var(--cursor-not-allowed, not-allowed) !important;
    }

    html[data-cursor-pack] :is([aria-busy="true"], [data-cursor-role="progress"]) {
        cursor: var(--cursor-progress, progress) !important;
    }

    html[data-cursor-pack] [data-cursor-role="wait"] { cursor: var(--cursor-wait, wait) !important; }
    html[data-cursor-pack] :is([draggable="true"], [data-cursor-role="move"]) { cursor: var(--cursor-move, move) !important; }
    html[data-cursor-pack] [data-cursor-role="crosshair"] { cursor: var(--cursor-crosshair, crosshair) !important; }
    html[data-cursor-pack] [data-cursor-role="help"] { cursor: var(--cursor-help, help) !important; }
    html[data-cursor-pack] [data-cursor-role="ew-resize"] { cursor: var(--cursor-ew-resize, ew-resize) !important; }
    html[data-cursor-pack] [data-cursor-role="ns-resize"] { cursor: var(--cursor-ns-resize, ns-resize) !important; }
    html[data-cursor-pack] [data-cursor-role="nwse-resize"] { cursor: var(--cursor-nwse-resize, nwse-resize) !important; }
    html[data-cursor-pack] [data-cursor-role="nesw-resize"] { cursor: var(--cursor-nesw-resize, nesw-resize) !important; }
    html[data-cursor-pack] [data-cursor-role="handwriting"] { cursor: var(--cursor-handwriting, auto) !important; }
    html[data-cursor-pack] [data-cursor-role="alternate"] { cursor: var(--cursor-alternate, alias) !important; }
}

.theme-weather-particle {
    position: absolute;
    left: var(--particle-x);
    top: -8vh;
    display: block;
    isolation: isolate;
    pointer-events: none;
}

.theme-weather-particle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: var(--particle-size, 2px);
    height: var(--particle-size, 2px);
    border-radius: 50%;
    background: var(--weather-color, #fff);
    filter: blur(var(--weather-glow-radius, 6px));
    opacity: var(--weather-glow-opacity, .55);
    transform: translate(-50%, -50%);
}

html[data-theme-weather="rain"] .theme-weather-particle {
    width: var(--weather-rain-width, 1px);
    height: var(--weather-rain-length, 54px);
    border-radius: 999px;
    background: linear-gradient(transparent, var(--weather-color, #fff));
    transform: rotate(var(--weather-angle, 10deg));
    animation: theme-rain-fall var(--particle-duration) linear var(--particle-delay) infinite;
}

html[data-theme-weather="snow"] .theme-weather-particle {
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;
    background: var(--weather-color, #fff);
    animation: theme-snow-fall var(--particle-duration) ease-in var(--particle-delay) infinite;
}

html[data-theme-weather="stars"] .theme-weather-particle {
    color: var(--weather-color, #fff);
    font: var(--particle-size)/1 Georgia, serif;
    animation: theme-star-fall var(--particle-duration) linear var(--particle-delay) infinite;
}

html[data-theme-weather="embers"] .theme-weather-particle {
    top: auto;
    bottom: -7vh;
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50% 50% 42% 58%;
    background: var(--weather-color, #ff7a18);
    animation: theme-ember-rise var(--particle-duration) ease-out var(--particle-delay) infinite;
}

html[data-theme-weather="fireworks"] .theme-weather-particle {
    top: var(--particle-y);
    color: var(--weather-color, #f6c453);
    font: var(--particle-size)/1 Georgia, serif;
    animation: theme-firework-burst var(--particle-duration) ease-out var(--particle-delay) infinite;
}

html[data-theme-weather="petals"] .theme-weather-particle {
    color: var(--weather-color, #f2b9d7);
    font: var(--particle-size)/1 Georgia, serif;
    animation: theme-petal-fall var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.theme-event-panel-icon {
    position: absolute !important;
    top: 12px;
    right: 14px;
    z-index: 4 !important;
    font: 18px/1 system-ui, sans-serif;
    opacity: .72;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
    pointer-events: none;
}

.members-panel,
.public-profile-card,
.profile-comments-panel,
.admin-metric-card {
    position: relative;
}

@keyframes theme-ambient-drift {
    from { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1); }
    to { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.08); }
}

@keyframes theme-rain-fall {
    from { transform: translate3d(0, -12vh, 0) rotate(var(--weather-angle, 10deg)); }
    to { transform: translate3d(var(--weather-drift, 14vw), 118vh, 0) rotate(var(--weather-angle, 10deg)); }
}

@keyframes theme-snow-fall {
    from { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    50% { transform: translate3d(var(--weather-drift-half, 7vw), 53vh, 0) rotate(180deg); }
    to { transform: translate3d(var(--weather-drift, 14vw), 112vh, 0) rotate(360deg); }
}

@keyframes theme-star-fall {
    from { opacity: .2; transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.72); }
    35% { opacity: .9; }
    70% { opacity: .48; }
    to { opacity: .16; transform: translate3d(var(--weather-drift, 14vw), 116vh, 0) rotate(300deg) scale(1.18); }
}

@keyframes theme-ember-rise {
    from { opacity: 0; transform: translate3d(0, 7vh, 0) scale(.55) rotate(0deg); }
    18% { opacity: .95; }
    78% { opacity: .62; }
    to { opacity: 0; transform: translate3d(var(--weather-drift, -12vw), -112vh, 0) scale(1.25) rotate(420deg); }
}

@keyframes theme-firework-burst {
    0%, 18% { opacity: 0; transform: scale(.08) rotate(0deg); }
    25% { opacity: 1; transform: scale(.55) rotate(25deg); }
    58% { opacity: .85; transform: scale(2.2) rotate(85deg); }
    100% { opacity: 0; transform: translate3d(0, 12vh, 0) scale(3.1) rotate(150deg); }
}

@keyframes theme-petal-fall {
    from { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0deg); }
    15% { opacity: .9; }
    50% { transform: translate3d(var(--weather-drift-half, 7vw), 48vh, 0) rotate(230deg); }
    to { opacity: .3; transform: translate3d(var(--weather-drift, 14vw), 112vh, 0) rotate(540deg); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-effects-layer::before,
    .theme-weather-particle { animation: none !important; }
    .theme-weather-particle { display: none; }
}

html[data-corners="square"] *,
html[data-corners="square"] *::before,
html[data-corners="square"] *::after {
    border-radius: 0 !important;
}
