/* *************************** setting btn ********************************* */
.setting-light-btn,
.setting-dark-btn,
.setting-cacaoa-btn,
.setting-deepblue-btn,
.setting-mintfog-btn,
.setting-lavandusk-btn,
.setting-peachcocoa-btn,
.setting-meadowsun-btn,
.setting-greenstone-btn,
.setting-rosycloud-btn,
.setting-turquigarden-btn,
.setting-sandwood-btn,
.setting-cacoodusk-btn,
.setting-nightblue-btn,
.setting-mintshade-btn,
.setting-lavannight-btn,
.setting-peachdark-btn,
.setting-meadowdusk-btn,
.setting-stonemoss-btn,
.setting-rosydusk-btn,
.setting-turquinight-btn,
.setting-sandroot-btn,
.setting-cobaltshine-btn,
.setting-turquisoil-btn,
.setting-vioflare-btn,
.setting-nightgold-btn,
.setting-magentawood-btn,
.setting-royalgold-btn,
.setting-mustarpurple-btn,
.setting-goldsea-btn,
.setting-purpset-btn,
.setting-magwave-btn,
.setting-cobaltflare-btn,
.setting-turquiroot-btn,
.setting-vioember-btn,
.setting-nightflare-btn,
.setting-magleaf-btn,
.setting-royalshade-btn,
.setting-mustarshade-btn,
.setting-goldnight-btn,
.setting-purpnova-btn,
.setting-magstorm-btn {
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.1s;    
}

.setting-light-btn {
    background: linear-gradient(180deg, rgb(241,241,241), rgb(255,252,248));
    color: rgb(33,33,33);
}
.setting-dark-btn {
    background: linear-gradient(180deg, rgb(33,33,33), rgb(24,24,24));
    color: rgb(255,252,248);
}
.setting-cacaoa-btn {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(245, 237, 224));
    color: rgb(75, 59, 52);
}
.setting-deepblue-btn {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(229, 239, 246));
    color: rgb(42, 61, 80);
}
.setting-mintfog-btn {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(225, 240, 235));
    color: rgb(58, 69, 68);
}
.setting-lavandusk-btn {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(232, 229, 245));
    color: rgb(47, 45, 58);
}
.setting-peachcocoa-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(245,228,221));
    color: rgb(74, 47, 42);
}
.setting-meadowsun-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(248,243,220));
    color: rgb(47, 58, 47);
}
.setting-greenstone-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(232,232,222));
    color: rgb(45, 53, 49);
}
.setting-rosycloud-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(242,228,232));
    color: rgb(73, 61, 66);
}
.setting-turquigarden-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(226,241,236));
    color: rgb(31, 71, 66);
}
.setting-sandwood-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(240,230,215));
    color: rgb(68, 52, 41);
}

.setting-cacoodusk-btn {
    background: linear-gradient(180deg, rgb(75,67,60), rgb(40,35,30));
    color: rgb(160, 135, 110);
}
.setting-nightblue-btn {
    background: linear-gradient(180deg, rgb(40,50,75), rgb(15,22,40));
    color: rgb(120, 150, 190);
}
.setting-mintshade-btn {
    background: linear-gradient(180deg, rgb(55,70,65), rgb(22,33,30));
    color: rgb(140, 170, 160);
}
.setting-lavannight-btn {
    background: linear-gradient(180deg, rgb(70,65,95), rgb(32,30,45));
    color: rgb(145, 140, 180);
}
.setting-peachdark-btn {
    background: linear-gradient(180deg, rgb(70,50,45), rgb(40,28,26));
    color: rgb(180, 135, 120);
}
.setting-meadowdusk-btn {
    background: linear-gradient(180deg, rgb(60,65,50), rgb(32,33,25));
    color: rgb(160, 155, 90);
}
.setting-stonemoss-btn {
    background: linear-gradient(180deg, rgb(55,58,55), rgb(28,30,28));
    color: rgb(110, 130, 115);
}
.setting-rosydusk-btn {
    background: linear-gradient(180deg, rgb(70,55,65), rgb(40,30,34));
    color: rgb(165, 130, 140);
}
.setting-turquinight-btn {
    background: linear-gradient(180deg, rgb(55,85,80), rgb(20,32,30));
    color: rgb(90, 150, 140);
}
.setting-sandroot-btn {
    background: linear-gradient(180deg, rgb(65,55,45), rgb(38,32,26));
    color: rgb(150, 120, 95);
}

.setting-cobaltshine-btn {
    background: linear-gradient(180deg, rgb(240,240,240), rgb(200,220,240));
    color: rgb(255, 194, 10);
}
.setting-turquisoil-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(220,245,242));
    color: rgb(153, 79, 0);
}
.setting-vioflare-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(240,225,255));
    color: rgb(230, 97, 0);
}
.setting-nightgold-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(215,230,250));
    color: rgb(254, 254, 98);
}
.setting-magentawood-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(245,225,245));
    color: rgb(26, 255, 26);
}
.setting-royalgold-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(215,230,250));
    color: rgb(225, 190, 106);
}
.setting-mustarpurple-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(245,230,250));
    color: rgb(255, 176, 0);
}
.setting-goldsea-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(220,235,250));
    color: rgb(240, 228, 66);
}
.setting-purpset-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(245,225,245));
    color: rgb(252, 146, 114);
}
.setting-magwave-btn {
    background: linear-gradient(180deg, rgb(255,255,255), rgb(230,220,235));
    color: rgb(68, 170, 153);
}

.setting-cobaltflare-btn {
    background: linear-gradient(180deg, rgb(25, 45, 80), rgb(10, 28, 55));
    color: rgb(240, 190, 40);
}
.setting-turquiroot-btn {
    background: linear-gradient(180deg, rgb(40, 85, 80), rgb(20, 55, 52));
    color: rgb(150, 95, 30);
}
.setting-vioember-btn {
    background: linear-gradient(180deg, rgb(75, 40, 110), rgb(45, 20, 70));
    color: rgb(225, 110, 0);
}
.setting-nightflare-btn {
    background: linear-gradient(180deg, rgb(30, 50, 100), rgb(8, 25, 60));
    color: rgb(250, 230, 95);
}
.setting-magleaf-btn {
    background: linear-gradient(180deg, rgb(105, 25, 75), rgb(60, 12, 40));
    color: rgb(30, 110, 30);
}
.setting-royalshade-btn {
    background: linear-gradient(180deg, rgb(30, 60, 120), rgb(10, 30, 70));
    color: rgb(190, 155, 80);
}
.setting-mustarshade-btn {
    background: linear-gradient(180deg, rgb(95, 35, 110), rgb(60, 20, 70));
    color: rgb(210, 150, 0);
}
.setting-goldnight-btn {
    background: linear-gradient(180deg, rgb(35, 55, 120), rgb(10, 28, 65));
    color: rgb(240, 215, 80);
}
.setting-purpnova-btn {
    background: linear-gradient(180deg, rgb(95, 45, 110), rgb(55, 18, 65));
    color: rgb(255, 150, 125);
}
.setting-magstorm-btn {
    background: linear-gradient(180deg, rgb(110, 25, 70), rgb(55, 10, 35));
    color: rgb(45, 130, 120);
}

.setting-cacaoa-btn:hover,
.setting-deepblue-btn:hover,
.setting-mintfog-btn:hover,
.setting-lavandusk-btn:hover,
.setting-peachcocoa-btn:hover,
.setting-meadowsun-btn:hover,
.setting-greenstone-btn:hover,
.setting-rosycloud-btn:hover,
.setting-turquigarden-btn:hover,
.setting-sandwood-btn:hover,
.setting-cacoodusk-btn:hover,
.setting-nightblue-btn:hover,
.setting-mintshade-btn:hover,
.setting-lavannight-btn:hover,
.setting-peachdark-btn:hover,
.setting-meadowdusk-btn:hover,
.setting-stonemoss-btn:hover,
.setting-rosydusk-btn:hover,
.setting-turquinight-btn:hover,
.setting-sandroot-btn:hover,
.setting-cobaltshine-btn:hover,
.setting-turquisoil-btn:hover,
.setting-vioflare-btn:hover,
.setting-nightgold-btn:hover,
.setting-magentawood-btn:hover,
.setting-royalgold-btn:hover,
.setting-mustarpurple-btn:hover,
.setting-goldsea-btn:hover,
.setting-purpset-btn:hover,
.setting-magwave-btn:hover,
.setting-cobaltflare-btn:hover,
.setting-turquiroot-btn:hover,
.setting-vioember-btn:hover,
.setting-nightflare-btn:hover,
.setting-magleaf-btn:hover,
.setting-royalshade-btn:hover,
.setting-mustarshade-btn:hover,
.setting-goldnight-btn:hover,
.setting-purpnova-btn:hover,
.setting-magstorm-btn:hover{
    transform: translateY(1px);
}

/* ------------------------------------
   DEFAULT THEME
------------------------------------ */
:root {
    --bg-one: var(--clr-one, rgb(247, 239, 226));
    --bg-two: var(--clr-two, rgb(246, 242, 235));
    --panel: var(--clr-card-bg, rgb(255, 250, 240));
    --accent: var(--clr-text, rgb(59, 47, 47));
    --muted: var(--clr-muted, rgb(107, 97, 91));
    --sec-btn: var(--clr-sec-btn, rgb(246, 232, 232));
    --sec-text: var(--clr-sec-text, rgb(59, 47, 47));
    
    --admin-package-color: var(--clr-text, rgb(59, 47, 47));
    --admin-plan-color: var(--clr-muted, rgb(107, 97, 91));
    --user-ebook-color: var(--clr-text, rgb(59, 47, 47));
    --user-audiobook-color: var(--clr-muted, rgb(107, 97, 91));
}

body {
    background: linear-gradient(180deg, var(--bg-one), var(--bg-two));
    color: var(--accent);
}

h1,
h2,
h3 {
    color: var(--muted);
}

.color-picker {
  border: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* ------------------------------------
   UNIVERSAL COLOR VARIABLES PER THEME
   One class per theme (applied to <html>)
------------------------------------ */

/* PRZYKŁAD — wklejasz tu wszystkie swoje motywy */
html.light {
    --clr-one: rgb(241,241,241);
    --clr-two: rgb(255,252,248);
    --clr-card-bg: rgb(241,241,241);
    --clr-text: rgb(33,33,33);
    --clr-muted: rgb(105, 103, 103);
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(33,33,33);
}

html.dark {
    --clr-one: rgb(33,33,33);
    --clr-two: rgb(24,24,24);
    --clr-card-bg: rgb(33,33,33);
    --clr-text: rgb(255,252,248);
    --clr-muted: rgb(170, 168, 166);
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.cacaoa {
    --clr-one: rgb(247, 239, 226);
    --clr-two: rgb(246, 242, 235);
    --clr-card-bg: rgb(255, 250, 240);
    --clr-text: rgb(59, 47, 47);
    --clr-muted: rgb(107, 97, 91);
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.deepblue {
    --clr-one: rgb(229, 239, 246);
    --clr-two: rgb(234, 240, 245);
    --clr-card-bg: rgb(229, 239, 246);
    --clr-text: rgb(16, 32, 64);
    --clr-muted: rgb(48, 74, 112);
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.mintfog {
    --clr-one: rgb(225, 240, 235);
    --clr-two: rgb(233, 241, 239);
    --clr-card-bg: rgb(225, 240, 235);
    --clr-text: #2e3a35;
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.lavandusk {
    --clr-one: rgb(232, 229, 245);
    --clr-two: rgb(236, 234, 245);
    --clr-card-bg: rgb(232, 229, 245);
    --clr-text: rgb(47, 45, 58);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.peachcocoa {
    --clr-one: rgb(245,228,221);
    --clr-two: rgb(244, 233, 228);
    --clr-card-bg: rgb(245,228,221);
    --clr-text: rgb(74, 47, 42);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.meadowsun {
    --clr-one: rgb(248,243,220);
    --clr-two: rgb(247, 243, 227);
    --clr-card-bg: rgb(248,243,220);
    --clr-text: rgb(47, 58, 47);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.greenstone {
    --clr-one: rgb(232,232,222);
    --clr-two: rgb(234, 234, 230);
    --clr-card-bg: rgb(232,232,222);
    --clr-text: rgb(45, 53, 49);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.rosycloud {
    --clr-one: rgb(242,228,232);
    --clr-two: rgb(240, 233, 235);
    --clr-card-bg: rgb(242,228,232);
    --clr-text: rgb(73, 61, 66);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.turquigarden {
    --clr-one: rgb(226,241,236);
    --clr-two: rgb(229, 239, 236);
    --clr-card-bg: rgb(226,241,236);
    --clr-text: rgb(31, 71, 66);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.sandwood {
    --clr-one: rgb(240,230,215);
    --clr-two: rgb(240, 236, 228);
    --clr-card-bg: rgb(240,230,215);
    --clr-text: rgb(68, 52, 41);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.cacoodusk {
    --clr-one: rgb(40,35,30);
    --clr-two: rgb(56, 49, 42);
    --clr-card-bg: rgb(40,35,30);
    --clr-text: rgb(160, 135, 110);
    --clr-muted: rgb(99, 107, 104);
}

html.nightblue {
    --clr-one: rgb(15,22,40);
    --clr-two: rgb(22, 31, 56);
    --clr-card-bg: rgb(15,22,40);
    --clr-text: rgb(120, 150, 190);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.mintshade {
    --clr-one: rgb(22,33,30);
    --clr-two: rgb(72, 100, 93);
    --clr-card-bg: rgb(22,33,30);
    --clr-text: rgb(140, 170, 160);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.lavannight {
    --clr-one: rgb(32,30,45);
    --clr-two: rgb(70,65,95);
    --clr-card-bg: rgb(32,30,45);
    --clr-text: rgb(145, 140, 180);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.peachdark {
    --clr-one: rgb(40,28,26);
    --clr-two: rgb(80, 58, 54);
    --clr-card-bg: rgb(40,28,26);
    --clr-text: rgb(180, 135, 120);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.meadowdusk {
    --clr-one: rgb(32,33,25);
    --clr-two: rgb(71, 73, 57);
    --clr-card-bg: rgb(32,33,25);
    --clr-text: rgb(160, 155, 90);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.stonemoss {
    --clr-one: rgb(28,30,28);
    --clr-two: rgb(59, 62, 59);
    --clr-card-bg: rgb(28,30,28);
    --clr-text: rgb(110, 130, 115);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.rosydusk {
    --clr-one: rgb(40,30,34);
    --clr-two: rgb(75, 59, 65);
    --clr-card-bg: rgb(40,30,34);
    --clr-text: rgb(165, 130, 140);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.turquinight {
    --clr-one: rgb(20,32,30);
    --clr-two: rgb(41, 60, 57);
    --clr-card-bg: rgb(20,32,30);
    --clr-text: rgb(90, 150, 140);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.sandroot {
    --clr-one: rgb(38,32,26);
    --clr-two: rgb(69, 60, 50);
    --clr-card-bg: rgb(38,32,26);
    --clr-text: rgb(150, 120, 95);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.cobaltshine {
    --clr-one: rgb(200,220,240);
    --clr-two: rgb(220, 230, 240);
    --clr-card-bg: rgb(200,220,240);
    --clr-text: rgb(255, 194, 10);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.turquisoil {
    --clr-one: rgb(220,245,242);
    --clr-two: rgb(234, 246, 244);
    --clr-card-bg: rgb(220,245,242);
    --clr-text: rgb(153, 79, 0);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.vioflare {
    --clr-one: rgb(240,225,255);
    --clr-two: rgb(246, 239, 254);
    --clr-card-bg: rgb(240,225,255);
    --clr-text: rgb(230, 97, 0);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.nightgold {
    --clr-one: rgb(215,230,250);
    --clr-two: rgb(234, 242, 251);
    --clr-card-bg: rgb(215,230,250);
    --clr-text: rgb(254, 254, 98);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.magentawood {
    --clr-one: rgb(245,225,245);
    --clr-two: rgb(243, 233, 243);
    --clr-card-bg: rgb(245,225,245);
    --clr-text: rgb(26, 255, 26);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.royalgold {
    --clr-one: rgb(215,230,250);
    --clr-two: rgb(232, 239, 248);
    --clr-card-bg: rgb(215,230,250);
    --clr-text: rgb(225, 190, 106);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.mustarpurple {
    --clr-one: rgb(245,230,250);
    --clr-two: rgb(247, 240, 249);
    --clr-card-bg: rgb(245,230,250);
    --clr-text: rgb(255, 176, 0);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.goldsea {
    --clr-one: rgb(220,235,250);
    --clr-two: rgb(239, 246, 253);
    --clr-card-bg: rgb(220,235,250);
    --clr-text: rgb(240, 228, 66);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.purpset {
    --clr-one: rgb(245,225,245);
    --clr-two: rgb(244, 233, 244);
    --clr-card-bg: rgb(245,225,245);
    --clr-text: rgb(252, 146, 114);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.magwave {
    --clr-one: rgb(230,220,235);
    --clr-two: rgb(233, 228, 235);
    --clr-card-bg: rgb(230,220,235);
    --clr-text: rgb(68, 170, 153);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.cobaltflare {
    --clr-one: rgb(10, 28, 55);
    --clr-two: rgb(25, 55, 100);
    --clr-card-bg: rgb(10, 28, 55);
    --clr-text: rgb(240, 190, 40);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.turquiroot {
    --clr-one: rgb(20, 55, 52);
    --clr-two: rgb(39, 84, 80);
    --clr-card-bg: rgb(20, 55, 52);
    --clr-text: rgb(150, 95, 30);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.vioember {
    --clr-one: rgb(45, 20, 70);
    --clr-two: rgb(63, 35, 92);
    --clr-card-bg: rgb(45, 20, 70);
    --clr-text: rgb(225, 110, 0);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.nightflare {
    --clr-one: rgb(8, 25, 60);
    --clr-two: rgb(24, 46, 90);
    --clr-card-bg: rgb(8, 25, 60);
    --clr-text: rgb(250, 230, 95);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.magleaf {
    --clr-one: rgb(60, 12, 40);
    --clr-two: rgb(87, 31, 64);
    --clr-card-bg: rgb(60, 12, 40);
    --clr-text: rgb(30, 110, 30);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.royalshade {
    --clr-one: rgb(10, 30, 70);
    --clr-two: rgb(34, 58, 108);
    --clr-card-bg: rgb(10, 30, 70);
    --clr-text: rgb(190, 155, 80);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.mustarshade {
    --clr-one: rgb(60, 20, 70);
    --clr-two: rgb(87, 43, 98);
    --clr-card-bg: rgb(60, 20, 70);
    --clr-text: rgb(210, 150, 0);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.goldnight {
    --clr-one: rgb(10, 28, 65);
    --clr-two: rgb(28, 50, 93);
    --clr-card-bg: rgb(10, 28, 65);
    --clr-text: rgb(240, 215, 80);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.purpnova {
    --clr-one: rgb(55, 18, 65);
    --clr-two: rgb(77, 38, 87);
    --clr-card-bg: rgb(55, 18, 65);
    --clr-text: rgb(255, 150, 125);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

html.magstorm {
    --clr-one: rgb(55, 10, 35);
    --clr-two: rgb(82, 28, 58);
    --clr-card-bg: rgb(55, 10, 35);
    --clr-text: rgb(45, 130, 120);
    --clr-muted: #556860;
    --clr-sec-btn: rgb(246, 232, 232);
    --clr-sec-text: rgb(59, 47, 47);
}

.js-success-top-popup {
    color: rgba(0, 128, 0, 1);
    background-color: rgba(240, 247, 250, 1);
    border: 2px solid rgba(0, 128, 0, 1);
} 

.js-success-top-popup {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 5px 10px 5px 10px;
    border-radius: 5px 5px 5px 5px;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2) , 5px 5px 15px rgba(0, 0, 0, 0.9) , inset -5px -5px 15px rgba(64, 75, 78, 0.2) , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    overflow-y: scroll;
    transition: 0.5s ease-in-out;
    z-index: 100;
}
    
.js-success-top-popup.active-top-popup {  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 50px;
    transition: 0.5s ease-in-out;
}