:root {
  --deep: #0b1a1f; --panel: #112830; --raised: #1c3d48;
  --text: #e8f0ee; --muted: #7fa0a4; --accent: #f2b134; --online: #5ad19a;
}
* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.45 "Segoe UI", system-ui, sans-serif; background: #0e2229; color: var(--text); height: 100vh; overflow: hidden; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Вход */
#auth { height: 100%; display: grid; place-items: center; }
.card { width: 330px; display: grid; gap: 10px; padding: 30px; background: var(--panel); border-radius: 12px; }
.card h1 { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; }
input { padding: 11px 13px; border: 0; border-radius: 8px; background: var(--deep); color: var(--text); font: inherit; }
button { padding: 11px; border: 0; border-radius: 8px; background: var(--accent); color: #1a1405; font: inherit; font-weight: 700; cursor: pointer; }
button.ghost { background: transparent; color: var(--muted); font-weight: 500; }
#err { color: #ff9b8a; min-height: 1.2em; font-size: 13px; }

/* Каркас: серверы | каналы | чат | участники */
#app { display: grid; grid-template-columns: 72px 232px 1fr 220px; height: 100%; }
#servers { background: var(--deep); padding: 12px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; overflow-y: auto; }
.srv { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--raised); font-weight: 700; cursor: pointer; transition: border-radius .15s, background .15s; }
.srv:hover, .srv.on { border-radius: 15px; background: var(--accent); color: #1a1405; }

#channels, #members { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
#channels header, main > header { padding: 14px 16px; font-weight: 700; border-bottom: 1px solid var(--deep); min-height: 56px; }
#channels header small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; user-select: all; }
#chList { flex: 1; padding: 8px; overflow-y: auto; }
.ch { padding: 7px 10px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.ch:hover, .ch.on { background: var(--raised); color: var(--text); }
.add { padding: 7px 10px; color: var(--muted); font-size: 13px; cursor: pointer; }
.add:hover { color: var(--accent); }
#me { padding: 13px 16px; background: var(--deep); font-weight: 600; }

/* Чат */
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#msgs { flex: 1; overflow-y: auto; padding: 12px 16px; }
.msg { position: relative; padding: 7px 0; }
.msg b { margin-right: 8px; }
.msg small { color: var(--muted); font-size: 12px; }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .del { position: absolute; right: 0; top: 6px; display: none; padding: 2px 9px; background: var(--raised); color: var(--muted); font-weight: 400; }
.msg:hover .del, .msg .del:focus-visible { display: block; }
#typing { height: 22px; padding: 0 16px; color: var(--muted); font-size: 13px; }
#input { margin: 0 16px 16px; padding: 13px 15px; background: var(--raised); }

/* Участники */
#members { padding: 14px 10px; overflow-y: auto; }
.lbl { padding: 0 8px 8px; color: var(--muted); font-size: 12px; }
.mem { padding: 5px 8px; color: var(--muted); }
.mem::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #35505a; }
.mem.on { color: var(--text); }
.mem.on::before { background: var(--online); }

@media (max-width: 900px) { #app { grid-template-columns: 72px 200px 1fr; } #members { display: none; } }

/* Личные сообщения и группы */
.ch small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.ch.unread { color: var(--text); font-weight: 700; }
.ch.unread::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--accent); }
.srv.alert { box-shadow: 0 0 0 2px var(--accent); }
#home { margin-bottom: 4px; font-size: 20px; }

/* Ответы, реакции, правка */
.msg { margin: 0 -8px; padding: 7px 8px; border-radius: 6px; }
.msg:hover { background: rgba(255, 255, 255, .03); }
.quote { margin-bottom: 3px; padding-left: 8px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quote b { margin-right: 6px; color: var(--text); }
.rxs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rxs:empty { display: none; }
.rx { padding: 2px 9px; border-radius: 10px; background: var(--raised); font-size: 13px; cursor: pointer; }
.rx.mine { box-shadow: inset 0 0 0 1px var(--accent); }
.tools { position: absolute; right: 8px; top: -12px; display: none; align-items: center; gap: 2px; padding: 3px 6px; background: var(--raised); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.msg:hover .tools, .tools:focus-within { display: flex; }
.tools span { padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.tools span:hover { background: var(--panel); }
.tools button { margin-left: 4px; padding: 2px 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.tools button:hover { color: var(--accent); }
#replyBar { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 8px 12px; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 13px; }
#replyBar b { color: var(--text); }
#replyBar button { margin-left: auto; padding: 0 8px; background: none; color: var(--muted); }

/* Управление серверами и группами */
main > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
button.sm { padding: 5px 12px; background: var(--raised); color: var(--text); font-size: 13px; font-weight: 600; }
button.sm:hover { background: var(--accent); color: #1a1405; }
button.sm.danger { color: #ff9b8a; }
button.sm.danger:hover { background: #ff9b8a; color: #1a0a07; }
dialog { width: min(520px, 92vw); max-height: 85vh; overflow-y: auto; padding: 24px; border: 0; border-radius: 12px; background: var(--panel); color: var(--text); }
dialog::backdrop { background: rgba(5, 12, 15, .72); }
dialog h2 { margin-bottom: 12px; font-size: 20px; }
dialog h3 { margin: 18px 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
dialog .row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
dialog .row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
dialog .row input { flex: 1; }
dialog .row.end { justify-content: flex-end; margin-top: 14px; }
dialog small, .mem small { margin-left: 8px; color: var(--muted); font-size: 12px; }

/* Темы, аватарки и настройки */
:root { --bg: #0e2229; }
body { background: var(--bg); }
:root[data-theme="light"] { --bg: #ffffff; --deep: #e1eaec; --panel: #f1f6f7; --raised: #d6e2e5; --text: #12282e; --muted: #587379; }
:root[data-theme="midnight"] { --bg: #000; --deep: #000; --panel: #0a0b0c; --raised: #1a1d20; --text: #eef2f2; --muted: #8b9498; }
.av { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; color: #1a1405; font-size: 12px; font-weight: 700; vertical-align: middle; }
.noav .av { display: none; }
.dense .msg { padding-top: 2px; padding-bottom: 2px; }
#me { display: flex; align-items: center; gap: 4px; }
#me > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
#me small { display: block; margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.mem.on.away::before { background: #f2b134; }
.mem.on.dnd::before { background: #ff6b5a; }
select, textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--deep); color: var(--text); font: inherit; resize: vertical; }
button.sm.on { background: var(--accent); color: #1a1405; }
#settings { width: min(760px, 94vw); height: min(560px, 88vh); padding: 0; overflow: hidden; }
.set { display: grid; grid-template-columns: 180px 1fr; height: 100%; }
.set nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 10px; background: var(--deep); }
.set nav button { padding: 9px 12px; background: transparent; color: var(--muted); font-weight: 500; text-align: left; }
.set nav button.on, .set nav button:hover { background: var(--raised); color: var(--text); }
.set section { min-height: 0; padding: 24px 28px; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.set h2 { margin-bottom: 8px; font-size: 20px; }
.set h3 { margin: 14px 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.sws, .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.sw.on { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--text); }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.opt input { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); }
.prev { display: flex; align-items: center; }
.prev .av { width: 44px; height: 44px; margin-right: 12px; font-size: 20px; }
.hint { color: var(--muted); font-size: 13px; }

/* Режимы, карточка пользователя, анимации */
.mem.on.idle::before { background: #f2b134; }
.mem.on.sleep::before { background: #8f86d9; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #35505a; }
.dot.on { background: var(--online); }
.dot.on.idle { background: #f2b134; }
.dot.on.dnd { background: #ff6b5a; }
.dot.on.sleep { background: #8f86d9; }
.who, .mem[data-user] { cursor: pointer; }
.who:hover b { text-decoration: underline; }
#card { width: min(380px, 92vw); }
#card .prev b { font-size: 18px; }
.stat { margin-top: 12px; }
.bio { color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.set nav button.danger { color: #ff9b8a; }
.set ul { margin: 0 0 4px 18px; color: var(--muted); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes msgOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes dlgIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.msg.new { animation: msgIn .22s ease-out; }
.msg.out { animation: msgOut .2s ease-in forwards; }
dialog[open] { animation: dlgIn .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .msg.new, .msg.out, dialog[open] { animation: none; } }

/* Исправления: окна по центру, аватарка в панели пользователя */
dialog { margin: auto; }
#me > .av { flex: none; width: 36px; height: 36px; margin-right: 10px; font-size: 16px; }

/* Вход и регистрация, окна ввода */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--deep); }
.tabs button { flex: 1; background: transparent; color: var(--muted); font-weight: 600; }
.tabs button.on { background: var(--raised); color: var(--text); }
.fields { display: grid; gap: 10px; }
.fld { display: grid; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.fields .fld { margin-top: 0; }
input { color-scheme: dark; }
:root[data-theme="light"] input { color-scheme: light; }
#askBox { width: min(420px, 92vw); }

/* Жидкое стекло */
body.glass { background: radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%), radial-gradient(800px 600px at 92% 88%, rgba(98, 182, 255, .38), transparent 62%), linear-gradient(135deg, #0b2a33, #17203f 60%, #241b44); background-attachment: fixed; }
:root[data-theme="light"] body.glass { background: radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%), radial-gradient(800px 600px at 92% 88%, rgba(98, 182, 255, .45), transparent 62%), linear-gradient(135deg, #e9f3f5, #dfe6f7); background-attachment: fixed; }
body.glass #app { gap: 10px; padding: 10px; }
body.glass #servers, body.glass #channels, body.glass main, body.glass #members, body.glass .card {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .17); border-radius: 22px;
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px rgba(0, 0, 0, .22);
}
body.glass #channels { overflow: hidden; }
body.glass #channels header, body.glass main > header { border-bottom-color: rgba(255, 255, 255, .13); }
body.glass #me { background: rgba(255, 255, 255, .08); }
body.glass input, body.glass select, body.glass textarea { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); }
body.glass #input { border-radius: 16px; }
body.glass .srv, body.glass button.sm, body.glass .rx { background: rgba(255, 255, 255, .14); }
body.glass .srv:hover, body.glass .srv.on, body.glass button.sm:hover, body.glass button.sm.on { background: var(--accent); }
body.glass .ch:hover, body.glass .ch.on, body.glass .set nav button.on, body.glass .set nav button:hover, body.glass .tabs button.on { background: rgba(255, 255, 255, .16); }
body.glass .msg:hover { background: rgba(255, 255, 255, .05); }
body.glass dialog { background: rgba(28, 44, 56, .55); border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 24px 60px rgba(0, 0, 0, .45); }
body.glass dialog::backdrop { background: rgba(5, 12, 20, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.glass .set nav, body.glass .tabs { background: rgba(255, 255, 255, .06); }
body.glass .tools { background: rgba(36, 54, 66, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="light"] body.glass #servers, :root[data-theme="light"] body.glass #channels, :root[data-theme="light"] body.glass main, :root[data-theme="light"] body.glass #members, :root[data-theme="light"] body.glass .card { background: rgba(255, 255, 255, .5); }
:root[data-theme="light"] body.glass dialog { background: rgba(255, 255, 255, .7); }

/* Закреплённые, меню сообщения */
.hbtns { display: flex; gap: 8px; }
.pin { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: var(--deep); }
.pin > div:first-child { flex: 1; min-width: 0; }
.pin p { max-height: 5.5em; margin-top: 2px; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.pin .row { padding: 0; }
.pinned { margin-left: 8px; color: var(--accent) !important; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } to { background: transparent; } }
.msg.flash { animation: flash 1.9s ease-out; }
.ctx { position: fixed; z-index: 50; min-width: 240px; padding: 6px; border-radius: 14px; background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.ctx button { display: block; width: 100%; padding: 8px 12px; border-radius: 8px; background: none; color: var(--text); font-weight: 500; text-align: left; }
.ctx button:hover { background: var(--accent); color: #1a1405; }
.ctx button.danger { color: #ff9b8a; }
body.glass .ctx { background: rgba(28, 44, 56, .62); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; } }

/* Настройки: больше места, тёмные полосы прокрутки */
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
:root[data-theme="light"] * { scrollbar-color: rgba(0, 0, 0, .28) transparent; }
#settings { width: min(980px, 95vw); height: min(780px, 94vh); }
.set { grid-template-columns: 230px 1fr; }
.set section { display: block; padding: 28px 36px; }
.set section > input, .set section > select, .set section > textarea { display: block; width: 100%; margin-bottom: 4px; }
kbd { padding: 4px 9px; border-radius: 8px; background: var(--raised); font: 600 12px/1.2 inherit; white-space: nowrap; }

/* Упоминания, подсказки, заглушённые */
.msg.mention { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.mention-chip { padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 28%, transparent); font-weight: 600; }
.ch.muted { opacity: .55; }
#mbox { position: fixed; z-index: 40; max-height: 260px; padding: 6px; overflow-y: auto; border-radius: 14px; background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.mi { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.mi small { margin-left: auto; color: inherit; font-size: 12px; opacity: .7; }
.mi.on, .mi:hover { background: var(--accent); color: #1a1405; }
#swList { margin-top: 10px; }
body.glass #mbox { background: rgba(28, 44, 56, .66); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }

/* Поле ввода, вложения, опросы, публикации */
.composer { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; }
.composer #input { flex: 1; margin: 0; }
.composer button.sm { width: 42px; height: 42px; padding: 0; border-radius: 12px; font-size: 20px; }
.media { display: block; max-width: min(420px, 100%); max-height: 320px; margin-top: 6px; border-radius: 12px; }
audio { display: block; max-width: 100%; margin-top: 6px; }
.filechip { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--raised); color: var(--text); text-decoration: none; }
.filechip small { color: var(--muted); }
.sticker { margin-top: 4px; font-size: 64px; line-height: 1.1; }
.msg.post { padding-left: 14px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.posttitle { margin: 2px 0; font-size: 1.2em; font-weight: 700; }
.poll { display: grid; gap: 6px; max-width: 460px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--deep); }
.poll small { color: var(--muted); font-size: 12px; margin: 0; }
.opt-row { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--raised); overflow: hidden; cursor: pointer; }
.opt-row i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.opt-row span, .opt-row em { position: relative; font-style: normal; }
.opt-row.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.pad { padding: 16px; }
.forum { padding: 4px 0; }
.forum .row { justify-content: space-between; }
.topic { display: grid; gap: 2px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--raised); cursor: pointer; }
.topic small { margin: 0; color: var(--muted); }
.topic:hover { outline: 2px solid var(--accent); }
.topic.unread b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--accent); }
.voice { padding: 60px 20px; text-align: center; }
.voice .big { font-size: 56px; }
#epanel { position: fixed; z-index: 45; width: 340px; padding: 10px; border-radius: 16px; background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.etabs { display: flex; gap: 6px; margin-bottom: 8px; }
.egrid { display: flex; flex-wrap: wrap; gap: 2px; max-height: 240px; overflow-y: auto; }
.egrid span { padding: 5px 6px; border-radius: 8px; font-size: 22px; cursor: pointer; }
.egrid span:hover { background: var(--panel); }
.egrid.st span { font-size: 38px; }
body.glass #epanel { background: rgba(28, 44, 56, .66); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }

/* Фото профиля, украшения, страница профиля */
.av { background-size: cover; background-position: center; }
.av.deco-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.av.deco-neon { box-shadow: 0 0 0 2px var(--accent), 0 0 14px 2px var(--accent); }
.av.deco-gold { box-shadow: 0 0 0 2px #f5d76e, 0 0 12px rgba(245, 215, 110, .6); }
.av.deco-ice { box-shadow: 0 0 0 2px #9fe3ff, 0 0 14px rgba(120, 200, 255, .7); }
.av.big { width: 76px; height: 76px; margin: 0; font-size: 32px; }
#card { padding: 0; overflow: hidden; }
#card .banner, .pcard .banner { height: 92px; }
.cbody { padding: 0 22px 20px; }
.cbody .av.big { margin: -38px 0 8px; outline: 5px solid var(--panel); }
.nm { font-size: 20px; font-weight: 700; }
.since { margin-top: 8px; color: var(--muted); font-size: 13px; }
.pcard { margin-bottom: 8px; overflow: hidden; border-radius: 14px; background: var(--deep); }
.pcard .banner { height: 70px; }
.pbody { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px 14px; }
.pbody .av.big { margin: -34px 0 0; outline: 4px solid var(--deep); }

/* Темы, пузыри, фон чата */
:root { --g1: #0b2a33; --g2: #17203f; --g3: #241b44; }
:root[data-theme="sunset"] { --bg: #22121c; --deep: #1a0d15; --panel: #2e1a26; --raised: #41253a; --text: #fbeee9; --muted: #c79aa6; --g1: #3a1530; --g2: #4a1f3a; --g3: #5a2a1f; }
:root[data-theme="forest"] { --bg: #0f1c15; --deep: #0a140e; --panel: #15271c; --raised: #1f3a2a; --text: #e9f4ec; --muted: #8fb09b; --g1: #0b2a1a; --g2: #133524; --g3: #1d3b22; }
:root[data-theme="grape"] { --bg: #1a1330; --deep: #120d24; --panel: #221a40; --raised: #322658; --text: #f0ecfb; --muted: #a79bd0; --g1: #1c1240; --g2: #2a1b52; --g3: #3a1e55; }
body.glass { background: radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%), radial-gradient(800px 600px at 92% 88%, rgba(98, 182, 255, .38), transparent 62%), linear-gradient(135deg, var(--g1), var(--g2) 60%, var(--g3)); background-attachment: fixed; }
.bubbles .msg { max-width: min(640px, 88%); margin: 6px 0; padding: 8px 12px; border-radius: 16px; background: var(--raised); }
.bubbles .msg.mine { margin-left: auto; background: color-mix(in srgb, var(--accent) 28%, var(--raised)); }
body[data-wp="dots"] #msgs { background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.3px); background-size: 22px 22px; }
body[data-wp="grid"] #msgs { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 26px 26px; }

/* Новые темы: Cosmic, Vanilla, Lavender, Violet */
:root { --glass: rgba(255, 255, 255, .08); --glass-line: rgba(255, 255, 255, .17); --glass-dlg: rgba(28, 44, 56, .55); --glass-hi: rgba(255, 255, 255, .3);
  --wall: radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%), radial-gradient(800px 600px at 92% 88%, rgba(98, 182, 255, .38), transparent 62%), linear-gradient(135deg, var(--g1), var(--g2) 60%, var(--g3)); }
:root[data-theme="cosmic"] { --bg: #23212c; --deep: #1b1a23; --panel: #2d2b3a; --raised: #3b3850; --text: #efecf8; --muted: #a8a4bd;
  --glass: rgba(52, 46, 72, .42); --glass-dlg: rgba(36, 32, 52, .72);
  --wall: radial-gradient(1.4px 1.4px at 12% 16%, #fff, transparent), radial-gradient(1px 1px at 28% 34%, #fff, transparent), radial-gradient(1.6px 1.6px at 44% 12%, #ffe9f0, transparent), radial-gradient(1px 1px at 63% 26%, #fff, transparent), radial-gradient(1.4px 1.4px at 82% 14%, #fff, transparent), radial-gradient(1px 1px at 91% 38%, #cfe, transparent), radial-gradient(1.2px 1.2px at 8% 52%, #fff, transparent), radial-gradient(1.6px 1.6px at 36% 66%, #fff, transparent), radial-gradient(1px 1px at 58% 78%, #fff, transparent), radial-gradient(1.4px 1.4px at 76% 62%, #fff, transparent), radial-gradient(1px 1px at 94% 84%, #fff, transparent), radial-gradient(1.2px 1.2px at 20% 90%, #fff, transparent), radial-gradient(520px 380px at 22% 68%, rgba(214, 50, 92, .42), transparent 72%), radial-gradient(420px 320px at 14% 74%, rgba(190, 200, 255, .22), transparent 70%), radial-gradient(760px 520px at 84% 8%, rgba(130, 80, 180, .24), transparent 70%), #0b0a12; }
:root[data-theme="vanilla"] { --bg: #f1fec8; --deep: #e1eeb2; --panel: #f6ffd9; --raised: #e6f3b7; --text: #2b311e; --muted: #667050;
  --glass: rgba(246, 255, 214, .6); --glass-line: rgba(255, 255, 255, .6); --glass-dlg: rgba(246, 255, 217, .82); --glass-hi: rgba(255, 255, 255, .7);
  --wall: radial-gradient(70px 44px at 14% 20%, rgba(34, 28, 24, .9), transparent 72%), radial-gradient(50px 34px at 32% 62%, rgba(34, 28, 24, .85), transparent 72%), radial-gradient(90px 56px at 78% 18%, rgba(34, 28, 24, .92), transparent 72%), radial-gradient(60px 40px at 88% 70%, rgba(34, 28, 24, .88), transparent 72%), radial-gradient(46px 30px at 54% 88%, rgba(34, 28, 24, .85), transparent 72%), radial-gradient(900px 600px at 30% 20%, #f7ffd8, transparent 70%), linear-gradient(135deg, #f1fec8, #dfeaa5); }
:root[data-theme="lavender"] { --bg: #d2c3f6; --deep: #c0aee9; --panel: #ddd1f9; --raised: #cbbaf0; --text: #1b1230; --muted: #5d4e85;
  --glass: rgba(214, 200, 248, .6); --glass-line: rgba(255, 255, 255, .55); --glass-dlg: rgba(220, 208, 250, .82); --glass-hi: rgba(255, 255, 255, .65);
  --wall: radial-gradient(260px 220px at 14% 22%, rgba(200, 180, 240, .85), transparent 70%), radial-gradient(240px 200px at 38% 78%, rgba(170, 160, 225, .8), transparent 70%), radial-gradient(280px 240px at 86% 30%, rgba(190, 165, 235, .8), transparent 70%), radial-gradient(220px 200px at 70% 88%, rgba(160, 140, 215, .75), transparent 70%), linear-gradient(135deg, #16111f, #231a33); }
:root[data-theme="violet"] { --bg: #36255c; --deep: #271a45; --panel: #3e2c68; --raised: #51397f; --text: #f3eeff; --muted: #b9a8e0;
  --glass: rgba(72, 52, 122, .5); --glass-dlg: rgba(54, 37, 92, .76);
  --wall: radial-gradient(420px 360px at 20% 55%, rgba(140, 110, 235, .55), transparent 70%), radial-gradient(300px 260px at 78% 25%, rgba(170, 140, 255, .42), transparent 70%), radial-gradient(260px 220px at 85% 80%, rgba(120, 100, 230, .42), transparent 70%), radial-gradient(200px 180px at 45% 15%, rgba(150, 120, 250, .3), transparent 70%), linear-gradient(160deg, #0b0722, #1c1240); }
:root[data-theme="vanilla"], :root[data-theme="lavender"] { color-scheme: light; }
:root[data-theme="vanilla"] *, :root[data-theme="lavender"] * { scrollbar-color: rgba(0, 0, 0, .28) transparent; }
body.glass { background: var(--wall); background-attachment: fixed; }
body.glass #servers, body.glass #channels, body.glass main, body.glass #members, body.glass .card { background: var(--glass); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px rgba(0, 0, 0, .22); }
body.glass dialog, body.glass .ctx, body.glass #mbox, body.glass #epanel, body.glass .tools, body.glass .toast { background: var(--glass-dlg); }
body.glass #me { background: color-mix(in srgb, var(--glass) 70%, transparent); }
:root body.glass.custom-bg { background: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)), var(--custom-wall) center / cover no-repeat fixed; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tile { display: grid; gap: 2px; padding: 10px 12px; border: 2px solid transparent; border-radius: 14px; background: var(--deep); color: var(--text); font-weight: 600; text-align: left; transition: transform .15s, border-color .15s; }
.tile i { display: block; height: 46px; margin-bottom: 6px; border-radius: 10px; }
.tile small { min-height: 14px; color: var(--muted); font-size: 11px; font-weight: 400; }
.tile:hover { transform: translateY(-2px); }
.tile.on { border-color: var(--accent); }

/* Анимации: вкладки, окна, уведомления */
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(-28px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(28px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px) scale(.985); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(10px); } }
@keyframes setIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(46px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(46px) scale(.96); } }
@keyframes fadeIn { from { opacity: 0; } }
.swap { animation: paneIn .24s ease-out; }
.set section.enter { animation: paneIn .26s ease-out; }
.fields { animation: paneIn .22s ease-out; }
#settings[open] { animation: setIn .3s cubic-bezier(.2, .9, .3, 1.1); }
dialog[open]::backdrop { animation: fadeIn .22s ease-out; }
#app.enter #servers { animation: slideL .5s cubic-bezier(.2, .8, .2, 1) both; }
#app.enter #channels { animation: slideL .5s .08s cubic-bezier(.2, .8, .2, 1) both; }
#app.enter main { animation: riseIn .55s .16s cubic-bezier(.2, .8, .2, 1) both; }
#app.enter #members { animation: slideR .5s .24s cubic-bezier(.2, .8, .2, 1) both; }
#auth.pre .card { opacity: 0; }
#auth.enter .card { animation: cardIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.srv:active, .tile:active, button.sm:active { transform: scale(.94); }
#toasts { position: fixed; top: 16px; right: 16px; z-index: 90; display: grid; gap: 10px; width: min(360px, 92vw); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); pointer-events: auto; animation: toastIn .34s cubic-bezier(.2, .9, .3, 1.1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.toast.out { animation: toastOut .26s ease-in forwards; }
.toast.click { cursor: pointer; }
.toast .tt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toast small { margin: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast .x { padding: 2px 6px; background: none; color: var(--muted); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .swap, .set section.enter, .fields, #settings[open], dialog[open]::backdrop, #app.enter *, #auth.enter .card, .toast { animation: none !important; } }

/* Анимация запуска */
#intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: #05060f; color: #fff; cursor: pointer; }
#intro .glow { position: absolute; left: -10%; right: -10%; bottom: -38%; height: 78%; background: radial-gradient(closest-side, rgba(125, 92, 255, .9), rgba(60, 70, 225, .42) 55%, transparent); filter: blur(34px); animation: glowUp 1.9s ease-out both; }
#intro .stage { position: relative; display: grid; place-items: center; width: min(560px, 82vw); height: 360px; perspective: 1100px; }
#intro .win { display: grid; grid-template-columns: 56px 118px 1fr; width: 100%; height: 330px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: 0 30px 90px rgba(80, 60, 220, .5), inset 0 1px 0 rgba(255, 255, 255, .3); animation: introWin 3.1s cubic-bezier(.2, .8, .2, 1) both; }
#intro .wrail { display: grid; align-content: start; gap: 10px; padding: 16px 12px; background: rgba(0, 0, 0, .25); }
#intro .wrail i { display: block; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
#intro .wrail i:first-child { background: rgba(150, 120, 255, .9); }
#intro .wside { padding: 18px 12px; background: rgba(0, 0, 0, .12); }
#intro .wside u { display: block; height: 11px; margin-bottom: 16px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
#intro .wchat { display: grid; align-content: center; gap: 4px; padding: 18px; }
#intro .b { display: block; width: 58%; height: 36px; margin: 6px 0; border-radius: 15px; background: rgba(255, 255, 255, .2); opacity: 0; animation: pop .5s ease-out both; }
#intro .b.s { width: 40%; }
#intro .b.r { margin-left: auto; background: rgba(150, 120, 255, .78); }
#intro .b:nth-child(1) { animation-delay: .9s; }
#intro .b:nth-child(2) { animation-delay: 1.2s; }
#intro .b:nth-child(3) { animation-delay: 1.5s; }
#intro .b:nth-child(4) { animation-delay: 1.8s; }
#intro .logo { position: absolute; margin: 0; font-size: clamp(34px, 8vw, 70px); font-weight: 700; animation: logoIn 1.3s 2s cubic-bezier(.2, .8, .2, 1) both; }
#intro .tag { position: absolute; margin: 78px 0 0; color: rgba(255, 255, 255, .7); letter-spacing: .08em; animation: fadeUp .9s 2.7s both; }
#intro .skip { position: absolute; top: 18px; right: 18px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); font-weight: 500; }
#intro.out { animation: introOut .6s ease forwards; }
@keyframes glowUp { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
@keyframes introWin {
  0% { opacity: 0; transform: translateY(150px) rotateX(58deg) rotateY(-24deg) scale(.78); filter: blur(12px); }
  50% { opacity: 1; transform: translateY(0) rotateX(10deg) rotateY(-5deg) scale(1); filter: blur(0); }
  72% { opacity: 1; transform: rotateX(0) rotateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-24px) scale(.9); filter: blur(8px); }
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes logoIn { from { opacity: 0; letter-spacing: .5em; filter: blur(14px); } to { opacity: 1; letter-spacing: .06em; filter: blur(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes introOut { to { opacity: 0; transform: scale(1.04); filter: blur(6px); } }

/* Красивые переключатели */
.opt { align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.opt .ol { display: grid; gap: 2px; }
.opt .ol small { margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.opt input[type=checkbox] { order: 2; flex: none; position: relative; width: 48px; height: 28px; padding: 0; border-radius: 14px; background: color-mix(in srgb, var(--muted) 35%, var(--deep)); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background .22s; }
.opt input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); transition: transform .26s cubic-bezier(.3, 1.5, .5, 1); }
.opt input[type=checkbox]:checked { background: var(--accent); }
.opt input[type=checkbox]:checked::after { transform: translateX(20px); }
.opt input[type=checkbox]:active::after { width: 26px; }
.opt input[type=checkbox]:checked:active::after { transform: translateX(16px); }
.opt input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Вход: сохранённые аккаунты, обрезка фото, устройства */
#savedAcc { display: grid; gap: 6px; }
#savedAcc:empty { display: none; }
#savedAcc .acc { display: flex; justify-content: space-between; align-items: center; background: var(--raised); color: var(--text); font-weight: 600; }
#savedAcc .acc small { color: var(--muted); font-weight: 400; }
#cropBox { width: min(380px, 94vw); }
#cv { display: block; width: 300px; height: 300px; margin: 8px auto; border-radius: 14px; background: #000; cursor: grab; touch-action: none; }
#cv:active { cursor: grabbing; }
#cropBox input[type=range] { width: 100%; padding: 0; accent-color: var(--accent); }
.cur { color: var(--online) !important; }
.set .row span { display: grid; gap: 1px; }
.set .row span small { margin: 0; }
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; }
body.glass #servers, body.glass #channels, body.glass main, body.glass #members, body.glass .card { border-radius: var(--rad, 22px); }

/* Главная: друзья, лента, истории */
.hl { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.hl:hover, .hl.on { background: var(--raised); color: var(--text); }
.hl em { padding: 1px 8px; border-radius: 10px; background: var(--accent); color: #1a1405; font-size: 12px; font-style: normal; font-weight: 700; }
.sep { height: 1px; margin: 6px 4px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.empty { padding: 80px 20px; text-align: center; }
.empty .big { font-size: 52px; }
.view { padding: 4px 0 20px; }
.vtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--raised); }
.fn { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: pointer; }
.fn > span:last-child { display: grid; min-width: 0; }
.fn small { margin: 0; color: var(--muted); }
.fb { display: flex; gap: 8px; flex: none; }
.addf { max-width: 520px; }
.addf .row input { flex: 1; }
.stories { display: flex; gap: 14px; padding: 6px 2px 14px; overflow-x: auto; }
.story { display: grid; justify-items: center; gap: 6px; min-width: 70px; cursor: pointer; }
.story small { max-width: 76px; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.story .av { width: 58px; height: 58px; margin: 0; font-size: 24px; }
.story.new .av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.story .plus { background: var(--raised); color: var(--text); font-size: 30px; font-weight: 400; }
.pcomp { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: 14px; background: var(--raised); }
.pcomp .row { justify-content: space-between; }
.post { margin-bottom: 12px; padding: 14px; border-radius: 14px; background: var(--raised); }
.post .ph { display: flex; align-items: center; gap: 2px; cursor: pointer; }
.post .ph small { margin-left: 8px; color: var(--muted); }
.post p { margin-top: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.post .pa { display: flex; gap: 8px; margin-top: 10px; }
#storyBox { width: min(420px, 94vw); padding: 0; overflow: hidden; background: #000; }
.sv { position: relative; display: grid; align-items: center; width: 100%; height: min(720px, 86vh); }
.sv .bars { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.sv .bars i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv .bars i.done::after, .sv .bars i.cur::after { content: ""; position: absolute; inset: 0; background: #fff; }
.sv .bars i.cur::after { transform-origin: left; animation: barfill 5s linear both; }
@keyframes barfill { from { transform: scaleX(0); } }
.sv .sh { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 4px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.sv .sh small { margin: 0 auto 0 8px; color: rgba(255, 255, 255, .8); }
.sv .sh .x { padding: 4px 8px; background: rgba(0, 0, 0, .35); color: #fff; }
.sv .stext { padding: 0 28px; color: #fff; font-size: 26px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.sv .stext.cap { position: absolute; left: 0; right: 0; bottom: 70px; font-size: 18px; text-shadow: 0 1px 8px #000; }
.sv .sbtns { position: absolute; inset: 60px 0 60px; z-index: 2; display: flex; }
.sv .sbtns span { flex: 1; }
.sv .sfoot { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; justify-content: space-between; }

/* Управление сервером, голос, GIF */
dialog.wide { width: min(900px, 95vw); }
.sbody { max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.rolesbox { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.rlist { display: grid; align-content: start; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--deep); cursor: pointer; }
.rrow.on { outline: 2px solid var(--accent); }
.rrow i, .dot2 { display: inline-block; flex: none; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; }
.rrow span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.rrow small { margin: 0; color: var(--muted); font-size: 11px; }
.rmv { display: flex; gap: 4px; }
.rmv .sm { padding: 2px 8px; }
.redit { display: grid; align-content: start; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.chip { padding: 1px 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 28%, transparent); box-shadow: inset 0 0 0 1px var(--c); font-size: 11px; font-style: normal; }
.mrow { padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.mrow .row { flex-wrap: wrap; }
.mroles { padding: 4px 12px 8px 36px; }
.vgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0; }
.vcard { display: grid; justify-items: center; gap: 4px; min-width: 120px; padding: 14px; border-radius: 16px; background: var(--raised); }
.vcard .av { margin: 0 0 4px; }
.vcard small { margin: 0; color: var(--muted); }
.vcard.speaking .av, .vu.speaking .av { box-shadow: 0 0 0 3px var(--online); }
.vlist { display: grid; gap: 2px; padding: 2px 0 6px 28px; }
.vu { display: flex; align-items: center; color: var(--muted); font-size: 13px; }
.vu .av { width: 20px; height: 20px; font-size: 11px; }
.vu em { margin-left: auto; font-style: normal; }
#voicebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--online) 40%, transparent); background: color-mix(in srgb, var(--online) 10%, transparent); }
#voicebar[hidden] { display: none; }
.vb { display: grid; min-width: 0; }
.vb small { margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.vbtns { display: flex; gap: 4px; }
.vbtns .sm { padding: 5px 9px; }
.egrid.gif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.egrid.gif img { width: 100%; height: 80px; border-radius: 8px; object-fit: cover; cursor: pointer; }
#epanel input { width: 100%; margin-bottom: 6px; }

/* Исправления: аватарки в строках, значок разработчика */
dialog .row .av, .set .row .av, .frow .av, .mrow .av, .vcard .av, .rrow .av { flex: none; display: inline-grid; }
.devb { display: inline-block; margin-left: 4px; vertical-align: -3px; filter: drop-shadow(0 0 4px rgba(245, 197, 66, .55)); }
.devb svg { width: 16px; height: 16px; }
.chk { display: grid; max-height: 220px; overflow-y: auto; padding: 0 4px; border-radius: 10px; background: var(--deep); }
.chk .opt { padding: 8px 6px; }

/* ===== Темы: Кофейная, Лавовая, Кристальная, Космическая ===== */
:root[data-theme="coffee"] { --bg: #2b1a12; --deep: #1f120c; --panel: #3a2418; --raised: #4d311f; --text: #f6e9dc; --muted: #bfa48c;
  --glass: rgba(86, 56, 36, .46); --glass-dlg: rgba(54, 34, 22, .8); --g1: #1d0f08; --g2: #3b2315; --g3: #5a3a24;
  --wall: radial-gradient(600px 400px at 20% 20%, rgba(198, 156, 109, .35), transparent 65%), radial-gradient(500px 380px at 85% 80%, rgba(120, 70, 38, .5), transparent 65%), radial-gradient(220px 70px at 70% 30%, rgba(255, 235, 210, .14), transparent 70%), radial-gradient(160px 50px at 62% 36%, rgba(255, 235, 210, .1), transparent 70%), linear-gradient(145deg, #1d0f08, #3b2315 55%, #5a3a24); }
:root[data-theme="lava"] { --bg: #1a0905; --deep: #130603; --panel: #2a0f08; --raised: #43170b; --text: #ffeee6; --muted: #d39a86;
  --glass: rgba(88, 24, 8, .44); --glass-dlg: rgba(60, 16, 6, .8); --g1: #0c0200; --g2: #2a0a02; --g3: #5a1403;
  --wall: radial-gradient(520px 340px at 15% 88%, rgba(255, 106, 0, .6), transparent 65%), radial-gradient(440px 300px at 82% 92%, rgba(255, 60, 0, .5), transparent 65%), radial-gradient(320px 220px at 55% 104%, rgba(255, 200, 60, .4), transparent 70%), radial-gradient(260px 160px at 40% 20%, rgba(255, 90, 20, .12), transparent 70%), linear-gradient(180deg, #0c0200, #2a0a02 60%, #5a1403); }
:root[data-theme="crystal"] { --bg: #eaf6ff; --deep: #d2e8fb; --panel: #f2faff; --raised: #cfe4f8; --text: #0f2338; --muted: #55728c;
  --glass: rgba(236, 249, 255, .62); --glass-line: rgba(255, 255, 255, .75); --glass-dlg: rgba(240, 250, 255, .84); --glass-hi: rgba(255, 255, 255, .85);
  --wall: linear-gradient(120deg, rgba(255, 255, 255, .55) 0 12%, transparent 12% 30%, rgba(160, 200, 255, .35) 30% 44%, transparent 44% 62%, rgba(220, 190, 255, .3) 62% 78%, transparent 78%), radial-gradient(700px 500px at 20% 10%, #bfe3ff, transparent 70%), radial-gradient(600px 480px at 85% 85%, #e0cdff, transparent 70%), linear-gradient(135deg, #dff1ff, #f1e7ff); }
:root[data-theme="galaxy"] { --bg: #070b24; --deep: #050818; --panel: #0f1538; --raised: #1a2260; --text: #eef0ff; --muted: #9fa8e6;
  --glass: rgba(34, 42, 124, .42); --glass-dlg: rgba(20, 26, 84, .8);
  --wall: radial-gradient(1.4px 1.4px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 24% 62%, #fff, transparent), radial-gradient(1.6px 1.6px at 41% 14%, #cfe, transparent), radial-gradient(1px 1px at 58% 74%, #fff, transparent), radial-gradient(1.4px 1.4px at 73% 40%, #fff, transparent), radial-gradient(1px 1px at 88% 18%, #fff, transparent), radial-gradient(1.6px 1.6px at 93% 82%, #ffe, transparent), radial-gradient(1.2px 1.2px at 6% 88%, #fff, transparent), radial-gradient(700px 500px at 70% 25%, rgba(123, 97, 255, .55), transparent 70%), radial-gradient(600px 460px at 20% 80%, rgba(0, 212, 255, .4), transparent 70%), radial-gradient(420px 300px at 50% 55%, rgba(255, 80, 200, .25), transparent 70%), linear-gradient(160deg, #03051a, #0b1040); }
:root[data-theme="crystal"] { color-scheme: light; }
:root[data-theme="crystal"] * { scrollbar-color: rgba(0, 0, 0, .28) transparent; }

/* ===== Украшения аватара (магазин) ===== */
.av.deco-pixel { outline: 3px dashed #ffd23f; outline-offset: 2px; }
.av.deco-emerald { box-shadow: 0 0 0 2px #0f3d2e, 0 0 0 4px #2ee59d, 0 0 14px 3px rgba(46, 229, 157, .55); }
.av.deco-flame { animation: flame 1.1s ease-in-out infinite alternate; }
.av.deco-sakura { box-shadow: 0 0 0 2px #ffc0d9, 0 0 0 4px #ff8fb8, 0 0 16px 3px rgba(255, 143, 184, .55); animation: soft 2.4s ease-in-out infinite alternate; }
.av.deco-aurora { animation: auroraRing 5s ease-in-out infinite alternate; }
.av.deco-galaxy { box-shadow: 0 0 0 2px #7b61ff, 0 0 0 4px #00d4ff, 0 0 20px 5px rgba(123, 97, 255, .65); animation: soft 3s ease-in-out infinite alternate; }
.av.deco-crown { position: relative; box-shadow: 0 0 0 2px #f5c542, 0 0 0 4px #7a5200, 0 0 14px 3px rgba(245, 197, 66, .6); }
.av.deco-crown::after { content: "👑"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 14px; }
.av.big.deco-crown::after { top: -26px; font-size: 30px; }
.av.deco-rainbow { animation: rainbowRing 4s linear infinite; }
@keyframes flame { from { box-shadow: 0 0 0 2px #ff9800, 0 0 10px 2px #ff5722, 0 -4px 14px 2px #ffeb3b; } to { box-shadow: 0 0 0 2px #ff5722, 0 0 16px 4px #ff3d00, 0 -8px 18px 4px #ffc107; } }
@keyframes soft { from { filter: brightness(1); } to { filter: brightness(1.18); } }
@keyframes auroraRing { from { box-shadow: 0 0 0 2px #1fd1a5, 0 0 16px 3px rgba(31, 209, 165, .6); } to { box-shadow: 0 0 0 2px #8a5cff, 0 0 18px 4px rgba(255, 122, 217, .6); } }
@keyframes rainbowRing { 0% { box-shadow: 0 0 0 3px #ff4d4d, 0 0 12px 2px #ff4d4d; } 17% { box-shadow: 0 0 0 3px #ffb84d, 0 0 12px 2px #ffb84d; } 34% { box-shadow: 0 0 0 3px #f2e84d, 0 0 12px 2px #f2e84d; } 50% { box-shadow: 0 0 0 3px #4dff88, 0 0 12px 2px #4dff88; } 67% { box-shadow: 0 0 0 3px #4dc3ff, 0 0 12px 2px #4dc3ff; } 84% { box-shadow: 0 0 0 3px #b04dff, 0 0 12px 2px #b04dff; } 100% { box-shadow: 0 0 0 3px #ff4d4d, 0 0 12px 2px #ff4d4d; } }

/* ===== Оформление сообщений (магазин) ===== */
.msg.ms-neon { border-radius: 10px; background: rgba(0, 229, 255, .06); box-shadow: inset 0 0 0 1px #00e5ff, 0 0 14px rgba(0, 229, 255, .35); }
.msg.ms-gold { border-radius: 8px; background: linear-gradient(135deg, rgba(245, 197, 66, .2), rgba(245, 197, 66, .04)); box-shadow: inset 3px 0 0 #f5c542; }
.msg.ms-glass { border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.msg.ms-candy { border-radius: 14px; background: linear-gradient(135deg, rgba(255, 154, 158, .26), rgba(161, 140, 209, .26)); }
.msg.ms-matrix { border-radius: 6px; background: rgba(0, 40, 0, .55); box-shadow: inset 0 0 0 1px #12c43a; }
.msg.ms-matrix p { color: #7dff8f; font-family: "Cascadia Code", Consolas, monospace; }
.msg.ms-fire { border-radius: 8px; background: linear-gradient(135deg, rgba(255, 87, 34, .3), rgba(255, 193, 7, .1)); box-shadow: inset 3px 0 0 #ff5722; }
.msg.ms-ice { border-radius: 12px; background: linear-gradient(135deg, rgba(120, 200, 255, .24), rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1px rgba(160, 220, 255, .65); }
.msg.ms-royal { border-radius: 12px; background: linear-gradient(135deg, rgba(88, 28, 135, .5), rgba(245, 197, 66, .14)); box-shadow: inset 0 0 0 1px #f5c542; }

/* ===== Больше анимаций ===== */
button.sm, .tile, .srv, .hl { position: relative; overflow: hidden; }
.srv { overflow: visible; }
.rip { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(26); opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.set section.enter > * { animation: slideUp .34s cubic-bezier(.2, .8, .2, 1) both; }
.set section.enter > *:nth-child(2) { animation-delay: .03s; } .set section.enter > *:nth-child(3) { animation-delay: .06s; } .set section.enter > *:nth-child(4) { animation-delay: .09s; }
.set section.enter > *:nth-child(5) { animation-delay: .12s; } .set section.enter > *:nth-child(6) { animation-delay: .15s; } .set section.enter > *:nth-child(7) { animation-delay: .18s; }
.set section.enter > *:nth-child(8) { animation-delay: .21s; } .set section.enter > *:nth-child(n+9) { animation-delay: .24s; }
.swap > *, .view > * { animation: slideUp .3s cubic-bezier(.2, .8, .2, 1) both; }
.view > *:nth-child(2), .swap > *:nth-child(2) { animation-delay: .04s; } .view > *:nth-child(3) { animation-delay: .08s; } .view > *:nth-child(4) { animation-delay: .12s; } .view > *:nth-child(n+5) { animation-delay: .16s; }
.tiles .tile { animation: popIn .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.tiles .tile:nth-child(2) { animation-delay: .03s; } .tiles .tile:nth-child(3) { animation-delay: .06s; } .tiles .tile:nth-child(4) { animation-delay: .09s; } .tiles .tile:nth-child(5) { animation-delay: .12s; } .tiles .tile:nth-child(n+6) { animation-delay: .16s; }
.rx { animation: popIn .26s ease-out both; }
.frow, .post, .rrow, .topic, .item, .qcard, .vcard { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background .2s; }
.frow:hover, .post:hover, .rrow:hover, .item:hover, .qcard:hover, .vcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.ch, .hl, .mem { transition: background .15s, color .15s, transform .15s; }
.ch:hover, .hl:hover { transform: translateX(3px); }
.srv { transition: border-radius .18s, background .18s, transform .18s, box-shadow .18s; }
.srv:hover { transform: translateY(-2px); }
.sbody { animation: paneIn .24s ease-out; }
.toast .tt b { animation: slideUp .4s .08s both; }
.opt input[type=checkbox] { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }

/* Вкладки настроек: аккаунт, помощь, что нового */
.arow { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.arow span { flex: 1; color: var(--muted); }
.arow b { font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.lnk { display: block; margin-top: 4px; padding: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 500; text-align: left; }
.lnk:hover { text-decoration: underline; }
.rng { width: 100%; padding: 0; accent-color: var(--accent); }
.opt select { flex: none; width: auto; min-width: 150px; }
.helpcard { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--raised)), var(--raised)); }
.helpcard b { font-size: 20px; }
.helpcard span, .helpcard p { color: var(--muted); }
.faq { display: grid; gap: 6px; margin: 0 0 8px 18px; color: var(--muted); }
a.sm { display: inline-block; padding: 6px 14px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; }
.ver { margin-bottom: 18px; }
.herowrap { position: relative; margin-bottom: 8px; overflow: hidden; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.hero { display: block; width: 100%; height: 150px; }
.herowrap.small .hero { height: 90px; }
.herot { position: absolute; left: 18px; bottom: 12px; display: grid; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.herot b { font-size: 22px; }
.herowrap.small .herot b { font-size: 16px; }
.herot span { opacity: .9; font-size: 13px; }
.ver ul { margin: 0 0 0 18px; color: var(--muted); }

/* Магазин и квесты */
.wallet { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--raised)), var(--raised)); font-size: 16px; }
.wallet b { font-size: 24px; }
.wallet .sm, .wallet .hint { margin-left: auto; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.item { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--raised); text-align: center; }
.item.own { outline: 2px solid color-mix(in srgb, var(--online) 50%, transparent); }
.item small { margin: 0; color: var(--muted); }
.pv { display: grid; place-items: center; min-height: 96px; padding: 8px; border-radius: 12px; background: var(--deep); overflow: hidden; }
.pv .msg { width: 100%; margin: 0; text-align: left; }
.pv .av.big { margin: 8px 0; }
.pban { width: 100%; height: 70px; border-radius: 10px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qcard { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--raised); }
.qcard.done { opacity: .6; }
.qh { display: flex; justify-content: space-between; gap: 10px; }
.qh em { color: var(--accent); font-style: normal; font-weight: 700; }
.qcard small { margin: 0; color: var(--muted); }
.qbar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--deep); }
.qbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #fff)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.qf { display: flex; justify-content: space-between; align-items: center; min-height: 30px; color: var(--muted); font-size: 13px; }
.okk { color: var(--online); font-weight: 600; }

/* Голос: видео, микшер, проверка */
.vvideos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0; }
.vvideos:empty { display: none; }
.vtile { position: relative; width: min(360px, 100%); overflow: hidden; border-radius: 14px; background: #000; cursor: zoom-in; }
.vtile video { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.vtile span { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; }
.vmix { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; }
.vmix .sm { padding: 3px 8px; }
.vmix .rng { flex: 1; min-width: 80px; }
.meter { height: 10px; overflow: hidden; border-radius: 5px; background: var(--deep); }
.meter i { display: block; width: 0; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--online), var(--accent)); transition: width .08s linear; }
.camprev { display: block; width: 100%; max-height: 240px; margin-top: 8px; border-radius: 12px; background: #000; transform: scaleX(-1); }

/* ===== 0.14.0 ===== */
/* Список выбора (например «Статус»): тёмный фон и читаемый текст в выпадающем списке */
select { color-scheme: dark; cursor: pointer; }
:root[data-theme="light"] select, :root[data-theme="vanilla"] select, :root[data-theme="lavender"] select, :root[data-theme="crystal"] select { color-scheme: light; }
select option, select optgroup { background-color: var(--panel); color: var(--text); }
select option:checked, select option:hover { background-color: var(--raised); color: var(--text); }
/* Аватарка в списках никогда не растягивается в овал */
.av { aspect-ratio: 1 / 1; }
dialog .fn > .av, .mrow .fn > .av { flex: none; min-width: 22px; width: 22px; height: 22px; }
/* Кнопки «Сохранить» и «Удалить роль» всегда видны внизу редактора */
.redit > .row:last-child, .sbody > .row.end:last-child { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 2px; background: linear-gradient(transparent, var(--panel) 40%); }
/* Журнал аудита */
.alog { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.alog em { font-style: normal; color: var(--accent); }
.alog small { flex-basis: 100%; margin: 0; color: var(--muted); }
.alog time { margin-left: auto; color: var(--muted); font-size: 11px; }
.hook .url { font-family: Consolas, monospace; font-size: 11px; user-select: all; }
/* Папки чатов */
.fchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 8px; }
.fchip { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--glass, rgba(255,255,255,.08)); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: background .2s, transform .15s; }
.fchip:hover { transform: translateY(-1px); }
.fchip.on { background: var(--accent); color: #1a1405; font-weight: 600; }
/* Кнопка отправки, ярлыки бота и сервера, кружки */
#sendBtn { flex: none; background: var(--accent); color: #1a1405; font-weight: 700; }
.bot { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
video.circle { display: block; width: 220px; height: 220px; margin-top: 6px; border-radius: 50%; object-fit: cover; cursor: pointer; box-shadow: 0 0 0 3px var(--accent), 0 8px 24px rgba(0,0,0,.35); }
.circlebox { position: relative; width: 240px; height: 240px; margin: 0 auto 12px; }
.circlebox video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; transform: scaleX(-1); }
.circlebox #cirTime { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
#cardNote { margin-bottom: 6px; }
.circlebox video.pv { transform: none; }

/* ===== 0.15.0 ===== */
/* Панель голосовой связи: название и кнопки больше не наезжают друг на друга */
#voicebar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; flex: none; }
.vb { min-width: 0; }
.vb b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbtns { justify-content: space-between; }
.vbtns .sm { flex: 1; padding: 6px 4px; }
/* Окно управления: рамки и тени аватарок не обрезаются по краям */
.sbody { padding: 6px 8px 6px 10px; margin: 0 -2px; }
.rlist { padding: 4px; }
.vtabs { flex-wrap: wrap; }
.mrow, .row.mrow { padding-left: 4px; }
/* Полоса «Сохранить»: без тёмной заливки, лёгкое размытие позади */
.redit > .row:last-child, .sbody > .row.end:last-child { background: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; padding: 8px 4px 2px; }
/* Разделители с датами */
.dsep { position: sticky; top: 6px; z-index: 3; display: flex; justify-content: center; margin: 10px 0 6px; pointer-events: none; }
.dsep span { padding: 3px 14px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); font-size: 12px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.sysline { margin: 8px auto; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--raised) 70%, transparent); color: var(--muted); font-size: 12px; text-align: center; width: fit-content; }
.ttl { margin-left: 4px; }
/* Секретные чаты */
#secBar { padding: 6px 14px; border-bottom: 1px solid color-mix(in srgb, var(--online) 35%, transparent); background: color-mix(in srgb, var(--online) 10%, transparent); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
#secBar[hidden] { display: none; }
#secBar b { color: var(--text); }
#secBar code { font-family: Consolas, monospace; color: var(--text); }
#secBar select { padding: 2px 6px; font-size: 12px; }
/* Активность и сервисы */
.mact { margin-left: 6px; font-size: 12px; }
.act { margin: 4px 0; color: var(--text); }
.svcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.svc { padding: 2px 10px; border-radius: 999px; background: var(--raised); color: var(--text); font-size: 12px; text-decoration: none; }
a.svc:hover { background: var(--accent); color: #1a1405; }
/* Блеми-ИИ */
.ai { display: flex; flex-direction: column; height: 100%; min-height: 60vh; }
.ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.aimsg { max-width: 78%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); line-height: 1.45; animation: paneIn .25s ease-out; }
.aimsg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #1a1405; }
.aimsg.err { background: color-mix(in srgb, var(--danger, #e5484d) 25%, var(--raised)); }
.aimsg.typing { display: flex; gap: 4px; width: fit-content; }
.aimsg.typing span, .tr-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: trDot 1s infinite; }
.aimsg.typing span:nth-child(2), .tr-typing span:nth-child(2) { animation-delay: .15s; }
.aimsg.typing span:nth-child(3), .tr-typing span:nth-child(3) { animation-delay: .3s; }
.ai-in { display: flex; gap: 8px; padding: 10px 14px; }
.ai-in input { flex: 1; }
@keyframes trDot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

/* ===== Трейлер ===== */
.trailer { margin: 12px 0 18px; border-radius: 18px; overflow: hidden; background: #0c0a14; box-shadow: 0 10px 34px rgba(0,0,0,.4); color: #fff; }
.trailer:fullscreen { display: flex; flex-direction: column; border-radius: 0; justify-content: center; }
.tr-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: var(--bg, linear-gradient(135deg, #2a1650, #0c0a14)); transition: background .6s; }
.trailer:fullscreen .tr-stage { aspect-ratio: auto; flex: 1; }
.tr-scene { position: absolute; inset: 0; font-size: 1.55cqw; display: flex; flex-direction: column; padding: 3.2% 4.5%; animation: trIn .5s ease-out; }
@keyframes trIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.tr-title { font-size: 2.3em; font-weight: 700; margin-bottom: .35em; text-shadow: 0 2px 12px rgba(0,0,0,.5); animation: trPopA .6s both; }
.tr-pop { opacity: 0; animation: trPopA .55s var(--d, 0s) both cubic-bezier(.2, 1.3, .4, 1); }
@keyframes trPopA { from { opacity: 0; transform: translateY(1.2em) scale(.92); } to { opacity: 1; transform: none; } }
.tr-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: -4%; }
.tr-scene.s0 .tr-title, .tr-scene.s11 .tr-title { display: none; }
.tr-scene > div:not(.tr-title) { min-height: 0; }
.tr-logo { position: relative; width: 7em; height: 7em; display: grid; place-items: center; font-size: 1em; }
.tr-logo span { z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 28%; background: linear-gradient(135deg, #f2b134, #ff5a1f); font-size: 3.6em; font-weight: 800; box-shadow: 0 0 40px rgba(255,140,40,.6); animation: trBeat 2.4s infinite ease-in-out; }
.tr-logo i { position: absolute; inset: 0; border-radius: 30%; border: 2px solid rgba(255,190,90,.6); animation: trRing 2.8s infinite ease-out; }
.tr-logo i:nth-of-type(2) { animation-delay: .9s; } .tr-logo i:nth-of-type(3) { animation-delay: 1.8s; }
.tr-logo.small { width: 4.5em; height: 4.5em; }
.tr-logo.small span { font-size: 2.4em; }
@keyframes trBeat { 50% { transform: scale(1.06); } }
@keyframes trRing { from { transform: scale(1); opacity: .9; } to { transform: scale(2); opacity: 0; } }
.tr-h { font-size: 4.2em; margin: .35em 0 0; letter-spacing: .02em; animation: trPopA .8s .3s both; }
.tr-sub { font-size: 1.7em; color: #ffd9a0; margin: .4em 0 0; opacity: 0; animation: trPopA .7s var(--d, 1s) both; }
.tr-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; font-size: 1.55cqw; text-align: center; background: radial-gradient(circle at 50% 40%, #4a2a8a, #0c0a14 70%); }
.tr-poster h2 { font-size: 3em; margin: .6em 0 0; } .tr-poster p { margin: 0; color: #cdbfff; font-size: 1.5em; }
.tr-big { margin-top: .8em; padding: .5em 1.6em; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f2b134, #ff5a1f); color: #1a1405; font: inherit; font-size: 1.8em; font-weight: 700; cursor: pointer; transition: transform .2s; }
.tr-big:hover { transform: scale(1.06); }
.tr-cap { min-height: 2.6em; padding: 8px 16px; background: rgba(0,0,0,.45); text-align: center; font-size: 14px; line-height: 1.4; }
.trailer:fullscreen .tr-cap { font-size: 1.5vw; }
.tr-ctl { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #15121f; }
.tr-ctl button { border: 0; border-radius: 8px; padding: 5px 10px; background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer; }
.tr-ctl button:hover { background: rgba(255,255,255,.2); }
.tr-line { position: relative; flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); cursor: pointer; }
.tr-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #f2b134, #ff5a1f); pointer-events: none; }
.tr-line u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.35); }
#trTime { font-size: 12px; color: #bbb; min-width: 74px; text-align: right; }
/* сцены */
.tr-ui { flex: 1; display: grid; grid-template-columns: 31% 1fr; gap: 3%; min-height: 0; }
.tr-side, .tr-main, .tr-chat, .tr-perms, .tr-log, .tr-pcard, .tr-shop { background: rgba(255,255,255,.07); border-radius: 1em; padding: 1em; backdrop-filter: blur(6px); }
.tr-side { display: flex; flex-direction: column; gap: .45em; font-size: 1.05em; min-width: 0; overflow: hidden; } .tr-side b { font-size: 1.15em; margin-bottom: .2em; }
.tr-main { display: flex; flex-direction: column; gap: 1em; justify-content: center; }
.tr-msg, .tr-bub { display: flex; gap: .7em; align-items: flex-start; } .tr-msg p, .tr-bub p { margin: .15em 0 0; font-size: 1.15em; }
.tr-msg b, .tr-bub b { font-size: 1em; color: #ffd9a0; }
.tav { width: 2.6em; height: 2.6em; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c, #888); color: #1a1405; font-style: normal; font-weight: 800; }
.tav.big { width: 5em; height: 5em; font-size: 1.3em; } .tav.ring { box-shadow: 0 0 0 .2em #0c0a14, 0 0 0 .4em var(--c); }
.tav.speak { animation: trSpeak 1.4s infinite; }
@keyframes trSpeak { 0%, 100% { box-shadow: 0 0 0 0 rgba(90,220,120,.0); } 50% { box-shadow: 0 0 0 .5em rgba(90,220,120,.45); } }
.tr-chat { flex: 1; display: flex; flex-direction: column; gap: .8em; justify-content: center; }
.tr-pin { font-size: 1.05em; color: #ffd9a0; } .tr-date { align-self: center; padding: .2em 1.2em; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 1.05em; }
.tr-bub > div { padding: .6em 1em; border-radius: 1em; background: rgba(255,255,255,.12); } .tr-bub.me { align-self: flex-end; } .tr-bub.me > div { background: rgba(242,177,52,.28); }
.tr-react { display: inline-block; margin: .4em .4em 0 0; padding: .05em .6em; border-radius: 99px; background: rgba(255,255,255,.16); font-size: .95em; }
.tr-typing { display: flex; gap: .3em; margin-left: .4em; }
.tr-send { flex: 1; position: relative; }
.tr-comp { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: space-between; align-items: center; padding: .8em 1.2em; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 1.3em; }
.tr-sendb { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #f2b134; color: #1a1405; animation: trBeat 1.2s infinite; }
.tr-menu { position: absolute; right: 0; bottom: 20%; display: flex; flex-direction: column; gap: .5em; font-size: 1.2em; } .tr-menu span { padding: .5em 1.1em; border-radius: .8em; background: rgba(255,255,255,.16); }
.tr-circle { position: absolute; left: 3%; top: 4%; width: 11em; height: 11em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff9a5a, #6a2bb5); box-shadow: 0 0 0 .25em #f2b134; font-size: 2.2em; }
.tr-poll { position: absolute; left: 42%; top: 6%; width: 28%; padding: 1em; border-radius: 1em; background: rgba(255,255,255,.1); font-size: 1.15em; }
.tr-bar2 { position: relative; height: 1.9em; margin-top: .5em; border-radius: .5em; background: rgba(255,255,255,.1); overflow: hidden; } .tr-bar2 i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(242,177,52,.55); } .tr-bar2 span { position: relative; padding: 0 .7em; line-height: 1.9em; }
.tr-voice { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2em; justify-content: center; }
.tr-tiles { display: flex; gap: 1.2em; } .tr-tile { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.2em 1.4em; border-radius: 1em; background: rgba(255,255,255,.08); font-size: 1.1em; } .tr-tile .tav { width: 4.6em; height: 4.6em; font-size: 1.2em; }
.tr-tools { display: flex; gap: .8em; align-items: center; font-size: 1.5em; } .tr-tools span { padding: .3em .7em; border-radius: .7em; background: rgba(255,255,255,.14); } .tr-tools kbd { padding: .15em .6em; border-radius: .4em; background: #fff; color: #222; font-size: .8em; font-weight: 700; }
.tr-slider { display: flex; gap: 1em; align-items: center; font-size: 1.2em; width: 40%; } .tr-slider div { flex: 1; height: .5em; border-radius: 99px; background: rgba(255,255,255,.18); } .tr-slider i { display: block; height: 100%; width: 65%; border-radius: 99px; background: #f2b134; animation: trSlide 3s infinite alternate ease-in-out; } @keyframes trSlide { from { width: 30%; } to { width: 90%; } }
.tr-roles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; }
.tr-perms { display: flex; flex-direction: column; gap: .9em; justify-content: center; font-size: 1.15em; } .tr-perm { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.tr-tg { position: relative; width: 2.8em; height: 1.5em; flex: none; border-radius: 99px; background: rgba(255,255,255,.22); animation: trTgBg .4s var(--d) forwards; } .tr-tg::after { content: ''; position: absolute; top: .15em; left: .15em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; animation: trTgKnob .4s var(--d) forwards; }
@keyframes trTgBg { to { background: #f2b134; } } @keyframes trTgKnob { to { transform: translateX(1.3em); } }
.tr-log { display: flex; flex-direction: column; gap: .9em; justify-content: center; font-size: 1.15em; } .tr-log code { font-family: Consolas, monospace; color: #7fe0a0; }
.tr-themes { flex: 1; display: grid; place-items: center; } .tr-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; width: 86%; }
.tr-sw { display: flex; flex-direction: column; align-items: center; gap: .5em; transition: transform .4s; font-size: 1.15em; } .tr-sw b { width: 100%; aspect-ratio: 16 / 10; border-radius: .9em; background: var(--g); box-shadow: 0 6px 18px rgba(0,0,0,.4); } .tr-sw.hot { transform: scale(1.12); } .tr-sw.hot b { box-shadow: 0 0 0 .2em #fff, 0 10px 28px rgba(0,0,0,.5); }
.tr-shop { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 1em 3%; background: none; padding: 0; backdrop-filter: none; }
.tr-coins { grid-column: 1 / 3; font-size: 2em; } .tr-coins b { color: #f2b134; }
.tr-items { display: flex; flex-direction: column; gap: .7em; } .tr-item { display: flex; justify-content: space-between; padding: .8em 1.1em; border-radius: .9em; background: rgba(255,255,255,.1); font-size: 1.2em; } .tr-item span { color: #f2b134; font-weight: 700; }
.tr-quests { display: flex; flex-direction: column; gap: .9em; font-size: 1.1em; } .tr-q { padding: .7em 1em; border-radius: .9em; background: rgba(255,255,255,.08); } .tr-q div { height: .6em; margin-top: .5em; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; } .tr-q i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2b134, #ff5a1f); }
.tr-profile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2em; }
.tr-stories { display: flex; gap: 1.2em; } .tr-pcard { width: 40%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3em; padding-top: 0; overflow: hidden; }
.tr-banner { width: calc(100% + 2em); height: 5em; margin: 0 -1em -2.2em; background: linear-gradient(120deg, #ff5a1f, #6a2bb5); } .tr-pcard .tav { margin-top: 0; z-index: 1; }
.tr-gold { color: #f2b134; font-style: normal; } .tr-note { margin-top: .4em; padding: .4em .9em; border-radius: .7em; background: rgba(255,255,255,.1); font-size: .95em; }
.tr-secure { flex: 1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 5%; padding: 0 4%; }
.tr-lock { font-size: 8em; animation: trBeat 2.4s infinite; } .tr-count { position: relative; width: 11em; height: 11em; display: grid; place-items: center; font-size: 1em; } .tr-count svg { position: absolute; inset: 0; transform: rotate(-90deg); } .tr-count circle { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 6; } .tr-count #trRing { stroke: #f2b134; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 0; } .tr-count b { font-size: 4em; }
.tr-chips { display: flex; flex-direction: column; gap: .7em; font-size: 1.25em; } .tr-chips span { padding: .5em 1em; border-radius: 99px; background: rgba(255,255,255,.12); width: fit-content; }
.tr-ai { flex: 1; display: flex; flex-direction: column; gap: 1em; justify-content: center; max-width: 72%; margin: 0 auto; font-size: 1.1em; } .tr-svcs { display: flex; flex-wrap: wrap; gap: .8em; } .tr-svcs span { padding: .4em 1.1em; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 1.15em; }
.trailer:fullscreen .tr-ctl { padding: 12px 24px; }
.calm .tr-pop, .calm .tr-scene, .calm .tr-logo i { animation-duration: .01s !important; animation-delay: 0s !important; }

/* =====================================================================
   0.16.0 — новый внешний вид: стеклянный вход, матовое стекло, новые темы,
   украшения аватаров, категории, трибуны, премиум
   ===================================================================== */
:root { --accent2: color-mix(in srgb, var(--accent) 40%, #7b3fe4); --b1: #7b3fe4; --b2: #f2b134; --b3: #2fd1c1; }

/* ---------- Вход в стиле матового стекла ---------- */
#auth { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; background: #08070d; z-index: 50; }
.auth-bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 20% 15%, rgba(123, 63, 228, .28), transparent 60%), radial-gradient(800px 560px at 85% 90%, rgba(242, 177, 52, .20), transparent 60%), #0a0910; }
.auth-bg i { position: absolute; background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,0) 55%), linear-gradient(315deg, #18161f, #0e0d14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); animation: shardDrift 18s ease-in-out infinite alternate; }
.auth-bg i:nth-child(1) { left: -6%; top: 6%; width: 38%; height: 46%; clip-path: polygon(8% 0, 100% 14%, 82% 100%, 0 78%); }
.auth-bg i:nth-child(2) { left: 24%; top: -8%; width: 34%; height: 40%; clip-path: polygon(0 20%, 70% 0, 100% 70%, 28% 100%); animation-delay: -4s; }
.auth-bg i:nth-child(3) { right: -4%; top: 4%; width: 36%; height: 48%; clip-path: polygon(20% 0, 100% 22%, 90% 100%, 0 70%); animation-delay: -8s; }
.auth-bg i:nth-child(4) { left: 4%; bottom: -8%; width: 40%; height: 44%; clip-path: polygon(0 30%, 80% 0, 100% 80%, 20% 100%); animation-delay: -2s; }
.auth-bg i:nth-child(5) { left: 38%; bottom: -10%; width: 30%; height: 38%; clip-path: polygon(14% 0, 100% 24%, 78% 100%, 0 66%); animation-delay: -6s; }
.auth-bg i:nth-child(6) { right: 2%; bottom: -6%; width: 34%; height: 46%; clip-path: polygon(0 12%, 86% 0, 100% 66%, 30% 100%); animation-delay: -10s; }
.auth-bg i:nth-child(7) { left: 44%; top: 30%; width: 20%; height: 28%; clip-path: polygon(30% 0, 100% 40%, 70% 100%, 0 60%); opacity: .8; animation-delay: -12s; }
.auth-bg i:nth-child(8) { left: -2%; top: 44%; width: 22%; height: 30%; clip-path: polygon(0 0, 100% 24%, 70% 100%, 10% 80%); opacity: .8; animation-delay: -14s; }
.auth-bg b { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 49%, transparent 56%); animation: streak 9s linear infinite; }
@keyframes shardDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(1.4%, -1.8%) scale(1.03); } }
@keyframes streak { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.gcard { position: relative; width: min(940px, 94vw); height: min(580px, 92vh); border-radius: 28px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); box-shadow: 0 40px 100px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.25); color: #fff; }
#auth.pre .gcard { opacity: 0; }
#auth.enter .gcard { animation: cardIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.gcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.gforms, .gside { position: absolute; top: 0; bottom: 0; width: 50%; transition: left .75s cubic-bezier(.65, 0, .35, 1), clip-path .75s cubic-bezier(.65, 0, .35, 1), filter .35s, opacity .35s; }
.gcard[data-mode="login"] .gforms { left: 0; } .gcard[data-mode="login"] .gside { left: 50%; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.gcard[data-mode="reg"] .gforms { left: 50%; } .gcard[data-mode="reg"] .gside { left: 0; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
.gcard.busy .gforms, .gcard.busy .gside { filter: blur(12px); opacity: .25; }
.gcard.shake { animation: gshake .4s; }
@keyframes gshake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.gpane { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 34px 11%; gap: 12px; overflow-y: auto; }
.gpane h2 { font-size: 24px; font-weight: 700; letter-spacing: .01em; margin-bottom: 2px; }
.gmethods { display: flex; gap: 6px; margin-bottom: 4px; }
.gmethods button { flex: 1; padding: 6px 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 600; transition: background .25s, color .25s, transform .2s; }
.gmethods button:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.gmethods button.on { background: rgba(255,255,255,.92); color: #14111f; border-color: transparent; }
.gbody { display: flex; flex-direction: column; gap: 12px; }
.gbody.in { animation: gIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes gIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.gf { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .25s, box-shadow .25s; }
.gf:focus-within { border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
.gf i { width: 18px; height: 18px; flex: none; opacity: .75; } .gf svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gf input { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; color: #fff; font-size: 14px; outline: none; color-scheme: dark; }
.gf input::placeholder, .gcode::placeholder { color: rgba(255,255,255,.45); }
.gcode { width: 100%; padding: 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font: 700 28px/1 Consolas, monospace; letter-spacing: .5em; text-align: center; outline: none; }
.gbtn { margin-top: 4px; padding: 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; font-weight: 600; transition: background .25s, transform .2s, box-shadow .25s; }
.gbtn:hover:not(:disabled) { background: rgba(255,255,255,.26); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(123, 63, 228, .35); }
.gbtn:disabled { opacity: .5; cursor: wait; }
.glink { background: transparent; color: rgba(255,255,255,.65); font-size: 12.5px; font-weight: 500; padding: 4px; }
.glink:hover:not(:disabled) { color: #fff; text-decoration: underline; } .glink:disabled { opacity: .6; cursor: default; }
.grow { display: flex; justify-content: space-between; gap: 8px; }
.ghint { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.7); } .ghint b { color: #fff; } .gdev { color: #ffd479; }
#auth #err { min-height: 1.3em; font-size: 12.5px; color: #ffb0a0; } #auth #savedAcc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#auth #savedAcc .hint { width: 100%; color: rgba(255,255,255,.5); }
.gside { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 34px 9% 34px 15%; background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); }
.gcard[data-mode="reg"] .gside { padding: 34px 15% 34px 9%; }
.gside::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, rgba(255,255,255,.4), transparent); transform: skewX(-6deg); }
.gcard[data-mode="login"] .gside::before { left: 4.2%; } .gcard[data-mode="reg"] .gside::before { right: 4.2%; transform: skewX(6deg); }
.glogo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 30px rgba(123, 63, 228, .5); animation: logoFloat 4s ease-in-out infinite alternate; }
@keyframes logoFloat { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }
.gside h1 { font-size: 28px; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; } .gside p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 260px; }
.gpill { padding: 8px 20px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.65); color: #fff; font-size: 13px; font-weight: 600; transition: background .25s, color .25s, transform .2s; }
.gpill:hover { background: #fff; color: #14111f; transform: translateX(3px); }
@media (max-width: 760px) {
  .gcard { height: auto; max-height: 94vh; overflow-y: auto; } .gforms { position: relative; width: 100%; left: 0 !important; } .gside { display: none; } .gpane { padding: 28px 8%; }
}

/* ---------- Новый облик (чуть дальше от привычных мессенджеров) ---------- */
.srv { border-radius: 32%; background: linear-gradient(145deg, var(--raised), color-mix(in srgb, var(--raised) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.srv:hover { border-radius: 32%; background: linear-gradient(145deg, var(--accent), var(--accent2)); color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.srv.on { border-radius: 32%; background: linear-gradient(145deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent); }
.ch { border-radius: 12px; padding: 8px 12px; transition: background .2s, transform .2s, box-shadow .2s, color .2s; }
.ch:hover { transform: translateX(3px); }
.ch.on { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent2) 8%, transparent)); box-shadow: inset 3px 0 0 var(--accent); }
main > header, #channels header { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
button.on:not(.fchip):not(.gmethods button) { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
button.sm.on, .tabs button.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
#sendBtn { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-radius: 50%; width: 38px; height: 38px; padding: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); transition: transform .2s; } #sendBtn:hover { transform: scale(1.1) rotate(-8deg); }
.composer { gap: 8px; align-items: center; } #input { border-radius: 999px !important; padding: 11px 18px; }
#msgs { background-image: radial-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
.bubbles .msg { border-radius: 18px 18px 18px 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); animation: bubbleIn .28s cubic-bezier(.2, 1.1, .4, 1); }
.bubbles .msg.mine { border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, var(--raised)), color-mix(in srgb, var(--accent2) 30%, var(--raised))); }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
#members .mem { border-radius: 12px; transition: background .2s, transform .2s; } #members .mem:hover { transform: translateX(-2px); }
.prem { display: inline-block; margin-left: 4px; font-size: .85em; filter: drop-shadow(0 0 4px rgba(245,197,66,.8)); cursor: help; }

/* ---------- Матовое стекло (Glassmorphism) ---------- */
body.frosted.glass { background: radial-gradient(1200px 800px at 15% 10%, color-mix(in srgb, var(--b1) 34%, transparent), transparent 65%), radial-gradient(1000px 700px at 90% 90%, color-mix(in srgb, var(--b2) 28%, transparent), transparent 65%), linear-gradient(135deg, var(--deep), var(--bg)); background-attachment: fixed; }
body.frosted::before, body.frosted::after { content: ""; position: fixed; z-index: 0; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; }
body.frosted::before { background: var(--b1); left: -14vmax; top: -12vmax; animation: blobA 28s ease-in-out infinite alternate; }
body.frosted::after { background: var(--b3); right: -16vmax; bottom: -18vmax; animation: blobB 34s ease-in-out infinite alternate; }
@keyframes blobA { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vmax, 12vmax) scale(1.18); } }
@keyframes blobB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-16vmax, -10vmax) scale(1.2); } }
body.frosted #app { position: relative; z-index: 1; }
body.frosted.glass #servers, body.frosted.glass #channels, body.frosted.glass main, body.frosted.glass #members, body.frosted.glass .card {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"), linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 20px 56px rgba(0,0,0,.34); }
body.frosted.glass dialog, body.frosted.glass .ctx, body.frosted.glass #mbox, body.frosted.glass #epanel, body.frosted.glass .tools, body.frosted.glass .toast { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07)), color-mix(in srgb, var(--panel) 55%, transparent); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); border: 1px solid rgba(255,255,255,.3); }
body.frosted.glass input, body.frosted.glass select, body.frosted.glass textarea { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
body.frosted.glass .msg:hover { background: rgba(255,255,255,.07); }
:root[data-theme="light"] body.frosted.glass #servers, :root[data-theme="light"] body.frosted.glass #channels, :root[data-theme="light"] body.frosted.glass main, :root[data-theme="light"] body.frosted.glass #members,
:root[data-theme="vanilla"] body.frosted.glass #servers, :root[data-theme="vanilla"] body.frosted.glass #channels, :root[data-theme="vanilla"] body.frosted.glass main, :root[data-theme="vanilla"] body.frosted.glass #members,
:root[data-theme="lavender"] body.frosted.glass #servers, :root[data-theme="lavender"] body.frosted.glass #channels, :root[data-theme="lavender"] body.frosted.glass main, :root[data-theme="lavender"] body.frosted.glass #members,
:root[data-theme="crystal"] body.frosted.glass #servers, :root[data-theme="crystal"] body.frosted.glass #channels, :root[data-theme="crystal"] body.frosted.glass main, :root[data-theme="crystal"] body.frosted.glass #members,
:root[data-theme="sakura"] body.frosted.glass #servers, :root[data-theme="sakura"] body.frosted.glass #channels, :root[data-theme="sakura"] body.frosted.glass main, :root[data-theme="sakura"] body.frosted.glass #members { background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 16px 44px rgba(40,30,80,.16); }

/* ---------- Темы: цвета пятен для матового стекла и вторичный акцент ---------- */
:root[data-theme="teal"] { --b1: #1fb5c4; --b2: #f2b134; --b3: #3b5bdb; --accent2: #3b5bdb; }
:root[data-theme="light"] { --b1: #8fb8ff; --b2: #ffd1a8; --b3: #c8b6ff; --accent2: #6a7cff; }
:root[data-theme="midnight"] { --b1: #2a2a6e; --b2: #1b3a5c; --b3: #3a1b5c; --accent2: #6a5cff; }
:root[data-theme="sunset"] { --b1: #ff7e5f; --b2: #a64ac9; --b3: #feb47b; --accent2: #c0407a; }
:root[data-theme="forest"] { --b1: #2f9e6f; --b2: #b6e388; --b3: #0b6e4f; --accent2: #1f8f5a; }
:root[data-theme="grape"] { --b1: #8a4bff; --b2: #ff4fa3; --b3: #3f7bff; --accent2: #c04bff; }
:root[data-theme="cosmic"] { --b1: #c2334f; --b2: #6d4aff; --b3: #ff8fb1; --accent2: #c2334f; }
:root[data-theme="vanilla"] { --b1: #d6e86b; --b2: #ffd89b; --b3: #f6a6c1; --accent2: #7ea000; }
:root[data-theme="lavender"] { --b1: #a99bd3; --b2: #f6a6d8; --b3: #7fb3ff; --accent2: #7a5fd6; }
:root[data-theme="violet"] { --b1: #8f6fe0; --b2: #ff6fb5; --b3: #4f7bff; --accent2: #c06bff; }
:root[data-theme="coffee"] { --b1: #c69c6d; --b2: #8a5a3a; --b3: #e8c9a0; --accent2: #b9722f; }
:root[data-theme="lava"] { --b1: #ff6a00; --b2: #d4180a; --b3: #ffb300; --accent2: #e8330a; }
:root[data-theme="crystal"] { --b1: #7cc4ff; --b2: #d8b8ff; --b3: #aef0ff; --accent2: #4a7bff; }
:root[data-theme="galaxy"] { --b1: #7b61ff; --b2: #00d4ff; --b3: #ff4fd8; --accent2: #00a8ff; }
/* новые темы */
:root[data-theme="sakura"] { --bg: #fff1f6; --deep: #ffdbe9; --panel: #fff7fa; --raised: #ffd0e2; --text: #4a1f33; --muted: #a0607e; --online: #3fbf8a; --b1: #ff8fb8; --b2: #ffc2d9; --b3: #c9a4ff; --accent2: #e0457f; color-scheme: light; }
:root[data-theme="sakura"] * { scrollbar-color: rgba(0,0,0,.28) transparent; }
:root[data-theme="ocean"] { --bg: #06202e; --deep: #04151f; --panel: #0a2d40; --raised: #123e57; --text: #e6f6ff; --muted: #7fb0c8; --online: #5ad19a; --b1: #0aa3d8; --b2: #1fe0c4; --b3: #1b4de0; --accent2: #0aa3d8; }
:root[data-theme="neon"] { --bg: #0b0716; --deep: #07040f; --panel: #140c26; --raised: #231443; --text: #f4eaff; --muted: #a58bd6; --online: #39ff9c; --b1: #ff2bd6; --b2: #00e5ff; --b3: #7b2cff; --accent2: #ff2bd6; }
:root[data-theme="aurora"] { --bg: #07161c; --deep: #040d11; --panel: #0c2530; --raised: #143947; --text: #e8fff7; --muted: #7fc4b3; --online: #5ad19a; --b1: #1fd1a5; --b2: #8a5cff; --b3: #ff7ad9; --accent2: #8a5cff; }

/* ---------- Украшения аватаров ---------- */
.av { position: relative; container-type: size; }
.av[class*="deco-"]::before, .av[class*="deco-"]::after { pointer-events: none; }
@keyframes spinA { to { transform: rotate(360deg); } }
@keyframes pulseA { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes bobA { from { transform: translateY(0); } to { transform: translateY(-9%); } }
@keyframes orbitA { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes twinkleA { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.av.deco-halo { box-shadow: 0 0 0 2px #fff0a8, 0 0 14px 3px rgba(255, 226, 120, .5); }
.av.deco-halo::after { content: ""; position: absolute; left: 13%; right: 13%; top: -30%; height: 26%; border-radius: 50%; border: max(1.5px, 5cqw) solid #ffe27a; box-shadow: 0 0 10px #ffe27a, inset 0 0 6px #fff7c2; animation: bobA 2.4s ease-in-out infinite alternate; }
.av.deco-catears { box-shadow: 0 0 0 2px #ff9ec7, 0 0 12px rgba(255, 158, 199, .5); }
.av.deco-catears::before, .av.deco-catears::after { content: ""; position: absolute; top: -17%; width: 34%; height: 34%; background: #ff9ec7; clip-path: polygon(0 100%, 50% 0, 100% 100%); z-index: -1; }
.av.deco-catears::before { left: 5%; transform: rotate(-20deg); } .av.deco-catears::after { right: 5%; transform: rotate(20deg); }
.av.deco-hearts { box-shadow: 0 0 0 2px #ff7ab0, 0 0 14px rgba(255, 105, 170, .55); }
.av.deco-hearts::after { content: "💖"; position: absolute; right: -16%; top: -16%; font-size: 40cqw; animation: bobA 1.6s ease-in-out infinite alternate; }
.av.deco-hearts::before { content: "💗"; position: absolute; left: -14%; bottom: -12%; font-size: 30cqw; animation: bobA 2.1s ease-in-out infinite alternate-reverse; }
.av.deco-snow { box-shadow: 0 0 0 2px #dff6ff, 0 0 14px rgba(180, 225, 255, .7); }
.av.deco-snow::after { content: "❄️"; position: absolute; left: 4%; top: -18%; font-size: 32cqw; animation: snowA 2.8s linear infinite; }
.av.deco-snow::before { content: "❄️"; position: absolute; right: 6%; top: -18%; font-size: 24cqw; animation: snowA 3.4s linear infinite 1.2s; }
@keyframes snowA { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18%, 150%) rotate(200deg); opacity: 0; } }
.av.deco-storm { box-shadow: 0 0 0 2px #2b3f7a, 0 0 0 4px #5f7bff, 0 0 16px 3px rgba(95, 123, 255, .6); animation: stormA 3.2s infinite; }
.av.deco-storm::after { content: "⚡"; position: absolute; right: -12%; top: -14%; font-size: 40cqw; animation: pulseA 3.2s infinite; }
@keyframes stormA { 0%, 90%, 100% { filter: none; } 93% { filter: brightness(1.8); } 96% { filter: brightness(1.2); } }
.av.deco-matrix::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: max(2px, 6cqw) dashed #19e36b; box-shadow: 0 0 10px #19e36b; animation: spinA 6s linear infinite; }
.av.deco-glitch::before, .av.deco-glitch::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: max(2px, 5cqw) solid; mix-blend-mode: screen; }
.av.deco-glitch::before { border-color: #00f0ff; animation: glA .9s steps(2) infinite; } .av.deco-glitch::after { border-color: #ff2bd6; animation: glB 1.1s steps(2) infinite; }
@keyframes glA { 0% { transform: translate(4%, 0); } 50% { transform: translate(-3%, 2%); } 100% { transform: translate(2%, -3%); } }
@keyframes glB { 0% { transform: translate(-4%, 0); } 50% { transform: translate(3%, -2%); } 100% { transform: translate(-2%, 3%); } }
.av.deco-vines { box-shadow: 0 0 0 2px #2f9e5f, 0 0 0 4px #1b5e38, 0 0 12px rgba(60, 200, 110, .5); }
.av.deco-vines::after { content: "🌿"; position: absolute; left: -14%; top: -10%; font-size: 36cqw; transform: rotate(-30deg); animation: bobA 2.6s ease-in-out infinite alternate; }
.av.deco-vines::before { content: "🍀"; position: absolute; right: -12%; bottom: -10%; font-size: 30cqw; animation: bobA 3s ease-in-out infinite alternate-reverse; }
.av.deco-sun::before { content: ""; position: absolute; inset: -24%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffd24a 0 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(farthest-side, transparent 66%, #000 68%); mask: radial-gradient(farthest-side, transparent 66%, #000 68%); animation: spinA 14s linear infinite; }
.av.deco-sun { box-shadow: 0 0 0 2px #ffb300, 0 0 18px 4px rgba(255, 170, 0, .55); }
.av.deco-moon { box-shadow: 0 0 0 2px #cfd8ff, 0 0 18px rgba(170, 190, 255, .6); }
.av.deco-moon::after { content: "🌙"; position: absolute; right: -14%; top: -14%; font-size: 40cqw; animation: pulseA 3s infinite; }
.av.deco-moon::before { content: "✨"; position: absolute; left: -8%; bottom: -8%; font-size: 28cqw; animation: twinkleA 2s infinite; }
.av.deco-butterflies { box-shadow: 0 0 0 2px #ff9ad5, 0 0 0 4px #7ab8ff; }
.av.deco-butterflies::after { content: "🦋"; position: absolute; left: 0; top: 0; font-size: 34cqw; offset-path: circle(64% at 50% 50%); offset-rotate: 0deg; animation: orbitA 6s linear infinite; }
.av.deco-plasma::before { content: ""; position: absolute; inset: -13%; border-radius: 50%; background: conic-gradient(#ff3df0, #4a6bff, #25e6ff, #6dff8a, #ffe53d, #ff3df0); -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 74%); mask: radial-gradient(farthest-side, transparent 72%, #000 74%); filter: drop-shadow(0 0 5px #9b5cff); animation: spinA 3s linear infinite; }
/* премиум */
.av.deco-diamond::before { content: ""; position: absolute; inset: -13%; border-radius: 50%; background: conic-gradient(#bff4ff, #5fd0ff, #fff, #7aa8ff, #bff4ff, #fff, #5fd0ff, #bff4ff); -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 74%); mask: radial-gradient(farthest-side, transparent 72%, #000 74%); animation: spinA 8s linear infinite; filter: drop-shadow(0 0 5px #8fe3ff); }
.av.deco-diamond::after { content: "💎"; position: absolute; left: 50%; top: -24%; transform: translateX(-50%); font-size: 36cqw; animation: pulseA 2.4s infinite; }
.av.deco-phoenix::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(#ffe45c, #ff9a1f, #ff3b1a, #ffe45c, #ff9a1f, #ff3b1a, #ffe45c); -webkit-mask: radial-gradient(farthest-side, transparent 70%, #000 72%); mask: radial-gradient(farthest-side, transparent 70%, #000 72%); animation: spinA 2.4s linear infinite; filter: drop-shadow(0 0 7px #ff6a00); }
.av.deco-phoenix::after { content: "🔥"; position: absolute; left: 50%; top: -26%; transform: translateX(-50%); font-size: 38cqw; animation: pulseA 1s infinite; }
.av.deco-void { box-shadow: 0 0 0 2px #0a0014, 0 0 20px 5px rgba(140, 40, 255, .65), inset 0 0 14px rgba(120, 0, 255, .6); animation: voidA 3s ease-in-out infinite alternate; }
.av.deco-void::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(#0a0014, #5b00c8, #0a0014, #a64dff, #0a0014); -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 74%); mask: radial-gradient(farthest-side, transparent 72%, #000 74%); animation: spinA 9s linear infinite reverse; }
@keyframes voidA { from { filter: brightness(.9); } to { filter: brightness(1.25); } }
.av.deco-stardust::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(#ffd66b, #b46bff, #ffd66b, #b46bff, #ffd66b); -webkit-mask: radial-gradient(farthest-side, transparent 73%, #000 75%); mask: radial-gradient(farthest-side, transparent 73%, #000 75%); animation: spinA 10s linear infinite; }
.av.deco-stardust::after { content: "✨"; position: absolute; left: 0; top: 0; font-size: 32cqw; offset-path: circle(66% at 50% 50%); animation: orbitA 4s linear infinite; }
.av.deco-royalty { box-shadow: 0 0 0 2px #f5c542, 0 0 0 4px #7a5200, 0 0 0 6px #f5c542, 0 0 20px 4px rgba(245, 197, 66, .6); }
.av.deco-royalty::after { content: "👑"; position: absolute; left: 50%; top: -28%; transform: translateX(-50%) rotate(-6deg); font-size: 40cqw; animation: bobA 2s ease-in-out infinite alternate; }
.av.deco-royalty::before { content: "✨"; position: absolute; right: -10%; bottom: -8%; font-size: 28cqw; animation: twinkleA 1.8s infinite; }
.calm .av::before, .calm .av::after { animation: none !important; }
/* новые стили сообщений */
.msg.ms-sakura { border-radius: 14px; background: linear-gradient(135deg, rgba(255, 143, 184, .3), rgba(255, 220, 235, .08)); box-shadow: inset 0 0 0 1px rgba(255, 143, 184, .6); }
.msg.ms-wave { border-radius: 14px; background: linear-gradient(135deg, rgba(0, 170, 255, .26), rgba(0, 255, 200, .1)); box-shadow: inset 0 0 0 1px rgba(0, 200, 255, .55); }
.msg.ms-diamond { border-radius: 14px; background: linear-gradient(135deg, rgba(160, 235, 255, .3), rgba(255, 255, 255, .08), rgba(160, 200, 255, .3)); box-shadow: inset 0 0 0 1px rgba(200, 245, 255, .85), 0 0 18px rgba(140, 220, 255, .35); }

/* ---------- Категории каналов и перетаскивание ---------- */
.cat { display: flex; align-items: center; gap: 6px; padding: 12px 8px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; user-select: none; transition: color .2s; }
.cat:hover { color: var(--text); } .cat .caret { display: inline-block; transition: transform .25s; font-size: 9px; } .cat.closed .caret { transform: rotate(-90deg); }
.cat .cadd { margin-left: auto; opacity: 0; transition: opacity .2s; font-size: 14px; } .cat:hover .cadd { opacity: 1; }
.catbox { display: grid; overflow: hidden; transition: grid-template-rows .3s ease; grid-template-rows: 1fr; } .catbox > div { min-height: 0; } .catbox.closed { grid-template-rows: 0fr; }
.ch.dragging, .cat.dragging { opacity: .35; }
.ch.over-top { box-shadow: 0 -2px 0 var(--accent); } .ch.over-bottom { box-shadow: 0 2px 0 var(--accent); } .cat.over { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 8px; }
.drag-hint { margin: 6px 8px; font-size: 11px; color: var(--muted); }
.ch[draggable="true"] { cursor: grab; }

/* ---------- Трибуны ---------- */
.stage { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.stage h3 { margin-top: 6px; } .stage .sgrid { display: flex; flex-wrap: wrap; gap: 14px; }
.scard { position: relative; width: 112px; padding: 12px 8px; border-radius: 18px; background: var(--raised); text-align: center; display: grid; gap: 4px; justify-items: center; transition: transform .25s, box-shadow .25s; animation: bubbleIn .3s both; }
.scard.speak { box-shadow: 0 0 0 2px var(--online), 0 0 22px rgba(90, 209, 154, .5); transform: translateY(-3px); }
.scard small { color: var(--muted); } .scard .hand { position: absolute; right: 6px; top: 4px; font-size: 18px; animation: wave 1s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.scard .sact { display: flex; gap: 4px; margin-top: 4px; }

/* ---------- Премиум ---------- */
.premhero { padding: 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(123, 63, 228, .45), rgba(242, 177, 52, .35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); position: relative; overflow: hidden; }
.premhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); animation: streak 5s linear infinite; }
.premhero h3 { margin: 0 0 6px; font-size: 20px; } .premhero p { margin: 4px 0; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0; }
.perk { padding: 12px 14px; border-radius: 14px; background: var(--raised); display: grid; gap: 2px; transition: transform .2s; } .perk:hover { transform: translateY(-2px); } .perk b { font-size: 14px; } .perk small { color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.plan { padding: 14px; border-radius: 16px; background: var(--raised); text-align: center; display: grid; gap: 6px; border: 1px solid transparent; transition: transform .2s, border-color .2s; } .plan:hover { transform: translateY(-3px); border-color: var(--accent); } .plan b { font-size: 16px; } .plan .price { color: var(--accent); font-weight: 700; }
.shopitem.locked { opacity: .7; } .lockb { display: inline-block; margin-left: 4px; font-size: 11px; padding: 0 6px; border-radius: 99px; background: linear-gradient(135deg, #7b3fe4, #f2b134); color: #fff; }

/* ---------- Загрузка файлов, проверка микрофона ---------- */
.upbar { margin: 6px 0; padding: 8px 12px; border-radius: 12px; background: var(--raised); font-size: 12px; } .upbar div { height: 6px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; } .upbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.microw { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .micmeter { flex: 1; min-width: 120px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; } .micmeter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--online), var(--accent)); transition: width .08s; }
.rec { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #ff4d4d; animation: pulseA 1s infinite; }

/* ---------- Анимации вкладок и списков ---------- */
@keyframes fadeUpA { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.set nav button { transition: background .2s, transform .2s, padding .2s; } .set nav button:hover { transform: translateX(4px); }
.set nav button.on { box-shadow: inset 3px 0 0 var(--accent); }
.tiles .tile, .shopgrid > *, .quest, .frow, .vcard, .plan, .perk, .post { animation: fadeUpA .35s both; }
.tiles .tile:nth-child(n), .shopgrid > *:nth-child(n), .quest:nth-child(n), .frow:nth-child(n) { animation-delay: calc(var(--i, 0) * 28ms); }
.tiles .tile:hover, .shopgrid > *:hover, .quest:hover, .frow:hover { transform: translateY(-2px); }
#chList > *, #members > .mem { animation: slideInL .3s both; }
#chList > *:nth-child(2) { animation-delay: .03s; } #chList > *:nth-child(3) { animation-delay: .06s; } #chList > *:nth-child(4) { animation-delay: .09s; } #chList > *:nth-child(5) { animation-delay: .12s; } #chList > *:nth-child(6) { animation-delay: .15s; }
dialog[open] { animation: dlgPop .32s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes dlgPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
#servers .srv { animation: fadeUpA .4s both; }
#servers .srv:nth-child(2) { animation-delay: .04s; } #servers .srv:nth-child(3) { animation-delay: .08s; } #servers .srv:nth-child(4) { animation-delay: .12s; } #servers .srv:nth-child(5) { animation-delay: .16s; }
.calm *, .calm *::before, .calm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
body.frosted .ch { color: color-mix(in srgb, var(--text) 82%, transparent); } body.frosted .ch.on { color: var(--text); }
body.frosted .cat { color: color-mix(in srgb, var(--text) 62%, transparent); }
/* вход: сбрасываем общие стили кнопок и полей, чтобы остался чистый стеклянный вид */
body #auth .gf input, body.frosted.glass #auth .gf input, body #auth .gcode { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; }
body #auth .gcode { border-bottom: 1px solid rgba(255,255,255,.4) !important; }
#auth .gmethods button { background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
#auth .gmethods button.on { background: rgba(255,255,255,.92); color: #14111f; }
#auth .gmethods button:hover:not(.on) { background: rgba(255,255,255,.16); }
#auth .gbtn { background: rgba(255,255,255,.14); color: #fff; } #auth .gbtn:hover:not(:disabled) { background: rgba(255,255,255,.26); }
#auth .glink, #auth .gpill { background: transparent; } #auth .gpill:hover { background: #fff; color: #14111f; }
#auth .acc { background: rgba(255,255,255,.1); color: #fff; }
.premhero h3, .premhero p { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
body.frosted .hl { color: color-mix(in srgb, var(--text) 82%, transparent); } body.frosted .hl.on { color: var(--text); }