/* Enjoy's supplied crown logo: black, violet and a soft neon glow. */
:root {
  color-scheme: dark;
  color: #f7f2ff;
  background: #09050f;
  --accent: #c291ff;
  --pink: var(--accent);
  --muted: #b5a8c4;
  --line: #342344;
  --surface: #17101f;
  --surface-raised: #22152f;
  --gradient: linear-gradient(125deg, #7130cf, #8c38d7 60%, #7430c3);
}
body { background: #09050f; }
#app { background: radial-gradient(ellipse at 85% 0, #42126724, transparent 430px), #09050f; }
button, input, textarea { accent-color: #b782ff; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
.avatar-picker label:has(input:focus-visible) { outline: 3px solid #d7b5ff; outline-offset: 3px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.topbar { height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; }
.topbar .brand { grid-column: 2; }
.topbar .avatar-button { grid-column: 3; justify-self: end; }
.brand { width: 74px; height: 74px; margin: 0; object-fit: contain; border-radius: 0; }
.auth-page { padding-top: 26px; }
.auth-logo { width: 140px; height: 140px; margin: 0 auto 24px; object-fit: contain; border-radius: 0; }
.eyebrow { color: #c8a2f0; }
.pill { color: #c4a3e7; background: #1a1028; }
.icon-btn { background: var(--surface-raised); }
.intro h1 span { color: #c998ff; text-shadow: 0 0 30px #a34aff38; }
.hero { background: radial-gradient(ellipse at 100% 0, #792eb036, transparent 65%), linear-gradient(120deg, #20112f, #160d21); border-color: #613083; box-shadow: inset 0 1px 0 #d89cff1c, 0 14px 36px #0004; }
.hero p { color: #c4b1d4; }
.primary { border: 1px solid #b983f347; box-shadow: 0 6px 24px #8027d130, inset 0 1px 0 #e0b9ff24; }
.primary:active { filter: brightness(1.12); }
.hero-mark { width: 108px; height: 108px; background: transparent; border-radius: 0; transform: rotate(-7deg); box-shadow: none; }
.hero-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.tag { background: #742bcb; box-shadow: 0 0 18px #913bef2e; }
.live-start, .settings-group button, .message-item { background: var(--surface); }
.tile-icon { background: #2c1640; }
.fineprint, .auth-page .fineprint, .field small, .profile-head p { color: var(--muted); }
.nav { background: #100918f2; box-shadow: 0 -10px 28px #0003; }
.nav button { color: #afa0be; }
.nav button.active { color: #d1a9ff; }
.nav button.active .nav-icon { background: #a45af51c; border-radius: 10px; padding: 0 10px; }
.nav button.create .nav-icon { background: var(--gradient); color: #fff; box-shadow: 0 0 18px #8c34dd33; }
.filter { background: #1c1228; color: #baacc9; border: 1px solid #32203f; }
.filter.active { background: #7430c3; border-color: #b382e0; color: #fff; }
.empty { background: linear-gradient(150deg, #1c1128, #140d1c); border: 1px solid var(--line); }
.camera-surface { background: radial-gradient(ellipse at 75% 22%, #472363, #170d24 75%); border: 1px solid #4c2964; }
.camera-placeholder > svg { color: #c795ff; }
.camera-placeholder p { color: #cbbbd9; }
.field input, .field textarea { background: #191022; border-color: #453052; color: #f7f2ff; caret-color: #d4a9ff; }
.field input::placeholder, .field textarea::placeholder { color: #a99ab7; opacity: 1; }
.field input:focus, .field textarea:focus { border-color: #b77ae9; }
.field input:-webkit-autofill { -webkit-text-fill-color: #f7f2ff; -webkit-box-shadow: 0 0 0 1000px #191022 inset; }
.avatar { border-color: #190d25; box-shadow: 0 0 0 2px #8f49c9, 0 0 25px #8f2ae72b; }
.avatar.small { border-color: #2c153e; }
.color-0 { background: linear-gradient(135deg, #6830be, #8d2dd1); }
.color-1 { background: linear-gradient(135deg, #126661, #185a55); }
.color-2 { background: linear-gradient(135deg, #245cab, #31488e); }
.color-3 { background: linear-gradient(135deg, #9c396b, #7d2858); }
.color-4 { background: linear-gradient(135deg, #94511c, #763e18); }
.color-5 { background: linear-gradient(135deg, #605072, #49385b); }
.avatar-picker label:has(input:checked) { outline-color: #d4a5ff; }
.settings-group button > svg:first-child { color: #c799f1; }
.settings-group button > svg:last-child { color: #aa94bb; }
.settings-group button:active { background: var(--surface-raised); }
.chat-lines b { color: #dab6ff; }
.heart-btn { color: #d09bff; }
.heart-btn.liked { background: #8334cb; }
.record-dot { background: #d39aff; box-shadow: 0 0 8px #b261f6; }
.toast { background: #291738; border-color: #744398; }
dialog { background: #1c1129; color: #f7f2ff; border: 1px solid #6f3f90; box-shadow: 0 24px 80px #000b, 0 0 36px #8e39d21c; }
dialog::backdrop { background: #07030dc7; }
dialog p, .dialog-cancel { color: #c7b6d6; }
.media-feedback { background: #2d1829; border-color: #a85f83; color: #f7d7e8; }
.media-feedback button { background: #482446; color: #f6d8ff; }
.auth-tabs { background: #17101f; border: 1px solid #352143; }
.auth-tabs button { color: #baa8ca; }
.auth-tabs .active { background: #382048; color: #eedcff; box-shadow: inset 0 0 0 1px #8c54af55, 0 3px 10px #0003; }
.setup-note { background: #20132c; border-color: #694086; color: #eddbfc; }
.setup-note p { color: #c9b5d9; }
.form-error, .dialog-error, #form-error { color: #ff9bbb; }
.recovery-code { background: #311b42; color: #ead3ff; border: 1px solid #79449c; }
.mic-status { color: #c2a9d5; }
.footer-brand { color: #bca1cf; }
.glass { background: #171023a8; color: #fff; }
@media (min-width: 561px) {
  body { background: radial-gradient(ellipse at 50% 20%, #261138, #08040d 65%); }
  #app { box-shadow: 0 0 100px #8b32ce12, 0 0 0 1px #342344; }
}
@media (max-width: 350px) {
  .hero-mark { width: 82px; height: 82px; }
  .auth-logo { width: 124px; height: 124px; }
  .auth-page h1 { font-size: 28px; }
}