:root[data-theme-style="kucoin"][data-theme-mode="dark"] {
  --bg: #0b100f;
  --bg-rgb: 11, 16, 15;
  --surface: #121a18;
  --surface-rgb: 18, 26, 24;
  --surface-raised: #17211e;
  --surface-raised-rgb: 23, 33, 30;
  --surface-hover: #1d2a26;
  --surface-hover-rgb: 29, 42, 38;
  --surface-soft: #0e1513;
  --surface-soft-rgb: 14, 21, 19;
  --border: #2a3a35;
  --border-rgb: 42, 58, 53;
  --border-soft: #20302b;
  --text: #f1f7f5;
  --text-rgb: 241, 247, 245;
  --text-secondary: #bdcbc7;
  --text-muted: #899b95;
  --text-muted-rgb: 137, 155, 149;
  --accent: #24ae8f;
  --accent-rgb: 36, 174, 143;
  --accent-hover: #36c4a3;
  --accent-contrast: #071512;
  --green: #2ed3a2;
  --green-rgb: 46, 211, 162;
  --red: #ff6175;
  --red-rgb: 255, 97, 117;
  --amber: #e9bd50;
  --amber-rgb: 233, 189, 80;
  --blue: #8b7cf6;
  --blue-rgb: 139, 124, 246;
  --allocation-1: #24ae8f;
  --allocation-2: #8b7cf6;
  --allocation-3: #47c5e8;
  --allocation-4: #f2c94c;
  --allocation-5: #ff8a65;
  --allocation-6: #76b947;
  --allocation-7: #e477b5;
  --allocation-8: #8da0b5;
}

:root[data-theme-style="binance"][data-theme-mode="dark"] {
  --bg: #0b0e11;
  --bg-rgb: 11, 14, 17;
  --surface: #181a20;
  --surface-rgb: 24, 26, 32;
  --surface-raised: #1e2329;
  --surface-raised-rgb: 30, 35, 41;
  --surface-hover: #2b3139;
  --surface-hover-rgb: 43, 49, 57;
  --surface-soft: #12151a;
  --surface-soft-rgb: 18, 21, 26;
  --border: #2b3139;
  --border-rgb: 43, 49, 57;
  --border-soft: #202630;
  --text: #eaecef;
  --text-rgb: 234, 236, 239;
  --text-secondary: #b7bdc6;
  --text-muted: #848e9c;
  --text-muted-rgb: 132, 142, 156;
  --accent: #f0b90b;
  --accent-rgb: 240, 185, 11;
  --accent-hover: #f8d33a;
  --accent-contrast: #181a20;
  --green: #0ecb81;
  --green-rgb: 14, 203, 129;
  --red: #f6465d;
  --red-rgb: 246, 70, 93;
  --amber: #f0b90b;
  --amber-rgb: 240, 185, 11;
  --blue: #1e9be8;
  --blue-rgb: 30, 155, 232;
  --allocation-1: #f0b90b;
  --allocation-2: #0ecb81;
  --allocation-3: #1e9be8;
  --allocation-4: #a970ff;
  --allocation-5: #f6465d;
  --allocation-6: #f7a600;
  --allocation-7: #5b8def;
  --allocation-8: #7f8a99;
}

:root[data-theme-style="okx"][data-theme-mode="dark"] {
  --bg: #080808;
  --bg-rgb: 8, 8, 8;
  --surface: #121212;
  --surface-rgb: 18, 18, 18;
  --surface-raised: #181818;
  --surface-raised-rgb: 24, 24, 24;
  --surface-hover: #232323;
  --surface-hover-rgb: 35, 35, 35;
  --surface-soft: #0d0d0d;
  --surface-soft-rgb: 13, 13, 13;
  --border: #303030;
  --border-rgb: 48, 48, 48;
  --border-soft: #242424;
  --text: #f5f5f5;
  --text-rgb: 245, 245, 245;
  --text-secondary: #c8c8c8;
  --text-muted: #8c8c8c;
  --text-muted-rgb: 140, 140, 140;
  --accent: #f5f5f5;
  --accent-rgb: 245, 245, 245;
  --accent-hover: #ffffff;
  --accent-contrast: #101010;
  --green: #31bd65;
  --green-rgb: 49, 189, 101;
  --red: #f04455;
  --red-rgb: 240, 68, 85;
  --amber: #f5c25b;
  --amber-rgb: 245, 194, 91;
  --blue: #5b8ff9;
  --blue-rgb: 91, 143, 249;
  --allocation-1: #f5f5f5;
  --allocation-2: #31bd65;
  --allocation-3: #5b8ff9;
  --allocation-4: #a87bf7;
  --allocation-5: #f5c25b;
  --allocation-6: #ed6a5a;
  --allocation-7: #52b8c7;
  --allocation-8: #8b8b8b;
}

:root[data-theme-style="tradingview"][data-theme-mode="dark"] {
  --bg: #131722;
  --bg-rgb: 19, 23, 34;
  --surface: #1e222d;
  --surface-rgb: 30, 34, 45;
  --surface-raised: #242832;
  --surface-raised-rgb: 36, 40, 50;
  --surface-hover: #2a2e39;
  --surface-hover-rgb: 42, 46, 57;
  --surface-soft: #171b26;
  --surface-soft-rgb: 23, 27, 38;
  --border: #363a45;
  --border-rgb: 54, 58, 69;
  --border-soft: #2a2e39;
  --text: #d1d4dc;
  --text-rgb: 209, 212, 220;
  --text-secondary: #b2b5be;
  --text-muted: #787b86;
  --text-muted-rgb: 120, 123, 134;
  --accent: #2962ff;
  --accent-rgb: 41, 98, 255;
  --accent-hover: #5481ff;
  --accent-contrast: #ffffff;
  --green: #089981;
  --green-rgb: 8, 153, 129;
  --red: #f23645;
  --red-rgb: 242, 54, 69;
  --amber: #ff9800;
  --amber-rgb: 255, 152, 0;
  --blue: #2962ff;
  --blue-rgb: 41, 98, 255;
  --allocation-1: #2962ff;
  --allocation-2: #089981;
  --allocation-3: #f23645;
  --allocation-4: #ff9800;
  --allocation-5: #9c27b0;
  --allocation-6: #00bcd4;
  --allocation-7: #787b86;
  --allocation-8: #fdd835;
}

:root[data-theme-mode="light"] {
  --green-soft: rgba(var(--green-rgb), 0.1);
  --green-border: rgba(var(--green-rgb), 0.3);
  --red-soft: rgba(var(--red-rgb), 0.09);
  --red-border: rgba(var(--red-rgb), 0.28);
  --amber-soft: rgba(var(--amber-rgb), 0.11);
  --amber-border: rgba(var(--amber-rgb), 0.3);
  --blue-soft: rgba(var(--blue-rgb), 0.1);
  --accent-soft: rgba(var(--accent-rgb), 0.1);
  --accent-border: rgba(var(--accent-rgb), 0.3);
  --shadow-opacity: 0.12;
}

:root[data-theme-style="atc"][data-theme-mode="light"] {
  --bg: #eef5f2;
  --bg-rgb: 238, 245, 242;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #f8fbfa;
  --surface-raised-rgb: 248, 251, 250;
  --surface-hover: #e5efeb;
  --surface-hover-rgb: 229, 239, 235;
  --surface-soft: #f3f8f6;
  --surface-soft-rgb: 243, 248, 246;
  --border: #c7d8d2;
  --border-rgb: 199, 216, 210;
  --border-soft: #dbe7e2;
  --text: #10201b;
  --text-rgb: 16, 32, 27;
  --text-secondary: #40534c;
  --text-muted: #6d817a;
  --text-muted-rgb: 109, 129, 122;
  --accent: #087f5b;
  --accent-rgb: 8, 127, 91;
  --accent-hover: #066849;
  --accent-contrast: #ffffff;
  --green: #078b65;
  --green-rgb: 7, 139, 101;
  --red: #cf4056;
  --red-rgb: 207, 64, 86;
  --amber: #9a6806;
  --amber-rgb: 154, 104, 6;
  --blue: #276fcc;
  --blue-rgb: 39, 111, 204;
  --allocation-1: #087f5b;
  --allocation-2: #276fcc;
  --allocation-3: #7556c7;
  --allocation-4: #9a6806;
  --allocation-5: #ce613b;
  --allocation-6: #268697;
  --allocation-7: #bd4c83;
  --allocation-8: #5f8428;
}

:root[data-theme-style="kucoin"][data-theme-mode="light"] {
  --bg: #eff5f3;
  --bg-rgb: 239, 245, 243;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #f8fbfa;
  --surface-raised-rgb: 248, 251, 250;
  --surface-hover: #e8f2ef;
  --surface-hover-rgb: 232, 242, 239;
  --surface-soft: #f5f9f8;
  --surface-soft-rgb: 245, 249, 248;
  --border: #c9ddd7;
  --border-rgb: 201, 221, 215;
  --border-soft: #dce9e5;
  --text: #14201d;
  --text-rgb: 20, 32, 29;
  --text-secondary: #42534e;
  --text-muted: #6f827c;
  --text-muted-rgb: 111, 130, 124;
  --accent: #16866e;
  --accent-rgb: 22, 134, 110;
  --accent-hover: #106c59;
  --accent-contrast: #ffffff;
  --green: #119f72;
  --green-rgb: 17, 159, 114;
  --red: #d9485f;
  --red-rgb: 217, 72, 95;
  --amber: #9b6b08;
  --amber-rgb: 155, 107, 8;
  --blue: #6f56d9;
  --blue-rgb: 111, 86, 217;
  --allocation-1: #16866e;
  --allocation-2: #6f56d9;
  --allocation-3: #2388a3;
  --allocation-4: #9b6b08;
  --allocation-5: #c95638;
  --allocation-6: #568927;
  --allocation-7: #b94f86;
  --allocation-8: #62758a;
}

:root[data-theme-style="binance"][data-theme-mode="light"] {
  --bg: #f5f5f5;
  --bg-rgb: 245, 245, 245;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #fafafa;
  --surface-raised-rgb: 250, 250, 250;
  --surface-hover: #f0f1f2;
  --surface-hover-rgb: 240, 241, 242;
  --surface-soft: #fafafa;
  --surface-soft-rgb: 250, 250, 250;
  --border: #d8dce1;
  --border-rgb: 216, 220, 225;
  --border-soft: #e8eaed;
  --text: #1e2329;
  --text-rgb: 30, 35, 41;
  --text-secondary: #474d57;
  --text-muted: #707a8a;
  --text-muted-rgb: 112, 122, 138;
  --accent: #9b7000;
  --accent-rgb: 155, 112, 0;
  --accent-hover: #765500;
  --accent-contrast: #ffffff;
  --green: #008f5d;
  --green-rgb: 0, 143, 93;
  --red: #d9364e;
  --red-rgb: 217, 54, 78;
  --amber: #9b7000;
  --amber-rgb: 155, 112, 0;
  --blue: #087bc1;
  --blue-rgb: 8, 123, 193;
  --allocation-1: #9b7000;
  --allocation-2: #008f5d;
  --allocation-3: #087bc1;
  --allocation-4: #764cc3;
  --allocation-5: #d9364e;
  --allocation-6: #b87300;
  --allocation-7: #3567bf;
  --allocation-8: #647080;
}

:root[data-theme-style="okx"][data-theme-mode="light"] {
  --bg: #f4f4f4;
  --bg-rgb: 244, 244, 244;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #fafafa;
  --surface-raised-rgb: 250, 250, 250;
  --surface-hover: #eeeeee;
  --surface-hover-rgb: 238, 238, 238;
  --surface-soft: #f8f8f8;
  --surface-soft-rgb: 248, 248, 248;
  --border: #d5d5d5;
  --border-rgb: 213, 213, 213;
  --border-soft: #e7e7e7;
  --text: #111111;
  --text-rgb: 17, 17, 17;
  --text-secondary: #454545;
  --text-muted: #767676;
  --text-muted-rgb: 118, 118, 118;
  --accent: #111111;
  --accent-rgb: 17, 17, 17;
  --accent-hover: #303030;
  --accent-contrast: #ffffff;
  --green: #168646;
  --green-rgb: 22, 134, 70;
  --red: #d63e4e;
  --red-rgb: 214, 62, 78;
  --amber: #946511;
  --amber-rgb: 148, 101, 17;
  --blue: #326fd1;
  --blue-rgb: 50, 111, 209;
  --allocation-1: #111111;
  --allocation-2: #168646;
  --allocation-3: #326fd1;
  --allocation-4: #764fc3;
  --allocation-5: #946511;
  --allocation-6: #c45145;
  --allocation-7: #33818d;
  --allocation-8: #707070;
}

:root[data-theme-style="tradingview"][data-theme-mode="light"] {
  --bg: #f0f3fa;
  --bg-rgb: 240, 243, 250;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #ffffff;
  --surface-raised-rgb: 255, 255, 255;
  --surface-hover: #f0f3fa;
  --surface-hover-rgb: 240, 243, 250;
  --surface-soft: #f8f9fd;
  --surface-soft-rgb: 248, 249, 253;
  --border: #c8cad1;
  --border-rgb: 200, 202, 209;
  --border-soft: #e0e3eb;
  --text: #131722;
  --text-rgb: 19, 23, 34;
  --text-secondary: #434651;
  --text-muted: #787b86;
  --text-muted-rgb: 120, 123, 134;
  --accent: #2962ff;
  --accent-rgb: 41, 98, 255;
  --accent-hover: #1d4ed8;
  --accent-contrast: #ffffff;
  --green: #089981;
  --green-rgb: 8, 153, 129;
  --red: #f23645;
  --red-rgb: 242, 54, 69;
  --amber: #a46100;
  --amber-rgb: 164, 97, 0;
  --blue: #2962ff;
  --blue-rgb: 41, 98, 255;
  --allocation-1: #2962ff;
  --allocation-2: #089981;
  --allocation-3: #f23645;
  --allocation-4: #a46100;
  --allocation-5: #8c239f;
  --allocation-6: #008fa3;
  --allocation-7: #686b75;
  --allocation-8: #9b8500;
}

.theme-card[data-theme-option="atc"] {
  --theme-preview-bg: #080d0c;
  --theme-preview-surface: #141d1b;
  --theme-preview-accent: #32d5a4;
}

.theme-card[data-theme-option="kucoin"] {
  --theme-preview-bg: #0b100f;
  --theme-preview-surface: #17211e;
  --theme-preview-accent: #24ae8f;
}

.theme-card[data-theme-option="binance"] {
  --theme-preview-bg: #0b0e11;
  --theme-preview-surface: #1e2329;
  --theme-preview-accent: #f0b90b;
}

.theme-card[data-theme-option="okx"] {
  --theme-preview-bg: #080808;
  --theme-preview-surface: #232323;
  --theme-preview-accent: #f5f5f5;
}

.theme-card[data-theme-option="tradingview"] {
  --theme-preview-bg: #131722;
  --theme-preview-surface: #242832;
  --theme-preview-accent: #2962ff;
}