:root {
  --bg0: #170d15;
  --bg1: #271420;
  --bg2: #3a2033;
  --stroke: rgba(255, 202, 223, 0.16);
  --text: rgba(255, 245, 250, 0.97);
  --muted: rgba(236, 205, 220, 0.78);
  --faint: rgba(220, 177, 199, 0.58);
  --chip: rgba(255, 255, 255, 0.06);
  --panel: rgba(77, 43, 67, 0.92);
  --panel-strong: rgba(37, 19, 32, 0.97);
  --hot: #ffe1ea;
  --blue: #f3a5c4;
  --pink: #f7bfd2;
  --wine: #4e2b43;
  --rose: #ffdbe8;
  --app-body-bg:
    radial-gradient(960px 620px at 8% 8%, rgba(243, 165, 196, 0.22), transparent 56%),
    radial-gradient(760px 480px at 86% 10%, rgba(255, 217, 204, 0.14), transparent 58%),
    radial-gradient(680px 420px at 52% 100%, rgba(178, 104, 147, 0.24), transparent 60%),
    linear-gradient(180deg, #170d15, #271420 46%, #120911 100%);
  --app-aura-bg:
    radial-gradient(720px 420px at 12% 20%, rgba(244, 170, 202, 0.16), transparent 68%),
    radial-gradient(760px 460px at 82% 62%, rgba(255, 218, 206, 0.12), transparent 72%),
    radial-gradient(640px 360px at 48% 18%, rgba(149, 82, 124, 0.2), transparent 62%);
  --app-overlay-bg: rgba(27, 10, 21, 0.66);
  --app-panel-border: rgba(255, 202, 223, 0.16);
  --app-panel-bg:
    radial-gradient(220px 140px at 0% 0%, rgba(246, 186, 208, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(77, 43, 67, 0.92), rgba(37, 19, 32, 0.97)),
    rgba(255, 255, 255, 0.03);
  --app-panel-bg-soft:
    radial-gradient(200px 120px at 0% 0%, rgba(255, 223, 232, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(72, 40, 61, 0.84), rgba(38, 20, 33, 0.90)),
    rgba(255, 255, 255, 0.025);
  --app-panel-bg-strong:
    radial-gradient(260px 160px at 0% 0%, rgba(243, 165, 196, 0.18), transparent 72%),
    radial-gradient(200px 120px at 100% 0%, rgba(255, 223, 210, 0.08), transparent 74%),
    linear-gradient(180deg, rgba(77, 43, 67, 0.95), rgba(37, 19, 32, 0.98)),
    rgba(255, 255, 255, 0.03);
  --app-panel-bg-elevated:
    radial-gradient(220px 130px at 12% 0%, rgba(243, 165, 196, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(76, 43, 66, 0.90), rgba(41, 21, 35, 0.94)),
    rgba(255, 255, 255, 0.02);
  --app-panel-shadow: 0 22px 48px rgba(26, 10, 21, 0.34);
  --app-card-shadow-soft: 0 16px 30px rgba(26, 10, 21, 0.22);
  --app-card-shadow-strong: 0 22px 46px rgba(26, 10, 21, 0.30);
  --app-input-border: rgba(255, 204, 223, 0.16);
  --app-input-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(67, 35, 56, 0.82);
  --app-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --app-action-border: rgba(255, 203, 223, 0.16);
  --app-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.05);
  --app-action-hover-shadow: 0 16px 32px rgba(79, 28, 58, 0.24);
  --app-primary-border: rgba(255, 221, 231, 0.24);
  --app-primary-bg:
    radial-gradient(160px 72px at 50% 0%, rgba(255, 226, 214, 0.22), transparent 72%),
    linear-gradient(135deg, rgba(244, 154, 189, 0.26), rgba(185, 102, 151, 0.22));
  --app-primary-text: rgba(255, 245, 250, 0.97);
  --app-primary-shadow: 0 12px 22px rgba(84, 28, 61, 0.2);
  --app-menu-bg:
    radial-gradient(300px 180px at 0% 0%, rgba(246, 186, 208, 0.18), transparent 72%),
    radial-gradient(240px 140px at 100% 0%, rgba(255, 223, 210, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(74, 41, 63, 0.98), rgba(36, 18, 31, 0.98));
  --app-nav-border: rgba(255, 209, 225, 0.18);
  --app-nav-bg:
    radial-gradient(320px 180px at 50% 0%, rgba(247, 191, 210, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(78, 43, 67, 0.88), rgba(36, 18, 31, 0.96));
  --app-nav-active-bg: linear-gradient(180deg, rgba(255, 225, 234, 0.26), rgba(245, 166, 198, 0.16));
  --app-nav-active-shadow:
    inset 0 0 0 1px rgba(255, 223, 232, 0.18),
    0 10px 20px rgba(67, 25, 52, 0.28);
  --app-chip-border: rgba(255, 208, 225, 0.18);
  --app-chip-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(90, 49, 74, 0.46);
  --app-chip-strong-bg:
    linear-gradient(180deg, rgba(255, 223, 232, 0.14), rgba(243, 165, 196, 0.08)),
    rgba(90, 49, 74, 0.42);
  --app-chip-strong-fg: rgba(255, 245, 250, 0.97);
  --app-toolbar-bg:
    radial-gradient(220px 120px at 0% 0%, rgba(243, 165, 196, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(76, 43, 66, 0.90), rgba(41, 21, 35, 0.95));
  --app-hero-bg:
    radial-gradient(320px 180px at 0% 0%, rgba(243, 165, 196, 0.22), transparent 72%),
    radial-gradient(260px 160px at 100% 0%, rgba(255, 223, 210, 0.10), transparent 74%),
    linear-gradient(180deg, rgba(79, 45, 68, 0.96), rgba(37, 19, 32, 0.99)),
    rgba(255, 255, 255, 0.03);
  --app-feature-bg:
    radial-gradient(260px 160px at 16% 0%, rgba(243, 165, 196, 0.18), transparent 70%),
    radial-gradient(240px 160px at 100% 0%, rgba(255, 223, 210, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(78, 44, 67, 0.93), rgba(36, 18, 31, 0.97)),
    rgba(255, 255, 255, 0.03);
  --app-media-glow-bg:
    radial-gradient(240px 160px at 24% 16%, rgba(243, 165, 196, 0.20), transparent 66%),
    radial-gradient(240px 160px at 100% 0%, rgba(255, 223, 210, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(77, 43, 67, 0.52), rgba(37, 19, 32, 0.50));
  --app-accent-soft: rgba(243, 165, 196, 0.18);
  --app-accent-quiet: rgba(243, 165, 196, 0.10);
  --app-accent-strong: rgba(243, 165, 196, 0.28);
  --app-create-hero-bg:
    radial-gradient(420px 220px at 12% 0%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 72%),
    radial-gradient(260px 160px at 88% 10%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--panel-strong) 98%, rgba(0, 0, 0, 0.18))),
    rgba(255, 255, 255, 0.03);
  --app-create-panel-bg:
    radial-gradient(240px 140px at 0% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.04)), color-mix(in srgb, var(--panel-strong) 96%, rgba(0, 0, 0, 0.14))),
    rgba(255, 255, 255, 0.02);
  --app-create-soft-bg:
    radial-gradient(160px 92px at 0% 0%, color-mix(in srgb, var(--pink) 9%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--panel-strong) 90%, rgba(0, 0, 0, 0.10))),
    rgba(255, 255, 255, 0.025);
  --app-create-glow-bg:
    radial-gradient(260px 150px at 10% 0%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 70%),
    radial-gradient(220px 140px at 100% 0%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%);
  --app-create-active-bg:
    radial-gradient(180px 84px at 50% 0%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--panel) 72%, rgba(255, 255, 255, 0.02)));
  --app-create-thumb-base-bg:
    radial-gradient(72px 56px at 28% 20%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--panel-strong) 94%, rgba(0, 0, 0, 0.10)));
  --app-create-thumb-character-bg:
    radial-gradient(72px 56px at 28% 20%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--rose) 26%, var(--panel)), color-mix(in srgb, var(--wine) 92%, rgba(0, 0, 0, 0.18)));
  --app-create-thumb-preset-bg:
    radial-gradient(72px 56px at 28% 20%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 26%, var(--panel)), color-mix(in srgb, var(--panel-strong) 94%, rgba(0, 0, 0, 0.16)));
  --app-create-thumb-worldbook-bg:
    radial-gradient(72px 56px at 28% 20%, color-mix(in srgb, #7fd9b6 36%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, #7fd9b6 28%, var(--panel)), color-mix(in srgb, var(--panel-strong) 92%, rgba(0, 0, 0, 0.14)));
  --app-create-thumb-regex-bg:
    radial-gradient(72px 56px at 28% 20%, color-mix(in srgb, #c79cff 34%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, #c79cff 26%, var(--panel)), color-mix(in srgb, var(--panel-strong) 92%, rgba(0, 0, 0, 0.16)));
  --app-me-hero-bg:
    radial-gradient(360px 240px at 12% 0%, color-mix(in srgb, var(--rose) 28%, transparent), transparent 72%),
    radial-gradient(280px 180px at 100% 8%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 84%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--bg2) 96%, rgba(0, 0, 0, 0.18))),
    rgba(255, 255, 255, 0.03);
  --app-me-board-bg:
    radial-gradient(240px 160px at 0% 0%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 74%),
    radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 78%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--bg2) 94%, rgba(0, 0, 0, 0.14))),
    rgba(255, 255, 255, 0.02);
  --app-me-card-bg:
    radial-gradient(180px 100px at 0% 0%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 72%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--bg2) 88%, rgba(0, 0, 0, 0.10))),
    rgba(255, 255, 255, 0.025);
  --app-me-glow-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 24%, transparent 70%, color-mix(in srgb, var(--rose) 14%, transparent)),
    radial-gradient(260px 180px at 100% 0%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 74%);
  --app-me-board-glow-bg:
    radial-gradient(220px 120px at 0% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 76%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%);
  --app-me-backdrop-bg:
    radial-gradient(320px 220px at 10% 0%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 70%),
    radial-gradient(260px 180px at 100% 8%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 72%),
    radial-gradient(300px 240px at 72% 100%, color-mix(in srgb, var(--wine) 16%, transparent), transparent 78%);
  --app-me-avatar-bg:
    radial-gradient(90px 70px at 24% 16%, color-mix(in srgb, var(--rose) 18%, white), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 40%, var(--panel)), color-mix(in srgb, var(--wine) 46%, white) 58%, color-mix(in srgb, var(--blue) 18%, transparent));
  --app-me-primary-bg:
    radial-gradient(180px 90px at 0% 0%, color-mix(in srgb, var(--rose) 22%, white), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 56%, var(--panel)), color-mix(in srgb, var(--wine) 84%, black));
  --app-me-badge-bg:
    radial-gradient(140px 72px at 0% 0%, color-mix(in srgb, var(--rose) 18%, white), transparent 74%),
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 34%, var(--panel)), color-mix(in srgb, var(--wine) 72%, rgba(0, 0, 0, 0.10)));
  --app-me-secondary-bg:
    radial-gradient(140px 70px at 10% 0%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--pink) 10%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--wine) 64%, rgba(255, 255, 255, 0.03)));
  --app-settings-hero-bg:
    radial-gradient(360px 210px at 0% 0%, color-mix(in srgb, var(--rose) 24%, transparent), transparent 72%),
    radial-gradient(280px 180px at 100% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 62%, rgba(255, 255, 255, 0.10)), color-mix(in srgb, var(--panel-strong) 92%, rgba(0, 0, 0, 0.10))),
    rgba(255, 255, 255, 0.03);
  --app-settings-panel-bg:
    radial-gradient(220px 120px at 0% 0%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 74%),
    radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 56%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--panel-strong) 90%, rgba(0, 0, 0, 0.08))),
    rgba(255, 255, 255, 0.02);
  --app-settings-card-bg:
    radial-gradient(160px 92px at 0% 0%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--wine) 48%, rgba(255, 255, 255, 0.10)), color-mix(in srgb, var(--panel-strong) 86%, rgba(0, 0, 0, 0.06))),
    rgba(255, 255, 255, 0.025);
  --app-settings-active-bg:
    radial-gradient(200px 100px at 12% 0%, color-mix(in srgb, var(--rose) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, rgba(255, 255, 255, 0.10)), color-mix(in srgb, var(--wine) 54%, rgba(255, 255, 255, 0.04)));
  --app-settings-badge-bg:
    radial-gradient(160px 78px at 12% 0%, color-mix(in srgb, var(--blue) 16%, white), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 28%, var(--panel)), color-mix(in srgb, var(--panel-strong) 82%, rgba(0, 0, 0, 0.10)));
  --app-settings-secondary-bg:
    radial-gradient(150px 72px at 0% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--panel-strong) 80%, rgba(255, 255, 255, 0.03)));
  --app-auth-card-bg:
    radial-gradient(240px 140px at 50% 0%, color-mix(in srgb, var(--rose) 20%, transparent), transparent 72%),
    radial-gradient(220px 140px at 0% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--panel-strong) 98%, rgba(0, 0, 0, 0.14))),
    rgba(255, 255, 255, 0.02);
  --app-auth-card-soft-bg:
    radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--panel-strong) 94%, rgba(0, 0, 0, 0.10))),
    rgba(255, 255, 255, 0.02);
  --app-auth-segment-active-bg:
    radial-gradient(160px 60px at 50% 0%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--panel) 74%, rgba(255, 255, 255, 0.03)));
  --app-auth-primary-bg:
    radial-gradient(220px 84px at 50% 0%, color-mix(in srgb, var(--rose) 28%, white), transparent 74%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, var(--panel)), color-mix(in srgb, var(--pink) 56%, white) 52%, color-mix(in srgb, var(--wine) 78%, black));
  --app-auth-avatar-bg:
    radial-gradient(100px 80px at 50% 0%, color-mix(in srgb, var(--rose) 24%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--panel) 74%, rgba(255, 255, 255, 0.02)));
  --app-chat-hub-toolbar-bg:
    radial-gradient(220px 120px at 0% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.04)), color-mix(in srgb, var(--panel-strong) 96%, rgba(0, 0, 0, 0.14)));
  --app-chat-hub-card-bg:
    radial-gradient(240px 132px at 0% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 72%),
    radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--pink) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--panel-strong) 98%, rgba(0, 0, 0, 0.16))),
    rgba(255, 255, 255, 0.02);
  --app-chat-hub-soft-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--panel-strong) 90%, rgba(0, 0, 0, 0.10))),
    rgba(255, 255, 255, 0.03);
  --app-chat-hub-active-bg:
    radial-gradient(160px 80px at 50% 0%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.07)), color-mix(in srgb, var(--panel) 74%, rgba(255, 255, 255, 0.03)));
  --app-chat-hub-media-bg:
    radial-gradient(112px 92px at 16% 12%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 72%),
    radial-gradient(144px 110px at 88% 18%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--panel-strong) 96%, rgba(0, 0, 0, 0.14)));
}

body {
  background: var(--app-body-bg) !important;
}

.aura {
  background: var(--app-aura-bg) !important;
}

.menuOverlay {
  background: var(--app-overlay-bg) !important;
}

.menuPanel {
  border-color: var(--app-panel-border) !important;
  background: var(--app-menu-bg) !important;
  box-shadow: var(--app-panel-shadow) !important;
}

.bottomNav {
  border-color: var(--app-nav-border) !important;
  background: var(--app-nav-bg) !important;
}

.bn.active .ico {
  background: var(--app-nav-active-bg) !important;
  box-shadow: var(--app-nav-active-shadow) !important;
}

.discoverPage,
.createWorkbenchPage,
.mePage,
.settingsPage,
.authPage {
  position: relative;
  isolation: isolate;
}

.discoverPage::before,
.createWorkbenchPage::before,
.mePage::before,
.settingsPage::before,
.authPage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.discoverPage > *,
.createWorkbenchPage > *,
.mePage > *,
.settingsPage > *,
.authPage > * {
  position: relative;
  z-index: 1;
}

.discoverPage::before {
  background:
    radial-gradient(420px 240px at 16% 0%, color-mix(in srgb, var(--app-accent-soft) 140%, transparent), transparent 72%),
    radial-gradient(360px 220px at 88% 12%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 72%);
  opacity: 0.95;
}

.createWorkbenchPage::before {
  background:
    radial-gradient(520px 280px at 8% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
    radial-gradient(360px 240px at 84% 24%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 72%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--app-accent-quiet) 50%, transparent) 100%);
  opacity: 0.96;
}

.mePage::before {
  background:
    radial-gradient(460px 280px at 18% 0%, color-mix(in srgb, var(--pink) 20%, transparent), transparent 70%),
    radial-gradient(340px 220px at 84% 12%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 74%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--app-accent-quiet) 24%, transparent) 100%);
  opacity: 0.96;
}

.settingsPage::before {
  background:
    radial-gradient(420px 240px at 12% 0%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 72%),
    radial-gradient(460px 250px at 100% 16%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 76%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--app-accent-quiet) 36%, transparent) 100%);
  opacity: 0.92;
}

.authPage::before {
  background:
    radial-gradient(420px 240px at 50% 0%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 72%),
    radial-gradient(320px 200px at 10% 14%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 76%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--app-accent-quiet) 20%, transparent) 100%);
  opacity: 0.94;
}

.mePage:has(.empty-me)::before {
  background:
    radial-gradient(420px 240px at 50% 0%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 72%),
    radial-gradient(320px 200px at 10% 14%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 76%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--app-accent-quiet) 20%, transparent) 100%);
  opacity: 0.94;
}

.app[data-route="me"]:has(.empty-me) {
  --app-shell-max-width: 560px;
}

.mePage:has(.empty-me) {
  min-height: calc(100vh - var(--app-shell-nav-height) - 46px);
}

.mePage:has(.empty-me) .topBar {
  padding-bottom: 12px;
}

.empty-me.emptyRich {
  align-content: center !important;
  padding-top: clamp(10px, 4vh, 32px) !important;
}

@media (min-width: 900px) {
  .empty-layout-account.empty-me .emptyPanel {
    width: min(100%, 520px);
  }
}

.filters,
.settingsBottomBar,
.createMobileActionBar {
  border-color: var(--app-panel-border) !important;
  background: var(--app-toolbar-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.chatHubMiniStats {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-toolbar-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.discoverFeature {
  border-color: var(--app-panel-border) !important;
  background: var(--app-feature-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.createHeroCard,
.createNotice {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-hero-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.meHeroCard {
  border-color: var(--app-panel-border) !important;
  background: var(--app-me-hero-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.meBoardCard {
  border-color: var(--app-panel-border) !important;
  background: var(--app-me-board-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.settingsHeroSlim {
  border-color: var(--app-panel-border) !important;
  background: var(--app-settings-hero-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.authCard {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.authCardSoft {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-soft-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.chatManageToolbar,
.chatManageEditor {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-card-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.discoverSection,
.discoverResultsSection,
.emptyPanel,
.emptyFeature,
.dLeadCard,
.dRich,
.dMedia,
.dBottomInfo,
.managerItemCard,
.profileSectionCard,
.resourceSummaryCard,
.resourceDetailBlock,
.resourceEntryCard {
  border-color: var(--app-panel-border) !important;
  background: var(--app-panel-bg-elevated) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.createEditorCard,
.createRail,
.createInnerPanel,
.createBindingCard,
.createBindingPicker,
.createEntryRow,
.createAutosaveHint {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-panel-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.settingPanel {
  border-color: var(--app-panel-border) !important;
  background: var(--app-settings-panel-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.chatManageSection,
.chatPromptEditorCard,
.chatStorySidebar,
.chatStoryStage,
.chatStageHero,
.chatConfigToggleCard,
.chatConfigPickerCard,
.chatConfigCheckRow,
.chatConfigHintCard,
.chatPersonaCard,
.chatPresetCard,
.chatStoryEmpty {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-card-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.settingSummaryCard,
.settingsFlowStep,
.settingInputCard,
.settingsActionCard,
.themePresetCard {
  border-color: var(--app-panel-border) !important;
  background: var(--app-settings-card-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.createMetricTile,
.createHeroHint,
.createSearch,
.createEmptyRail,
.createEmptyMini,
.createListItem {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-soft-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.authInfoRow {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-soft-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.meDataCard,
.meInfoCard,
.meInfoRow {
  border-color: var(--app-panel-border) !important;
  background: var(--app-me-card-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.chatHubNotice,
.chatPromptPickerItem,
.chatHubTabCard,
.chatStoryCard,
.chatStoryTool,
.chatStoryEnter,
.chatChip {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-soft-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.cardX,
.toast {
  border-color: var(--app-panel-border) !important;
  background: var(--app-panel-bg-soft) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.searchBox,
.authInput,
.chatManageInput,
.chatManageTextarea,
.chatManageSelect,
.profileTextInput,
.profileTextArea,
.profileSelect,
.profilePickerBtn,
.pickerSearch,
.pickerPanel,
.pickerList,
.selectBtn,
.createEditorCard input,
.createEditorCard textarea,
.createEditorCard select,
.settingTextInput,
.chatHubSearch {
  border-color: var(--app-input-border) !important;
  background: var(--app-input-bg) !important;
  box-shadow: var(--app-input-shadow) !important;
}

.typeTab,
.pill,
.chip,
.btnBlue,
.btnDark,
.btnGhost,
.dChatBtn,
.chatHubTabCard,
.selectBtn,
.chatManageBtn,
.createToolTab,
.createMiniTab,
.createBtn,
.authSegmentBtn,
.authPrimary,
.authSecondary,
.authStatusPill,
.resourceMetaChip,
.profileTabBtn,
.profileTabAdd,
.chatConfigMiniBtn,
.chatConfigGhostBtn,
.chatConfigPrimaryBtn,
.chatConfigToggleState,
.chatConfigCheckState,
.chatHubModeChip,
.iconBtn,
.menuItem,
.authSegment,
.dAct,
.chatStageAction {
  border-color: var(--app-action-border) !important;
  background: var(--app-action-bg) !important;
}

.typeTab.active,
.pill.active,
.pill.hot,
.chip.active,
.btnBlue,
.dChatBtn,
.createToolTab.active,
.createMiniTab.active,
.authSegmentBtn.active,
.authStatusPill,
.chatManageBtn.primary,
.profileTabBtn.active,
.chatHubTabCard.active,
.chatConfigPrimaryBtn,
.chatConfigToggleState.on,
.chatConfigCheckRow.active .chatConfigCheckState,
.discoverHeroBtn.primary,
.createBtn.primary,
.btnPrimary,
.settingsSaveBtn {
  border-color: var(--app-primary-border) !important;
  background: var(--app-primary-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.chatHubTabCard:hover,
.chatManageBtn:hover,
.createToolTab:hover,
.createMiniTab:hover,
.createBtn:hover,
.resourceEntryCard:hover,
.managerItemCard:hover,
.discoverHeroBtn:hover,
.discoverSectionMore:hover,
.segBtn:hover,
.btnBlue:hover,
.btnDark:hover,
.btnGhost:hover,
.dChatBtn:hover,
.cardX:hover,
.createListItem:hover,
.authPrimary:hover,
.authSecondary:hover {
  box-shadow: var(--app-action-hover-shadow) !important;
}

.segBtn,
.discoverHeroBtn,
.discoverSectionMore,
.createHeroCompactTotal,
.createHeroEyebrow,
.createDefaultChip,
.createListBadge,
.badge,
.coverBottomTag,
.dHeat,
.dTokens,
.dTag,
.meHeroEyebrow,
.meDataMetaValue {
  border-color: var(--app-chip-border) !important;
  background: var(--app-chip-strong-bg) !important;
  color: var(--app-chip-strong-fg) !important;
}

.discoverFeature {
  background: var(--app-feature-bg) !important;
}

.themePresetCard {
  border-color: color-mix(in srgb, var(--theme-preset-a, var(--app-panel-border)) 36%, var(--app-panel-border)) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
}

.chatHubSearch {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-toolbar-bg) !important;
}

.createToolTab.active,
.createMiniTab.active,
.createBtn.primary,
.createListItem.active {
  border-color: var(--app-primary-border) !important;
  background: var(--app-create-active-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.settingsHeroQuickBtn.primary,
.settingsSaveBtn {
  background: var(--app-settings-active-bg) !important;
}

.authSegmentBtn.active {
  background: var(--app-auth-segment-active-bg) !important;
}

.authPrimary {
  background: var(--app-auth-primary-bg) !important;
}

.chatHubTabCard.active,
.chatHubNotice.visible,
.chatStageAction.primary,
.chatStoryCard.active,
.chatStoryEnter,
.chatPersonaCard.current,
.chatPresetCard.current {
  border-color: var(--app-primary-border) !important;
  background: var(--app-chat-hub-active-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.discoverFeatureMedia,
.cardCover,
.emptyPanelGlow {
  background: var(--app-media-glow-bg) !important;
}

.createHeroCard::before {
  background: var(--app-create-glow-bg) !important;
}

.meHeroCard::before {
  background: var(--app-me-glow-bg) !important;
}

.meBoardCard::before {
  background: var(--app-me-board-glow-bg) !important;
}

.meHeroBackdrop {
  background: var(--app-me-backdrop-bg) !important;
}

.meAvatar {
  background: var(--app-me-avatar-bg) !important;
}

.createListThumb {
  background: var(--app-create-thumb-base-bg) !important;
  border-color: var(--app-panel-border) !important;
}

.createListThumb.kind-character {
  background: var(--app-create-thumb-character-bg) !important;
}

.createListThumb.kind-preset {
  background: var(--app-create-thumb-preset-bg) !important;
}

.createListThumb.kind-worldbook {
  background: var(--app-create-thumb-worldbook-bg) !important;
}

.createListThumb.kind-regex {
  background: var(--app-create-thumb-regex-bg) !important;
}

.authIdentityAvatar {
  background: var(--app-auth-avatar-bg) !important;
}

.mePage .meTopAction,
.mePage .meActionBtn {
  border-color: var(--app-panel-border) !important;
  background: var(--app-me-secondary-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
  color: var(--text) !important;
}

.mePage .meTopAction:hover,
.mePage .meActionBtn:hover {
  box-shadow: var(--app-action-hover-shadow) !important;
}

.mePage .meActionBtn.primary {
  border-color: var(--app-primary-border) !important;
  background: var(--app-me-primary-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.mePage .meTopLogout,
.mePage .meActionBtn.danger {
  border-color: color-mix(in srgb, var(--pink) 34%, var(--app-panel-border)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pink) 12%, var(--wine)), color-mix(in srgb, var(--wine) 82%, rgba(0, 0, 0, 0.12))) !important;
  color: color-mix(in srgb, var(--text) 88%, white) !important;
}

.mePage .meProfileBadge {
  border-color: var(--app-chip-border) !important;
  background: var(--app-me-badge-bg) !important;
  color: var(--app-chip-strong-fg) !important;
}

.settingsPage .settingsHeroQuickBtn,
.settingsPage .settingGhostBtn,
.settingsPage .settingPanelSummaryBadge {
  border-color: var(--app-panel-border) !important;
  background: var(--app-settings-secondary-bg) !important;
  box-shadow: var(--app-card-shadow-soft) !important;
  color: var(--text) !important;
}

.settingsPage .settingsHeroQuickBtn:hover,
.settingsPage .settingGhostBtn:hover,
.settingsPage .settingsSaveBtn:hover {
  box-shadow: var(--app-action-hover-shadow) !important;
}

.settingsPage .settingsHeroQuickBtn.primary,
.settingsPage .settingsSaveBtn {
  border-color: var(--app-primary-border) !important;
  background: var(--app-settings-active-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.settingsPage .settingsHeroBadge {
  border-color: var(--app-chip-border) !important;
  background: var(--app-settings-badge-bg) !important;
  color: var(--app-chip-strong-fg) !important;
}

.empty-create .emptyPanel {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-hero-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.empty-create .emptyPanelGlow {
  background: var(--app-create-glow-bg) !important;
  opacity: 0.96 !important;
}

.empty-create .emptyFeature {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-soft-bg) !important;
}

.empty-create .emptyEyebrow,
.empty-create .emptyIcon {
  border-color: var(--app-primary-border) !important;
  background: var(--app-create-active-bg) !important;
  color: var(--app-primary-text) !important;
}

.empty-create .btnGhost {
  border-color: var(--app-panel-border) !important;
  background: var(--app-create-soft-bg) !important;
  color: var(--text) !important;
}

.empty-me .emptyPanel {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.empty-me .emptyPanelGlow {
  background: var(--app-me-glow-bg) !important;
  opacity: 0.96 !important;
}

.empty-me .emptyFeature {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-soft-bg) !important;
}

.empty-me .emptyEyebrow,
.empty-me .emptyIcon {
  border-color: var(--app-primary-border) !important;
  background: var(--app-auth-avatar-bg) !important;
  color: var(--app-primary-text) !important;
}

.empty-me .btnPrimary {
  border-color: var(--app-primary-border) !important;
  background: var(--app-auth-primary-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
  color: var(--app-primary-text) !important;
}

.empty-me .btnGhost {
  border-color: var(--app-panel-border) !important;
  background: var(--app-auth-card-soft-bg) !important;
  color: var(--text) !important;
}

.empty-settings .emptyPanel {
  border-color: var(--app-panel-border) !important;
  background:
    radial-gradient(360px 210px at 0% 0%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 72%),
    radial-gradient(280px 180px at 100% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 20%, var(--panel)), color-mix(in srgb, var(--panel-strong) 94%, rgba(0, 0, 0, 0.14))) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.empty-settings .emptyPanelGlow {
  background:
    radial-gradient(260px 160px at 0% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 74%),
    radial-gradient(220px 140px at 100% 0%, color-mix(in srgb, var(--app-accent-soft) 86%, transparent), transparent 76%) !important;
  opacity: 0.96 !important;
}

.empty-settings .emptyFeature {
  border-color: var(--app-panel-border) !important;
  background:
    radial-gradient(140px 80px at 0% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--panel)), color-mix(in srgb, var(--panel-strong) 88%, rgba(0, 0, 0, 0.10))) !important;
}

.empty-settings .emptyEyebrow,
.empty-settings .emptyIcon {
  border-color: var(--app-primary-border) !important;
  background: var(--app-settings-active-bg) !important;
  color: var(--app-primary-text) !important;
}

.empty-settings .btnGhost {
  border-color: var(--app-panel-border) !important;
  background: var(--app-settings-secondary-bg) !important;
  color: var(--text) !important;
}

.empty-chat .emptyPanel,
.empty-chatroom .emptyPanel {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-card-bg) !important;
  box-shadow: var(--app-card-shadow-strong) !important;
}

.empty-chat .emptyPanelGlow,
.empty-chatroom .emptyPanelGlow {
  background:
    radial-gradient(260px 160px at 8% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 72%),
    radial-gradient(220px 140px at 100% 0%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 76%) !important;
  opacity: 0.96 !important;
}

.empty-chat .emptyFeature,
.empty-chatroom .emptyFeature {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-soft-bg) !important;
}

.empty-chat .emptyEyebrow,
.empty-chat .emptyIcon,
.empty-chatroom .emptyEyebrow,
.empty-chatroom .emptyIcon {
  border-color: var(--app-primary-border) !important;
  background: var(--app-chat-hub-active-bg) !important;
  color: var(--app-primary-text) !important;
}

.empty-chat .btnGhost,
.empty-chatroom .btnGhost {
  border-color: var(--app-panel-border) !important;
  background: var(--app-chat-hub-soft-bg) !important;
  color: var(--text) !important;
}

#appRoot[data-route="home"] .bottomNav .bn.active .ico,
#appRoot[data-route="discover"] .bottomNav .bn.active .ico {
  background: var(--app-nav-active-bg) !important;
  box-shadow: var(--app-nav-active-shadow) !important;
}

#appRoot[data-route="chat"] .bottomNav .bn.active .ico {
  background: var(--app-chat-hub-active-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
}

#appRoot[data-route="create"] .bottomNav .bn.active .ico {
  background: var(--app-create-active-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
}

#appRoot[data-route="me"] .bottomNav .bn.active .ico {
  background: var(--app-me-primary-bg) !important;
  box-shadow: var(--app-primary-shadow) !important;
}

#appRoot[data-route="home"] .bottomNav .bn.active .txt,
#appRoot[data-route="discover"] .bottomNav .bn.active .txt,
#appRoot[data-route="chat"] .bottomNav .bn.active .txt,
#appRoot[data-route="create"] .bottomNav .bn.active .txt,
#appRoot[data-route="me"] .bottomNav .bn.active .txt {
  color: var(--app-primary-text) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--app-accent-strong) 92%, transparent) !important;
}

.chatRailAvatar,
.chatPersonaAvatar,
.chatStageCover,
.chatStoryThumb {
  background: var(--app-chat-hub-media-bg) !important;
  border-color: var(--app-panel-border) !important;
}

.cardCover::after {
  background: linear-gradient(180deg, rgba(18, 8, 15, 0.04), rgba(20, 10, 17, 0.18) 62%, rgba(20, 10, 17, 0.42)) !important;
}

.iconBtn,
.menuItem,
.emptyPanel,
.emptyFeature,
.toast,
.dAct,
.dHeat,
.dTokens,
.dTag,
.btnPrimary,
.authSegment,
.chatStageAction {
  color: var(--text) !important;
}

.chatRoom .iconBtn,
.chatRoom .chatHeaderMoreBtn,
.chatRoom .composerModeBtn,
.chatRoom .chatConfigMiniBtn,
.chatRoom .chatConfigGhostBtn {
  border-color: var(--chat-border-soft, var(--app-input-border)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface, var(--panel)) 94%, rgba(255,255,255,0.06)), color-mix(in srgb, var(--chat-bg, var(--bg0)) 92%, rgba(255,255,255,0.02))) !important;
  color: var(--chat-text, var(--text)) !important;
}

.chatRoom .chatHeader,
.chatRoom .chatHeroCard,
.chatRoom .chatComposer,
.chatRoom .chatConfigPanel,
.chatRoom .chatConfigToggleCard,
.chatRoom .chatConfigPickerCard,
.chatRoom .chatConfigCheckRow,
.chatRoom .chatConfigHintCard,
.chatRoom .managerItemCard,
.chatRoom .profileSectionCard,
.chatRoom .resourceSummaryCard,
.chatRoom .resourceDetailBlock,
.chatRoom .resourceEntryCard {
  border-color: var(--chat-border-soft, var(--app-panel-border)) !important;
  background:
    radial-gradient(240px 120px at 14% 0%, color-mix(in srgb, var(--chat-accent, var(--blue)) 14%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface, var(--panel)) 94%, rgba(255,255,255,0.04)), color-mix(in srgb, var(--chat-bg, var(--bg0)) 96%, rgba(0,0,0,0.12))) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--chat-bg, #120911) 48%, transparent) !important;
}

.chatRoom .chatStorySidebar,
.chatRoom .chatStoryStage,
.chatRoom .chatStageHero,
.chatRoom .chatPersonaCard,
.chatRoom .chatPresetCard,
.chatRoom .chatStoryEmpty,
.chatRoom .chatStoryCard {
  border-color: var(--chat-border-soft, var(--app-panel-border)) !important;
  background:
    radial-gradient(220px 120px at 12% 0%, color-mix(in srgb, var(--chat-accent, var(--blue)) 14%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface, var(--panel)) 94%, rgba(255,255,255,0.05)), color-mix(in srgb, var(--chat-bg, var(--bg0)) 96%, rgba(0,0,0,0.12))) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--chat-bg, #120911) 48%, transparent) !important;
}

.chatRoom .chatRailAvatar,
.chatRoom .chatPersonaAvatar,
.chatRoom .chatStageCover,
.chatRoom .chatStoryThumb {
  border-color: var(--chat-border-soft, var(--app-panel-border)) !important;
  background:
    radial-gradient(112px 92px at 16% 12%, color-mix(in srgb, var(--chat-accent, var(--blue)) 22%, transparent), transparent 72%),
    radial-gradient(144px 110px at 88% 18%, color-mix(in srgb, var(--chat-user-bubble, var(--pink)) 16%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface, var(--panel)) 92%, rgba(255,255,255,0.05)), color-mix(in srgb, var(--chat-bg, var(--bg0)) 96%, rgba(0,0,0,0.12))) !important;
}

.chatRoom .chatStageAction.primary,
.chatRoom .chatStoryCard.active,
.chatRoom .chatStoryEnter,
.chatRoom .chatPersonaCard.current,
.chatRoom .chatPresetCard.current {
  border-color: var(--chat-accent-strong, var(--app-primary-border)) !important;
  background:
    radial-gradient(160px 80px at 50% 0%, color-mix(in srgb, var(--chat-user-bubble, var(--pink)) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--chat-accent, var(--blue)) 16%, rgba(255,255,255,0.07)), color-mix(in srgb, var(--chat-surface, var(--panel)) 78%, rgba(255,255,255,0.03))) !important;
  color: var(--chat-text, var(--text)) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--chat-bg, #120911) 58%, transparent) !important;
}

.chatRoom .msgIn,
.chatRoom .profileTextInput,
.chatRoom .profileTextArea,
.chatRoom .profileSelect,
.chatRoom .profilePickerBtn,
.chatRoom .chatConfigSearchInput {
  border-color: var(--chat-border-soft, var(--app-input-border)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface, var(--panel)) 96%, rgba(255,255,255,0.05)), color-mix(in srgb, var(--chat-bg, var(--bg0)) 94%, rgba(255,255,255,0.02))) !important;
  color: var(--chat-text, var(--text)) !important;
}

.chatRoom .sendBtn,
.chatRoom .chatConfigPrimaryBtn {
  border-color: var(--chat-accent-strong, var(--app-primary-border)) !important;
  background:
    radial-gradient(180px 78px at 50% 0%, color-mix(in srgb, var(--chat-accent, var(--blue)) 26%, white), transparent 74%),
    linear-gradient(135deg, color-mix(in srgb, var(--chat-accent, var(--blue)) 92%, white), color-mix(in srgb, var(--chat-accent, var(--blue)) 52%, var(--chat-bg, var(--bg0)))) !important;
  color: var(--chat-text, #fff) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--chat-bg, #120911) 66%, transparent) !important;
}

/* Theme text closure pass: route CSS still contains legacy dark-theme text colors.
   Keep these overrides centralized so light themes do not become light-on-light. */
.discoverFeatureTitle,
.discoverSectionTitle,
.dTitle,
.dName,
.cardTitle,
.managerItemTitle,
.chatHubTitle,
.chatStageTitle,
.chatStoryCardTitle,
.createHeroTitle,
.createEditorTitle,
.createMetricValue,
.createListTitle,
.createFieldTitle,
.createCheckText,
.createSegmentBtn,
.settingsHeroName,
.settingSummaryValue,
.settingsFlowLabel,
.settingTitle,
.settingPanelTitle,
.settingSelectValue,
.settingToggleText,
.themePresetName,
.meName,
.meDataValue,
.meInfoValue,
.meSectionTitle,
.authIdentityName {
  color: var(--text) !important;
}

.discoverFeatureSub,
.discoverSectionSub,
.discoverFeatureMeta,
.authorName,
.dMeta,
.dSub,
.cardMeta,
.cardDesc,
.managerItemMeta,
.chatHubSub,
.chatStageSub,
.chatStoryCardPreview,
.createHeroSub,
.createEditorSub,
.createMetricLabel,
.createListDesc,
.createListMeta,
.createFieldLabel,
.createPlacementHints,
.settingsHeroApi,
.settingsHeroSubtle,
.settingSummaryHint,
.settingsFlowHint,
.settingDescription,
.settingPanelSub,
.themePresetMeta,
.meHandle,
.meBio,
.meDataLabel,
.meInfoLabel,
.meSectionSub,
.authIdentitySub {
  color: var(--muted) !important;
}

.discoverFeatureEyebrow,
.discoverHeroBtn,
.createHeroEyebrow,
.createHeroCompactTotal,
.createDefaultChip,
.createListBadge,
.settingsHeroBadge,
.settingSummaryLabel,
.settingPanelSummaryBadge,
.meProfileBadge,
.meProfileBadge.warm,
.meProfileBadge.ok,
.meProfileBadge.muted,
.authStatusPill {
  border-color: var(--app-chip-border) !important;
  background: var(--app-chip-bg) !important;
  color: var(--app-chip-strong-fg) !important;
}