@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg, #000);
    color: var(--text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

html[data-ready="true"] .loader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s;
    pointer-events: none;
}

.loader svg {
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

html {
    background: var(--bg);
    color: var(--text);
    font-family: "Google Sans", "Roboto", "TikTok Sans", sans-serif;
    font-size: 10pt;
    font-weight: 300;
    overflow: hidden;
}

body {
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body > *:not(.loader) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

html[data-ready="true"] body > *:not(.loader) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

input,
select,
textarea {
    outline: none;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

html[data-theme="graphite"] {
    --bg: #1d1f21;
    --bg2: #25282b;
    --bg3: #2d3034;

    --overlay: rgba(0, 0, 0, 0.65);
    --aboveoverlay: #f4f4f4;

    --text: #e7e7e7;
    --text2: #a9adb2;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #393d41;
    --borderhover: #50555b;
    --borderactive: #6d747c;

    --accent: #6f8cff;
    --accenthover: #829bff;
    --accentactive: #5977eb;

    --button: #34383d;
    --buttonhover: #40454b;
    --buttonactive: #292d31;

    --input: #191b1d;
    --inputfocus: #222529;

    --selected: #343d55;
    --selectedhover: #3c4763;

    --disabled: #292c2f;
    --disabledtext: #696e73;

    --shadow: rgba(0, 0, 0, 0.40);

    --scrollbar: #3b3f44;
    --scrollbarhover: #555b62;

    --success: #5dbb7a;
    --warning: #d9a84e;
    --danger: #d86b6b;
    --info: #639bd3;
}

html[data-theme="slate"] {
    --bg: #20252b;
    --bg2: #293039;
    --bg3: #323b45;

    --overlay: rgba(8, 12, 16, 0.68);
    --aboveoverlay: #f2f5f7;

    --text: #e4e9ed;
    --text2: #a9b3bc;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #3b4651;
    --borderhover: #536171;
    --borderactive: #718094;

    --accent: #7c9ab8;
    --accenthover: #90abc4;
    --accentactive: #6686a5;

    --button: #37414b;
    --buttonhover: #44515d;
    --buttonactive: #2c353e;

    --input: #1b2127;
    --inputfocus: #252d35;

    --selected: #35485a;
    --selectedhover: #3d5469;

    --disabled: #2c3339;
    --disabledtext: #707a83;

    --shadow: rgba(0, 0, 0, 0.38);

    --scrollbar: #46515c;
    --scrollbarhover: #616f7d;

    --success: #65b987;
    --warning: #d4ab61;
    --danger: #d47777;
    --info: #6f9fc6;
}

html[data-theme="midnight"] {
    --bg: #171b25;
    --bg2: #1f2532;
    --bg3: #282f3f;

    --overlay: rgba(3, 6, 14, 0.72);
    --aboveoverlay: #f0f3ff;

    --text: #e5e9f5;
    --text2: #9fa9c0;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #353f54;
    --borderhover: #4a5871;
    --borderactive: #687794;

    --accent: #7f8cff;
    --accenthover: #929dff;
    --accentactive: #6876e6;

    --button: #2e3748;
    --buttonhover: #39455a;
    --buttonactive: #252c3a;

    --input: #141822;
    --inputfocus: #1d2330;

    --selected: #303b62;
    --selectedhover: #394774;

    --disabled: #252b37;
    --disabledtext: #666f83;

    --shadow: rgba(0, 0, 0, 0.48);

    --scrollbar: #394257;
    --scrollbarhover: #56617a;

    --success: #64b88b;
    --warning: #d6a95b;
    --danger: #d66f7e;
    --info: #748dd8;
}

html[data-theme="ocean"] {
    --bg: #172126;
    --bg2: #1f2c33;
    --bg3: #28383f;

    --overlay: rgba(2, 14, 20, 0.68);
    --aboveoverlay: #eafcff;

    --text: #e1eef1;
    --text2: #9fb8be;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #344a52;
    --borderhover: #48636d;
    --borderactive: #66838d;

    --accent: #48a6c2;
    --accenthover: #5bb6d0;
    --accentactive: #368da8;

    --button: #2c3f47;
    --buttonhover: #37505a;
    --buttonactive: #223239;

    --input: #131c20;
    --inputfocus: #1c292f;

    --selected: #245467;
    --selectedhover: #2b6278;

    --disabled: #263238;
    --disabledtext: #687d83;

    --shadow: rgba(0, 0, 0, 0.42);

    --scrollbar: #36505a;
    --scrollbarhover: #4d6d78;

    --success: #56b98a;
    --warning: #d2ad5c;
    --danger: #d36d72;
    --info: #52a8c7;
}

html[data-theme="forest"] {
    --bg: #19211d;
    --bg2: #222d27;
    --bg3: #2c3931;

    --overlay: rgba(5, 14, 9, 0.70);
    --aboveoverlay: #f1f7f3;

    --text: #e4ece7;
    --text2: #a2b3a8;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #394b41;
    --borderhover: #506556;
    --borderactive: #6b816f;

    --accent: #6aa77d;
    --accenthover: #7ab88d;
    --accentactive: #568d68;

    --button: #304139;
    --buttonhover: #3b5045;
    --buttonactive: #26342d;

    --input: #151c18;
    --inputfocus: #1e2923;

    --selected: #34513f;
    --selectedhover: #3d604a;

    --disabled: #29332d;
    --disabledtext: #6b786f;

    --shadow: rgba(0, 0, 0, 0.40);

    --scrollbar: #3c5145;
    --scrollbarhover: #58705f;

    --success: #63b77e;
    --warning: #d2aa5e;
    --danger: #d17171;
    --info: #6b9f9f;
}

html[data-theme="teal"] {
    --bg: #172322;
    --bg2: #1f302e;
    --bg3: #293c39;

    --overlay: rgba(2, 17, 16, 0.70);
    --aboveoverlay: #eafffc;

    --text: #e1f0ed;
    --text2: #9db9b4;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #344f4b;
    --borderhover: #486a65;
    --borderactive: #648780;

    --accent: #45aa9a;
    --accenthover: #58bbab;
    --accentactive: #358f81;

    --button: #2c4541;
    --buttonhover: #365751;
    --buttonactive: #223733;

    --input: #131d1c;
    --inputfocus: #1c2a28;

    --selected: #28574f;
    --selectedhover: #30675d;

    --disabled: #263632;
    --disabledtext: #687f7a;

    --shadow: rgba(0, 0, 0, 0.42);

    --scrollbar: #385550;
    --scrollbarhover: #4f746d;

    --success: #56b88b;
    --warning: #d0aa59;
    --danger: #d16f75;
    --info: #54a8a0;
}

html[data-theme="violet"] {
    --bg: #201c27;
    --bg2: #2a2433;
    --bg3: #352d40;

    --overlay: rgba(12, 6, 18, 0.70);
    --aboveoverlay: #f8f2ff;

    --text: #ece6f2;
    --text2: #b2a5bc;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #493c56;
    --borderhover: #625170;
    --borderactive: #816d90;

    --accent: #9a74c8;
    --accenthover: #aa85d7;
    --accentactive: #845fb3;

    --button: #40354a;
    --buttonhover: #50415c;
    --buttonactive: #332b3c;

    --input: #1a161f;
    --inputfocus: #251f2c;

    --selected: #503a66;
    --selectedhover: #5d4477;

    --disabled: #312a37;
    --disabledtext: #766d7c;

    --shadow: rgba(0, 0, 0, 0.43);

    --scrollbar: #4b3f55;
    --scrollbarhover: #675674;

    --success: #68b987;
    --warning: #d4a85d;
    --danger: #d16e82;
    --info: #8c79cb;
}

html[data-theme="plum"] {
    --bg: #241b22;
    --bg2: #30232d;
    --bg3: #3c2c38;

    --overlay: rgba(17, 5, 14, 0.71);
    --aboveoverlay: #fff1fb;

    --text: #f0e5ed;
    --text2: #b9a4b2;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #523b4b;
    --borderhover: #6e5064;
    --borderactive: #8e6a82;

    --accent: #b36b9d;
    --accenthover: #c17dad;
    --accentactive: #995786;

    --button: #493542;
    --buttonhover: #5b4252;
    --buttonactive: #3a2a35;

    --input: #1e161c;
    --inputfocus: #2a1f27;

    --selected: #5d3751;
    --selectedhover: #6d4160;

    --disabled: #372a33;
    --disabledtext: #806f7a;

    --shadow: rgba(0, 0, 0, 0.43);

    --scrollbar: #56404e;
    --scrollbarhover: #735668;

    --success: #6ab98b;
    --warning: #d6a55e;
    --danger: #d16c83;
    --info: #9a7dbb;
}

html[data-theme="ember"] {
    --bg: #251d1a;
    --bg2: #312722;
    --bg3: #3d312a;

    --overlay: rgba(18, 8, 4, 0.72);
    --aboveoverlay: #fff5ee;

    --text: #f0e8e2;
    --text2: #b9aaa0;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #54443a;
    --borderhover: #705a4c;
    --borderactive: #917663;

    --accent: #c87852;
    --accenthover: #d98a62;
    --accentactive: #ad643f;

    --button: #4a3a31;
    --buttonhover: #5a493d;
    --buttonactive: #3a2e27;

    --input: #1d1714;
    --inputfocus: #29201c;

    --selected: #63402f;
    --selectedhover: #754b37;

    --disabled: #382f2a;
    --disabledtext: #81746b;

    --shadow: rgba(0, 0, 0, 0.44);

    --scrollbar: #59483d;
    --scrollbarhover: #765f50;

    --success: #70b77e;
    --warning: #d6a04d;
    --danger: #d1665f;
    --info: #9a8ab5;
}

html[data-theme="copper"] {
    --bg: #221f1b;
    --bg2: #2d2923;
    --bg3: #39332b;

    --overlay: rgba(14, 10, 5, 0.70);
    --aboveoverlay: #fff7ed;

    --text: #ede8df;
    --text2: #b5aa9a;
    --texthover: #ffffff;
    --textactive: #ffffff;

    --border: #4f473b;
    --borderhover: #6a5f4f;
    --borderactive: #887b67;

    --accent: #b9875d;
    --accenthover: #c9996d;
    --accentactive: #9f7049;

    --button: #463f35;
    --buttonhover: #564d41;
    --buttonactive: #373229;

    --input: #1b1815;
    --inputfocus: #25211c;

    --selected: #5c4934;
    --selectedhover: #6b563e;

    --disabled: #352f29;
    --disabledtext: #7c7468;

    --shadow: rgba(0, 0, 0, 0.42);

    --scrollbar: #51483c;
    --scrollbarhover: #6e6251;

    --success: #70b682;
    --warning: #d1a24e;
    --danger: #cf6f64;
    --info: #8a9cb4;
}