:root,
[data-theme=dark_neon] {
    --bg: #07050a;
    --surface: #151018;
    --surface-2: #23131f;
    --text: #fff5fb;
    --muted: #b8a4b0;
    --line: #432738;
    --accent: #ff3f7d;
    --accent-2: #b545e8;
    --accent-3: #ff775f;
    --glow: rgba(255, 63, 125, .26);
    --primary-start: #b545e8;
    --primary-mid: #ff3f7d;
    --primary-end: #ff775f;
    --accent-glow: #ff3f7d;
    --theme-offer: #9a224f;
    --theme-bg-image: radial-gradient(ellipse at 24% -8%, rgba(255, 63, 125, .18), transparent 42%), radial-gradient(ellipse at 88% 22%, rgba(181, 69, 232, .13), transparent 34%), linear-gradient(180deg, #12070e, #050305 54%, #030203);
}

[data-theme=cyber_purple] {
    --bg: #040716;
    --surface: #0d1020;
    --surface-2: #151b33;
    --text: #f6f8ff;
    --muted: #a7b0cf;
    --line: #26335f;
    --accent: #19d3ff;
    --accent-2: #765dff;
    --accent-3: #e65fb8;
    --glow: rgba(25, 211, 255, .22);
    --primary-start: #2540ff;
    --primary-mid: #8a42ff;
    --primary-end: #19d3ff;
    --accent-glow: #19d3ff;
    --theme-offer: #18336f;
    --theme-bg-image: radial-gradient(ellipse at 18% -8%, rgba(37, 64, 255, .2), transparent 42%), radial-gradient(ellipse at 86% 22%, rgba(25, 211, 255, .13), transparent 34%), linear-gradient(180deg, #070b20, #03050d 58%, #010204);
}

[data-theme=luxury_minimal] {
    --bg: #070504;
    --surface: #15100d;
    --surface-2: #211712;
    --text: #fbf2e4;
    --muted: #b8a997;
    --line: #4d382b;
    --accent: #d7a25e;
    --accent-2: #8d4b40;
    --accent-3: #f3d49a;
    --glow: rgba(215, 162, 94, .18);
    --primary-start: #6c332d;
    --primary-mid: #b47a4d;
    --primary-end: #f3d49a;
    --accent-glow: #d7a25e;
    --theme-offer: #4b2b20;
    --theme-bg-image: radial-gradient(ellipse at 22% -8%, rgba(215, 162, 94, .14), transparent 40%), radial-gradient(ellipse at 88% 24%, rgba(141, 75, 64, .12), transparent 34%), linear-gradient(180deg, #120b08, #060403 58%, #020101);
}

html,
body {
    background-color: var(--bg);
    color: var(--text);
}

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

.offer {
    background: var(--theme-offer) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--theme-offer) 55%, transparent) !important;
}

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.15em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.primary,
.send-button,
.mode-switch button.active {
    background: linear-gradient(110deg, var(--primary-start), var(--primary-mid), var(--primary-end)) !important;
}

.panel {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-color: var(--line);
}