/* Ember interface styles. Colours and metrics come from /theme.css (admin-editable tokens). */
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--font-size)/1.45 var(--font); color: var(--text); background: var(--bg-0); overflow: hidden; height: 100dvh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); color: var(--code-text); padding: .1em .35em; border-radius: 5px; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
[hidden] { display: none !important; }
[role="button"] { cursor: pointer; }

/* ---------- utilities ---------- */
.grow { flex: 1 1 auto; min-width: 0; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: .88rem; }
.pad { padding: 16px; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.mobile-only { display: none !important; }
.icon { flex: none; }
.linkish { color: var(--link); text-decoration: underline; }
.btn-row { display: flex; align-items: center; gap: 8px; }
.btn-row.wrap { flex-wrap: wrap; }
.btn-row.end { justify-content: flex-end; margin-top: 16px; }
.btn-row.between { justify-content: space-between; margin: 18px 0 8px; }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-s); font-weight: 600; background: var(--bg-4); color: var(--text); white-space: nowrap; transition: background .12s, transform .06s; }
.btn:hover:not(:disabled) { background: var(--border-strong); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn.small { padding: 5px 10px; font-size: .88rem; }
.btn.big { padding: 12px 20px; font-size: 1.02rem; width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-s); color: var(--text-dim); flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn.tiny { width: 24px; height: 24px; }
.icon-btn.on-danger { color: var(--danger); }
.icon-btn.on-live { color: var(--success); }
.icon-btn.up svg { transform: rotate(-90deg); } .icon-btn.down svg { transform: rotate(90deg); }
.input { width: 100%; padding: 9px 11px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-s); color: var(--text); min-width: 0; }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
textarea.input { resize: vertical; min-height: 44px; line-height: 1.4; }
select.input { cursor: pointer; }
.input.num { width: 130px; } .input.hex { width: 104px; font-family: var(--font-mono); font-size: .9rem; }
.color { width: 42px; height: 36px; padding: 2px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-s); cursor: pointer; flex: none; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > span { font-weight: 600; font-size: .9rem; color: var(--text-dim); }
.form-grid .field { margin-bottom: 0; }
.check-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform .15s, background .15s; }
.switch input:checked + i { background: var(--accent); box-shadow: none; }
.switch input:checked + i::after { transform: translateX(18px); background: var(--accent-text); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: .45; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--bg-4); color: var(--text-dim); font-size: .76rem; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.chip.tiny { font-size: .68rem; padding: 0 6px; }
.chip.warn { background: var(--held-bg); color: var(--warning); margin-left: 0; white-space: normal; }
.chip.approved { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.chip.rejected { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.chip.live { background: var(--danger); color: #fff; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--badge-bg); color: var(--badge-text); font-size: .7rem; font-weight: 700; font-style: normal; flex: none; }
.has-badge { position: relative; display: inline-flex; }
.has-badge .badge { position: absolute; top: 0; right: -2px; pointer-events: none; }
.avatar { position: relative; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; user-select: none; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.group { background: var(--bg-4); color: var(--text-dim); }
.status-dot { position: absolute; right: -2px; bottom: -2px; width: 34%; height: 34%; min-width: 10px; min-height: 10px; border-radius: 50%; border: 2.5px solid var(--bg-1); background: var(--offline); }
.status-dot.online { background: var(--online); } .status-dot.idle { background: var(--idle); } .status-dot.dnd { background: var(--dnd); }
.server-icon { display: inline-grid; place-items: center; border-radius: 30%; background: var(--bg-3); color: var(--text); font-family: var(--font-display); font-weight: 700; overflow: hidden; flex: none; }
.server-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notice { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-s); background: var(--held-bg); color: var(--text); margin: 0 0 12px; }
.notice.danger { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.notice.good { background: color-mix(in srgb, var(--success) 14%, transparent); }
.notice .icon { margin-top: 2px; }
.card { background: var(--bg-3); border-radius: var(--radius-m); margin: 0 0 14px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row-text small { color: var(--text-faint); overflow-wrap: anywhere; }
.set-row .input { width: auto; max-width: 260px; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font-weight: 600; color: var(--text-faint); padding: 6px 10px; }
.table td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; }
.table tr.faded { opacity: .55; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 48px 20px; color: var(--text-dim); margin: auto; max-width: 420px; }
.empty > .icon { color: var(--text-faint); } .empty h3 { color: var(--text); font-family: var(--font-display); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 6px 13px; border-radius: 99px; color: var(--text-dim); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active { background: var(--active); color: var(--text); }
.tab.accent { color: var(--accent); }
.more-row { display: flex; justify-content: center; padding: 14px; }
.list-count { color: var(--text-faint); font-size: .88rem; font-weight: 600; margin: 2px 0 8px; }

/* ---------- toasts, modals, menus ---------- */
.toasts { position: fixed; z-index: 400; right: 16px; bottom: 96px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; width: min(92vw, 400px); }
.toast { background: var(--bg-4); color: var(--text); padding: 10px 16px; border-radius: var(--radius-m); box-shadow: var(--shadow); border-left: 4px solid var(--info); animation: rise .18s ease-out; max-width: 100%; }
.toast.success { border-color: var(--success); } .toast.danger { border-color: var(--danger); }
.toast.out { opacity: 0; transition: opacity .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.modal-back { position: fixed; inset: 0; z-index: 200; background: var(--overlay); display: grid; place-items: center; padding: 16px; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--bg-2); border-radius: var(--radius-l); box-shadow: var(--shadow); width: 100%; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; outline: none; }
.modal.size-s { max-width: 440px; } .modal.size-m { max-width: 620px; } .modal.size-l { max-width: 860px; } .modal.size-xl { max-width: 1200px; }
.modal.size-full { max-width: none; height: calc(100dvh - 32px); border-radius: var(--radius-l); overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px 20px; }
.modal-head h2 { flex: 1; font-family: var(--font-display); font-size: 1.25rem; }
.modal-body { padding: 8px 20px 18px; overflow-y: auto; }
.modal-body > p { margin-bottom: 12px; }
.modal-bare { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--bg-1); border-radius: 0 0 var(--radius-l) var(--radius-l); }
.menu { position: fixed; z-index: 300; min-width: 200px; max-width: 300px; max-height: 70vh; overflow-y: auto; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: var(--radius-m); padding: 6px; box-shadow: var(--shadow); }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: var(--radius-s); color: var(--text-dim); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--accent); color: var(--accent-text); outline: none; }
.menu-item.danger { color: var(--danger); } .menu-item.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.menu-item small { margin-left: auto; opacity: .7; font-size: .78rem; }
.link-preview { background: var(--code-bg); padding: 10px; border-radius: var(--radius-s); overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .88rem; }
.lightbox .modal-body { display: grid; place-items: center; background: var(--bg-0); padding: 12px; }
.lightbox img { max-height: calc(100dvh - 190px); border-radius: var(--radius-s); }

/* ---------- shell ---------- */
.app { height: 100dvh; display: flex; flex-direction: column; }
.site-banner { padding: 6px 14px; text-align: center; font-weight: 600; font-size: .9rem; background: var(--info); color: #fff; }
.site-banner.warning { background: var(--warning); color: #201500; } .site-banner.danger { background: var(--danger); } .site-banner.success { background: var(--success); color: #04210f; }
.app-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr); }
.app-cols.with-members { grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr) var(--members-width); }
body.hide-members .app-cols.with-members { grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr); }
body.hide-members .members { display: none; }
.scrim { display: none; }

/* rail: the active server sits on a glowing coal */
.rail { background: var(--bg-0); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; overflow-y: auto; scrollbar-width: none; }
.rail hr { width: 30px; margin: 0; }
.rail-servers { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.rail-spacer { flex: 1; }
.rail-item { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 30%; color: var(--text-dim); transition: transform .12s; flex: none; }
.rail-item:hover { transform: translateY(-1px); }
.rail-item.home, .rail-item.action { background: var(--bg-2); }
.rail-item.action:hover, .rail-item.action.active { background: var(--accent); color: var(--accent-text); }
.rail-item.staff { color: var(--accent-2); }
.rail-logo { font-size: 1.45rem; line-height: 1; }
.rail-item.active::after { content: ''; position: absolute; inset: -3px; border-radius: 32%; box-shadow: 0 0 0 2px var(--accent), 0 8px 22px -6px var(--accent); pointer-events: none; }
.rail-item.active::before { content: ''; position: absolute; left: 50%; bottom: -9px; width: 30px; height: 10px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--accent-2), transparent); opacity: .75; filter: blur(3px); pointer-events: none; }
.rail-item.unread:not(.active)::before { content: ''; position: absolute; left: -11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rail-item .badge { position: absolute; right: -4px; bottom: -4px; box-shadow: 0 0 0 3px var(--bg-0); }

.sidebar { background: var(--bg-1); display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-l) 0 0 0; }
.side-head { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 52px; flex: none; border-bottom: 1px solid var(--border); }
.side-head h1 { flex: 1; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.side-head.server:hover { background: var(--hover); }
.side-head.has-banner { height: 96px; align-items: flex-end; padding-bottom: 10px; background-size: cover; background-position: center; border-radius: var(--radius-l) 0 0 0; }
.side-scroll { flex: 1; overflow-y: auto; padding: 8px; }
.side-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: var(--radius-s); color: var(--text-faint); min-height: 34px; margin-bottom: 1px; }
.side-row:hover { background: var(--hover); color: var(--text-dim); }
.side-row.active { background: var(--active); color: var(--text); }
.side-row.unread { color: var(--text); font-weight: 600; }
.side-row.muted { opacity: .5; }
.side-row.dm { padding: 5px 8px; min-height: 44px; }
.dm-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dm-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-name small { color: var(--text-faint); font-weight: 400; font-size: .8rem; }
.row-x { display: none; } .side-row:hover .row-x { display: inline-grid; }
.side-label { display: flex; align-items: center; gap: 4px; padding: 14px 6px 4px; color: var(--text-faint); font-size: .82rem; font-weight: 600; }
.side-label.cat:hover { color: var(--text); }
.caret { display: inline-grid; transition: transform .12s; } .caret.open { transform: rotate(90deg); }
.side-empty { padding: 12px 8px; color: var(--text-faint); font-size: .9rem; }
.review-link { color: var(--warning); }
.voice-users { padding: 0 0 4px 30px; }
.voice-user { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: var(--radius-s); color: var(--text-dim); font-size: .9rem; cursor: pointer; }
.voice-user:hover { background: var(--hover); }
.voice-user.speaking .avatar, .tile.speaking { box-shadow: 0 0 0 2px var(--success); }
.voice-bar { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--border); background: var(--bg-0); }
.voice-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.voice-bar-info strong { display: flex; gap: 5px; align-items: center; font-size: .86rem; }
.voice-bar-info strong.good { color: var(--success); } .voice-bar-info strong.wait { color: var(--warning); } .voice-bar-info strong.bad { color: var(--danger); }
.voice-bar-info small { color: var(--text-faint); font-size: .78rem; }
.user-panel { display: flex; align-items: center; gap: 2px; padding: 8px; background: var(--bg-0); flex: none; }
.user-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 3px 5px; border-radius: var(--radius-s); }
.user-chip:hover { background: var(--hover); }
.user-chip .grow { display: flex; flex-direction: column; line-height: 1.2; }
.user-chip small { color: var(--text-faint); font-size: .78rem; }
.user-panel .status-dot { border-color: var(--bg-0); }

.main { background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); flex: none; }
.top-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.top-left h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; flex: none; max-width: 60%; }
.top-icon { color: var(--text-faint); display: inline-grid; }
.top-topic { color: var(--text-faint); font-size: .9rem; padding-left: 10px; border-left: 1px solid var(--border-strong); }
.top-right { display: flex; align-items: center; gap: 2px; }
.main-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.members { background: var(--bg-1); min-height: 0; overflow: hidden; }
.members-scroll { height: 100%; overflow-y: auto; padding: 8px; }
.members-title { font-size: .82rem; font-weight: 600; color: var(--text-faint); padding: 14px 8px 4px; }
.member { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: var(--radius-s); }
.member:hover { background: var(--hover); }
.member.off { opacity: .45; }
.member .grow { display: flex; flex-direction: column; line-height: 1.2; }
.member strong { font-weight: 600; display: flex; gap: 4px; align-items: center; }
.member small { color: var(--text-faint); font-size: .78rem; }
.owner-crown { color: var(--accent-2); display: inline-grid; }

/* ---------- chat ---------- */
.chat-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.msg-scroll { flex: 1; overflow-y: auto; overflow-anchor: none; padding-bottom: 6px; }
.msg-list { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding-bottom: 14px; }
.chat-start { padding: 34px 20px 10px; }
.chat-start-ico { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 30%; background: var(--bg-4); margin-bottom: 10px; color: var(--accent-2); }
.chat-start h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.02em; }
.chat-start p { color: var(--text-dim); }
.load-more { text-align: center; color: var(--text-faint); padding: 14px; font-size: .88rem; }
.day-sep, .new-sep { display: flex; align-items: center; gap: 10px; margin: 16px 16px 4px; color: var(--text-faint); font-size: .78rem; font-weight: 600; }
.day-sep::before, .day-sep::after, .new-sep::before { content: ''; flex: 1; height: 1px; background: var(--border); }
.new-sep { color: var(--danger); margin-top: 6px; } .new-sep::before { background: var(--danger); opacity: .6; }
.msg { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 2px 16px 2px 16px; margin-top: 14px; }
.msg.grouped { margin-top: 0; }
.msg:hover { background: var(--hover); }
.msg.mentioned { background: var(--mention-bg); box-shadow: inset 3px 0 0 var(--accent); }
.msg.held { background: var(--held-bg); box-shadow: inset 3px 0 0 var(--warning); }
.msg.pending { opacity: .55; }
.msg.flash { animation: flash 1.6s; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } }
.msg-avatar { align-self: start; margin-top: 2px; border-radius: 50%; width: 40px; height: 40px; }
.msg-gutter { font-size: .68rem; color: transparent; text-align: right; padding: 5px 12px 0 0; user-select: none; }
.msg:hover .msg-gutter { color: var(--text-faint); }
.msg-main { min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.msg-author { font-weight: 700; }
.msg-author:hover { text-decoration: underline; }
.msg-head time { color: var(--text-faint); font-size: .76rem; }
.badge-ico { font-size: .8rem; } .pin-flag { color: var(--accent-2); display: inline-grid; align-self: center; }
.msg-body { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.42; }
.msg-body.jumbo { font-size: 2.6rem; line-height: 1.15; }
.msg-body.jumbo .emoji-custom { width: 3rem; height: 3rem; }
.msg-body.action { color: var(--text-dim); }
.edited { color: var(--text-faint); font-size: .72rem; }
.md-p { display: inline; }
.md-link { color: var(--link); }
.md-code { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 9px 11px; margin: 4px 0; overflow-x: auto; white-space: pre; max-width: 100%; }
.md-code code { background: none; padding: 0; color: var(--text); }
blockquote { margin: 3px 0; padding: 1px 0 1px 11px; border-left: 4px solid var(--quote-bar); color: var(--text-dim); }
.md-h { font-family: var(--font-display); margin: 4px 0 2px; line-height: 1.2; } .md-h1 { font-size: 1.45rem; } .md-h2 { font-size: 1.22rem; } .md-h3 { font-size: 1.05rem; }
.md-list { margin: 2px 0; padding-left: 24px; white-space: normal; }
.md-time { background: var(--bg-4); border-radius: 4px; padding: 0 4px; }
.spoiler { background: var(--bg-0); color: transparent; border-radius: 4px; cursor: pointer; padding: 0 2px; }
.spoiler * { visibility: hidden; }
.spoiler.shown { background: var(--bg-4); color: inherit; cursor: auto; } .spoiler.shown * { visibility: visible; }
.mention { background: color-mix(in srgb, var(--link) 18%, transparent); color: var(--link); border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: pointer; }
.mention.me { background: var(--mention-bg); color: var(--mention-text); }
.emoji-custom { width: 1.4em; height: 1.4em; vertical-align: -.3em; object-fit: contain; }
.msg-reply { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: .86rem; margin-bottom: 1px; grid-column: 1 / -1; min-width: 0; }
.msg-reply strong { color: var(--text-dim); flex: none; } .msg-reply:hover .ellip { color: var(--text); }
.msg-atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 2px; align-items: flex-start; }
.att-img { border-radius: var(--radius-m); max-height: 320px; max-width: min(420px, 100%); width: auto; height: auto; cursor: zoom-in; background: var(--bg-3); display: block; }
.att-video { border-radius: var(--radius-m); max-height: 340px; max-width: min(480px, 100%); background: #000; }
.att-audio { display: flex; flex-direction: column; gap: 6px; background: var(--bg-3); padding: 10px 12px; border-radius: var(--radius-m); max-width: 380px; width: 100%; }
.att-audio audio { width: 100%; height: 36px; }
.att-file { display: flex; align-items: center; gap: 11px; background: var(--bg-3); border: 1px solid var(--border); padding: 10px 12px; border-radius: var(--radius-m); max-width: 380px; width: 100%; color: var(--text); }
.att-file:hover { border-color: var(--border-strong); text-decoration: none; }
.att-file .grow { display: flex; flex-direction: column; } .att-file small { color: var(--text-faint); }
.att-file.small { padding: 5px 9px; width: auto; margin: 6px 6px 0 0; display: inline-flex; font-size: .88rem; }
.msg-notice { display: flex; gap: 8px; align-items: flex-start; color: var(--warning); font-size: .88rem; margin-top: 4px; }
.msg-notice.rejected { color: var(--danger); } .msg-notice small { color: var(--text-dim); }
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border); font-size: .92rem; }
.reaction:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.reaction.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.reaction b { font-size: .8rem; color: var(--text-dim); } .reaction img { width: 18px; height: 18px; display: block; }
.reaction.add { color: var(--text-faint); opacity: 0; } .msg:hover .reaction.add, .reaction.add:focus-visible { opacity: 1; }
.msg-actions { position: absolute; top: -16px; right: 16px; display: none; background: var(--bg-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); box-shadow: 0 3px 10px #0003; z-index: 2; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { display: flex; }
.msg-actions .icon-btn { width: 30px; height: 30px; }
.msg.system { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; color: var(--text-dim); margin-top: 6px; }
.msg.system > .icon { justify-self: center; color: var(--success); } .msg.system time { color: var(--text-faint); font-size: .74rem; }
.msg.system.held > .icon { color: var(--warning); }
.msg.system strong { color: var(--text); cursor: pointer; }
.poll { background: var(--bg-3); border-radius: var(--radius-m); padding: 12px; margin-top: 5px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: var(--radius-s); background: var(--bg-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.poll-opt > * { position: relative; } .poll-opt i { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width .25s; }
.poll-opt.mine { box-shadow: inset 0 0 0 1px var(--accent); } .poll-opt b { font-size: .82rem; color: var(--text-dim); }
.edit-box { margin: 3px 0; } .edit-input { width: 100%; background: var(--input-bg); border: 1px solid var(--accent); border-radius: var(--radius-s); padding: 9px 11px; resize: vertical; min-height: 44px; }
.edit-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: -22px; }
.jump-bar { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); background: var(--accent); color: var(--accent-text); font-weight: 600; padding: 6px 16px; border-radius: 99px; box-shadow: var(--shadow); z-index: 3; }
.composer-host { position: relative; padding: 0 16px; flex: none; }
.composer { display: flex; align-items: flex-end; gap: 4px; background: var(--bg-4); border-radius: var(--radius-l); padding: 5px 6px 5px 8px; box-shadow: inset 0 0 0 1px var(--border); }
.composer:focus-within { box-shadow: inset 0 0 0 1px var(--border-strong); }
.composer.disabled { align-items: center; gap: 9px; padding: 13px 16px; color: var(--text-faint); }
.composer-input { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 9px 4px; max-height: 40vh; line-height: 1.4; min-width: 0; }
.composer-btn { width: 38px; height: 38px; border-radius: 50%; }
.send-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: var(--accent-text); flex: none; }
.send-btn:hover { filter: brightness(1.08); }
.composer-extras { display: flex; flex-direction: column; }
.reply-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-3); padding: 6px 12px; border-radius: var(--radius-m) var(--radius-m) 0 0; color: var(--text-dim); font-size: .88rem; margin-bottom: -6px; padding-bottom: 12px; }
.upload-tray { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.upload-tray:empty { display: none; }
.upload-chip { position: relative; display: flex; align-items: center; gap: 7px; background: var(--bg-3); padding: 6px 6px 6px 10px; border-radius: var(--radius-s); max-width: 260px; overflow: hidden; font-size: .88rem; }
.upload-chip small { color: var(--text-faint); } .upload-chip.error { box-shadow: inset 0 0 0 1px var(--danger); } .upload-chip.error small { color: var(--danger); }
.upload-chip .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.autocomplete { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 6px); background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: var(--radius-m); padding: 6px; box-shadow: var(--shadow); z-index: 5; max-height: 300px; overflow-y: auto; }
.ac-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 9px; border-radius: var(--radius-s); }
.ac-item.active, .ac-item:hover { background: var(--active); } .ac-item small { color: var(--text-faint); }
.ac-emoji { width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 1.1rem; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.composer-dock { position: relative; flex: none; }
.typing { position: absolute; left: 22px; bottom: calc(100% + 6px); z-index: 4; max-width: calc(100% - 44px); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; font-size: .84rem; font-weight: 600; color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-3) 92%, transparent); box-shadow: 0 6px 20px rgb(0 0 0 / .28), inset 0 0 0 1px var(--border); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px) scale(.97); pointer-events: none; transition: opacity .16s, transform .18s cubic-bezier(.2,.9,.3,1.2); }
.typing.on { opacity: 1; transform: none; }
.typing.slow { padding-left: 12px; }
.typing .dots i { background: var(--accent); }
.typing-faces { display: inline-flex; } .typing-faces .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--bg-3); } .typing-faces:empty { display: none; } .typing-faces:not(:empty) { margin-right: 6px; }
.composer-dock .composer-host { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.typing-mini { display: inline-flex !important; align-items: center; gap: 5px; color: var(--accent) !important; font-weight: 600; } .typing-mini .dots i { width: 4px; height: 4px; background: var(--accent); }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.emoji-pop { position: fixed; z-index: 310; width: 344px; max-width: calc(100vw - 16px); height: 380px; max-height: 70vh; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.emoji-grid { overflow-y: auto; flex: 1; } .emoji-grid h4 { font-size: .78rem; color: var(--text-faint); margin: 8px 2px 4px; }
.emoji-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emoji-cell { height: 36px; display: grid; place-items: center; font-size: 1.35rem; border-radius: var(--radius-s); } .emoji-cell:hover { background: var(--active); } .emoji-cell img { width: 26px; height: 26px; object-fit: contain; }
.result-list { display: flex; flex-direction: column; gap: 6px; }
.result { background: var(--bg-3); border-radius: var(--radius-m); padding: 6px 4px; } .result .msg { margin-top: 2px; } .result .msg:hover { background: none; } .result .msg-actions { display: none !important; }
.result-where { display: block; padding: 4px 14px 0; color: var(--text-faint); font-weight: 600; } .result-top { display: flex; justify-content: space-between; align-items: center; padding-right: 8px; }
.search-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .search-bar .input { flex: 1 1 160px; width: auto; }
body.compact .msg { grid-template-columns: 0 minmax(0, 1fr); margin-top: 3px; } body.compact .msg-avatar, body.compact .msg-gutter { display: none; }
body.no-avatars .msg-avatar .avatar { visibility: hidden; }

/* ---------- pages ---------- */
.page { flex: 1; overflow-y: auto; padding: 20px clamp(14px, 3vw, 32px); }
.page-body { max-width: 820px; } .page-head { max-width: 640px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .page-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; }
.people-list { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-m); border-top: 1px solid var(--border); }
.person:hover { background: var(--hover); border-color: transparent; } .person:hover + .person { border-color: transparent; }
.person .grow { display: flex; flex-direction: column; line-height: 1.25; } .person small { color: var(--text-faint); } .person-acts { display: flex; gap: 6px; align-items: center; }
.pick-list { max-height: 320px; overflow-y: auto; margin: 10px 0; } .pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-s); cursor: pointer; }
.pick-row:hover { background: var(--hover); } .pick-row input { width: 17px; height: 17px; accent-color: var(--accent); } .pick-row.locked { opacity: .5; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.discover-card { background: var(--bg-3); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.discover-banner { height: 92px; background-size: cover; background-position: center; }
.discover-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .discover-body .server-icon { margin-top: -26px; box-shadow: 0 0 0 5px var(--bg-3); } .discover-body h3 { font-family: var(--font-display); } .discover-body .btn { margin-top: auto; }
.inbox-row { display: flex; gap: 12px; padding: 11px 6px; border-top: 1px solid var(--border); } .inbox-row:first-child { border-top: 0; } .inbox-row.click:hover { background: var(--hover); } .inbox-row.unread strong::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; }
.inbox-row p { color: var(--text-dim); font-size: .92rem; overflow-wrap: anywhere; } .inbox-row time { color: var(--text-faint); font-size: .78rem; white-space: nowrap; }
.profile-modal { overflow: hidden; }
.profile { background: linear-gradient(160deg, var(--p-from, var(--bg-2)), var(--p-to, var(--bg-2))); }
.profile-banner { height: 110px; background-size: cover; background-position: center; }
.profile-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px; margin-top: -42px; }
.profile-head > .avatar { box-shadow: 0 0 0 6px var(--bg-2); } .profile-head .status-dot { border-color: var(--bg-2); width: 24%; height: 24%; }
.profile-btns { display: flex; gap: 6px; padding-bottom: 4px; flex-wrap: wrap; justify-content: flex-end; }
.profile-card { margin: 12px; padding: 14px; background: color-mix(in srgb, var(--bg-0) 82%, transparent); border-radius: var(--radius-m); }
.profile-card h2 { font-family: var(--font-display); font-size: 1.35rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-card h4 { font-size: .82rem; color: var(--text-faint); margin: 14px 0 4px; }
.profile-handle { color: var(--text-dim); display: flex; gap: 10px; } .profile-handle span { color: var(--text-faint); } .profile-status { margin-top: 6px; }
.profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; } .profile-links { display: flex; flex-direction: column; gap: 3px; } .profile-links a { display: inline-flex; gap: 6px; align-items: center; }
.badge-pill { font-size: .72rem; padding: 1px 8px; border-radius: 99px; font-family: var(--font); font-weight: 600; }
.role-chips { display: flex; flex-wrap: wrap; gap: 5px; } .role-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-4); padding: 2px 9px; border-radius: 99px; font-size: .82rem; } .role-chip i { width: 10px; height: 10px; border-radius: 50%; }
.mutuals { display: flex; gap: 6px; flex-wrap: wrap; } .mod-tools { display: flex; gap: 6px; flex-wrap: wrap; } .staff-line { display: flex; gap: 6px; align-items: center; color: var(--accent-2); font-size: .86rem; margin-top: 12px; }
.note { font-size: .9rem; }

/* ---------- calls ---------- */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-0); }
.stage.compact { max-height: 44vh; flex: none; border-bottom: 1px solid var(--border); } .dm-call { flex: none; display: flex; }  .dm-call .stage { width: 100%; }
.stage-grid { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); overflow-y: auto; align-content: center; max-width: 1500px; width: 100%; margin: 0 auto; }
.stage-grid[data-count="1"] { grid-template-columns: minmax(0, 720px); justify-content: center; }
.stage-grid.has-screen .tile.screen { grid-column: 1 / -1; max-height: 62vh; width: 100%; justify-self: center; }
.tile { position: relative; background: var(--bg-2); border-radius: var(--radius-l); overflow: hidden; display: grid; place-items: center; aspect-ratio: 16 / 9; min-height: 0; transition: box-shadow .1s; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; position: absolute; inset: 0; } .tile video.mirror { transform: scaleX(-1); }
.tile-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; background: #000a; color: #fff; padding: 3px 10px; border-radius: 99px; font-size: .84rem; max-width: calc(100% - 20px); } .tile-label em { opacity: .7; font-size: .76rem; }
.stage-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 16px; } .stage-foot .btn.big { width: auto; min-width: 200px; }
.call-controls { display: flex; gap: 10px; }
.icon-btn.round { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-3); color: var(--text); }
.icon-btn.round.off { background: var(--text); color: var(--bg-0); } .icon-btn.round.live { background: var(--success); color: #04210f; } .icon-btn.round.hangup { background: var(--danger); color: #fff; }
.call-controls.compact .icon-btn.round { width: 42px; height: 42px; }
.ring-body { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px 0; } .ring-body h3 { font-family: var(--font-display); font-size: 1.4rem; }
.ring .avatar { animation: ring 1.4s infinite; } @keyframes ring { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 22px transparent; } }

/* ---------- settings shell ---------- */
.set-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; min-height: 0; }
.set-side { background: var(--bg-1); padding: 18px 10px; overflow-y: auto; } .set-side h3 { font-family: var(--font-display); padding: 0 10px 8px; font-size: 1.15rem; }
.set-nav { display: flex; flex-direction: column; gap: 1px; } .set-nav h4 { font-size: .78rem; color: var(--text-faint); padding: 16px 10px 4px; min-height: 12px; }
.set-nav button { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-s); color: var(--text-dim); }
.set-nav button:hover { background: var(--hover); color: var(--text); } .set-nav button.active { background: var(--active); color: var(--text); font-weight: 600; } .set-nav button.danger { color: var(--danger); }
.set-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .set-bar { display: flex; padding: 8px 10px 0; flex: none; }
.set-pane { flex: 1; overflow-y: auto; padding: 0 clamp(14px, 3vw, 36px) 40px; } .set-pane > * { max-width: 780px; } .set-pane > h2 { font-size: 1.6rem; margin-bottom: 16px; } .set-pane > h3 { margin: 20px 0 8px; font-size: 1rem; } .set-pane > p { margin-bottom: 12px; }
.set-pane.cfg-pane > *, .set-pane > .roles, .set-pane > .ov, .set-pane > .table, .set-pane > .vol-grid, .set-pane > .stat-row { max-width: 1100px; }
.account-card { display: flex; align-items: center; gap: 14px; } .account-card h3 { font-family: var(--font-display); }
.danger-zone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
.profile-edit-banner { height: 110px; border-radius: var(--radius-m); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 10px; margin-bottom: 12px; } .profile-edit-banner .avatar, .profile-edit-banner .server-icon { box-shadow: 0 0 0 4px var(--bg-3); }
.mic-test { display: flex; align-items: center; gap: 10px; } .mic-meter { width: 120px; height: 8px; border-radius: 99px; background: var(--bg-4); overflow: hidden; } .mic-meter i { display: block; height: 100%; width: 0; background: var(--success); transition: width .08s; }
.dialog-sec { padding: 6px 0 14px; } .dialog-sec + .dialog-sec { border-top: 1px solid var(--border); padding-top: 16px; } .dialog-sec h3 { font-family: var(--font-display); margin-bottom: 4px; } .dialog-sec p { margin-bottom: 10px; }
.create-row { display: flex; gap: 14px; align-items: flex-start; } .icon-drop { width: 84px; height: 84px; border-radius: 30%; border: 2px dashed var(--border-strong); display: grid; place-items: center; align-content: center; gap: 2px; color: var(--text-faint); flex: none; overflow: hidden; } .icon-drop img { width: 100%; height: 100%; object-fit: cover; }
.event { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); } .event:first-child { border-top: 0; } .event-date { width: 54px; height: 58px; border-radius: var(--radius-m); background: var(--bg-4); display: grid; place-items: center; align-content: center; flex: none; } .event-date b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; } .event-date small { color: var(--accent); font-weight: 700; } .event-acts { display: flex; gap: 4px; align-items: flex-start; }
.ov { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; } .ov-targets { display: flex; flex-direction: column; gap: 2px; } .ov-target { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-s); color: var(--text-dim); } .ov-target.active { background: var(--active); color: var(--text); } .ov-targets .btn { margin-top: 8px; }
.ov-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); } .ov-row .grow { display: flex; flex-direction: column; } .ov-row small { color: var(--text-faint); }
.tri { display: inline-flex; border-radius: var(--radius-s); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-strong); flex: none; } .tri-btn { width: 36px; height: 30px; display: grid; place-items: center; color: var(--text-faint); } .tri-btn.active.deny { background: var(--danger); color: #fff; } .tri-btn.active.inherit { background: var(--bg-4); color: var(--text); } .tri-btn.active.allow { background: var(--success); color: #04210f; }
.roles { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; } .role-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; } .role-list .btn { margin-bottom: 8px; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-s); color: var(--text-dim); } .role-row:hover { background: var(--hover); } .role-row.active { background: var(--active); color: var(--text); } .role-move { display: none; } .role-row:hover .role-move { display: inline-flex; }
.role-edit h3 { margin: 18px 0 8px; font-size: 1rem; } .sticky-foot { position: sticky; bottom: 0; background: var(--bg-2); padding: 10px 0; }
.emoji-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; } .emoji-tile { display: flex; align-items: center; gap: 8px; background: var(--bg-3); padding: 8px; border-radius: var(--radius-m); } .emoji-tile img { width: 32px; height: 32px; object-fit: contain; } .emoji-tile code { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; } .stat { background: var(--bg-3); border-radius: var(--radius-m); padding: 14px 16px; display: flex; flex-direction: column; } .stat b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; } .stat span { color: var(--text-dim); font-size: .9rem; } .stat small { color: var(--text-faint); font-size: .78rem; }
.stat-row.small .stat b { font-size: 1.2rem; } .stat-row.small { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.bars { display: flex; gap: 8px; align-items: flex-end; height: 150px; background: var(--bg-3); border-radius: var(--radius-m); padding: 14px; } .bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; } .bar-col i { width: 100%; max-width: 46px; background: linear-gradient(var(--accent-2), var(--accent)); border-radius: 5px 5px 2px 2px; } .bar-col b { font-size: .78rem; order: -1; } .bar-col small { color: var(--text-faint); font-size: .74rem; }
.review-list { display: flex; flex-direction: column; gap: 10px; } .review-item { background: var(--bg-3); border-radius: var(--radius-m); padding: 12px 14px; box-shadow: inset 3px 0 0 var(--warning); } .review-item header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .review-item header .grow { display: flex; flex-direction: column; line-height: 1.2; } .review-item header small { color: var(--text-faint); }
.review-content { background: var(--bg-2); border-radius: var(--radius-s); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; } .review-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .review-item footer { display: flex; gap: 8px; margin-top: 10px; }
.audit-list { display: flex; flex-direction: column; } .audit-row { display: flex; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); align-items: flex-start; } .audit-row > .icon { margin-top: 3px; color: var(--text-faint); } .audit-row.warn > .icon { color: var(--warning); } .audit-row.critical > .icon { color: var(--danger); }
.audit-row p { color: var(--text-dim); font-size: .86rem; overflow-wrap: anywhere; } .audit-row time { color: var(--text-faint); font-size: .78rem; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }

/* ---------- admin ---------- */
.cfg-top { display: flex; gap: 8px; margin-bottom: 12px; } .cfg-top .input { flex: 1; }
.cfg { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.cfg-cats { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; max-height: calc(100dvh - 190px); overflow-y: auto; } .cfg-cat { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-s); color: var(--text-dim); } .cfg-cat:hover { background: var(--hover); } .cfg-cat.active { background: var(--active); color: var(--text); font-weight: 600; } .cfg-cat small { color: var(--text-faint); font-size: .76rem; font-weight: 400; }
.cfg-subs { margin-bottom: 10px; } .cfg-count { color: var(--text-faint); font-size: .86rem; margin-bottom: 4px; } .cfg-sub { font-size: .92rem; margin: 18px 0 4px; color: var(--accent-2); font-family: var(--font-display); }
.cfg-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-s); border-top: 1px solid var(--border); } .cfg-row.wide { flex-direction: column; align-items: stretch; } .cfg-row.changed { box-shadow: inset 3px 0 0 var(--accent); } .cfg-row.dirty { background: var(--accent-soft); }
.cfg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cfg-text strong { font-weight: 600; cursor: default; } .cfg-text strong.has-more { cursor: help; } .cfg-text strong.has-more::after { content: '?'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 7px; border-radius: 50%; font-size: .68rem; font-weight: 800; color: var(--text-faint); box-shadow: inset 0 0 0 1.5px var(--border-strong); vertical-align: 2px; }
.cfg-more { display: none; flex-direction: column; gap: 2px; padding-top: 3px; } .cfg-text.open .cfg-more { display: flex; } .cfg-text small { color: var(--text-dim); font-size: .86rem; } .cfg-text code { align-self: flex-start; font-size: .72rem; background: none; color: var(--text-faint); padding: 0; cursor: copy; }
.seg.mini { display: inline-flex; background: var(--bg-4); border-radius: 10px; padding: 3px; gap: 2px; } .seg.mini button { padding: 5px 10px; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--text-dim); } .seg.mini button.on { background: var(--accent); color: var(--accent-text); }
.cfg-ctl { display: flex; align-items: center; gap: 6px; flex: none; } .cfg-row.wide .cfg-ctl { align-items: flex-start; } .cfg-row.wide .cfg-ctl .input { flex: 1; } .cfg-ctl select.input, .cfg-ctl input[type="text"].input, .cfg-ctl input[type="password"].input { width: 220px; } .color-pair { display: inline-flex; gap: 6px; }
.cfg-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; background: var(--bg-0); border: 1px solid var(--accent); padding: 10px 14px; border-radius: var(--radius-m); margin-top: 12px; box-shadow: var(--shadow); font-weight: 600; }
.spark-wrap { background: var(--bg-3); border-radius: var(--radius-m); padding: 10px 14px 6px; color: var(--accent); margin-bottom: 8px; } .spark { width: 100%; height: 70px; display: block; } .spark-wrap small { color: var(--text-faint); }
.vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; } .vol { background: var(--bg-3); border-radius: var(--radius-m); padding: 14px; display: flex; flex-direction: column; gap: 6px; } .vol.offline, .vol.ejected { opacity: .75; } .vol header { display: flex; gap: 10px; align-items: center; } .vol header .grow { display: flex; flex-direction: column; line-height: 1.2; } .vol header small { color: var(--text-faint); } .vol footer { margin-top: 6px; }
.meter { height: 8px; border-radius: 99px; background: var(--bg-4); overflow: hidden; } .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); } .meter i.hot { background: var(--danger); }
.test-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } .test-row:first-child { border-top: 0; } .test-row .chip { margin: 0; min-width: 48px; justify-content: center; } .test-row small { color: var(--text-dim); }

/* ---------- auth + legal ---------- */
.auth { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg-0); overflow: hidden auto; }
.auth-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember-glow { position: absolute; left: -10%; bottom: -45%; width: 90vmax; height: 90vmax; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent) 55%, transparent 72%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .82; } }
.ember-sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent); opacity: 0; animation: spark linear infinite; }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(40px, -70vh) scale(.3); opacity: 0; } }
.auth-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 6vw, 80px); gap: 8px; }
.auth-brand { display: flex; align-items: baseline; gap: 14px; } .auth-logo { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.auth-brand h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 11vw, 9rem); line-height: .86; letter-spacing: -.055em; }
.auth-tag { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); color: var(--text-dim); } .auth-online { display: flex; align-items: center; gap: 8px; color: var(--text-dim); margin-top: 10px; } .auth-online i { width: 9px; height: 9px; border-radius: 50%; background: var(--online); }
.auth-main { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(18px, 4vw, 56px); max-width: 520px; width: 100%; justify-self: center; }
.auth-card { background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-l); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); } .auth-card h2 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 16px; letter-spacing: -.02em; } .auth-card > p { margin-bottom: 14px; }
.auth-error { color: var(--danger); font-weight: 600; margin-bottom: 10px; } .auth-switch { margin-top: 16px; color: var(--text-dim); } .auth-help { margin-top: 6px; } .agree { margin: 4px 0 14px; align-items: flex-start; font-size: .92rem; color: var(--text-dim); } .agree input { margin-top: 2px; }
.auth-invite { display: flex; align-items: center; gap: 12px; background: var(--bg-3); border-radius: var(--radius-m); padding: 12px 14px; } .auth-invite div { display: flex; flex-direction: column; line-height: 1.25; } .auth-invite small { color: var(--text-faint); }
.auth-foot { display: flex; gap: 16px; font-size: .86rem; color: var(--text-faint); flex-wrap: wrap; } .auth-foot a { color: var(--text-dim); }
.auth.gate { grid-template-columns: 1fr; place-items: center; }
.boot, .boot-error { height: 100dvh; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--text-dim); text-align: center; padding: 20px; } .boot-logo { font-size: 3rem; animation: breathe 1.6s ease-in-out infinite; }
.legal-body { overflow: auto; height: auto; background: var(--bg-2); } .legal { max-width: 68ch; margin: 0 auto; padding: 40px 20px 80px; line-height: 1.6; }
.legal h1 { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.03em; line-height: 1; margin: 18px 0 6px; } .legal h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 28px 0 8px; } .legal p, .legal li { color: var(--text-dim); margin-bottom: 10px; } .legal ul { padding-left: 22px; } .legal-date, .legal-foot { color: var(--text-faint); font-size: .9rem; } .legal-foot { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .app-cols, .app-cols.with-members { grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr); }
  .members { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(84vw, 280px); transform: translateX(100%); transition: transform .18s; box-shadow: var(--shadow); display: block !important; }
  body.show-members .members { transform: none; } body.show-members .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .cfg, .roles, .ov { grid-template-columns: 1fr; } .cfg-cats { position: static; max-height: 180px; } .role-list { position: static; }
}
@media (max-width: 760px) {
  .mobile-only { display: inline-grid !important; } .wide-only { display: none !important; }
  .app-cols, .app-cols.with-members { grid-template-columns: minmax(0, 1fr); }
  .rail, .sidebar { position: fixed; z-index: 60; top: 0; bottom: 0; transition: transform .18s; }
  .rail { left: 0; width: var(--rail-width); transform: translateX(-340px); } .sidebar { left: var(--rail-width); width: min(calc(100vw - var(--rail-width) - 40px), 290px); transform: translateX(-380px); border-radius: 0; }
  body.show-nav .rail, body.show-nav .sidebar { transform: none; } body.show-nav .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .msg { padding-left: 10px; padding-right: 10px; grid-template-columns: 48px minmax(0, 1fr); } .msg-actions { right: 8px; } .composer-host { padding: 0 8px; } .typing { left: 12px; }
  /* phone polish */
  .top-extra { display: none !important; } .topbar { padding: 0 6px 0 4px; gap: 4px; padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
  .top-left { gap: 6px; } .top-left h2 { font-size: 1.08rem; } .icon-btn { width: 40px; height: 40px; }
  .composer-input, .input, select.input, textarea.input { font-size: 16px; }
  .msg { -webkit-touch-callout: none; } .msg-actions { display: none !important; }
  .set-row { align-items: flex-start; } .set-row-text { flex: 1 1 60%; min-width: 58%; } .set-row > select.input, .set-row > .input { flex: 1 1 100%; width: 100%; }
  .side-row { min-height: 44px; } .side-row.dm { min-height: 52px; }
  .rail, .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .modal-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); } .modal-foot .btn { flex: 1; }
  .menu { min-width: min(260px, 80vw); } .menu-item { min-height: 44px; }
  .jump-bar { bottom: 8px; }
  .top-topic { display: none; } .top-left h2 { max-width: none; flex: 1; }
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .auth-side { padding-bottom: 8px; padding-top: 40px; } .auth-main { justify-content: flex-start; }
  .set-shell { grid-template-columns: 1fr; } .set-shell .set-main { display: none; } .set-shell.in-pane .set-side { display: none; } .set-shell.in-pane .set-main { display: flex; }
  .modal-back { padding: 0; align-items: end; } .modal { border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 94dvh; } .modal.size-full { height: 100dvh; max-height: 100dvh; border-radius: 0; } .modal-foot { border-radius: 0; flex-wrap: wrap; }
  .form-grid, .two-col { grid-template-columns: 1fr; } .set-row { flex-wrap: wrap; } .cfg-row { flex-wrap: wrap; } .cfg-row:has(select, input.input, textarea) .cfg-ctl { flex: 1 1 100%; } .cfg-ctl .input { flex: 1; width: auto !important; } .seg.mini button { padding: 7px 10px; }
  .table { display: block; overflow-x: auto; white-space: nowrap; } .person { flex-wrap: wrap; } .stage-grid { padding: 8px; }
  .toasts { right: 4vw; bottom: 84px; }
  .emoji-pop { left: 8px !important; right: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
@media print { .rail, .sidebar, .members, .composer-host, .topbar { display: none !important; } body { overflow: visible; height: auto; } }

.role-pick { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-dim); font-weight: 600; } .role-pick select { width: auto; min-width: 150px; }

/* ---------- 1.3: health, stats ---------- */
.hq-health ul { list-style: none; display: grid; gap: 8px; margin: 8px 0 12px; }
.hq-health li { display: flex; gap: 10px; align-items: flex-start; }
.hq-health li i { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ok, #4cc38a); }
.hq-health li.warn i { background: #f5b83d; } .hq-health li.bad i { background: var(--danger, #f0524f); box-shadow: 0 0 0 4px #f0524f33; }
.hq-health li div { display: grid; } .hq-health li small { color: var(--text-dim); }
.hq-health-sum { font-weight: 800; font-size: 1.05rem; } .hq-health-sum.bad { color: var(--danger, #f0524f); } .hq-health-sum.warn { color: #f5b83d; } .hq-health-sum.ok { color: var(--ok, #4cc38a); }
.st-page { padding: 24px; max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; overflow: auto; height: 100%; }
.st-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; } .st-head h1 { font-size: 1.8rem; }
.st-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.st-big { font-size: 1.7rem; font-weight: 800; display: flex; align-items: baseline; gap: 8px; } .st-big small { font-size: .85rem; font-weight: 600; color: var(--text-dim); }
.st-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; } .st-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; } .st-bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 0; }
.st-axis { display: flex; justify-content: space-between; color: var(--text-faint); margin-top: 4px; }
.st-top { list-style: none; display: grid; gap: 8px; } .st-top li { display: flex; align-items: center; gap: 10px; } .st-top li b { margin-left: auto; } .st-rank { width: 20px; color: var(--text-faint); font-weight: 800; }
@media (max-width: 760px) { .st-page { padding: 14px; } .st-body { grid-template-columns: 1fr; } }

.install-hint { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--bg-3); box-shadow: 0 16px 50px rgb(0 0 0 / .45), inset 0 0 0 1px var(--border); animation: rise .25s ease-out; }
.install-hint img { width: 40px; height: 40px; border-radius: 10px; } .install-hint .grow { display: grid; } .install-hint small { color: var(--text-dim); }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.device-push h3 { margin-bottom: 4px; }

.search-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.search-chips button { flex: none; padding: 7px 14px; border-radius: 99px; background: var(--bg-4); color: var(--text-dim); font-weight: 600; font-size: .9rem; }
.search-chips button.on { background: var(--accent); color: var(--accent-text); }
.search-bar .from-in { max-width: 220px; }
@media (max-width: 760px) {
  .search-modal { width: 100vw !important; max-width: none !important; height: 100dvh; max-height: none !important; border-radius: 0 !important; }
  .search-modal .search-bar { flex-wrap: wrap; } .search-bar .from-in { max-width: none; flex: 1; } .search-bar select { flex: 1; }
}
/* voice messages */
.vn { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border); margin-top: 4px; }
.vn audio { display: none; }
.vn-play { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); }
.vn-mid { flex: 1; display: grid; gap: 4px; } .vn-mid small { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vn-track { height: 6px; border-radius: 99px; background: var(--bg-4); cursor: pointer; overflow: hidden; } .vn-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 8px; border-radius: 14px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border); }
.rec-bar > span { flex: 1; color: var(--text-dim); font-weight: 600; } .rec-time { font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #f0524f; animation: recp 1s ease-in-out infinite; } @keyframes recp { 50% { opacity: .3; } }
/* video previews */
.att-vwrap { position: relative; display: inline-block; max-width: 100%; } .att-vwrap video { max-width: 100%; border-radius: 12px; background: #000; display: block; }
.att-dur { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 8px; background: rgb(0 0 0 / .6); color: #fff; font-size: .78rem; font-weight: 700; pointer-events: none; }

/* custom staff roles */
.role-dot{width:14px;height:14px;border-radius:50%;flex:none}
.staff-role-editor .cap-tools{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}
.staff-role-editor .cap-tools select{max-width:220px}
.cap-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cap-group{padding:10px 12px}
.cap-group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cap-row{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:.92em;cursor:pointer}
.cap-row input{margin-top:3px;accent-color:var(--accent)}
.color-input{height:40px;padding:4px}
@media (max-width:640px){.cap-groups{grid-template-columns:1fr}}

/* weekly highlights */
.msg.system.highlights{display:block;padding:8px 16px}
.hl-card{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px;background:var(--bg-2, rgba(255,255,255,.03));max-width:560px}
.hl-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--accent)}
.hl-head strong{color:var(--text)}
.hl-head time{margin-left:auto;font-size:.8em;color:var(--text-faint)}
.hl-card ul{margin:0;padding-left:18px;display:grid;gap:3px}

.upd-restart{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.upd-restart small{display:block}

/* loading screen */
.loading-screen{position:fixed;inset:0;display:grid;grid-template-rows:1fr auto;background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--accent) 14%,var(--bg)) 0%,var(--bg) 60%);color:var(--text);z-index:50;padding:24px 20px calc(28px + env(safe-area-inset-bottom))}
.ld-center{display:grid;justify-items:center;align-content:center;gap:12px}
.ld-art{height:150px;display:grid;place-items:center;animation:ld-bob 2.2s ease-in-out infinite}
.ld-art svg{filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--accent) 45%,transparent))}
.ld-word{font-family:var(--font-display,inherit);font-weight:800;font-size:1.6rem;letter-spacing:.02em}
.ld-bar{width:180px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.ld-bar i{display:block;width:40%;height:100%;border-radius:4px;background:var(--accent);animation:ld-slide 1.3s ease-in-out infinite}
.ld-status{color:var(--text-dim);font-size:.92rem;min-height:1.3em;max-width:340px;text-align:center}
.ld-tip{max-width:460px;margin:0 auto;text-align:center;display:grid;gap:4px}
.ld-tip strong{font-size:.78rem;color:var(--accent);letter-spacing:.04em}
.ld-tip-text{color:var(--text-dim);transition:opacity .25s;line-height:1.45}
.ld-tip-text.fade{opacity:0}
@keyframes ld-bob{50%{transform:translateY(-8px)}}
@keyframes ld-slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.ld-art,.ld-bar i{animation:none}}
.site-banner .spinner.tiny{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-2px}
.site-banner .btn{margin-left:10px;padding:2px 10px}

/* titles, starboard */
.user-title{--t:var(--accent);font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;color:var(--t);background:color-mix(in srgb,var(--t) 16%,transparent);border:1px solid color-mix(in srgb,var(--t) 35%,transparent);white-space:nowrap;align-self:center}
.msg.system.starred{display:block;padding:6px 16px}
.star-card{border:1px solid var(--border);border-left:3px solid #f5c542;border-radius:10px;padding:10px 12px;max-width:560px;cursor:pointer;display:grid;gap:6px}
.star-card:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.star-head{display:flex;align-items:center;gap:8px}
.star-count{margin-left:auto;font-weight:700}
.star-img{max-width:100%;max-height:280px;border-radius:8px;object-fit:cover}
.star-card time{font-size:.75rem;color:var(--text-faint)}
.profile-title{justify-self:start;margin:4px 0}
/* Full-screen panels (settings, admin) on phones: keep the top row clear of the status bar / notch, and always reachable. */
.set-side-head{display:flex;align-items:center;gap:6px}
.set-side-head h3{padding-bottom:8px}
@media (max-width: 760px) {
  .modal.size-full .set-side{padding-top:max(14px, env(safe-area-inset-top));padding-bottom:max(14px, env(safe-area-inset-bottom))}
  .modal.size-full .set-bar{position:sticky;top:0;z-index:3;background:var(--bg-2);padding-top:max(8px, env(safe-area-inset-top));padding-bottom:6px;border-bottom:1px solid var(--border)}
  .modal.size-full .set-bar .icon-btn,.set-side-head .icon-btn{width:44px;height:44px}
  .modal.size-full .set-pane{padding-bottom:max(20px, env(safe-area-inset-bottom))}
  .modal.size-full .modal-head{padding-top:max(12px, env(safe-area-inset-top))}
  .modal:not(.size-full) .modal-head{position:sticky;top:0;z-index:2;background:inherit}
}

/* drive options */
.vol{border-top:3px solid var(--vol, transparent)}
.vol.paused{opacity:.75}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;color:var(--text-faint)}
.swatch.on{outline:2px solid var(--text);outline-offset:2px}

/* pool overview */
.pool-card{padding:16px;display:grid;gap:12px;margin-bottom:18px}
.pool-head{display:flex;align-items:flex-start;gap:12px}
.pool-total{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1.1}
.pool-bar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--text) 8%,transparent);gap:2px}
.pool-bar>i{display:block;height:100%;position:relative;min-width:2px}
.pool-bar>i>b{position:absolute;inset:0 auto 0 0}
.pool-bar.kinds{height:10px;gap:0}.pool-bar.kinds>i{opacity:1}
.pool-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--text-dim)}
.pool-legend span{display:inline-flex;align-items:center;gap:6px}
.pool-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.pool-legend i.free{background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid var(--border)}
.pool-drives{display:grid;gap:4px}
.pool-drive{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer}
.pool-drive:hover,.pool-drive:focus-visible{background:color-mix(in srgb,var(--text) 5%,transparent)}
.pool-drive .grow{display:grid;gap:2px;min-width:0}
.pool-drive.offline,.pool-drive.ejected{opacity:.6}
.pool-drive .dot,.split-row .dot{width:12px;height:12px;border-radius:50%;flex:none}
.mini-meter{display:block;height:4px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;max-width:220px}
.mini-meter i{display:block;height:100%;background:var(--accent)}.mini-meter i.hot{background:var(--danger,#e5484d)}
.info-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--text-dim);flex:none}
.pool-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);color:var(--text);width:100%;text-align:left}
.pool-toggle>svg:last-child{transform:rotate(90deg);transition:transform .2s}
.pool-toggle.open>svg:last-child{transform:rotate(-90deg)}
.pool-split{display:grid;gap:14px;padding:4px 2px}
.split-row{display:grid;gap:6px}
.split-top{display:flex;align-items:center;gap:8px}
.split-top .input{width:110px}
.split-row input[type=range]{width:100%;accent-color:var(--c)}
.danger-text{color:var(--danger,#e5484d)}
/* drive info sheet */
.drive-info h4{margin:14px 0 8px}
.health-verdict{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;margin-bottom:10px}
.health-verdict div{display:grid}
.health-verdict.ok{background:color-mix(in srgb,#5ad17a 14%,transparent);color:#5ad17a}
.health-verdict.bad{background:color-mix(in srgb,#e5484d 16%,transparent);color:#ff6b6b}
.health-verdict.unknown{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text-dim)}
.health-verdict small{color:var(--text-dim)}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.kv-item{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent);display:grid;gap:2px;min-width:0}
.kv-item small{color:var(--text-faint);font-size:.72rem}
.kv-item strong{overflow-wrap:anywhere;font-size:.92rem}
.kv-item.warn strong{color:#f5a742}
.vol-grid.single{grid-template-columns:1fr}
.drive-health .spinner.tiny{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite;vertical-align:-2px}
@media (max-width: 760px) {
  .admin-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:var(--bg-2);margin-left:calc(-1 * clamp(14px, 3vw, 36px));margin-right:calc(-1 * clamp(14px, 3vw, 36px));padding:6px clamp(14px, 3vw, 36px) 8px;border-bottom:1px solid var(--border)}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs .tab{flex:none;white-space:nowrap}
}

/* owner zone */
.owner-gate{max-width:440px;margin:20px auto;padding:22px;display:grid;gap:10px;text-align:center;justify-items:center}
.owner-gate .inline-form{width:100%}
.owner-gate-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.owner-list{padding:4px 0}
.owner-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--border)}
.owner-item:first-child{border-top:0}
.owner-item .grow{display:grid;gap:2px;min-width:0}
.owner-item small{color:var(--text-dim)}
.owner-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 6%,transparent);flex:none}
@media (max-width:560px){.owner-item{flex-wrap:wrap}.owner-item .btn{margin-left:46px}}

/* This PC */
.pc-hero{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,var(--bg-1));margin-bottom:12px}
.pc-hero .grow{display:grid;gap:2px;min-width:0}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pc-tile{padding:12px 14px;border-radius:14px;background:var(--bg-1);border:1px solid var(--border);display:grid;gap:3px;align-content:start}
.pc-tile>small:first-child{color:var(--text-faint);font-size:.75rem}
.pc-big{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.15}
.pc-tile.warm .pc-big{color:#f5a742}.pc-tile.hot .pc-big{color:#ff6b5c}
.spark{width:100%;height:44px;margin-top:6px;display:block}
.spark-line{fill:none;stroke:var(--c);stroke-width:2;vector-effect:non-scaling-stroke}
.spark-fill{fill:color-mix(in srgb,var(--c) 18%,transparent)}
.pc-cores{display:flex;gap:4px;height:56px;align-items:flex-end;padding:8px;border-radius:12px;background:var(--bg-1);border:1px solid var(--border)}
.pc-core{flex:1;height:100%;display:flex;align-items:flex-end;background:color-mix(in srgb,var(--text) 5%,transparent);border-radius:4px;overflow:hidden}
.pc-core i{display:block;width:100%;background:var(--accent);transition:height .4s}

.raid-card{max-width:520px;padding:20px;display:grid;gap:10px}
.raid-card .raid-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,#f5a742 18%,transparent);color:#f5a742}
.raid-card.on{border-color:#f5a742}
.raid-card.on .raid-ico{background:#f5a742;color:#1b1512}
@media (max-width:560px){.pc-grid{grid-template-columns:1fr 1fr}.pc-big{font-size:1.3rem}.pc-tile{padding:10px 12px}}

/* notification center */
.nc-modal .modal-body{padding-top:6px}
.nc-tabs{margin-bottom:8px}
.nc-list{display:grid;gap:2px;min-height:120px}
.nc-day{margin:12px 4px 4px;color:var(--text-faint);font-size:.75rem;font-weight:700}
.nc-row{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:12px;position:relative;transition:transform .18s,opacity .18s,background .15s}
.nc-row.click{cursor:pointer}.nc-row.click:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.nc-row.unread{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.nc-row.gone{transform:translateX(-110%);opacity:0}
.nc-row .grow{display:grid;gap:2px;min-width:0}
.nc-row p{margin:0;color:var(--text-dim);font-size:.9rem;overflow-wrap:anywhere}
.nc-row time{font-size:.75rem;color:var(--text-faint)}
.nc-ico{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);flex:none}
.nc-type{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;border:2px solid var(--bg-2)}
.nc-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.nc-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--text-faint);flex:none;opacity:.5}
.nc-row:hover .nc-x{opacity:1}
/* turn-on prompt */
.push-prompt{position:fixed;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));max-width:480px;margin:0 auto;z-index:70;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--bg-3);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.4);animation:pp-in .3s ease-out}
.push-prompt .grow{display:grid;gap:2px}.push-prompt small{color:var(--text-dim)}
.pp-ico{font-size:1.6rem}.pp-btns{display:flex;flex-direction:column;gap:6px}
@keyframes pp-in{from{transform:translateY(20px);opacity:0}}
/* quiet hours */
.quiet-times{display:flex;gap:12px;padding:4px 0 10px}
.quiet-times label{display:grid;gap:4px;font-size:.8rem;color:var(--text-dim)}
.time-in{width:130px}

.maint-screen{min-height:100dvh;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--accent) 12%,var(--bg)) 0%,var(--bg) 60%)}
.maint-screen h1{font-family:var(--font-display);margin:6px 0 0}
.invite-opts{display:grid;gap:10px;padding:12px;margin-top:12px}