@font-face {
  font-family: "Brady Bunch Remastered";
  src: url("/fonts/3ccd0e1b42575004db1628be7d0a8522.eot");
  src:
    url("/fonts/3ccd0e1b42575004db1628be7d0a8522ie.eot") format("embedded-opentype"),
    url("/fonts/3ccd0e1b42575004db1628be7d0a8522.woff") format("woff"),
    url("/fonts/3ccd0e1b42575004db1628be7d0a8522.woff2") format("woff2"),
    url("/fonts/3ccd0e1b42575004db1628be7d0a8522.ttf") format("truetype"),
    url("/fonts/Brady-Bunch-Remastered.ttf.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --sp-font-title: "Barlow Condensed", "Montserrat", "Arial", sans-serif;
  --sp-font-body: "Montserrat", "Varela Round", "Arial", sans-serif;
  --sp-font-accent: "Barlow Condensed", "Yanone Kaffeesatz", "Arial Narrow", sans-serif;
  --sp-font-display: "Brady Bunch Remastered", "Barlow Condensed", "Arial Narrow", sans-serif;

  --sp-text-dark: #11182a;
  --sp-link: var(--sp-shell-nav-highlight, var(--sp-primary-hover, #8ce7ff));
  --sp-link-hover: var(--sp-primary-hover, var(--sp-primary, #ffffff));
  --sp-link-underline: color-mix(in srgb, var(--sp-link) 54%, transparent);
  --sp-sexem: #0290BF;
  --sp-sexef: #F0037F;

  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 18%, rgba(101, 231, 255, 0.18), transparent 24rem),
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 20%, transparent), transparent 26rem),
    linear-gradient(180deg, rgba(6, 12, 29, 0.99), rgba(4, 10, 23, 0.99));
  --sp-shell-grid:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  --sp-shell-header-bg: linear-gradient(180deg, rgba(8, 18, 42, 0.9), rgba(5, 10, 24, 0.84));
  --sp-shell-footer-bg:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.08), transparent 22rem),
    linear-gradient(180deg, rgba(5, 10, 24, 0), rgba(5, 10, 24, 0.94));
  --sp-shell-pill-bg: rgba(255, 255, 255, 0.06);
  --sp-shell-brand-accent: var(--sp-violet, var(--sp-primary-hover, #8ce7ff));
  --sp-shell-nav-highlight: rgba(226, 205, 255, 0.96);
  --sp-shell-icon-bg: rgba(8, 16, 34, 0.58);
  --sp-shell-icon-border: rgba(180, 210, 255, 0.18);

  --sp-panel-gradient: var(--sp-bg-glass, linear-gradient(135deg, color-mix(in srgb, var(--sp-primary, #58e6ff) 22%, transparent), color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 16%, transparent), rgba(23, 31, 62, 0.72)));
  --sp-panel-gradient-soft: var(--sp-bg-glass-soft, linear-gradient(135deg, color-mix(in srgb, var(--sp-primary, #58e6ff) 14%, transparent), color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 12%, transparent), rgba(255, 255, 255, 0.04)));
  --sp-outline-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  --sp-primary-gradient: linear-gradient(135deg, var(--sp-primary, #ffb000), var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)));
  --sp-box-tab-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 76%, transparent),
      color-mix(in srgb, var(--sp-shell-nav-highlight, var(--sp-primary-hover, #e2cdff)) 34%, var(--sp-bg-page, #050a16) 66%)
    );
  --sp-box-tab-border: color-mix(in srgb, var(--sp-shell-nav-highlight, var(--sp-primary-hover, #e2cdff)) 46%, transparent);
  --sp-box-tab-text: var(--sp-text, #f7fbff);
  --sp-box-tab-fill-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 V34 C0 14 16 1 38 1 H410 C439 1 453 12 465 34 C477 58 500 70 520 72 Z' fill='%23000'/%3E%3C/svg%3E");
  --sp-box-tab-stroke-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 V34 C0 14 16 1 38 1 H410 C439 1 453 12 465 34 C477 58 500 70 520 72' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sp-tab-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  --sp-tab-active-bg: linear-gradient(135deg, var(--sp-cyan, #58e6ff), var(--sp-violet, var(--sp-primary-hover, #8ce7ff)));
  --sp-button-accent-text: var(--sp-text-dark, #11182a);
  --sp-tab-active-text: var(--sp-text-dark, #11182a);
  --sp-tab-active-icon: var(--sp-tab-active-text);
  --sp-tab-active-marker: color-mix(in srgb, var(--sp-tab-active-text) 70%, transparent);
  --sp-select-background: color-mix(in srgb, var(--sp-bg-panel-strong, #081122) 90%, var(--sp-primary, #58e6ff) 10%);
  --sp-select-background-hover: color-mix(in srgb, var(--sp-bg-panel-strong, #081122) 84%, var(--sp-primary-hover, #8ce7ff) 16%);
  --sp-select-option-background: var(--sp-bg-panel-strong, rgba(8, 15, 34, 0.98));
  --sp-select-option-hover: color-mix(in srgb, var(--sp-primary, #58e6ff) 28%, var(--sp-bg-panel-strong, #081122));
  --sp-select-option-selected: color-mix(in srgb, var(--sp-primary, #58e6ff) 42%, var(--sp-bg-panel-strong, #081122));
  --sp-select-option-selected-background: var(--sp-select-option-selected);
  --sp-select-option-selected-text: var(--sp-text, #f7fbff);
  --sp-table-bg: rgba(255, 255, 255, 0.04);
  --sp-table-head-bg: rgba(255, 255, 255, 0.08);
  --sp-modal-bg: var(--sp-bg-panel-strong, rgba(8, 15, 34, 0.92));
  --sp-accordion-bg: var(--sp-bg-glass-soft, rgba(255, 255, 255, 0.06));
  --sp-badge-bg: rgba(255, 255, 255, 0.08);
  --sp-settings-preview-bg: var(--sp-bg-page-gradient);
}

/* Compatibility bridge for legacy sexem/sexef classes still emitted across PHP and Vue views. */
html body :is(.sexem.sexem.sexem.sexem.sexem, a.sexem.sexem.sexem.sexem.sexem),
html body :is(a.sexem.sexem.sexem.sexem.sexem:hover, a.sexem.sexem.sexem.sexem.sexem:focus-visible) {
  color: var(--sp-sexem, #0290BF) !important;
  text-decoration: none !important;
}

html body :is(.sexef.sexef.sexef.sexef.sexef, a.sexef.sexef.sexef.sexef.sexef),
html body :is(a.sexef.sexef.sexef.sexef.sexef:hover, a.sexef.sexef.sexef.sexef.sexef:focus-visible) {
  color: var(--sp-sexef, #F0037F) !important;
  text-decoration: none !important;
}

:root:not([data-liquid-theme]),
:root[data-liquid-theme="default"],
:root[data-liquid-theme="liquid_aurora"] {
  --sp-bg-page: #061320;
  --sp-bg-panel: rgba(8, 19, 42, 0.76);
  --sp-bg-panel-strong: rgba(7, 16, 35, 0.92);
  --sp-bg-glass: linear-gradient(135deg, rgba(93, 240, 255, 0.24), rgba(110, 144, 255, 0.14) 44%, rgba(12, 24, 53, 0.76));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(93, 240, 255, 0.14), rgba(137, 108, 255, 0.12), rgba(255, 255, 255, 0.04));
  --sp-bg-input: rgba(255, 255, 255, 0.08);
  --sp-text: #f5fbff;
  --sp-text-muted: rgba(230, 242, 255, 0.76);
  --sp-text-soft: rgba(216, 231, 247, 0.6);
  --sp-cyan: #60edff;
  --sp-blue: #6da7ff;
  --sp-violet: #8f7bff;
  --sp-purple: #b868ff;
  --sp-pink: #ff5fd2;
  --sp-orange: #ffbe57;
  --sp-red: #ff6176;
  --sp-green: #3de28f;
  --sp-yellow: #ffe58a;
  --sp-primary: #62dbff;
  --sp-primary-hover: #8ce7ff;
  --sp-secondary: #9b77ff;
  --sp-danger: #ff6176;
  --sp-success: #45dfa0;
  --sp-border: rgba(170, 222, 255, 0.22);
  --sp-border-strong: rgba(170, 222, 255, 0.38);
  --sp-ring: rgba(96, 237, 255, 0.42);
  --sp-bg-page-gradient:
    radial-gradient(circle at 14% 16%, rgba(96, 237, 255, 0.2), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(143, 123, 255, 0.22), transparent 24rem),
    linear-gradient(180deg, rgba(6, 19, 32, 0.99), rgba(4, 11, 24, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(10, 24, 50, 0.92), rgba(5, 11, 27, 0.84));
  --sp-shell-brand-accent: #9d84ff;
  --sp-shell-nav-highlight: rgba(224, 239, 255, 0.98);
  --sp-settings-preview-bg:
    radial-gradient(circle at 18% 18%, rgba(96, 237, 255, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(7, 18, 39, 0.98), rgba(4, 11, 24, 0.98));
}

:root[data-liquid-theme="liquid_lagoon"] {
  --sp-bg-page: #041723;
  --sp-bg-panel: rgba(6, 24, 40, 0.76);
  --sp-bg-panel-strong: rgba(5, 18, 31, 0.92);
  --sp-bg-glass: linear-gradient(135deg, rgba(49, 216, 203, 0.24), rgba(33, 152, 255, 0.16) 42%, rgba(6, 30, 46, 0.78));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(51, 220, 205, 0.16), rgba(62, 158, 255, 0.11), rgba(255, 255, 255, 0.04));
  --sp-text: #f4fdff;
  --sp-text-muted: rgba(221, 245, 250, 0.75);
  --sp-text-soft: rgba(195, 225, 233, 0.6);
  --sp-cyan: #3be5d8;
  --sp-blue: #4eafff;
  --sp-violet: #5d8cff;
  --sp-purple: #6d6eff;
  --sp-pink: #ff6bb6;
  --sp-orange: #ffba47;
  --sp-red: #ff6d6d;
  --sp-green: #43dd97;
  --sp-yellow: #ffe184;
  --sp-primary: #37dbc9;
  --sp-primary-hover: #69eadc;
  --sp-secondary: #4ca4ff;
  --sp-danger: #ff6d6d;
  --sp-success: #43dd97;
  --sp-border: rgba(113, 214, 231, 0.22);
  --sp-border-strong: rgba(113, 214, 231, 0.38);
  --sp-ring: rgba(59, 229, 216, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 18%, rgba(59, 229, 216, 0.18), transparent 22rem),
    radial-gradient(circle at 82% 10%, rgba(78, 175, 255, 0.2), transparent 24rem),
    linear-gradient(180deg, rgba(4, 23, 35, 0.99), rgba(3, 14, 24, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(5, 30, 45, 0.92), rgba(3, 16, 27, 0.86));
  --sp-shell-brand-accent: #53b6ff;
  --sp-shell-nav-highlight: var(--sp-primary-hover, #69eadc);
}

:root[data-liquid-theme="liquid_sunset"] {
  --sp-bg-page: #120b1f;
  --sp-bg-panel: rgba(30, 12, 35, 0.76);
  --sp-bg-panel-strong: rgba(21, 10, 31, 0.92);
  --sp-bg-glass: linear-gradient(135deg, rgba(255, 146, 92, 0.24), rgba(241, 78, 144, 0.18) 42%, rgba(33, 12, 42, 0.8));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(255, 168, 102, 0.16), rgba(236, 90, 166, 0.12), rgba(255, 255, 255, 0.03));
  --sp-text: #fff7fb;
  --sp-text-muted: rgba(248, 223, 233, 0.76);
  --sp-text-soft: rgba(220, 188, 203, 0.58);
  --sp-cyan: #ffbf7e;
  --sp-blue: #ff8f72;
  --sp-violet: #f26be0;
  --sp-purple: #ff5cc2;
  --sp-pink: #ff5f8d;
  --sp-orange: #ffb447;
  --sp-red: #ff6672;
  --sp-green: #5be3a8;
  --sp-yellow: #ffd87b;
  --sp-primary: #ffae68;
  --sp-primary-hover: #ffc48e;
  --sp-secondary: #f26be0;
  --sp-border: rgba(243, 170, 181, 0.22);
  --sp-border-strong: rgba(243, 170, 181, 0.38);
  --sp-ring: rgba(255, 174, 104, 0.36);
  --sp-bg-page-gradient:
    radial-gradient(circle at 18% 15%, rgba(255, 174, 104, 0.16), transparent 21rem),
    radial-gradient(circle at 82% 12%, rgba(242, 107, 224, 0.22), transparent 24rem),
    linear-gradient(180deg, rgba(18, 11, 31, 0.99), rgba(11, 8, 19, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(34, 13, 41, 0.92), rgba(16, 8, 25, 0.86));
  --sp-shell-brand-accent: #ff7fc9;
  --sp-shell-nav-highlight: var(--sp-primary-hover, #ffc48e);
}

:root[data-liquid-theme="ghost"],
:root[data-liquid-theme="liquid_obsidian"] {
  --sp-bg-page: #050913;
  --sp-bg-panel: rgba(10, 15, 30, 0.76);
  --sp-bg-panel-strong: rgba(7, 12, 24, 0.94);
  --sp-bg-glass: linear-gradient(135deg, rgba(101, 133, 255, 0.2), rgba(108, 87, 198, 0.16) 42%, rgba(12, 18, 35, 0.82));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(113, 146, 255, 0.14), rgba(138, 113, 255, 0.1), rgba(255, 255, 255, 0.03));
  --sp-text: #f5f8ff;
  --sp-text-muted: rgba(215, 225, 244, 0.74);
  --sp-text-soft: rgba(180, 194, 221, 0.56);
  --sp-cyan: #7aa7ff;
  --sp-blue: #6c8fff;
  --sp-violet: #8a7cff;
  --sp-purple: #ae87ff;
  --sp-pink: #ff75d8;
  --sp-orange: #ffbf69;
  --sp-red: #ff6f86;
  --sp-green: #44da98;
  --sp-yellow: #ffe08a;
  --sp-primary: #7e9dff;
  --sp-primary-hover: #9ab1ff;
  --sp-secondary: #9c7fff;
  --sp-border: rgba(138, 171, 255, 0.2);
  --sp-border-strong: rgba(138, 171, 255, 0.36);
  --sp-ring: rgba(126, 157, 255, 0.34);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(108, 143, 255, 0.14), transparent 21rem),
    radial-gradient(circle at 84% 12%, rgba(174, 135, 255, 0.16), transparent 24rem),
    linear-gradient(180deg, rgba(5, 9, 19, 0.99), rgba(3, 7, 16, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(10, 16, 34, 0.94), rgba(4, 8, 18, 0.88));
  --sp-shell-brand-accent: #a08cff;
  --sp-shell-nav-highlight: var(--sp-primary-hover, #9ab1ff);
}

:root[data-liquid-theme="liquid_ruby"] {
  --sp-bg-page: #15090d;
  --sp-bg-panel: rgba(35, 11, 19, 0.78);
  --sp-bg-panel-strong: rgba(26, 8, 15, 0.94);
  --sp-bg-glass: linear-gradient(135deg, rgba(255, 95, 137, 0.22), rgba(195, 54, 125, 0.18) 42%, rgba(38, 11, 22, 0.84));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(255, 113, 153, 0.14), rgba(194, 78, 171, 0.1), rgba(255, 255, 255, 0.03));
  --sp-text: #fff6f9;
  --sp-text-muted: rgba(248, 219, 227, 0.74);
  --sp-text-soft: rgba(221, 184, 194, 0.56);
  --sp-cyan: #ff8c86;
  --sp-blue: #ff7a9f;
  --sp-violet: #d366ff;
  --sp-purple: #ff5baf;
  --sp-pink: #ff548e;
  --sp-orange: #ffb065;
  --sp-red: #ff5970;
  --sp-green: #58d7a2;
  --sp-yellow: #ffd77d;
  --sp-primary: #ff7b92;
  --sp-primary-hover: #ff9db0;
  --sp-secondary: #d366ff;
  --sp-border: rgba(255, 150, 170, 0.22);
  --sp-border-strong: rgba(255, 150, 170, 0.38);
  --sp-ring: rgba(255, 123, 146, 0.34);
  --sp-bg-page-gradient:
    radial-gradient(circle at 18% 18%, rgba(255, 91, 112, 0.14), transparent 20rem),
    radial-gradient(circle at 84% 12%, rgba(211, 102, 255, 0.16), transparent 24rem),
    linear-gradient(180deg, rgba(21, 9, 13, 0.99), rgba(11, 5, 8, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(36, 11, 23, 0.94), rgba(18, 7, 13, 0.88));
  --sp-shell-brand-accent: #ff84bf;
  --sp-shell-nav-highlight: var(--sp-primary-hover, #ff9db0);
}

:root[data-liquid-theme="liquid_citrine"] {
  --sp-bg-page: #15120b;
  --sp-bg-panel: rgba(34, 24, 12, 0.76);
  --sp-bg-panel-strong: rgba(24, 16, 8, 0.92);
  --sp-bg-glass: linear-gradient(135deg, rgba(255, 218, 94, 0.22), rgba(255, 168, 76, 0.16) 42%, rgba(34, 20, 8, 0.8));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(255, 218, 94, 0.14), rgba(255, 189, 102, 0.1), rgba(255, 255, 255, 0.03));
  --sp-text: #fff9ef;
  --sp-text-muted: rgba(246, 226, 194, 0.74);
  --sp-text-soft: rgba(218, 196, 162, 0.56);
  --sp-cyan: #ffd56a;
  --sp-blue: #ffbf56;
  --sp-violet: #ffaf66;
  --sp-purple: #ff9b6c;
  --sp-pink: #ff7e87;
  --sp-orange: #ffbf52;
  --sp-red: #ff7a70;
  --sp-green: #69d894;
  --sp-yellow: #ffe68e;
  --sp-primary: #ffd264;
  --sp-primary-hover: #ffe08a;
  --sp-secondary: #ffb16a;
  --sp-border: rgba(255, 212, 120, 0.22);
  --sp-border-strong: rgba(255, 212, 120, 0.38);
  --sp-ring: rgba(255, 210, 100, 0.34);
  --sp-bg-page-gradient:
    radial-gradient(circle at 18% 18%, rgba(255, 210, 100, 0.14), transparent 21rem),
    radial-gradient(circle at 80% 10%, rgba(255, 177, 106, 0.16), transparent 24rem),
    linear-gradient(180deg, rgba(21, 18, 11, 0.99), rgba(11, 9, 5, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(38, 27, 13, 0.92), rgba(18, 12, 6, 0.86));
  --sp-shell-brand-accent: #ffc872;
  --sp-shell-nav-highlight: var(--sp-primary-hover, #ffe08a);
}

:root[data-liquid-theme="liquid_morning"] {
  --sp-bg-page: #071828;
  --sp-bg-panel: rgba(8, 27, 47, 0.76);
  --sp-bg-panel-strong: rgba(5, 18, 34, 0.94);
  --sp-bg-glass: linear-gradient(135deg, rgba(99, 223, 255, 0.24), rgba(154, 139, 255, 0.15) 44%, rgba(8, 27, 51, 0.78));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(109, 225, 255, 0.15), rgba(169, 154, 255, 0.11), rgba(255, 255, 255, 0.04));
  --sp-bg-input: rgba(255, 255, 255, 0.08);
  --sp-text: #f7fcff;
  --sp-text-muted: rgba(224, 241, 251, 0.77);
  --sp-text-soft: rgba(198, 221, 237, 0.6);
  --sp-cyan: #6de1ff;
  --sp-blue: #72b8ff;
  --sp-violet: #a99aff;
  --sp-purple: #c58bff;
  --sp-pink: #f789cf;
  --sp-orange: #ffc46b;
  --sp-red: #ff7188;
  --sp-green: #55dda4;
  --sp-yellow: #ffe79a;
  --sp-primary: #73dfff;
  --sp-primary-hover: #a3ebff;
  --sp-secondary: #a99aff;
  --sp-danger: #ff7188;
  --sp-success: #55dda4;
  --sp-border: rgba(151, 219, 255, 0.24);
  --sp-border-strong: rgba(164, 225, 255, 0.42);
  --sp-ring: rgba(109, 225, 255, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(109, 225, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(169, 154, 255, 0.18), transparent 24rem),
    linear-gradient(180deg, rgba(7, 24, 40, 0.99), rgba(4, 13, 27, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(10, 32, 55, 0.94), rgba(5, 17, 33, 0.88));
  --sp-shell-brand-accent: #b2a5ff;
  --sp-shell-nav-highlight: #d8f5ff;
  --sp-theme-hero-image: url("/img/themes/liquid/morning-city.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_afternoon"] {
  --sp-bg-page: #031a2c;
  --sp-bg-panel: rgba(4, 31, 53, 0.76);
  --sp-bg-panel-strong: rgba(3, 21, 40, 0.94);
  --sp-bg-glass: linear-gradient(135deg, rgba(45, 210, 255, 0.24), rgba(37, 132, 255, 0.17) 44%, rgba(4, 31, 56, 0.8));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(55, 213, 255, 0.16), rgba(44, 142, 255, 0.12), rgba(255, 255, 255, 0.04));
  --sp-bg-input: rgba(255, 255, 255, 0.08);
  --sp-text: #f4fcff;
  --sp-text-muted: rgba(218, 242, 252, 0.77);
  --sp-text-soft: rgba(188, 218, 234, 0.6);
  --sp-cyan: #37d5ff;
  --sp-blue: #2c8eff;
  --sp-violet: #697dff;
  --sp-purple: #8a6dff;
  --sp-pink: #ef6fc2;
  --sp-orange: #ffb85d;
  --sp-red: #ff687e;
  --sp-green: #42daa0;
  --sp-yellow: #ffe286;
  --sp-primary: #36cfff;
  --sp-primary-hover: #6ee0ff;
  --sp-secondary: #2c8eff;
  --sp-danger: #ff687e;
  --sp-success: #42daa0;
  --sp-border: rgba(99, 200, 255, 0.24);
  --sp-border-strong: rgba(112, 207, 255, 0.42);
  --sp-ring: rgba(55, 213, 255, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(55, 213, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(44, 142, 255, 0.2), transparent 24rem),
    linear-gradient(180deg, rgba(3, 24, 43, 0.99), rgba(2, 14, 29, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(4, 35, 61, 0.94), rgba(2, 18, 36, 0.88));
  --sp-shell-brand-accent: #55d8ff;
  --sp-shell-nav-highlight: #bdefff;
  --sp-theme-hero-image: url("/img/themes/liquid/afternoon-city.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_evening"] {
  --sp-bg-page: #210b1d;
  --sp-bg-panel: rgba(50, 14, 43, 0.78);
  --sp-bg-panel-strong: rgba(34, 9, 30, 0.94);
  --sp-bg-glass: linear-gradient(135deg, rgba(255, 165, 78, 0.24), rgba(229, 69, 164, 0.18) 44%, rgba(48, 12, 46, 0.82));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(255, 169, 82, 0.16), rgba(232, 75, 168, 0.12), rgba(255, 255, 255, 0.035));
  --sp-bg-input: rgba(255, 255, 255, 0.08);
  --sp-text: #fff8fb;
  --sp-text-muted: rgba(249, 224, 233, 0.77);
  --sp-text-soft: rgba(225, 192, 205, 0.59);
  --sp-cyan: #ffc27a;
  --sp-blue: #f08a89;
  --sp-violet: #db68d4;
  --sp-purple: #e84ba8;
  --sp-pink: #ff668d;
  --sp-orange: #ffa952;
  --sp-red: #ff5e6f;
  --sp-green: #58d99e;
  --sp-yellow: #ffdb7d;
  --sp-primary: #ffa552;
  --sp-primary-hover: #ffc17d;
  --sp-secondary: #e84ba8;
  --sp-danger: #ff5e6f;
  --sp-success: #58d99e;
  --sp-border: rgba(255, 145, 158, 0.25);
  --sp-border-strong: rgba(255, 157, 170, 0.43);
  --sp-ring: rgba(255, 169, 82, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(255, 169, 82, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(232, 75, 168, 0.2), transparent 24rem),
    linear-gradient(180deg, rgba(31, 11, 34, 0.99), rgba(16, 7, 23, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(55, 16, 47, 0.94), rgba(28, 8, 27, 0.88));
  --sp-shell-brand-accent: #ffb368;
  --sp-shell-nav-highlight: #ffd0a2;
  --sp-theme-hero-image: url("/img/themes/liquid/evening-city.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_night"] {
  --sp-bg-page: #03091b;
  --sp-bg-panel: rgba(7, 16, 43, 0.78);
  --sp-bg-panel-strong: rgba(4, 10, 30, 0.95);
  --sp-bg-glass: linear-gradient(135deg, rgba(55, 113, 255, 0.22), rgba(119, 77, 235, 0.18) 44%, rgba(6, 13, 39, 0.84));
  --sp-bg-glass-soft: linear-gradient(135deg, rgba(61, 127, 255, 0.14), rgba(133, 92, 255, 0.12), rgba(255, 255, 255, 0.03));
  --sp-bg-input: rgba(255, 255, 255, 0.07);
  --sp-text: #f5f8ff;
  --sp-text-muted: rgba(214, 225, 249, 0.76);
  --sp-text-soft: rgba(179, 195, 229, 0.58);
  --sp-cyan: #6ba6ff;
  --sp-blue: #3d7fff;
  --sp-violet: #855cff;
  --sp-purple: #a35dff;
  --sp-pink: #e86ed5;
  --sp-orange: #ffb86a;
  --sp-red: #ff6b85;
  --sp-green: #48d79b;
  --sp-yellow: #ffe18a;
  --sp-primary: #4f86ff;
  --sp-primary-hover: #7ba6ff;
  --sp-secondary: #855cff;
  --sp-danger: #ff6b85;
  --sp-success: #48d79b;
  --sp-border: rgba(111, 144, 255, 0.23);
  --sp-border-strong: rgba(126, 157, 255, 0.41);
  --sp-ring: rgba(61, 127, 255, 0.38);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(61, 127, 255, 0.18), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(133, 92, 255, 0.18), transparent 24rem),
    linear-gradient(180deg, rgba(3, 9, 27, 0.99), rgba(2, 5, 17, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(7, 17, 48, 0.95), rgba(3, 8, 25, 0.9));
  --sp-shell-brand-accent: #8d6cff;
  --sp-shell-nav-highlight: #b8cbff;
  --sp-theme-hero-image: url("/img/themes/liquid/night-city.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_aurora"] {
  --sp-theme-hero-image: url("/img/themes/liquid/aurora-polar.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_lagoon"] {
  --sp-theme-hero-image: url("/img/themes/liquid/electric-lagoon.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_sunset"] {
  --sp-theme-hero-image: url("/img/themes/liquid/neon-sunset.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_obsidian"] {
  --sp-theme-hero-image: url("/img/themes/liquid/lunar-obsidian.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_ruby"] {
  --sp-theme-hero-image: url("/img/themes/liquid/night-ruby.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_citrine"] {
  --sp-theme-hero-image: url("/img/themes/liquid/solar-citrine.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_azure"] {
  --sp-theme-hero-image: url("/img/themes/liquid/azure-white.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_peach"] {
  --sp-theme-hero-image: url("/img/themes/liquid/peach-light.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_mint"] {
  --sp-theme-hero-image: url("/img/themes/liquid/pastel-mint.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_roseline"] {
  --sp-theme-hero-image: url("/img/themes/liquid/powder-rose.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_lilac"] {
  --sp-theme-hero-image: url("/img/themes/liquid/soft-lavender.webp?v=anime-cel-20260723");
}

:root:is(
  [data-liquid-theme="liquid_neon_city"],
  [data-liquid-theme="liquid_nature_serenity"],
  [data-liquid-theme="liquid_winter_fairy"],
  [data-liquid-theme="liquid_sunset_beach"],
  [data-liquid-theme="liquid_industrial"]
) {
  --sp-bg-glass:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sp-primary) 24%, transparent),
      color-mix(in srgb, var(--sp-secondary) 18%, transparent) 44%,
      color-mix(in srgb, var(--sp-bg-panel-strong) 82%, transparent)
    );
  --sp-bg-glass-soft:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sp-primary) 14%, transparent),
      color-mix(in srgb, var(--sp-secondary) 11%, transparent),
      rgba(255, 255, 255, 0.035)
    );
  --sp-bg-input: color-mix(in srgb, var(--sp-bg-panel-strong) 74%, white 8%);
  --sp-text: #fff9ff;
  --sp-text-muted: rgba(241, 232, 248, 0.78);
  --sp-text-soft: rgba(218, 205, 229, 0.6);
  --sp-shell-footer-bg:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sp-secondary) 20%, transparent), transparent 22rem),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--sp-bg-page) 96%, black 4%));
  --sp-shell-pill-bg: color-mix(in srgb, var(--sp-bg-panel-strong) 76%, white 8%);
  --sp-shell-pill-bg-hover: color-mix(in srgb, var(--sp-bg-panel-strong) 66%, white 14%);
  --sp-shell-icon-bg: color-mix(in srgb, var(--sp-bg-panel-strong) 82%, transparent);
  --sp-shell-icon-border: var(--sp-border);
  --sp-settings-preview-bg: var(--sp-bg-page-gradient);
  --sp-selection-theme-overlay:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sp-bg-page) 72%, transparent),
      color-mix(in srgb, var(--sp-bg-page) 34%, transparent) 46%,
      color-mix(in srgb, var(--sp-bg-page) 18%, transparent)
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sp-bg-page) 10%, transparent),
      color-mix(in srgb, var(--sp-bg-page) 26%, transparent) 58%,
      color-mix(in srgb, var(--sp-bg-page) 92%, transparent)
    );
}

:root[data-liquid-theme="liquid_neon_city"] {
  --sp-bg-page: #13051d;
  --sp-bg-panel: rgba(33, 8, 45, 0.76);
  --sp-bg-panel-strong: rgba(21, 6, 31, 0.94);
  --sp-cyan: #5fe8ff;
  --sp-blue: #6f83ff;
  --sp-violet: #9460ff;
  --sp-purple: #c34dff;
  --sp-pink: #ff4fd2;
  --sp-orange: #ff9f68;
  --sp-red: #ff5f87;
  --sp-green: #4de0a1;
  --sp-yellow: #ffe27f;
  --sp-primary: #ed4cff;
  --sp-primary-hover: #ff7de2;
  --sp-secondary: #765cff;
  --sp-danger: #ff5f87;
  --sp-success: #4de0a1;
  --sp-border: rgba(244, 149, 255, 0.24);
  --sp-border-strong: rgba(244, 149, 255, 0.42);
  --sp-ring: rgba(237, 76, 255, 0.42);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 16%, rgba(255, 66, 214, 0.26), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(126, 76, 255, 0.24), transparent 25rem),
    linear-gradient(180deg, rgba(19, 5, 29, 0.99), rgba(8, 3, 18, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(32, 7, 45, 0.94), rgba(13, 4, 24, 0.88));
  --sp-shell-brand-accent: #ff65d9;
  --sp-shell-nav-highlight: #ffc7f2;
  --sp-theme-hero-image: url("/img/themes/liquid/neon-city.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_nature_serenity"] {
  --sp-bg-page: #07170e;
  --sp-bg-panel: rgba(11, 34, 19, 0.76);
  --sp-bg-panel-strong: rgba(7, 24, 13, 0.94);
  --sp-cyan: #73d9ba;
  --sp-blue: #62bda3;
  --sp-violet: #a3c57a;
  --sp-purple: #99bd64;
  --sp-pink: #d79a92;
  --sp-orange: #d9ad5c;
  --sp-red: #ed6f70;
  --sp-green: #72d15d;
  --sp-yellow: #d9db6a;
  --sp-primary: #76d35f;
  --sp-primary-hover: #a0ed7b;
  --sp-secondary: #c3cf59;
  --sp-danger: #ed6f70;
  --sp-success: #72d15d;
  --sp-border: rgba(158, 218, 116, 0.24);
  --sp-border-strong: rgba(174, 226, 126, 0.42);
  --sp-ring: rgba(118, 211, 95, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 14% 16%, rgba(116, 211, 92, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(195, 207, 78, 0.18), transparent 25rem),
    linear-gradient(180deg, rgba(7, 23, 14, 0.99), rgba(4, 13, 9, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(12, 38, 21, 0.94), rgba(5, 19, 11, 0.88));
  --sp-shell-brand-accent: #b7dd68;
  --sp-shell-nav-highlight: #d9ef9a;
  --sp-theme-hero-image: url("/img/themes/liquid/nature-serenity.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_winter_fairy"] {
  --sp-bg-page: #071628;
  --sp-bg-panel: rgba(8, 29, 52, 0.78);
  --sp-bg-panel-strong: rgba(5, 19, 38, 0.94);
  --sp-cyan: #67dcff;
  --sp-blue: #69aefe;
  --sp-violet: #8c9eff;
  --sp-purple: #9d89ff;
  --sp-pink: #d5a5f5;
  --sp-orange: #f0b46d;
  --sp-red: #ff758d;
  --sp-green: #5fdaa7;
  --sp-yellow: #f6e59b;
  --sp-primary: #71d8ff;
  --sp-primary-hover: #a5eaff;
  --sp-secondary: #859bff;
  --sp-danger: #ff758d;
  --sp-success: #5fdaa7;
  --sp-border: rgba(137, 215, 255, 0.24);
  --sp-border-strong: rgba(151, 221, 255, 0.42);
  --sp-ring: rgba(113, 216, 255, 0.4);
  --sp-bg-page-gradient:
    radial-gradient(circle at 14% 16%, rgba(100, 220, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 10%, rgba(132, 151, 255, 0.22), transparent 25rem),
    linear-gradient(180deg, rgba(7, 22, 40, 0.99), rgba(3, 11, 24, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(8, 32, 58, 0.94), rgba(4, 15, 31, 0.88));
  --sp-shell-brand-accent: #86deff;
  --sp-shell-nav-highlight: #d0f4ff;
  --sp-theme-hero-image: url("/img/themes/liquid/winter-fairy.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_sunset_beach"] {
  --sp-bg-page: #210b08;
  --sp-bg-panel: rgba(52, 18, 13, 0.78);
  --sp-bg-panel-strong: rgba(36, 11, 10, 0.94);
  --sp-cyan: #ffc078;
  --sp-blue: #f58a67;
  --sp-violet: #d76886;
  --sp-purple: #e45c78;
  --sp-pink: #ff6170;
  --sp-orange: #ff8b46;
  --sp-red: #ff555d;
  --sp-green: #62d995;
  --sp-yellow: #ffd376;
  --sp-primary: #ff8b46;
  --sp-primary-hover: #ffad70;
  --sp-secondary: #ff595f;
  --sp-danger: #ff555d;
  --sp-success: #62d995;
  --sp-border: rgba(255, 151, 104, 0.25);
  --sp-border-strong: rgba(255, 160, 116, 0.43);
  --sp-ring: rgba(255, 139, 70, 0.42);
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 14%, rgba(255, 139, 70, 0.24), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(255, 82, 91, 0.2), transparent 25rem),
    linear-gradient(180deg, rgba(33, 11, 8, 0.99), rgba(18, 6, 8, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(57, 18, 13, 0.94), rgba(27, 8, 8, 0.88));
  --sp-shell-brand-accent: #ff9f57;
  --sp-shell-nav-highlight: #ffd09d;
  --sp-theme-hero-image: url("/img/themes/liquid/sunset-beach.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme="liquid_industrial"] {
  --sp-bg-page: #170f0a;
  --sp-bg-panel: rgba(42, 27, 16, 0.8);
  --sp-bg-panel-strong: rgba(29, 18, 11, 0.95);
  --sp-cyan: #d6a567;
  --sp-blue: #b58051;
  --sp-violet: #a76f48;
  --sp-purple: #9a603e;
  --sp-pink: #c2785c;
  --sp-orange: #ce8a49;
  --sp-red: #d36552;
  --sp-green: #7bb77a;
  --sp-yellow: #e1bc77;
  --sp-primary: #c9894c;
  --sp-primary-hover: #e3aa6a;
  --sp-secondary: #e0b06f;
  --sp-danger: #d36552;
  --sp-success: #7bb77a;
  --sp-border: rgba(213, 164, 104, 0.25);
  --sp-border-strong: rgba(224, 176, 111, 0.43);
  --sp-ring: rgba(201, 137, 76, 0.42);
  --sp-bg-page-gradient:
    radial-gradient(circle at 15% 16%, rgba(204, 137, 73, 0.22), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(224, 176, 111, 0.14), transparent 25rem),
    linear-gradient(180deg, rgba(23, 15, 10, 0.99), rgba(11, 7, 5, 0.99));
  --sp-shell-header-bg: linear-gradient(180deg, rgba(43, 27, 16, 0.95), rgba(21, 13, 8, 0.9));
  --sp-shell-brand-accent: #d7a15e;
  --sp-shell-nav-highlight: #f0c98f;
  --sp-theme-hero-image: url("/img/themes/liquid/industrial.webp?v=anime-cel-20260723");
}

:root[data-liquid-theme^="liquid_"] body.selection-renewal-shell.selection-renewal-shell {
  background-color: var(--sp-bg-page) !important;
  background-image:
    var(--sp-selection-theme-overlay, linear-gradient(180deg, rgba(3, 8, 20, 0.12), rgba(3, 8, 20, 0.82))),
    var(--sp-theme-hero-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

:root[data-liquid-theme^="liquid_"] .selection-stage__scene,
:root[data-liquid-theme^="liquid_"] .renewal-clean-hero-parallax {
  background: var(--sp-theme-hero-image) center / cover no-repeat !important;
}

:root[data-liquid-theme^="liquid_"] .renewal-clean-hero {
  background: var(--sp-bg-page) !important;
}

:root[data-liquid-theme^="liquid_"] :is(.selection-stage__scene, .renewal-clean-hero-parallax)::after {
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--sp-bg-page) 44%, transparent) 52%,
      color-mix(in srgb, var(--sp-bg-page) 86%, transparent) 80%,
      var(--sp-bg-page)
    ) !important;
}

:root:is(
  [data-liquid-theme="liquid_neon_city"],
  [data-liquid-theme="liquid_nature_serenity"],
  [data-liquid-theme="liquid_winter_fairy"],
  [data-liquid-theme="liquid_sunset_beach"],
  [data-liquid-theme="liquid_industrial"]
) :is(.selection-stage__overlay--global, .renewal-clean-hero-overlay--global) {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sp-bg-page) 58%, transparent),
      color-mix(in srgb, var(--sp-bg-page) 24%, transparent) 58%,
      transparent
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sp-bg-page) 22%, transparent),
      color-mix(in srgb, var(--sp-bg-page) 8%, transparent) 72%,
      color-mix(in srgb, var(--sp-bg-page) 82%, transparent)
    ) !important;
}

:root:is(
  [data-liquid-theme="liquid_neon_city"],
  [data-liquid-theme="liquid_nature_serenity"],
  [data-liquid-theme="liquid_winter_fairy"],
  [data-liquid-theme="liquid_sunset_beach"],
  [data-liquid-theme="liquid_industrial"]
) :is(.selection-stage__overlay--left, .renewal-clean-hero-overlay--left) {
  background:
    radial-gradient(circle at 16% 28%, color-mix(in srgb, var(--sp-secondary) 18%, transparent), transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--sp-bg-page) 72%, transparent), color-mix(in srgb, var(--sp-bg-page) 30%, transparent) 38%, transparent 64%) !important;
}

:root[data-liquid-theme^="liquid_"] :is(.selection-stage__layer, .renewal-clean-hero-layer) {
  display: none !important;
}

:root[data-liquid-theme="liquid_azure"],
:root[data-liquid-theme="liquid_peach"],
:root[data-liquid-theme="liquid_mint"],
:root[data-liquid-theme="liquid_roseline"],
:root[data-liquid-theme="liquid_lilac"] {
  --sp-text-dark: #101b2d;
  --sp-bg-panel: rgba(255, 255, 255, 0.72);
  --sp-bg-panel-strong: rgba(255, 255, 255, 0.9);
  --sp-bg-glass: linear-gradient(135deg, color-mix(in srgb, var(--sp-primary, #4f9df2) 18%, transparent), color-mix(in srgb, var(--sp-secondary, #b7d7ff) 16%, transparent) 42%, rgba(255, 255, 255, 0.72));
  --sp-bg-glass-soft: linear-gradient(135deg, color-mix(in srgb, var(--sp-primary, #4f9df2) 10%, transparent), color-mix(in srgb, var(--sp-secondary, #b7d7ff) 14%, transparent), rgba(255, 255, 255, 0.62));
  --sp-bg-input: rgba(255, 255, 255, 0.74);
  --sp-text: #142033;
  --sp-text-muted: rgba(36, 51, 76, 0.76);
  --sp-text-soft: rgba(55, 71, 98, 0.58);
  --sp-red: #d94862;
  --sp-green: #2d9f70;
  --sp-yellow: #d39121;
  --sp-danger: #d94862;
  --sp-success: #2d9f70;
  --sp-border: rgba(76, 104, 150, 0.2);
  --sp-border-strong: rgba(69, 101, 153, 0.36);
  --sp-ring: color-mix(in srgb, var(--sp-primary, #4f9df2) 32%, transparent);
  --sp-link: color-mix(in srgb, var(--sp-primary, #4f9df2) 80%, #102033 20%);
  --sp-link-hover: color-mix(in srgb, var(--sp-secondary, #b7d7ff) 44%, #102033 56%);
  --sp-link-underline: color-mix(in srgb, var(--sp-primary, #4f9df2) 36%, transparent);
  --sp-shell-grid:
    linear-gradient(90deg, rgba(66, 89, 123, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(66, 89, 123, 0.052) 1px, transparent 1px);
  --sp-shell-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.78));
  --sp-shell-footer-bg:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sp-secondary, #b7d7ff) 28%, transparent), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 251, 255, 0.94));
  --sp-shell-pill-bg: rgba(255, 255, 255, 0.66);
  --sp-shell-pill-bg-hover: rgba(255, 255, 255, 0.88);
  --sp-shell-brand-accent: var(--sp-primary, #4f9df2);
  --sp-shell-nav-highlight: color-mix(in srgb, var(--sp-primary, #4f9df2) 78%, #102033 22%);
  --sp-shell-icon-bg: rgba(255, 255, 255, 0.7);
  --sp-shell-icon-border: rgba(76, 104, 150, 0.22);
  --sp-footer-studio-mark-filter:
    invert(1)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62))
    drop-shadow(0 14px 24px color-mix(in srgb, var(--sp-primary, #4f9df2) 14%, transparent));
  --sp-panel-gradient: var(--sp-bg-glass);
  --sp-panel-gradient-soft: var(--sp-bg-glass-soft);
  --sp-outline-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--sp-secondary, #b7d7ff) 16%, transparent));
  --sp-primary-gradient: linear-gradient(135deg, var(--sp-primary, #4f9df2), color-mix(in srgb, var(--sp-primary-hover, #4f9df2) 68%, #102033 32%));
  --sp-tab-surface: rgba(255, 255, 255, 0.58);
  --sp-tab-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--sp-primary, #4f9df2) 82%, white 18%), color-mix(in srgb, var(--sp-secondary, #b7d7ff) 76%, white 24%));
  --sp-tab-active-text: #102033;
  --sp-tab-active-icon: #102033;
  --sp-tab-active-marker: color-mix(in srgb, var(--sp-primary, #4f9df2) 50%, transparent);
  --sp-select-background: rgba(255, 255, 255, 0.76);
  --sp-select-background-hover: color-mix(in srgb, white 78%, var(--sp-secondary, #b7d7ff) 22%);
  --sp-select-option-background: #ffffff;
  --sp-select-option-hover: color-mix(in srgb, white 72%, var(--sp-secondary, #b7d7ff) 28%);
  --sp-select-option-selected: color-mix(in srgb, white 58%, var(--sp-primary, #4f9df2) 42%);
  --sp-select-option-selected-background: var(--sp-select-option-selected);
  --sp-select-option-selected-text: #102033;
  --sp-table-bg: rgba(255, 255, 255, 0.62);
  --sp-table-head-bg: rgba(255, 255, 255, 0.82);
  --sp-modal-bg: rgba(255, 255, 255, 0.94);
  --sp-accordion-bg: rgba(255, 255, 255, 0.68);
  --sp-badge-bg: color-mix(in srgb, white 62%, var(--sp-secondary, #b7d7ff) 20%);
  --sp-settings-preview-bg: var(--sp-bg-page-gradient);
}

:root[data-liquid-theme="liquid_azure"] {
  --sp-bg-page: #f8fcff;
  --sp-cyan: #4fb3ff;
  --sp-blue: #357ed4;
  --sp-violet: #86a8ff;
  --sp-purple: #9d8cff;
  --sp-pink: #d881b6;
  --sp-orange: #e8a45e;
  --sp-primary: #357ed4;
  --sp-primary-hover: #4b9af2;
  --sp-secondary: #8fc7ff;
  --sp-bg-page-gradient:
    radial-gradient(circle at 14% 14%, rgba(83, 162, 255, 0.26), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgba(190, 222, 255, 0.34), transparent 24rem),
    linear-gradient(180deg, rgba(248, 252, 255, 0.99), rgba(226, 241, 255, 0.99));
}

:root[data-liquid-theme="liquid_peach"] {
  --sp-bg-page: #fffaf5;
  --sp-cyan: #f2a65f;
  --sp-blue: #d48642;
  --sp-violet: #f0b270;
  --sp-purple: #e99569;
  --sp-pink: #df8090;
  --sp-orange: #db7b2a;
  --sp-primary: #d97225;
  --sp-primary-hover: #ed8e3f;
  --sp-secondary: #ffc27e;
  --sp-bg-page-gradient:
    radial-gradient(circle at 18% 14%, rgba(255, 178, 104, 0.25), transparent 22rem),
    radial-gradient(circle at 84% 16%, rgba(255, 222, 181, 0.36), transparent 24rem),
    linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(255, 238, 216, 0.99));
}

:root[data-liquid-theme="liquid_mint"] {
  --sp-bg-page: #f8fffb;
  --sp-cyan: #49bfa3;
  --sp-blue: #48a9b7;
  --sp-violet: #8fcfc2;
  --sp-purple: #7fc7b6;
  --sp-pink: #dd89aa;
  --sp-orange: #d8a354;
  --sp-primary: #268f76;
  --sp-primary-hover: #3db49a;
  --sp-secondary: #92d9c6;
  --sp-bg-page-gradient:
    radial-gradient(circle at 15% 14%, rgba(104, 219, 188, 0.24), transparent 22rem),
    radial-gradient(circle at 84% 14%, rgba(174, 226, 214, 0.32), transparent 24rem),
    linear-gradient(180deg, rgba(249, 255, 252, 0.99), rgba(225, 248, 239, 0.99));
}

:root[data-liquid-theme="liquid_roseline"] {
  --sp-bg-page: #fffafd;
  --sp-cyan: #d76f94;
  --sp-blue: #c86688;
  --sp-violet: #e3a2ca;
  --sp-purple: #d985b4;
  --sp-pink: #c64f77;
  --sp-orange: #de9a66;
  --sp-primary: #bf5578;
  --sp-primary-hover: #db7598;
  --sp-secondary: #f0a6c2;
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 14%, rgba(255, 151, 188, 0.24), transparent 22rem),
    radial-gradient(circle at 84% 18%, rgba(255, 210, 226, 0.38), transparent 24rem),
    linear-gradient(180deg, rgba(255, 250, 253, 0.99), rgba(255, 231, 239, 0.99));
}

:root[data-liquid-theme="liquid_lilac"] {
  --sp-bg-page: #fcfaff;
  --sp-cyan: #8572da;
  --sp-blue: #7163c7;
  --sp-violet: #8069d9;
  --sp-purple: #977fe8;
  --sp-pink: #d08ac8;
  --sp-orange: #dba26d;
  --sp-primary: #745ac8;
  --sp-primary-hover: #8f76e6;
  --sp-secondary: #b7a7ff;
  --sp-bg-page-gradient:
    radial-gradient(circle at 16% 14%, rgba(169, 148, 255, 0.24), transparent 22rem),
    radial-gradient(circle at 86% 16%, rgba(219, 205, 255, 0.38), transparent 24rem),
    linear-gradient(180deg, rgba(252, 250, 255, 0.99), rgba(235, 229, 255, 0.99));
}

html[data-liquid-theme],
body[data-liquid-theme] {
  color: var(--sp-text, #f7fbff);
}

body.portal-home-renewal,
body.game-renewal-shell,
body.admin-renewal-shell,
body.selection-renewal-shell,
body.selection-character-create-shell,
body.settings-theme-preview-page {
  background-color: var(--sp-bg-page, #050a16);
  background-image: var(--sp-bg-page-gradient);
  color: var(--sp-text, #f7fbff);
}

body.portal-home-renewal #content.page-content,
body.admin-renewal-shell #content.page-content,
body.selection-renewal-shell,
body.selection-character-create-shell {
  background: transparent;
}

:root[data-liquid-theme] body.day_v2,
:root[data-liquid-theme] body.game-shell-layout,
:root[data-liquid-theme] body.game-renewal-shell,
:root[data-liquid-theme] body.admin-renewal-shell,
:root[data-liquid-theme] body.settings-renewal-shell {
  background-color: var(--sp-bg-page, #050a16) !important;
  background-image: var(--sp-bg-page-gradient) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

:root[data-liquid-theme] body.day_v2::before,
:root[data-liquid-theme] body.settings-renewal-shell::before {
  display: none !important;
}

:root[data-liquid-theme] body.day_v2 .scroll-bg,
:root[data-liquid-theme] body.settings-renewal-shell .scroll-bg {
  background:
    var(--sp-shell-grid),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  background-size: 56px 56px, auto;
}

:root[data-liquid-theme] body.day_v2 div.insideSoft_stereopoly_v2,
:root[data-liquid-theme] body.day_v2 div.insideSoft_stereopoly,
:root[data-liquid-theme] body.settings-renewal-shell div.insideSoft_stereopoly_v2 {
  background: transparent !important;
  background-size: auto !important;
}

:root[data-liquid-theme] body.day_v2 .insideContent > header.top,
:root[data-liquid-theme] body.settings-renewal-shell .insideContent > header.top {
  padding: 16px 20px;
  border: 1px solid var(--sp-border-strong, rgba(170, 207, 255, 0.38));
  border-radius: var(--sp-radius-xl, 2rem);
  background: var(--sp-shell-header-bg);
  box-shadow: var(--sp-shadow-glow, 0 18px 50px rgba(67, 103, 255, 0.18));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

:root[data-liquid-theme] body.day_v2 .insideContent > header.top span,
:root[data-liquid-theme] body.day_v2 .insideContent > header.top a,
:root[data-liquid-theme] body.settings-renewal-shell .insideContent > header.top span,
:root[data-liquid-theme] body.settings-renewal-shell .insideContent > header.top a {
  color: var(--sp-shell-nav-highlight) !important;
}

:root[data-liquid-theme] body.day_v2 div.footerSoft_stereopoly,
:root[data-liquid-theme] body.settings-renewal-shell div.footerSoft_stereopoly {
  height: 340px;
  margin-left: 0;
  background: var(--sp-shell-footer-bg) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}

:root[data-liquid-theme] body.day_v2 .footerContent,
:root[data-liquid-theme] body.settings-renewal-shell .footerContent {
  padding-top: 240px !important;
}

:root[data-liquid-theme] body.day_v2 .footer-links a,
:root[data-liquid-theme] body.settings-renewal-shell .footer-links a {
  color: var(--sp-text, #f7fbff);
}

body.settings-theme-preview-page .btn,
body.settings-theme-preview-page .box,
body.settings-theme-preview-page .card {
  font-family: inherit;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean {
  --renewal-bg: var(--sp-bg-page);
  --renewal-surface: var(--sp-bg-panel);
  --renewal-surface-strong: var(--sp-bg-panel-strong);
  --renewal-border: var(--sp-border);
  --renewal-text: var(--sp-text);
  --renewal-muted: var(--sp-text-muted);
  --renewal-cyan: var(--sp-cyan);
  --renewal-violet: var(--sp-violet);
  --renewal-magenta: var(--sp-pink);
  color: var(--sp-text) !important;
  background: transparent !important;
  font-family: var(--sp-font-body, "Montserrat", sans-serif) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, section, article, header, footer, div, span, strong, em, small, label, input, textarea, select, button, a) {
  font-family: inherit !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-header {
  background: var(--sp-shell-header-bg) !important;
  border-bottom: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-logo-word {
  color: var(--sp-text, #f7fbff) !important;
  font-family: var(--sp-font-display, var(--sp-font-title, sans-serif)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-logo-poly {
  color: var(--sp-shell-brand-accent, var(--sp-secondary, var(--sp-primary, #65e7ff))) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-logo-subtitle {
  color: var(--sp-text-muted, rgba(247, 251, 255, 0.72)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-nav a::after,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-nav a::after {
  background: var(--sp-tab-active-bg) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-nav a:hover,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-nav a.active,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-nav a:hover,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-nav a.active {
  color: var(--sp-shell-nav-highlight, rgba(226, 205, 255, 0.96)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-btn {
  border: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-shell-pill-bg, rgba(255, 255, 255, 0.06)) !important;
  box-shadow: var(--sp-shadow-sm, 0 10px 24px rgba(0, 0, 0, 0.16)) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-btn--primary {
  border-color: transparent !important;
  background: var(--sp-primary-gradient) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-btn--outline {
  background: var(--sp-outline-surface) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-icon-action,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-hamburger {
  border-color: var(--sp-shell-icon-border, rgba(180, 210, 255, 0.18)) !important;
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-shell-icon-bg, rgba(8, 16, 34, 0.58)) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-shell-action.is-active {
  border-color: var(--sp-border-strong, rgba(170, 207, 255, 0.38)) !important;
  background: var(--sp-panel-gradient) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-backdrop {
  background: color-mix(in srgb, var(--sp-bg-page, #050a16) 68%, transparent) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-links--responsive {
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-bg-panel-strong, rgba(8, 15, 34, 0.92)) !important;
  border-color: var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-close,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-dropdown-toggle {
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-shell-pill-bg, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-drawer-action {
  border: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-panel-gradient-soft) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean.renewal-clean .renewal-clean-footer {
  border-top: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  background: var(--sp-shell-footer-bg), var(--sp-bg-panel-strong, rgba(8, 15, 34, 0.92)) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-links a,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-socials a {
  color: var(--sp-text-muted, rgba(247, 251, 255, 0.72)) !important;
}

body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-links a:hover,
body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell)[data-liquid-theme] .renewal-clean .renewal-clean-footer-socials a:hover {
  color: var(--sp-text, #f7fbff) !important;
}

/* Root-scoped bridge: the selected Liquid Glass theme is carried by html/:root in most shells. */
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) {
  background-color: var(--sp-bg-page, #050a16) !important;
  background-image: var(--sp-bg-page-gradient) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: var(--sp-text, #f7fbff) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) #content.page-content,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-shell-layout,
:root[data-liquid-theme] body:is(.selection-renewal-shell, .selection-character-create-shell) #selection-shell-root {
  --renewal-bg: var(--sp-bg-page, #050a16);
  --renewal-surface: var(--sp-bg-panel, rgba(9, 18, 38, 0.78));
  --renewal-surface-strong: var(--sp-bg-panel-strong, rgba(7, 15, 32, 0.9));
  --renewal-border: var(--sp-border, rgba(215, 229, 255, 0.17));
  --renewal-text: var(--sp-text, #f8fbff);
  --renewal-muted: var(--sp-text-muted, rgba(226, 236, 255, 0.76));
  --renewal-cyan: var(--sp-primary, #63edff);
  --renewal-violet: var(--sp-secondary, var(--sp-primary-hover, #8ce7ff));
  --renewal-magenta: var(--sp-pink, #d83be8);
  color: var(--sp-text, #f7fbff) !important;
  background-color: transparent !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean {
  background: transparent !important;
  font-family: var(--sp-font-body, "Montserrat", sans-serif) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, section, article, header, footer, div, span, strong, em, small, label, input, textarea, select, button, a) {
  font-family: inherit !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-header {
  border-bottom: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  background: var(--sp-shell-header-bg, linear-gradient(180deg, #071225 0%, #050a16 100%)) !important;
  box-shadow: 0 20px 48px color-mix(in srgb, var(--sp-bg-page, #050a16) 34%, transparent) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a {
  color: var(--sp-text-muted, rgba(237, 244, 255, 0.82)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a::after,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a::after {
  background: var(--sp-tab-active-bg, var(--sp-primary-gradient)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a:hover,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a.active,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a:hover,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a.active {
  color: var(--sp-shell-nav-highlight, var(--sp-primary-hover, rgba(226, 205, 255, 0.96))) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a.active .renewal-clean-nav-icon,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-nav a:hover .renewal-clean-nav-icon,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a.active .renewal-clean-nav-icon,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-drawer-nav a:hover .renewal-clean-nav-icon {
  color: inherit !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sp-shell-nav-highlight, #c774ff) 34%, transparent)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-btn,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-icon-action,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-hamburger {
  border-color: var(--sp-border, rgba(180, 210, 255, 0.18)) !important;
  color: var(--sp-text, #f7fbff) !important;
  background: var(--sp-shell-pill-bg, rgba(8, 16, 34, 0.58)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-btn--primary {
  border-color: transparent !important;
  background: var(--sp-primary-gradient, linear-gradient(135deg, var(--sp-primary, #58e6ff), var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)))) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-btn--outline {
  background: var(--sp-outline-surface, var(--sp-shell-pill-bg, rgba(255, 255, 255, 0.06))) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean.renewal-clean .renewal-clean-footer {
  border-top: 1px solid var(--sp-border, rgba(170, 207, 255, 0.22)) !important;
  color: var(--sp-text-muted, rgba(230, 238, 255, 0.72)) !important;
  background:
    var(--sp-shell-footer-bg, linear-gradient(180deg, rgba(13, 30, 57, 0.74), rgba(5, 13, 27, 0.98))),
    var(--sp-bg-panel-strong, rgba(8, 15, 34, 0.92)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-links a,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-socials a,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-dropdown-toggle {
  color: var(--sp-text-muted, rgba(230, 238, 255, 0.72)) !important;
}

:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-links a:hover,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-socials a:hover,
:root[data-liquid-theme] body:is(.portal-home-renewal, .settings-renewal-shell, .admin-renewal-shell, .game-renewal-shell, .selection-renewal-shell, .selection-character-create-shell) .renewal-clean .renewal-clean-footer-dropdown-toggle:hover {
  color: var(--sp-text, #ffffff) !important;
}

:root[data-liquid-theme] body.settings-renewal-shell :where(.renewal-three-panel, .renewal-three-panel__main, .renewal-control-main) {
  background-color: transparent !important;
}

:root[data-liquid-theme] body.settings-renewal-shell .renewal-three-panel__left {
  border-right: 1px solid var(--sp-border, rgba(180, 210, 255, 0.18)) !important;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 14%, transparent), transparent 13rem),
    linear-gradient(180deg, color-mix(in srgb, var(--sp-bg-page, #050a16) 78%, transparent), color-mix(in srgb, var(--sp-bg-page, #050a16) 94%, transparent)),
    var(--sp-bg-page-gradient, var(--sp-bg-page, #050a16)) !important;
}

:root[data-liquid-theme] body.settings-renewal-shell :where(.renewal-control-menu-card, .renewal-control-help-card, .renewal-control-summary) {
  border-color: var(--sp-border, rgba(180, 210, 255, 0.18)) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 14%, transparent), transparent 12rem),
    var(--sp-panel-gradient-soft, var(--sp-bg-panel-strong, rgba(7, 15, 31, 0.92))) !important;
}

:root[data-liquid-theme] body:is(.settings-renewal-shell, .portal-home-renewal) :where(.shared-tabmenu) {
  border-color: var(--sp-border, rgba(180, 210, 255, 0.18)) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 9%, transparent), transparent 18rem),
    var(--sp-panel-gradient-soft, var(--sp-bg-panel-strong, rgba(8, 14, 34, 0.94))) !important;
}

:root[data-liquid-theme] body:is(.settings-renewal-shell, .portal-home-renewal) .shared-roadmap-page .box::before {
  border-color: var(--sp-border-strong, rgba(170, 207, 255, 0.34)) !important;
  background:
    radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--sp-secondary, var(--sp-primary-hover, #8ce7ff)) 15%, transparent), transparent 17rem),
    var(--sp-panel-gradient-soft, var(--sp-bg-panel-strong, rgba(8, 14, 34, 0.94))) !important;
}