:root {
  --bg:#F9F9F9; --card:#FFFFFF; --text:#0F0F0F; --text2:#606060; --line:#E5E5E5; --hover:#F2F2F2;
  --blue:#065FD4; --blue-soft:rgba(6,95,212,.12); --chip:#F2F2F2;
  --ok:#0B8043; --warn:#B07800; --bad:#C5221F; --rec:#E53935; --rec-soft:rgba(229,57,53,.12); --violet:#8E24AA;
  --body:"Roboto", Arial, "Helvetica Neue", sans-serif;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0F0F0F; --card:#1F1F1F; --text:#F1F1F1; --text2:#AAAAAA; --line:#3A3A3A; --hover:#2A2A2A;
    --blue:#3EA6FF; --blue-soft:rgba(62,166,255,.16); --chip:#2A2A2A;
    --ok:#34C77B; --warn:#F2C14E; --bad:#FF6B5E; --rec:#FF5A52; --rec-soft:rgba(255,90,82,.16); --violet:#B65BD6; }
}
* { box-sizing:border-box; }
html { color-scheme:light dark; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 var(--body); -webkit-text-size-adjust:100%; }
a { color:inherit; }
button, select, input { font:inherit; color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--text2); font-weight:400; }

.bar { position:sticky; top:0; z-index:5; background:var(--card); border-bottom:1px solid var(--line); }
.bar-in { max-width:960px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:14px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none; }
.logo img { width:28px; height:28px; }
.back { margin-left:auto; color:var(--text2); text-decoration:none; font-size:13px; }
.back:hover { color:var(--text); }
.wrap { max-width:960px; margin:0 auto; padding:24px 24px 8px; }
.noscript { color:var(--text2); }

h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:-.01em; }
h2 { font-size:16px; font-weight:500; margin:0 0 12px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 18px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); cursor:pointer; font-weight:500; white-space:nowrap; transition:background-color .15s, border-color .15s, opacity .15s; }
.btn:hover { background:var(--hover); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.primary:hover { opacity:.88; }
.btn.big { min-height:52px; font-size:16px; padding:0 28px; border-radius:26px; }
.btn.quiet { border-color:transparent; color:var(--text2); }
.btn.quiet:hover { color:var(--text); }
.link { background:none; border:0; padding:6px 0; color:var(--text2); cursor:pointer; }
.link:hover { color:var(--text); }
input, select { background:var(--card); border:1px solid var(--line); border-radius:10px; min-height:40px; padding:0 12px; }
input:focus, select:focus { border-color:var(--blue); outline:none; }

/* главный экран */
.home { max-width:380px; margin:8vh auto 0; display:flex; flex-direction:column; gap:16px; text-align:center; }
.home .btn.big { width:100%; }
.hello { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:12px; align-self:center; width:min(600px, calc(100vw - 32px)); }
/* заголовок по центру; «я не Дима» — под ним, по правому краю (под последним словом) */
.hello-head { display:flex; flex-direction:column; align-items:flex-end; width:fit-content; max-width:100%; margin:0 auto; }
.hello h1 { max-width:400px; font-size:28px; line-height:1.2; overflow-wrap:anywhere; text-align:center; }
.hello h1.greet { line-height:1.25; }
.hello-name { font-size:36px; font-weight:800; letter-spacing:-.01em; }
.hello-rest { font-size:21px; font-weight:600; }
.not-me { margin:0 -6px 0 0; white-space:nowrap; background:none; border:0; padding:2px 6px; font-size:12px; color:var(--text2); cursor:pointer; border-radius:6px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
@media (max-width: 640px) {
  .hello-name { font-size:30px; } .hello-rest { font-size:18px; }
}
.not-me:hover { color:var(--text); }
.hello-form { display:flex; gap:8px; width:100%; margin-top:8px; }
.hello-form input { flex:1; min-width:0; min-height:48px; font-size:16px; }
.hello-form .btn { min-height:48px; border-radius:24px; }
.or { display:flex; align-items:center; gap:12px; color:var(--text2); font-size:13px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.code-form { display:flex; gap:8px; }
.code-in { flex:1; min-width:0; font-family:var(--mono); font-size:20px; letter-spacing:.25em; text-transform:uppercase; text-align:center; min-height:48px; }
.code-in::placeholder { letter-spacing:.15em; }
.code-form .btn { min-height:48px; border-radius:24px; }
.join-form { display:flex; flex-direction:column; gap:10px; text-align:left; }
.join-form label { color:var(--text2); font-size:13px; }
.join-form input { min-height:48px; font-size:16px; }
.err { color:var(--bad); margin:0; }
.err .btn { display:block; margin-top:10px; }

/* главная sasite.world: шапка с живой волной, карточка «создать / войти», три плашки «что умеет» */
.home.landing { max-width:640px; margin-top:5vh; gap:22px; }
.hero { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 0 0; }
.hero-wave { display:flex; align-items:center; justify-content:center; gap:3px; height:64px; width:min(440px, 100%); margin:0 auto 6px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.hero-wave i { flex:1 1 0; max-width:5px; min-height:3px; border-radius:3px; background:linear-gradient(180deg, var(--rec), var(--violet));
  transform-origin:50% 50%; animation:hw ease-in-out infinite alternate; }
@keyframes hw { from { transform:scaleY(.28); opacity:.65; } to { transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hero-wave i { animation:none; } }
.hero .hello { margin-bottom:0; }
.hero-sub { max-width:470px; margin:2px auto 0; color:var(--text2); font-size:15px; line-height:1.55; text-wrap:balance; }
.start-card { width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:20px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.18); }
.start-card .btn.big { width:100%; }
#createBtn::before { content:""; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
#createBtn:hover { box-shadow:0 8px 22px -8px var(--rec); }
.start-card .or { font-size:12.5px; }
.start-card .err { text-align:center; font-size:13.5px; }
.feats { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; text-align:left; }
.feats li { display:flex; flex-direction:column; gap:3px; padding:6px 4px; }
/* иконки «стеклом»: полупрозрачная плитка с бликом и мягким свечением, внутри — тонкая линия с градиентом */
.feats .f-ico { position:relative; width:48px; height:48px; display:grid; place-items:center; margin-bottom:12px; border-radius:15px;
  background:linear-gradient(140deg, rgba(255,90,122,.20), rgba(123,97,255,.14) 60%, rgba(123,97,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px -12px rgba(192,75,232,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.feats .f-ico::after { content:""; position:absolute; inset:1px 1px 50% 1px; border-radius:14px 14px 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.14), transparent); pointer-events:none; }
.feats .f-ico svg { width:24px; height:24px; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(192,75,232,.45)); }
@media (prefers-color-scheme: light) {
  .feats .f-ico { box-shadow:inset 0 0 0 1px rgba(123,97,255,.18), inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px -14px rgba(192,75,232,.6); }
}
.feats b { font-size:14px; font-weight:500; }
.feats small { color:var(--text2); font-size:12.5px; line-height:1.45; }
/* главная «Запись голосов»: пункты друг под другом, маленькая иконка слева от заголовка и подписи (талк — без изменений) */
.feats.feats-stack { width:100%; max-width:420px; margin:0 auto; padding:0 22px; grid-template-columns:minmax(0, 1fr); gap:12px; }
.feats.feats-stack li { display:grid; grid-template-columns:30px minmax(0, 1fr); column-gap:12px; row-gap:1px; align-items:center; padding:0; }
.feats.feats-stack .f-ico { grid-row:span 2; width:30px; height:30px; margin:0; border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(192,75,232,.6); }
.feats.feats-stack .f-ico::after { border-radius:8px 8px 40% 40%; }
.feats.feats-stack .f-ico svg { width:16px; height:16px; stroke-width:2.1; filter:drop-shadow(0 0 3px rgba(192,75,232,.4)); }
.feats.feats-stack b, .feats.feats-stack small { grid-column:2; min-width:0; }
@media (prefers-color-scheme: light) {
  .feats.feats-stack .f-ico { box-shadow:inset 0 0 0 1px rgba(123,97,255,.18), inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px -9px rgba(192,75,232,.55); }
}
@media (max-width: 640px) { .feats.feats-stack { padding:0 18px; gap:12px; } }
/* «Как прошла запись?» 👍 / 😡 */
.card.rate { background:linear-gradient(135deg, var(--blue-soft), transparent 60%), var(--card); animation:rate-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rate-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.rate-top { display:flex; align-items:center; gap:12px; }
.rate-q { font-size:18px; margin-right:auto; }
.rate-close { font-size:13px; }
.rate-btns { display:flex; gap:12px; margin-top:12px; }
.rate-btn { flex:1 1 0; max-width:220px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; border-radius:16px;
  border:2px solid var(--line); background:var(--card); cursor:pointer; transition:transform .15s, border-color .15s, background-color .15s; }
.rate-btn:hover { transform:translateY(-2px); border-color:var(--text2); }
.rate-btn:active { transform:scale(.96); }
.rate-ico { font-size:32px; line-height:1; }
.rate-n { font:700 20px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--text2); }
.rate-btn[aria-pressed="true"] { border-color:var(--ok); background:rgba(11,128,67,.1); }
.rate-btn[aria-pressed="true"] .rate-n { color:var(--ok); }
.rate-btn.angry[aria-pressed="true"] { border-color:var(--bad); background:var(--rec-soft); }
.rate-btn.angry[aria-pressed="true"] .rate-n { color:var(--bad); }
.rate-btn.pop .rate-ico { animation:rate-pop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes rate-pop { 40% { transform:scale(1.45) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .card.rate, .rate-btn.pop .rate-ico { animation:none; } }
.rate-res { margin:10px 0 0; font-size:13px; color:var(--text2); line-height:1.5; }
.rate-res:empty { display:none; }
/* то же в списке «Записи» — маленькие кнопки в строке записи */
.take-rate { display:inline-flex; gap:6px; margin-left:auto; }
.take-rate button { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:14px; border:1px solid var(--line); background:var(--card);
  font-size:13px; cursor:pointer; color:var(--text2); font-variant-numeric:tabular-nums; }
.take-rate button:disabled { cursor:default; }
.take-rate button[aria-pressed="true"] { border-color:var(--ok); color:var(--ok); }
.take-rate button.angry[aria-pressed="true"] { border-color:var(--bad); color:var(--bad); }

/* «👑 Вы админ · ⚙ Админка» на главной */
.admin-chip { align-self:center; display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 14px; border-radius:20px; border:1px solid rgba(242,193,78,.45);
  background:rgba(242,193,78,.1); text-decoration:none; font-size:13px; color:var(--warn); }
.admin-chip b { padding:4px 12px; border-radius:14px; background:var(--card); color:var(--text); font-weight:500; }
.admin-chip:hover b { background:var(--hover); }

/* ⚙ админка записи */
.admin { max-width:960px; margin:0 auto; }
.adm-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.adm-head h1 { margin-right:auto; }
.adm-who { margin:6px 0 18px; color:var(--text2); font-size:13px; }
.adm-who.ok { color:var(--warn); }
.adm-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:14px; }
.adm-grid .card { margin-bottom:0; }
/* карточка «Хранилище» */
.adm-store { display:flex; flex-direction:column; }
.as-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.as-top h2 { margin:0; }
.as-pct { font-size:12.5px; color:var(--text2); font-variant-numeric:tabular-nums; }
.as-used { display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.as-used b { font:700 30px/1 var(--body); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.as-used span { font-size:14px; color:var(--text2); }
.as-bar { height:8px; margin-top:12px; border-radius:4px; background:var(--chip); overflow:hidden; }
.as-bar i { display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg, var(--ok), #3FD08A); transition:width .4s; }
.as-bar i.warn { background:var(--warn); } .as-bar i.bad { background:var(--bad); }
.as-cap { margin:16px 0 8px; font-size:12.5px; color:var(--text2); }
.as-cap span { margin-left:6px; padding:1px 8px; border-radius:10px; background:var(--chip); font-size:11.5px; }
.as-hours { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.as-hours div { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--hover); }
.as-hours b { font:700 18px/1.1 var(--body); font-variant-numeric:tabular-nums; }
.as-hours span { font-size:11.5px; color:var(--text2); }
.as-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text2); }
.as-hint { cursor:help; }
.adm-big { font:700 26px/1.1 var(--body); font-variant-numeric:tabular-nums; }
.adm-bar { height:8px; border-radius:4px; margin-top:10px; }
.adm-bar i.warn { background:var(--warn); } .adm-bar i.bad { background:var(--bad); }
.adm-sub { margin:10px 0 0; font-size:12.5px; line-height:1.5; }
.adm-sub code { font-family:var(--mono); font-size:12px; background:var(--chip); padding:1px 6px; border-radius:6px; }
.adm-clean { margin-top:14px; }
.adm-acts { display:flex; flex-wrap:wrap; gap:8px; }
.adm-acts .btn { min-height:34px; font-size:13px; padding:0 14px; }
.adm-h { margin:22px 0 10px; font-size:18px; }
.adm-room { padding:14px 16px; }
.adm-room.live { border-color:var(--rec); }
.adm-rh { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.adm-rh .code { font-size:17px; font-weight:700; }
.adm-rh .muted { font-size:12.5px; }
.adm-rh .acts { margin-left:auto; display:flex; gap:6px; }
.adm-rh .btn { min-height:30px; padding:0 12px; font-size:12.5px; }
.adm-people { margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.adm-people span { font-size:12px; padding:2px 9px; border-radius:10px; background:var(--chip); color:var(--text2); }
.adm-people span.on { color:var(--ok); }
.adm-takes { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.adm-take { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 10px; border-radius:10px; background:var(--hover); font-size:13px; }
.adm-take b { font-weight:500; }
.adm-take .muted { font-size:12px; }
.adm-take .acts { margin-left:auto; display:flex; gap:6px; align-items:center; }
.adm-take .btn { min-height:28px; padding:0 10px; font-size:12px; }
.adm-take .rt { font-size:12.5px; }
.adm-empty { color:var(--text2); font-size:13px; margin:8px 0 0; }
.adm-empty-note { margin:-4px 0 10px; }
.adm-empties { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.adm-er { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:13px; }
.adm-er .code { font-weight:700; font-size:14px; }
.adm-er .muted { font-size:12px; }
.adm-er .left { margin-left:auto; color:var(--text2); font-size:12px; }
.adm-er .on { color:var(--ok); font-size:12px; }
.adm-er .btn { min-height:28px; padding:0 10px; font-size:12px; }
@media (max-width: 640px) { .adm-grid { grid-template-columns:1fr; } }

/* «⬆ Обновить» (в админке) */
.upd { text-align:left; font-size:13px; }
.upd-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.upd-t { margin-right:auto; }
.upd-head .btn { min-height:32px; padding:0 14px; font-size:13px; }
.upd-st { margin:8px 0 0; color:var(--text2); line-height:1.5; }
.upd-st:empty { display:none; }
.upd-st.ok { color:var(--ok); } .upd-st.bad { color:var(--bad); } .upd-st.wait { color:var(--warn); }
@media (max-width: 640px) {
  .home.landing { margin-top:2vh; gap:18px; }
  .hero-sub { font-size:14px; }
  .start-card { padding:18px; border-radius:18px; }
  .feats { grid-template-columns:1fr; gap:8px; }
  .feats li { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; padding:6px 2px; }
  .feats .f-ico { grid-row:span 2; width:44px; height:44px; margin:0; }
  .upd-t { flex-basis:100%; }
}

/* комната */
.room-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-bottom:16px; }
.room-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-right:auto; }
.code { font-family:var(--mono); letter-spacing:.12em; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:500; background:var(--chip); color:var(--text2); }
.badge.host { background:rgba(242,193,78,.18); color:var(--warn); }
.invite { display:flex; gap:8px; flex:1 1 340px; max-width:460px; }
.invite input { flex:1; min-width:0; font-family:var(--mono); font-size:13px; color:var(--text2); }

.banner { padding:10px 14px; border-radius:10px; background:var(--chip); margin-bottom:12px; }
.banner.bad { background:var(--rec-soft); color:var(--bad); }
.banner .btn { margin-left:10px; min-height:32px; }
.card.offline { border-color:var(--warn); }
.off-title { display:block; font-size:16px; margin-bottom:6px; color:var(--warn); }
.off-title span { color:var(--text2); font-weight:400; font-size:13px; }
.off-text { margin:0; font-size:14px; line-height:1.5; }
.off-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.off-acts .btn { min-height:34px; }
.off-note, .off-st { margin:8px 0 0; font-size:13px; color:var(--text2); line-height:1.5; }
.off-note:empty, .off-st:empty { display:none; }
.off-st.ok { color:var(--ok); } .off-st.bad { color:var(--bad); } .off-st.wait { color:var(--warn); }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px; }

.status .st-main { display:flex; align-items:center; gap:14px; }
.status b { display:block; font-size:18px; }
.status small { color:var(--text2); font-size:13px; }
.st-dot { width:14px; height:14px; border-radius:50%; background:var(--text2); flex:none; opacity:.6; }

.st-text { flex:1; min-width:0; }
.dim-btn { min-height:34px; padding:0 14px; font-size:13px; flex:none; }

/* «🌑 Затемнить» (во время записи): всё чёрное и тусклое — яркими остаются только волны участников и шкала своего микрофона.
   Цвета переопределяются токенами, так что белые карточки светлой темы тоже гаснут; эмодзи и картинки — приглушаются фильтром */
body, .bar, .card, .take, .pp, .vu, input, select { transition:background-color .35s, border-color .35s, color .35s; }
body.dim { color-scheme:dark;
  --bg:#000; --card:#000; --hover:#070707; --chip:#0B0B0B; --line:#141414; --text:#5E5E5E; --text2:#3E3E3E;
  --blue:#24435F; --blue-soft:rgba(36,67,95,.2); --ok:#1F5C3B; --warn:#6B5520; --bad:#7A2B27; --rec:#7A2B27; --rec-soft:rgba(122,43,39,.12); }
body.dim .status.recording { background:#000; border-color:#2A0F0D; }
body.dim .status.recording #stTitle { color:#7A2B27; }
body.dim .btn.rec, body.dim .btn.stop, body.dim .btn.primary { background:#111; border-color:#1C1C1C; color:#6A6A6A; }
body.dim :is(.logo img, .badge, .vu-mute, .f-ico, .off-title, h2, .chk b, .pp-tag, .take-head b) { filter:brightness(.45) saturate(.6); }
body.dim .dim-btn { color:#9A9A9A; border-color:#262626; }
body.dim .dim-btn:hover { color:#DADADA; background:#111; }
body.dim .pp.off .pp-wave { opacity:.35; }
body.dim .toast { background:#1A1A1A; color:#BDBDBD; }
.st-timer { font:700 34px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.status.recording { border-color:var(--rec); background:linear-gradient(0deg, var(--rec-soft), var(--rec-soft)), var(--card); }
.status.recording .st-dot { background:var(--rec); opacity:1; animation:pulse 1.2s ease-in-out infinite; }
.status.recording #stTitle { color:var(--rec); letter-spacing:.04em; font-size:22px; }
.status.counting .st-dot { background:var(--warn); opacity:1; }
@keyframes pulse { 50% { opacity:.25; transform:scale(.8); } }
.st-host { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
/* качество записи: разрядность и частота — переключатели-сегменты */
.quality { display:flex; flex-direction:column; gap:8px; margin-right:auto; }
.q-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.q-label { width:96px; font-size:13px; color:var(--text2); }
.seg { display:inline-flex; padding:3px; gap:2px; border-radius:18px; background:var(--chip); }
.seg label { position:relative; cursor:pointer; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; margin:0; min-height:0; }
.seg span { display:block; padding:5px 12px; border-radius:15px; font-size:13px; color:var(--text2); white-space:nowrap; transition:background-color .15s, color .15s; }
.seg label:hover span { color:var(--text); }
.seg input:checked + span { background:var(--card); color:var(--text); font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.seg input:focus-visible + span { outline:2px solid var(--blue); outline-offset:1px; }
.q-size { font-size:12px; color:var(--text2); }
.q-keep { display:block; max-width:520px; font-size:12px; line-height:1.45; color:var(--warn); }
.status .q-keep b { display:inline; font-size:inherit; font-weight:600; }
.btn.rec { background:var(--rec); border-color:var(--rec); color:#fff; }
.btn.rec:hover { opacity:.88; background:var(--rec); }
.btn.stop { background:var(--text); border-color:var(--text); color:var(--bg); }
.btn.stop:hover { opacity:.88; background:var(--text); }
.st-mine { margin:12px 0 0; font-size:13px; color:var(--text2); }
.st-mine.bad { color:var(--bad); font-weight:500; }
.st-mine.ok b { color:var(--ok); }
/* 🔒 комната гостя (store: local): звук только у участников — плашка до старта, кнопка «Скачать мою дорожку», пометка в админке */
.st-local { margin:12px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--warn); background:rgba(242,193,78,.1); font-size:13px; line-height:1.45; color:var(--text2); }
.take-local { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:8px 0 0; font-size:13px; color:var(--text2); }
.take-local .ok { color:var(--ok); } .take-local .wait { color:var(--warn); font-weight:500; }
.badge.local { background:rgba(242,193,78,.18); color:var(--warn); }

/* старт: «ХЛОПАЙТЕ В ЛАДОШИ» → уменьшается вдвое и уходит вверх, цифры 5-4-3-2-1 выезжают снизу вверх */
.countdown { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:16px; }
.cd-box { position:relative; width:min(92vw, 760px); height:380px; color:#fff; text-align:center; }
.cd-title { position:absolute; left:0; right:0; top:50%; font:900 76px/1.02 var(--body); letter-spacing:.02em; text-transform:uppercase;
  transform:translateY(-50%); transform-origin:50% 50%; transition:transform .6s cubic-bezier(.2,.8,.2,1); animation:cd-pop .5s cubic-bezier(.2,.8,.2,1) backwards; }
.cd-title.small { transform:translateY(calc(-50% - 130px)) scale(.5); }
@keyframes cd-pop { from { transform:translateY(-50%) scale(.6); opacity:0; } to { transform:translateY(-50%) scale(1); opacity:1; } }
.cd-stage { position:absolute; left:0; right:0; top:calc(50% - 70px); height:200px; overflow:hidden; }
.cd-digit { position:absolute; inset:0; display:grid; place-items:center; font:900 180px/1 var(--body); font-variant-numeric:tabular-nums;
  transform-origin:50% 75%; animation:cd-in .55s cubic-bezier(.2,.8,.3,1) both; }
.cd-digit.out { animation:cd-out .35s cubic-bezier(.5,0,.8,.4) both; }
.cd-digit.clap-word { font-size:120px; letter-spacing:.02em; background:linear-gradient(90deg, #FFE08A, #FF8A65, #FF5A7A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.countdown { transition:opacity .3s; }
.countdown.fade { opacity:0; }
/* цифра «по-диснеевски»: въезжает вытянутой, приземляется со сплющиванием и отскоком; уходит, вытягиваясь вверх */
@keyframes cd-in { 0% { transform:translateY(100%) scale(.8, 1.3); opacity:0; } 55% { transform:translateY(-5%) scale(1.1, .88); opacity:1; }
  75% { transform:translateY(2%) scale(.97, 1.04); } 100% { transform:none; opacity:1; } }
@keyframes cd-out { 0% { transform:none; opacity:1; } 30% { transform:translateY(4%) scale(1.06, .92); } 100% { transform:translateY(-100%) scale(.8, 1.25); opacity:0; } }

/* хлопающие ладошки по бокам от цифры. Хлопок за 1 с, по принципам диснеевской анимации: замах (ладони разводятся
   и приседают) → удар (сплющиваются друг о друга) → пара подпрыгивает, вытягиваясь, и приземляется со сжатием →
   перелёт дальше обычного и покачивание до покоя. В момент удара — вспышка, кольцо, звёздочки и волшебная пыль */
.claps { position:absolute; left:50%; width:min(98vw, 1180px); top:calc(50% - 150px); height:360px; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-between; pointer-events:none; opacity:0; transition:opacity .3s; }
.claps.on { opacity:1; }
.clap { width:clamp(150px, 31vw, 390px); height:auto; aspect-ratio:140 / 120; overflow:visible;
  transition:transform .6s cubic-bezier(.34, 1.7, .5, 1); }
.claps.loop .clap { transform:scale(.55); }   /* пока крупная надпись — поменьше; на отсчёте выпрыгивают в полный рост */
.clap .sparks path { stroke:#FFE08A; stroke-width:5; stroke-linecap:round; }
.clap .hand, .clap .sparks, .clap .bob, .clap .glow, .clap .ring { transform-box:view-box; }
.clap .hand-l { transform-origin:-14px 40px; transform:translateX(-30px) rotate(-18deg); }
.clap .hand-r { transform-origin:14px 40px; transform:translateX(30px) rotate(18deg); }
.clap .bob { transform-origin:0 40px; }
.clap .sparks { transform-origin:0 -40px; opacity:0; }
.clap .glow { transform-origin:0 -18px; opacity:0; }
.clap .ring { transform-origin:0 -18px; opacity:0; fill:none; stroke:#FFE7A0; stroke-width:2.5; }
.clap .st, .clap .du { opacity:0; }
.clap .du { fill:#FFEFB0; }
.claps.go .hand-l { animation:clap-l 1s both; }
.claps.go .hand-r { animation:clap-r 1s both; }
.claps.go .bob { animation:clap-bob 1s both; }
.claps.go .sparks { animation:clap-s 1s ease-out both; }
.claps.go .glow { animation:clap-glow 1s ease-out both; }
.claps.go .ring { animation:clap-ring 1s cubic-bezier(.2,.7,.3,1) both; }
.claps.go .st-a { animation:st-a 1s cubic-bezier(.2,.8,.3,1) both; }
.claps.go .st-b { animation:st-b 1s cubic-bezier(.2,.8,.3,1) .03s both; }
.claps.go .st-c { animation:st-c 1s cubic-bezier(.2,.8,.3,1) .06s both; }
.claps.go .du-a { animation:du-a 1s linear both; }
.claps.go .du-b { animation:du-b 1s linear .02s both; }
.claps.go .du-c { animation:du-c 1s linear .05s both; }
.claps.loop .clap * { animation-iteration-count:infinite !important; }
@keyframes clap-l {
  0% { transform:translateX(-30px) rotate(-18deg); animation-timing-function:cubic-bezier(.4, 0, .6, 1); }
  11% { transform:translateX(-38px) rotate(-27deg) scale(.97, 1.03); animation-timing-function:cubic-bezier(.6, 0, .9, .4); }
  19% { transform:translateX(-9px) rotate(1deg) scale(1.03, .97); }
  23% { transform:translateX(-7px) rotate(3deg) scale(.88, 1.08); animation-timing-function:cubic-bezier(.2, .9, .3, 1); }
  40% { transform:translateX(-36px) rotate(-23deg) scale(1.03, .98); animation-timing-function:ease-in-out; }
  56% { transform:translateX(-27px) rotate(-15deg); animation-timing-function:ease-in-out; }
  72% { transform:translateX(-31px) rotate(-19deg); animation-timing-function:ease-in-out; }
  100% { transform:translateX(-30px) rotate(-18deg); } }
@keyframes clap-r {
  0% { transform:translateX(30px) rotate(18deg); animation-timing-function:cubic-bezier(.4, 0, .6, 1); }
  11% { transform:translateX(38px) rotate(27deg) scale(.97, 1.03); animation-timing-function:cubic-bezier(.6, 0, .9, .4); }
  19% { transform:translateX(9px) rotate(-1deg) scale(1.03, .97); }
  23% { transform:translateX(7px) rotate(-3deg) scale(.88, 1.08); animation-timing-function:cubic-bezier(.2, .9, .3, 1); }
  40% { transform:translateX(36px) rotate(23deg) scale(1.03, .98); animation-timing-function:ease-in-out; }
  56% { transform:translateX(27px) rotate(15deg); animation-timing-function:ease-in-out; }
  72% { transform:translateX(31px) rotate(19deg); animation-timing-function:ease-in-out; }
  100% { transform:translateX(30px) rotate(18deg); } }
@keyframes clap-bob {
  0% { transform:none; animation-timing-function:ease-in-out; }
  11% { transform:translateY(4px) scale(1.04, .95); animation-timing-function:cubic-bezier(.6, 0, .9, .4); }
  19% { transform:none; animation-timing-function:cubic-bezier(.2, .8, .4, 1); }
  28% { transform:translateY(-12px) scale(.95, 1.07); animation-timing-function:cubic-bezier(.5, 0, .9, .5); }
  44% { transform:translateY(2px) scale(1.05, .95); animation-timing-function:ease-out; }
  58% { transform:translateY(-3px) scale(.99, 1.01); animation-timing-function:ease-in-out; }
  72%, 100% { transform:none; } }
@keyframes clap-s { 0%, 17% { opacity:0; transform:scale(.7); } 21% { opacity:1; transform:scale(1); } 46% { opacity:0; transform:scale(1.45); } 100% { opacity:0; } }
@keyframes clap-glow { 0%, 17% { opacity:0; transform:scale(.4); } 21% { opacity:1; transform:scale(1.1); } 62% { opacity:0; transform:scale(1.5); } 100% { opacity:0; } }
@keyframes clap-ring { 0%, 18% { opacity:0; transform:scale(.3); } 21% { opacity:.95; transform:scale(.55); } 58% { opacity:0; transform:scale(2.4); } 100% { opacity:0; } }
/* звёздочки — веером вверх, вращаясь и мерцая; три дальности */
@keyframes st-a { 0%, 18% { opacity:0; transform:translateY(-6px) scale(.2); } 23% { opacity:1; transform:translateY(-20px) scale(1.15) rotate(40deg); }
  50% { opacity:.9; transform:translateY(-44px) scale(.8) rotate(150deg); } 72%, 100% { opacity:0; transform:translateY(-52px) scale(.1) rotate(230deg); } }
@keyframes st-b { 0%, 18% { opacity:0; transform:translateY(-6px) scale(.2); } 23% { opacity:1; transform:translateY(-24px) scale(1.3) rotate(-30deg); }
  50% { opacity:.9; transform:translateY(-56px) scale(.85) rotate(-140deg); } 74%, 100% { opacity:0; transform:translateY(-66px) scale(.1) rotate(-220deg); } }
@keyframes st-c { 0%, 18% { opacity:0; transform:translateY(-6px) scale(.2); } 23% { opacity:1; transform:translateY(-28px) scale(1) rotate(50deg); }
  50% { opacity:.85; transform:translateY(-66px) scale(.7) rotate(170deg); } 76%, 100% { opacity:0; transform:translateY(-78px) scale(.1) rotate(260deg); } }
/* волшебная пыль — вылетает дугой и падает вниз (как будто под тяжестью) */
@keyframes du-a { 0%, 19% { opacity:0; transform:none; } 22% { opacity:1; transform:translate(6px, -10px); animation-timing-function:ease-out; }
  45% { transform:translate(22px, -34px); animation-timing-function:ease-in; } 100% { opacity:0; transform:translate(38px, 34px); } }
@keyframes du-b { 0%, 19% { opacity:0; transform:none; } 22% { opacity:1; transform:translate(3px, -14px); animation-timing-function:ease-out; }
  48% { transform:translate(12px, -52px); animation-timing-function:ease-in; } 100% { opacity:0; transform:translate(20px, 18px); } }
@keyframes du-c { 0%, 19% { opacity:0; transform:none; } 22% { opacity:1; transform:translate(9px, -6px); animation-timing-function:ease-out; }
  42% { transform:translate(36px, -22px); animation-timing-function:ease-in; } 100% { opacity:0; transform:translate(58px, 46px); } }
.cd-note { position:absolute; left:0; right:0; bottom:0; font-size:14px; opacity:.7; }
@media (prefers-reduced-motion: reduce) {
  .cd-title, .cd-digit, .cd-digit.out { animation:none; transition:none; }
  .claps .clap, .claps .clap * { animation:none !important; transition:none !important; }
  .cd-digit.out { display:none; }
}

/* голосование за остановку, когда организатора нет */
.st-vote { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:var(--rec-soft); }
.st-vote[hidden] { display:none; }
.st-vote-t { margin:0; flex:1 1 260px; font-size:13.5px; line-height:1.45; }
.st-vote .btn { flex:0 0 auto; }
.st-vote .btn.voted { background:transparent; color:var(--text); border:1px solid var(--line); }

/* записи */
.takes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.take { padding:12px 14px; border-radius:10px; background:var(--hover); }
.take-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.take-head b { font-size:15px; }
.take-head span { color:var(--text2); font-size:13px; }
.take-tracks { margin:6px 0 0; font-size:13px; color:var(--text2); }
.take-mine { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; font-size:13px; }
.take-mine .btn { min-height:32px; padding:0 14px; }
.badge.rec { background:var(--rec); color:#fff; }
.badge.rec::before { content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.2s ease-in-out infinite; }

/* карточка микрофона: слева вертикальная шкала уровня, справа выбор микрофона и цвет волны */
.card.mic { display:flex; align-items:stretch; gap:18px; }
.mic-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
/* уровень своего микрофона — в стиле микшера OBS, высотой ≈ 240 px */
.vu { flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 6px 4px; border-radius:10px; background:var(--hover); }
.vu-db { font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vu-body { display:flex; align-items:stretch; gap:2px; height:240px; }
.vu-fader { writing-mode:vertical-lr; direction:rtl; width:22px; height:100%; min-height:0; margin:0; padding:0; border:0; background:none; accent-color:var(--text); cursor:pointer; }
.vu-meter { width:54px; height:100%; display:block; }
.vu-mute { background:none; border:0; font-size:16px; line-height:1; padding:4px 8px; border-radius:8px; cursor:pointer; }
.vu-mute:hover { background:var(--card); }
.vu-mute[aria-pressed="true"] { background:var(--rec-soft); }
.meter.vert { flex:none; width:22px; height:auto; min-height:118px; border-radius:8px; }
.meter.vert i { background:linear-gradient(0deg, var(--ok) 0 70%, var(--warn) 70% 90%, var(--bad) 90%); clip-path:inset(100% 0 0 0); }
.meter.vert .peak { top:auto; left:0; right:0; bottom:0; width:auto; height:2px; transition:bottom .08s linear; }
.color-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; }
.color-label { color:var(--text2); font-size:13px; }
.pp-palette.inline { padding:0; gap:6px; }
.pp-palette.inline .sw { width:22px; height:22px; }
.edit-help { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.dir-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; color:var(--text2); }
.speed-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:10px; font-size:13px; color:var(--text2); }
.speed-row .btn { min-height:30px; padding:0 12px; font-size:13px; }
#speedOut.ok { color:var(--ok); } #speedOut.bad { color:var(--bad); }
.dir-row input { flex:1 1 240px; max-width:420px; min-height:34px; font-family:var(--mono); font-size:13px; }
.mic-row { display:flex; align-items:center; gap:12px; }
.mic-row label { color:var(--text2); }
.mic-row select { flex:1; min-width:0; }
.mic-note { margin:10px 0 0; font-size:13px; color:var(--text2); }
.mic-note.ok { color:var(--ok); }
.mic-note.bad { color:var(--bad); }
.mic-note .btn { margin-left:10px; min-height:32px; }

/* индикатор уровня: шкала −60…0 дБ */
.meter { position:relative; height:10px; border-radius:5px; background:var(--chip); overflow:hidden; }
.meter.big { height:16px; border-radius:8px; }
.meter i { position:absolute; inset:0; background:linear-gradient(90deg, var(--ok) 0 70%, var(--warn) 70% 90%, var(--bad) 90%);
  clip-path:inset(0 100% 0 0); transition:clip-path .08s linear; }
.meter .peak { position:absolute; top:0; bottom:0; width:2px; left:0; background:var(--text); opacity:.55; transition:left .08s linear; }
.meter .clip { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10px; font-weight:700; letter-spacing:.05em; color:#fff;
  background:var(--bad); padding:0 6px; border-radius:4px; line-height:14px; opacity:0; transition:opacity .15s; }
.meter:not(.big) .clip { line-height:10px; font-size:8px; padding:0 4px; }
.meter.clipping .clip { opacity:1; }
.meter.clipping { box-shadow:0 0 0 2px var(--bad); }

/* участники */
.pp-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pp { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px 16px; padding:10px 12px; border-radius:10px; background:var(--hover); }
.pp.off { opacity:.55; }
.pp-who { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.pp-av { flex:none; }   /* 🦊 аватарка-эмодзи участника (24 px, public/emoji.js) */
.pp-avb { display:inline-grid; flex:none; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
.pp-avb:hover > .pp-av, .pp-avb:focus-visible > .pp-av { box-shadow:0 0 0 2px var(--text); }
.pp-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.pp-tag { font-size:11px; color:var(--text2); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.pp.off .dot { background:var(--text2); }
.pp-st { font-size:12px; color:var(--text2); width:100%; padding-left:17px; margin-top:-4px; }
.pp-ping { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; justify-content:flex-end; font-size:12px; color:var(--text2); }
.pg { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.pg b { font-variant-numeric:tabular-nums; font-weight:700; color:var(--text2); }
.pg.g b, .legend .pg.g { color:var(--ok); }
.pg.y b, .legend .pg.y { color:var(--warn); }
.pg.r b, .legend .pg.r { color:var(--bad); }
.pg small { font-size:11px; opacity:.85; }
.legend { margin:12px 0 0; font-size:12px; color:var(--text2); }
.legend .pg { font-weight:700; }

/* волна микрофона у каждого (как в монтажке) */
.pp-wave { grid-column:1 / -1; position:relative; height:44px; border-radius:8px; overflow:hidden; background:#5E1470; }
.pp-wave canvas { display:block; width:100%; height:100%; }
.pp-wave .clip { position:absolute; right:8px; top:6px; font-size:10px; font-weight:700; letter-spacing:.05em; color:#fff; background:var(--bad);
  padding:0 6px; border-radius:4px; line-height:16px; opacity:0; transition:opacity .15s; }
.pp-wave.clipping .clip { opacity:1; }
.pp-wave.clipping { box-shadow:inset 0 0 0 2px #FF5A52; }
.pp.off .pp-wave { opacity:.5; }
/* ручка высоты внизу волны */
.wave-grip { position:absolute; left:0; right:0; bottom:0; height:12px; padding:0; border:0; background:none; cursor:ns-resize; touch-action:none; z-index:1; }
.wave-grip::after { content:""; position:absolute; left:50%; bottom:3px; width:42px; height:4px; border-radius:2px; background:rgba(255,255,255,.45);
  transform:translateX(-50%); opacity:0; transition:opacity .15s; }
.pp-wave:hover .wave-grip::after, .wave-grip:focus-visible::after, .pp-wave.resizing .wave-grip::after { opacity:1; }
.wave-grip:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; border-radius:0 0 8px 8px; }
.pp-wave.resizing { box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
/* сброс высоты всех дорожек: иконка крупнее текста */
.reset-waves { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:6px 14px 6px 10px; border-radius:20px; border:1px solid var(--line);
  background:var(--card); color:var(--text2); font-size:13px; cursor:pointer; }
.reset-waves .ico { font-size:24px; line-height:1; }
.reset-waves:hover:not(:disabled) { color:var(--text); background:var(--hover); }
.reset-waves:disabled { opacity:.45; cursor:default; }
.pp-color { width:18px; height:18px; border-radius:50%; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); padding:0; cursor:pointer; flex:none; }
.pp-color:hover, .pp-color[aria-expanded="true"] { box-shadow:0 0 0 2px var(--text); }
.pp-palette { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 0; }
.pp-palette .sw { width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; }
.pp-palette .sw.on, .pp-palette .sw:hover { border-color:var(--text); }
.sw-custom { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); cursor:pointer; margin-left:4px; border-radius:16px; padding:1px 8px 1px 1px; border:2px solid transparent; }
.sw-custom.on { border-color:var(--text); }
span.pp-color { cursor:default; }
.sw-custom input { width:28px; height:28px; min-height:0; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
/* громкость микрофона в записи */
.gain { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); }
.gain input { width:92px; min-height:0; height:16px; padding:0; border:0; background:none; accent-color:var(--text2); cursor:pointer; }
.gain-v { min-width:34px; font-variant-numeric:tabular-nums; }
.gain.lim input { width:64px; }
.gain.lim .gain-v { min-width:52px; }
.lim-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; }
.lim-row input { width:160px; min-height:0; height:16px; padding:0; border:0; background:none; accent-color:var(--text); cursor:pointer; }
.lim-v { font-size:13px; font-variant-numeric:tabular-nums; color:var(--text); min-width:60px; }
.q-chk { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); cursor:pointer; }
.q-chk input { width:16px; height:16px; min-height:0; margin:0; accent-color:var(--warn); }
.pp-kick { background:none; border:1px solid transparent; color:var(--text2); border-radius:14px; padding:2px 10px; font-size:12px; cursor:pointer; }
.pp-kick:hover { border-color:var(--bad); color:var(--bad); }
.pp-warn { font-size:12px; color:var(--bad); font-weight:500; }
.pp-back { font-size:12px; color:var(--ok); font-weight:500; }
.tt .gap { font-size:12px; color:var(--warn); background:rgba(242,193,78,.12); padding:1px 8px; border-radius:10px; }

/* дорожки записи */
.take-tracks { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tt { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px; }
.tt b { font-weight:500; min-width:90px; }
.tt .muted { font-size:12px; }
.tt .ok { color:var(--ok); }
.tt .wait { color:var(--warn); }
.tt .btn, .take-acts .btn { min-height:30px; padding:0 12px; font-size:13px; margin-left:auto; }
.take-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.take-acts .btn { margin-left:0; }
.take-acts .btn.danger { color:var(--bad); }
.take-exp { font-size:12px; color:var(--text2); }
.take-warn { margin:10px 0 0; font-size:13px; color:var(--warn); line-height:1.45; }
.multi-help { margin-top:10px; font-size:13px; color:var(--text2); }
.multi-help summary { cursor:pointer; color:var(--text2); }
.multi-help summary:hover { color:var(--text); }
.multi-help p { margin:8px 0 0; line-height:1.5; }
.multi-help b { color:var(--text); font-weight:500; }
a.btn { text-decoration:none; }
.progress { height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px; }
.progress i { display:block; height:100%; background:var(--ok); width:0; transition:width .3s; }

/* незагруженная запись с прошлого раза */
.recover { max-width:620px; margin:0 auto 16px; padding:14px 16px; border-radius:12px; border:1px solid var(--warn); background:rgba(242,193,78,.1); }
.recover b { display:block; margin-bottom:4px; }
.recover p { margin:0 0 8px; font-size:13px; color:var(--text2); }
.recover .row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.recover .row .btn { min-height:30px; padding:0 12px; font-size:13px; }
.recover .row span { margin-right:auto; }

/* пинг между всеми */
.matrix-wrap { overflow-x:auto; }
.matrix { border-collapse:separate; border-spacing:4px; font-size:13px; }
.matrix th { font-weight:500; color:var(--text2); text-align:left; padding:4px 8px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matrix thead th { text-align:center; }
.matrix td { min-width:64px; text-align:center; padding:6px 8px; border-radius:8px; background:var(--hover); font-variant-numeric:tabular-nums; font-weight:700; }
.matrix td.self { background:none; color:var(--text2); font-weight:400; }
.matrix td.g { color:var(--ok); } .matrix td.y { color:var(--warn); } .matrix td.r { color:var(--bad); }
.matrix td.via::after { content:" ≈"; font-weight:400; }

/* «Сохранять все дорожки у себя» */
.chk { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13px; color:var(--text2); line-height:1.45; }
.chk input { width:18px; height:18px; min-height:0; margin:1px 0 0; accent-color:var(--ok); flex:none; }
.chk b { color:var(--text); font-weight:500; font-size:14px; }
.local-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:12px 0 0 28px; font-size:13px; }
.local-row .btn { min-height:32px; padding:0 14px; font-size:13px; }
.local-st { margin:10px 0 0 28px; font-size:13px; color:var(--text2); line-height:1.5; }
.local-st:empty { display:none; }
.local-st.ok { color:var(--ok); } .local-st.bad { color:var(--bad); } .local-st.wait { color:var(--warn); }
.local-acts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0 28px; }
.local-acts:empty { display:none; }
.local-acts .btn { min-height:32px; padding:0 14px; font-size:13px; }

/* своё окно подтверждения (пока идёт запись) */
.confirm { max-width:min(460px, calc(100vw - 32px)); border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px; background:var(--card); color:var(--text); }
.confirm::backdrop { background:rgba(0,0,0,.6); }
.confirm h2 { font-size:20px; margin:0 0 8px; color:var(--rec); }
.confirm p { margin:0 0 18px; color:var(--text2); line-height:1.5; }
.cf-acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.btn.danger-btn { color:var(--bad); border-color:var(--bad); background:none; }
.btn.danger-btn:hover { background:var(--rec-soft); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:20px; z-index:20; font-weight:500; max-width:calc(100vw - 32px); }

/* телефон */
@media (max-width: 640px) {
  .bar-in, .wrap { padding-left:16px; padding-right:16px; }
  .wrap { padding-top:16px; }
  .home { margin-top:4vh; }
  .room-head { gap:10px; }
  .invite { flex-basis:100%; max-width:none; }
  #leaveBtn { padding:0 8px; }
  .card { padding:14px; }
  .pp { grid-template-columns:1fr; gap:6px; }
  .pp-ping { justify-content:flex-start; }
  .st-timer { font-size:26px; }
  .status .st-main { flex-wrap:wrap; }
  .dim-btn { margin-left:auto; }
  .st-host .btn.big { width:100%; }
  /* телефон: две большие пары рядом с цифрой не помещаются — одна пара (втрое больше прежней) под цифрой */
  .cd-box { height:520px; }
  .cd-title { font-size:46px; }
  .cd-title.small { transform:translateY(calc(-50% - 200px)) scale(.5); }
  .cd-stage { height:160px; top:calc(50% - 150px); }
  .cd-digit { font-size:130px; }
  .cd-digit.clap-word { font-size:76px; }
  .claps { top:calc(50% + 10px); height:210px; width:100%; justify-content:center; }
  .clap { width:234px; }
  .clap + .clap { display:none; }
}
@media (max-width: 640px) { .off-acts .btn { flex:1 1 100%; } }
/* где Premiere будет искать файлы записи (полные пути в проекте) */
.dir-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 0; font-size:12.5px; color:var(--text2); line-height:1.45; }
.dir-note span { flex:1 1 300px; overflow-wrap:anywhere; }
.dir-note .btn { min-height:30px; font-size:12.5px; padding:0 12px; }


/* ---------- комната: редизайн ---------- */
/* шапка комнаты */
.room-head { padding:12px 14px; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.room-title h1 { font-size:20px; }
.mini-btn[aria-pressed="true"] { color:var(--text); background:var(--chip); }

/* статус: во время записи — «в эфире»: бегущая полоса сверху, красное свечение, крупный таймер */
.card.status { position:relative; overflow:hidden; }
.status.recording { border-color:rgba(229,57,53,.55);
  background:radial-gradient(120% 160% at 0% 0%, rgba(229,57,53,.16), transparent 55%), var(--card);
  box-shadow:0 0 0 1px rgba(229,57,53,.12), 0 18px 40px -26px rgba(229,57,53,.75); }
.status.recording::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--rec), var(--violet), var(--rec)); background-size:200% 100%; animation:onair 2.4s linear infinite; }
@keyframes onair { to { background-position:-200% 0; } }
.status.recording .st-timer { font-size:44px; letter-spacing:.03em; }
.status.recording #stTitle { display:inline-flex; align-items:center; gap:10px; }
.status.recording #stTitle::before { content:"REC"; font:700 11px/1 var(--body); letter-spacing:.12em; color:#fff; background:var(--rec); padding:5px 8px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { .status.recording::before { animation:none; } }
body.dim .status.recording { box-shadow:none; background:#000; }
body.dim .status.recording::before { opacity:.25; }
body.dim .status.recording #stTitle::before { background:#3A1513; color:#8A4A46; }

/* свой звук в карточке «Микрофон» */
.my-wave-box { margin-bottom:14px; }
.my-wave-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13px; }
.my-wave-t { color:var(--text2); }
.my-wave { height:72px; border-radius:10px; }

/* участники: цветная полоска слева (цвет волны), организатор — всегда первый, с золотой рамкой */
.pp { border-left:3px solid transparent; }
.pp.host-row { box-shadow:inset 0 0 0 1px rgba(242,193,78,.35); }
.pp-num { font:600 11px/1 var(--mono); color:var(--text2); min-width:16px; }

/* подвал Malina Studio — один в один как на сайте статистики (app/tracker/template.html, .brand-foot):
   малинка под курсором переливается всеми цветами, покачивается и светится, ягодки по очереди «подпрыгивают» */
.brand-foot { display:flex; flex-direction:column; align-items:center; gap:4px; max-width:1240px; margin:0 auto; padding:20px 20px calc(30px + env(safe-area-inset-bottom)); color:var(--text); text-align:center; cursor:default; }
.mb-ic { width:84px; height:84px; margin-bottom:4px; opacity:.92; overflow:visible; transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.mb-ic:hover { transform:rotate(-8deg) scale(1.08); opacity:1; }
.mb-berry circle { fill:#F1F1F1; stroke:#0F0F0F; stroke-width:1; transition:fill .4s ease; transform-box:fill-box; transform-origin:center; }
.mb-leaf path { fill:#F1F1F1; stroke:#F1F1F1; }
.mb-berry-c { opacity:0; pointer-events:none; }
.mb-berry-c circle { fill:url(#mbGrad); stroke:#0F0F0F; stroke-width:1; transform-box:fill-box; transform-origin:center; }
/* обводка ягодок — прямым цветом фона (не переменной): у некоторых браузеров с переменной её не было — малинка выходила сплошным белым пятном */
@media (prefers-color-scheme: light) { .mb-berry circle { fill:#0F0F0F; stroke:#F9F9F9; } .mb-leaf path { fill:#0F0F0F; stroke:#0F0F0F; } .mb-berry-c circle { stroke:#F9F9F9; } }
.mb-copy { font-size:11.5px; opacity:.55; }
.mb-link { font-size:11.5px; color:inherit; opacity:.55; text-decoration:none; }
.mb-link:hover, .mb-link:focus-visible { opacity:.9; text-decoration:underline; }
.mb-ver { font-size:10.5px; opacity:.4; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.mb-ic:hover { animation:mbHue 2.4s linear infinite, mbFloat 1.6s ease-in-out infinite; filter:drop-shadow(0 0 6px rgba(255,61,110,.65)) drop-shadow(0 0 14px rgba(124,58,237,.45)); }
.mb-ic:hover .mb-berry circle { fill:url(#mbGrad) !important; animation:mbPop .9s cubic-bezier(.3,1.6,.5,1) both; }
.mb-ic:hover .mb-leaf path { fill:#30D158 !important; stroke:#30D158 !important; }
.mb-ic:hover .mb-berry circle:nth-child(1) { animation-delay:0ms; }
.mb-ic:hover .mb-berry circle:nth-child(2) { animation-delay:45ms; }
.mb-ic:hover .mb-berry circle:nth-child(3) { animation-delay:90ms; }
.mb-ic:hover .mb-berry circle:nth-child(4) { animation-delay:135ms; }
.mb-ic:hover .mb-berry circle:nth-child(5) { animation-delay:180ms; }
.mb-ic:hover .mb-berry circle:nth-child(6) { animation-delay:225ms; }
.mb-ic:hover .mb-berry circle:nth-child(7) { animation-delay:270ms; }
.mb-ic:hover .mb-berry circle:nth-child(8) { animation-delay:315ms; }
.mb-ic:hover .mb-berry circle:nth-child(9) { animation-delay:360ms; }
.mb-ic:hover .mb-berry circle:nth-child(10) { animation-delay:405ms; }
.mb-ic:hover .mb-berry circle:nth-child(11) { animation-delay:450ms; }
.mb-ic:hover .mb-berry circle:nth-child(12) { animation-delay:495ms; }
.mb-ic:hover .mb-berry circle:nth-child(13) { animation-delay:540ms; }
@keyframes mbHue { from { filter:hue-rotate(0deg) drop-shadow(0 0 6px rgba(255,61,110,.65)) drop-shadow(0 0 14px rgba(124,58,237,.45)); } to { filter:hue-rotate(360deg) drop-shadow(0 0 6px rgba(255,61,110,.65)) drop-shadow(0 0 14px rgba(124,58,237,.45)); } }
@keyframes mbFloat { 50% { transform:translateY(-3px) rotate(-6deg) scale(1.12); } }
@keyframes mbPop { 0% { transform:scale(1); } 35% { transform:scale(1.45); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .mb-ic:hover, .mb-ic:hover .mb-berry circle { animation:none; } }
body.dim .brand-foot { opacity:.25; }
/* 🍓 раз в минуту — плавно (app.js ставит .auto-glow на 4,2 с): свечение и покачивание нарастают и гаснут, цветная копия
   ягодок проявляется прозрачностью, перелив — мягкий, ягодки по очереди слегка «дышат», листик плавно зеленеет */
.brand-foot.auto-glow .mb-ic { animation:mbAuto 4s cubic-bezier(.45,0,.55,1) both; }
.brand-foot.auto-glow .mb-berry-c { animation:mbAutoC 4s cubic-bezier(.45,0,.55,1) both; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle { animation:mbBreath 1.5s cubic-bezier(.45,0,.55,1) both; }
.brand-foot.auto-glow .mb-leaf path { animation:mbLeaf 4s cubic-bezier(.45,0,.55,1) both; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(1) { animation-delay:700ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(2) { animation-delay:770ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(3) { animation-delay:840ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(4) { animation-delay:910ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(5) { animation-delay:980ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(6) { animation-delay:1050ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(7) { animation-delay:1120ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(8) { animation-delay:1190ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(9) { animation-delay:1260ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(10) { animation-delay:1330ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(11) { animation-delay:1400ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(12) { animation-delay:1470ms; }
.brand-foot.auto-glow :is(.mb-berry, .mb-berry-c) circle:nth-child(13) { animation-delay:1540ms; }
@keyframes mbAuto {
  0%   { transform:none; filter:hue-rotate(0deg) drop-shadow(0 0 0 rgba(255,61,110,0)) drop-shadow(0 0 0 rgba(124,58,237,0)); }
  25%  { transform:translateY(-3px) rotate(-6deg) scale(1.1); filter:hue-rotate(0deg) drop-shadow(0 0 6px rgba(255,61,110,.6)) drop-shadow(0 0 14px rgba(124,58,237,.4)); }
  50%  { transform:translateY(-1px) rotate(4deg) scale(1.06); filter:hue-rotate(120deg) drop-shadow(0 0 7px rgba(255,61,110,.65)) drop-shadow(0 0 16px rgba(124,58,237,.45)); }
  75%  { transform:translateY(-3px) rotate(-4deg) scale(1.1); filter:hue-rotate(240deg) drop-shadow(0 0 6px rgba(255,61,110,.6)) drop-shadow(0 0 14px rgba(124,58,237,.4)); }
  100% { transform:none; filter:hue-rotate(360deg) drop-shadow(0 0 0 rgba(255,61,110,0)) drop-shadow(0 0 0 rgba(124,58,237,0)); }
}
@keyframes mbAutoC { 0% { opacity:0; } 22%, 78% { opacity:1; } 100% { opacity:0; } }
@keyframes mbBreath { 0%, 100% { transform:scale(1); } 45% { transform:scale(1.16); } }
@keyframes mbLeaf { 0%, 100% { fill:#F1F1F1; stroke:#F1F1F1; } 22%, 78% { fill:#30D158; stroke:#30D158; } }
@media (prefers-color-scheme: light) { @keyframes mbLeaf { 0%, 100% { fill:#0F0F0F; stroke:#0F0F0F; } 22%, 78% { fill:#30D158; stroke:#30D158; } } }
@media (prefers-reduced-motion: reduce) { .brand-foot.auto-glow * , .brand-foot.auto-glow .mb-ic { animation:none !important; } }

/* ▭ мини-режим: только главное — статус, микрофон и дорожки; подсказки и второстепенное скрыто */
body.mini.in-room .wrap { padding-top:12px; }
body.mini.in-room .card { padding:10px 12px; margin-bottom:10px; }
body.mini.in-room .room-head { padding:8px 10px; margin-bottom:10px; }
body.mini.in-room .invite, body.mini.in-room .legend, body.mini.in-room #resetWaves, body.mini.in-room .card.local, body.mini.in-room #matrixCard,
body.mini.in-room .edit-help, body.mini.in-room .dir-note, body.mini.in-room .color-row, body.mini.in-room .lim-row, body.mini.in-room .mic-note,
body.mini.in-room .status small, body.mini.in-room .pp-st, body.mini.in-room .q-size, body.mini.in-room .my-wave-head { display:none !important; }
body.mini.in-room .status .st-main { gap:10px; }
body.mini.in-room .status b { font-size:15px; }
body.mini.in-room .status.recording .st-timer { font-size:30px; }
body.mini.in-room .st-host { margin-top:10px; padding-top:10px; }
body.mini.in-room .btn.big { min-height:42px; font-size:14px; }
body.mini.in-room .card.mic { gap:12px; }
body.mini.in-room .vu-body { height:150px; }
body.mini.in-room .my-wave-box { margin-bottom:10px; }
body.mini.in-room .my-wave { height:48px; }
body.mini.in-room .pp { padding:6px 10px; gap:4px 10px; }
body.mini.in-room .pp-wave { height:28px !important; }
body.mini.in-room .card h2 { margin-bottom:8px; font-size:14px; }
@media (max-width: 640px) {
  .room-head { padding:10px; }
  .status.recording .st-timer { font-size:30px; }
  .my-wave { height:56px; }
}
/* шапка комнаты в одну строку на компьютере; заголовок статуса — над подписью */
/* шапка комнаты: название и кнопки (🔔 Звуки, ▭ Мини, Выйти) — первым рядом, ссылка-приглашение — во всю ширину вторым;
   на телефоне: название → ссылка → кнопки */
.room-acts { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.room-head .btn.quiet { padding:0 12px; }
.room-head .invite { flex:1 1 100%; max-width:none; min-width:0; order:1; }
.room-head .invite input { width:0; }
.status.recording #stTitle { display:flex; }
@media (max-width: 640px) {
  .status .st-text { flex:1 1 calc(100% - 30px); }
  .status .st-timer { margin-left:24px; }
  .room-acts { flex:1 1 100%; order:2; margin:-4px -4px 0; }
  .room-head .btn.quiet { padding:0 10px; }
}
.adm-grid .upd { align-self:start; }

/* вкладки разделов в шапке: 🎙 Запись голосов · 🎧 Дискорд-Торрент · 📡 Передача игры. Значки — SVG (эмодзи разного размера);
   на узком телефоне — короткие подписи «Запись» / «Дискорд» / «Передача», у «← Статистика» — только стрелка (три вкладки — с 520 px),
   совсем узко (≤ 380 px) — подписи без значков */
.tabs-nav { display:flex; gap:3px; padding:3px; border-radius:20px; background:var(--chip); min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs-nav::-webkit-scrollbar { display:none; }
.tn { flex:none; display:inline-flex; align-items:center; gap:var(--hb-tng, 6px); min-height:30px; padding:var(--hb-tnp, 0 13px); border-radius:16px; font-size:13px; font-weight:500; color:var(--text2);
  text-decoration:none; white-space:nowrap; transition:background-color .15s, color .15s, box-shadow .15s; }
.tn:hover { color:var(--text); }
.tn.on { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { .tn.on { background:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.4); } }
.tn-i { display:var(--hb-tni, block); width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tn-l { display:var(--hb-tnl, inline); }
.tn-s { display:var(--hb-tns, none); font-size:var(--hb-tnfs, 1em); }
/* --hb-* — «лесенка» шапки (account.css, @container sst-bar): ставит их на детей .bar-in, когда места мало; @media ниже ставят их на .bar */
.logo { flex:none; white-space:nowrap; }
.logo span { display:var(--hb-logo, inline); }
.back { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:40px; padding:0 4px; white-space:nowrap; border-radius:10px; }
@media (max-width: 640px) {
  .bar-in { gap:10px; }
  .logo span { display:none; }   /* название — уже на вкладке */
  .bar { --hb-tnp:0 10px; }
  .tn { font-size:12.5px; min-height:30px; }
}
@media (max-width: 480px) { .tn-l { display:none; } .tn-s { display:inline; } }
@media (max-width: 520px) {
  .back-t { display:none; }
  .back { width:40px; margin-right:-8px; font-size:18px; }
}
@media (max-width: 380px) { .bar { --hb-tni:none; } }   /* через переменную: «только значки» из лесенки может вернуть значки */
@media (max-width: 340px) { .tn { padding:0 8px; gap:5px; } .bar-in { gap:8px; } }

/* 🔔 звуки в комнате */
.sfx-btn.off { opacity:.65; }

/* трафик прямых соединений (в карточке «Пинг между всеми») */
.traffic { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.tf-h { font-size:13px; font-weight:500; color:var(--text2); margin:0 0 8px; }
.tf-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.tf-row { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:2px 14px; align-items:center; padding:6px 10px; border-radius:10px; background:var(--hover); font-size:13px; }
.tf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.tf-via { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text2); white-space:nowrap; }
.tf-via.direct { color:var(--ok); } .tf-via.turn { color:var(--warn); }
.via-i { width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.tf-k { font-variant-numeric:tabular-nums; font-size:12.5px; min-width:150px; text-align:right; white-space:nowrap; }
/* итог: две плашки «↓ Входящий · ↑ Исходящий» и число соединений */
.tf-total { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:10px 0 0; font-size:13px; color:var(--text2); }
.tf-kpi { display:inline-block; padding:5px 10px; border-radius:10px; background:var(--hover); white-space:nowrap; }
.tf-kpi b { font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.tf-kpi.in b { color:var(--blue); } .tf-kpi.out b { color:var(--violet); }
.tf-kpi small { font-size:11px; }
.tf-conn { margin-left:4px; }
.tf-srv { margin:8px 0 0; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; }
@media (max-width: 640px) {
  .tf-row { grid-template-columns:minmax(0, 1fr) auto; }
  .tf-k { grid-column:1 / -1; text-align:left; min-width:0; color:var(--text2); }
}

/* ⚙ Панель управления: 🎧 Дискорд-Торрент (свои имена классов: .tk-* — у страницы Дискорд-Торрента) */
.adm-talk { margin-top:14px; }
.adm-tk-head { display:flex; align-items:baseline; gap:12px; }
.adm-tk-head h2 { margin:0 auto 0 0; }
.adm-tk-nums { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:12px 0; }
.adm-tk-n { padding:10px 12px; border-radius:12px; background:var(--hover); display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0; }
.adm-tk-n b { font:700 22px/1.1 var(--body); font-variant-numeric:tabular-nums; }
.adm-tk-n b.word { font-size:15px; font-weight:500; line-height:1.6; }
.adm-tk-n span { font-size:12px; color:var(--text2); }
.adm-tk-n.on b { color:var(--ok); } .adm-tk-n.off b { color:var(--text2); }
.adm-tk-list { margin-bottom:4px; }
.adm-tk-row .adm-tk-name { font-weight:500; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin .btn.danger { color:var(--bad); }
.admin .btn.danger:hover { background:var(--rec-soft); }
@media (max-width: 640px) {
  .adm-tk-nums { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .adm-tk-row .adm-tk-name { max-width:150px; }
}