/* =========================================================================
   PampChat — flat, firm colour system.
   Every colour comes from the theme variables (see js/themes.js).
   Default theme "Midnight Howl": charcoal, periwinkle blue, crimson, violet.
   ========================================================================= */
:root {
  --bg: #100e14; --bg2: #0a090d; --panel: #18161e; --raise: #221f2a; --line: #2c2836;
  --text: #eeebf5; --muted: #a5a0b4; --primary: #5b7cfa; --on-primary: #fff; --accent: #c41e3a; --accent2: #8a5cd6;
  --ok: #3ccf8e; --warn: #f0b429; --bad: #ef4565;
  --dim: color-mix(in srgb, var(--muted) 65%, var(--bg));
  --line2: color-mix(in srgb, var(--text) 18%, var(--panel));
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --sel: color-mix(in srgb, var(--primary) 16%, var(--panel));
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --r: 10px; --r-sm: 7px; --r-lg: 14px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side: 236px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a.btn:hover, a.nav:hover, a.chan:hover, a.srv:hover, a.conv:hover, a.card:hover, a.row:hover, a.person:hover, a.pcard:hover, a.group-card:hover, a.srv-card:hover, a.stat:hover, a.anav:hover, a.bnav:hover, a.logo:hover, a.cell-user:hover, .uname:hover { text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 750; }
h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
h4 { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
h2 .ic, h3 .ic { color: var(--primary); }
p { margin: 0 0 .8em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.hint { color: var(--dim); font-size: 12.5px; }
.center { text-align: center; }
.right { text-align: right; }
.block { display: block; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.pad { padding: 16px; }
.col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.row { display: flex; align-items: center; gap: 12px; }
.row.gap { gap: 10px; flex-wrap: wrap; }
.center-row { justify-content: center; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--primary) 40%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Icons */
.ic { --ic: 18px; display: inline-flex; width: var(--ic); height: var(--ic); flex: none; vertical-align: -.2em; }
.ic svg { width: 100%; height: 100%; }
.vtick { color: var(--primary); --ic: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--raise); color: var(--text); font: 600 14px var(--font); cursor: pointer;
  transition: background .12s, border-color .12s; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: color-mix(in srgb, var(--text) 9%, var(--raise)); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic { --ic: 17px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: color-mix(in srgb, #000 12%, var(--primary)); border-color: color-mix(in srgb, #000 12%, var(--primary)); color: var(--on-primary); }
.btn.ghost { background: transparent; border-color: var(--line2); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, #000 14%, var(--bad)); }
.btn.glass { background: rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .2); color: #fff; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15.5px; border-radius: var(--r); }
.btn.block { display: flex; width: 100%; }
.btn.icon-only { width: 40px; padding: 0; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy .ic { opacity: 0; }
.btn.busy::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-color: var(--muted) transparent var(--muted) transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--muted); cursor: pointer; position: relative; flex: none; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.xs { width: 26px; height: 26px; border-radius: 6px; }
.icon-btn.glass { background: rgba(0, 0, 0, .65); color: #fff; }
.icon-btn.glass:hover { background: rgba(0, 0, 0, .8); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 8px; }

/* ---------- Forms ---------- */
input, select, textarea {
  width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 9px 12px;
  font: 14.5px var(--font); outline: none; transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { resize: vertical; min-height: 42px; line-height: 1.45; }
select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; margin: 0; }
input[type=range] { padding: 0; accent-color: var(--primary); background: none; border: 0; box-shadow: none; }
input[type=color] { width: 38px; height: 38px; padding: 3px; cursor: pointer; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 650; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; font-size: 14px; }
.check input { margin-top: 2px; }
.check.inline { align-items: center; }
input.narrow, .check .narrow { width: 72px; padding: 6px 8px; }
.radio-list { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 14px; }
.radio { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: pointer; }
.radio:hover { background: var(--hover); }
.radio:has(input:checked) { border-color: var(--primary); background: var(--sel); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.grid2.top { align-items: start; gap: 16px; }
.colorfield { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 650; margin: 0 16px 10px 0; }
.toggle { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle:last-of-type { border-bottom: 0; }
.tg-text { flex: 1; display: flex; flex-direction: column; }
.tg-text strong { font-weight: 650; font-size: 14.5px; }
.tg-text small { color: var(--dim); font-size: 12.5px; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; z-index: 1; }
.switch .knob { position: absolute; inset: 0; background: var(--line2); border-radius: 20px; transition: background .15s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch input:checked + .knob { background: var(--primary); }
.switch input:checked + .knob::after { transform: translateX(18px); background: var(--on-primary); }
.switch input:focus-visible + .knob { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------- Surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.card-head h3 { margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar select { width: auto; min-width: 150px; }
.searchbox { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.searchbox .ic { position: absolute; left: 12px; color: var(--dim); pointer-events: none; }
.searchbox input { padding-left: 38px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .tabs { margin-bottom: 0; border: 0; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 650 14px var(--font); padding: 10px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--primary); }
.count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--raise); color: var(--muted); border: 1px solid var(--line2); text-transform: capitalize; white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.pill.gold { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pill.match { color: #fff; background: var(--accent); border-color: var(--accent); }
.nsfw-dot { display: inline-flex; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; margin-left: 6px; letter-spacing: .03em; vertical-align: middle; line-height: 1.4; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--raise); border: 1px solid var(--line2); border-left: 3px solid var(--primary); font-size: 13.5px; margin-bottom: 14px; color: var(--text); }
.note .ic { margin-top: 1px; color: var(--primary); }
.note.info { border-left-color: var(--warn); }
.note.info .ic { color: var(--warn); }
.note.warn { border-left-color: var(--warn); }
.note.warn .ic { color: var(--warn); }
.note.bad { border-left-color: var(--bad); }
.note.bad .ic { color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line2); background: var(--raise); color: var(--text); font: 550 13px var(--font); }
.chips.selectable .chip { cursor: pointer; }
.chips.selectable .chip:hover { border-color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip.shared { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 18%, var(--raise)); }
.chip-x { background: none; border: 0; color: var(--dim); cursor: pointer; display: inline-flex; padding: 0; }
.chip-x:hover { color: var(--bad); }
.list { display: flex; flex-direction: column; }
.list .row { padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.list .row:last-child { border-bottom: 0; }
.card.list { padding: 4px 18px; }
.empty { text-align: center; padding: 56px 20px; color: var(--muted); grid-column: 1 / -1; }
.empty-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--raise); color: var(--primary); border: 1px solid var(--line2); }
.empty h3 { color: var(--text); justify-content: center; font-size: 17px; }
.loading { display: flex; justify-content: center; padding: 56px; grid-column: 1 / -1; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.big-ic { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--raise); border: 1px solid var(--line2); color: var(--primary); }
.big-ic.ok { color: var(--ok); }
.big-ic.warn { color: var(--bad); }
.gate, .verify-done { text-align: center; padding: 44px 24px; max-width: 560px; margin: 30px auto; }
.gate h2, .verify-done h2 { justify-content: center; }

/* ---------- Avatars & names ---------- */
.avatar { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative; display: inline-flex; background: var(--primary); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar .ini { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 750; color: var(--on-primary); font-size: calc(var(--s) * .42); border-radius: 50%; }
.avatar.ring { padding: 3px; background: var(--acc, var(--primary)); }
.avatar.ring img, .avatar.ring .ini { border: 2px solid var(--panel); }
.avatar.ring .ini { background: var(--primary); }
.avatar .dot { position: absolute; right: 0; bottom: 0; width: max(10px, calc(var(--s) * .26)); height: max(10px, calc(var(--s) * .26)); border-radius: 50%; background: var(--ok); border: 2.5px solid var(--panel); }
.uname { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 650; min-width: 0; }
.uname .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; flex: none; line-height: 1.5; }
.role-chip .ic { --ic: 11px; }
.role-chip.owner { background: var(--warn); color: #1c1300; }
.role-chip.admin { background: var(--accent); color: #fff; }
.role-chip.mod { background: var(--accent2); color: #fff; }
.badge { --bc: #f0b429; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--bc); background: color-mix(in srgb, var(--bc) 13%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent); white-space: nowrap; }
.badge.lg { font-size: 13px; padding: 4px 11px 4px 8px; }
.badge.pickable { cursor: pointer; opacity: .5; font-family: var(--font); }
.badge.pickable.on { opacity: 1; border-color: var(--bc); }
.badge.pickable:disabled { cursor: default; }
.badge-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: var(--side); flex: none; position: fixed; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--panel); z-index: 20; }
.side-top { padding: 2px 8px 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.logo:hover { color: var(--text); }
.logo-mark { --s: 34px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28); background: var(--primary); display: inline-flex; align-items: center; justify-content: center; color: var(--on-primary); flex: none; position: relative; }
.logo-mark::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: calc(var(--s) * .3); height: calc(var(--s) * .3); border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.logo-mark .ic { --ic: calc(var(--s) * .58); }
.side-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.nav { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; position: relative; }
.nav:hover { background: var(--hover); color: var(--text); }
.nav.on { background: var(--raise); color: var(--text); }
.nav.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav.on .ic { color: var(--primary); }
.nav-l { flex: 1; }
.nav-sep { height: 1px; background: var(--line); margin: 10px 8px; }
.nav.staff .ic { color: var(--accent2); }
.side-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); color: var(--text); text-align: left; cursor: pointer; font: inherit; margin-top: 10px; }
.side-me:hover { background: var(--raise); }
.side-me strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.side-me small { font-size: 12px; }
.side-me .avatar.ring img, .side-me .avatar.ring .ini { border-color: var(--bg2); }
.main { flex: 1; margin-left: var(--side); min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: none; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 15; }
.top-me { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.badge-wrap { position: relative; display: inline-flex; }
.badge-wrap .count { position: absolute; top: -6px; right: -9px; transform: scale(.85); }
.icon-btn.badge-wrap .count { top: 1px; right: -1px; }
#view { padding: 28px 32px 60px; max-width: 1240px; width: 100%; margin: 0 auto; flex: 1; }
.main.flush { height: 100vh; height: 100dvh; min-height: 0; }
.main.flush #view { padding: 0; max-width: none; display: flex; flex-direction: column; min-height: 0; }
.announce { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13.5px; font-weight: 550; background: var(--primary); color: var(--on-primary); }
.announce.bad { background: var(--bad); color: #fff; }
.announce.verify { background: var(--warn); color: #1c1300; }
.announce.verify span:not(.ic) { flex: 1; }
.announce.verify strong { white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.announce.verify:hover { text-decoration: none; }
.bottom-nav { display: none; }

/* Popover menu */
.popmenu { position: fixed; z-index: 200; min-width: 210px; padding: 5px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.popmenu .item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--text); font: 550 14px var(--font); border-radius: 6px; cursor: pointer; text-align: left; }
.popmenu .item:hover { background: var(--primary); color: var(--on-primary); }
.popmenu .item:hover .ic { color: inherit; }
.popmenu .item .ic { color: var(--muted); }
.popmenu .item.danger { color: var(--bad); }
.popmenu .item.danger .ic { color: var(--bad); }
.popmenu .item.danger:hover { background: var(--bad); color: #fff; }
.popmenu .sep { height: 1px; background: var(--line); margin: 4px; }

/* Modal */
.modal-wrap { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .15s; }
.modal-wrap.in { opacity: 1; }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: translateY(6px); transition: transform .15s; }
.modal-wrap.in .modal { transform: none; }
.modal.wide { max-width: 780px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 20px; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 8px 20px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 8px; }
.lightbox .modal-body { padding: 0 14px 14px; display: flex; justify-content: center; }
.lightbox-img { max-width: 100%; max-height: 72vh; border-radius: var(--r); display: block; }

/* Toasts */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; max-width: 380px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--primary); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 14px; transform: translateY(10px); opacity: 0; transition: .2s; pointer-events: auto; }
.toast.in { transform: none; opacity: 1; }
.toast .ic { color: var(--primary); }
.toast.success { border-left-color: var(--ok); }
.toast.success .ic { color: var(--ok); }
.toast.error { border-left-color: var(--bad); }
.toast.error .ic { color: var(--bad); }

/* ---------- Profile cards (colours here come from each member's own design) ---------- */
.pcard {
  --grad: linear-gradient(135deg, #1d1640, #4b2d7f); --acc: #ff8fd0; --txt: #fff;
  position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; color: var(--txt);
  background: var(--grad); isolation: isolate; transition: transform .15s; min-width: 0; border: 1px solid rgba(255, 255, 255, .08);
}
a.pcard:hover { transform: translateY(-2px); color: var(--txt); }
.pcard.animated { background-size: 220% 220%; animation: gradshift 12s ease-in-out infinite; }
@keyframes gradshift { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
.pc-banner { height: 90px; background-size: cover; background-position: center; position: relative; z-index: 0; }
.pcard.full .pc-banner { height: 200px; }
.pc-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--acc); }
.pc-deco svg { width: 100%; height: 100%; display: block; }
.deco-k-flames .pc-deco { background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 25%, transparent), transparent 45%); }
.deco-k-frost .pc-deco { color: #e8f8ff; background: linear-gradient(180deg, rgba(220, 245, 255, .2), transparent 30%); }
.deco-k-galaxy .pc-deco { background: radial-gradient(60% 40% at 80% 20%, color-mix(in srgb, var(--acc) 30%, transparent), transparent), radial-gradient(50% 40% at 15% 85%, rgba(120, 90, 255, .3), transparent); }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; }
.pattern-grain::before { background-image: 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'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .7; mix-blend-mode: overlay; }
.pattern-dots::before { background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px); background-size: 14px 14px; }
.pattern-grid::before { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; }
.pattern-diagonal::before { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 12px); }
.pattern-mesh::before { background: radial-gradient(40% 50% at 20% 30%, rgba(255, 255, 255, .14), transparent), radial-gradient(40% 40% at 85% 75%, rgba(255, 255, 255, .1), transparent); opacity: 1; }
.border-solid { box-shadow: inset 0 0 0 2px var(--acc); }
.border-glow { box-shadow: 0 0 0 1.5px var(--acc), 0 0 24px color-mix(in srgb, var(--acc) 40%, transparent); }
.border-double { box-shadow: inset 0 0 0 2px var(--acc), inset 0 0 0 5px rgba(0, 0, 0, .3), inset 0 0 0 7px color-mix(in srgb, var(--acc) 60%, transparent); }
.border-dashed { outline: 2px dashed var(--acc); outline-offset: -7px; }
.border-rainbow { border: 2.5px solid transparent; background: var(--grad) padding-box, conic-gradient(from var(--spin, 0deg), #ff8fd0, #ffd479, #7ff0d0, #8fd3ff, #b49cff, #ff8fd0) border-box; animation: spinborder 6s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spinborder { to { --spin: 360deg; } }
.pc-body { position: relative; z-index: 2; padding: 0 16px 16px; margin-top: -38px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.glass .pc-body { margin: -38px 8px 8px; padding: 0 12px 12px; border-radius: 12px; background: linear-gradient(180deg, transparent 0, transparent 38px, rgba(0, 0, 0, .32) 38px); }
.pcard.full .pc-body { margin-top: -56px; }
.pcard.full.glass .pc-body { background: linear-gradient(180deg, transparent 0, transparent 56px, rgba(0, 0, 0, .32) 56px); }
.pc-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.pc-top .avatar.ring img, .pc-top .avatar.ring .ini { border-color: var(--c1, #1d1640); }
.pc-top .avatar .dot { border-color: var(--c1, #1d1640); }
.pc-name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; min-width: 0; }
.pcard.full .pc-name { font-size: 26px; }
.pc-name .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-name .vtick { color: #fff; }
.pc-handle { font-size: 13px; opacity: .78; display: flex; gap: 10px; align-items: center; }
.pc-handle .live { color: #5ff0a8; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; opacity: 1; }
.pc-handle .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ccf8e; }
.pc-facts { font-size: 14px; font-weight: 650; margin-top: 4px; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; opacity: .88; }
.pc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pc-meta .ic { color: var(--acc); }
.pc-headline { font-size: 13.5px; opacity: .92; margin: 6px 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard.full .pc-headline { -webkit-line-clamp: unset; font-size: 15px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tagpill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .16); }
.pcard .badge { background: rgba(0, 0, 0, .35); }
.compat { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; font-weight: 800; }
.compat-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.compat-bar span { display: block; height: 100%; border-radius: 6px; background: var(--acc); }
.compat-n { color: var(--acc); min-width: 34px; text-align: right; }
.like-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, background .12s; }
.round-btn:hover { transform: scale(1.06); }
.round-btn.pass:hover, .round-btn.pass.on { background: rgba(0, 0, 0, .7); }
.round-btn.like:hover, .round-btn.like.on { background: var(--accent); border-color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card-grid .pcard .pc-body > :last-child { margin-top: auto; }

/* Card designer */
.designer { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.designer-side { position: sticky; top: 20px; }
.designer-preview .pcard { pointer-events: none; }
.designer-controls section { margin-bottom: 22px; }
.presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.preset { height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--grad); cursor: pointer; display: flex; align-items: flex-end; padding: 6px; color: #fff; font: 700 10.5px var(--font); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.preset:hover { outline: 2px solid var(--primary); outline-offset: 1px; }
.colors { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.opt { padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: 650 13px var(--font); cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: center; }
.opt:hover { border-color: var(--primary); }
.opt.on { border-color: var(--primary); background: var(--sel); box-shadow: inset 0 0 0 1px var(--primary); }
.opt-sw { height: 44px; border-radius: 5px; background: var(--grad); position: relative; overflow: hidden; color: var(--acc); }
.opt-sw .pc-deco g, .opt-sw .pc-deco circle { opacity: .75; }
.opt-sw .pc-deco svg { transform: scale(1.6); }

/* ---------- Profile page ---------- */
.profile-hero { margin-bottom: 18px; }
.profile-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; justify-content: flex-end; }
.profile-actions .like-btns { margin: 0; }
.profile-actions .round-btn { width: 40px; height: 40px; background: var(--raise); border-color: var(--line2); color: var(--text); }
.profile-actions .round-btn.like { color: var(--accent); }
.profile-actions .round-btn.like:hover, .profile-actions .round-btn.like.on { color: #fff; }
.profile-cols, .group-cols { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.psec h3 { margin-bottom: 12px; }
.prose { word-wrap: break-word; line-height: 1.6; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 550; }
.limits { margin: 12px 0; padding: 12px 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line2); border-left: 3px solid var(--bad); }
.limits strong { display: flex; align-items: center; gap: 6px; color: var(--bad); margin-bottom: 4px; font-size: 13px; }
.limits p { margin: 0; }
.kink-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lv-fave { --lc: #e8457a; }
.lv-yes { --lc: #3ccf8e; }
.lv-maybe { --lc: #f0b429; }
.lv-no { --lc: #8c8799; }
.ktag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 11px; border-radius: 6px; font-size: 13px; border: 1px solid var(--line2); background: var(--raise); }
.ktag em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; background: var(--lc); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.gitem { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--bg2); border: 1px solid var(--line); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--dim); }
.gitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.gitem:hover { border-color: var(--primary); }
.gitem.hidden { cursor: default; background: repeating-linear-gradient(45deg, var(--bg2) 0 10px, var(--panel) 10px 20px); }
.nsfw-tag { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: #fff; letter-spacing: .04em; z-index: 2; }
.gtools { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.gadd { aspect-ratio: 1; border-radius: var(--r); border: 1.5px dashed var(--line2); background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 650 13px var(--font); }
.gadd:hover { border-color: var(--primary); color: var(--primary); }

/* Editor */
.form-card h2 { margin-bottom: 16px; }
.media-edit { margin: -20px -20px 0; }
.banner-edit { height: 180px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--primary); background-size: cover; background-position: center; position: relative; }
.banner-btns { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.avatar-edit { display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 20px; margin-top: -48px; position: relative; }
.kink-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 12.5px; }
.kink-legend span { display: inline-flex; gap: 5px; align-items: center; color: var(--lc); font-weight: 750; }
.kink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 18px; }
.kink-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.kname { flex: 1; font-size: 14px; }
.kopts { display: flex; gap: 4px; }
.kopt { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg2); color: var(--dim); cursor: pointer; font: 700 11.5px var(--font); }
.kopt span:not(.ic) { display: none; }
.kopt:hover { color: var(--lc); border-color: var(--lc); }
.kopt.on { color: #fff; background: var(--lc); border-color: var(--lc); }
.kopt.on span:not(.ic) { display: inline; }
.sticky-save { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; pointer-events: none; }
.sticky-save .btn { pointer-events: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.crop { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-canvas { border-radius: var(--r); cursor: grab; touch-action: none; background: #000; max-width: 100%; }
.crop-canvas:active { cursor: grabbing; }
.crop-tools { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); }

/* Settings & themes */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.settings .card { margin: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-sw { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; font: 650 13px var(--font); text-align: left; position: relative; }
.theme-sw:hover { border-color: var(--primary); }
.theme-sw.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.theme-sw > .ic { position: absolute; top: 10px; right: 10px; background: var(--primary); color: var(--on-primary); border-radius: 50%; padding: 2px; --ic: 18px; }
.ts-prev { height: 64px; border-radius: 6px; border: 1px solid; display: flex; overflow: hidden; }
.ts-prev.auto { border-color: var(--line2); background: var(--raise); align-items: center; justify-content: center; color: var(--muted); }
.ts-side { width: 30%; }
.ts-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 9px; }
.ts-bars i { display: block; height: 8px; border-radius: 3px; }
.ts-bars i:nth-child(1) { width: 85%; }
.ts-bars i:nth-child(2) { width: 55%; }
.ts-bars i:nth-child(3) { width: 35%; }
.ts-name { padding: 0 4px; }

/* Verify */
.verify { padding: 6px 22px; }
.vstep { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: flex-start; flex-wrap: wrap; }
.vstep:last-child { border-bottom: 0; }
.vnum { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--raise); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary); }
.vstep.done .vnum { background: var(--ok); color: #04210f; border-color: var(--ok); }
.vtext { flex: 1; min-width: 240px; }
.vtext h3 { margin-bottom: 4px; }
.vtext p { margin: 0; font-size: 14px; }
.vact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vact select { width: auto; }
.vact.col { flex-direction: column; align-items: stretch; max-width: 380px; }
.code-box { margin: 4px 0 4px 50px; padding: 14px 18px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line2); border-left: 3px solid var(--primary); display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; align-items: center; }
.code-box span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 750; grid-column: 2; grid-row: 1; }
.code-box strong { font-family: var(--mono); font-size: 30px; letter-spacing: .14em; color: var(--text); grid-column: 1; grid-row: 1 / span 2; }
.code-box small { color: var(--muted); grid-column: 2; }
.privacy-note { display: flex; gap: 14px; align-items: flex-start; }
.privacy-note > .ic { --ic: 22px; color: var(--ok); margin-top: 2px; }

/* Notifications */
.notif { color: var(--text); padding: 13px 6px !important; border-radius: var(--r-sm); }
.notif:hover { background: var(--hover); }
.notif.unread { background: var(--sel); }
.nic { width: 40px; height: 40px; border-radius: 50%; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); flex: none; border: 1px solid var(--line2); }
.k-warning .nic, .k-verify_rejected .nic { color: var(--warn); }
.k-verified .nic { color: var(--ok); }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- Direct messages ---------- */
.messenger { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; min-height: 0; flex: 1; }
.conv-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.conv-head { padding: 18px 16px 10px; }
.conv-head h2 { margin: 0; }
.conv-list { overflow-y: auto; flex: 1; padding: 4px 8px 16px; }
.conv { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--text); }
.conv:hover { background: var(--hover); color: var(--text); }
.conv.on { background: var(--raise); }
.conv-top { display: flex; align-items: center; gap: 5px; }
.conv-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-top small { margin-left: auto; flex: none; font-size: 12px; }
.conv-last { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.unread .conv-last { color: var(--text); font-weight: 650; }
.conv-pane, .chan-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.pane-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; flex: none; border-bottom: 1px solid var(--line); background: var(--bg); }
.pane-head .back { display: none; }
.pane-user { display: flex; align-items: center; gap: 12px; color: var(--text); }
.pane-user > div > div { display: flex; align-items: center; gap: 5px; }
.thread, .feed { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.thread > :first-child, .feed > :first-child { margin-top: auto; }
.thread-empty, .feed-empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); }
.thread-empty h3, .feed-empty h3 { color: var(--text); margin: 6px 0 0; }
.feed-empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--raise); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.day-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; color: var(--dim); font-size: 12px; font-weight: 700; }
.day-sep::before, .day-sep::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.bubble-row { display: flex; align-items: center; gap: 6px; max-width: 76%; margin-top: 2px; }
.bubble-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.bubble { padding: 8px 12px 6px; border-radius: 16px; background: var(--raise); font-size: 14.5px; overflow-wrap: anywhere; line-height: 1.45; min-width: 0; }
.mine .bubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 5px; }
.theirs .bubble { border-bottom-left-radius: 5px; }
.bubble.has-att { padding: 5px; }
.bubble.has-att .btext { padding: 4px 6px 0; }
.bubble.has-att .btime { margin-right: 6px; }
.bubble.sticker-only, .bubble.emoji-only { background: transparent !important; color: var(--text); padding: 2px; }
.bubble.sticker-only .btime, .bubble.emoji-only .btime { color: var(--muted); }
.bubble.deleted { background: transparent !important; border: 1px dashed var(--line2); color: var(--muted) !important; }
.btime { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; font-size: 10.5px; opacity: .7; vertical-align: -1px; float: right; margin-top: 5px; }
.bmenu { opacity: 0; }
.bubble-row:hover .bmenu { opacity: 1; }
.typing { min-height: 18px; padding: 0 22px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mine .link { color: inherit; }
.mention { color: var(--primary); font-weight: 700; background: var(--primary-soft); padding: 0 3px; border-radius: 4px; }
.mention.me { color: var(--accent); background: var(--accent-soft); }
.mine .mention { color: inherit; background: rgba(0, 0, 0, .18); }
.cemoji { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }
.cemoji.big { width: 48px; height: 48px; vertical-align: middle; }

/* ---------- Composer (chat bar) ---------- */
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 14px; flex: none; position: relative; }
.cbar { flex: 1; display: flex; align-items: flex-end; gap: 2px; background: var(--raise); border: 1px solid var(--line2); border-radius: 12px; padding: 4px; min-width: 0; transition: border-color .12s; }
.cbar:focus-within { border-color: var(--primary); }
.cbar textarea { flex: 1; border: 0; background: transparent; resize: none; max-height: 180px; padding: 8px 6px; box-shadow: none; min-height: 38px; }
.cbar textarea:focus { box-shadow: none; }
.cbtn { width: 38px; height: 38px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.cbtn:hover:not(:disabled) { color: var(--primary); background: var(--hover); }
.cbtn:disabled { opacity: .4; cursor: not-allowed; }
.csend { width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.csend:hover:not(:disabled) { background: color-mix(in srgb, #000 12%, var(--primary)); }
.csend:disabled { opacity: .4; cursor: not-allowed; }
.composer.drop .cbar { border-color: var(--primary); border-style: dashed; background: var(--sel); }
.send-preview { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto 14px; border-radius: var(--r); }

/* Attachments */
.chat-img { display: block; position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg2); cursor: zoom-in; max-width: 100%; margin-top: 4px; }
.chat-img img { display: block; width: 100%; height: 100%; max-height: 340px; object-fit: cover; }
.chat-img.blurred img { filter: blur(26px); transform: scale(1.1); }
.chat-img .reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font: 700 13px var(--font); background: rgba(0, 0, 0, .35); }
.bubble .chat-img { margin: 0; border: 0; border-radius: 12px; }
.chat-sticker { display: block; width: 150px; height: 150px; object-fit: contain; margin-top: 4px; }
.chat-sticker.small { width: 64px; height: 64px; }

/* Pickers */
.picker { position: fixed; z-index: 220; width: 360px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; }
.pk-head { padding: 10px 10px 0; }
.pk-search { padding: 7px 10px; }
.pk-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pk-tab { width: 36px; height: 34px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pk-tab:hover { color: var(--text); }
.pk-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.pk-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; }
.pk-grid { height: 280px; overflow-y: auto; padding: 8px; display: grid; align-content: start; }
.pk-grid.emoji { grid-template-columns: repeat(8, 1fr); gap: 2px; }
.pk-grid.stickers { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-title { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 4px 6px; }
.pk-emoji { aspect-ratio: 1; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 23px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 3px; }
.pk-emoji:hover { background: var(--hover); }
.pk-emoji img { width: 30px; height: 30px; object-fit: contain; }
.pk-sticker { aspect-ratio: 1; border: 1px solid transparent; background: var(--bg2); border-radius: var(--r-sm); cursor: pointer; padding: 6px; }
.pk-sticker:hover { border-color: var(--primary); }
.pk-sticker img { width: 100%; height: 100%; object-fit: contain; }
.pk-empty { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pk-empty p { margin: 6px 0 0; color: var(--text); font-weight: 650; }
.pk-foot { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.pk-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }

/* ---------- Chat app: servers ---------- */
.chat-app { display: grid; grid-template-columns: 72px 240px 1fr 220px; grid-template-rows: minmax(0, 1fr); overflow: hidden; min-height: 0; flex: 1; background: var(--bg); color: var(--text); }
.srv-rail { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; overflow-y: auto; }
.srv { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.srv-pill { position: absolute; left: 0; width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--text); opacity: 0; transition: height .15s, opacity .15s; }
.srv:hover .srv-pill { opacity: 1; height: 20px; }
.srv.on .srv-pill { opacity: 1; height: 36px; background: var(--primary); }
.srv-ic { --s: 46px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: var(--raise); color: var(--text); font-weight: 800; font-size: calc(var(--s) * .34); transition: border-radius .15s, background .15s; }
.srv-ic img { width: 100%; height: 100%; object-fit: cover; }
.srv-ic.official { background: var(--primary); color: var(--on-primary); }
.srv-ic.text { background: var(--accent2); color: #fff; }
.srv-ic.act { background: var(--raise); color: var(--ok); }
.srv:hover .srv-ic, .srv.on .srv-ic { border-radius: 30%; }
.srv-act:hover .srv-ic.act { background: var(--ok); color: #04210f; }
.srv-sep { width: 32px; height: 2px; border-radius: 2px; background: var(--line2); margin: 2px 0; }
.chan-side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.chan-head { padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); background-size: cover; background-position: center; position: relative; flex: none; }
.chan-head-row { display: flex; align-items: center; gap: 6px; height: 58px; }
.chan-head-row strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-desc { display: block; font-size: 12px; color: var(--muted); margin: -10px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-head.has-banner { min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.chan-head.has-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .75)); }
.chan-head.has-banner > * { position: relative; }
.chan-head.has-banner .chan-desc { color: rgba(255, 255, 255, .8); }
.chan-head.has-banner .icon-btn { color: #fff; }
.chan-list { flex: 1; overflow-y: auto; padding: 10px 8px; }
.chan-group { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chan { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--muted); font-weight: 600; margin-bottom: 1px; }
.chan:hover { background: var(--hover); color: var(--text); }
.chan.on { background: var(--raise); color: var(--text); }
.chan.on > .ic:first-child { color: var(--primary); }
.chan.archived { opacity: .5; }
.chan-edit { opacity: 0; }
.chan:hover .chan-edit, .chan.on .chan-edit { opacity: 1; }
.chan-foot { padding: 10px; border-top: 1px solid var(--line); }
.chan-people { border-left: 1px solid var(--line); padding: 18px 12px; overflow-y: auto; background: var(--panel); }
.people-toggle { display: none; }
.room-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); flex: none; }
.person { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 550; }
.person:hover { background: var(--hover); color: var(--text); }
.person .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .avatar .dot { border-color: var(--panel); }
.pinned { display: flex; gap: 10px; align-items: flex-start; padding: 9px 18px; font-size: 13px; background: var(--panel); border-bottom: 1px solid var(--line); border-left: 3px solid var(--warn); flex: none; }
.pinned .ic { color: var(--warn); margin-top: 2px; }
.msg { display: flex; gap: 12px; padding: 4px 10px; border-radius: 6px; position: relative; margin-top: 10px; }
.msg.grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: var(--hover); }
.msg.mention-me { background: color-mix(in srgb, var(--warn) 9%, transparent); box-shadow: inset 3px 0 0 var(--warn); }
.msg-av { flex: none; }
.msg-time-side { width: 40px; flex: none; font-size: 10.5px; color: var(--dim); opacity: 0; text-align: center; padding-top: 3px; }
.msg:hover .msg-time-side { opacity: 1; }
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 6px; }
.msg-name { font-weight: 750; color: var(--text); }
.msg-time { font-size: 11.5px; color: var(--dim); }
.msg-text { overflow-wrap: anywhere; line-height: 1.5; }
.msg.deleted .msg-text { color: var(--dim); }
.msg-reply { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; overflow: hidden; white-space: nowrap; }
.msg-reply span { overflow: hidden; text-overflow: ellipsis; }
.msg-tools { position: absolute; right: 8px; top: -14px; display: none; background: var(--panel); border: 1px solid var(--line2); border-radius: 7px; padding: 2px; }
.msg:hover .msg-tools { display: flex; }
.reply-bar { display: none; align-items: center; gap: 8px; margin: 0 16px -6px; padding: 7px 12px; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--line2); border-bottom: 0; border-radius: 10px 10px 0 0; }
.reply-bar.on { display: flex; }
.reply-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Server discovery, preview, settings */
.srv-card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--text); overflow: hidden; }
.srv-card:hover { border-color: var(--primary); color: var(--text); }
.srv-card-banner { height: 80px; background: var(--raise); background-size: cover; background-position: center; }
.srv-card-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.srv-card-body .srv-ic { margin-top: -28px; border: 4px solid var(--panel); box-sizing: content-box; border-radius: 30%; }
.srv-card-body h3 { margin: 8px 0 0; }
.srv-card-body p { font-size: 13.5px; margin: 0 0 6px; }
.srv-preview-wrap { display: flex; justify-content: center; padding: 40px 16px; }
.srv-preview { max-width: 560px; width: 100%; padding: 0; overflow: hidden; text-align: center; background: var(--panel); }
.srv-preview-banner { height: 140px; background: var(--primary); background-size: cover; background-position: center; }
.srv-preview-body { padding: 0 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.srv-preview-body .srv-ic { margin-top: -46px; border: 5px solid var(--panel); box-sizing: content-box; border-radius: 30%; }
.srv-preview-body h1 { margin: 6px 0 0; }
.srv-preview-body .btn-row { margin-top: 10px; }
.ss { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.ss-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1px; padding: 10px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.ss-title { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ss-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-body { min-width: 0; }
.img-row { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.banner-thumb { width: 172px; height: 72px; border-radius: var(--r-sm); background: var(--raise); background-size: cover; background-position: center; border: 1px solid var(--line2); flex: none; }
.theme-preview { display: grid; grid-template-columns: 54px 150px 1fr; height: 230px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13px; }
.tp-rail { background: var(--bg2); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.tp-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--raise); }
.tp-side { background: var(--panel); padding: 12px 8px; border-right: 1px solid var(--line); }
.tp-side strong { display: block; padding: 0 6px 10px; }
.tp-chan { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 5px; color: var(--muted); }
.tp-chan.on { background: var(--raise); color: var(--text); }
.tp-chan.on .ic { color: var(--primary); }
.tp-main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tp-msg { display: flex; gap: 10px; }
.tp-msg p { margin: 0; }
.tp-comp { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-radius: 9px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); }
.tp-send { width: 28px; height: 28px; border-radius: 7px; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.st-grid.emoji { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.st-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.st-tile img { width: 88px; height: 88px; object-fit: contain; }
.st-tile.emoji img { width: 40px; height: 40px; margin: 8px 0; }
.st-name { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.st-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; background: var(--panel); border-radius: 6px; border: 1px solid var(--line2); }
.st-tile:hover .st-tools { display: flex; }
.st-thumb { width: 36px; height: 36px; object-fit: contain; display: block; }

/* ---------- Groups ---------- */
.gicon { --s: 44px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.group-card { display: flex; flex-direction: column; padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--g1); color: var(--text); }
.group-card:hover { border-color: var(--g2); border-top-color: var(--g1); color: var(--text); }
.gc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.group-card h3 { margin-bottom: 4px; font-size: 16px; }
.group-card p { font-size: 13.5px; flex: 1; }
.gc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); align-items: center; }
.gc-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.group-hero { border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; background: var(--g1); color: #fff; position: relative; overflow: hidden; }
.group-hero::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: var(--g2); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.gh-inner { display: flex; gap: 20px; align-items: center; position: relative; z-index: 1; flex-wrap: wrap; }
.group-hero h1 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.group-hero .gc-meta { color: rgba(255, 255, 255, .85); }
.group-hero .gc-meta a { color: #fff; font-weight: 700; }
.group-hero .gicon { background: rgba(0, 0, 0, .3) !important; }
.group-hero .btn { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .25); color: #fff; }
.group-hero .btn.primary { background: #fff; color: #111; border-color: #fff; }
.group-hero .icon-btn { color: #fff; }
.group-hero .pill { background: rgba(0, 0, 0, .3); color: #fff; border-color: rgba(255, 255, 255, .25); }
.avatar-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.post-composer .row { align-items: flex-start; }
.post-composer .right { margin-top: 10px; }
.post.pinned { border-left: 3px solid var(--warn); }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.post-body { font-size: 15px; margin-bottom: 12px; }
.post-actions { display: flex; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: none; border: 0; color: var(--muted); font: 650 13px var(--font); cursor: pointer; }
.post-act:hover { background: var(--hover); color: var(--text); }
.post-act.on { color: var(--accent); }
.comments { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.comment { display: flex; gap: 10px; font-size: 14px; }
.cm-head { display: flex; align-items: center; gap: 8px; }
.cm-head .icon-btn { opacity: 0; }
.comment:hover .cm-head .icon-btn { opacity: 1; }
.comment-in { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.comment-in input { padding: 8px 12px; }
.gform-prev { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r); background: var(--bg2); margin-bottom: 14px; border: 1px solid var(--line); }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; }
.ipick { height: 38px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ipick:hover { color: var(--text); border-color: var(--line2); }
.ipick.on { border-color: var(--primary); color: var(--on-primary); background: var(--primary); }

/* ---------- Public pages ---------- */
.public { min-height: 100vh; }
.land-nav { display: flex; align-items: center; gap: 10px; padding: 18px 32px; max-width: 1240px; margin: 0 auto; }
.landing .announce { justify-content: center; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 56px 32px 64px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 6px; background: var(--raise); color: var(--ok); font-weight: 700; font-size: 13px; border: 1px solid var(--line2); margin-bottom: 20px; }
.hero h1 { font-size: clamp(42px, 6vw, 68px); font-weight: 850; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.lead { font-size: 19px; color: var(--muted); max-width: 520px; line-height: 1.55; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.fine { font-size: 12.5px; color: var(--dim); }
.hero-cards { position: relative; height: 470px; }
.hc { position: absolute; width: 290px; }
.hc1 { left: 6%; top: 0; transform: rotate(-4deg); z-index: 2; }
.hc2 { right: 4%; top: 70px; transform: rotate(5deg); }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1240px; margin: 0 auto; padding: 0 32px 60px; }
.feat { padding: 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.feat-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--on-primary); margin-bottom: 14px; }
.feat:nth-child(3n+2) .feat-ic { background: var(--accent); color: #fff; }
.feat:nth-child(3n) .feat-ic { background: var(--accent2); color: #fff; }
.feat h3 { font-size: 16px; }
.feat p { color: var(--muted); font-size: 14px; margin: 0; }
.legal-foot { text-align: center; padding: 28px 20px 40px; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); max-width: 1240px; margin: 0 auto; }
.legal-foot div { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.legal-foot a { color: var(--muted); }
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 0; }
.auth-card { width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--r-lg); padding: 30px; margin-bottom: 30px; }
.auth-card h1 { text-align: center; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.auth .legal-foot { border: 0; }
.doc-shell .doc { max-width: 820px; margin: 10px auto 40px; }
.doc { max-width: 860px; padding: 36px 44px; line-height: 1.7; }
.doc h1 { font-size: 30px; margin-bottom: 4px; }
.doc h2 { margin-top: 28px; font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc h3 { margin-top: 18px; color: var(--primary); }
.doc ul { padding-left: 22px; margin: 0 0 1em; }
.doc li { margin-bottom: 4px; }
.agegate { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; }
.agegate-card { max-width: 440px; text-align: center; padding: 34px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r-lg); }
.agegate-card h1 { font-size: 28px; }
.match-pop { text-align: center; }
.match-avatars { display: flex; align-items: center; justify-content: center; margin: 10px 0 16px; }
.match-heart { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin: 0 -12px; z-index: 2; border: 4px solid var(--panel); box-sizing: content-box; }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.admin-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1px; padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.anav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--muted); font-weight: 600; font-size: 14px; }
.anav span:nth-child(2) { flex: 1; }
.anav:hover { background: var(--hover); color: var(--text); }
.anav.on { background: var(--raise); color: var(--text); }
.anav.on .ic { color: var(--primary); }
.admin-main { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--text); }
a.stat:hover { border-color: var(--primary); color: var(--text); }
.stat.hl { border-color: var(--warn); }
.stat.hl .stat-ic { background: var(--warn); color: #1c1300; }
.stat-ic { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--raise); color: var(--primary); flex: none; }
.stat-v { font-size: 22px; font-weight: 800; line-height: 1.1; }
.stat-l { font-size: 12.5px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-v { width: 100%; border-radius: 4px 4px 0 0; background: var(--primary); min-height: 2px; }
.bar small { font-size: 10.5px; color: var(--dim); }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: 140px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.hbar-t { height: 10px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.hbar-t span { display: block; height: 100%; background: var(--accent2); }
.hbar-n { text-align: right; color: var(--muted); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table.hover tbody tr { cursor: pointer; }
.table.hover tbody tr:hover td { background: var(--hover); }
.table td.detail { color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.table td .btn + .btn { margin-left: 4px; }
.cell-user { display: flex; align-items: center; gap: 10px; color: var(--text); }
.cell-user strong { white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 14px; color: var(--muted); font-size: 13px; }
.admin-user { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.au-side .pcard { margin-bottom: 16px; }
.vlist, .rlist { display: flex; flex-direction: column; }
.vc-head, .rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.vc-imgs figure { margin: 0; }
.vc-imgs img { width: 100%; height: 300px; object-fit: contain; background: #000; border-radius: var(--r); border: 1px solid var(--line); cursor: zoom-in; display: block; }
.vc-imgs figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; text-align: center; }
.vc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; padding: 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.vc-facts small { display: block; color: var(--muted); font-size: 12px; }
.vc-facts .big { font-size: 22px; letter-spacing: .12em; }
.vc-checks { padding: 4px 0 8px; }
.rcard.urgent { border-color: var(--bad); border-left: 4px solid var(--bad); }
.rcard.high { border-left: 4px solid var(--warn); }
.rc-people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.rc-people > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rc-people small { color: var(--muted); font-size: 12px; }
.rc-details { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raise); font-size: 13.5px; margin-bottom: 10px; }
.snap { padding: 12px 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); margin-bottom: 10px; font-size: 14px; overflow-wrap: anywhere; }
.snap.quote { border-left: 3px solid var(--accent); white-space: pre-wrap; }
.snap-img { max-width: 260px; max-height: 260px; border-radius: var(--r-sm); display: block; margin-bottom: 6px; }
.ctx { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg2); font-size: 13px; max-height: 280px; overflow-y: auto; }
.ctx-line { padding: 3px 6px; border-radius: 4px; }
.ctx-line.target { background: var(--accent-soft); }
.rc-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rc-opts { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center; }
.rc-opts .field { margin: 6px 0; min-width: 260px; }
.rc-opts .check { margin: 6px 0; }
.doc-editor { min-height: 560px; font-size: 13px; line-height: 1.55; }
.doc.preview { padding: 24px 28px; max-height: 640px; overflow-y: auto; margin: 0; }
.admin-thread { max-height: 60vh; padding: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .chat-app { grid-template-columns: 72px 230px 1fr; }
  .chan-people { display: none; }
  .people-toggle { display: inline-flex; }
  .chat-app.show-people { grid-template-columns: 72px 230px 1fr 220px; }
  .chat-app.show-people .chan-people { display: block; }
}
@media (max-width: 1100px) {
  .admin-shell, .ss { grid-template-columns: 1fr; }
  .admin-nav, .ss-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .ss-title { display: none; }
  .anav { white-space: nowrap; }
  .admin-user { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .hero-cards { height: 420px; max-width: 560px; width: 100%; margin: 0 auto; }
  .feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .side { display: none; }
  .main { margin-left: 0; padding-bottom: 62px; }
  .topbar { display: flex; }
  #view { padding: 18px 14px 40px; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bnav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 650; padding: 4px 0; }
  .bnav .ic { --ic: 22px; }
  .bnav.on { color: var(--primary); }
  .messenger { grid-template-columns: 1fr; }
  .messenger .conv-pane { display: none; }
  .messenger.has-conv .conv-side { display: none; }
  .messenger.has-conv .conv-pane { display: flex; }
  .chat-app, .chat-app.show-people { grid-template-columns: 1fr; position: relative; }
  .chat-app .srv-rail, .chat-app .chan-side { display: none; }
  .chat-app.show-list { grid-template-columns: 64px 1fr; }
  .chat-app.show-list .srv-rail, .chat-app.show-list .chan-side { display: flex; }
  .chat-app.show-list .chan-main, .chat-app.show-list .chan-people { display: none; }
  .chat-app.show-people .chan-main { display: none; }
  .srv-ic { --s: 42px !important; }
  .pane-head .back { display: inline-flex; }
  .profile-cols, .group-cols, .designer { grid-template-columns: 1fr; }
  .designer-side { position: static; max-width: 340px; margin: 0 auto; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .vc-facts { grid-template-columns: 1fr 1fr; }
  .settings { grid-template-columns: 1fr; }
  .bubble-row { max-width: 88%; }
  .bmenu, .cm-head .icon-btn, .chan-edit { opacity: 1; }
  .composer { padding: 8px 10px 10px; }
  .cbtn { width: 34px; }
  .theme-preview { grid-template-columns: 40px 110px 1fr; }
}
@media (max-width: 600px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; padding: 0 16px 40px; }
  .land-nav { padding: 14px 16px; }
  .hero { padding: 20px 16px 40px; }
  .hero-cards { height: 380px; }
  .hc { width: 240px; }
  .hc1 { left: 0; }
  .hc2 { right: 0; top: 90px; }
  .card { padding: 16px; }
  .media-edit { margin: -16px -16px 0; }
  .doc { padding: 24px 20px; }
  .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-grid .pcard .pc-banner { height: 64px; }
  .card-grid .pc-body { padding: 0 10px 12px; margin-top: -30px; }
  .card-grid .glass .pc-body { margin: -30px 5px 5px; padding: 0 8px 10px; background: linear-gradient(180deg, transparent 0, transparent 30px, rgba(0, 0, 0, .32) 30px); }
  .card-grid .pc-top .avatar { --s: 54px !important; }
  .card-grid .pc-name { font-size: 15px; }
  .card-grid .pc-headline, .card-grid .pc-tags { display: none; }
  .card-grid .round-btn { width: 40px; height: 40px; }
  .presets { grid-template-columns: repeat(3, 1fr); }
  .code-box { margin-left: 0; }
  .vc-imgs { grid-template-columns: 1fr; }
  .rc-people { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 21px; }
  .vc-imgs img { height: 220px; }
  .picker { left: 8px !important; right: 8px; width: auto; }
  .pk-grid.emoji { grid-template-columns: repeat(7, 1fr); }
  .chat-sticker { width: 120px; height: 120px; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   v2: Discord-style chat, profile flex, voice & video
   ========================================================================= */
.ic.flip svg { transform: rotate(180deg); }
.ic.gold { color: var(--warn); }
.ic.bad, .bad > .ic { color: var(--bad); }
.uemoji { font-size: 1.15em; line-height: 1; }

/* presence dots */
.avatar .dot.p-online { background: var(--ok); }
.avatar .dot.p-idle { background: var(--warn); box-shadow: inset calc(var(--s) * -.06) calc(var(--s) * -.06) 0 0 var(--panel); }
.avatar .dot.p-dnd { background: var(--bad); }
.avatar .dot.p-dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 42%; height: 16%; background: var(--panel); border-radius: 2px; }
.avatar .dot.p-offline { background: var(--dim); }

/* avatar frames */
.av-frame { --s: 40px; position: relative; display: inline-flex; width: var(--s); height: var(--s); flex: none; border-radius: 50%; }
.av-frame > .avatar { width: 100%; height: 100%; }
.av-frame::before { content: ""; position: absolute; inset: calc(var(--s) * -.09); border-radius: 50%; pointer-events: none; z-index: 0; }
.av-frame > .avatar { z-index: 1; }
.frame-glow::before { box-shadow: 0 0 calc(var(--s) * .18) calc(var(--s) * .04) var(--acc, var(--primary)); border: 2px solid var(--acc, var(--primary)); }
.frame-pulse::before { border: 2px solid var(--acc, var(--primary)); animation: fr-pulse 1.8s ease-in-out infinite; }
@keyframes fr-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .45; } }
.frame-spin::before { background: conic-gradient(from 0deg, var(--acc, var(--primary)), transparent 40%, var(--acc, var(--primary)) 60%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: fr-spin 2.4s linear infinite; }
.frame-rainbow::before { background: conic-gradient(#ff4f7a, #ffb547, #f5e65c, #4be08f, #4fc3ff, #8a5cff, #ff4f7a); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: fr-spin 4s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
.frame-fire::before { background: conic-gradient(from 180deg, #ff3d00, #ffb300, #ff6d00, #ffea00, #ff3d00); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); filter: blur(.5px); animation: fr-spin 1.6s linear infinite, fr-flick .25s steps(2) infinite; box-shadow: 0 0 12px #ff6d00; }
@keyframes fr-flick { 50% { opacity: .85; } }
.frame-frost::before { border: 3px solid #bfeaff; box-shadow: 0 0 10px #8fdcf0, inset 0 0 6px #e8f8ff; border-style: dotted; animation: fr-spin 12s linear infinite; }
.frame-gold::before { border: 3px solid #e6b84f; box-shadow: 0 0 0 2px #7a5a18, 0 0 10px rgba(230, 184, 79, .6); }
.frame-neon::before { border: 2px solid #13e0b0; box-shadow: 0 0 6px #13e0b0, 0 0 14px #ff2d87, inset 0 0 6px #ff2d87; animation: fr-neon 2.2s ease-in-out infinite alternate; }
@keyframes fr-neon { to { border-color: #ff2d87; box-shadow: 0 0 6px #ff2d87, 0 0 14px #13e0b0, inset 0 0 6px #13e0b0; } }
.frame-thorns::before { border: 2px dashed #8f2d1f; box-shadow: 0 0 0 2px #2b0f12, 0 0 8px #c41e3a; animation: fr-spin 20s linear infinite reverse; }
.frame-halo::before { inset: calc(var(--s) * -.32) calc(var(--s) * .12) auto; height: calc(var(--s) * .2); border-radius: 50%; border: 3px solid #ffe08a; box-shadow: 0 0 10px #ffe08a; animation: fr-halo 3s ease-in-out infinite; }
@keyframes fr-halo { 50% { transform: translateY(-3px); } }
.frame-paws::before, .frame-hearts::before, .frame-stars::before { border: 2px solid color-mix(in srgb, var(--acc, var(--primary)) 70%, transparent); }
.av-frame .orbit { position: absolute; inset: calc(var(--s) * -.14); z-index: 2; pointer-events: none; animation: fr-spin 6s linear infinite; }
.av-frame .orbit i { position: absolute; left: 50%; top: 50%; transform: rotate(calc(var(--i) * 120deg)) translateY(calc(var(--s) * -.62)) rotate(calc(var(--i) * -120deg)); margin: -6px; color: var(--acc, var(--primary)); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); display: flex; }
.frame-hearts .orbit i { color: #ff5c8a; }
.frame-stars .orbit i { color: #ffd479; }

/* gradient names */
.grad-name { background: linear-gradient(90deg, var(--n1), var(--n2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.grad-name.anim { background: linear-gradient(90deg, var(--n1), var(--n2), var(--n1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: name-shimmer 3s linear infinite; }
@keyframes name-shimmer { to { background-position: -200% 0; } }

/* profile effects */
.pc-effect { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.pc-effect i { position: absolute; left: var(--x); top: -20px; transform: scale(var(--s)); animation: fx-fall var(--d) linear infinite; animation-delay: var(--delay); display: flex; opacity: .85; }
@keyframes fx-fall { to { transform: translateY(560px) scale(var(--s)) rotate(200deg); } }
.fx-snow i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; }
.fx-snow i .ic { display: none; }
.fx-sparkle i { color: #ffe08a; animation: fx-twinkle var(--d) ease-in-out infinite; top: calc(var(--x) * .9); }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(var(--s)); } }
.fx-hearts i, .fx-embers i, .fx-paws i, .fx-bubbles i { top: auto; bottom: -20px; animation-name: fx-rise; }
@keyframes fx-rise { 0% { transform: translateY(0) scale(var(--s)); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-560px) translateX(20px) scale(var(--s)); opacity: 0; } }
.fx-hearts i { color: #ff5c8a; }
.fx-embers i { color: #ff8a1f; filter: drop-shadow(0 0 4px #ff6d00); }
.fx-paws i { color: var(--acc); opacity: .5; }
.fx-bubbles i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), transparent 50%); }
.fx-rain i { width: 1.5px; height: 18px; background: linear-gradient(transparent, rgba(180, 210, 255, .8)); animation-duration: calc(var(--d) * .25); }
.fx-confetti i { width: 7px; height: 11px; background: hsl(var(--h) 85% 60%); border-radius: 2px; }
.fx-stars i { top: var(--x); width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: fx-twinkle var(--d) ease-in-out infinite; animation-delay: var(--delay); }
.fx-stars i .ic, .fx-rain i .ic, .fx-confetti i .ic, .fx-bubbles i .ic { display: none; }
.fx-petals i { color: #ffb3c8; }
.fx-aurora { background: linear-gradient(120deg, transparent 20%, rgba(79, 224, 160, .25), rgba(120, 90, 255, .25), transparent 80%); background-size: 300% 300%; animation: fx-aurora 8s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes fx-aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.fx-glitch { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .05) 3px 4px); animation: fx-glitch 3s steps(1) infinite; }
@keyframes fx-glitch { 0%, 92%, 100% { transform: none; filter: none; } 93% { transform: translateX(-4px); filter: hue-rotate(90deg); } 95% { transform: translateX(3px); filter: hue-rotate(-90deg); } 97% { transform: translateX(-1px); } }
.pc-status { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; margin-top: 2px; }
.opt-sw.fx { height: 54px; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.frame-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; font: 650 12px var(--font); }
.frame-opt:hover { border-color: var(--primary); }
.frame-opt.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--sel); }
.name-prev { margin-left: 10px; font-size: 17px; }

/* popout */
.popout-wrap { width: 320px; padding: 0; overflow: hidden; animation: pop-in .14s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
.popout { position: relative; background: var(--grad); color: var(--txt); isolation: isolate; }
.po-banner { height: 96px; background-size: cover; background-position: center; }
.po-body { position: relative; z-index: 4; padding: 0 12px 12px; }
.po-top { margin-top: -44px; margin-bottom: 8px; display: flex; }
.po-top .avatar, .po-top .av-frame > .avatar { box-shadow: 0 0 0 5px rgba(0, 0, 0, .35); border-radius: 50%; }
.po-card { background: rgba(0, 0, 0, .45); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.po-name { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.po-handle { font-size: 13px; opacity: .8; }
.po-status { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.po-sep { height: 1px; background: rgba(255, 255, 255, .15); margin: 4px 0; }
.po-about { font-size: 13.5px; margin: 0; }
.po-facts { font-size: 13px; opacity: .85; }
.po-roles h4 { color: inherit; opacity: .75; margin-bottom: 6px; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 5px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14); }
.role-pill i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.po-actions { display: flex; gap: 6px; margin-top: 6px; }
.po-actions .btn { flex: 1; }
.po-actions .btn:not(.primary) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- message list ---------- */
.mv { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.feed { padding: 16px 0 8px; gap: 0; }
.msg { display: block; position: relative; padding: 2px 48px 2px 16px; margin-top: 14px; border-radius: 0; transition: background .08s; }
.msg.grouped { margin-top: 0; }
.msg:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.msg.appear { animation: msg-in .18s ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } }
.msg.flash { animation: msg-flash 2s ease-out; }
@keyframes msg-flash { 0%, 30% { background: color-mix(in srgb, var(--warn) 20%, transparent); } }
.msg.mention-me { background: color-mix(in srgb, var(--warn) 8%, transparent); box-shadow: inset 2px 0 0 var(--warn); }
.msg.pinned-msg { box-shadow: inset 2px 0 0 var(--accent2); }
.msg-row { display: flex; gap: 14px; }
.msg-av { flex: none; margin-top: 2px; border-radius: 50%; }
.msg-av:hover { opacity: .9; }
.msg-time-side { width: 40px; flex: none; font-size: 10.5px; color: var(--dim); opacity: 0; text-align: right; padding-top: 4px; }
.msg:hover .msg-time-side { opacity: 1; }
.msg-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.msg-name { font-weight: 700; color: var(--text); cursor: pointer; }
.msg-name:hover { text-decoration: underline; }
.msg-time { font-size: 11.5px; color: var(--dim); }
.msg-text { overflow-wrap: anywhere; line-height: 1.45; white-space: pre-wrap; }
.msg-text .edited { font-size: 10.5px; color: var(--dim); }
.msg-text.deleted em { color: var(--dim); }
.msg-reply { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0 0 2px 54px; overflow: hidden; white-space: nowrap; position: relative; }
.reply-spine { position: absolute; left: -34px; top: 9px; width: 30px; height: 10px; border-left: 2px solid var(--line2); border-top: 2px solid var(--line2); border-top-left-radius: 6px; }
.reply-text { overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.msg-tools { position: absolute; right: 14px; top: -16px; display: none; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); z-index: 5; }
.msg:hover .msg-tools { display: flex; }
.msg-tools .qr .uemoji { font-size: 16px; }
.new-sep { display: flex; align-items: center; margin: 12px 16px 4px; color: var(--accent); font-size: 11px; font-weight: 800; }
.new-sep::before { content: ""; flex: 1; height: 1px; background: var(--accent); }
.new-sep span { background: var(--accent); color: #fff; padding: 0 6px; border-radius: 4px 0 0 4px; margin-left: auto; }
.day-sep { margin: 18px 16px 4px; }
.edit-wrap { margin: 4px 0; }
.edit-box { resize: none; background: var(--raise); }
.edit-wrap small a { font-weight: 650; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; border-radius: 8px; border: 1px solid transparent; background: var(--raise); color: var(--muted); font: 650 12.5px var(--font); cursor: pointer; transition: transform .1s, border-color .1s; }
.react:hover { border-color: var(--line2); }
.react:active { transform: scale(.92); }
.react.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.react.on span { animation: react-pop .25s ease-out; }
@keyframes react-pop { 50% { transform: scale(1.3); } }
.react.burst { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 22%, var(--raise)), var(--raise)); }
.react .cemoji { width: 18px; height: 18px; vertical-align: middle; margin: 0; }
.react.add { opacity: 0; padding: 0 6px; }
.msg:hover .react.add { opacity: 1; }
.burst-fx { position: absolute; left: 70px; bottom: 10px; pointer-events: none; z-index: 6; }
.burst-fx span { position: absolute; animation: burst var(--t) ease-out forwards; }
@keyframes burst { from { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.2); opacity: 0; } }
.thread-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line2); color: var(--text); font-size: 13px; max-width: 100%; }
.thread-chip:hover { border-color: var(--primary); text-decoration: none; }
.thread-chip .ic:first-child { color: var(--primary); }
.att-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; align-items: flex-start; }
.chat-img { margin-top: 0; max-height: 360px; }
.chat-img img { max-height: 360px; }
.chat-img.gif { position: relative; }
.gif-tag { position: absolute; left: 6px; bottom: 6px; font: 800 10px var(--font); padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; }
.img-grid { display: grid; gap: 4px; max-width: 420px; border-radius: var(--r); overflow: hidden; }
.img-grid.n2 { grid-template-columns: 1fr 1fr; }
.img-grid.n3 { grid-template-columns: 1fr 1fr; }
.img-grid.n3 .grid-img:first-child { grid-row: span 2; }
.img-grid.n4 { grid-template-columns: 1fr 1fr; }
.grid-img { padding: 0; border: 0; background: var(--bg2); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.grid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-video video { display: block; max-width: min(480px, 100%); max-height: 360px; border-radius: var(--r); background: #000; }
.chat-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line2); width: min(420px, 100%); }
.chat-file .cf-ic { width: 40px; height: 44px; border-radius: 6px; background: var(--raise); display: flex; align-items: center; justify-content: center; color: var(--primary); flex: none; }
.chat-file .cf-name { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file.audio audio { width: 100%; margin-top: 6px; height: 34px; }
.spoiler { position: relative; cursor: pointer; border-radius: var(--r); overflow: hidden; }
.spoiler > * { filter: blur(40px); pointer-events: none; }
.spoiler .spoiler-label { filter: none; position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 4px 12px; border-radius: 20px; background: rgba(0, 0, 0, .7); color: #fff; font: 800 12px var(--font); letter-spacing: .06em; }
.embeds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.embed { max-width: 440px; padding: 10px 14px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ec, var(--line2)); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.embed > * { grid-column: 1; }
.embed-site { font-size: 12px; color: var(--muted); }
.embed-title { font-weight: 700; color: var(--primary); }
.embed-desc { font-size: 13.5px; color: var(--text); opacity: .9; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.embed-img { grid-column: 1 / -1; max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 6px; cursor: zoom-in; }
.embed-thumb { grid-column: 2; grid-row: 1 / span 3; width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.embed.yt { border-left-color: #ff0033; }
.embed-yt { grid-column: 1 / -1; position: relative; padding: 0; border: 0; background: #000; border-radius: 4px; overflow: hidden; cursor: pointer; margin-top: 6px; }
.embed-yt img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; opacity: .9; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 44px; border-radius: 12px; background: #ff0033; color: #fff; display: flex; align-items: center; justify-content: center; }
.yt-frame { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; margin-top: 6px; }
.typing-bar { height: 22px; padding: 0 16px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex: none; }
.typing-bar strong { color: var(--text); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* composer v2 */
.composer { display: block; padding: 0 16px 18px; position: relative; }
.crow { display: flex; gap: 8px; align-items: flex-end; }
.cbar { border-radius: 10px; padding: 2px 4px; align-items: flex-end; }
.cbar textarea { padding: 11px 6px; max-height: 220px; }
.cbtn.attach { color: var(--muted); }
.cbtn.attach .ic { background: var(--muted); color: var(--raise); border-radius: 50%; padding: 3px; --ic: 22px !important; }
.cbtn.attach:hover .ic { background: var(--text); }
.csend { height: 46px; width: 46px; border-radius: 10px; }
.composer .reply-bar { margin: 0; border-radius: 10px 10px 0 0; }
.composer .reply-bar + .tray, .composer .reply-bar.on ~ .cbar { border-top-left-radius: 0; border-top-right-radius: 0; }
.tray { display: none; gap: 10px; padding: 10px; background: var(--raise); border: 1px solid var(--line2); border-bottom: 0; border-radius: 10px 10px 0 0; overflow-x: auto; }
.tray.on { display: flex; }
.tray.on + .cbar { border-top-left-radius: 0; border-top-right-radius: 0; }
.tray-item { position: relative; width: 150px; flex: none; padding: 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.tray-item img, .tray-ic { width: 100%; height: 96px; object-fit: cover; border-radius: 4px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.tray-name { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-item small { font-size: 11px; }
.tray-item.error { border-color: var(--bad); }
.tray-bar { height: 4px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.tray-bar span { display: block; height: 100%; background: var(--primary); transition: width .2s; }
.tray-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; background: var(--panel); border-radius: 6px; border: 1px solid var(--line2); }
.tray-tools .on { color: var(--warn); }
.autocomplete { display: none; position: absolute; left: 16px; right: 70px; bottom: 100%; margin-bottom: 6px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 10; max-height: 320px; overflow-y: auto; }
.autocomplete.on { display: block; animation: pop-in .1s ease-out; }
.ac-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 8px 6px; }
.ac-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; color: var(--text); border-radius: 6px; cursor: pointer; font: 550 14px var(--font); text-align: left; }
.ac-item.on, .ac-item:hover { background: var(--raise); }
.ac-item .cemoji { width: 22px; height: 22px; }
.pk-grid.gifs { grid-template-columns: 1fr 1fr; gap: 4px; height: 340px; }
.pk-gif { padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--bg2); cursor: pointer; min-height: 80px; }
.pk-gif img { width: 100%; display: block; }
.pk-gif:hover { outline: 2px solid var(--primary); }
.gif-pop { width: 400px; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pk-foot .check { margin: 0; }
.pins-pop, .who-react { width: 380px; max-height: 420px; overflow-y: auto; padding: 8px; }
.pin-item { display: flex; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.who-react .row { padding: 5px 4px; font-size: 14px; }

/* ---------- chat app layout ---------- */
body.in-chat .side { width: 64px; padding: 12px 8px; }
body.in-chat .side .logo-text, body.in-chat .side .nav-l, body.in-chat .side .side-me .grow, body.in-chat .side .side-me > .ic, body.in-chat .side .nav-sep { display: none; }
body.in-chat .side .nav { justify-content: center; padding: 10px 0; }
body.in-chat .side .nav .count { position: absolute; top: 2px; right: 2px; transform: scale(.8); }
body.in-chat .side .side-me { justify-content: center; padding: 4px; border: 0; background: none; }
body.in-chat .side .side-top { padding: 0 0 14px; display: flex; justify-content: center; }
body.in-chat .main { margin-left: 64px; }
.chat-app { grid-template-columns: 72px 248px 1fr 240px; }
.messenger { grid-template-columns: 300px 1fr; }
.srv { transition: none; }
.srv.unread .srv-pill { opacity: 1; height: 8px; }
.srv.on .srv-pill { height: 40px; }
.srv .badge-count { position: absolute; right: 8px; bottom: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font: 800 11px var(--font); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 3px solid var(--bg2); box-sizing: content-box; }
.srv-ic { transition: border-radius .18s ease, background .15s; }
.srv:active .srv-ic { transform: translateY(1px); }
.dm-home .srv-ic.act { color: var(--primary); }
.dm-home:hover .srv-ic.act { background: var(--primary); color: var(--on-primary); }
button.chan-head { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background-color: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
button.chan-head:hover { background-color: var(--raise); }
.chan-head.has-banner { min-height: 128px; }
.chan-head-row { height: 52px; }
.chan-cat { margin-top: 12px; }
.chan-cat:first-child { margin-top: 2px; }
.cat-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--muted); font: 800 11.5px var(--font); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; padding: 0; }
.cat-btn:hover { color: var(--text); }
.cat-btn .ic { transition: transform .15s; }
.chan-cat.collapsed .cat-btn .ic { transform: rotate(-90deg); }
.chan-cat.collapsed .cat-body > *:not(.on):not(.vc-users) { display: none; }
.chan-group { padding: 4px 4px 4px 4px; }
.chan { padding: 6px 8px; margin: 1px 0; position: relative; }
.chan .chan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan.unread { color: var(--text); font-weight: 750; }
.chan.unread::before { content: ""; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--text); }
.chan .badge-count { min-width: 16px; height: 16px; border-radius: 8px; background: var(--bad); color: #fff; font: 800 10.5px var(--font); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.vc-users { padding: 0 0 4px 30px; display: flex; flex-direction: column; gap: 1px; }
.vc-user { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 5px; font-size: 13px; color: var(--muted); }
.vc-user .avatar { transition: box-shadow .12s; }
.vc-user.speaking .avatar { box-shadow: 0 0 0 2px var(--ok); }
.vc-user .ic { color: var(--dim); }
.live-tag { font: 800 9.5px var(--font); padding: 1px 4px; border-radius: 3px; background: var(--bad); color: #fff; letter-spacing: .04em; }
.chan-threads { margin: 0 0 4px 22px; }
.chan-thread { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; color: var(--muted); font-size: 13.5px; position: relative; }
.chan-thread:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.chan-thread.on { background: var(--raise); color: var(--text); }
.thread-spine { width: 10px; height: 14px; border-left: 1.5px solid var(--line2); border-bottom: 1.5px solid var(--line2); border-bottom-left-radius: 6px; margin-top: -10px; flex: none; }
.add-chan { margin-top: 10px; }
.user-panel { display: flex; align-items: center; gap: 2px; padding: 8px; background: var(--bg2); border-top: 1px solid var(--line); flex: none; }
.up-me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 3px 6px 3px 3px; border-radius: 8px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.up-me:hover { background: var(--hover); }
.up-me strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-me small { font-size: 11.5px; }
.up-me .avatar .dot { border-color: var(--bg2); }
.user-panel .icon-btn.bad { color: var(--bad); }
.voice-panel { padding: 10px 10px 8px; border-top: 1px solid var(--line); background: var(--bg2); }
.vp-status { display: flex; align-items: center; gap: 6px; color: var(--ok); font: 800 13px var(--font); }
.vp-label { display: block; font-size: 12px; color: var(--muted); margin: 1px 0 8px; }
.vcontrols { display: flex; gap: 6px; justify-content: center; }
.vbtn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--raise); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, transform .1s; }
.vbtn:hover { background: color-mix(in srgb, var(--text) 12%, var(--raise)); }
.vbtn:active { transform: scale(.94); }
.vbtn.on { background: var(--text); color: var(--bg); }
.vbtn.warn { background: var(--bad); color: #fff; }
.vbtn.hang { background: var(--bad); color: #fff; }
.vcontrols.compact { justify-content: space-between; }
.vcontrols.compact .vbtn { width: 34px; height: 34px; border-radius: 8px; }
#voice-dock { position: fixed; left: 12px; bottom: 12px; z-index: 60; width: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: pop-in .15s ease-out; }
body.in-chat #voice-dock { display: none; }
.pane-head .crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 650; }
.pane-head .topic { color: var(--muted); font-size: 13.5px; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line2); max-width: 40vw; }
.pane-head > .ic.muted { color: var(--dim); }
.person { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; padding: 5px 8px; }
.person .p-name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .p-status { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-people h4 { margin: 16px 8px 6px; }
.chan-people h4:first-child { margin-top: 0; }
.thread-intro { padding: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ti-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--raise); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: 10px; }
.ti-root { display: flex; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.dm-intro { padding: 16px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dm-intro h2 { font-size: 26px; margin: 8px 0 0; }

/* forum */
.forum { flex: 1; overflow-y: auto; padding: 20px; }
.forum-bar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.forum-bar select { width: auto; }
.forum-bar h2 { margin: 0; }
.forum-bar p { margin: 4px 0 0; }
.forum-list { display: flex; flex-direction: column; gap: 8px; }
.forum-post { display: flex; gap: 14px; padding: 14px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .12s, transform .12s; }
.forum-post:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-1px); }
.fp-main { flex: 1; min-width: 0; }
.fp-main h3 { margin: 0 0 4px; font-size: 16px; }
.fp-preview { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); margin-top: 8px; }
.fp-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.forum-compose .composer { padding: 0; }

/* voice view */
.vroom { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #000; background: color-mix(in srgb, #000 70%, var(--bg)); }
.vroom > .vcontrols { padding: 14px; }
.vstage { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 12px; align-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vstage.n1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.vstage.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vstage.has-focus { display: flex; flex-direction: column; }
.vfocus { flex: 1; min-height: 0; display: flex; }
.vfocus .vtile { flex: 1; aspect-ratio: auto; }
.vstrip { display: flex; gap: 8px; overflow-x: auto; flex: none; }
.vstrip .vtile { width: 180px; flex: none; }
.vtile { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--panel); overflow: hidden; display: flex; align-items: center; justify-content: center; outline: 2px solid transparent; transition: outline-color .12s; }
.vtile.speaking { outline-color: var(--ok); }
.vtile video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vtile.cam video { object-fit: cover; }
.vtile video.mirror { transform: scaleX(-1); }
.vt-av { transition: transform .15s; }
.vtile.speaking .vt-av { transform: scale(1.05); }
.vt-name { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font: 650 12.5px var(--font); max-width: calc(100% - 50px); }
.vt-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-max { position: absolute; right: 8px; top: 8px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; }
.vtile:hover .vt-max { opacity: 1; }
.vjoin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; color: var(--text); background: var(--bg); }
.vjoin-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--raise); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.vjoin-avs { display: flex; gap: 6px; margin: 6px 0 10px; }
.dm-call { display: none; }
.dm-call.on { display: block; height: 46vh; min-height: 260px; flex: none; border-bottom: 1px solid var(--line); }
.vinline { height: 100%; display: flex; flex-direction: column; background: color-mix(in srgb, #000 70%, var(--bg)); }
.vinline .vjoin { background: transparent; }
.vinline > .vcontrols { padding: 10px; }
.tile-menu { width: 240px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sound-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); font-size: 13.5px; animation: pop-in .15s ease-out; }
.soundboard { width: 360px; max-height: 440px; overflow-y: auto; padding: 8px; }
.soundboard h4 { margin: 10px 4px 6px; }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sb-btn { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--line2); background: var(--raise); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; overflow: hidden; }
.sb-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-btn:hover { border-color: var(--primary); }
.sb-btn:active { transform: scale(.96); }
.ring { text-align: center; padding: 10px 0; }
.ring-av { display: inline-flex; border-radius: 50%; animation: ring 1.4s ease-out infinite; margin-bottom: 10px; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }

/* settings: roles, kinds, sounds */
.kind-pick { display: flex; flex-direction: column; gap: 6px; }
.kind-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.kind-opt.on { border-color: var(--primary); background: var(--sel); }
.kind-opt:disabled { opacity: .4; cursor: not-allowed; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.role-dot.big { width: 18px; height: 18px; }
.role-row { cursor: pointer; border-radius: 6px; }
.role-row:hover { background: var(--hover); }
.role-row.locked { opacity: .55; }
.role-prev { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: var(--bg2); margin-bottom: 8px; }
.perm-group h4 { margin: 14px 0 0; }
.role-pop { width: 260px; max-height: 360px; overflow-y: auto; padding: 8px; }
.role-pop .check { margin: 4px; align-items: center; }
.role-pop .check.disabled { opacity: .5; }
.chips.small { margin-top: 3px; align-items: center; }
.chips.small .role-pill { background: var(--raise); border-color: var(--line2); }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.sound-tile { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); }
.sound-play { width: 34px; height: 34px; border-radius: 8px; border: 0; background: var(--raise); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-size: 18px; }
.sound-play:hover { background: var(--primary); color: var(--on-primary); }

/* modal & menu motion */
.modal { transform: scale(.96); transition: transform .16s cubic-bezier(.2, .9, .3, 1.2); }
.popmenu { animation: pop-in .1s ease-out; }
.picker { animation: pop-in .12s ease-out; }

@media (max-width: 1180px) {
  .chat-app { grid-template-columns: 72px 240px 1fr; }
  .chat-app.show-people { grid-template-columns: 72px 240px 1fr 240px; }
}
@media (max-width: 900px) {
  body.in-chat .main { margin-left: 0; }
  .chat-app, .chat-app.show-people { grid-template-columns: 1fr; }
  .chat-app.show-people .chan-main { display: none; }
  .chat-app.show-list { grid-template-columns: 64px 1fr; }
  .messenger { grid-template-columns: 1fr; }
  .chat-app .user-panel { display: flex; }
  .msg { padding: 2px 12px 2px 10px; }
  .msg-row { gap: 10px; }
  .msg-reply { margin-left: 50px; }
  .msg-tools { right: 6px; }
  .vstage { grid-template-columns: 1fr 1fr; }
  .vstage.n1 { grid-template-columns: 1fr; }
  #voice-dock { left: 8px; right: 8px; bottom: 70px; width: auto; }
  .messenger .conv-side .user-panel { display: flex; }
  .popout-wrap { left: 8px !important; right: 8px; width: auto; }
  .pane-head .topic { display: none; }
  .autocomplete { left: 10px; right: 10px; }
  .composer { padding: 0 10px 10px; }
}

button.pane-user { background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
button.pane-user:hover { background: var(--hover); }

/* =========================================================================
   v3 — PampChat: roomier spacing, tooltips, dropdowns, sheets, menus,
   quick switcher, polls, search, friends, roles & permission editors.
   ========================================================================= */
:root { --r: 10px; --r-sm: 8px; --r-lg: 16px; --sp: 16px; --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); --shadow-md: 0 12px 32px rgba(0, 0, 0, .4); --ease: cubic-bezier(.2, .9, .3, 1); }
body { line-height: 1.55; }
#view { padding: 36px 40px 72px; }
.card { padding: 24px; margin-bottom: 20px; }
.card h3 { margin-bottom: 14px; }
.card.list { padding: 6px 22px; }
.list .row { padding: 14px 4px; }
.page-head { margin-bottom: 26px; }
.page-head p { color: var(--muted); max-width: 70ch; }
.field { gap: 8px; margin-bottom: 18px; }
.field > span { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.toggle { padding: 14px 0; }
.btn-row { gap: 10px; }
input, textarea { min-height: 40px; }
.btn { height: 38px; padding: 0 16px; }
.btn.sm { height: 32px; padding: 0 12px; }
.tabs { margin-bottom: 24px; gap: 4px; }
.tab { padding: 12px 16px; }
@media (max-width: 900px) { #view { padding: 22px 16px 90px; } .card { padding: 18px; } }

/* ---- tooltips ---- */
.tip { position: fixed; z-index: 1000; max-width: 280px; padding: 7px 11px; border-radius: 8px; background: color-mix(in srgb, #000 70%, var(--bg2)); color: #f4f2f8; font: 650 12.5px/1.35 var(--font);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: scale(.94); transition: opacity .1s, transform .12s var(--ease); display: flex; align-items: center; gap: 8px; white-space: pre-line; }
.tip.in { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.tip.p-top::after { bottom: -4px; left: calc(var(--ax) - 4px); }
.tip.p-bottom::after { top: -4px; left: calc(var(--ax) - 4px); }
.tip.p-right::after { left: -4px; top: calc(50% - 4px); }
.tip.p-left::after { right: -4px; top: calc(50% - 4px); }
.tip kbd, kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-bottom-width: 2px; font: 700 11px var(--font); color: inherit; background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ---- styled dropdown ---- */
.dd { position: relative; display: block; min-width: 0; }
.dd-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.dd-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: 550 14.5px var(--font); cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s, background .12s; }
.dd-btn:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--panel)); }
.dd-btn:focus-visible, .dd.open .dd-btn { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dd-btn:disabled { opacity: .55; cursor: not-allowed; }
.dd-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dd.dd-placeholder .dd-label { color: var(--dim); }
.dd-chev { color: var(--muted); transition: transform .15s var(--ease); }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd.invalid .dd-btn { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.dd-dot, .mdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dd-list { position: fixed; z-index: 400; max-height: min(340px, 60vh); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow-md); overflow: hidden; animation: dd-in .14s var(--ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-search { margin: 8px 8px 4px; min-height: 34px; padding: 6px 10px; font-size: 13.5px; }
.dd-items { overflow-y: auto; padding: 6px; }
.dd-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; font: 550 14px var(--font); color: var(--text); }
.dd-opt.active { background: var(--hover); }
.dd-opt.sel { color: var(--primary); }
.dd-opt.sel .dd-tick { color: var(--primary); }
.dd-opt.dis { opacity: .45; cursor: not-allowed; }
.dd-opt .ic { color: var(--muted); }
.dd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dd-text small { color: var(--dim); font-size: 12px; font-weight: 500; }
.dd-none { padding: 14px; color: var(--dim); text-align: center; font-size: 13px; }

/* ---- segmented ---- */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); flex-wrap: wrap; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 650 13px var(--font); cursor: pointer; transition: background .12s, color .12s; }
.seg-opt:hover { color: var(--text); background: var(--hover); }
.seg-opt.on { background: var(--raise); color: var(--text); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), 0 2px 6px rgba(0, 0, 0, .25); }

/* ---- modals ---- */
.modal-wrap { background: color-mix(in srgb, #000 70%, transparent); backdrop-filter: blur(3px); padding: 28px; }
.modal-wrap.out { opacity: 0; }
.modal { max-width: 540px; border-radius: 18px; box-shadow: var(--shadow-lg); border-color: var(--line); transform: translateY(10px) scale(.97); transition: transform .2s var(--ease); }
.modal-wrap.in .modal { transform: none; }
.modal.sm { max-width: 440px; }
.modal.wide { max-width: 820px; }
.modal.xl { max-width: 1000px; height: min(760px, calc(100vh - 56px)); }
.modal-head { padding: 22px 22px 6px 26px; gap: 14px; align-items: flex-start; }
.modal-head h3 { font-size: 19px; font-weight: 750; margin: 2px 0 0; }
.modal-head .icon-btn { margin: -4px -4px 0 0; }
.modal-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.modal-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.modal.tone-danger .modal-ic { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.modal-body { padding: 14px 26px 10px; }
.modal-body > p:first-child { margin-top: 0; }
.modal-actions { padding: 16px 26px 22px; gap: 10px; border-top: 0; margin-top: 4px; background: color-mix(in srgb, var(--bg2) 55%, var(--panel)); border-radius: 0 0 18px 18px; }
.sheet-grab { display: none; }
body.modal-open { overflow: hidden; }
.modal.tabbed .modal-body { padding: 0; display: flex; min-height: 0; flex: 1; }
.tm { display: flex; flex: 1; min-height: 0; width: 100%; }
.tm-nav { width: 210px; flex: none; padding: 12px 10px 16px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.tm-tab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 0; background: none; color: var(--muted); font: 650 14px var(--font); cursor: pointer; text-align: left; }
.tm-tab:hover { background: var(--hover); color: var(--text); }
.tm-tab.on { background: var(--sel); color: var(--text); }
.tm-tab.on .ic { color: var(--primary); }
.tm-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 28px 24px; }
@media (max-width: 640px) {
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal, .modal.sm, .modal.wide, .modal.xl { max-width: none; width: 100%; max-height: 92dvh; height: auto; border-radius: 20px 20px 0 0; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom); }
  .modal.xl { height: 92dvh; }
  .modal-actions { border-radius: 0; }
  .sheet-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line2); margin: 8px auto -6px; flex: none; touch-action: none; padding: 8px 0; background-clip: content-box; }
  .modal-head { padding: 14px 18px 4px; }
  .modal-body { padding: 10px 18px 8px; }
  .modal-actions { padding: 12px 18px 18px; }
  .modal-actions .btn { flex: 1; }
  .modal-actions .grow { display: none; }
  .tm { flex-direction: column; }
  .tm-nav { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; overflow-x: auto; }
  .tm-tab { white-space: nowrap; }
  .tm-pane { padding: 16px 18px; }
}

/* ---- menus ---- */
.popmenu { min-width: 220px; max-width: 300px; padding: 6px; border-radius: 12px; box-shadow: var(--shadow-md); border-color: var(--line2); z-index: 300; max-height: calc(100vh - 16px); overflow-y: auto; }
.popmenu .item { padding: 8px 10px; gap: 10px; font-size: 14px; border-radius: 7px; min-height: 34px; }
.popmenu .item:hover, .popmenu .item:focus-visible, .popmenu .item.sub-open { background: var(--primary); color: var(--on-primary); outline: 0; }
.popmenu .item:hover .mhint, .popmenu .item:focus-visible .mhint, .popmenu .item.sub-open .mhint { color: inherit; opacity: .8; }
.popmenu .item.dis { opacity: .45; pointer-events: none; }
.popmenu .item.danger:hover, .popmenu .item.danger:focus-visible { background: var(--bad); color: #fff; }
.popmenu .mhead { padding: 8px 10px 4px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.popmenu .mhint { font-size: 12px; color: var(--dim); font-weight: 600; }
.popmenu .mchev { opacity: .7; }
.popmenu .mcheck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.popmenu .mcheck.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.popmenu .item:hover .mcheck { border-color: currentColor; }
.popmenu .memoji { width: 18px; text-align: center; font-size: 15px; }
.popmenu .sep { margin: 5px 6px; }

/* ---- quick switcher ---- */
.switcher-wrap { position: fixed; inset: 0; z-index: 500; background: color-mix(in srgb, #000 65%, transparent); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity .12s; }
.switcher-wrap.in { opacity: 1; }
.switcher { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-8px) scale(.98); transition: transform .18s var(--ease); display: flex; flex-direction: column; max-height: 70vh; }
.switcher-wrap.in .switcher { transform: none; }
.sw-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.sw-input { flex: 1; border: 0 !important; background: none !important; box-shadow: none !important; font: 600 18px var(--font); padding: 6px 0; min-height: 0; color: var(--text); }
.sw-list { overflow-y: auto; padding: 8px; }
.sw-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 9px; color: var(--text); font: 600 14.5px var(--font); cursor: pointer; text-align: left; }
.sw-row.active { background: var(--sel); }
.sw-ic { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.sw-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-label.unread { font-weight: 800; }
.sw-sub { color: var(--dim); font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sw-kind { color: var(--dim); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: 0; }
.sw-row.active .sw-kind { opacity: 1; }
.sw-empty { padding: 34px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sw-foot { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); flex-wrap: wrap; align-items: center; }
.sw-foot kbd { margin-right: 2px; }
.kbd-list { display: flex; flex-direction: column; }
.kbd-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.kbd-row:last-child { border-bottom: 0; }
.kbd-keys { width: 170px; flex: none; display: flex; gap: 4px; flex-wrap: wrap; }

/* ---- chat spacing & polish ---- */
@media (min-width: 1181px) { .chat-app { grid-template-columns: 72px 248px 1fr 248px; } .chat-app:has(.chan-people.searching) { grid-template-columns: 72px 248px 1fr 360px; } }
@media (max-width: 1180px) and (min-width: 901px) { .chat-app.show-people:has(.chan-people.searching) { grid-template-columns: 72px 230px 1fr 320px; } }
.chan-side .chan-list { padding: 12px 10px; }
.chan { padding: 7px 10px; border-radius: 7px; gap: 9px; margin-bottom: 2px; }
.chan.muted-chan { opacity: .5; }
.chan.muted-chan .chan-name::after { content: ""; }
.chan-group { margin-top: 14px; }
.pane-head { height: 60px; padding: 0 18px; gap: 12px; }
.msg { padding: 5px 16px; margin-top: 14px; border-radius: 0; }
.msg.grouped { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }
.msg-head { gap: 8px; margin-bottom: 2px; }
.feed { padding-bottom: 14px; }
.composer { padding: 0 18px 20px; }
.chan-people { padding: 18px 12px; }
.chan-people h4 { margin: 18px 8px 8px; }
.chan-people h4:first-child { margin-top: 0; }
.person { padding: 6px 8px; border-radius: 8px; gap: 10px; }
.role-badge-ic { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; margin-left: 1px; }
.role-badge-ic .ic { --ic: 14px; }
.timed-out { color: var(--warn); }
.srv.muted-srv .srv-ic { opacity: .55; }
.mention.role-mention { padding: 0 3px; border-radius: 4px; font-weight: 650; }
.mention.everyone-mention { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.jump-bar { position: absolute; left: 16px; right: 16px; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font: 650 13.5px var(--font); box-shadow: var(--shadow-md); animation: dd-in .2s var(--ease); }
.jump-bar .btn { height: 28px; background: rgba(0, 0, 0, .2); border-color: transparent; color: inherit; }
.mv { position: relative; }
.timeout-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 18px 8px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: var(--warn); font-weight: 650; font-size: 14px; }
.chan-head-row .ic.muted-ic { color: var(--dim); }

/* ---- polls ---- */
.poll { margin-top: 8px; max-width: 520px; border: 1px solid var(--line2); background: var(--panel); border-radius: 14px; padding: 16px 16px 12px; }
.poll-q { font-weight: 750; font-size: 16px; margin-bottom: 4px; }
.poll-meta { color: var(--dim); font-size: 12.5px; margin-bottom: 12px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); color: var(--text); font: 600 14.5px var(--font); cursor: pointer; overflow: hidden; text-align: left; }
.poll-opt:hover:not(:disabled) { border-color: var(--primary); }
.poll-opt:disabled { cursor: default; }
.poll-opt .poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--primary-soft); transition: width .4s var(--ease); z-index: 0; }
.poll-opt.mine { border-color: var(--primary); }
.poll-opt.mine .poll-fill { background: color-mix(in srgb, var(--primary) 26%, transparent); }
.poll-opt.win { border-color: var(--ok); }
.poll-opt > *:not(.poll-fill) { position: relative; z-index: 1; }
.poll-opt .poll-pct { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--muted); }
.poll-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.poll-radio.sq { border-radius: 5px; }
.poll-opt.mine .poll-radio { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.poll-foot { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.poll-builder .pb-opt { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.poll-builder .pb-opt input { flex: 1; }

/* ---- search panel ---- */
.search-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sp-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.sp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-filters .dd { flex: 1; min-width: 120px; }
.sp-filters .dd-btn { min-height: 32px; font-size: 13px; }
.sp-count { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.sp-list { flex: 1; overflow-y: auto; padding: 10px; }
.sp-hit { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.sp-hit:hover { border-color: var(--primary); }
.sp-hit .sp-where { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); font-weight: 700; margin-bottom: 6px; }
.sp-hit .sp-who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sp-hit .sp-body { margin-top: 4px; font-size: 14px; }
.sp-hit mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.head-search { display: flex; align-items: center; gap: 6px; height: 32px; width: 200px; padding: 0 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); font: 550 13px var(--font); cursor: text; transition: width .2s var(--ease); }
.head-search:hover { border-color: var(--line2); }
.head-search kbd { margin-left: auto; height: 18px; font-size: 10.5px; }
@media (max-width: 1100px) { .head-search { width: 36px; padding: 0; justify-content: center; } .head-search > span:not(.ic), .head-search kbd { display: none; } }

/* ---- friends ---- */
.friends-page { display: flex; flex-direction: column; gap: 18px; }
.fr-row { display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-top: 1px solid var(--line); border-radius: 10px; }
.fr-row:hover { background: var(--hover); border-top-color: transparent; }
.fr-row:hover + .fr-row { border-top-color: transparent; }
.fr-row .fr-actions { display: flex; gap: 8px; opacity: .8; }
.fr-row:hover .fr-actions { opacity: 1; }
.fr-actions .icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--raise); }
.fr-actions .icon-btn.ok:hover { color: var(--ok); }
.fr-actions .icon-btn.bad:hover { color: var(--bad); }
.fr-add { display: flex; gap: 10px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); }
.fr-add:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fr-add input { border: 0 !important; background: none !important; box-shadow: none !important; flex: 1; padding: 0; }
.fr-count { font: 750 12px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 10px; }

/* ---- roles & permissions ---- */
.role-list .role-row { cursor: pointer; border-radius: 10px; padding: 12px 10px; gap: 12px; }
.role-list .role-row:hover { background: var(--hover); }
.role-row .grip { color: var(--dim); cursor: grab; display: inline-flex; padding: 4px; margin-left: -4px; }
.role-row.dragging { opacity: .4; }
.role-row.drop-above { box-shadow: inset 0 2px 0 var(--primary); }
.role-row.drop-below { box-shadow: inset 0 -2px 0 var(--primary); }
.role-row.locked { cursor: default; opacity: .6; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); font: 650 12.5px var(--font); }
.role-chip i { width: 10px; height: 10px; border-radius: 50%; }
.role-chip .x { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0; display: inline-flex; }
.role-chip .x:hover { color: var(--bad); }
.role-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.role-tpl button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.role-tpl button:hover { border-color: var(--primary); }
.role-tpl button strong { display: flex; gap: 8px; align-items: center; }
.role-tpl small { color: var(--muted); font-size: 12.5px; }
.perm-search { margin-bottom: 14px; }
.perm-group h4 { margin: 22px 0 6px; }
.perm-group:first-child h4 { margin-top: 4px; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.perm-row:last-child { border-bottom: 0; }
.perm-row .grow strong { display: block; font-size: 14.5px; }
.perm-row .grow small { color: var(--dim); font-size: 12.5px; }
.tri { display: inline-flex; border-radius: 9px; border: 1px solid var(--line2); overflow: hidden; flex: none; }
.tri button { width: 36px; height: 32px; border: 0; background: var(--bg2); color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tri button + button { border-left: 1px solid var(--line2); }
.tri button:hover { color: var(--text); }
.tri button.on.deny { background: var(--bad); color: #fff; }
.tri button.on.inherit { background: var(--raise); color: var(--text); }
.tri button.on.allow { background: var(--ok); color: #06261a; }
.ov-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; min-height: 0; }
.ov-targets { display: flex; flex-direction: column; gap: 2px; }
.ov-target { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 0; background: none; color: var(--text); font: 600 14px var(--font); cursor: pointer; text-align: left; }
.ov-target:hover { background: var(--hover); }
.ov-target.on { background: var(--sel); }
.ov-target .ov-n { margin-left: auto; font-size: 11px; color: var(--dim); }
@media (max-width: 760px) { .ov-layout { grid-template-columns: 1fr; } .ov-targets { flex-direction: row; overflow-x: auto; } .ov-target { white-space: nowrap; } }
.role-members { display: flex; flex-direction: column; }
.role-members .row { padding: 10px 4px; border-bottom: 1px solid var(--line); }
.self-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.self-role { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .12s, background .12s; }
.self-role:hover { border-color: var(--rc, var(--primary)); }
.self-role.on { border-color: var(--rc, var(--primary)); background: color-mix(in srgb, var(--rc, var(--primary)) 14%, var(--bg2)); }
.self-role .sr-emoji { font-size: 20px; width: 26px; text-align: center; }
.self-role small { display: block; color: var(--muted); font-size: 12px; }

/* ---- audit log ---- */
.audit-row { display: flex; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.audit-row:last-child { border-bottom: 0; }
.audit-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--raise); color: var(--muted); }
.audit-ic.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--raise)); }
.audit-ic.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--raise)); }
.audit-ic.pri { color: var(--primary); background: var(--primary-soft); }
.audit-row .audit-detail { color: var(--dim); font-size: 13px; margin-top: 2px; word-break: break-word; }

/* ---- saved ---- */
.saved-item { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; margin-bottom: 12px; }
.saved-item .si-where { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.saved-item .si-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---- logo wordmark ---- */
.logo-text .lt-b { color: var(--primary); }
/* markdown */
.md-code { background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-family: var(--mono); font-size: .88em; }
.md-pre { margin: 6px 0; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.5; max-width: 100%; }
.md-pre code { font-family: var(--mono); white-space: pre; }
.md-quote { margin: 4px 0; padding: 2px 0 2px 12px; border-left: 4px solid var(--line2); color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.spoiler-text { background: var(--line2); color: transparent; border-radius: 4px; cursor: pointer; transition: color .15s, background .15s; padding: 0 2px; }
.spoiler-text * { visibility: hidden; }
.spoiler-text.shown { background: var(--hover); color: inherit; cursor: auto; }
.spoiler-text.shown * { visibility: visible; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.role-prev { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 18px; }
.ac-role { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex: none; }
.ac-role.ev { background: var(--warn); color: #241a00; }
.del-preview { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; max-height: 120px; overflow: hidden; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.chan-people.searching { padding: 0; }
.chat-app.show-people .chan-people.searching { display: flex; flex-direction: column; }
@media (max-width: 900px) { .composer { padding: 8px 10px 10px; } .msg { padding: 4px 10px; } .pane-head { padding: 0 10px; gap: 8px; } .timeout-bar { margin: 0 10px 8px; } .jump-bar { left: 8px; right: 8px; } }
.top-search { display: flex; align-items: center; gap: 10px; height: 36px; min-width: 0; width: min(420px, 50vw); padding: 0 8px 0 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); font: 550 13.5px var(--font); cursor: pointer; }
.top-search:hover { border-color: var(--line2); color: var(--muted); }
.top-search > span:not(.ic) { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .top-search { width: 40px; padding: 0; justify-content: center; background: none; border: 0; color: var(--muted); } .top-search > span:not(.ic), .top-search kbd { display: none; } }
.side-search { width: auto; margin: 0 12px 10px; }
body.in-chat .side .side-search { width: 40px; height: 40px; margin: 0 auto 10px; padding: 0; justify-content: center; }
body.in-chat .side .side-search > span:not(.ic), body.in-chat .side .side-search kbd { display: none; }
.chips.small .role-chip, .role-chip { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.side-search { background: var(--bg); }
.modal:focus { outline: none; }
/* link preview mock-up (Discord style) */
.og-prev { display: flex; align-items: flex-start; }
.og-embed { max-width: 432px; width: 100%; background: #2b2d31; color: #dbdee1; border-radius: 4px; border-left: 4px solid var(--ec); padding: 10px 16px 16px 12px; font: 400 14px/1.4 var(--font); }
.og-site { font-size: 12px; color: #b5bac1; margin-bottom: 6px; }
.og-title { font-weight: 650; color: #00a8fc; margin-bottom: 6px; }
.og-desc { font-size: 14px; margin-bottom: 12px; white-space: pre-line; }
.og-img { width: 100%; border-radius: 4px; display: block; aspect-ratio: 1200 / 630; object-fit: cover; }

/* ---- toasts v3 ---- */
#toasts { right: 20px; bottom: 20px; gap: 10px; z-index: 900; width: min(380px, calc(100vw - 24px)); align-items: stretch; }
.toast { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: none; padding: 12px 36px 14px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line2); border-left: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);
  font-size: 14px; line-height: 1.4; overflow: hidden; opacity: 0; transform: translateX(40px) scale(.98); transition: transform .28s cubic-bezier(.2, .9, .3, 1.15), opacity .2s; }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateX(var(--out, 120%)); transition: transform .24s ease-in, opacity .2s; }
.toast.bump { animation: toast-bump .3s ease; }
@keyframes toast-bump { 40% { transform: scale(1.03); } }
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--line2)); }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, var(--primary)); }
.toast.success { --tc: var(--ok); } .toast.error { --tc: var(--bad); } .toast.warn { --tc: var(--warn); } .toast.has-user { --tc: var(--accent2); }
.toast .t-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tc, var(--primary)) 18%, transparent); color: var(--tc, var(--primary)); margin-left: 4px; }
.toast .t-ic .ic { color: inherit; }
.toast > .avatar, .toast > .av-frame { margin-left: 4px; flex: none; }
.toast .t-body { flex: 1; min-width: 0; padding-top: 1px; }
.toast .t-top { display: flex; align-items: center; gap: 8px; }
.toast .t-title { font-weight: 750; font-size: 14.5px; color: var(--text); min-width: 0; }
.toast .t-time { margin-left: auto; font-size: 11.5px; color: var(--dim); font-weight: 600; flex: none; }
.toast .t-count { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--tc, var(--primary)); color: #fff; flex: none; }
.toast .t-text { color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.toast .t-text.sub { color: var(--muted); margin-top: 2px; -webkit-line-clamp: 2; }
.toast .t-actions { display: flex; gap: 8px; margin-top: 10px; }
.toast .t-actions .btn { height: 30px; }
.toast .t-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; border: 0; background: none; color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.toast:hover .t-x, .toast:focus-within .t-x { opacity: 1; }
.toast .t-x:hover { background: var(--hover); color: var(--text); }
.toast .t-track { position: absolute; left: 4px; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.toast .t-bar { display: block; height: 100%; background: var(--tc, var(--primary)); opacity: .7; transform-origin: left; }
@media (hover: none) { .toast .t-x { opacity: 1; } }
@media (max-width: 640px) {
  #toasts { left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); bottom: auto; width: auto; flex-direction: column-reverse; }
  .toast { transform: translateY(-30px) scale(.98); }
}
.toast .t-actions .ic, .toast .t-x .ic { color: inherit; }
/* ---- group pictures ---- */
.gicon.img { background: var(--raise); overflow: hidden; }
.gicon.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-hero .gicon.img { background: var(--raise) !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, .25); }
.group-hero.has-banner { background-size: cover; background-position: center; min-height: 220px; display: flex; align-items: flex-end; }
.group-hero.has-banner::after { display: none; }
.group-hero.has-banner .gh-inner { width: 100%; }
.group-card.has-banner { padding-top: 0; overflow: hidden; }
.gc-banner { height: 96px; margin: 0 -18px 0; background-size: cover; background-position: center; }
.group-card.has-banner .gc-top { margin-top: -26px; }
.group-card.has-banner .gicon { box-shadow: 0 0 0 4px var(--panel); }
.gform-prev { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; margin-bottom: 18px; background-size: cover; background-position: center; color: #fff; min-height: 96px; }
.gform-prev small { color: rgba(255, 255, 255, .85); }
.gimg-row { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.gimg-banner { width: 96px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; flex: none; }
.post-composer .pc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.post-composer.drop { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.post-tray { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.post-tray:empty { display: none; }
.pt-item { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; }
.pt-item img, .pt-item video { width: 100%; height: 100%; object-fit: cover; }
.pt-item.error { border-color: var(--bad); }
.pt-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pt-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.pt-bar i { display: block; height: 100%; background: var(--primary); }
.post-media { margin: 10px 0 4px; }
.gmedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gm-item { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--bg2); cursor: zoom-in; }
.gm-item img, .gm-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gm-item:hover img, .gm-item:hover video { transform: scale(1.04); }
.gm-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .25); }

/* =========================================================================
   v3.1 polish: themes picker, notifications, profile cards, designer, toasts
   ========================================================================= */
/* ---- theme picker ---- */
.theme-picker { display: flex; flex-direction: column; gap: 22px; }
.theme-group h4 { margin: 0 0 10px; }
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-default-row { margin-bottom: 18px; max-width: 220px; }
.theme-sw { padding: 0; gap: 0; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1.5px solid var(--line); transition: border-color .12s, transform .12s; }
.theme-sw:hover { border-color: var(--line2); transform: translateY(-1px); }
.theme-sw.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.theme-sw > .ic { display: none; }
.ts-prev { height: 84px; border-radius: 0; border: 0; border-bottom: 1px solid; display: flex; }
.ts-prev.auto { height: 84px; }
.ts-rail { width: 14%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; }
.ts-rail i { width: 10px; height: 10px; border-radius: 4px; display: block; }
.ts-side { width: 26%; display: flex; flex-direction: column; gap: 4px; padding: 8px 5px; }
.ts-side i { height: 5px; border-radius: 3px; display: block; }
.ts-main { flex: 1; padding: 8px 7px 6px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ts-msg { display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; gap: 2px 5px; }
.ts-msg b { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; }
.ts-msg i { height: 4px; border-radius: 3px; display: block; }
.ts-comp { margin-top: auto; height: 10px; border-radius: 4px; border: 1px solid; display: flex; align-items: center; justify-content: flex-end; padding-right: 2px; }
.ts-comp i { width: 6px; height: 6px; border-radius: 2px; }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.ts-foot small { margin-left: 6px; font-weight: 500; }
.ts-name { padding: 0; }
.ts-dots { display: inline-flex; gap: 3px; }
.ts-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.ts-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; }

/* ---- notifications page ---- */
.n-seg { margin-bottom: 20px; }
.n-tabs { display: contents; }
.n-count { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--line2); color: var(--text); }
.seg-opt.on .n-count { background: var(--primary); color: var(--on-primary); }
.n-group { margin-bottom: 22px; }
.n-section { margin: 0 0 8px 4px; }
.n-list { display: flex; flex-direction: column; gap: 6px; }
.notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px !important; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color .12s, background .12s; }
.notif:hover { border-color: var(--line2); background: var(--panel); }
.notif.unread { background: color-mix(in srgb, var(--primary) 6%, var(--panel)); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.n-lead { position: relative; flex: none; }
.n-kind { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; border: 2px solid var(--panel); }
.n-kind.ok { background: var(--ok); color: #06261a; } .n-kind.bad { background: var(--bad); color: #fff; } .n-kind.warn { background: var(--warn); color: #241a00; }
.nic { width: 44px; height: 44px; border-radius: 13px; border: 0; background: var(--primary-soft); color: var(--primary); }
.nic.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .nic.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); } .nic.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.n-body { flex: 1; min-width: 0; }
.n-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.n-head a { color: var(--text); font-weight: 750; }
.n-kindlbl { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.n-time { font-size: 12px; color: var(--dim); white-space: nowrap; }
.n-text { color: var(--text); font-size: 14.5px; line-height: 1.45; }
.notif:not(.unread) .n-text { color: color-mix(in srgb, var(--text) 80%, var(--muted)); }
.n-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.n-read { flex: none; width: 28px; height: 28px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.n-read:hover { background: var(--hover); }
.unread-dot { background: var(--primary); }
@media (max-width: 640px) { .notif { padding: 12px !important; gap: 12px; } .n-kindlbl { display: none; } }

/* ---- profile cards ---- */
.pcard { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px rgba(0, 0, 0, .25); }
a.pcard:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px rgba(0, 0, 0, .35); }
.pc-banner { height: 96px; }
.pcard.full .pc-banner { height: 220px; }
.pc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .28)); }
.pc-deco { -webkit-mask: linear-gradient(180deg, #000 30%, transparent 62%); mask: linear-gradient(180deg, #000 30%, transparent 62%); }
.pcard::before { opacity: .35; }
.pattern-grain::before { opacity: .45; }
.pattern-mesh::before { opacity: .8; }
.pc-body { padding: 0 18px 18px; margin-top: -40px; gap: 4px; }
.pcard.full .pc-body { margin-top: -58px; padding: 0 26px 24px; }
.glass .pc-body { margin: -40px 10px 10px; padding: 0 14px 14px; border-radius: 14px; background: linear-gradient(180deg, transparent 0, transparent 40px, rgba(0, 0, 0, .34) 40px); backdrop-filter: blur(6px); }
.pcard.full.glass .pc-body { margin-top: -58px; background: linear-gradient(180deg, transparent 0, transparent 58px, rgba(0, 0, 0, .34) 58px); }
.pc-top { align-items: flex-end; margin-bottom: 10px; }
.pc-top .avatar.ring img, .pc-top .avatar.ring .ini { border-width: 3px; }
.pc-corner { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.pc-live, .pc-seen { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); display: inline-flex; align-items: center; gap: 6px; }
.pc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 6px #3ccf8e; }
.pc-seen { opacity: .85; font-weight: 600; }
.pc-id { display: flex; flex-direction: column; gap: 1px; }
.pc-name { font-size: 19px; gap: 7px; }
.pcard.full .pc-name { font-size: 28px; }
.pc-name .dn { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.pc-handle { font-size: 13.5px; opacity: .8; gap: 8px; font-weight: 550; }
.pc-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.pc-status { margin-top: 6px; font-size: 13px; padding: 5px 10px; border-radius: 9px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); width: fit-content; max-width: 100%; }
.pc-headline { margin: 8px 0 0; font-size: 14px; line-height: 1.45; opacity: .95; }
.pc-meta { margin-top: 6px; gap: 4px 14px; font-size: 13px; font-weight: 550; }
.pc-meta .ic { color: var(--acc); }
.pc-tags { margin-top: 10px; gap: 6px; }
.tagpill, .pcard .badge { background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .14); font-size: 11.5px; padding: 3px 9px; border-radius: 7px; backdrop-filter: blur(4px); }
.pcard .badge { padding-left: 7px; }
.tagpill.more { opacity: .8; }
.compat { margin-top: 12px; }
.border-solid { box-shadow: inset 0 0 0 2px var(--acc), 0 10px 30px rgba(0, 0, 0, .25); }
.border-glow { box-shadow: 0 0 0 1.5px var(--acc), 0 0 28px color-mix(in srgb, var(--acc) 35%, transparent), 0 10px 30px rgba(0, 0, 0, .25); }
.border-dashed { outline-offset: -8px; }
.pc-effect i { opacity: .7; }
.fx-snow i { width: 5px; height: 5px; }
.pc-effect .ic { --ic: 12px; }

/* ---- designer ---- */
.designer { gap: 32px; }
.dz-sec { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); margin-bottom: 14px; }
.dz-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dz-head h3 { margin: 0; font-size: 15px; }
.dz-head .hint { margin: 2px 0 0; }
.dz-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.designer-controls section { margin-bottom: 14px; }
.designer-controls section > h4 { display: none; }
.designer-controls > section:not(.dz-sec) { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.presets { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.preset { height: 58px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); padding: 8px; font-size: 11px; }
.preset:hover { outline: 2px solid var(--primary); outline-offset: 2px; }
.opt-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.opt { padding: 6px 6px 8px; border-radius: 12px; gap: 8px; font-size: 12.5px; }
.opt-sw { height: 52px; border-radius: 8px; }
.opt-sw.pcard-mini { position: relative; }
.opt-sw.pcard-mini::before { content: ""; position: absolute; inset: 0; opacity: .35; }
.opt-sw.border-dashed { outline-offset: -5px; }
.opt-sw.border-rainbow { border-width: 2px; animation: none; }
.frame-grid { gap: 10px; }
.frame-opt { border-radius: 12px; padding: 16px 6px 12px; }
.colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.colorfield { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font: 600 13px var(--font); }
.colorfield input[type=color] { width: 30px; height: 30px; border-radius: 8px; padding: 2px; border: 0; }

/* ---- toasts: tighter ---- */
.toast { padding: 11px 34px 13px 12px; border-radius: 14px; }
.toast .t-title { font-size: 14px; }
.toast .t-text { font-size: 13.5px; }
.toast .t-actions { margin-top: 8px; }
.toast .t-actions .btn { height: 28px; font-size: 12.5px; }
.toast .t-track { height: 2px; }

.toast .t-count { display: inline-flex; }
.pc-deco svg { transform: scale(1.05); }
.toast .t-top:not(:has(.t-title)) { position: absolute; right: 36px; top: 11px; }

/* =========================================================================
   v3.2 visual pass: no blur over banners, taller banners, chat polish
   ========================================================================= */
/* ---- profile cards: banner fully visible ---- */
.pc-banner { height: 128px; }
.pcard.full .pc-banner { height: 260px; }
.pc-banner::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22)); }
.pc-body { margin-top: -34px; }
.pcard.full .pc-body { margin-top: -52px; }
.glass .pc-body, .pcard.full.glass .pc-body { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, transparent 0, transparent 34px, rgba(0, 0, 0, .3) 34px); }
.pcard.full.glass .pc-body { background: linear-gradient(180deg, transparent 0, transparent 52px, rgba(0, 0, 0, .3) 52px); }
.pcard.grid .pc-top .avatar.ring img, .pcard.grid .pc-top .avatar.ring .ini { border-color: rgba(0, 0, 0, .35); }
.pc-deco { -webkit-mask: linear-gradient(180deg, #000 25%, transparent 55%); mask: linear-gradient(180deg, #000 25%, transparent 55%); }
.pcard:has(.pc-banner[style*="url"]) .pc-deco { opacity: .35; }
.tagpill, .pcard .badge { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .42); }
.pc-status { backdrop-filter: none; background: rgba(0, 0, 0, .34); }
.compat-bar { height: 5px; }
.compat-n { font-size: 12px; }
.pcard .card-actions, .pc-body > .btn-row { margin-top: 12px; }

/* ---- popout: same treatment ---- */
.po-banner { height: 120px; }
.popout .po-body { backdrop-filter: none; }

/* ---- server rail ---- */
.srv-rail { gap: 6px; padding: 10px 0; }
.srv-ic { --s: 44px; }
.srv-ic.text { font: 800 15px var(--font); letter-spacing: -.02em; }
.srv-sep { width: 28px; height: 2px; opacity: .8; }
.srv.on .srv-ic { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--primary); }
.srv .badge-count { right: 6px; bottom: -3px; border: 2px solid var(--bg2); }

/* ---- channel sidebar ---- */
.chan-side { background: color-mix(in srgb, var(--panel) 92%, var(--bg2)); }
.chan-head { border-bottom: 1px solid var(--line); }
.chan-head:hover { background-color: var(--hover); }
.chan-head-row { height: 54px; }
.chan-head-row strong { font-size: 15px; font-weight: 750; }
.chan-head.has-banner { min-height: 136px; }
.chan-head.has-banner::before { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78)); }
.chan-side .chan-list { padding: 10px 8px 16px; }
.cat-btn { font-size: 11px; letter-spacing: .07em; }
.chan-group { padding: 6px 4px 4px 6px; }
.chan { padding: 6px 8px 6px 10px; border-radius: 8px; gap: 8px; font-weight: 550; font-size: 14.5px; }
.chan > .ic:first-child { opacity: .8; }
.chan.on { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-weight: 650; }
.chan.on > .ic:first-child { color: var(--primary); opacity: 1; }
.chan.unread::before { left: -8px; }
.chan .chan-edit { background: none; }
.vc-users { padding: 2px 0 4px 30px; }
.user-panel { padding: 8px 10px; gap: 4px; background: var(--bg2); }
.up-me { padding: 4px 8px 4px 4px; border-radius: 10px; }
.up-me strong { font-size: 13.5px; font-weight: 700; }
.user-panel .icon-btn { width: 34px; height: 34px; border-radius: 9px; }

/* ---- chat pane ---- */
.pane-head { height: 56px; padding: 0 16px 0 18px; background: var(--bg); box-shadow: 0 1px 0 var(--line); border-bottom: 0; z-index: 2; }
.pane-head strong { font-size: 15.5px; font-weight: 750; }
.pane-head .topic { font-size: 13px; }
.head-search { width: 220px; height: 32px; }
.feed { padding: 20px 0 10px; }
.msg { padding: 3px 56px 3px 18px; margin-top: 16px; }
.msg.grouped { margin-top: 1px; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.msg-row { gap: 14px; }
.msg-av .avatar, .msg-av .av-frame { --s: 40px; }
.msg-head { gap: 8px; margin-bottom: 1px; align-items: center; }
.msg-name { font-size: 15px; }
.msg-time { font-size: 11.5px; }
.msg-text { line-height: 1.5; font-size: 15px; }
.msg-time-side { font-size: 10.5px; padding-top: 5px; }
.msg-reply { margin-left: 54px; font-size: 12.5px; }
.msg.mention-me { background: color-mix(in srgb, var(--warn) 7%, transparent); box-shadow: inset 2px 0 0 var(--warn); }
.msg-tools { top: -18px; right: 18px; border-radius: 10px; padding: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); gap: 1px; }
.msg-tools .icon-btn.xs { width: 30px; height: 30px; border-radius: 7px; }
.msg-tools .icon-btn.xs:hover { background: var(--hover); }
.day-sep { margin: 20px 18px 6px; font-size: 11.5px; }
.day-sep span { padding: 2px 10px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); }
.day-sep::before, .day-sep::after { background: var(--line); }
.new-sep { margin: 14px 18px 4px; }
.reactions { gap: 5px; margin-top: 6px; }
.react { height: 27px; padding: 0 8px; border-radius: 9px; border-color: var(--line); background: var(--panel); font-size: 13px; }
.react:hover { border-color: var(--line2); background: var(--raise); }
.react.on { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.thread-chip { border-radius: 10px; }
.embed { border-radius: 10px; padding: 12px 14px 14px; max-width: 480px; }
.embed-img, .embed-thumb, .embed-yt { border-radius: 8px; }
.attachments img, .att-img, .att-img img { border-radius: 10px; }
.typing-bar { height: 24px; padding: 0 18px; }
.composer { padding: 0 18px 18px; }
.cbar { border-radius: 14px; padding: 4px 6px; background: var(--raise); border-color: var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .15) inset; }
.cbar:focus-within { border-color: color-mix(in srgb, var(--primary) 60%, var(--line2)); box-shadow: 0 0 0 3px var(--primary-soft); }
.cbar textarea { padding: 11px 8px; font-size: 15px; }
.cbtn { width: 36px; height: 36px; border-radius: 9px; }
.cbtn.attach .ic { --ic: 22px !important; }
.csend { height: 48px; width: 48px; border-radius: 14px; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
.csend:hover:not(:disabled) { transform: translateY(-1px); }
.feed-empty { padding: 48px 20px; }
.feed-empty-ic { width: 72px; height: 72px; border-radius: 22px; background: var(--primary-soft); }
.feed-empty h3 { font-size: 20px; margin-top: 14px; }

/* ---- member list ---- */
.chan-people { background: color-mix(in srgb, var(--panel) 92%, var(--bg2)); padding: 16px 10px; }
.chan-people h4 { margin: 16px 10px 6px; font-size: 11px; }
.chan-people h4:first-child { margin-top: 0; }
.person { padding: 5px 8px; border-radius: 9px; gap: 10px; }
.person .avatar { --s: 32px; }
.person .p-name { font-size: 14px; }
.person .p-status { font-size: 11.5px; }

/* ---- DM list ---- */
.conv { border-radius: 10px; }
.conv.on { background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ---- general ---- */
.card { border-radius: 18px; }
.icon-btn { border-radius: 9px; }
.pill { border-radius: 999px; }
.badge-count { box-shadow: 0 0 0 2px var(--panel); }
.po-top { margin-top: -40px; }
.po-card { background: rgba(0, 0, 0, .5); border-radius: 12px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); }
.msg.grouped.mention-me { box-shadow: inset 2px 0 0 var(--warn); }
.msg.mention-me + .msg.grouped.mention-me { margin-top: 0; }

/* =========================================================================
   v3.3: expression picker (GIF / stickers / emoji), settings pages
   ========================================================================= */
.picker.xp-pop { width: 440px; height: 460px; border-radius: 16px; box-shadow: var(--shadow-lg); border-color: var(--line); display: flex; flex-direction: column; }
.xp-top { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); flex: none; }
.xp-toptab { padding: 8px 12px 10px; border: 0; background: none; color: var(--muted); font: 750 13.5px var(--font); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; }
.xp-toptab:hover { color: var(--text); background: var(--hover); }
.xp-toptab.on { color: var(--text); border-bottom-color: var(--primary); }
.xp-body { flex: 1; min-height: 0; display: flex; }
.xp-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.xp-head { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.xp-searchbox { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); }
.xp-searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.xp-search { flex: 1; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0; min-height: 0; font-size: 14px; }
.xp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.xp-chips::-webkit-scrollbar { display: none; }
.xp-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 650 12px var(--font); cursor: pointer; text-transform: capitalize; }
.xp-chip:hover { color: var(--text); border-color: var(--line2); }
.xp-chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.xp-main { flex: 1; min-height: 0; display: flex; }
.xp-side { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--line); background: var(--bg2); }
.xp-side::-webkit-scrollbar { display: none; }
.xp-sidebtn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.xp-sidebtn:hover { background: var(--hover); color: var(--text); }
.xp-sidebtn.on { background: var(--sel); color: var(--primary); }
.xp-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 10px; min-height: 0; }
.xp-sec h5 { margin: 10px 2px 6px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); position: sticky; top: 0; background: var(--panel); padding: 4px 0; z-index: 1; }
.xp-grid.emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.xp-emoji { aspect-ratio: 1; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .08s, background .08s; }
.xp-emoji:hover { background: var(--hover); transform: scale(1.18); }
.xp-emoji img { width: 30px; height: 30px; object-fit: contain; }
.xp-grid.stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xp-sticker { position: relative; aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg2); border-radius: 12px; cursor: pointer; padding: 8px; overflow: hidden; transition: border-color .1s, transform .1s; }
.xp-sticker:hover { border-color: var(--primary); transform: translateY(-2px); }
.xp-sticker img { width: 100%; height: 100%; object-fit: contain; }
.xp-sticker-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font: 650 11px var(--font); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .1s; }
.xp-sticker:hover .xp-sticker-name { opacity: 1; }
.xp-scroll.gifs { padding: 0 10px 10px; }
.xp-masonry { columns: 2; column-gap: 6px; }
.xp-gif { display: block; width: 100%; margin-bottom: 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--bg2); cursor: pointer; break-inside: avoid; }
.xp-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-gif:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.xp-empty { padding: 40px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xp-empty p { margin: 8px 0 0; color: var(--text); font-weight: 700; }
.xp-empty small { color: var(--dim); max-width: 280px; }
.xp-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; background: var(--bg2); min-height: 48px; }
.xp-preview { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xp-prev-g { font-size: 28px; line-height: 1; width: 34px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.xp-prev-g img { width: 32px; height: 32px; object-fit: contain; }
.xp-preview strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.xp-preview small { font-size: 11.5px; }
.xp-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; }
.xp-burst { display: inline-flex; align-items: center; gap: 6px; font: 650 12.5px var(--font); cursor: pointer; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); }
.xp-burst:has(input:checked) { border-color: var(--accent2); color: var(--accent2); background: color-mix(in srgb, var(--accent2) 12%, transparent); }
.xp-burst input { display: none; }
.xp-burst span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .picker.xp-pop { width: auto; left: 8px !important; right: 8px; height: min(480px, 70vh); } .xp-grid.emoji { grid-template-columns: repeat(7, 1fr); } }

/* ---- settings pages (user, server, staff) ---- */
.settings { gap: 20px; }
.settings .card, .ss-body .card, .admin-main .card { border-radius: 18px; padding: 24px 26px; }
.card > h2, .card > h3 { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.card > h2 .ic, .card > h3 .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; --ic: 16px; }
.card > h3 .ic { width: 26px; height: 26px; border-radius: 8px; }
.card.list > h3 { margin: 10px 0 4px; }
.toggle { padding: 14px 0; gap: 18px; }
.toggle .tg-text strong { font-size: 14.5px; font-weight: 650; }
.toggle .tg-text small { color: var(--muted); display: block; margin-top: 2px; }
.ss, .admin-shell { gap: 28px; }
.ss { grid-template-columns: 248px 1fr; }
.ss-nav, .admin-nav { padding: 10px; border-radius: 16px; gap: 2px; }
.ss-title { padding: 8px 8px 14px; margin-bottom: 8px; }
.ss-title strong { font-size: 15px; }
.anav { padding: 9px 12px; border-radius: 9px; font-weight: 600; }
.anav .ic { opacity: .75; }
.anav.on { background: var(--sel); color: var(--text); font-weight: 700; }
.anav.on .ic { opacity: 1; }
.ss-body .page-head, .admin-main .page-head { margin-bottom: 22px; }
.ss-body .page-head h1, .admin-main .page-head h1 { font-size: 22px; }
.img-row { display: flex; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); margin-bottom: 14px; }
.banner-thumb { width: 160px; height: 64px; border-radius: 10px; background: var(--raise); background-size: cover; background-position: center; flex: none; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
.theme-preview { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.admin-main table, .table { border-radius: 12px; overflow: hidden; }
.admin-main th { font-size: 11px; letter-spacing: .07em; color: var(--dim); padding: 10px 12px; }
.admin-main td { padding: 12px; }
.admin-main tr:hover td { background: var(--hover); }
.stat { border-radius: 16px; padding: 18px 20px; }
.stat-v { font-size: 26px; }
.stat-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); }
.card > h2 .ic, .card > h3 .ic { --ic: 16px; padding: 0; }
.card > h2 .ic svg, .card > h3 .ic svg { width: 16px; height: 16px; }
/* ---- popout layout ---- */
.popout-wrap { width: 340px; border-radius: 16px; }
.po-banner { height: 112px; }
.po-body { padding: 0 14px 14px; }
.po-top { margin-top: -44px; margin-bottom: 10px; }
.po-card { padding: 14px 16px 16px; gap: 7px; }
.po-name { font-size: 19px; font-weight: 800; }
.po-name .vtick { color: #fff; }
.po-handle { font-size: 13px; opacity: .85; }
.po-status { padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); width: fit-content; max-width: 100%; margin-top: 2px; }
.po-sep { margin: 6px 0; }
.po-about { line-height: 1.45; }
.po-roles .role-pill { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12); }
.po-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.po-actions .btn { width: 100%; min-width: 0; height: 36px; font-size: 13.5px; padding: 0 10px; }
.po-actions .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-actions .btn:only-child { grid-column: 1 / -1; }
.po-actions .btn:not(.primary) { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .18); color: #fff; }
.po-actions .btn:not(.primary):hover { background: rgba(0, 0, 0, .45); }
.po-more { position: absolute; top: 10px; right: 10px; z-index: 5; background: rgba(0, 0, 0, .45); color: #fff; border-radius: 50%; width: 30px; height: 30px; }
.po-more:hover { background: rgba(0, 0, 0, .65); }

/* =========================================================================
   v3.4: group pages, profile editor, settings, staff panel, DMs
   ========================================================================= */
/* ---- group page ---- */
.group-hero2 { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); margin-bottom: 22px; }
.gh-banner { height: 220px; background-size: cover; background-position: center; }
.gh-bar { display: flex; align-items: flex-end; gap: 18px; padding: 0 24px 20px; margin-top: -40px; flex-wrap: wrap; }
.gh-bar .gicon { border: 4px solid var(--panel); box-sizing: content-box; flex: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.gh-text { padding-bottom: 2px; }
.gh-text h1 { margin: 0 0 4px; font-size: 24px; display: flex; align-items: center; gap: 8px; }
.gh-text .gc-meta a { color: var(--text); font-weight: 650; }
.gh-bar .page-actions { padding-bottom: 4px; }
.group-cols { gap: 22px; }
.col-side .card.psec { padding: 18px 20px; }
.col-side .card.psec h3 { padding-bottom: 10px; margin-bottom: 12px; }
.post-composer { padding: 18px 20px; }
.post-composer textarea { min-height: 72px; }
.post { padding: 18px 20px; }
.post-head { margin-bottom: 10px; }
.post-actions { gap: 6px; }
.post-act { border-radius: 8px; padding: 5px 10px; }
.avatar-stack .avatar { --s: 34px; }
/* group cards */
.group-grid { gap: 16px; }
.group-card { padding: 18px 20px 20px; border-top: 0; border-radius: 18px; }
.group-card:not(.has-banner) { padding-top: 20px; }
.group-card:not(.has-banner)::before { content: ""; display: block; height: 6px; margin: -20px -20px 16px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.gc-banner { height: 110px; margin: 0 -20px 0; }
.group-card.has-banner .gc-top { margin-top: -28px; }
.group-card.has-banner .gicon { border: 4px solid var(--panel); box-sizing: content-box; }
.group-card h3 { font-size: 17px; margin-top: 6px; }
.group-card .gc-meta { margin-top: 8px; }
.group-card .pill { margin-top: 10px; }

/* ---- profile editor ---- */
.media-edit { margin: -24px -26px 0; }
.banner-edit { height: 220px; border-radius: 18px 18px 0 0; }
.banner-edit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35)); pointer-events: none; }
.banner-btns { z-index: 1; }
.avatar-edit { margin-top: -56px; padding: 0 26px 6px; align-items: flex-end; gap: 20px; }
.avatar-edit .avatar, .avatar-edit .av-frame { --s: 116px; z-index: 1; }
.avatar-edit .avatar img, .avatar-edit .avatar .ini { border: 4px solid var(--panel); }
.avatar-edit .col { padding-bottom: 8px; gap: 8px; }
.avatar-edit .col > small, .avatar-edit .hint { max-width: 420px; }
.form-card h2 { font-size: 17px; }
.sticky-save { bottom: 20px; margin-top: 8px; }
.sticky-save .btn { height: 44px; padding: 0 22px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.kink-legend { margin: 8px 0 14px; }
.gallery { gap: 12px; }
.gallery .shot, .gallery .add-shot { border-radius: 14px; }
.chips.selectable .chip { height: 32px; border-radius: 999px; padding: 0 13px; }

/* ---- settings: balanced columns ---- */
.settings { display: block; columns: 2; column-gap: 20px; }
.settings > .card { break-inside: avoid; margin: 0 0 20px; display: inline-block; width: 100%; }
@media (max-width: 1000px) { .settings { columns: 1; } }
.dev-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--raise); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.list .row small.muted { display: block; margin-top: 2px; }

/* ---- staff panel ---- */
.admin-shell { grid-template-columns: 220px 1fr; }
.admin-nav { padding: 10px; }
.stats { gap: 14px; }
.stat { padding: 18px 20px; border-radius: 16px; gap: 14px; transition: border-color .12s, transform .12s; }
.stat:hover { border-color: var(--line2); transform: translateY(-1px); }
.stat-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); }
.stat-l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.admin-main .card h3 { font-size: 15px; }
.admin-main .chart { border-radius: 12px; }
.pill { font-weight: 700; letter-spacing: .01em; }
.admin-main .row.user-row, .admin-main .list .row { padding: 12px 6px; }
.admin-main tbody tr { transition: background .08s; }

/* ---- direct messages ---- */
.messenger { grid-template-columns: 330px 1fr; }
.conv-side { background: color-mix(in srgb, var(--panel) 92%, var(--bg2)); }
.conv-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 8px; }
.conv-head h2 { font-size: 18px; font-weight: 800; }
.conv-searchbox { display: flex; align-items: center; gap: 8px; margin: 4px 12px 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--dim); }
.conv-searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.conv-search { flex: 1; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0; min-height: 0; font-size: 14px; }
.conv-list { padding: 2px 10px 16px; }
.conv { padding: 10px 10px; border-radius: 12px; gap: 12px; margin-bottom: 2px; }
.conv .avatar { --s: 44px; }
.conv-top { gap: 6px; }
.conv-top strong { font-size: 14.5px; }
.conv-top small { font-size: 11.5px; }
.conv-last { font-size: 13px; margin-top: 1px; }
.conv.unread .conv-top strong { font-weight: 800; }
.conv .count { background: var(--primary); color: var(--on-primary); min-width: 20px; height: 20px; border-radius: 10px; font: 800 11px var(--font); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.conv-empty { padding: 36px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.conv-empty p { margin: 6px 0 0; color: var(--text); font-weight: 700; }
.conv-empty small { color: var(--dim); margin-bottom: 8px; }
.conv-pane .pane-head { padding: 0 18px; }
.conv-pane .pane-head .pane-user { gap: 12px; }
.dm-intro { padding: 24px 18px 10px; gap: 6px; }
.dm-intro h2 { font-size: 28px; margin: 10px 0 0; display: flex; align-items: center; gap: 8px; }
.dm-intro p { margin: 0; }
.dm-intro .btn-row { margin-top: 10px; }
.conv-pane .feed-empty, .conv-pane .empty { align-self: center; }
.gh-text { padding-top: 46px; }
.gh-bar .page-actions { padding-top: 46px; }
.avatar-edit .col { padding-top: 62px; padding-bottom: 0; }
.sticky-save.hidden { opacity: 0; pointer-events: none; }
.sticky-save { transition: opacity .15s; }
.logo-mark.img { background: none; overflow: hidden; }
.logo-mark.img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.logo-mark.img::after { display: none; }
/* picker: never let wide GIFs push the panel wider than its frame */
.picker.xp-pop { overflow: hidden; }
.xp-body, .xp-pane, .xp-main, .xp-scroll, .xp-head { min-width: 0; max-width: 100%; }
.xp-pane { width: 100%; overflow: hidden; }
.xp-scroll { overflow-x: hidden; }
.xp-masonry { width: 100%; column-width: auto; }
.xp-gif { max-width: 100%; contain: inline-size; }
.xp-gif img { max-width: 100%; height: 100%; width: 100%; }
.xp-chips { max-width: 100%; }
.xp-grid.emoji, .xp-grid.stickers { max-width: 100%; }
/* ---- developer platform & security ---- */
.bot-tag { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--primary); color: var(--on-primary); font: 800 10px var(--font); letter-spacing: .04em; vertical-align: middle; flex: none; }
.bot-tag.hook { background: var(--accent2); color: #fff; }
.name-badges { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.flag-ic { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fc) 18%, transparent); color: var(--fc); }
.flag-ic .ic { --ic: 13px; }
.pcard .flag-ic { background: rgba(0, 0, 0, .35); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.app-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.app-card:hover { border-color: var(--primary); color: var(--text); }
.app-card h3 { margin: 0 0 4px; }
.app-card p { margin: 0 0 8px; font-size: 13.5px; }
.dev-hero { text-align: center; padding: 40px 28px; }
.dev-hero-ic { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 16px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.dev-steps { text-align: left; max-width: 420px; margin: 16px auto 22px; padding-left: 22px; line-height: 1.8; }
.dev-hero .btn-row { justify-content: center; }
.docs h2 { margin-top: 26px; font-size: 16px; }
.docs h2:first-child { margin-top: 0; }
.docs-pre { font-size: 12.5px; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.docs-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.docs-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-table code { font-size: 12px; }
.auth-card.wide { max-width: 640px; }
.twofa-setup { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.qr-box { width: 180px; height: 180px; border-radius: 12px; overflow: hidden; background: #fff; padding: 6px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.secret-key { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; padding: 6px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); word-break: break-all; }
.otp-in { font: 600 22px var(--mono); letter-spacing: .25em; text-align: center; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 14px; }
.backup-codes code { font-size: 14px; padding: 8px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); text-align: center; letter-spacing: .06em; }
.toggle-wrap { margin-top: 10px; border-top: 1px solid var(--line); }
.note.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.note.ok .ic { color: var(--ok); }
.flag-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-opt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--muted); font: 650 13px var(--font); cursor: pointer; }
.flag-opt .ic { color: var(--fc); }
.flag-opt.on { border-color: var(--fc); color: var(--text); background: color-mix(in srgb, var(--fc) 12%, var(--bg2)); }
.embed.hook .embed-title { font-size: 15px; }
@media (max-width: 640px) { .twofa-setup { grid-template-columns: 1fr; } .qr-box { margin: 0 auto; } }
/* ---- avatar decorations ---- */
.av-deco { --s: 40px; position: relative; display: inline-flex; width: var(--s); height: var(--s); flex: none; }
.av-deco > .avatar { width: 100%; height: 100%; }
.av-deco .deco-img { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; pointer-events: none; z-index: 3; object-fit: contain; }
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.deco-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--muted); cursor: pointer; font: 600 11.5px var(--font); text-align: center; }
.deco-opt:hover { border-color: var(--line2); color: var(--text); }
.deco-opt.on { border-color: var(--primary); background: var(--sel); color: var(--text); }
.deco-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.deco-sec h5 { margin: 14px 2px 8px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
.deco-sec:first-child h5 { margin-top: 0; }
.deco-prev { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 14px; }
.deco-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.deco-admin .item { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.deco-admin .item strong { font-size: 13px; }
.deco-admin .item small { color: var(--dim); }

/* ===== v4.1: pins panel, topics, forwarding, group DMs, voice chat, PTT ===== */
.topic.editable { background: none; border: 0; color: var(--muted); font: inherit; cursor: text; padding: 2px 6px; border-radius: 6px; text-align: left; max-width: 420px; }
.topic.editable:hover { background: var(--raise); color: var(--text); }
.topic.empty { font-style: italic; opacity: .6; }
.pin-list .pin-item { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); padding: 12px 10px; cursor: pointer; font: inherit; }
.pin-list .pin-item:hover { background: var(--raise); }
.pin-list .pin-item .row { margin-bottom: 4px; }
.pin-list .pin-item .right { text-align: right; }
.pin-body { font-size: 13.5px; line-height: 1.45; }
.pin-thumb { display: block; max-height: 120px; max-width: 100%; border-radius: 8px; margin-top: 6px; object-fit: cover; }
.pin-x { position: absolute; top: 8px; right: 8px; opacity: 0; }
.pin-item:hover .pin-x { opacity: 1; }
.pinned-msg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent2); border-radius: 2px; }
.pinned-msg { position: relative; }
/* forwarding */
.fwd-head { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin: 2px 0 2px; }
.fwd-head strong { color: var(--text); }
.fwd-body { border-left: 3px solid var(--line-strong, var(--line)); padding-left: 10px; margin-top: 2px; }
.fw-preview { display: flex; gap: 10px; align-items: flex-start; background: var(--raise); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }
.fw-list { max-height: 320px; overflow: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.fw-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.fw-item:last-child { border-bottom: 0; }
.fw-item:hover { background: var(--raise); }
.fw-item.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.fw-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.fw-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong, var(--line)); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.fw-item.on .fw-check { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.modal textarea[placeholder^="Add a note"] { margin-top: 6px; }
/* system lines + seen */
.msg.sys { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 22px; color: var(--muted); font-size: 13px; }
.msg.sys .sys-ic { color: var(--dim); display: inline-flex; }
.msg.sys .msg-time-side { opacity: .7; width: auto; margin-left: auto; }
.seen-line { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); padding: 2px 16px 0 0; }
/* group DMs */
.gdm-ic { border-radius: 50%; object-fit: cover; flex: none; display: inline-block; }
.gdm-ic.stack { position: relative; }
.gdm-ic.stack .avatar { position: absolute; left: 0; top: 0; }
.gdm-ic.stack .avatar:nth-child(2) { left: auto; right: 0; top: auto; bottom: 0; outline: 2px solid var(--bg); }
.gdm-ic.stack .avatar:only-child { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gdm-body { display: flex; min-height: 0; flex: 1; }
.gdm-body .mv { flex: 1; min-width: 0; }
.gdm-members { display: none; flex-direction: column; width: 220px; flex: none; border-left: 1px solid var(--line); padding: 10px 8px; gap: 2px; overflow: auto; background: var(--panel); }
.gdm-members.open { display: flex; }
.gdm-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.gdm-member:hover { background: var(--raise); }
@media (max-width: 900px) { .gdm-members.open { position: absolute; right: 0; top: 56px; bottom: 0; z-index: 5; box-shadow: var(--shadow); } }
/* voice channel chat */
.vc-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vc-stage { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
.vc-chat { flex: none; height: 40%; min-height: 220px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.vc-chat .mv { height: 100%; }
.vc-chat[hidden] { display: none; }
.pane-head .icon-btn.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
/* who's talking in the rail + dock */
.srv.talking .srv-ic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); animation: talk-pulse 1.2s ease-in-out infinite; }
@keyframes talk-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); } 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 6px color-mix(in srgb, var(--ok) 55%, transparent); } }
.vp-talking { display: none; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ok); padding: 0 2px 4px; }
.vp-talking.on { display: flex; }
.vp-ptt { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; padding: 0 2px 6px; }
.vp-ptt kbd { font-size: 10px; padding: 1px 5px; }
body.ptt-on .vbtn[title="Mute"], body.ptt-on .vbtn[title="Unmute"] { position: relative; }
body.ptt-on .vbtn[title="Mute"]::after { content: "PTT"; position: absolute; bottom: -2px; right: -4px; font-size: 8px; font-weight: 800; background: var(--raise); border-radius: 4px; padding: 0 3px; color: var(--muted); }
body.ptt-down .vbtn[title="Mute"] { color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.voice-settings { width: 300px; padding: 6px 10px 10px; }
.voice-settings .toggle { padding: 8px 0; }
.vs-key { padding: 4px 0 8px; font-size: 13.5px; }
.vs-key.dim { opacity: .5; }
/* scheduled page */
.sched-row { padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.sched-row:last-child { border-bottom: 0; }
.sched-row .dev-ic { margin-top: 2px; }
.sched-row .small { font-size: 12px; }

/* ===== Developer portal v2 ===== */
.dev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.dev-head h1 { font-size: 26px; margin: 0 0 4px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-row .stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.stat-row .stat.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.stat-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dapp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 26px; }
.dapp { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: transform .12s, border-color .12s; }
.dapp:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); text-decoration: none; }
.dapp.new { align-items: center; justify-content: center; color: var(--muted); border-style: dashed; cursor: pointer; font: inherit; min-height: 160px; }
.dapp.new:hover { color: var(--primary); }
.dapp-top { display: flex; align-items: center; gap: 12px; }
.dapp-top h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 5px; }
.dapp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dapp-stats > div { background: var(--raise); border-radius: 8px; padding: 8px 6px; text-align: center; }
.dapp-stats strong { display: block; font-size: 16px; }
.dapp-stats small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.dapp-stats .bad strong { color: var(--bad); }
.dapp-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dapp-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dapp-foot .dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dev-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.res { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.res:hover { background: var(--raise); text-decoration: none; }
.res .ic { color: var(--primary); flex: none; }
.res strong { display: block; font-size: 14px; }
.res small { color: var(--muted); }
/* console */
.dev-console .ss-nav, .docs-shell .ss-nav { min-height: 60vh; }
.ss-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); padding: 4px 8px 8px; }
.ss-nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.dev-grid { gap: 14px; margin-bottom: 14px; }
.dev-grid .card { margin: 0; }
.card h2 .pill { margin-left: 6px; }
.card h2 .btn { margin-left: auto; }
.empty-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; color: var(--muted); text-align: center; }
.empty-mini.tall { padding: 40px 12px; }
.empty-mini h3 { margin: 0; color: var(--text); }
.empty-mini p { margin: 0; max-width: 420px; }
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; }
.check-row:hover { background: var(--raise); text-decoration: none; }
.check-row .ic:first-child { color: var(--dim); }
.check-row.done .ic:first-child { color: var(--ok); }
.check-row.done > span:not(.ic) { color: var(--muted); text-decoration: line-through; }
.check-row > span:not(.ic) { flex: 1; }
.check-row > .ic { flex: none; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.kv span { color: var(--muted); font-size: 12px; }
.token-row { display: flex; align-items: center; gap: 10px; background: var(--raise); border-radius: 10px; padding: 10px 12px; }
.token-row code { flex: 1; font-size: 13px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.color-pick { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.color-pick input { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.chip-x { background: none; border: 0; color: inherit; display: inline-flex; margin-left: 2px; cursor: pointer; opacity: .7; padding: 0; }
.chip-input { background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; color: var(--text); width: 110px; }
.verify-box { display: flex; align-items: center; gap: 14px; background: var(--raise); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.verify-box p { margin: 4px 0 0; font-size: 13.5px; }
.perm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.perm-group h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.perm-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.perm-row:hover { background: var(--raise); }
.perm-row.on { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.perm-row input { margin-top: 3px; }
.perm-summary { display: flex; flex-wrap: wrap; gap: 6px; }
/* commands */
.cmd-list { display: flex; flex-direction: column; }
.cmd-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.cmd-row:last-child { border-bottom: 0; }
.cmd-list.compact .cmd-row { padding: 8px 0; gap: 10px; font-size: 13.5px; }
.cmd-name { display: flex; align-items: center; gap: 4px; min-width: 150px; color: var(--primary); }
.cmd-name code, .cmd-list.compact code { font-weight: 700; font-size: 14px; }
.cmd-uses { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cmd-uses small { font-size: 11px; }
.opt-pill { display: inline-block; background: var(--raise); border-radius: 6px; padding: 1px 6px; margin: 2px 4px 0 0; font-family: var(--mono); font-size: 11.5px; }
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt-row { display: grid; grid-template-columns: 1.1fr 1fr 2fr auto auto; gap: 6px; align-items: center; }
.opt-row input[type="text"], .opt-row input:not([type]) { min-width: 0; }
.cmd-preview { display: flex; align-items: center; gap: 8px; background: var(--raise); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.cmd-preview code { font-weight: 700; }
.ac-cmd { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.cmd-head { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.cmd-head strong { color: var(--primary); }
/* events */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.ev-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.ev-opt:hover { background: var(--raise); }
.ev-opt.on { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ev-opt > div { flex: 1; }
.ev-opt .ic { color: var(--primary); }
.ev-key { font-size: 11px; color: var(--muted); }
.deliv-list { display: flex; flex-direction: column; }
.deliv { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.deliv:hover { background: var(--raise); }
.deliv-status { font-family: var(--mono); font-weight: 700; width: 36px; }
.deliv.ok .deliv-status { color: var(--ok); }
.deliv.bad .deliv-status { color: var(--bad); }
.deliv-detail { padding: 10px 12px 14px; background: var(--raise); border-radius: 0 0 10px 10px; }
.deliv-detail h4 { margin: 8px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
/* charts */
.bar-chart { position: relative; }
.bc-svg { width: 100%; height: 130px; display: block; }
.bc-labels { display: flex; margin-top: 4px; }
.bc-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.bc-hover { position: absolute; inset: 0 0 18px 0; display: flex; }
.bc-hover span { flex: 1; }
.spark { color: var(--primary); display: inline-flex; }
.code-bars { display: flex; flex-direction: column; gap: 8px; }
.code-bar { display: grid; grid-template-columns: 56px 1fr 48px; align-items: center; gap: 10px; font-size: 13px; }
.cb-track { height: 8px; border-radius: 4px; background: var(--raise); overflow: hidden; }
.cb-fill { height: 100%; border-radius: 4px; background: var(--primary); }
.cb-fill.ok { background: var(--ok); } .cb-fill.warn { background: var(--warn); } .cb-fill.bad { background: var(--bad); }
.pill.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.docs-table.compact td, .docs-table.compact th { padding: 6px 8px; font-size: 13px; }
/* request log */
.req-log { margin-top: 12px; }
.req-row { display: grid; grid-template-columns: 52px 60px 1fr 70px 80px; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.req-row.head { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.req-row code { font-size: 12.5px; }
.req-status { font-family: var(--mono); font-weight: 700; color: var(--ok); }
.req-row.warn .req-status { color: var(--warn); } .req-row.bad .req-status { color: var(--bad); }
.req-method { font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* code blocks */
.code-wrap { position: relative; margin: 10px 0 14px; }
.code-wrap .md-pre { margin: 0; padding-right: 44px; }
.code-lang { position: absolute; top: 6px; right: 40px; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.code-copy { position: absolute; top: 6px; right: 6px; background: var(--raise); border: 0; color: var(--muted); border-radius: 6px; padding: 4px 6px; cursor: pointer; display: inline-flex; }
.code-copy:hover { color: var(--text); }
.code-tabs .seg { margin-bottom: 6px; }
/* docs */
.docs-body .docs { padding: 28px 32px; }
.docs h1 { font-size: 28px; margin: 0 0 6px; }
.docs .lead { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
.docs h2 { font-size: 18px; margin: 26px 0 8px; }
.docs p, .docs li { line-height: 1.6; }
.doc-steps li { margin-bottom: 6px; }
.docs-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* directory */
.dir-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-chips .chip { display: inline-flex; align-items: center; gap: 5px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dir-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--text); border-top: 3px solid var(--ac); transition: transform .12s; }
.dir-card:hover { transform: translateY(-2px); text-decoration: none; }
.dir-top { display: flex; align-items: center; gap: 12px; }
.dir-top h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 5px; }
.dir-card p { margin: 0; font-size: 13.5px; }
.dir-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.dir-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dir-meta .pill { gap: 4px; }
.tag { color: var(--primary); }
.app-page { max-width: 1000px; margin: 0 auto; }
.app-hero { display: flex; gap: 20px; align-items: center; padding: 26px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, var(--panel)), var(--panel)); border: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.app-hero h1 { margin: 0 0 4px; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.app-hero > .col { align-items: stretch; gap: 8px; }
.app-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.app-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.install-head { text-align: center; padding-bottom: 12px; }
.install-head h1 { margin: 12px 0 4px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.install-head .avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--ac); }
.install-perms { background: var(--raise); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.install-perms h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.install-perms ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 13.5px; }
.install-perms li { display: flex; align-items: center; gap: 6px; }
.install-perms li .ic { color: var(--ok); }
.install-pick { font-size: 14px; margin: 14px 0 6px; }
.admin-table tr.hl td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
@media (max-width: 900px) { .dev-console .ss, .docs-shell .ss { grid-template-columns: 1fr; } .dev-console .ss-nav, .docs-shell .ss-nav { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; } .ss-nav-foot { margin: 0; border: 0; padding: 0; } .opt-row { grid-template-columns: 1fr 1fr; } .docs-body .docs { padding: 18px; } }
/* portal layout fixes */
.dev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.dev-grid > .card { min-width: 0; }
.code-wrap, .code-tabs { min-width: 0; max-width: 100%; }
.check-row { justify-content: flex-start; text-align: left; }
.check-row > span { text-align: left; }
.dev-console .ss-title small { display: inline-flex; align-items: center; gap: 3px; }
.dev-console .ss-title > div { min-width: 0; display: flex; flex-direction: column; }
.dapp-stats small { white-space: nowrap; font-size: 10px; }
.bar-chart { padding-top: 6px; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 33%; background-position: 0 6px; background-repeat: repeat-y; }
.bc-labels { background: var(--panel); }
@media (max-width: 1100px) { .dev-grid { grid-template-columns: minmax(0, 1fr); } }

.presence-row { display: flex; gap: 8px; align-items: center; }
.presence-row input { flex: 1; min-width: 0; }
.perm-pick.collapsed { max-height: 0; overflow: hidden; margin: 0; }
.perm-toggle { margin-top: 10px; }
.dev-grid .docs-table { width: 100%; } .dev-grid .docs-table td code { word-break: break-all; }
.deliv-detail .md-pre { max-height: 320px; overflow: auto; }

/* ===== Voice UI v2 ===== */
/* call panel (sidebar slot + floating dock) */
.voice-panel.v2 { padding: 10px 10px 10px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 7%, var(--bg2)), var(--bg2)); }
.voice-panel.v2.is-live { background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 8%, var(--bg2)), var(--bg2)); }
.vp-head { display: flex; align-items: center; gap: 4px; }
.vp-head .vp-info { flex: 1; min-width: 0; }
.voice-panel.v2 .vp-status { gap: 6px; font-size: 13px; }
.voice-panel.v2 .vp-label { margin: 2px 0 0; font-size: 12px; color: var(--muted); display: block; }
.vp-label strong { color: var(--text); font-weight: 600; }
.vp-n { color: var(--dim); }
.vp-live { font: 800 9.5px var(--font); letter-spacing: .05em; background: var(--bad); color: #fff; padding: 1px 5px; border-radius: 4px; }
.voice-panel.v2.is-live .vp-status { color: var(--text); }
.vp-icon { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.vp-icon:hover { background: var(--raise); color: var(--text); }
.vp-icon.hang:hover { background: var(--bad); color: #fff; }
.vp-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; cursor: help; }
.vp-signal i { width: 3px; border-radius: 1px; background: currentColor; }
.vp-signal i:nth-child(1) { height: 5px; } .vp-signal i:nth-child(2) { height: 9px; } .vp-signal i:nth-child(3) { height: 13px; }
.vp-signal.ok { color: var(--ok); }
.vp-signal.warn { color: var(--warn); } .vp-signal.warn i:nth-child(3) { opacity: .25; }
.vp-signal.bad { color: var(--bad); } .vp-signal.bad i:nth-child(n+2) { opacity: .25; }
.vp-actions, .vp-dock-mute { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vp-dock-mute { grid-template-columns: 1fr 1fr; }
.vp-act { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 9px; border: 1px solid var(--line); background: var(--raise); color: var(--text); font: 600 11px var(--font); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; }
.vp-act:hover { background: color-mix(in srgb, var(--text) 8%, var(--raise)); border-color: var(--line2); }
.vp-act:active { transform: scale(.96); }
.vp-act.on { background: color-mix(in srgb, var(--primary) 22%, var(--raise)); border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); }
.vp-act.live { background: var(--bad); border-color: var(--bad); color: #fff; }
.vp-act.bad { color: var(--bad); }
.vp-stream { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--bad) 14%, var(--raise)); color: var(--text); font: 600 12px var(--font); cursor: pointer; }
.vp-stream:hover { background: color-mix(in srgb, var(--bad) 22%, var(--raise)); }
.voice-panel.v2 .vp-talking { padding: 0 2px; }
.voice-panel.v2 .vp-ptt { padding: 0 2px; }
#voice-dock { width: 300px; }
/* big call controls */
.vcontrols { align-items: center; gap: 14px; }
.vc-group { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, #000 40%, var(--panel)); }
.vc-group .vbtn { width: 44px; height: 44px; }
.vbtn.live { background: var(--bad); color: #fff; }
.vc-splitbtn { display: flex; align-items: center; }
.vc-splitbtn .vbtn:first-child { border-radius: 999px 0 0 999px; }
.vbtn.caret { width: 24px !important; border-radius: 0 999px 999px 0; background: color-mix(in srgb, var(--bad) 75%, #000); color: #fff; }
.vbtn.hang { width: 56px; border-radius: 999px; }
.vt-q { font: 700 10.5px var(--font); color: rgba(255, 255, 255, .75); }
/* soundboard */
.soundboard.v2 { width: 384px; max-height: 480px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.sb-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sb-title .ic { color: var(--primary); }
.sb-add { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--raise); }
.sb-add:hover { color: var(--text); text-decoration: none; }
.soundboard.v2 .searchbox { margin: 0 14px 8px; }
.sb-body { flex: 1; overflow-y: auto; padding: 0 14px 10px; }
.sb-pack-h { display: flex; justify-content: space-between; align-items: center; font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 2px 6px; }
.sb-pack-h small { font-weight: 600; color: var(--dim); }
.soundboard.v2 .sb-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sb-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px 9px; min-height: 78px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.sb-tile:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: color-mix(in srgb, var(--primary) 8%, var(--raise)); }
.sb-tile:active { transform: scale(.95); }
.sb-tile.fired { animation: sb-fire .45s ease-out; }
@keyframes sb-fire { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.sb-emoji { font-size: 26px; line-height: 1; display: inline-flex; color: var(--muted); }
.sb-name { font: 600 12px/1.25 var(--font); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; word-break: break-word; }
.sb-prev { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); opacity: 0; transition: opacity .12s; }
.sb-tile:hover .sb-prev { opacity: 1; }
.sb-prev:hover { color: var(--text); background: var(--bg); }
.sb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 10px; text-align: center; }
.sb-empty-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 4px; }
.sb-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg2); }
.sb-foot .range { flex: 1; }
.sb-pct { font: 700 12px var(--font); width: 36px; text-align: right; color: var(--muted); }
input.range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--raise); outline: none; }
input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer; border: 3px solid var(--primary); }
input.range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: pointer; }
input.range::-moz-range-progress { background: var(--primary); height: 6px; border-radius: 3px; }
input.range:disabled { opacity: .45; }
/* screen share dialog */
.ss-modal .modal-body { display: flex; flex-direction: column; gap: 4px; }
.ss-sec { margin-bottom: 14px; }
.ss-sec h4 { margin: 0 0 8px; font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ss-srcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss-src { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.ss-src:hover { border-color: var(--line2); }
.ss-src.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--raise)); }
.ss-src-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); margin-bottom: 6px; }
.ss-src.on .ss-src-ic { background: var(--primary); color: var(--on-primary, #fff); }
.ss-src small { color: var(--muted); font-size: 11.5px; }
.ss-fine { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.ss-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ss-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; text-align: left; }
.ss-chip:hover { border-color: var(--line2); }
.ss-chip.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--raise)); }
.ss-chip strong { font-size: 14px; }
.ss-chip small { font-size: 11.5px; color: var(--muted); }
.ss-audio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--raise); }
.ss-audio.dim { opacity: .65; }
.ss-audio-ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--primary); flex: none; }
.ss-audio small { font-size: 12px; line-height: 1.4; margin-top: 2px; }
.ss-est { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.ss-est .ic { color: var(--primary); }
.ss-warn { color: var(--warn); }
/* settings modal */
.vs-modal .modal-body { padding-top: 4px; }
.vs-wrap { display: flex; flex-direction: column; gap: 6px; }
.vs-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.vs-sec:last-child { border-bottom: 0; }
.vs-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.vs-sec h3 .ic { color: var(--primary); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vs-na { padding: 10px 0; }
.vs-meter-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.vmeter { position: relative; flex: 1; height: 10px; border-radius: 5px; background: var(--raise); overflow: hidden; }
.vm-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px; background: color-mix(in srgb, var(--ok) 45%, var(--raise)); transition: width .06s linear; }
.vm-fill.hot { background: var(--ok); }
.vm-mark { position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: var(--warn); transform: translateX(-1px); }
.btn.on { background: var(--primary); color: var(--on-primary, #fff); border-color: var(--primary); }
.vs-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.vs-thr { padding: 6px 0 0; }
.vs-thr .range { width: 100%; }
.vs-thr.dim, .vs-sub.dim { opacity: .45; pointer-events: none; }
.vs-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.vs-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; text-align: left; }
.vs-mode .ic { color: var(--muted); margin-bottom: 4px; }
.vs-mode small { color: var(--muted); font-size: 12px; }
.vs-mode.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--raise)); }
.vs-mode.on .ic { color: var(--primary); }
.vs-sub { padding: 2px 2px 0; }
.kbd-btn { min-width: 110px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line2); border-bottom-width: 3px; background: var(--raise); color: var(--text); font: 700 13px var(--mono); cursor: pointer; }
.kbd-btn.listening { border-color: var(--primary); color: var(--primary); animation: pulse-b 1s infinite; }
@keyframes pulse-b { 50% { opacity: .55; } }
.vs-toggle { display: flex; align-items: center; gap: 14px; padding: 9px 0; cursor: pointer; font-size: 14px; }
.vs-toggle small { font-size: 12.5px; margin-top: 1px; }
.vs-cam-row { display: flex; gap: 16px; align-items: stretch; }
.vs-cam-box { position: relative; width: 220px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--raise); flex: none; }
.vs-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); z-index: 1; }
.vs-cam:not([src]):not([srcObject]) { background: transparent; }
.vs-cam-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); }
.vs-cam-row .col { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: flex-start; }
@media (max-width: 640px) { .vs-grid, .vs-modes, .ss-srcs { grid-template-columns: 1fr; } .vs-cam-row { flex-direction: column; } .vs-cam-box { width: 100%; } .soundboard.v2 { width: calc(100vw - 24px); } }

input.range { background: linear-gradient(var(--primary), var(--primary)) 0 / var(--fill, 50%) 100% no-repeat, var(--raise); }
.picker.sb-pop { width: 384px; }
.soundboard.v2 { width: 100%; }
.sb-foot .muted.small { font-size: 12px; white-space: nowrap; }
.vinline > .vcontrols, .vroom > .vcontrols { padding: 12px 10px 14px; }
.vs-toggle .switch, .ss-audio .switch { margin-left: 8px; }
input.range { height: 6px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 3px !important; margin: 8px 0; box-shadow: none !important; }
.nsfw-gate { text-align: left; max-width: 460px; margin: 6px auto 14px; display: flex; gap: 10px; align-items: flex-start; } .nsfw-gate p { margin: 4px 0 0; font-size: 13.5px; }
.vp-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* inside the Android app */
.in-app body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

/* ===== Get the app ===== */
.dl-page { max-width: 1080px; margin: 0 auto; }
.dl-hero { text-align: center; padding: 26px 16px 30px; }
.dl-hero-ic { display: inline-flex; margin-bottom: 14px; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--primary) 40%, transparent)); }
.dl-hero h1 { font-size: 38px; margin: 0 0 8px; letter-spacing: -.02em; }
.dl-hero .lead { max-width: 560px; margin: 0 auto 20px; font-size: 16px; }
.dl-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dl-hero .note { display: inline-flex; max-width: 560px; text-align: left; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dl-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.dl-card.mine { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.dl-card-top { display: flex; align-items: center; gap: 12px; }
.dl-card h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.dl-ic.sm { width: 30px; height: 30px; border-radius: 8px; margin-right: 4px; }
.dl-svg { display: inline-flex; } .dl-svg svg { width: 100%; height: 100%; }
.dl-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-card-actions .btn { flex: 1; justify-content: center; }
.disabled-look { opacity: .55; pointer-events: none; }
.dl-file { font-family: var(--mono); font-size: 11.5px; margin-top: -4px; }
.dl-steps summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
.dl-steps ol { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.dl-steps li { margin-bottom: 4px; }
.dl-notes h2 small { font-weight: 500; font-size: 12px; }
.dl-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.dl-feat { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.dl-feat p { margin: 3px 0 0; font-size: 13px; }
.dl-feat .feat-ic { flex: none; }
.dl-page .land-nav { margin-bottom: 8px; }
.ss-srcs.two { grid-template-columns: 1fr 1fr; }
.dl-card .pill { text-transform: none; letter-spacing: 0; }
.dl-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }

/* call stage: tiles always fit the space above the controls */
.vstage { container-type: size; overflow: hidden; align-items: center; justify-items: center; }
.vstage.n1 { display: flex; align-items: center; justify-content: center; }
.vstage.n1 .vtile { width: min(100%, 960px, calc((100cqh - 4px) * 16 / 9)); max-height: 100%; }
.vstage.n2 .vtile, .vstage:not(.n1):not(.has-focus) .vtile { width: min(100%, calc(100cqh * 16 / 9)); max-height: 100%; }
.vstage.has-focus { container-type: normal; }
.vfocus { overflow: hidden; align-items: center; justify-content: center; container-type: size; }
.vfocus .vtile { flex: none; width: min(100%, calc(100cqh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; max-height: 100%; }
.vstrip { padding-bottom: 2px; }
.vstrip .vtile { width: 168px; }
.vstrip .vtile .vt-av { transform: scale(.5); }
.vstrip .vtile.speaking .vt-av { transform: scale(.54); }
.vtile .vt-av { max-width: 70%; max-height: 70%; display: flex; align-items: center; justify-content: center; }
.vcontrols { flex: none; position: relative; z-index: 2; }
.vc-group { align-items: center; }
.vstage.has-focus { align-items: stretch; }
.vstage.has-focus .vfocus { width: 100%; }
.vstrip { justify-content: center; }
.vc-splitbtn .vbtn:only-child { border-radius: 999px; }

/* ===== voice channel members in the sidebar ===== */
.vc-users { position: relative; padding: 2px 4px 6px 26px; gap: 2px; }
.vc-users:not(:empty)::before { content: ""; position: absolute; left: 17px; top: 2px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line); }
.vc-user { position: relative; gap: 9px; padding: 4px 6px 4px 6px; border-radius: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; min-height: 32px; transition: background .12s, color .12s; outline: none; }
.vc-user::before { content: ""; position: absolute; left: -9px; top: 50%; width: 8px; height: 2px; border-radius: 2px; background: var(--line); }
.vc-user:hover, .vc-user:focus-visible { background: var(--hover); color: var(--text); }
.vc-user.me .vu-name { color: var(--text); }
.vu-av { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.vu-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; transform: scale(.85); transition: opacity .12s, transform .12s; pointer-events: none; }
.vc-user.speaking .vu-av::after { opacity: 1; transform: scale(1); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 55%, transparent); }
.vc-user.speaking .vu-name { color: var(--text); }
.vc-user .avatar { box-shadow: none !important; }
.vc-user .av-deco .deco-img { display: none; }
.vu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.vc-user.is-muted .vu-name { opacity: .8; }
.vu-state { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.vu-ic { display: inline-flex; color: var(--dim); }
.vu-ic.dim { color: var(--muted); }
.vu-ic.bad { color: var(--bad); }
.vu-ic.warn { color: var(--warn); }
.vu-live { font: 800 9.5px var(--font); letter-spacing: .05em; padding: 2px 5px; border-radius: 4px; background: var(--bad); color: #fff; line-height: 1.1; }
/* custom rows inside context menus */
.popmenu .mcustom { padding: 6px 10px 8px; }
.vol-row { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.vol-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; }
.vol-pct { color: var(--text); font-variant-numeric: tabular-nums; }
.vol-row input.range { margin: 6px 0 2px; width: 100%; }

/* ---------- v4.5 landing + auth ---------- */
#view.public:has(> .lp), #view.public:has(> .au) { padding: 0; max-width: none; }
.lp { --lp-w: 1160px; min-height: 100vh; background:
  radial-gradient(900px 520px at 78% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
  radial-gradient(700px 460px at 8% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--bg); }
.lp-wrap { max-width: var(--lp-w); margin: 0 auto; padding: 0 32px; }
.lp-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lp-nav-in { display: flex; align-items: center; gap: 10px; height: 66px; }
.lp-brand:hover { text-decoration: none; }
.lp-links { display: flex; gap: 4px; margin-left: 28px; }
.lp-links a { color: var(--muted); font-weight: 550; font-size: 14.5px; padding: 7px 12px; border-radius: 8px; }
.lp-links a:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.lp .announce { margin-top: 18px; justify-content: center; }
.lp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); margin-bottom: 22px; }
.lp-hero h1 { font-size: clamp(44px, 6.2vw, 76px); font-weight: 850; letter-spacing: -.04em; line-height: 1; margin-bottom: 22px; }
.lp-grad { background: linear-gradient(100deg, var(--primary), #9d7bff 55%, #ff6b9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 30em; margin: 0; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 26px; }
.lp-cta .btn.primary, .lp-final .btn.primary { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; color: var(--muted); font-size: 14px; }
.lp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.lp-trust svg { color: var(--ok); }
.lp-hero-art { position: relative; height: 470px; }
.lp-glow { position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 34%, transparent), transparent); filter: blur(30px); }
.lp-card { position: absolute; width: 292px; transition: transform .5s var(--ease, ease); }
.lp-card > * { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65); }
.lp-card1 { left: 4%; top: 18px; transform: rotate(-3deg); z-index: 2; }
.lp-card2 { right: 2%; top: 92px; transform: rotate(4deg) scale(.94); opacity: .82; }
.lp-hero-art:hover .lp-card1 { transform: rotate(-2deg) translateY(-6px); }
.lp-hero-art:hover .lp-card2 { transform: rotate(5deg) scale(.95) translateY(4px); }
.lp-section { padding-top: 72px; padding-bottom: 40px; scroll-margin-top: 70px; }
.lp-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.lp-head h2 { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
.lp-head p { color: var(--muted); font-size: 17px; margin: 0; }
.lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.lp-feat h3 { font-size: 16.5px; margin: 16px 0 6px; }
.lp-feat p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.lp-feat-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; position: relative; }
.lp-step { padding: 26px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); }
.lp-step h3 { font-size: 16.5px; margin: 16px 0 6px; }
.lp-step p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.6; }
.lp-step-n { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--on-primary); background: var(--primary); }
.lp-apps { display: flex; align-items: center; gap: 24px; margin: 56px 0 0; padding: 26px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.lp-apps:hover { text-decoration: none; border-color: var(--line2); }
.lp-apps h3 { font-size: 17px; margin: 0 0 4px; }
.lp-apps p { margin: 0; color: var(--muted); font-size: 14.5px; }
.lp-apps-ic { display: flex; gap: 14px; color: var(--muted); }
.lp-final { text-align: center; margin: 96px 0 72px; padding: 60px 24px; border-radius: 22px; background:
  radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 75%), var(--panel); border: 1px solid var(--line); }
.lp-final h2 { display: block; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; }
.lp-final p { color: var(--muted); font-size: 17px; margin: 0 0 28px; }
.lp .legal-foot { border-top: 1px solid var(--line); }
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 40px; text-align: left; }
  .lp-hero-art { height: 420px; max-width: 520px; width: 100%; margin: 0 auto; }
  .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-links { display: none; }
}
@media (max-width: 620px) {
  .lp-wrap { padding: 0 18px; }
  .lp-nav-in { height: 58px; }
  .lp-nav .btn.ghost { display: none; }
  .lp-hero { padding-top: 32px; }
  .lp-lead { font-size: 17px; }
  .lp-cta .btn { flex: 1; justify-content: center; }
  .lp-hero-art { height: 360px; }
  .lp-card { width: 250px; }
  .lp-card1 { left: 0; } .lp-card2 { right: 0; top: 70px; }
  .lp-feats { grid-template-columns: 1fr; gap: 30px; }
  .lp-apps { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lp-final { margin: 64px 0 48px; padding: 44px 20px; }
}

/* auth */
.au { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
.au-art { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 36px 44px; color: #fff; background:
  radial-gradient(520px 420px at 85% 92%, rgba(255, 107, 154, .30), transparent 70%),
  radial-gradient(620px 480px at 10% 10%, rgba(157, 123, 255, .38), transparent 70%),
  linear-gradient(160deg, #1b1840, #2a2f7a 55%, #3b1d4f); }
.au-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 80%); }
.au-brand { position: relative; z-index: 1; align-self: flex-start; }
.au-brand:hover, .au-brand-m:hover { text-decoration: none; }

.au-art-mid { position: relative; z-index: 1; margin: auto 0; max-width: 420px; }
.au-art h2 { font-size: 40px !important; }
.au-art h2 { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 26px; color: #fff; }
.au-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.au-points li { display: flex; gap: 14px; align-items: flex-start; }
.au-points strong { display: block; font-size: 15px; }
.au-points small { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.au-pt-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); }
.au-card { position: relative; z-index: 1; width: 260px; margin: 34px 0 0 auto; transform: rotate(3deg); opacity: .95; pointer-events: none; }
.au-card > * { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.au-fine { position: relative; z-index: 1; margin: 28px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; }
.au-main { display: flex; flex-direction: column; min-height: 100vh; padding: 28px 48px; }
.au-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.au-brand-m { display: none; }
.au-form { width: 100%; max-width: 420px; margin: auto; padding: 40px 0; }
.au-form h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.au-sub { color: var(--muted); margin: 0 0 30px; font-size: 15.5px; }
.au-fields { display: grid; gap: 18px; }
.au-fields[hidden] { display: none; }
.au-field { display: grid; gap: 7px; align-content: start; }
.au-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.au-input { position: relative; display: flex; align-items: center; height: 46px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line2); transition: border-color .15s, box-shadow .15s; }
.au-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.au-field.bad .au-input { border-color: var(--bad); }
.au-field.bad .au-hint { color: var(--bad); }
.au-field.good .au-hint { color: var(--ok); }
.au-input input, .au-input select { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0 14px; color: var(--text); font: inherit; font-size: 15px; border-radius: inherit; }
.au-input .select, .au-input .sel { flex: 1; border: 0; background: transparent; height: 100%; }
.au-in-ic { flex: none; margin-left: 14px; color: var(--dim); }
.au-in-ic + input, .au-prefix + input { padding-left: 10px; }
.au-input:focus-within .au-in-ic { color: var(--primary); }
.au-prefix { flex: none; margin-left: 14px; color: var(--dim); font-weight: 600; }
.au-eye { flex: none; width: 40px; height: 40px; margin-right: 3px; border: 0; background: transparent; color: var(--dim); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.au-eye:hover { color: var(--text); background: var(--hover); }
.au-hint { color: var(--dim); font-size: 12.5px; }
.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: -1px; }
.au-meter i { height: 4px; border-radius: 4px; background: var(--line); transition: background .2s; }
.au-meter[data-s="1"] i:nth-child(-n+1) { background: var(--bad); }
.au-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.au-meter[data-s="3"] i:nth-child(-n+3) { background: #8fd14f; }
.au-meter[data-s="4"] i { background: var(--ok); }
.au-field .au-meter { order: 3; }
.au-field .au-hint { order: 4; }
.au-fields > .btn { margin-top: 6px; }
.au-alt { margin: 4px 0 0; text-align: center; color: var(--dim); font-size: 13.5px; }
.au-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.au-steps > i { flex: 1; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.au-steps > i::after { content: ''; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease, ease); }
.au-steps.two > i::after { transform: scaleX(1); }
.au-step { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-weight: 600; font-size: 14px; }
.au-step b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; border: 1.5px solid var(--line2); color: var(--muted); transition: all .2s; }
.au-step.on { color: var(--text); }
.au-step.on b { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.au-note { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: var(--r); background: var(--raise); color: var(--muted); font-size: 13px; line-height: 1.5; }
.au-note svg { flex: none; margin-top: 2px; color: var(--primary); }
.au-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1.5; }
.au-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line2); background: var(--bg2); display: flex; align-items: center; justify-content: center; color: transparent; transition: all .15s; }
.au-check input:checked + .au-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.au-check input:focus-visible + .au-box { box-shadow: 0 0 0 3px var(--primary-soft); }
.au-row { display: flex; gap: 10px; margin-top: 6px; }
.au-row .btn.primary { flex: 1; }
.au-form .note { margin-bottom: 20px; }
.au-foot { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding-top: 10px; font-size: 13px; }
.au-foot a { color: var(--dim); }
.au-foot a:hover { color: var(--muted); }
@media (max-width: 1100px) { .au-card { display: none; } }
@media (max-width: 860px) {
  .au { grid-template-columns: 1fr; }
  .au-art { display: none; }
  .au-brand-m { display: inline-flex; }
  .au-main { padding: 18px 20px; background: radial-gradient(600px 300px at 50% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%); }
  .au-form { padding: 28px 0 36px; margin: 0 auto auto; }
  .au-top .muted.small { font-size: 13px; text-align: right; }
}
@media (max-width: 420px) { .au-grid { grid-template-columns: 1fr; } .au-form h1 { font-size: 26px; } }
.au-input .dd { flex: 1; height: 100%; }
.au-input .dd-btn { height: 100%; border: 0; background: transparent; box-shadow: none !important; font-weight: 450; font-size: 15px; border-radius: inherit; }
.au-art .logo-text .lt-b { color: #c9b8ff; }
.au-art .logo-text { color: #fff; }
@media (max-width: 620px) { .lp-hero-art { height: 470px; } .lp-card { width: 248px; } .lp-card2 { top: 56px; } .lp-hero { padding-bottom: 8px; } .lp-section { padding-top: 48px; } }

/* ---------- v4.5 downloads page ---------- */
#view.public:has(> .dlx) { padding: 0; max-width: none; }
.dlx { --lp-w: 1160px; }
.dlx > section, .dlx > .dlx-fine { max-width: var(--lp-w); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
.main #view > .dlx > section, .main #view > .dlx > .dlx-fine { padding-left: 0; padding-right: 0; }
.dlx-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.main .dlx-hero { padding-top: 24px; padding-bottom: 48px; }
.dlx-hero h1 { font-size: clamp(40px, 5.2vw, 62px); font-weight: 850; letter-spacing: -.04em; line-height: 1.02; margin-bottom: 18px; }
.dlx-eyebrow { color: var(--primary); background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }
.dlx-lead { font-size: 18px; color: var(--muted); line-height: 1.6; max-width: 32em; margin: 0 0 32px; }
.dlx-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.dlx-cta .btn.primary { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.dlx-cta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--dim); font-size: 13.5px; }
.dlx-cta-meta i { font-style: normal; opacity: .6; }
.dlx-cta-meta a { color: var(--muted); }
.dlx-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); max-width: 480px; }
.dlx-status > svg { flex: none; color: var(--primary); }
.dlx-status.ok > svg { color: var(--ok); }
.dlx-status.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.dlx-status.warn > svg { color: var(--warn); }
.dlx-status > div { flex: 1; display: grid; }
.dlx-status small { color: var(--muted); }

/* app window drawing */
.dlx-mock { position: relative; border-radius: 14px; background: #0c0b10; border: 1px solid var(--line2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255,255,255,.02), 0 0 120px -40px color-mix(in srgb, var(--primary) 60%, transparent); overflow: visible; }
.dlx-mock-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.dlx-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.dlx-mock-bar span { margin-left: 10px; font-size: 12px; color: var(--dim); font-weight: 600; }
.dlx-mock-body { display: grid; grid-template-columns: 50px 150px 1fr; height: 330px; }
.dlx-mock-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; border-right: 1px solid var(--line); }
.dlx-mock-rail i { width: 30px; height: 30px; border-radius: 10px; background: var(--raise); }
.dlx-mock-rail i.on { background: color-mix(in srgb, var(--accent2) 55%, var(--raise)); }
.dlx-mock-side { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; background: #121118; border-right: 1px solid var(--line); }
.dlx-mock-side b { width: 55%; height: 7px; border-radius: 4px; background: var(--line2); margin-top: 6px; }
.dlx-mock-side i { height: 22px; border-radius: 6px; background: transparent; position: relative; }
.dlx-mock-side i::before { content: ''; position: absolute; left: 8px; top: 8px; width: 60%; height: 6px; border-radius: 3px; background: var(--line); }
.dlx-mock-side i.on { background: var(--hover); }
.dlx-mock-side i.on::before { background: var(--muted); opacity: .6; }
.dlx-mock-side i.vc::after { content: ''; position: absolute; left: 8px; top: 30px; width: 70%; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.dlx-mock-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 16px 18px; }
.dlx-msg { display: flex; gap: 10px; align-items: flex-start; }
.dlx-msg > span { flex: none; width: 28px; height: 28px; border-radius: 50%; opacity: .85; }
.dlx-msg > div { flex: 1; display: grid; gap: 6px; }
.dlx-msg b { height: 7px; border-radius: 4px; background: var(--line2); }
.dlx-msg i { height: 8px; border-radius: 4px; background: var(--raise); }
.dlx-mock-input { height: 34px; border-radius: 9px; background: var(--raise); margin-top: 4px; }
.dlx-toast { position: absolute; right: -18px; bottom: -22px; display: flex; gap: 11px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 92%, #fff 4%); border: 1px solid var(--line2); box-shadow: 0 18px 40px -10px rgba(0,0,0,.7); animation: dlx-pop 4s var(--ease, ease) infinite; }
.dlx-toast > div { display: grid; line-height: 1.3; }
.dlx-toast strong { font-size: 13.5px; }
.dlx-toast small { color: var(--muted); font-size: 12.5px; }
@keyframes dlx-pop { 0%, 8% { opacity: 0; transform: translateY(10px); } 14%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dlx-toast { animation: none; } }

.dlx-section { padding-top: 56px; padding-bottom: 16px; scroll-margin-top: 80px; }
.dlx-head { margin-bottom: 28px; }
.dlx-head h2 { display: block; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 6px; }
.dlx-head p { color: var(--muted); margin: 0; }
.dlx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dlx-card { display: flex; flex-direction: column; padding: 22px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.dlx-card:hover { border-color: var(--line2); }
.dlx-card.mine { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--panel)), var(--panel)); }
.dlx-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.dlx-ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--raise); color: var(--text); }
.dlx-card h3 { font-size: 17px; margin: 0 0 4px; }
.dlx-card > p { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.dlx-card-foot { margin-top: auto; display: grid; gap: 12px; }
.dlx-card-foot .btn { width: 100%; justify-content: center; }
.dlx-card.soon .dlx-card-foot .btn { opacity: .55; }
.dlx-card-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--dim); }
.dlx-card-links a { color: var(--muted); }
.dlx-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; }
.dlx-notes { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 28px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.dlx-notes h2 { display: block; font-size: 20px; margin-bottom: 4px; }
.dlx-notes-side small { color: var(--dim); }
.dlx-notes .md { color: var(--muted); }
.dlx-notes .md strong { color: var(--text); }
.dlx-fine { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-size: 13px; margin-top: 56px !important; margin-bottom: 40px !important; text-align: center; }
.dlx-fine b { color: var(--muted); font-weight: 600; }
.dlx-howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dlx-howto li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.dlx-howto b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: 13px; }
@media (max-width: 1100px) { .dlx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dlx-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .dlx-mock { max-width: 560px; }
  .dlx-notes { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 620px) {
  .dlx > section, .dlx > .dlx-fine { padding-left: 18px; padding-right: 18px; }
  .dlx-hero { padding-top: 28px; }
  .dlx-cta-row .btn { flex: 1; justify-content: center; }
  .dlx-mock-body { grid-template-columns: 40px 1fr; height: 250px; }
  .dlx-mock-side { display: none; }
  .dlx-toast { right: 8px; bottom: -18px; }
  .dlx-grid, .dlx-feats { grid-template-columns: 1fr; }
  .dlx-feats { gap: 28px; }
}
.main .dlx-toast { right: 14px; }

/* v4.5.2: long bios/descriptions never push the page sideways */
.profile-cols, .group-cols { grid-template-columns: minmax(0, 1fr) 320px; }
.profile, .profile-cols > *, .group-cols > * { min-width: 0; }
.prose, .md, .limits p { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.prose img, .md img { max-width: 100%; height: auto; }
@media (max-width: 900px) { .profile-cols, .group-cols { grid-template-columns: minmax(0, 1fr); } }

/* v4.5.3: older Chromium (Electron 33) doesn't stretch flex children of <button>; size them explicitly */
.theme-sw { align-items: stretch; }
.theme-sw > .ts-prev, .theme-sw > .ts-foot { width: 100%; align-self: stretch; box-sizing: border-box; }
.ts-rail { flex: 0 0 14%; } .ts-side { flex: 0 0 26%; } .ts-main { flex: 1 1 0; min-width: 0; }

/* ===================== v4.6: Plus, boosts, shop, requests, safety ===================== */
:root { --plus: #c9a0ff; --plus2: #ff8fd0; --plus-soft: color-mix(in srgb, var(--plus) 14%, transparent); }
.plus-ic { display: inline-flex; color: var(--plus); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--plus) 50%, transparent)); }
.plus-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
  color: #1a1024; background: linear-gradient(100deg, var(--plus), var(--plus2)); }
.opt, .frame-opt, .deco-opt, .tpl { position: relative; }
.opt-plus { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1a1024; background: linear-gradient(135deg, var(--plus), var(--plus2)); box-shadow: 0 2px 6px rgba(0,0,0,.35); font-style: normal; }
.tpl .opt-plus { position: static; display: inline-flex; margin-left: 6px; vertical-align: -3px; }
.opt.locked, .frame-opt.locked, .deco-opt.locked { opacity: .78; }
.plus-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--plus-soft); border: 1px solid color-mix(in srgb, var(--plus) 30%, transparent); color: var(--muted); font-size: 13px; line-height: 1.5; }
.plus-note:hover { text-decoration: none; border-color: var(--plus); }
.plus-note svg { color: var(--plus); flex: none; margin-top: 2px; }
.plus-note strong { color: var(--text); }
.nav-plus svg { color: var(--plus); }
.nav-plus:not(.has) .nav-l { background: linear-gradient(100deg, var(--plus), var(--plus2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 650; }
.pc-travel { color: var(--acc, #8fdcf0); }
.pc-boost { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; background: linear-gradient(135deg, #ffb347, #ff6b9a); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.link-btn { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px; }
.link-btn:hover { color: var(--text); }
.link-row { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.link-row:hover { color: var(--text); text-decoration: none; }
.link-row > svg:last-child { margin-left: auto; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bad-text { color: var(--bad); }

/* theme song */
.song-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px !important; }
.song-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1a1024; background: linear-gradient(135deg, var(--plus), var(--plus2)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--plus) 70%, transparent); }
.song-play svg { fill: currentColor; stroke: none; }
.song-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.song-top strong { display: inline-flex; align-items: center; gap: 6px; }
.song-track { display: block; height: 6px; border-radius: 6px; background: var(--raise); cursor: pointer; overflow: hidden; }
.song-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--plus), var(--plus2)); }
.edit-extras { align-items: start; }
.edit-extras .song-card { margin: 10px 0; border: 1px solid var(--line); background: var(--bg2); }

/* message requests */
.conv-folders { display: flex; gap: 4px; padding: 0 10px 8px; }
.conv-folders[hidden] { display: none; }
.conv-folder { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.conv-folder:hover { background: var(--hover); color: var(--text); }
.conv-folder.on { background: var(--sel); color: var(--text); }
.conv-folder .count { position: static; }
.req-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 14px 0; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--primary-soft); }
.req-bar strong { display: block; }
.req-bar small { color: var(--muted); }

/* checkout */
.order-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--raise); margin-bottom: 14px; }
.order-sum > div { flex: 1; }
.order-amt { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.order-code-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.order-code { font: 700 18px var(--mono); letter-spacing: .06em; padding: 6px 12px; border-radius: 8px; background: var(--bg2); border: 1px dashed var(--line2); }
.order-howto { padding: 12px 14px; border-left: 3px solid var(--plus); background: var(--plus-soft); border-radius: 0 var(--r) var(--r) 0; margin-bottom: 10px; }
.order-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.order-row:first-of-type { border-top: 0; }

/* boost dialog */
.boost-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.boost-hero p { margin: 4px 0 0; }
.boost-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #ffb347, #ff6b9a); }
.boost-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: var(--raise); }

/* Plus page */
.plus-page { max-width: 1040px; margin: 0 auto; }
.plus-hero { text-align: center; padding: 20px 0 34px; }
.plus-mark { display: inline-flex; width: 68px; height: 68px; border-radius: 22px; align-items: center; justify-content: center; color: #1a1024; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--plus), var(--plus2)); box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--plus) 80%, transparent); }
.plus-mark.safe { color: #fff; background: linear-gradient(135deg, #3ccf8e, #2a9ec9); box-shadow: 0 18px 50px -14px rgba(60, 207, 142, .6); }
.plus-hero h1 { display: block; font-size: clamp(34px, 4.6vw, 52px); font-weight: 850; letter-spacing: -.035em; margin-bottom: 12px; }
.plus-hero .lead { max-width: 34em; margin: 0 auto; font-size: 17px; }
.plus-status { display: flex; align-items: center; gap: 14px; text-align: left; max-width: 560px; margin: 24px auto 0; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--plus) 45%, var(--line)); background: var(--plus-soft); }
.plus-status > svg { color: var(--plus); flex: none; }
.plus-status small { display: block; color: var(--muted); }
.plus-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; margin: 10px 0 40px; }
.plus-perk { display: flex; gap: 14px; align-items: flex-start; }
.plus-perk strong { display: block; margin-bottom: 3px; }
.plus-perk p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.pk-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--plus); background: var(--plus-soft); border: 1px solid color-mix(in srgb, var(--plus) 25%, transparent); }
.plus-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 680px; margin: 0 auto 36px; }
.plus-price { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 24px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.plus-price.hl { border-color: color-mix(in srgb, var(--plus) 60%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--plus) 10%, var(--panel)), var(--panel)); }
.plus-price h3 { justify-content: center; margin: 0; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.pp-amt { font-size: 38px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; }
.plus-price .btn { margin-top: 12px; width: 100%; justify-content: center; }
.plus-price.hl .btn.primary { background: linear-gradient(100deg, var(--plus), var(--plus2)); color: #1a1024; border: 0; }
.plus-save { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #1a1024; background: linear-gradient(100deg, var(--plus), var(--plus2)); white-space: nowrap; }
.plus-tools { align-items: stretch; }
.plus-tools .card { margin-bottom: 0; }
.slot-list { display: grid; gap: 8px; margin-bottom: 12px; }
.slot-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.slot-row.off { opacity: .6; }
.slot-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #ffb347; background: color-mix(in srgb, #ffb347 14%, transparent); }
.shop-link { color: var(--text); }
.shop-link:hover { text-decoration: none; border-color: var(--line2); }
.pick-list { display: grid; gap: 6px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.pick-row:hover { border-color: var(--primary); }
@media (max-width: 860px) { .plus-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plus-perks, .plus-prices { grid-template-columns: 1fr; } }

/* server boosts */
.lvl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; font-weight: 750; font-size: 14px; color: var(--muted); background: var(--raise); }
.lvl-badge.sm { padding: 2px 9px 2px 6px; font-size: 12.5px; }
.lvl-badge.l1 { color: #1a1024; background: linear-gradient(100deg, #9fd3ff, #c9a0ff); }
.lvl-badge.l2 { color: #1a1024; background: linear-gradient(100deg, #c9a0ff, #ff8fd0); }
.lvl-badge.l3 { color: #1a1024; background: linear-gradient(100deg, #ffd479, #ff9a3c); }
.lvl-dot { flex: none; display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; color: #1a1024; background: linear-gradient(135deg, #9fd3ff, #c9a0ff); }
.lvl-dot.l2 { background: linear-gradient(135deg, #c9a0ff, #ff8fd0); }
.lvl-dot.l3 { background: linear-gradient(135deg, #ffd479, #ff9a3c); }
.boost-lvl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.boost-bar { position: relative; height: 10px; border-radius: 10px; background: var(--raise); margin-bottom: 18px; overflow: visible; }
.boost-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9fd3ff, #c9a0ff, #ff8fd0); transition: width .4s; }
.boost-bar > i { position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px; background: var(--line2); transform: translateX(-1px); }
.boost-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.lvl-card { margin-bottom: 0 !important; }
.lvl-card h3 { justify-content: space-between; }
.lvl-card.got { border-color: color-mix(in srgb, var(--plus) 40%, var(--line)); }
.perk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.perk-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); }
.lvl-card.got .perk-list li { color: var(--text); }
.perk-list svg { flex: none; margin-top: 3px; }
.lvl-card.got .perk-list svg { color: var(--ok); }
.vanity-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vanity-row input { flex: 1; min-width: 140px; }
@media (max-width: 860px) { .boost-levels { grid-template-columns: 1fr; } }
.ss-chip.locked { opacity: .6; }
.ss-chip.locked small { display: inline-flex; align-items: center; gap: 3px; color: var(--plus); }

/* templates */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tpl:hover { border-color: var(--line2); }
.tpl.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tpl.locked { opacity: .7; }
.tpl strong { font-size: 14px; }
.tpl small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.tpl .tpl-meta { color: var(--dim); margin-top: 3px; }
.tpl-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-soft); margin-bottom: 6px; }

/* shop */
.shop-cats { margin-bottom: 16px; flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.shop-item { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.shop-item.owned { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.shop-prev { position: relative; display: flex; justify-content: center; align-items: center; height: 130px; margin: -4px -4px 8px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, var(--raise), var(--bg2)); }
.shop-prev .pill { position: absolute; top: 8px; right: 8px; }
.shop-artist { font-size: 12.5px; color: var(--muted); }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.monthly-banner { display: flex; align-items: center; gap: 16px; border-color: color-mix(in srgb, var(--plus) 40%, var(--line)); background: linear-gradient(100deg, var(--plus-soft), var(--panel) 60%); }
.monthly-deco .row { margin-bottom: 12px; }
.deco-shoplink { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--raise); color: var(--muted); font-size: 13.5px; }
.deco-shoplink:hover { text-decoration: none; color: var(--text); }
.deco-shoplink > svg:last-child { margin-left: auto; }
.deco-opt .plus-chip { font-size: 10px; }
.art-list { display: grid; gap: 4px; }
.art-item { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-top: 1px solid var(--line); }
.art-item:first-child { border-top: 0; }
.review-list { display: grid; gap: 10px; }
.review-item { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }

/* Safety Center */
.safety-in { max-width: 1080px; margin: 0 auto; }
.lp .safety-in { padding: 0 32px 40px; }
.safety-hero { text-align: center; padding: 24px 0 30px; }
.safety-hero h1 { display: block; font-size: clamp(32px, 4.4vw, 48px); font-weight: 850; letter-spacing: -.035em; margin-bottom: 12px; }
.safety-hero .lead { max-width: 36em; margin: 0 auto; font-size: 17px; }
.safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.safe-sec { margin-bottom: 0 !important; }
.safe-sec h3 svg { color: var(--ok); }
.safe-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.safe-list li::marker { color: var(--ok); }
.safe-help { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
#view.public:has(> .safety.lp) { padding: 0; max-width: none; }
@media (max-width: 760px) { .safety-grid { grid-template-columns: 1fr; } .lp .safety-in { padding: 0 18px 30px; } }
.plus-tools { row-gap: 16px; margin-bottom: 24px; }
.slot-empty { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r); background: var(--bg2); color: var(--muted); font-size: 13.5px; }
.slot-empty svg { color: #ffb347; flex: none; margin-top: 1px; }
.tbl td code { white-space: nowrap; }
/* v4.6.1 Stripe */
.pp-alt { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.plus-status.sub > svg { color: var(--ok); }
.plus-status.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.plus-status.warn > svg { color: var(--warn); }
.plus-status + .plus-status { margin-top: 10px; }
.plus-portal { display: flex; justify-content: center; margin-top: 12px; }
.setup-steps { margin: 14px 0 18px; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.setup-steps strong { color: var(--text); }
.setup-steps li::marker { color: var(--primary); font-weight: 700; }
.copy-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.copy-row code { padding: 6px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); word-break: break-all; }
.ev-list { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 4px 6px 4px 0; }
.ev-list code { font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--raise); color: var(--text); }
.stripe-card h3 .pill { margin-left: 4px; }
/* v4.7 automatic verification */
.verify-auto { text-align: center; padding: 34px 28px !important; }
.verify-auto h2 { display: block; font-size: 22px; margin-bottom: 8px; }
.verify-auto > p { max-width: 30em; margin: 0 auto 18px; }
.verify-auto .note { text-align: left; max-width: 520px; margin: 0 auto 16px; }
.va-ic { display: inline-flex; width: 60px; height: 60px; border-radius: 18px; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; background: linear-gradient(135deg, #3ccf8e, #2a9ec9); box-shadow: 0 14px 40px -12px rgba(60, 207, 142, .6); }
.va-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 22px 0 0; padding: 0; color: var(--muted); font-size: 13.5px; }
.va-points li { display: inline-flex; align-items: center; gap: 7px; }
.va-points svg { color: var(--ok); flex: none; }
.verify-manual { margin-top: 6px; }
.verify-manual > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); font-weight: 600; margin-bottom: 14px; }
.verify-manual > summary::-webkit-details-marker { display: none; }
.verify-manual > summary small { margin-left: auto; font-weight: 400; }
.didit-card > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.didit-card > summary::-webkit-details-marker { display: none; }
.didit-card > summary svg { color: var(--ok); }
.didit-card[open] > summary { margin-bottom: 8px; }
.vcard.auto { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.verify-auto h2 { border: 0 !important; padding-bottom: 0 !important; justify-content: center; }
/* v4.7.1: card name row: never squash the name; badges + staff tag wrap underneath when tight */
.pcard .pc-name { flex-wrap: wrap; row-gap: 6px; }
.pcard .pc-name .dn { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.pcard .pc-name .name-badges { flex-wrap: wrap; }
.pcard .role-chip { gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; border: 0; font: 800 10.5px var(--font); text-transform: uppercase; letter-spacing: .05em; line-height: 1.5; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pcard .role-chip .ic { --ic: 11px; }
.pcard .role-chip.admin { background: var(--accent); color: #fff; }
.pcard .role-chip.owner { background: var(--warn); color: #1c1300; }
.pcard .role-chip.mod { background: var(--accent2); color: #fff; }
.dob-edit { display: inline-flex; align-items: center; gap: 6px; }

/* ===================== v4.8 Discover ===================== */
.dx { max-width: 1320px; margin: 0 auto; }
.dx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dx-head h1 { font-size: 30px; font-weight: 850; letter-spacing: -.03em; margin: 0 0 4px; }
.dx-sub { margin: 0; color: var(--muted); font-size: 14.5px; }
.dx-sub strong { color: var(--text); font-weight: 650; }
.dx-on { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; }
.dx-on i, .dx-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); display: inline-block; }
.dx-live { margin-right: 8px; animation: dx-pulse 2s ease-in-out infinite; }
@keyframes dx-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); } }
.dx-head-act { display: flex; gap: 8px; }

/* online now rail */
.dx-rail { margin-bottom: 20px; padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.dx-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dx-rail-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; }
.dx-rail-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.dx-face { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px; border-radius: 12px; color: var(--text); font-size: 12.5px; font-weight: 600; text-align: center; }
.dx-face:hover { background: var(--hover); text-decoration: none; }
.dx-face > span.clamp1 { max-width: 100%; }
.dx-face small { color: var(--plus); font-size: 11px; font-weight: 700; margin-top: -3px; }

/* toolbar */
.dx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.dx-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); transition: border-color .15s, box-shadow .15s; cursor: text; }
.dx-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dx-search svg { color: var(--dim); flex: none; }
.dx-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0; color: var(--text); font: inherit; font-size: 15px; }
.dx-sort { display: flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); }
.dx-sort-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px var(--font); cursor: pointer; }
.dx-sort-btn:hover { color: var(--text); }
.dx-sort-btn.on { background: var(--primary); color: var(--on-primary); }
.dx-filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.dx-filter-btn:hover { border-color: var(--primary); }
.dx-filter-btn.on { border-color: var(--primary); background: var(--primary-soft); }
.dx-fcount:empty { display: none; }
.dx-fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.dx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 20px; }
.dx-quick, .dx-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-active:empty { display: none; }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 550 13px var(--font); cursor: pointer; transition: all .12s; }
.dx-chip:hover { color: var(--text); border-color: var(--line2); }
.dx-chip.on { color: var(--text); background: var(--sel); border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.dx-chip.on svg { color: var(--primary); }
.dx-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--raise); font-size: 13px; }
.dx-tag button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dx-tag button:hover { background: var(--hover); color: var(--text); }

/* grid + tile */
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.dx-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--c1, #14121a) 35%, var(--panel)); border: 1px solid color-mix(in srgb, var(--acc, #fff) 14%, var(--line)); transition: transform .18s var(--ease, ease), box-shadow .18s, border-color .18s; }
.dx-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--acc, #fff) 30%, transparent); }
.dx-media { position: relative; display: block; height: 128px; background: var(--grad); background-size: cover; background-position: center; overflow: hidden; }
.dx-card.animated .dx-media { background-size: 200% 200%; animation: gradshift 12s ease infinite; }
.dx-media:hover { text-decoration: none; }
.dx-media .pc-deco { opacity: .9; }
.dx-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); pointer-events: none; }
.dx-top { position: absolute; inset: 10px 10px auto 10px; display: flex; justify-content: space-between; align-items: center; z-index: 2; gap: 6px; }
.dx-badges { display: flex; gap: 6px; align-items: center; }
.dx-match, .dx-live-pill, .dx-seen { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(10, 8, 16, .55); backdrop-filter: blur(8px); }
.dx-match.hi { background: linear-gradient(100deg, rgba(201, 160, 255, .9), rgba(255, 143, 208, .9)); color: #1a1024; }
.dx-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.dx-seen { font-weight: 600; color: rgba(255, 255, 255, .8); }
.dx-boost { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #ffb347, #ff6b9a); }
.dx-av { position: absolute; left: 14px; bottom: -34px; z-index: 3; }
.dx-media { overflow: visible; }
.dx-media > .pc-deco, .dx-media > .pc-effect { border-radius: 18px 18px 0 0; overflow: hidden; }
.dx-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 42px 16px 4px; min-width: 0; }
.dx-name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--txt, var(--text)); min-width: 0; }
.dx-name:hover { text-decoration: none; }
.dx-name > .clamp1 { min-width: 0; }
.dx-facts { font-size: 13px; color: var(--muted); }
.dx-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--muted); }
.dx-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.dx-meta svg { color: var(--acc, var(--primary)); flex: none; }
.dx-place.travel { color: var(--acc, var(--primary)); font-weight: 600; }
.dx-headline { margin: 6px 0 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.dx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 54px; overflow: hidden; }
.dx-t { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .07); color: var(--text); }
.dx-t.shared { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.dx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 14px; margin-top: 6px; }
.dx-foot .like-btns { gap: 8px; }
.dx-view { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dx-view:hover { color: var(--text); text-decoration: none; }
.dx-card.passed { opacity: .5; }
.dx-card.passed:hover { opacity: .85; }
.dx-card.liked { border-color: color-mix(in srgb, #ff5c8a 55%, var(--line)); }
/* skeleton */
.dx-card.skel { pointer-events: none; min-height: 340px; background: var(--panel); border-color: var(--line); }
.dx-card.skel .dx-media { background: var(--raise); }
.dx-card.skel .dx-body i { display: block; height: 12px; border-radius: 6px; background: var(--raise); margin-top: 8px; }
.dx-card.skel .dx-body i:nth-child(1) { width: 55%; height: 16px; }
.dx-card.skel .dx-body i:nth-child(2) { width: 75%; }
.dx-card.skel .dx-body i:nth-child(3) { width: 40%; }
.dx-card.skel .dx-media, .dx-card.skel .dx-body i { animation: dx-shimmer 1.3s ease-in-out infinite; }
@keyframes dx-shimmer { 50% { opacity: .5; } }
.dx-sentinel { display: flex; justify-content: center; padding: 24px 0; min-height: 40px; }
.dx-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.dx-empty h3 { color: var(--text); margin: 6px 0 0; }
.dx-empty p { margin: 0 0 10px; }
@media (max-width: 700px) {
  .dx-head h1 { font-size: 26px; }
  .dx-bar { gap: 8px; }
  .dx-search { flex-basis: 100%; }
  .dx-sort { flex: 1; }
  .dx-sort-btn { flex: 1; justify-content: center; padding: 0 8px; }
  .dx-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dx-media { height: 92px; }
  .dx-av { left: 10px; bottom: -26px; }
  .dx-av .avatar, .dx-av .av-frame, .dx-av .av-deco { --s: 60px !important; }
  .dx-body { padding: 32px 11px 2px; }
  .dx-name { font-size: 15.5px; }
  .dx-facts, .dx-meta { font-size: 12px; }
  .dx-headline { font-size: 13px; }
  .dx-tags .dx-t:nth-child(n+4) { display: none; }
  .dx-foot { padding: 10px; }
  .dx-view { display: none; }
  .dx-foot .like-btns { width: 100%; justify-content: center; }
  .dx-match { font-size: 10.5px; padding: 0 7px; }
  .dx-seen { display: none; }
}
.dx-sort-btn, .dx-match, .dx-chip, .dx-live-pill { white-space: nowrap; }
@media (max-width: 700px) {
  .dx-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .dx-filters::-webkit-scrollbar { display: none; }
  .dx-quick, .dx-active { flex-wrap: nowrap; }
  .dx-rail { padding: 12px 10px 8px; }
  .dx-face { width: 68px; }
}

/* ===================== v4.8 Friends ===================== */
.fr { max-width: 1280px; margin: 0 auto; }
.fr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.fr-head h1 { font-size: 30px; font-weight: 850; letter-spacing: -.03em; margin: 0 0 4px; }
.fr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.fr-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 14px; }
.fr-tab:hover { color: var(--text); border-color: var(--line2); text-decoration: none; }
.fr-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fr-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--raise); color: var(--text); }
.fr-tab.on .fr-n { background: rgba(255, 255, 255, .22); color: inherit; }
.fr-tab.alert:not(.on) .fr-n { background: var(--bad); color: #fff; }
.fr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.fr-search { margin-bottom: 16px; max-width: 420px; height: 40px; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fr-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: transform .16s var(--ease, ease), border-color .16s, box-shadow .16s; }
.fr-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc, var(--primary)) 45%, var(--line)); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); }
.fr-tile.off .fr-strip { filter: saturate(.45) brightness(.8); }
.fr-strip { align-self: stretch; height: 62px; margin: 0 -16px; }
.fr-av { margin-top: -34px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; box-shadow: 0 0 0 4px var(--panel); }
.fr-who { margin-top: 10px; min-width: 0; max-width: 100%; display: grid; gap: 1px; }
.fr-name { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--text); font-size: 16px; min-width: 0; }
.fr-name:hover { text-decoration: none; }
.fr-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 10px; padding: 4px 11px; border-radius: 999px; background: var(--raise); color: var(--muted); font-size: 12.5px; min-height: 26px; }
.fr-status.p-online { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.fr-status.p-idle { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.fr-status.p-dnd { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.fr-since { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
.fr-since svg { color: var(--acc, #ff8fab); }
.fr-btns { display: flex; gap: 6px; width: 100%; margin-top: 14px; }
.fr-btns .btn { flex: 1; justify-content: center; }
.fr-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.fr-section { margin-bottom: 26px; }
.fr-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fr-reqs { display: grid; gap: 10px; }
.fr-req { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(100deg, var(--primary-soft), var(--panel) 55%); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); }
.fr-req-av, .fr-sugg-av { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.fr-sents { display: grid; gap: 2px; }
.fr-sent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.fr-sent:hover { background: var(--hover); }
.fr-add-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 18px; margin-bottom: 26px; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 14%, var(--panel)), var(--panel) 60%); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); }
.fr-add-card h3 { margin: 0 0 4px; font-size: 18px; }
.fr-add-card p { margin: 0 0 14px; color: var(--muted); }
.fr-add-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); }
.fr-add { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); }
.fr-add:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fr-at { color: var(--dim); font-weight: 700; }
.fr-add input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0; height: 38px; font-size: 15px; color: var(--text); }
.fr-add .btn { border-radius: 999px; }
.fr-sugg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.fr-sugg-grid .fr-sugg { background: var(--panel); border: 1px solid var(--line); }
.fr-sugg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; min-width: 0; }
.fr-sugg .grow { min-width: 0; }
.fr-side { display: grid; gap: 16px; position: sticky; top: 20px; }
.fr-panel { padding: 16px !important; margin: 0 !important; }
.fr-panel h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 14px; }
.fr-panel h4 .fr-n { margin-left: auto; }
.fr-mini-list, .fr-sugg-list { display: grid; gap: 2px; margin: 0 -8px; }
.fr-mini { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); min-width: 0; }
.fr-mini:hover { background: var(--hover); text-decoration: none; }
.fr-mini .grow { min-width: 0; }
.fr-mini-ic { color: var(--dim); opacity: 0; transition: opacity .12s; }
.fr-mini:hover .fr-mini-ic { opacity: 1; }
.fr-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 18px; }
.fr-empty h3 { color: var(--text); margin: 6px 0 0; }
.fr-empty p { margin: 0 0 12px; max-width: 30em; }
@media (max-width: 1000px) { .fr-layout { grid-template-columns: 1fr; } .fr-side { position: static; order: -1; } .fr-side .fr-panel:nth-child(2) { display: none; } }
@media (max-width: 600px) {
  .fr-head h1 { font-size: 26px; }
  .fr-head .btn { display: none; }
  .fr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 18px; padding: 0 16px; }
  .fr-tab { flex: none; height: 34px; padding: 0 13px; }
  .fr-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fr-tile { padding: 0 10px 12px; }
  .fr-strip { height: 46px; margin: 0 -10px; }
  .fr-btns .btn span { display: none; }
  .fr-req { flex-wrap: wrap; }
  .fr-add-card { flex-direction: column; padding: 16px; }
  .fr-side .fr-mini-list { display: flex; overflow-x: auto; gap: 4px; }
  .fr-side .fr-mini { flex-direction: column; width: 72px; flex: none; text-align: center; }
  .fr-side .fr-mini small, .fr-side .fr-mini-ic { display: none; }
}
.fr-req .grow > small { display: block; margin-top: 2px; }
.fr-req .fr-name { justify-content: flex-start; }
.fr-panel h4 { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 14.5px; }

/* v4.8.2 Likes */
.dx-note { display: flex; align-items: center; gap: 6px; padding: 0 16px; margin-top: 6px; font-size: 12px; color: var(--dim); }
.dx-note svg { color: #ff8fab; }
.dx-card.match { border-color: color-mix(in srgb, #ff8fab 40%, var(--line)); }
.dx-foot .grow-btn { flex: 1; justify-content: center; }
.dx-wait { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lk-rail .dx-rail-head h3 { gap: 6px; }
.lk-rail .dx-rail-head h3 svg { color: #ff8fab; }
.lk-ring { display: inline-flex; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #ff8fab, #c9a0ff); }
.lk-ring .avatar { box-shadow: 0 0 0 3px var(--panel); }
.lk-rail .dx-face small { color: #ff8fab; }
.lk-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--r-lg); background: linear-gradient(100deg, color-mix(in srgb, #ff8fab 14%, var(--panel)), var(--panel) 70%); border: 1px solid color-mix(in srgb, #ff8fab 30%, var(--line)); }
.lk-intro svg { color: #ff8fab; flex: none; }
.lk-new { color: #ff8fab; font-weight: 600; }
.fr-tab svg { opacity: .8; }
.dx > .fr-tabs { margin-bottom: 18px; }

/* ===================== v4.8.3 Messages ===================== */
.dm-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dm-body.panel { grid-template-columns: minmax(0, 1fr) 320px; }
.dm-body > :first-child { min-height: 0; display: flex; flex-direction: column; }
.dm-panel { display: none; }
.dm-body.panel .dm-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel); }
.dm-panel-btn.on { color: var(--primary); background: var(--primary-soft); }
.dmp-banner { flex: none; height: 110px; background-size: cover; }
.dmp-av { margin: -46px 0 0 18px; position: relative; width: fit-content; border-radius: 50%; box-shadow: 0 0 0 5px var(--panel); }
.dmp-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 22px; }
.dmp-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.dmp-status { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--raise); font-size: 13.5px; }
.dmp-rel { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #ff8fab; background: color-mix(in srgb, #ff8fab 14%, transparent); }
.dmp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.dmp-meta span { display: inline-flex; align-items: center; gap: 5px; }
.dmp-meta svg { color: var(--primary); }
.dmp-headline { margin: 4px 0 0; font-size: 14px; }
.dmp-body section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.dmp-body h5 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.dmp-bio { font-size: 13.5px; max-height: 220px; overflow: hidden; mask-image: linear-gradient(180deg, #000 80%, transparent); }
.dmp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dmp-body > .btn { margin-top: 14px; }
@media (max-width: 1200px) { .dm-body.panel { grid-template-columns: minmax(0, 1fr); } .dm-body.panel .dm-panel, .dm-panel-btn { display: none; } }

/* conversation list */
.conv-list { padding: 4px 10px 16px; }
.conv { position: relative; gap: 12px; padding: 10px 12px; border-radius: 12px; margin-bottom: 2px; transition: background .12s; }
.conv .avatar { --s: 44px !important; }
.conv.on { background: var(--sel); }
.conv.on::before { content: ''; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.conv-top strong { font-size: 14.5px; }
.conv-top small { font-size: 11.5px; color: var(--dim); }
.conv.unread .conv-top small { color: var(--primary); font-weight: 700; }
.conv-last { font-size: 13px; margin-top: 1px; }
.conv > .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.conv-head { display: flex; align-items: center; gap: 4px; padding: 18px 16px 12px; }
.conv-head h2 { flex: 1; font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.conv-searchbox { margin: 0 12px 10px; border-radius: 999px !important; }

/* chat header */
.pane-head { height: 62px; gap: 10px; }
.pane-user { padding: 4px 10px 4px 4px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.pane-user:hover { background: var(--hover); }
.pane-user strong { font-size: 15.5px; }
.pane-head .icon-btn { width: 38px; height: 38px; border-radius: 10px; }

/* message headers: compact staff tag, fewer icons */
.msg-head .role-chip { gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; border: 0; font: 800 10px var(--font); text-transform: uppercase; letter-spacing: .05em; line-height: 1.6; }
.msg-head .role-chip .ic { --ic: 10px; }
.msg-head .role-chip.owner { background: var(--warn); color: #1c1300; }
.msg-head .role-chip.admin { background: var(--accent); color: #fff; }
.msg-head .role-chip.mod { background: var(--accent2); color: #fff; }
.msg-head .flag-ic { width: 18px; height: 18px; border-radius: 5px; }
.msg-head .flag-ic .ic { --ic: 12px; }
.flag-more { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--raise); cursor: default; }

/* conversation intro */
.dm-intro { margin: 8px 16px 14px; padding: 22px !important; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc, var(--primary)) 14%, var(--panel)), var(--panel) 65%); border: 1px solid var(--line); }
.dm-intro h2 { font-size: 24px !important; }

/* ===================== v4.8.4 server chat polish ===================== */
/* member list */
.pp-head { display: flex; align-items: center; gap: 7px; margin: 16px 8px 6px !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pp-head:first-child { margin-top: 4px !important; }
.pp-head b { margin-left: auto; font-weight: 700; color: var(--dim); }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.person { transition: background .1s; }
.person .role-chip { gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; border: 0; font: 800 9.5px var(--font); text-transform: uppercase; letter-spacing: .05em; line-height: 1.6; flex: none; }
.person .role-chip .ic { --ic: 10px; }
.person .role-chip.owner { background: var(--warn); color: #1c1300; }
.person .role-chip.admin { background: var(--accent); color: #fff; }
.person .role-chip.mod { background: var(--accent2); color: #fff; }
.person .gold { color: var(--warn); flex: none; }
.person .bot-tag { flex: none; }
.person:not(:hover) .p-status { opacity: .85; }

/* channel sidebar */
.chan { position: relative; border-radius: 8px; padding: 7px 10px; transition: background .1s, color .1s; }
.chan.on { background: var(--sel); color: var(--text); }
.chan.on::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.chan.unread:not(.on) { color: var(--text); }
.chan.unread:not(.on)::before { content: ''; position: absolute; left: -8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 0 4px 4px 0; background: var(--text); }

/* chat header */
.chan-main .pane-head .topic { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* messages */
.msg { margin-top: 12px; }
.msg-head .msg-name { font-weight: 700; }
.msg-head .msg-time { font-size: 11.5px; color: var(--dim); }
.msg-reply { color: var(--dim); }
.msg-reply .avatar { --s: 16px !important; }

/* v4.9.0 favourite GIFs & stickers */
.xp-item { position: relative; }
.xp-item.gif { display: block; margin-bottom: 6px; break-inside: avoid; border-radius: 10px; overflow: hidden; background: var(--bg2); }
.xp-item.gif .xp-gif { margin: 0; height: 100%; aspect-ratio: auto !important; }
.xp-item .xp-sticker { width: 100%; }
.fav-star { position: absolute; top: 5px; right: 5px; z-index: 2; width: 28px; height: 28px; border-radius: 9px; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(10, 10, 16, .62); color: #fff; backdrop-filter: blur(4px); opacity: 0; transform: scale(.85); transition: opacity .12s, transform .12s, background .12s, color .12s; }
.xp-item:hover .fav-star, .fav-wrap:hover .fav-star, .fav-star:focus-visible, .fav-star.on { opacity: 1; transform: none; }
.fav-star:hover { background: rgba(10, 10, 16, .85); }
.fav-star.on { color: #ffc857; }
.fav-star.on svg { fill: currentColor; }
.fav-star.pop { animation: favpop .3s ease; }
@keyframes favpop { 40% { transform: scale(1.3); } }
.xp-item:not(:hover) .fav-star.on { opacity: .9; }
@media (hover: none) { .fav-star { opacity: 1; transform: none; } }
.xp-chip.fav { gap: 5px; }
.xp-chip.fav svg { color: #ffc857; }
.xp-chip.fav.on svg { color: currentColor; fill: currentColor; }
.xp-count { display: inline-block; min-width: 16px; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 99px; background: var(--hover); color: var(--muted); font: 750 10px var(--font); text-align: center; margin-left: 4px; }
.xp-chip.on .xp-count { background: rgba(255, 255, 255, .25); color: inherit; }
.xp-sec h5 { display: flex; align-items: center; gap: 5px; }
.xp-sec[data-sec="fav"] h5 svg { color: #ffc857; fill: currentColor; }
.xp-favtip { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 9px 11px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--line2); color: var(--muted); font-size: 12.5px; }
.xp-favtip svg { color: #ffc857; flex: none; }
.fav-wrap { position: relative; display: block; max-width: 100%; }
.fav-wrap.gif { margin-top: 4px; }
.fav-wrap.gif .chat-img.gif { width: 100% !important; height: 100%; margin: 0; }
.fav-wrap.sticker { display: inline-block; width: max-content; }
.fav-wrap.sticker .fav-star { top: 8px; right: 4px; }
.fav-wrap.gif { max-height: 360px; overflow: hidden; border-radius: var(--r); }

/* v4.9.1 card handle line: wrap under the @handle instead of squeezing into a column */
.pc-handle { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.pc-handle .pc-at { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-handle .pc-facts { white-space: nowrap; }
@media (max-width: 760px) {
  .pc-handle { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pc-handle .pc-sep { display: none; }
  .pc-handle .pc-facts { white-space: normal; }
}

/* v4.10.0 Groups browse */
.gx-page { max-width: 1240px; margin: 0 auto; }
.gx-rail { margin-bottom: 22px; }
.gx-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.gx-rail-head h2 { font-size: 15px; font-weight: 750; margin: 0; }
.gx-rail-head a { font-size: 13px; color: var(--muted); }
.gx-rail-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gx-mini { flex: none; display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 260px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text); position: relative; overflow: hidden; transition: border-color .12s, transform .12s; }
.gx-mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--g1), var(--g2)); }
.gx-mini:hover { text-decoration: none; border-color: color-mix(in srgb, var(--g2) 50%, var(--line)); transform: translateY(-1px); }
.gx-mini-t { display: grid; min-width: 0; }
.gx-mini-t strong { font-size: 14px; }
.gx-mini-t small { font-size: 12px; color: var(--muted); }
.gx-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.gx-tools .dx-search { max-width: none; }
.gx-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gx-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.gx-sort-b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 650 13px var(--font); cursor: pointer; }
.gx-sort-b:hover { color: var(--text); }
.gx-sort-b.on { background: var(--sel); color: var(--text); }
.gx-sort-b.on svg { color: var(--primary); }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gx-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; color: var(--text); transition: transform .16s ease, border-color .16s, box-shadow .16s; text-align: left; padding: 0; font: inherit; }
.gx-card:hover { text-decoration: none; color: var(--text); transform: translateY(-3px); border-color: color-mix(in srgb, var(--g2, var(--primary)) 55%, var(--line)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--g2, #000) 60%, #000); }
.gx-card.featured { border-color: color-mix(in srgb, #f0b429 45%, var(--line)); }
.gx-banner { position: relative; height: 128px; background-size: cover; background-position: center; }
.gx-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 38%, transparent 55%, var(--panel) 100%); }
.gx-card:hover .gx-banner { filter: brightness(1.06); }
.gx-flags { position: absolute; z-index: 1; top: 10px; right: 10px; display: flex; gap: 5px; }
.gx-flag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(10, 10, 16, .6); backdrop-filter: blur(6px); color: #fff; font: 700 11px var(--font); }
.gx-flag.gold { color: #ffd76a; }
.gx-flag.nsfw { background: #e5487a; }
.gx-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 18px 16px; }
.gx-ic { margin-top: -32px; margin-bottom: 10px; position: relative; z-index: 1; width: max-content; border-radius: 16px; box-shadow: 0 0 0 4px var(--panel), 0 8px 20px -8px rgba(0, 0, 0, .6); }
.gx-ic .gicon { display: block; }
.gx-name { font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.gx-desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; overflow-wrap: anywhere; }
.gx-people { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.gx-people b { color: var(--text); font-weight: 750; }
.gx-faces { display: flex; }
.gx-faces:empty { display: none; }
.gx-faces > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; }
.gx-faces > :first-child { margin-left: 0; }
.gx-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); min-height: 44px; }
.gx-act { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.gx-act.hot { color: #ff9a5c; }
.gx-role { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 12px var(--font); color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.gx-role.owner { color: #f0b429; background: color-mix(in srgb, #f0b429 14%, transparent); }
.gx-role.mod { color: #a98bff; background: color-mix(in srgb, #a98bff 14%, transparent); }
.gx-role.wait { color: var(--muted); background: var(--raise); }
.gx-join { height: 30px; }
.gx-new { align-items: center; justify-content: center; text-align: center; min-height: 300px; border: 1.5px dashed var(--line2); background: transparent; cursor: pointer; gap: 4px; padding: 24px; }
.gx-new:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.gx-new h3 { margin: 8px 0 0; font-size: 16px; }
.gx-new p { margin: 0; font-size: 13px; max-width: 200px; }
.gx-new-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--sel); color: var(--primary); }
.gx-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 20px; border: 1px dashed var(--line2); border-radius: 18px; gap: 6px; }
.gx-empty h3 { margin: 6px 0 0; }
.gx-empty p { margin: 0 0 10px; }
.gx-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--sel); color: var(--primary); }
@media (max-width: 760px) {
  .gx-grid { grid-template-columns: 1fr; gap: 12px; }
  .gx-banner { height: 110px; }
  .gx-chips .grow { display: none; }
  .gx-sort { width: 100%; }
  .gx-sort-b { flex: 1; justify-content: center; }
  .gx-new { min-height: 0; }
  .gx-mini { min-width: 180px; }
}

/* v4.11.0 staff panel */
.admin-shell { grid-template-columns: 236px minmax(0, 1fr); gap: 28px; max-width: 1400px; margin: 0 auto; }
.admin-nav { padding: 12px 10px; gap: 0; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
.an-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.an-head strong { display: block; font-size: 14.5px; }
.an-head small { font-size: 11.5px; color: var(--muted); }
.an-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent2, #ff6fb5)); color: #fff; flex: none; }
.an-sec { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.an-sec + .an-sec { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.an-label { padding: 4px 12px 4px; font: 750 10.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.anav { position: relative; padding: 8px 12px; font-size: 13.5px; }
.anav.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.anav .count { background: var(--bad); color: #fff; }
.ad-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ad-hero h1 { font-size: 28px; font-weight: 850; letter-spacing: -.03em; margin: 0 0 4px; }
.ad-hero p { margin: 0; }
.ad-hero-act { display: flex; gap: 8px; }
.ad-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ad-task { --tc: var(--primary); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--tc) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tc) 35%, var(--line)); color: var(--text); transition: transform .12s, border-color .12s; }
a.ad-task:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--tc); color: var(--text); }
.ad-task.bad { --tc: var(--bad); } .ad-task.warn { --tc: var(--warn); } .ad-task.ok { --tc: var(--ok); } .ad-task.info { --tc: var(--primary); }
.ad-task-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); flex: none; }
.ad-task strong { display: block; font-size: 14px; }
.ad-task small { display: block; font-size: 12.5px; color: var(--muted); }
.ad-task-n { min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; background: var(--tc); color: #fff; font: 800 13px var(--font); }
.ad-task > svg:last-child { color: var(--dim); }
.ad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.ad-kpi { --kc: var(--primary); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: transform .12s, border-color .12s; }
.ad-kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%); pointer-events: none; }
a.ad-kpi:hover { text-decoration: none; color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--kc) 45%, var(--line)); }
.ad-kpi.tone-blue { --kc: #5b8cff; } .ad-kpi.tone-green { --kc: #3ccf8e; } .ad-kpi.tone-pink { --kc: #ff6fb5; } .ad-kpi.tone-gold { --kc: #f0b429; }
.ad-kpi-top { display: flex; align-items: center; gap: 9px; }
.ad-kpi-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--kc) 16%, transparent); color: var(--kc); }
.ad-kpi-l { font-size: 13px; font-weight: 650; color: var(--muted); }
.ad-kpi-v { font-size: 32px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; }
.ad-kpi-sub { font-size: 12.5px; color: var(--dim); }
.ad-kpi-sub .up { color: var(--ok); } .ad-kpi-sub .down { color: var(--bad); }
.ad-minis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ad-mini { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.ad-mini b { color: var(--text); font-weight: 750; }
.ad-mini svg { color: var(--dim); }
a.ad-mini:hover { text-decoration: none; border-color: var(--line2); color: var(--text); }
.ad-mini.tone-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } .ad-mini.tone-warn svg { color: var(--warn); }
.ad-mini.tone-bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } .ad-mini.tone-bad svg { color: var(--bad); }
.ad-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.ad-cols > .card { margin: 0; }
.ad-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ad-card-head h3 { margin: 0 0 2px; font-size: 15.5px; }
.ad-card-head small { font-size: 12.5px; }
.ad-big { font-size: 28px; font-weight: 850; letter-spacing: -.03em; line-height: 1; text-align: right; }
.ad-big small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ad-bars { display: flex; align-items: stretch; gap: 6px; height: 180px; padding-top: 4px; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 25%; }
.ad-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.ad-bar-v { width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, #fff), color-mix(in srgb, var(--primary) 55%, transparent)); transition: filter .12s; }
.ad-bar:hover .ad-bar-v { filter: brightness(1.25); }
.ad-bar.today .ad-bar-v { background: linear-gradient(180deg, #ff8fc5, #ff6fb5); }
.ad-bar-n { font: 750 11px var(--font); color: var(--muted); min-height: 14px; }
.ad-bar small { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.ad-bar.today small { color: var(--text); font-weight: 700; }
.ad-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 16px; background: var(--bg2); }
.ad-stack span { display: block; height: 100%; min-width: 4px; }
.ad-legend { display: grid; gap: 10px; }
.ad-leg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ad-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ad-leg b { font-weight: 750; }
.ad-leg small { width: 40px; text-align: right; color: var(--dim); font-size: 12px; }
.ad-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.ad-ev { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ad-ev:first-child { border-top: 0; padding-top: 0; }
.ad-ev-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--raise); color: var(--muted); flex: none; }
.ad-ev-t { font-size: 13.5px; line-height: 1.4; }
.ad-ev-t a { color: var(--text); font-weight: 700; }
.ad-ev-d { display: block; margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--dim); background: none; padding: 0; }
.ad-ev-time { font-size: 12px; color: var(--dim); white-space: nowrap; padding-top: 2px; }
.ad-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px; color: var(--muted); }
@media (max-width: 1180px) { .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-cols { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { max-height: none; flex-direction: row; align-items: center; padding: 6px; }
  .an-head, .an-label { display: none; }
  .an-sec { flex-direction: row; padding: 0; }
  .an-sec + .an-sec { border-top: 0; border-left: 1px solid var(--line); padding-left: 4px; margin-left: 4px; }
  .anav.on::before { display: none; }
  .ad-hero h1 { font-size: 23px; }
  .ad-kpi-v { font-size: 26px; }
}
.ad-ev-d { font-family: var(--font); display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.ad-kv { display: inline-flex; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: var(--bg2); color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-kv i { font-style: normal; color: var(--dim); }
.an-sec { padding: 4px 0; }
.anav { padding: 7px 12px; }
.admin-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.admin-main .table-wrap { overflow-x: auto; }
.admin-main th { white-space: nowrap; }
.admin-main .page-head h1 { font-size: 26px; font-weight: 850; letter-spacing: -.025em; }
.admin-main > .card, .admin-main .card { border-radius: 18px; }

/* v4.11.0 developer portal home */
.dv-page { max-width: 1240px; margin: 0 auto; }
.dv-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 34px 36px; border-radius: 22px; margin-bottom: 18px;
  background: radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%), radial-gradient(500px 300px at 100% 100%, color-mix(in srgb, #ff6fb5 22%, transparent), transparent 70%), var(--panel); border: 1px solid var(--line); }
.dv-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: .35; mask-image: linear-gradient(90deg, #000, transparent 60%); pointer-events: none; }
.dv-hero > * { position: relative; }
.dv-eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font: 750 12px var(--font); }
.dv-hero h1 { font-size: 36px; font-weight: 850; letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 10px; }
.dv-hero p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 520px; }
.dv-hero-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.dv-term { border-radius: 14px; background: #0b0b12; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); overflow: hidden; min-width: 0; }
.dv-term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); }
.dv-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dv-term-bar i:nth-child(2) { background: #febc2e; } .dv-term-bar i:nth-child(3) { background: #28c840; }
.dv-term-bar span { flex: 1; text-align: center; font: 600 12px var(--mono, ui-monospace, monospace); color: #8a8aa0; }
.dv-term-copy { border: 0; background: none; color: #8a8aa0; cursor: pointer; padding: 2px; border-radius: 5px; display: grid; }
.dv-term-copy:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dv-term pre { margin: 0; padding: 16px 18px; font: 12.5px/1.7 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: #d7d7e6; overflow-x: auto; }
.tk-k { color: #c792ea; } .tk-s { color: #c3e88d; } .tk-f { color: #82aaff; } .tk-c { color: #697098; }
.ad-kpi.tone-bad { --kc: var(--bad); } .ad-kpi.tone-violet { --kc: #a98bff; }
.dv-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.dv-sec-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
.dv-start { border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.dv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-right: 1px solid var(--line); }
.dv-step:last-child { border-right: 0; }
.dv-step-n { position: absolute; top: 16px; right: 18px; font: 850 30px var(--font); color: var(--line2); line-height: 1; }
.dv-step-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sel); color: var(--primary); margin-bottom: 6px; }
.dv-step strong { font-size: 14.5px; }
.dv-step small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.dv-start-act { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.dv-start-act strong { display: block; font-size: 14.5px; }
.dv-start-act small { font-size: 12.5px; }
.dv-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.dv-res { --kc: var(--primary); display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: transform .12s, border-color .12s; }
.dv-res:hover { text-decoration: none; color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--kc) 45%, var(--line)); }
.dv-res.tone-blue { --kc: #5b8cff; } .dv-res.tone-pink { --kc: #ff6fb5; } .dv-res.tone-green { --kc: #3ccf8e; } .dv-res.tone-gold { --kc: #f0b429; } .dv-res.tone-violet { --kc: #a98bff; } .dv-res.tone-cyan { --kc: #3cc8e0; }
.dv-res-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--kc) 15%, transparent); color: var(--kc); flex: none; }
.dv-res strong { display: block; font-size: 14px; }
.dv-res small { display: block; font-size: 12.5px; color: var(--muted); }
.dv-res > svg:last-child { color: var(--dim); transition: transform .12s; }
.dv-res:hover > svg:last-child { transform: translateX(2px); color: var(--kc); }
.dapp { border-radius: 18px; padding: 18px; }
.dapp.new { gap: 6px; }
.dv-new-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sel); color: var(--primary); margin-bottom: 4px; }
@media (max-width: 1100px) { .dv-hero { grid-template-columns: 1fr; } .dv-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-step:nth-child(2) { border-right: 0; } .dv-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .dv-hero { padding: 24px 20px; } .dv-hero h1 { font-size: 28px; } .dv-resources, .dv-steps { grid-template-columns: 1fr; } .dv-step { border-right: 0; border-bottom: 1px solid var(--line); } .ad-kpis { grid-template-columns: 1fr 1fr; } }
/* dev console tiles + code blocks */
.stat-row .stat { border-radius: 18px; padding: 18px 20px; gap: 6px; position: relative; overflow: hidden; }
.stat-row .stat-top { text-transform: none; letter-spacing: 0; font-size: 13px; gap: 9px; }
.stat-row .stat-top svg { width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); box-sizing: border-box; flex: none; }
.stat-row .stat-val { font-size: 30px; font-weight: 850; margin-top: 2px; }
.stat-row .stat.warn .stat-top svg { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.code-wrap .md-pre { padding-top: 30px; }
.code-lang { top: 9px; left: 14px; right: auto; font-weight: 700; }
.dev-body .card, .ss-body.dev-body .card { border-radius: 18px; }
.stat-row .stat-top { align-items: center; display: flex; }

/* v4.11.0 profile editor */
.ep-page { max-width: 1320px; margin: 0 auto; padding-bottom: 70px; }
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ep-head h1 { font-size: 30px; font-weight: 850; letter-spacing: -.03em; margin: 0 0 4px; }
.ep-head p { margin: 0; }
.ep-head-act { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ep-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ep-main > .card { margin: 0; border-radius: 20px; scroll-margin-top: 20px; }
.ep-media { padding: 0 !important; overflow: hidden; }
.ep-media .media-edit { margin: 0; }
.ep-media .banner-edit { height: 210px; border-radius: 0; background-color: color-mix(in srgb, var(--primary) 70%, #000); background-image: linear-gradient(135deg, var(--primary), #ff6fb5); }
.ep-media .banner-edit[style*="url"] { background-color: var(--bg2); }
.ep-media .avatar-edit { padding: 0 24px 20px; }
.ep-sec { padding: 22px 24px 24px !important; }
.ep-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ep-sec-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.ep-sec-head p { margin: 2px 0 0; font-size: 13px; }
.ep-sec-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft, var(--sel)); color: var(--primary); flex: none; }
.ep-sec .grid2, .ep-sec .grid3 { gap: 0 14px; }
.ep-counted { position: relative; }
.ep-counted > input { padding-right: 76px; }
.ep-count { position: absolute; right: 10px; bottom: 9px; font: 600 11px var(--font); color: var(--dim); pointer-events: none; background: color-mix(in srgb, var(--bg2) 85%, transparent); padding: 1px 4px; border-radius: 4px; }
.ep-counted > textarea + .ep-count { bottom: 10px; }
.ep-count.near { color: var(--warn); }
.ep-sec .chips.selectable { gap: 7px; }
.ep-sec .chips.selectable .chip { height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; }
.ep-sec .chips.selectable .chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ep-sec .kink-legend { margin: 6px 0 8px; }
.ep-sec .kink-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ep-side { position: sticky; top: 18px; }
.ep-side-in { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 36px); overflow-y: auto; scrollbar-width: none; padding-bottom: 4px; }
.ep-side-in::-webkit-scrollbar { display: none; }
.ep-side-label { display: inline-flex; align-items: center; gap: 6px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.ep-preview { pointer-events: none; }
.ep-preview > * { margin: 0; }
.ep-side-card { margin: 0; padding: 16px 18px !important; border-radius: 18px; }
.ep-str-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ep-str-head strong { font-size: 14px; }
.ep-str-head b { font-size: 18px; font-weight: 850; }
.ep-str-bar { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.ep-str-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a5c, #ffc857); transition: width .3s ease; }
.ep-str-bar span.mid { background: linear-gradient(90deg, #ffc857, #a8e063); }
.ep-str-bar span.good { background: linear-gradient(90deg, #3ccf8e, #5ce1e6); }
.ep-str-list { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 2px; }
.ep-str-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 13px var(--font); text-align: left; cursor: pointer; }
.ep-str-list button:hover { background: var(--hover); color: var(--text); }
.ep-str-list svg { color: var(--primary); }
.ep-str-done { margin: 10px 0 0; font-size: 13px; }
.ep-jump { display: grid; gap: 1px; padding: 8px !important; }
.ep-jump button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13.5px var(--font); text-align: left; cursor: pointer; }
.ep-jump button:hover { background: var(--hover); color: var(--text); }
.ep-bar { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translate(-50%, 140%); opacity: 0; transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), opacity .18s; pointer-events: none; width: min(620px, calc(100vw - 32px)); }
.ep-bar.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ep-bar-in { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, #000); border: 1px solid var(--line2); box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .7); backdrop-filter: blur(10px); font-weight: 650; font-size: 14px; }
.ep-bar-in > svg { color: var(--warn); }
@media (min-width: 861px) { .app-main .ep-bar, .ep-bar { margin-left: calc(var(--sidebar-w, 236px) / 2); } }
@media (max-width: 1100px) { .ep-layout { grid-template-columns: 1fr; } .ep-side { position: static; order: -1; } .ep-side-in { max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .ep-side-label { grid-column: 1 / -1; } .ep-preview { grid-row: span 2; } .ep-jump { display: none; } }
@media (max-width: 700px) { .ep-side-in { grid-template-columns: 1fr; } .ep-preview { grid-row: auto; } .ep-head h1 { font-size: 24px; } .ep-sec { padding: 18px 16px 20px !important; } .ep-bar { bottom: calc(76px + env(safe-area-inset-bottom)); margin-left: 0; } }

/* v4.11.0 profile page */
.pf-page { max-width: 1240px; margin: 0 auto; }
.pf-page .profile-hero { margin-bottom: 0; }
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 12px 0 18px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.pf-bar .profile-actions { margin: 0; }
.pf-bar-l { min-width: 0; flex: 1; font-size: 14px; }
.pf-headline { font-style: italic; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-self { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; }
.pf-self svg { color: var(--primary); }
.pf-page .col-main, .pf-page .col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-page .col-main > .card, .pf-page .col-side > .card { margin: 0; border-radius: 18px; }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pf-fact { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.pf-fact-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft, var(--sel)); color: var(--primary); flex: none; }
.pf-fact small { display: block; font-size: 11.5px; color: var(--dim); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.pf-fact strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-prompts { display: grid; gap: 10px; }
.pf-prompt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line2); color: var(--text); transition: border-color .12s, background .12s; }
.pf-prompt:hover { text-decoration: none; color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.pf-prompt-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--sel); color: var(--primary); flex: none; }
.pf-prompt strong { display: block; font-size: 14.5px; }
.pf-prompt small { display: block; font-size: 13px; color: var(--muted); }
.pf-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; border-radius: 18px; border: 1px dashed var(--line2); color: var(--muted); text-align: center; }
.pf-empty svg { color: var(--primary); margin-bottom: 4px; }
.pf-empty p { margin: 0; color: var(--text); font-weight: 650; }
.pf-shared { display: block; margin: -4px 0 10px; }
.pf-page .psec h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
@media (max-width: 700px) { .pf-bar { padding: 12px; } .pf-bar .profile-actions { width: 100%; justify-content: flex-start; } .pf-facts { grid-template-columns: 1fr 1fr; } }
.pf-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pf-sum-i { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.pf-sum-i svg { color: var(--primary); }
.pf-sum-i.match { color: #ff6fb5; } .pf-sum-i.match svg { color: currentColor; fill: currentColor; }
.pf-sum-i.muted svg { color: var(--dim); }
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .admin-nav { position: static; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .ad-hero-act { width: 100%; } .ad-hero-act .btn { flex: 1; justify-content: center; }
}
@media (max-width: 700px) {
  .ep-preview, .ep-side-label { display: none; }
  .ep-side-in { display: block; }
}

/* v4.12.0 sidebar */
.side.sb { padding: 14px 12px 12px; gap: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--panel)), var(--panel) 220px); }
.sb-top { padding: 4px 8px 14px; }
.sb-search { margin: 0 0 8px !important; height: 38px; border-radius: 11px; }
.sb-nav { gap: 0; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-sec { display: flex; flex-direction: column; gap: 1px; padding: 8px 0 6px; }
.sb-label { padding: 2px 12px 5px; font: 750 10.5px var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--dim); }
.sb .nav { gap: 11px; padding: 8px 12px; border-radius: 10px; font-size: 14px; transition: background .1s, color .1s; }
.sb .nav .ic, .sb .nav > svg { width: 19px; height: 19px; opacity: .85; flex: none; }
.sb .nav:hover { background: var(--hover); }
.sb .nav.on { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--text); }
.sb .nav.on > svg { color: var(--primary); opacity: 1; }
.sb .nav.on::before { left: -12px; top: 9px; bottom: 9px; }
.sb .nav .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font: 800 11px/20px var(--font); text-align: center; background: var(--bad); color: #fff; }
.sb .nav.staff > svg { color: #5ce1e6; }
.sb-servers { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 2px; }
.sb-servers:empty { display: none; }
.sb-srv { position: relative; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; transition: transform .1s; }
.sb-srv:hover { transform: translateY(-1px); text-decoration: none; }
.sb-srv.on { box-shadow: 0 0 0 2px var(--primary); }
.sb-srv .srv-icon, .sb-srv > * { border-radius: 10px; }
.sb-srv.more, .sb-srv.add { border: 1px dashed var(--line2); background: transparent; color: var(--muted); font: 750 11px var(--font); cursor: pointer; }
.sb-srv.add:hover, .sb-srv.more:hover { color: var(--primary); border-color: var(--primary); }
.sb-promo { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 11px 12px; border-radius: 14px; color: var(--text); position: relative; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--plus, #c084fc) 26%, var(--panel)), color-mix(in srgb, var(--plus2, #f472b6) 20%, var(--panel))); border: 1px solid color-mix(in srgb, var(--plus, #c084fc) 40%, transparent); }
.sb-promo:hover { text-decoration: none; color: var(--text); filter: brightness(1.08); }
.sb-promo.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--plus, #c084fc) 60%, transparent); }
.sb-promo-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--plus, #c084fc), var(--plus2, #f472b6)); color: #fff; flex: none; box-shadow: 0 6px 16px -6px var(--plus2, #f472b6); }
.sb-promo strong { display: block; font-size: 13.5px; }
.sb-promo small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-promo > svg:last-child { color: var(--muted); flex: none; }
.sb-plus-tag { font: 750 10.5px var(--font); padding: 2px 8px; border-radius: 999px; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); color: #fff; }
.sb-me { display: flex; align-items: center; gap: 2px; margin-top: 8px; padding: 6px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.sb-me-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 3px 6px 3px 3px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.sb-me-main:hover { background: var(--hover); }
.sb-me-t { min-width: 0; }
.sb-me-t strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-me-t small { display: block; font-size: 12px; color: var(--muted); }
.sb-me-t small.p-online { color: var(--ok); } .sb-me-t small.p-idle { color: var(--warn); } .sb-me-t small.p-dnd { color: var(--bad); }
.sb-me .icon-btn { color: var(--muted); flex: none; }
.sb-me .icon-btn:hover { color: var(--text); }

/* v4.12.0 card designer */
.dz.designer { grid-template-columns: 380px minmax(0, 1fr); gap: 26px; }
.dz-side { top: 18px; display: flex; flex-direction: column; gap: 12px; }
.dz-stage { position: relative; padding: 34px 22px 22px; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(400px 260px at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--line) 35%, transparent) 0 25%, transparent 0 50%) 0 0 / 22px 22px, var(--bg2); }
.dz-stage.small { padding: 30px 14px 12px; background: var(--panel); }
.dz-stage-label { position: absolute; top: 10px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font: 750 10.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.dz-stage .designer-preview > * { margin: 0; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.dz-chat-row { display: flex; gap: 12px; align-items: flex-start; }
.dz-chat-head { display: flex; align-items: baseline; gap: 8px; }
.dz-chat-head small { font-size: 11.5px; color: var(--dim); }
.dz-chat-msg { font-size: 14px; margin-top: 2px; }
.dz-side-act { display: flex; justify-content: center; }
.dz-controls { min-width: 0; }
.dz-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 5px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); backdrop-filter: blur(10px); overflow-x: auto; scrollbar-width: none; }
.dz-tabs::-webkit-scrollbar { display: none; }
.dz-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 700 13.5px var(--font); cursor: pointer; white-space: nowrap; }
.dz-tab:hover { color: var(--text); background: var(--hover); }
.dz-tab.on { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -8px var(--primary); }
.dz-pane { animation: dzin .18s ease; }
@keyframes dzin { from { opacity: 0; transform: translateY(4px); } }
.dz-pane .dz-sec { border-radius: 18px; padding: 20px 22px; }
.dz-angle { display: flex; align-items: center; gap: 12px; }
.dz-angle input { flex: 1; }
.dz-angle output { min-width: 44px; text-align: right; font: 700 13px var(--font); color: var(--muted); }
.dz-shop { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: var(--bg2); border: 1px dashed var(--line2); color: var(--muted); font-size: 13.5px; }
.dz-shop:hover { text-decoration: none; color: var(--text); border-color: var(--primary); }
.dz-shop > svg:first-child { color: var(--primary); }
.dz-shop span { flex: 1; }
.dz .presets { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.dz .preset { height: 58px; border-radius: 12px; }
.dz .opt.on, .dz .frame-opt.on { box-shadow: 0 0 0 2px var(--primary); }
@media (max-width: 1050px) { .dz.designer { grid-template-columns: 1fr; } .dz-side { position: static; } .dz-stage.small, .dz-side-act { display: none; } .dz-stage { padding: 30px 16px 16px; } .dz-stage .designer-preview { max-width: 380px; margin: 0 auto; } }
.dz-stage:not(.small) { background: radial-gradient(400px 260px at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--line) 14%, transparent) 0 25%, transparent 0 50%) 0 0 / 22px 22px, var(--bg2); }
.sb-promo small { white-space: normal; line-height: 1.3; }

/* v4.12.0 Plus page */
.px-page { max-width: 1180px; margin: 0 auto; }
.px-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 40px 40px; border-radius: 26px; overflow: hidden; margin-bottom: 26px;
  background: radial-gradient(700px 380px at 0% 0%, color-mix(in srgb, var(--plus, #c084fc) 24%, transparent), transparent 70%), radial-gradient(600px 400px at 100% 100%, color-mix(in srgb, var(--plus2, #f472b6) 20%, transparent), transparent 70%), var(--panel); border: 1px solid color-mix(in srgb, var(--plus, #c084fc) 28%, var(--line)); }
.px-eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); color: #fff; font: 750 12px var(--font); }
.px-hero h1 { font-size: 42px; font-weight: 850; letter-spacing: -.035em; line-height: 1.06; margin: 16px 0 12px; }
.px-hero .lead { font-size: 16px; line-height: 1.55; margin: 0; max-width: 520px; }
.px-hero-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.px-hero .plus-status { margin-top: 18px; }
.px-hero-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.px-glow { position: absolute; inset: 10% 5%; background: radial-gradient(closest-side, color-mix(in srgb, var(--plus2, #f472b6) 40%, transparent), transparent); filter: blur(30px); pointer-events: none; }
.px-card { position: relative; width: 100%; max-width: 360px; pointer-events: none; transform: rotate(-2deg); transition: transform .3s; animation: pxfloat 6s ease-in-out infinite; }
.px-card > * { margin: 0; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85); }
@keyframes pxfloat { 50% { transform: rotate(-1deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .px-card { animation: none; } }
.px-dots { position: relative; display: flex; gap: 6px; }
.px-dot { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); font: 700 12px var(--font); cursor: pointer; }
.px-dot.on { color: #fff; border-color: transparent; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); }
.px-art-note { position: relative; font-size: 12px; }
.px-sec { margin: 0 0 34px; }
.px-sec > h2 { font-size: 22px; font-weight: 850; letter-spacing: -.02em; margin: 0 0 14px; }
.px-perks { margin: 0; gap: 12px; }
.px-perk { padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); transition: transform .14s, border-color .14s; }
.px-perk:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--plus, #c084fc) 45%, var(--line)); }
.px-perk .pk-ic { background: linear-gradient(135deg, color-mix(in srgb, var(--plus, #c084fc) 30%, transparent), color-mix(in srgb, var(--plus2, #f472b6) 26%, transparent)); color: #fff; border: 0; }
.px-buy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; scroll-margin-top: 30px; }
.px-buy-l > h2 { font-size: 22px; font-weight: 850; letter-spacing: -.02em; margin: 0 0 14px; }
.px-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.px-col { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.px-col.plus { border-color: color-mix(in srgb, var(--plus, #c084fc) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--plus, #c084fc) 8%, var(--panel)), var(--panel)); }
.px-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.px-col-head strong { display: block; font-size: 15px; }
.px-col-head small { display: block; font-size: 12px; color: var(--muted); }
.px-col-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); flex: none; }
.px-col.plus .px-col-ic { background: linear-gradient(135deg, var(--plus, #c084fc), var(--plus2, #f472b6)); color: #fff; }
.px-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.px-col li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.px-col.free li svg { color: var(--ok); flex: none; }
.px-col.plus li svg { color: var(--plus, #c084fc); flex: none; }
.px-plans { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; margin-top: 46px; }
.px-switch { display: flex; padding: 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.px-sw { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 750 14px var(--font); cursor: pointer; }
.px-sw.on { background: var(--raise); color: var(--text); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6); }
.px-save { padding: 2px 7px; border-radius: 999px; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); color: #fff; font-size: 11px; }
.px-plan { padding: 24px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--plus, #c084fc) 12%, var(--panel)), var(--panel) 60%); border: 1px solid color-mix(in srgb, var(--plus, #c084fc) 45%, var(--line)); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--plus2, #f472b6) 60%, transparent); }
.px-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.px-amt { font-size: 40px; font-weight: 850; letter-spacing: -.03em; line-height: 1; }
.px-amt small { font-size: 15px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.px-per { margin-top: 6px; font-size: 13px; }
.px-best { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, #f0b429 16%, transparent); color: #f0b429; font: 750 11.5px var(--font); white-space: nowrap; }
.px-incl { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 9px; }
.px-incl li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.px-incl svg { color: var(--plus, #c084fc); }
.px-cta { height: 48px; font-size: 15px; border-radius: 13px; border: 0; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)) !important; color: #fff !important; box-shadow: 0 12px 28px -12px var(--plus2, #f472b6); }
.px-fine { display: block; text-align: center; margin-top: 8px; font-size: 12px; }
.px-alt { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.px-tools { gap: 14px; }
.px-tools > .card { margin: 0; border-radius: 18px; }
.px-meter { margin: 8px 0 12px; }
.px-meter-bar { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin-bottom: 6px; }
.px-meter-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plus, #c084fc), var(--plus2, #f472b6)); }
.px-meter small { font-size: 12.5px; color: var(--muted); }
.px-faq { display: grid; gap: 8px; }
.px-q { border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.px-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.px-q summary::-webkit-details-marker { display: none; }
.px-q summary svg { color: var(--muted); transition: transform .15s; flex: none; }
.px-q[open] summary svg { transform: rotate(180deg); }
.px-q p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 980px) { .px-hero { grid-template-columns: 1fr; padding: 28px 22px; } .px-hero h1 { font-size: 32px; } .px-buy { grid-template-columns: 1fr; } .px-plans { position: static; margin-top: 0; } }
@media (max-width: 600px) { .px-compare { grid-template-columns: 1fr; } .px-hero h1 { font-size: 28px; } .px-card { max-width: 320px; } }
.px-jump { border: 0; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)) !important; color: #fff !important; }

/* v4.13.0 shared page kit */
.pg { max-width: 1240px; margin: 0 auto; }
.pg.narrow { max-width: 860px; } .pg.mid { max-width: 1080px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-head h1 { font-size: 30px; font-weight: 850; letter-spacing: -.03em; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; }
.pg-head p { margin: 0; color: var(--muted); }
.pg-head-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft, var(--sel)); color: var(--primary); flex: none; }
.pg-act { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 14px var(--font); cursor: pointer; }
.pg-tab:hover { color: var(--text); border-color: var(--line2); text-decoration: none; }
.pg-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--raise); color: var(--text); }
.pg-tab.on .pg-n { background: rgba(255, 255, 255, .22); color: inherit; }
.pg-tab.alert:not(.on) .pg-n { background: var(--bad); color: #fff; }
.pg-card { padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.pg-card + .pg-card { margin-top: 14px; }
.pg-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.pg-card-head h2, .pg-card-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
.pg-card-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pg-card-head .grow + * { flex: none; }
.pg-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft, var(--sel)); color: var(--primary); flex: none; }
.pg-ic.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pg-ic.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.pg-ic.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.pg-ic.pink { background: color-mix(in srgb, #ff6fb5 15%, transparent); color: #ff6fb5; }
.pg-ic.gold { background: color-mix(in srgb, #f0b429 15%, transparent); color: #f0b429; }
.pg-ic.cyan { background: color-mix(in srgb, #3cc8e0 15%, transparent); color: #3cc8e0; }
.pg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 24px; border-radius: 20px; border: 1px dashed var(--line2); }
.pg-empty-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--sel); color: var(--primary); margin-bottom: 6px; }
.pg-empty h3 { margin: 0; font-size: 17px; }
.pg-empty p { margin: 0 0 8px; color: var(--muted); max-width: 420px; }
.pg-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); }
.pg-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pg-search svg { color: var(--dim); flex: none; }
.pg-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; }
@media (max-width: 700px) { .pg-head h1 { font-size: 24px; } .pg-card { padding: 16px; } }
/* notifications */
.nt-group { margin-bottom: 18px; }
.nt-label { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.nt-label span { padding: 1px 7px; border-radius: 999px; background: var(--raise); color: var(--muted); letter-spacing: 0; }
.nt-list { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.nt-list .notif { border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; background: transparent; position: relative; }
.nt-list .notif:first-child { border-top: 0 !important; }
.nt-list .notif:hover { background: var(--hover); }
.nt-list .notif.unread { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.nt-list .notif.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.nt-page .n-text { color: var(--muted); }
.nt-page .notif.unread .n-text { color: var(--text); }
/* settings */
.st-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-side { position: sticky; top: 18px; }
.st-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.st-nav-b { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13.5px var(--font); text-align: left; cursor: pointer; }
.st-nav-b:hover { background: var(--hover); color: var(--text); }
.st-nav-b.on { background: var(--sel); color: var(--text); }
.st-nav-b.on::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.st-nav-b.on svg { color: var(--primary); }
.st-nav-b.bad { color: color-mix(in srgb, var(--bad) 80%, var(--muted)); }
.st-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-main > .pg-card, .st-main > .card { margin: 0 !important; scroll-margin-top: 18px; }
.st-main > .card { border-radius: 18px; padding: 20px 22px; }
.st-who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(400px 160px at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), var(--panel); }
.st-who strong { display: block; font-size: 16px; }
.st-who small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.st-who-tags { display: flex; gap: 6px; }
.pill.plus { color: #fff; background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); border: 0; }
.st-toggles { display: grid; gap: 2px; margin-bottom: 14px; }
.st-link { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.st-link:hover { text-decoration: none; color: var(--text); border-color: var(--line2); }
.st-link strong { display: block; font-size: 14px; } .st-link small { display: block; font-size: 12.5px; color: var(--muted); }
.st-link > svg:last-child { color: var(--dim); }
.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-form { padding: 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.st-form h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 14px; }
.st-form h4 svg { color: var(--primary); }
.st-sec.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
@media (max-width: 900px) { .st-layout { grid-template-columns: 1fr; } .st-side { position: sticky; top: 0; z-index: 5; } .st-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .st-nav-b { white-space: nowrap; } .st-nav-b.on::before { display: none; } .st-split { grid-template-columns: 1fr; } }
.st-form h4 { text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 750; }
/* shop */
.sh-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: center; padding: 30px 32px; border-radius: 24px; margin-bottom: 16px; border: 1px solid var(--line);
  background: radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, #ff6fb5 18%, transparent), transparent 70%), radial-gradient(500px 300px at 100% 100%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%), var(--panel); }
.sh-hero h1 { font-size: 34px; font-weight: 850; letter-spacing: -.035em; line-height: 1.1; margin: 14px 0 8px; }
.sh-hero p { margin: 0 0 18px; max-width: 520px; line-height: 1.55; }
.sh-try { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px; border-radius: 20px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); text-align: center; min-height: 250px; justify-content: center; }
.sh-try-av { padding: 10px; }
.sh-try-t { display: grid; gap: 2px; }
.sh-try-t small { font: 750 10.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.sh-try-t strong { font-size: 16px; }
.sh-try-t span { font-size: 12.5px; }
.sh-monthly { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--plus, #c084fc) 40%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--plus, #c084fc) 12%, var(--panel)), var(--panel)); }
.sh-monthly small { display: flex; align-items: center; gap: 4px; font: 750 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--plus, #c084fc); }
.sh-monthly strong { display: block; font-size: 15px; }
.sh-monthly .muted { font-size: 13px; }
.sh-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sh-item { display: flex; flex-direction: column; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
.sh-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .8); }
.sh-item.wearing { border-color: var(--ok); }
.sh-stage { position: relative; display: grid; place-items: center; height: 150px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 65%), var(--bg2); }
.sh-tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.sh-tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(10, 10, 16, .6); color: #fff; font: 700 10.5px var(--font); }
.sh-tag.plus { background: linear-gradient(100deg, var(--plus, #c084fc), var(--plus2, #f472b6)); }
.sh-tag.ok { background: var(--ok); color: #06261a; }
.sh-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; flex: 1; }
.sh-body strong { font-size: 14.5px; }
.sh-body .shop-artist, .sh-body small { font-size: 12.5px; color: var(--muted); }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.sh-price { font-weight: 800; font-size: 14px; }
.sh-price s { color: var(--dim); font-weight: 600; font-size: 12px; }
.sh-search { max-width: 460px; }
@media (max-width: 860px) { .sh-hero { grid-template-columns: 1fr; padding: 22px 18px; } .sh-hero h1 { font-size: 26px; } .sh-try { min-height: 0; flex-direction: row; text-align: left; } .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* artist */
.ar-page .pg-card { margin-bottom: 14px; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ar-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.ar-stage { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); flex: none; }
.ar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ar-cols .pg-card { margin: 0; }
.ar-steps { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
@media (max-width: 860px) { .ar-cols { grid-template-columns: 1fr; } }
.sh-grid > .pg-empty { grid-column: 1 / -1; }
/* safety */
.sc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; align-items: center; padding: 30px 32px; border-radius: 24px; margin-bottom: 12px; border: 1px solid var(--line); text-align: left;
  background: radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, #3cc8e0 18%, transparent), transparent 70%), var(--panel); }
.sc-mark { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #3cc8e0, #3ccf8e); color: #fff; box-shadow: 0 12px 28px -12px #3cc8e0; }
.sc-hero h1 { font-size: 34px; font-weight: 850; letter-spacing: -.03em; margin: 16px 0 8px; }
.sc-hero .lead { margin: 0; line-height: 1.55; }
.sc-quick { display: grid; gap: 8px; }
.sc-q { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.sc-q:hover { text-decoration: none; color: var(--text); border-color: var(--line2); transform: translateY(-1px); }
.sc-q strong { display: block; font-size: 14px; } .sc-q small { display: block; font-size: 12.5px; color: var(--muted); }
.sc-emerg { display: flex; align-items: center; gap: 10px; padding: 11px 16px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--bad) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); font-size: 14px; }
.sc-emerg > svg { color: var(--bad); flex: none; }
.safety-grid { gap: 14px; }
.sc-sec { margin: 0 !important; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sc-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sc-list li svg { color: var(--ok); flex: none; margin-top: 3px; }
.sc-help { margin-top: 14px; }
@media (max-width: 860px) { .sc-hero { grid-template-columns: 1fr; padding: 22px 18px; } .sc-hero h1 { font-size: 27px; } }
/* verify */
.vf-status { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 14px; }
.vf-status h2 { margin: 14px 0 6px; font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.vf-status > p { margin: 0; max-width: 460px; line-height: 1.55; }
.vf-badge { width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center; background: var(--sel); color: var(--primary); }
.vf-ok { background: radial-gradient(500px 220px at 50% 0%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), var(--panel); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.vf-ok .vf-badge { background: linear-gradient(135deg, #3ccf8e, #5ce1e6); color: #fff; box-shadow: 0 14px 32px -14px #3ccf8e; }
.vf-wait { background: radial-gradient(500px 220px at 50% 0%, color-mix(in srgb, var(--warn) 14%, transparent), transparent 70%), var(--panel); }
.vf-wait .vf-badge { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.vf-steps { list-style: none; display: flex; align-items: center; gap: 0; margin: 22px 0 4px; padding: 0; flex-wrap: wrap; justify-content: center; }
.vf-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--dim); }
.vf-steps li + li::before { content: ""; width: 34px; height: 2px; margin: 0 10px; background: var(--line2); border-radius: 2px; }
.vf-steps li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); }
.vf-steps li.done { color: var(--text); } .vf-steps li.done span { background: var(--ok); color: #06261a; }
.vf-steps li.done + li::before { background: var(--ok); }
.vf-steps li.cur { color: var(--text); } .vf-steps li.cur span { background: var(--warn); color: #241a00; animation: pulse 1.6s infinite; }
.vf-act { justify-content: center; margin-top: 20px; }
.vf-unlocked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vf-u { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); font-size: 14px; font-weight: 600; }
.vf-page .verify-auto, .vf-page .card { border-radius: 20px; }
@media (max-width: 600px) { .vf-unlocked { grid-template-columns: 1fr 1fr; } .vf-steps li + li::before { width: 14px; margin: 0 6px; } }
/* saved */
.sv-search { margin-bottom: 14px; }
.sv-list { display: grid; gap: 10px; }
.sv-item { padding: 14px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.sv-item .si-where { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.sv-item .si-where time { display: inline-flex; align-items: center; gap: 3px; color: var(--dim); }
.sv-msg { display: flex; gap: 12px; align-items: flex-start; }
.sv-head { display: flex; align-items: baseline; gap: 8px; }
.sv-item .si-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
/* stickers */
.sk-kpis { margin-bottom: 18px; }
.sk-kpi .ad-kpi-v small { font-size: 14px; color: var(--dim); font-weight: 650; }
.sk-bar { margin-top: 4px; }
.sk-body > .card, .sk-body .card { border-radius: 18px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 25%, transparent); } }
/* group page */
.gp-hero { position: relative; border-radius: 24px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; }
.gp-banner { height: 230px; background-size: cover; background-position: center; position: relative; }
.gp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--panel)); }
.gp-bar { position: relative; display: flex; align-items: flex-end; gap: 18px; padding: 0 24px 20px; margin-top: -58px; flex-wrap: wrap; }
.gp-ic { border-radius: 24px; box-shadow: 0 0 0 5px var(--panel), 0 14px 30px -12px rgba(0, 0, 0, .8); flex: none; }
.gp-ic .gicon { display: block; }
.gp-text { min-width: 0; padding-bottom: 2px; }
.gp-text h1 { margin: 0 0 6px; font-size: 30px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.gp-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.gp-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.gp-meta b { color: var(--text); }
.gp-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 2px; }
.gp-cols { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.gp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gp-main > .card, .gp-main .posts > .card { border-radius: 18px; margin: 0; }
.gp-main .posts { display: flex; flex-direction: column; gap: 14px; }
.gp-main > .pg-card + .pg-card { margin-top: 0; }
.gp-side { display: flex; flex-direction: column; gap: 14px; }
.gp-side .pg-card { margin: 0; }
.gp-about { font-size: 14px; color: var(--muted); }
.gp-facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.gp-facts dt { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.gp-facts dd { margin: 0; text-align: right; font-weight: 600; }
.gp-rules { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.gp-rules li::marker { color: #f0b429; font-weight: 800; }
.gp-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-more { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--muted); font: 750 12px var(--font); }
.gp-mem { gap: 12px; }
.gp-page .post-composer { border-radius: 18px; }
.gp-page .post { border-radius: 18px; }
@media (max-width: 1000px) { .gp-cols { grid-template-columns: 1fr; } .gp-side { order: -1; } }
@media (max-width: 640px) { .gp-banner { height: 150px; } .gp-bar { margin-top: -44px; padding: 0 16px 16px; } .gp-text h1 { font-size: 23px; } .gp-ic .gicon { --s: 72px; } }
/* server settings */
.ssx { gap: 26px; max-width: 1300px; margin: 0 auto; }
.ssx-nav { padding: 0 10px 10px !important; overflow: hidden; gap: 0 !important; }
.ssx-head { display: block; margin: 0 -10px 6px; color: var(--text); border-bottom: 1px solid var(--line); }
.ssx-head:hover { text-decoration: none; color: var(--text); }
.ssx-banner { height: 64px; background: linear-gradient(135deg, var(--primary), #ff6fb5); background-size: cover; background-position: center; }
.ssx-id { display: flex; align-items: flex-end; gap: 10px; padding: 0 12px 12px; margin-top: -22px; }
.ssx-id .srv-icon, .ssx-id > :first-child { box-shadow: 0 0 0 3px var(--panel); border-radius: 14px; flex: none; }
.ssx-id strong { display: block; font-size: 14.5px; }
.ssx-id small { display: inline-flex; align-items: center; font-size: 11.5px; color: var(--muted); }
.ssx-nav .anav { position: relative; font-size: 13.5px; padding: 8px 12px; }
.ssx-nav .anav.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.ssx-nav .anav.bad { color: color-mix(in srgb, var(--bad) 80%, var(--muted)); }
.ssn-lvl { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: linear-gradient(100deg, #ff6fb5, #a98bff); color: #fff; font: 800 10.5px var(--font); }
.ssx .ss-body .page-head h1 { font-size: 26px; font-weight: 850; letter-spacing: -.025em; }
.ssx .ss-body .card { border-radius: 18px; }
@media (max-width: 860px) { .ssx-head { display: none; } .ssx-nav .an-sec { flex-direction: row; } .ssx-nav .an-label { display: none; } .ssx-nav { padding: 6px !important; } }
/* server browser */
.sd-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 32px; border-radius: 24px; margin-bottom: 18px; border: 1px solid var(--line);
  background: radial-gradient(700px 300px at 0% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%), radial-gradient(500px 300px at 100% 100%, color-mix(in srgb, #3cc8e0 16%, transparent), transparent 70%), var(--panel); }
.sd-hero > div:first-child { flex: 1; min-width: 280px; max-width: 640px; }
.sd-hero h1 { font-size: 34px; font-weight: 850; letter-spacing: -.035em; margin: 14px 0 8px; }
.sd-hero p { margin: 0 0 16px; line-height: 1.5; }
.sd-search { height: 46px; max-width: 520px; }
.sd-hero-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-hero-act small { width: 100%; text-align: right; }
.sb-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); font-weight: 650; white-space: nowrap; }
.sb-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.sd-page .gx-ic { border-radius: 18px; }
.sd-page .gx-foot { gap: 10px; }
@media (max-width: 700px) { .sd-hero { padding: 22px 18px; } .sd-hero h1 { font-size: 26px; } .sd-hero-act small { text-align: left; } }
/* empty messages */
.dmh { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 24px; overflow-y: auto; }
.dmh-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dmh-ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #ff6fb5); color: #fff; box-shadow: 0 16px 36px -16px var(--primary); }
.dmh-hero h2 { margin: 16px 0 4px; font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.dmh-hero p { margin: 0; }
.dmh-act { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 10px; }
.dmh-a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; font: inherit; text-align: center; transition: transform .12s, border-color .12s; }
.dmh-a:hover { text-decoration: none; color: var(--text); transform: translateY(-2px); border-color: var(--line2); }
.dmh-a .pg-ic { margin-bottom: 4px; }
.dmh-a strong { font-size: 14px; } .dmh-a small { font-size: 12px; color: var(--muted); }
.dmh-rows { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 14px; }
.dmh-skel { height: 96px; border-radius: 16px; background: linear-gradient(90deg, var(--panel), var(--raise), var(--panel)); background-size: 200% 100%; animation: shimmer 1.4s infinite; opacity: .5; }
@keyframes shimmer { to { background-position: -200% 0; } }
.dmh-sec { padding: 14px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.dmh-sec h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--text); }
.dmh-sec h4 > svg { color: #ff6fb5; }
.dmh-sec h4 span { color: var(--dim); font-weight: 600; font-size: 12.5px; }
.dmh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dmh-faces { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dmh-face { flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; color: var(--text); text-align: center; }
.dmh-face:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.dmh-face strong { font-size: 12.5px; max-width: 100%; } .dmh-face small { font-size: 11px; color: var(--muted); max-width: 100%; }
.dmh-none { text-align: center; font-size: 13px; }
@media (max-width: 700px) { .dmh-act { grid-template-columns: 1fr; width: 100%; } .dmh-a { flex-direction: row; text-align: left; } .dmh-a .pg-ic { margin: 0; } }
.gp-text { flex: 1 1 220px; }
@media (max-width: 640px) { .gp-bar { align-items: flex-start; } .gp-text { flex-basis: calc(100% - 110px); padding-top: 50px; } .gp-act { width: 100%; } }
@media (max-width: 860px) { .ss.ssx { grid-template-columns: minmax(0, 1fr) !important; display: grid; gap: 14px; } .ssx-nav { position: static !important; flex-direction: row !important; overflow-x: auto; } .ssx-nav .an-sec { display: flex; } .ssx-nav .anav { white-space: nowrap; } .ssx-nav .anav.on::before { display: none; } }
@media (max-width: 640px) { .gp-text { flex-basis: 100%; padding-top: 0; } }
/* collapsed sidebar (chat pages) with the 4.12 sidebar */
body.in-chat .side.sb { padding: 12px 8px; }
body.in-chat .sb .sb-label, body.in-chat .sb .sb-plus-tag, body.in-chat .sb .sb-promo .grow, body.in-chat .sb .sb-promo > svg:last-child, body.in-chat .sb .sb-me-t, body.in-chat .sb .sb-me > .icon-btn { display: none; }
body.in-chat .sb .sb-sec { padding: 4px 0; align-items: center; }
body.in-chat .sb .sb-sec + .sb-sec { border-top: 1px solid var(--line); }
body.in-chat .sb .nav { width: 44px; padding: 10px 0; }
body.in-chat .sb .nav.on::before { left: -8px; }
body.in-chat .sb .sb-servers { flex-direction: column; align-items: center; padding: 4px 0; }
body.in-chat .sb .sb-promo { justify-content: center; padding: 6px; margin: 8px auto 0; width: 44px; height: 44px; border-radius: 12px; }
body.in-chat .sb .sb-me { justify-content: center; padding: 4px; border: 0; background: none; }
body.in-chat .sb .sb-me-main { padding: 0; flex: none; }
/* photo reorder */
.gallery.edit .gitem[data-id] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; outline: none; transition: transform .15s, box-shadow .15s; }
.gallery.edit .gitem[data-id]:focus-visible { box-shadow: 0 0 0 3px var(--primary); }
.gallery.edit .gitem img { pointer-events: none; -webkit-user-drag: none; }
.gallery.dragging .gitem[data-id] { transition: transform .15s; }
.gitem.g-ph { border: 2px dashed var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 12px; }
.g-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .7), 0 0 0 2px var(--primary); opacity: .95; cursor: grabbing; }
.g-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-ghost .gtools { display: none; }
.g-dropped { animation: gdrop .3s ease; }
@keyframes gdrop { 40% { transform: scale(1.05); } }
.g-first, .g-num { position: absolute; top: 6px; left: 6px; z-index: 2; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; font: 750 10.5px var(--font); color: #fff; background: rgba(10, 10, 16, .65); backdrop-filter: blur(4px); pointer-events: none; }
.g-first { background: var(--primary); }
.g-grip { position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: rgba(10, 10, 16, .55); opacity: 0; transition: opacity .12s; pointer-events: none; }
.gallery.edit .gitem:hover .g-grip { opacity: 1; }
@media (hover: none) { .g-grip { opacity: 1; } }
.gallery.edit .gitem .nsfw-tag { top: auto; bottom: 8px; left: 8px; }
.fav-wrap.up-fav { display: block; max-width: 100%; } .fav-wrap.up-fav .chat-img { width: 100% !important; }
.img-grid > .fav-wrap.grid { display: block; min-width: 0; min-height: 0; }
.img-grid > .fav-wrap.grid > .grid-img { width: 100%; height: 100%; }
.img-grid.n3 > .fav-wrap.grid:first-child { grid-row: span 2; }
.img-grid > .fav-wrap.grid { aspect-ratio: 1; }
.img-grid.n3 > .fav-wrap.grid:first-child { aspect-ratio: auto; }
.img-grid > .fav-wrap.grid > .grid-img { aspect-ratio: auto; display: block; }
.sid-events { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .sid-events code { font-size: 11.5px; }


/* offline members in the server people panel */
.chan-people .person.offline { opacity: .45; }
.chan-people .person.offline:hover { opacity: .85; }
.chan-people .pp-more { font-size: 12px; padding: 4px 12px 12px; }

/* ---------- 4.20: Settings → Voice & video and Sounds ---------- */
.vs-cam.no-mirror { transform: none; }
.vs-note { margin: -4px 0 12px; font-size: 13px; }
.vs-ss { display: grid; gap: 14px; margin-bottom: 10px; }
.vs-ss h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.st-voice .vs-wrap { gap: 0; }
.st-voice .vs-sec:first-child { padding-top: 0; }
.vs-meter-row .btn.on { background: color-mix(in srgb, var(--primary) 16%, var(--bg2)); border-color: var(--primary); color: var(--text); }
.vs-meter-row .btn.on svg { color: var(--primary); }

.snd { display: grid; gap: 14px; }
.snd-master { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.snd-master .toggle { padding: 0; }
.snd-vol { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.snd-vol .range { flex: 1; }
.snd-vol-n { min-width: 40px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.snd-master.off .snd-vol { opacity: .45; pointer-events: none; }
.snd-body.dim { opacity: .45; pointer-events: none; }
.snd-h { margin: 6px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.snd-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.snd-pack { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .1s; }
.snd-pack::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); opacity: .55; }
.snd-pack:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.snd-pack:active { transform: scale(.99); }
.snd-pack.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent), 0 8px 26px -12px color-mix(in srgb, var(--c) 60%, transparent); }
.snd-pack.on::before { opacity: 1; }
.snd-pack strong { font-size: 15px; }
.snd-pack small { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.snd-pack-top { display: flex; align-items: center; justify-content: space-between; height: 26px; margin-bottom: 4px; }
.snd-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.snd-wave i { display: block; width: 4px; border-radius: 3px; background: var(--c); height: calc(6px + var(--i) * 3px); opacity: .5; }
.snd-wave i:nth-child(1) { height: 8px; } .snd-wave i:nth-child(2) { height: 16px; } .snd-wave i:nth-child(3) { height: 22px; } .snd-wave i:nth-child(4) { height: 13px; } .snd-wave i:nth-child(5) { height: 7px; }
.snd-pack.on .snd-wave i { opacity: 1; animation: snd-bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes snd-bob { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@media (prefers-reduced-motion: reduce) { .snd-pack.on .snd-wave i { animation: none; } }
.snd-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #14121a; }
.snd-try { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.snd-try:hover { border-color: var(--c); color: var(--c); }
.snd-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.snd-list-head .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.snd-group { margin-top: 6px; }
.snd-group h4 { display: flex; align-items: center; gap: 7px; margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
.snd-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.snd-row:hover { background: var(--bg2); }
.snd-row strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.snd-row small { display: block; color: var(--muted); font-size: 12px; }
.snd-row.off strong, .snd-row.off small { opacity: .5; }
.snd-play { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg2); color: var(--c); cursor: pointer; transition: transform .1s, border-color .15s; }
.snd-play:hover:not(:disabled) { border-color: var(--c); }
.snd-play:active:not(:disabled) { transform: scale(.92); }
.snd-play:disabled { opacity: .35; cursor: default; }
.snd-tag { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.snd-row .dd, .snd-row .snd-sel { width: 170px; flex: none; }
.snd-opts { margin-top: 10px; }
@media (max-width: 720px) {
  .snd-packs { grid-template-columns: 1fr; }
  .snd-row { flex-wrap: wrap; }
  .snd-row .dd, .snd-row .snd-sel { width: 100%; margin-left: 44px; }
}

/* The desktop app draws its screen picker inside this page. Older app builds use a class called "au", the same name as
   the sign-in layout, which stretched it to full height. Keep the picker's own layout. (App 1.0.1+ uses a shadow root.) */
#pc-picker label.au { min-height: 0 !important; display: flex !important; grid-template-columns: none !important; }
#pc-picker .tabs { border-bottom: 0 !important; margin-bottom: 0 !important; flex-wrap: nowrap !important; }
#pc-picker h2 { display: block !important; margin: 0 !important; line-height: 1.4 !important; }
#pc-picker input[type="checkbox"] { min-height: 0 !important; width: 18px !important; height: 18px !important; padding: 0 !important; }

/* ---------- 4.21: chat box on phones ---------- */
.cstack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cstack > .tray { border-color: var(--line); }
.cstack > .cbar { flex: none; width: 100%; }
.cbar textarea { min-width: 0; }
@media (max-width: 640px) {
  /* while you type, GIF / sticker / emoji step aside so the text gets the width; they come back when the box is empty */
  .composer.has-text .cbar .cbtn.xtool { display: none; }
  .composer { padding-left: 10px; padding-right: 10px; }
  .crow { gap: 6px; }
  .tray { padding: 8px; gap: 8px; }
  .tray-item { width: 118px; }
  .tray-item img, .tray-ic { height: 74px; }
}

/* phone voice-channel sheet */
.vsh { display: grid; gap: 16px; padding-bottom: 6px; }
.vsh-people { display: flex; flex-wrap: wrap; gap: 12px 10px; justify-content: center; }
.vsh-p { position: relative; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.vsh-p small { width: 100%; font-size: 11.5px; color: var(--muted); }
.vsh-p.talking .av, .vsh-p.talking .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); border-radius: 50%; }
.vsh-mute { position: absolute; top: 30px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bad); color: #fff; box-shadow: 0 0 0 2px var(--panel); }
.vsh-more { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); font-weight: 800; font-size: 13px; }
.vsh-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; }
.vsh-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vsh .btn.lg { min-height: 48px; font-size: 15px; justify-content: center; }
.vsh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vsh-b { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; cursor: pointer; transition: transform .08s; }
.vsh-b:active { transform: scale(.96); }
.vsh-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--muted); transition: background .15s, color .15s; }
.vsh-b.on .vsh-ic { background: var(--primary); color: var(--on-primary, #fff); }
.vsh-b.bad .vsh-ic { background: color-mix(in srgb, var(--bad) 22%, var(--raise)); color: var(--bad); }
.vsh-b small { font-size: 12.5px; font-weight: 650; }
.vsh-note { text-align: center; font-size: 13px; margin: -6px 0 0; }
.vs-ns .seg, .vs-ns .segmented { flex: none; }

/* staff dashboard activity: long details (an announcement, a tagline) used to push the row out of the card */
.ad-ev > .grow { min-width: 0; }
.ad-ev-d { min-width: 0; }
.ad-kv { display: inline-block; max-width: 100%; vertical-align: top; }
.ad-kv i { margin-right: 5px; }
.ad-cols > * { min-width: 0; }
.ad-activity { overflow: hidden; }
.ad-feed { grid-template-columns: minmax(0, 1fr); }
.ad-ev { min-width: 0; }