: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);
  --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); }
}
* { 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 64px; }
.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; }

/* комната */
.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; }
.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); }
.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); }

/* старт: «ХЛОПАЙТЕ В ЛАДОШИ» → уменьшается вдвое и уходит вверх, цифры 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; }
/* цифра «по-диснеевски»: въезжает вытянутой, приземляется со сплющиванием и отскоком; уходит, вытягиваясь вверх */
@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-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; }
  .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; }
  .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; }