:root,
html[data-theme="dark"] {
  --bg: #090909;
  --bg-2: #11100f;
  --surface: #141312;
  --surface-2: #1b1917;
  --surface-3: #22201d;
  --text: #f2eee8;
  --muted: #b8aea1;
  --line: rgba(242, 238, 232, 0.14);
  --line-strong: rgba(242, 238, 232, 0.26);
  --accent: #827057;
  --accent-2: #2f5b4a;
  --accent-soft: rgba(130, 112, 87, 0.22);
  --danger: #cf6b63;
  --ok: #88bb8d;
  --bg-glow-1: rgba(130, 112, 87, 0.14);
  --bg-glow-2: rgba(47, 91, 74, 0.11);

  --container: 1240px;
  --r1: 12px;
  --r2: 20px;
  --r3: 30px;

  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.4);

  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-title: "Space Grotesk", "Manrope", sans-serif;
}

html[data-theme="panako-signature"] {
  --bg: #040404;
  --bg-2: #09090b;
  --surface: #101013;
  --surface-2: #141419;
  --surface-3: #1a1a20;
  --text: #f5f6f7;
  --muted: #9da1aa;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent: #f3f4f6;
  --accent-2: #9dc6d5;
  --accent-soft: rgba(157, 198, 213, 0.16);
  --danger: #d97b7b;
  --ok: #82c2a0;
  --bg-glow-1: rgba(255, 255, 255, 0.08);
  --bg-glow-2: rgba(157, 198, 213, 0.1);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.56);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] {
  --bg: #f3efe9;
  --bg-2: #e8e1d8;
  --surface: #fffaf4;
  --surface-2: #f4ece1;
  --surface-3: #eadfce;
  --text: #2a221c;
  --muted: #6e6257;
  --line: rgba(42, 34, 28, 0.18);
  --line-strong: rgba(42, 34, 28, 0.32);
  --accent: #6d5b43;
  --accent-2: #4a7968;
  --accent-soft: rgba(109, 91, 67, 0.18);
  --danger: #b65852;
  --ok: #4f8b58;
  --bg-glow-1: rgba(109, 91, 67, 0.16);
  --bg-glow-2: rgba(74, 121, 104, 0.14);
  --shadow-lg: 0 20px 45px rgba(85, 71, 55, 0.18);
  --shadow-md: 0 10px 26px rgba(85, 71, 55, 0.12);
}

html[data-theme="studio-white"] {
  --bg: #f5f5f7;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ececf0;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.22);
  --accent: #0071e3;
  --accent-2: #111111;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --danger: #b42318;
  --ok: #1f7a45;
  --bg-glow-1: rgba(255, 255, 255, 0.92);
  --bg-glow-2: rgba(0, 113, 227, 0.08);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.08);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-title: "Manrope", "Segoe UI", sans-serif;
}

html[data-theme^="studio-"] {
  --bg: #f5f5f7;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ececf0;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.22);
  --accent: #0071e3;
  --accent-2: #111111;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --danger: #b42318;
  --ok: #1f7a45;
  --bg-glow-1: rgba(255, 255, 255, 0.92);
  --bg-glow-2: rgba(0, 113, 227, 0.08);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.08);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-title: "Manrope", "Segoe UI", sans-serif;
}

html[data-theme="studio-graphite"] {
  --bg: #f4f4f5;
  --surface-2: #efeff1;
  --surface-3: #dedfe3;
  --accent: #303236;
  --accent-2: #0f1012;
  --accent-soft: rgba(48, 50, 54, 0.1);
  --bg-glow-2: rgba(48, 50, 54, 0.08);
}

html[data-theme="studio-platinum"] {
  --bg: #f7f7f8;
  --surface-2: #f0f1f3;
  --surface-3: #e4e6ea;
  --accent: #8d959f;
  --accent-2: #373d44;
  --accent-soft: rgba(141, 149, 159, 0.14);
  --bg-glow-2: rgba(141, 149, 159, 0.1);
}

html[data-theme="studio-ivory"] {
  --bg: #fbfaf6;
  --surface-2: #f6f3eb;
  --surface-3: #ebe5d7;
  --accent: #78664a;
  --accent-2: #27221a;
  --accent-soft: rgba(120, 102, 74, 0.12);
  --bg-glow-2: rgba(120, 102, 74, 0.1);
}

html[data-theme="studio-champagne"] {
  --bg: #faf7f0;
  --surface-2: #f3ede1;
  --surface-3: #e7dbc6;
  --accent: #b08a55;
  --accent-2: #3b2c1c;
  --accent-soft: rgba(176, 138, 85, 0.14);
  --bg-glow-2: rgba(176, 138, 85, 0.12);
}

html[data-theme="studio-sage"] {
  --bg: #f5f8f4;
  --surface-2: #eef4ed;
  --surface-3: #dfe9dc;
  --accent: #6f866f;
  --accent-2: #253225;
  --accent-soft: rgba(111, 134, 111, 0.14);
  --bg-glow-2: rgba(111, 134, 111, 0.12);
}

html[data-theme="studio-olive"] {
  --bg: #f6f7f1;
  --surface-2: #eff0e4;
  --surface-3: #e2e3ce;
  --accent: #6f7248;
  --accent-2: #292a1b;
  --accent-soft: rgba(111, 114, 72, 0.14);
  --bg-glow-2: rgba(111, 114, 72, 0.12);
}

html[data-theme="studio-midnight"] {
  --bg: #f3f5f9;
  --surface-2: #ebeff7;
  --surface-3: #dce3f1;
  --accent: #1f3554;
  --accent-2: #07111f;
  --accent-soft: rgba(31, 53, 84, 0.12);
  --bg-glow-2: rgba(31, 53, 84, 0.12);
}

html[data-theme="studio-cobalt"] {
  --bg: #f3f7ff;
  --surface-2: #edf3ff;
  --surface-3: #dce8fb;
  --accent: #1f5fbf;
  --accent-2: #071b42;
  --accent-soft: rgba(31, 95, 191, 0.12);
  --bg-glow-2: rgba(31, 95, 191, 0.12);
}

html[data-theme="studio-sky"] {
  --bg: #f5fbff;
  --surface-2: #eef8ff;
  --surface-3: #dff0fb;
  --accent: #3f8ebd;
  --accent-2: #143044;
  --accent-soft: rgba(63, 142, 189, 0.12);
  --bg-glow-2: rgba(63, 142, 189, 0.12);
}

html[data-theme="studio-ice"] {
  --bg: #f7fbfb;
  --surface-2: #eef7f8;
  --surface-3: #dcecee;
  --accent: #6a9ca2;
  --accent-2: #203639;
  --accent-soft: rgba(106, 156, 162, 0.13);
  --bg-glow-2: rgba(106, 156, 162, 0.12);
}

html[data-theme="studio-rose"] {
  --bg: #fff7f8;
  --surface-2: #f9eef1;
  --surface-3: #efdbe2;
  --accent: #b5657b;
  --accent-2: #3d1e27;
  --accent-soft: rgba(181, 101, 123, 0.13);
  --bg-glow-2: rgba(181, 101, 123, 0.12);
}

html[data-theme="studio-blush"] {
  --bg: #fff8f5;
  --surface-2: #f9eee9;
  --surface-3: #eddcd4;
  --accent: #bf7d68;
  --accent-2: #43261d;
  --accent-soft: rgba(191, 125, 104, 0.13);
  --bg-glow-2: rgba(191, 125, 104, 0.12);
}

html[data-theme="studio-burgundy"] {
  --bg: #fbf6f7;
  --surface-2: #f5ecef;
  --surface-3: #ead9df;
  --accent: #7b2738;
  --accent-2: #2d0b13;
  --accent-soft: rgba(123, 39, 56, 0.12);
  --bg-glow-2: rgba(123, 39, 56, 0.11);
}

html[data-theme="studio-amber"] {
  --bg: #fffaf0;
  --surface-2: #f9f0dd;
  --surface-3: #eddfc2;
  --accent: #b87324;
  --accent-2: #3d260c;
  --accent-soft: rgba(184, 115, 36, 0.13);
  --bg-glow-2: rgba(184, 115, 36, 0.12);
}

html[data-theme="studio-bronze"] {
  --bg: #faf7f3;
  --surface-2: #f3ede6;
  --surface-3: #e4d7ca;
  --accent: #916a44;
  --accent-2: #312215;
  --accent-soft: rgba(145, 106, 68, 0.13);
  --bg-glow-2: rgba(145, 106, 68, 0.12);
}

html[data-theme="studio-mocha"] {
  --bg: #f8f5f2;
  --surface-2: #f0e9e2;
  --surface-3: #e0d2c6;
  --accent: #6b4f3c;
  --accent-2: #211712;
  --accent-soft: rgba(107, 79, 60, 0.13);
  --bg-glow-2: rgba(107, 79, 60, 0.12);
}

html[data-theme="studio-violet"] {
  --bg: #f8f6ff;
  --surface-2: #f0edfb;
  --surface-3: #e2daf4;
  --accent: #69539d;
  --accent-2: #24173f;
  --accent-soft: rgba(105, 83, 157, 0.12);
  --bg-glow-2: rgba(105, 83, 157, 0.12);
}

html[data-theme="studio-lavender"] {
  --bg: #faf8ff;
  --surface-2: #f3effb;
  --surface-3: #e8dff5;
  --accent: #9a82bf;
  --accent-2: #312241;
  --accent-soft: rgba(154, 130, 191, 0.13);
  --bg-glow-2: rgba(154, 130, 191, 0.12);
}

html[data-theme="studio-mint"] {
  --bg: #f4fbf8;
  --surface-2: #edf7f2;
  --surface-3: #dceee6;
  --accent: #4f9a7a;
  --accent-2: #173529;
  --accent-soft: rgba(79, 154, 122, 0.13);
  --bg-glow-2: rgba(79, 154, 122, 0.12);
}

html[data-theme="studio-carbon"] {
  --bg: #f2f3f4;
  --surface-2: #e9ebee;
  --surface-3: #d9dde2;
  --accent: #111418;
  --accent-2: #000000;
  --accent-soft: rgba(17, 20, 24, 0.1);
  --bg-glow-2: rgba(17, 20, 24, 0.1);
}

html[data-theme="noel"] {
  --bg: #0b1411;
  --bg-2: #101b16;
  --surface: #15231d;
  --surface-2: #1b2b24;
  --surface-3: #22362d;
  --text: #f2f5f1;
  --muted: #b2c2b7;
  --line: rgba(242, 245, 241, 0.14);
  --line-strong: rgba(242, 245, 241, 0.28);
  --accent: #b23a3a;
  --accent-2: #3f8e5b;
  --accent-soft: rgba(178, 58, 58, 0.2);
  --danger: #cf6b63;
  --ok: #83c08b;
  --bg-glow-1: rgba(178, 58, 58, 0.16);
  --bg-glow-2: rgba(63, 142, 91, 0.14);
}

html[data-theme="halloween"] {
  --bg: #140f0a;
  --bg-2: #1d1309;
  --surface: #23170b;
  --surface-2: #2d1d0d;
  --surface-3: #39250f;
  --text: #f7ece2;
  --muted: #c6a68f;
  --line: rgba(247, 236, 226, 0.16);
  --line-strong: rgba(247, 236, 226, 0.3);
  --accent: #d17722;
  --accent-2: #6e4ac8;
  --accent-soft: rgba(209, 119, 34, 0.2);
  --danger: #cf6b63;
  --ok: #b3b061;
  --bg-glow-1: rgba(209, 119, 34, 0.18);
  --bg-glow-2: rgba(110, 74, 200, 0.14);
}

html[data-theme="ete"] {
  --bg: #0f161b;
  --bg-2: #17242d;
  --surface: #1a2d38;
  --surface-2: #1f3542;
  --surface-3: #264352;
  --text: #eaf6fb;
  --muted: #a9c4d2;
  --line: rgba(234, 246, 251, 0.16);
  --line-strong: rgba(234, 246, 251, 0.3);
  --accent: #2fa18f;
  --accent-2: #c8a24f;
  --accent-soft: rgba(47, 161, 143, 0.2);
  --danger: #d27c63;
  --ok: #76bd96;
  --bg-glow-1: rgba(47, 161, 143, 0.16);
  --bg-glow-2: rgba(200, 162, 79, 0.14);
}

html[data-theme$="-glass"] {
  --glass-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(170, 202, 236, 0.08));
  --glass-surface-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(158, 193, 229, 0.15));
  --glass-border: rgba(226, 239, 255, 0.42);
  --glass-highlight: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 26px 68px rgba(2, 8, 19, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --glass-shadow-soft: 0 12px 30px rgba(2, 7, 16, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --glass-overlay-top: rgba(5, 11, 20, 0.35);
  --glass-overlay-bottom: rgba(7, 13, 24, 0.74);
  --glass-glow-left: rgba(203, 225, 255, 0.18);
  --glass-glow-right: rgba(149, 196, 238, 0.2);
  --selection-bg: rgba(183, 214, 255, 0.38);
  --selection-text: #f4f8ff;
  --theme-bg-image: url("../assets/liquid-glass-mountains.svg");
}

html[data-theme="liquid-glass"] {
  --bg: #070c13;
  --bg-2: #0d1521;
  --surface: rgba(20, 34, 50, 0.56);
  --surface-2: rgba(16, 31, 48, 0.64);
  --surface-3: rgba(13, 26, 42, 0.72);
  --text: #f4f8ff;
  --muted: #c6d4e2;
  --line: rgba(226, 239, 255, 0.34);
  --line-strong: rgba(236, 245, 255, 0.56);
  --accent: #b7d6ff;
  --accent-2: #8ec4f2;
  --accent-soft: rgba(183, 214, 255, 0.24);
  --danger: #efb4b4;
  --ok: #acd6bd;
  --bg-glow-1: rgba(185, 214, 255, 0.24);
  --bg-glow-2: rgba(142, 196, 242, 0.2);
}

html[data-theme="crimson-glass"] {
  --bg: #0f0608;
  --bg-2: #16080b;
  --surface: rgba(42, 16, 22, 0.58);
  --surface-2: rgba(34, 12, 18, 0.66);
  --surface-3: rgba(26, 8, 14, 0.74);
  --text: #fbeef1;
  --muted: #d5bac1;
  --line: rgba(244, 210, 219, 0.32);
  --line-strong: rgba(251, 225, 232, 0.52);
  --accent: #d78398;
  --accent-2: #b75f78;
  --accent-soft: rgba(215, 131, 152, 0.24);
  --danger: #f0adb8;
  --ok: #d89ba8;
  --bg-glow-1: rgba(168, 49, 77, 0.26);
  --bg-glow-2: rgba(111, 28, 47, 0.22);

  --glass-surface: linear-gradient(135deg, rgba(255, 220, 228, 0.2), rgba(169, 76, 101, 0.12));
  --glass-surface-strong: linear-gradient(135deg, rgba(255, 230, 235, 0.28), rgba(180, 80, 108, 0.2));
  --glass-border: rgba(247, 203, 215, 0.42);
  --glass-highlight: rgba(255, 230, 238, 0.26);
  --glass-shadow: 0 26px 68px rgba(17, 3, 8, 0.5), inset 0 1px 0 rgba(255, 228, 236, 0.24);
  --glass-shadow-soft: 0 12px 30px rgba(14, 2, 6, 0.34), inset 0 1px 0 rgba(255, 228, 236, 0.18);

  --glass-overlay-top: rgba(14, 4, 8, 0.44);
  --glass-overlay-bottom: rgba(18, 5, 9, 0.76);
  --glass-glow-left: rgba(201, 79, 109, 0.22);
  --glass-glow-right: rgba(128, 39, 62, 0.26);
  --selection-bg: rgba(215, 131, 152, 0.42);
  --selection-text: #fff6f8;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="obsidian-glass"] {
  --bg: #05070a;
  --bg-2: #0b1119;
  --surface: rgba(14, 21, 30, 0.58);
  --surface-2: rgba(11, 17, 25, 0.66);
  --surface-3: rgba(9, 14, 21, 0.74);
  --text: #eff5ff;
  --muted: #bcc9d9;
  --line: rgba(219, 232, 247, 0.3);
  --line-strong: rgba(235, 243, 255, 0.54);
  --accent: #9cb8d9;
  --accent-2: #7d98bb;
  --accent-soft: rgba(156, 184, 217, 0.23);
  --danger: #e8afb4;
  --ok: #9ec7af;
  --bg-glow-1: rgba(118, 146, 181, 0.22);
  --bg-glow-2: rgba(87, 114, 145, 0.18);
}

html[data-theme="arctic-glass"] {
  --bg: #08141d;
  --bg-2: #0f1e2a;
  --surface: rgba(16, 35, 48, 0.56);
  --surface-2: rgba(14, 31, 44, 0.64);
  --surface-3: rgba(11, 26, 39, 0.72);
  --text: #f2fbff;
  --muted: #c3d9e6;
  --line: rgba(224, 242, 252, 0.35);
  --line-strong: rgba(236, 248, 255, 0.56);
  --accent: #bbe6ff;
  --accent-2: #8fc8ea;
  --accent-soft: rgba(187, 230, 255, 0.24);
  --danger: #f1c4c4;
  --ok: #abdbc8;
  --bg-glow-1: rgba(177, 224, 248, 0.24);
  --bg-glow-2: rgba(137, 197, 230, 0.22);
}

html[data-theme="emerald-glass"] {
  --bg: #07140f;
  --bg-2: #0d2018;
  --surface: rgba(14, 39, 30, 0.56);
  --surface-2: rgba(12, 33, 26, 0.64);
  --surface-3: rgba(10, 27, 22, 0.72);
  --text: #ecf9f2;
  --muted: #b6d7c4;
  --line: rgba(205, 236, 219, 0.32);
  --line-strong: rgba(222, 245, 231, 0.54);
  --accent: #8cd6b0;
  --accent-2: #6cb892;
  --accent-soft: rgba(140, 214, 176, 0.24);
  --danger: #e9b4b0;
  --ok: #9ad5a8;
  --bg-glow-1: rgba(106, 182, 143, 0.24);
  --bg-glow-2: rgba(74, 140, 110, 0.2);
}

html[data-theme="sapphire-glass"] {
  --bg: #071225;
  --bg-2: #0d1d36;
  --surface: rgba(14, 34, 66, 0.56);
  --surface-2: rgba(12, 29, 56, 0.64);
  --surface-3: rgba(10, 24, 47, 0.72);
  --text: #edf4ff;
  --muted: #b6c9e7;
  --line: rgba(206, 223, 248, 0.34);
  --line-strong: rgba(225, 237, 255, 0.54);
  --accent: #97b9ff;
  --accent-2: #7e9de7;
  --accent-soft: rgba(151, 185, 255, 0.22);
  --danger: #e6b0b8;
  --ok: #9dc4be;
  --bg-glow-1: rgba(123, 155, 229, 0.24);
  --bg-glow-2: rgba(81, 116, 196, 0.22);
}

html[data-theme="amethyst-glass"] {
  --bg: #100c1d;
  --bg-2: #1a1430;
  --surface: rgba(36, 24, 64, 0.56);
  --surface-2: rgba(30, 20, 53, 0.64);
  --surface-3: rgba(24, 17, 44, 0.72);
  --text: #f4efff;
  --muted: #d0c2eb;
  --line: rgba(225, 212, 248, 0.32);
  --line-strong: rgba(238, 229, 255, 0.54);
  --accent: #c2b2ff;
  --accent-2: #a290e6;
  --accent-soft: rgba(194, 178, 255, 0.23);
  --danger: #e9b3cf;
  --ok: #b7d5c9;
  --bg-glow-1: rgba(156, 132, 224, 0.24);
  --bg-glow-2: rgba(116, 95, 185, 0.2);
}

html[data-theme="golden-noir-glass"] {
  --bg: #141009;
  --bg-2: #1f1810;
  --surface: rgba(43, 32, 19, 0.56);
  --surface-2: rgba(35, 27, 16, 0.64);
  --surface-3: rgba(30, 22, 13, 0.72);
  --text: #fbf2df;
  --muted: #dcc8a6;
  --line: rgba(239, 219, 178, 0.3);
  --line-strong: rgba(250, 232, 197, 0.5);
  --accent: #e0c18b;
  --accent-2: #c6a15f;
  --accent-soft: rgba(224, 193, 139, 0.22);
  --danger: #e4b08f;
  --ok: #b9c996;
  --bg-glow-1: rgba(184, 143, 78, 0.24);
  --bg-glow-2: rgba(134, 98, 49, 0.2);
  --glass-overlay-top: rgba(20, 13, 7, 0.42);
  --glass-overlay-bottom: rgba(26, 17, 10, 0.75);
  --glass-glow-left: rgba(205, 166, 102, 0.2);
  --glass-glow-right: rgba(133, 97, 48, 0.22);
  --selection-bg: rgba(224, 193, 139, 0.4);
  --selection-text: #fff6e7;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="sunset-glass"] {
  --bg: #1a0e12;
  --bg-2: #27151c;
  --surface: rgba(55, 27, 35, 0.56);
  --surface-2: rgba(45, 22, 30, 0.64);
  --surface-3: rgba(37, 18, 25, 0.72);
  --text: #fff1ea;
  --muted: #e5c2b4;
  --line: rgba(248, 214, 200, 0.3);
  --line-strong: rgba(255, 229, 217, 0.5);
  --accent: #ffbc98;
  --accent-2: #e68f79;
  --accent-soft: rgba(255, 188, 152, 0.24);
  --danger: #f0a9a4;
  --ok: #c8c59c;
  --bg-glow-1: rgba(219, 125, 106, 0.24);
  --bg-glow-2: rgba(176, 89, 95, 0.2);
  --glass-overlay-top: rgba(24, 11, 13, 0.42);
  --glass-overlay-bottom: rgba(33, 14, 17, 0.76);
  --glass-glow-left: rgba(230, 148, 120, 0.21);
  --glass-glow-right: rgba(167, 86, 90, 0.23);
  --selection-bg: rgba(255, 188, 152, 0.42);
  --selection-text: #fff5ee;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="oceanic-glass"] {
  --bg: #07161a;
  --bg-2: #0d2128;
  --surface: rgba(14, 42, 48, 0.56);
  --surface-2: rgba(12, 35, 41, 0.64);
  --surface-3: rgba(10, 29, 35, 0.72);
  --text: #ebfbff;
  --muted: #b7dce4;
  --line: rgba(204, 237, 245, 0.32);
  --line-strong: rgba(224, 246, 252, 0.54);
  --accent: #8fd5d7;
  --accent-2: #69b6be;
  --accent-soft: rgba(143, 213, 215, 0.24);
  --danger: #e4bbb0;
  --ok: #9ad0bb;
  --bg-glow-1: rgba(105, 180, 188, 0.24);
  --bg-glow-2: rgba(71, 135, 143, 0.2);
}

html[data-theme="forest-glass"] {
  --bg: #0b140d;
  --bg-2: #122014;
  --surface: rgba(23, 39, 24, 0.56);
  --surface-2: rgba(19, 33, 20, 0.64);
  --surface-3: rgba(15, 27, 17, 0.72);
  --text: #f0f7ef;
  --muted: #c0d3be;
  --line: rgba(214, 233, 208, 0.3);
  --line-strong: rgba(228, 244, 223, 0.52);
  --accent: #9ec69b;
  --accent-2: #7fa979;
  --accent-soft: rgba(158, 198, 155, 0.23);
  --danger: #e2b4aa;
  --ok: #9bc49b;
  --bg-glow-1: rgba(120, 165, 106, 0.24);
  --bg-glow-2: rgba(77, 121, 73, 0.19);
}

html[data-theme="neon-noir-glass"] {
  --bg: #050f11;
  --bg-2: #0a171b;
  --surface: rgba(9, 34, 37, 0.56);
  --surface-2: rgba(7, 28, 31, 0.64);
  --surface-3: rgba(6, 22, 25, 0.72);
  --text: #e9ffff;
  --muted: #abd2d2;
  --line: rgba(193, 238, 236, 0.34);
  --line-strong: rgba(214, 249, 246, 0.56);
  --accent: #84efd4;
  --accent-2: #5acfb7;
  --accent-soft: rgba(132, 239, 212, 0.24);
  --danger: #ecb2bb;
  --ok: #93cfbb;
  --bg-glow-1: rgba(88, 204, 181, 0.26);
  --bg-glow-2: rgba(40, 150, 141, 0.22);
}

html[data-theme="steel-glass"] {
  --bg: #0c1015;
  --bg-2: #151b24;
  --surface: rgba(24, 33, 45, 0.56);
  --surface-2: rgba(20, 28, 39, 0.64);
  --surface-3: rgba(16, 23, 33, 0.72);
  --text: #f1f5fa;
  --muted: #c2ccd9;
  --line: rgba(215, 224, 237, 0.3);
  --line-strong: rgba(232, 238, 248, 0.52);
  --accent: #b7c3d2;
  --accent-2: #8d9daf;
  --accent-soft: rgba(183, 195, 210, 0.23);
  --danger: #dfb3b8;
  --ok: #a8c1b5;
  --bg-glow-1: rgba(126, 145, 171, 0.23);
  --bg-glow-2: rgba(96, 116, 141, 0.2);
}

html[data-theme="rose-noir-glass"] {
  --bg: #180d14;
  --bg-2: #261421;
  --surface: rgba(53, 26, 42, 0.56);
  --surface-2: rgba(43, 21, 34, 0.64);
  --surface-3: rgba(35, 17, 29, 0.72);
  --text: #fff1f7;
  --muted: #dfc1d2;
  --line: rgba(245, 211, 229, 0.3);
  --line-strong: rgba(252, 227, 240, 0.52);
  --accent: #e2b3c7;
  --accent-2: #c088a6;
  --accent-soft: rgba(226, 179, 199, 0.24);
  --danger: #f0afb9;
  --ok: #c8b79c;
  --bg-glow-1: rgba(200, 119, 157, 0.24);
  --bg-glow-2: rgba(142, 75, 113, 0.2);
  --glass-overlay-top: rgba(23, 10, 16, 0.42);
  --glass-overlay-bottom: rgba(31, 12, 21, 0.76);
  --glass-glow-left: rgba(218, 148, 181, 0.2);
  --glass-glow-right: rgba(154, 89, 124, 0.23);
  --selection-bg: rgba(226, 179, 199, 0.42);
  --selection-text: #fff5f9;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="violet-mist-glass"] {
  --bg: #130f21;
  --bg-2: #1f1734;
  --surface: rgba(37, 30, 64, 0.56);
  --surface-2: rgba(31, 24, 54, 0.64);
  --surface-3: rgba(25, 20, 45, 0.72);
  --text: #f4efff;
  --muted: #cdc3e6;
  --line: rgba(223, 213, 247, 0.31);
  --line-strong: rgba(237, 228, 255, 0.53);
  --accent: #c8b8ff;
  --accent-2: #a395e2;
  --accent-soft: rgba(200, 184, 255, 0.23);
  --danger: #e8b3cb;
  --ok: #b6cdbd;
  --bg-glow-1: rgba(157, 136, 226, 0.24);
  --bg-glow-2: rgba(109, 94, 178, 0.2);
}

html[data-theme="sandstorm-glass"] {
  --bg: #17130c;
  --bg-2: #251d12;
  --surface: rgba(49, 38, 22, 0.56);
  --surface-2: rgba(40, 31, 18, 0.64);
  --surface-3: rgba(33, 25, 15, 0.72);
  --text: #faf1e2;
  --muted: #d6c4aa;
  --line: rgba(235, 215, 181, 0.3);
  --line-strong: rgba(247, 230, 199, 0.52);
  --accent: #d3c09c;
  --accent-2: #b29a70;
  --accent-soft: rgba(211, 192, 156, 0.23);
  --danger: #e2b497;
  --ok: #b8c49a;
  --bg-glow-1: rgba(187, 154, 98, 0.24);
  --bg-glow-2: rgba(135, 103, 59, 0.2);
  --glass-overlay-top: rgba(22, 15, 8, 0.42);
  --glass-overlay-bottom: rgba(30, 20, 10, 0.76);
  --glass-glow-left: rgba(204, 167, 108, 0.2);
  --glass-glow-right: rgba(142, 108, 58, 0.23);
  --selection-bg: rgba(211, 192, 156, 0.42);
  --selection-text: #fff7ea;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="cybermint-glass"] {
  --bg: #071715;
  --bg-2: #0d2522;
  --surface: rgba(14, 45, 41, 0.56);
  --surface-2: rgba(12, 37, 34, 0.64);
  --surface-3: rgba(10, 30, 28, 0.72);
  --text: #ecfffb;
  --muted: #b6e2d6;
  --line: rgba(201, 245, 232, 0.33);
  --line-strong: rgba(219, 252, 241, 0.55);
  --accent: #8eead0;
  --accent-2: #62cbb1;
  --accent-soft: rgba(142, 234, 208, 0.24);
  --danger: #e7b5be;
  --ok: #a2d6b5;
  --bg-glow-1: rgba(97, 200, 175, 0.25);
  --bg-glow-2: rgba(49, 146, 131, 0.2);
}

html[data-theme="polar-night-glass"] {
  --bg: #060d1b;
  --bg-2: #0c1730;
  --surface: rgba(13, 27, 57, 0.56);
  --surface-2: rgba(11, 23, 48, 0.64);
  --surface-3: rgba(9, 19, 40, 0.72);
  --text: #edf3ff;
  --muted: #bcc9e9;
  --line: rgba(207, 222, 248, 0.32);
  --line-strong: rgba(225, 237, 255, 0.54);
  --accent: #a8c0f5;
  --accent-2: #7f9ede;
  --accent-soft: rgba(168, 192, 245, 0.22);
  --danger: #e4b2bc;
  --ok: #a7c5bf;
  --bg-glow-1: rgba(121, 151, 219, 0.24);
  --bg-glow-2: rgba(69, 101, 186, 0.21);
}

html[data-theme="cobalt-glass"] {
  --bg: #081329;
  --bg-2: #0f2145;
  --surface: rgba(14, 38, 76, 0.56);
  --surface-2: rgba(12, 32, 64, 0.64);
  --surface-3: rgba(10, 27, 54, 0.72);
  --text: #edf4ff;
  --muted: #b6c8ea;
  --line: rgba(204, 220, 248, 0.33);
  --line-strong: rgba(224, 236, 255, 0.55);
  --accent: #8bb0ff;
  --accent-2: #6e8ed8;
  --accent-soft: rgba(139, 176, 255, 0.24);
  --danger: #e4b1bb;
  --ok: #9fc2bc;
  --bg-glow-1: rgba(102, 140, 230, 0.24);
  --bg-glow-2: rgba(56, 95, 184, 0.22);
}

html[data-theme="ember-glass"] {
  --bg: #1a0f0a;
  --bg-2: #2a1710;
  --surface: rgba(58, 31, 21, 0.56);
  --surface-2: rgba(48, 26, 17, 0.64);
  --surface-3: rgba(39, 21, 14, 0.72);
  --text: #fff1e8;
  --muted: #e1c1ad;
  --line: rgba(245, 212, 189, 0.3);
  --line-strong: rgba(255, 228, 207, 0.51);
  --accent: #efa87d;
  --accent-2: #cc7e5f;
  --accent-soft: rgba(239, 168, 125, 0.24);
  --danger: #efaba5;
  --ok: #c4c095;
  --bg-glow-1: rgba(220, 131, 92, 0.24);
  --bg-glow-2: rgba(158, 82, 57, 0.2);
  --glass-overlay-top: rgba(23, 11, 8, 0.42);
  --glass-overlay-bottom: rgba(32, 14, 10, 0.76);
  --glass-glow-left: rgba(230, 147, 107, 0.21);
  --glass-glow-right: rgba(160, 83, 58, 0.23);
  --selection-bg: rgba(239, 168, 125, 0.42);
  --selection-text: #fff6ef;
  --theme-bg-image: url("../assets/liquid-glass-crimson-studio.svg");
}

html[data-theme="lunar-glass"] {
  --bg: #0b1019;
  --bg-2: #121a27;
  --surface: rgba(22, 31, 47, 0.56);
  --surface-2: rgba(18, 26, 39, 0.64);
  --surface-3: rgba(15, 22, 33, 0.72);
  --text: #f2f6ff;
  --muted: #c5cedd;
  --line: rgba(216, 226, 241, 0.3);
  --line-strong: rgba(233, 239, 250, 0.52);
  --accent: #cfd9ec;
  --accent-2: #9eabc2;
  --accent-soft: rgba(207, 217, 236, 0.22);
  --danger: #dfb3bf;
  --ok: #afc3b9;
  --bg-glow-1: rgba(139, 156, 184, 0.22);
  --bg-glow-2: rgba(97, 115, 143, 0.2);
}

html[data-theme="mono-ice-glass"] {
  --bg: #0c1117;
  --bg-2: #151c25;
  --surface: rgba(24, 33, 44, 0.56);
  --surface-2: rgba(20, 28, 38, 0.64);
  --surface-3: rgba(16, 24, 33, 0.72);
  --text: #f4f8ff;
  --muted: #c8d3e2;
  --line: rgba(220, 230, 244, 0.31);
  --line-strong: rgba(236, 243, 252, 0.53);
  --accent: #d7e4f3;
  --accent-2: #a6b7cb;
  --accent-soft: rgba(215, 228, 243, 0.22);
  --danger: #e4b7be;
  --ok: #b3c6bf;
  --bg-glow-1: rgba(146, 165, 190, 0.22);
  --bg-glow-2: rgba(105, 124, 148, 0.2);
}

html[data-theme="commerce-split"] {
  --bg: #ffffff;
  --bg-2: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --surface-3: #e9e9e9;
  --text: #0a0a0a;
  --muted: #666666;
  --line: #dedede;
  --line-strong: #b7b7b7;
  --accent: #0a0a0a;
  --accent-2: #731b2a;
  --accent-soft: rgba(115, 27, 42, 0.12);
  --danger: #b42318;
  --ok: #18734a;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --font-body: "Manrope", sans-serif;
  --font-title: "Archivo Black", "Arial Black", sans-serif;
  --container: 1440px;
  --r1: 0px;
  --r2: 0px;
  --r3: 0px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 680px at 10% -5%, var(--bg-glow-1), transparent 65%),
    radial-gradient(1000px 620px at 95% -10%, var(--bg-glow-2), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

html[data-theme$="-glass"] body {
  background:
    linear-gradient(180deg, var(--glass-overlay-top), var(--glass-overlay-bottom)),
    radial-gradient(1120px 740px at 18% -8%, var(--glass-glow-left), transparent 64%),
    radial-gradient(980px 680px at 88% -6%, var(--glass-glow-right), transparent 64%),
    var(--theme-bg-image) center / cover no-repeat,
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

html[data-theme$="-glass"] ::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

@media (max-width: 860px) {
  html[data-theme$="-glass"] body {
    background-attachment: scroll;
    background-size: auto, auto, auto, cover, auto;
  }
}

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

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

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-title);
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

.container {
  width: min(var(--container), calc(100% - 30px));
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.page {
  padding: 20px 0 52px;
}

.section {
  margin-top: 20px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.card-surface {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow-md);
}

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