/* Material Symbols грузится полным шрифтом из Google Fonts (см. index.html) */
/* Эмодзи в стиле телеграма. Шрифт внешний: если CDN недоступен или браузер
   не умеет его формат (Chrome под Windows не читает растровые sbix),
   эмодзи просто останутся системными — верстка от этого не пострадает. */
@font-face{
  font-family:"AppleEmoji";
  font-display:swap;
  unicode-range:U+1F000-1FAFF,U+2600-27BF,U+FE0F,U+2190-21FF,U+2B00-2BFF,U+1F1E6-1F1FF,U+200D,U+20E3,U+E0020-E007F;
  src:url("https://db.onlinewebfonts.com/t/5ab304ade0d4f62d027d12464ca69443.woff2")format("woff2"),
      url("https://db.onlinewebfonts.com/t/5ab304ade0d4f62d027d12464ca69443.woff")format("woff"),
      url("https://db.onlinewebfonts.com/t/5ab304ade0d4f62d027d12464ca69443.ttf")format("truetype");
}
/* Свои шрифты для тем «для настроения» — self-hosted, проверена полная поддержка кириллицы */
@font-face{
  font-family:"MinecraftFont";
  font-display:swap;
  src:url("/fonts/minecraft.ttf")format("truetype");
}
@font-face{
  font-family:"AnimeAce";
  font-display:swap;
  src:url("/fonts/animeace.ttf")format("truetype");
}
:root {
  --az:#38b6e8; --az-rgb:56,182,232; --az2: #1a6fa3; --gold:#FFBE2F; --gold-rgb:255,190,47; --azl: #a8ddf7;
  --s1: #ff7e5f; --s2: #feb47b; --s3: #ffcfa0;
  --vi:#9b6dff; --vi-rgb:155,109,255; --vil:#c4aaff; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --gb: rgba(255,255,255,0.07);
  --gb2: rgba(255,255,255,0.12);
  --gbh: rgba(255,255,255,0.13);
  --bd: rgba(255,255,255,0.14);
  --bd2: rgba(255,255,255,0.22);
  --t1: rgba(255,255,255,0.94);
  --t2: rgba(255,255,255,0.58);
  --t3: rgba(255,255,255,0.35);
  --r: 14px; --r2: 20px;
  --bg: #0d1a30;
  --surface: #14274a;
  --surface2: #102038;
  --side-bg: rgba(10,20,38,.5);
  --glass-grad: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}

/* ─── ТЕМЫ ОФОРМЛЕНИЯ ────────────────────────────────────────────────────── */
/* «Океан» — тема по умолчанию, переопределений не требует */

body[data-theme="midnight"]{
  --az:#5fd0ff; --az-rgb:95,208,255; --az2:#1b6f8f; --gold:#e8c34a; --gold-rgb:232,195,74; --azl:#a9e8ff;
  --vi:#8f8fff; --vi-rgb:143,143,255; --vil:#c2c2ff; --ok:#4be0a0; --ok-rgb:75,224,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#04070d; --surface:#0b1220; --surface2:#070c16;
  --gb:rgba(255,255,255,0.045); --gb2:rgba(255,255,255,0.09); --gbh:rgba(255,255,255,0.1);
  --bd:rgba(255,255,255,0.1); --bd2:rgba(255,255,255,0.18);
}
body[data-theme="midnight"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(95,208,255,.14) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(143,143,255,.1) 0%,transparent 52%),
  radial-gradient(ellipse 100% 70% at 50% 0%,rgba(95,208,255,.08) 0%,transparent 48%),
  linear-gradient(180deg,#0a0f1c 0%,#070c16 45%,#020408 100%)}
body[data-theme="midnight"] .o1{background:radial-gradient(circle,#5fd0ff,transparent)}
body[data-theme="midnight"] .o2{background:radial-gradient(circle,#8f8fff,transparent)}
body[data-theme="midnight"] .o3{background:radial-gradient(circle,#4be0a0,transparent)}

body[data-theme="indigo"]{
  --az:#a385ff; --az-rgb:163,133,255; --az2:#5c3fb0; --gold:#ffb1e0; --gold-rgb:255,177,224; --azl:#d3c2ff;
  --vi:#c084fc; --vi-rgb:192,132,252; --vil:#e3c8ff; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b8f; --err-rgb:255,107,143; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#160d2e; --surface:#22124a; --surface2:#180d38;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
}
body[data-theme="indigo"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(163,133,255,.32) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(255,177,224,.2) 0%,transparent 52%),
  radial-gradient(ellipse 100% 70% at 50% 0%,rgba(192,132,252,.16) 0%,transparent 48%),
  radial-gradient(ellipse 70% 70% at 8% 55%,rgba(92,63,176,.18) 0%,transparent 58%),
  linear-gradient(180deg,#241540 0%,#180d38 45%,#0c0620 100%)}
body[data-theme="indigo"] .o1{background:radial-gradient(circle,#a385ff,transparent)}
body[data-theme="indigo"] .o2{background:radial-gradient(circle,#ffb1e0,transparent)}
body[data-theme="indigo"] .o3{background:radial-gradient(circle,#5c3fb0,transparent)}

body[data-theme="emerald"]{
  --az:#3fd9a8; --az-rgb:63,217,168; --az2:#1a8f6c; --gold:#d9e84a; --gold-rgb:217,232,74; --azl:#a8f7d8;
  --vi:#6dffcf; --vi-rgb:109,255,207; --vil:#aaffe4; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffd347; --warn-rgb:255,211,71;
  --bg:#08201a; --surface:#0f3128; --surface2:#0a241d;
  --gb:rgba(255,255,255,0.06); --gb2:rgba(255,255,255,0.11); --gbh:rgba(255,255,255,0.12);
  --bd:rgba(255,255,255,0.13); --bd2:rgba(255,255,255,0.21);
}
/* монотонная — один оттенок вместо разноцветных пятен, фон почти ровный */
body[data-theme="emerald"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(63,217,168,.1) 0%,transparent 55%),
  linear-gradient(180deg,#0e2e26 0%,#0a241d 45%,#04120e 100%)}
body[data-theme="emerald"] .o1{background:radial-gradient(circle,#3fd9a8,transparent);opacity:.55}
body[data-theme="emerald"] .o2{background:radial-gradient(circle,#3fd9a8,transparent);opacity:.3}
body[data-theme="emerald"] .o3{background:radial-gradient(circle,#1a8f6c,transparent);opacity:.5}

body[data-theme="amber"]{
  --az:#ffa93f; --az-rgb:255,169,63; --az2:#b05e1a; --gold:#ffd23f; --gold-rgb:255,210,63; --azl:#ffd9a8;
  --vi:#ff8f6d; --vi-rgb:255,143,109; --vil:#ffc4aa; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff5c5c; --err-rgb:255,92,92; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#2a1408; --surface:#3f2010; --surface2:#2a1608;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
}
body[data-theme="amber"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(255,169,63,.12) 0%,transparent 55%),
  linear-gradient(180deg,#3a1e0e 0%,#2a1608 45%,#160a04 100%)}
body[data-theme="amber"] .o1{background:radial-gradient(circle,#ffa93f,transparent);opacity:.55}
body[data-theme="amber"] .o2{background:radial-gradient(circle,#ffa93f,transparent);opacity:.3}
body[data-theme="amber"] .o3{background:radial-gradient(circle,#b05e1a,transparent);opacity:.5}

body[data-theme="graphite"]{
  --az:#8fa3b8; --az-rgb:143,163,184; --az2:#4d5c6d; --gold:#e8c34a; --gold-rgb:232,195,74; --azl:#c5d2de;
  --vi:#a8b4c0; --vi-rgb:168,180,192; --vil:#d4dce4; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#14181e; --surface:#1d232b; --surface2:#161b21;
  --gb:rgba(255,255,255,0.055); --gb2:rgba(255,255,255,0.1); --gbh:rgba(255,255,255,0.11);
  --bd:rgba(255,255,255,0.11); --bd2:rgba(255,255,255,0.19);
}
body[data-theme="graphite"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(143,163,184,.08) 0%,transparent 55%),
  linear-gradient(180deg,#1a1f26 0%,#161b21 45%,#0c0f13 100%)}
body[data-theme="graphite"] .o1{background:radial-gradient(circle,#8fa3b8,transparent);opacity:.5}
body[data-theme="graphite"] .o2{background:radial-gradient(circle,#8fa3b8,transparent);opacity:.25}
body[data-theme="graphite"] .o3{background:radial-gradient(circle,#4d5c6d,transparent);opacity:.45}

body[data-theme="rose"]{
  --az:#ff7fa8; --az-rgb:255,127,168; --az2:#b0466f; --gold:#ffc34a; --gold-rgb:255,195,74; --azl:#ffc2d6;
  --vi:#ff9ec4; --vi-rgb:255,158,196; --vil:#ffd2e4; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff5c5c; --err-rgb:255,92,92; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#2a0f1c; --surface:#3f1729; --surface2:#2a0f1c;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
}
body[data-theme="rose"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(255,127,168,.12) 0%,transparent 55%),
  linear-gradient(180deg,#3a1526 0%,#2a0f1c 45%,#160710 100%)}
body[data-theme="rose"] .o1{background:radial-gradient(circle,#ff7fa8,transparent);opacity:.55}
body[data-theme="rose"] .o2{background:radial-gradient(circle,#ff7fa8,transparent);opacity:.3}
body[data-theme="rose"] .o3{background:radial-gradient(circle,#b0466f,transparent);opacity:.5}

body[data-theme="sunset"]{
  --az:#ff7e5f; --az-rgb:255,126,95; --az2:#c94f35; --gold:#ffd23f; --gold-rgb:255,210,63; --azl:#ffb199;
  --vi:#ff5fa0; --vi-rgb:255,95,160; --vil:#ffa8cf; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#2a0f14; --surface:#3f1a1f; --surface2:#2a1216;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
}
body[data-theme="sunset"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(255,126,95,.32) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(255,210,63,.18) 0%,transparent 52%),
  radial-gradient(ellipse 100% 70% at 50% 0%,rgba(255,95,160,.16) 0%,transparent 48%),
  linear-gradient(180deg,#3a1620 0%,#2a1216 45%,#160a0c 100%)}
body[data-theme="sunset"] .o1{background:radial-gradient(circle,#ff7e5f,transparent)}
body[data-theme="sunset"] .o2{background:radial-gradient(circle,#ffd23f,transparent)}
body[data-theme="sunset"] .o3{background:radial-gradient(circle,#ff5fa0,transparent)}

body[data-theme="aurora"]{
  --az:#4be0c4; --az-rgb:75,224,196; --az2:#1f8f78; --gold:#a8e84a; --gold-rgb:168,232,74; --azl:#9df0e0;
  --vi:#8f6dff; --vi-rgb:143,109,255; --vil:#c4aaff; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffd347; --warn-rgb:255,211,71;
  --bg:#08161c; --surface:#0f2830; --surface2:#0a1e24;
  --gb:rgba(255,255,255,0.06); --gb2:rgba(255,255,255,0.11); --gbh:rgba(255,255,255,0.12);
  --bd:rgba(255,255,255,0.13); --bd2:rgba(255,255,255,0.21);
}
body[data-theme="aurora"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(75,224,196,.26) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(143,109,255,.18) 0%,transparent 52%),
  radial-gradient(ellipse 100% 70% at 50% 0%,rgba(168,232,74,.12) 0%,transparent 48%),
  linear-gradient(180deg,#0e2830 0%,#0a1e24 45%,#04120e 100%)}
body[data-theme="aurora"] .o1{background:radial-gradient(circle,#4be0c4,transparent)}
body[data-theme="aurora"] .o2{background:radial-gradient(circle,#8f6dff,transparent)}
body[data-theme="aurora"] .o3{background:radial-gradient(circle,#a8e84a,transparent)}

body[data-theme="plum"]{
  --az:#c264d9; --az-rgb:194,100,217; --az2:#7a3d8f; --gold:#e8a84a; --gold-rgb:232,168,74; --azl:#e0a8ee;
  --vi:#d67fe8; --vi-rgb:214,127,232; --vil:#eec4f5; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b8f; --err-rgb:255,107,143; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#1e0a22; --surface:#2e1233; --surface2:#1e0c24;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
}
body[data-theme="plum"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(194,100,217,.1) 0%,transparent 55%),
  linear-gradient(180deg,#2a1030 0%,#1e0c24 45%,#100612 100%)}
body[data-theme="plum"] .o1{background:radial-gradient(circle,#c264d9,transparent);opacity:.5}
body[data-theme="plum"] .o2{background:radial-gradient(circle,#c264d9,transparent);opacity:.28}
body[data-theme="plum"] .o3{background:radial-gradient(circle,#7a3d8f,transparent);opacity:.5}

body[data-theme="slate"]{
  --az:#6b8fae; --az-rgb:107,143,174; --az2:#3d5670; --gold:#c9a24a; --gold-rgb:201,162,74; --azl:#9db8cf;
  --vi:#7a9fc4; --vi-rgb:122,159,196; --vil:#b0cae0; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#101820; --surface:#182430; --surface2:#121c26;
  --gb:rgba(255,255,255,0.055); --gb2:rgba(255,255,255,0.1); --gbh:rgba(255,255,255,0.11);
  --bd:rgba(255,255,255,0.11); --bd2:rgba(255,255,255,0.19);
}
body[data-theme="slate"] .sky{background:
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(107,143,174,.08) 0%,transparent 55%),
  linear-gradient(180deg,#16222c 0%,#121c26 45%,#0a1218 100%)}
body[data-theme="slate"] .o1{background:radial-gradient(circle,#6b8fae,transparent);opacity:.5}
body[data-theme="slate"] .o2{background:radial-gradient(circle,#6b8fae,transparent);opacity:.25}
body[data-theme="slate"] .o3{background:radial-gradient(circle,#3d5670,transparent);opacity:.45}

/* ─── СВЕТЛЫЕ ТЕМЫ ───────────────────────────────────────────────────────────
   Основные CSS-переменные покрывают большинство карточек/панелей/текста.
   Плавающие оверлеи (звонок, доска, модалки-калькулятор) используют собственные
   тёмные hex-цвета напрямую и намеренно остаются тёмными поверх светлого фона —
   как в большинстве приложений с видеозвонками. Это не баг, а сознательный компромисс. */
body[data-theme="light"]{
  --az:#2f7fd6; --az-rgb:47,127,214; --az2:#1f5ea3; --gold:#b8790e; --gold-rgb:184,121,14; --azl:#5fa3e8;
  --vi:#7c5cd6; --vi-rgb:124,92,214; --vil:#a58ce8; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#eef2f8; --surface:#ffffff; --surface2:#f7f9fc;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(20,30,50,0.05); --gb2:rgba(20,30,50,0.09); --gbh:rgba(20,30,50,0.08);
  --bd:rgba(20,30,50,0.13); --bd2:rgba(20,30,50,0.22);
  --t1:rgba(12,16,26,0.94); --t2:rgba(12,16,26,0.66); --t3:rgba(12,16,26,0.45);
}
body[data-theme="light"] .g{box-shadow:0 1px 3px rgba(20,30,50,.06)}
body[data-theme="light"] .side{border-right:1px solid rgba(20,30,50,.14)}
body[data-theme="light"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(47,127,214,.1) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(124,92,214,.08) 0%,transparent 52%),
  linear-gradient(180deg,#f4f7fc 0%,#eef2f8 45%,#e4eaf3 100%)}
body[data-theme="light"] .o1{background:radial-gradient(circle,#2f7fd6,transparent);opacity:.55}
body[data-theme="light"] .o2{background:radial-gradient(circle,#7c5cd6,transparent);opacity:.48}
body[data-theme="light"] .o3{background:radial-gradient(circle,#c98a12,transparent);opacity:.4}
body[data-theme="light"] .stars{opacity:.32}

body[data-theme="daylight"]{
  --az:#2f9e6e; --az-rgb:47,158,110; --az2:#1f6f4a; --gold:#b8790e; --gold-rgb:184,121,14; --azl:#5fc496;
  --vi:#3f9ec9; --vi-rgb:63,158,201; --vil:#7cc4e8; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#eef6f0; --surface:#ffffff; --surface2:#f6fbf8;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(20,40,30,0.05); --gb2:rgba(20,40,30,0.09); --gbh:rgba(20,40,30,0.08);
  --bd:rgba(20,40,30,0.13); --bd2:rgba(20,40,30,0.22);
  --t1:rgba(10,22,16,0.94); --t2:rgba(10,22,16,0.66); --t3:rgba(10,22,16,0.45);
}
body[data-theme="daylight"] .g{box-shadow:0 1px 3px rgba(20,40,30,.06)}
body[data-theme="daylight"] .side{border-right:1px solid rgba(20,40,30,.14)}
body[data-theme="daylight"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(47,158,110,.12) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(63,158,201,.08) 0%,transparent 52%),
  linear-gradient(180deg,#f2f9f4 0%,#eef6f0 45%,#e2f0e6 100%)}
body[data-theme="daylight"] .o1{background:radial-gradient(circle,#2f9e6e,transparent);opacity:.55}
body[data-theme="daylight"] .o2{background:radial-gradient(circle,#3f9ec9,transparent);opacity:.48}
body[data-theme="daylight"] .o3{background:radial-gradient(circle,#c9820f,transparent);opacity:.36}
body[data-theme="daylight"] .stars{opacity:.32}

body[data-theme="lavender"]{
  --az:#8a6fd9; --az-rgb:138,111,217; --az2:#6248a8; --gold:#c98a3f; --gold-rgb:201,138,63; --azl:#b3a0ea;
  --vi:#a685ff; --vi-rgb:166,133,255; --vil:#cbb8ff; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#f3f0fb; --surface:#ffffff; --surface2:#f8f5fc;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(40,20,60,0.05); --gb2:rgba(40,20,60,0.09); --gbh:rgba(40,20,60,0.08);
  --bd:rgba(40,20,60,0.13); --bd2:rgba(40,20,60,0.22);
  --t1:rgba(20,12,32,0.94); --t2:rgba(20,12,32,0.66); --t3:rgba(20,12,32,0.45);
}
body[data-theme="lavender"] .g{box-shadow:0 1px 3px rgba(40,20,60,.06)}
body[data-theme="lavender"] .side{border-right:1px solid rgba(40,20,60,.14)}
body[data-theme="lavender"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(138,111,217,.13) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(232,138,201,.08) 0%,transparent 52%),
  linear-gradient(180deg,#f7f4fc 0%,#f3f0fb 45%,#ece6f7 100%)}
body[data-theme="lavender"] .o1{background:radial-gradient(circle,#8a6fd9,transparent);opacity:.55}
body[data-theme="lavender"] .o2{background:radial-gradient(circle,#e88ac9,transparent);opacity:.48}
body[data-theme="lavender"] .o3{background:radial-gradient(circle,#c98a3f,transparent);opacity:.36}
body[data-theme="lavender"] .stars{opacity:.32}

body[data-theme="peach"]{
  --az:#e8823f; --az-rgb:232,130,63; --az2:#b8611f; --gold:#3f9ec9; --gold-rgb:63,158,201; --azl:#f0a86e;
  --vi:#e85f7f; --vi-rgb:232,95,127; --vil:#f2a0b5; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#fdf3ec; --surface:#ffffff; --surface2:#fdf6f0;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(60,30,10,0.05); --gb2:rgba(60,30,10,0.09); --gbh:rgba(60,30,10,0.08);
  --bd:rgba(60,30,10,0.13); --bd2:rgba(60,30,10,0.22);
  --t1:rgba(32,18,10,0.94); --t2:rgba(32,18,10,0.66); --t3:rgba(32,18,10,0.45);
}
body[data-theme="peach"] .g{box-shadow:0 1px 3px rgba(60,30,10,.06)}
body[data-theme="peach"] .side{border-right:1px solid rgba(60,30,10,.14)}
body[data-theme="peach"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(232,130,63,.13) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(63,158,201,.08) 0%,transparent 52%),
  linear-gradient(180deg,#fdf6f1 0%,#fdf3ec 45%,#f8e8dc 100%)}
body[data-theme="peach"] .o1{background:radial-gradient(circle,#e8823f,transparent);opacity:.55}
body[data-theme="peach"] .o2{background:radial-gradient(circle,#3f9ec9,transparent);opacity:.46}
body[data-theme="peach"] .o3{background:radial-gradient(circle,#e85f7f,transparent);opacity:.36}
body[data-theme="peach"] .stars{opacity:.32}

body[data-theme="sand"]{
  --az:#b8935a; --az-rgb:184,147,90; --az2:#8a6a3d; --gold:#c9a24a; --gold-rgb:201,162,74; --azl:#d4b587;
  --vi:#c9a26e; --vi-rgb:201,162,110; --vil:#e0c7a0; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#f7f2e8; --surface:#ffffff; --surface2:#faf6ee;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(60,45,20,0.05); --gb2:rgba(60,45,20,0.09); --gbh:rgba(60,45,20,0.08);
  --bd:rgba(60,45,20,0.13); --bd2:rgba(60,45,20,0.22);
  --t1:rgba(38,28,14,0.94); --t2:rgba(38,28,14,0.66); --t3:rgba(38,28,14,0.45);
}
body[data-theme="sand"] .g{box-shadow:0 1px 3px rgba(60,45,20,.06)}
body[data-theme="sand"] .side{border-right:1px solid rgba(60,45,20,.14)}
body[data-theme="sand"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(184,147,90,.1) 0%,transparent 58%),
  linear-gradient(180deg,#faf7f0 0%,#f7f2e8 45%,#f0e8d8 100%)}
body[data-theme="sand"] .o1{background:radial-gradient(circle,#b8935a,transparent);opacity:.5}
body[data-theme="sand"] .o2{background:radial-gradient(circle,#c9a26e,transparent);opacity:.42}
body[data-theme="sand"] .o3{background:radial-gradient(circle,#8a6a3d,transparent);opacity:.32}
body[data-theme="sand"] .stars{opacity:.32}

body[data-theme="mist"]{
  --az:#6b8f9e; --az-rgb:107,143,158; --az2:#4a6b78; --gold:#9ea87a; --gold-rgb:158,168,122; --azl:#8fb0bc;
  --vi:#7ea0ac; --vi-rgb:126,160,172; --vil:#a8c4cc; --ok:#1f9d5e; --ok-rgb:31,157,94; --err:#d63c3c; --err-rgb:214,60,60; --warn:#b8790e; --warn-rgb:184,121,14;
  --bg:#eef4f6; --surface:#ffffff; --surface2:#f4f9fa;
  --side-bg:rgba(255,255,255,.82);
  --gb:rgba(20,40,45,0.05); --gb2:rgba(20,40,45,0.09); --gbh:rgba(20,40,45,0.08);
  --bd:rgba(20,40,45,0.13); --bd2:rgba(20,40,45,0.22);
  --t1:rgba(10,22,25,0.94); --t2:rgba(10,22,25,0.66); --t3:rgba(10,22,25,0.45);
}
body[data-theme="mist"] .g{box-shadow:0 1px 3px rgba(20,40,45,.06)}
body[data-theme="mist"] .side{border-right:1px solid rgba(20,40,45,.14)}
body[data-theme="mist"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(107,143,158,.1) 0%,transparent 58%),
  linear-gradient(180deg,#f2f8f9 0%,#eef4f6 45%,#e2edf0 100%)}
body[data-theme="mist"] .o1{background:radial-gradient(circle,#6b8f9e,transparent);opacity:.5}
body[data-theme="mist"] .o2{background:radial-gradient(circle,#7ea0ac,transparent);opacity:.42}
body[data-theme="mist"] .o3{background:radial-gradient(circle,#4a6b78,transparent);opacity:.32}
body[data-theme="mist"] .stars{opacity:.32}

/* ─── ТЕМЫ «ДЛЯ НАСТРОЕНИЯ» ───────────────────────────────────────────────────
   Не только другая палитра, но и другая форма — скругления, свой шрифт (self-hosted,
   кириллица проверена) и характерные декоративные приёмы жанра. */
body[data-theme="anime"]{
  --az:#ff6fa5; --az-rgb:255,111,165; --az2:#c23f78; --gold:#ffd23f; --gold-rgb:255,210,63; --azl:#ffb3d1;
  --vi:#a685ff; --vi-rgb:166,133,255; --vil:#d3c2ff; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b8f; --err-rgb:255,107,143; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#1a0f22; --surface:#2a1533; --surface2:#1c0f26;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
  --r:22px; --r2:28px;
}
body[data-theme="torii"]{
  --az:#e5483f; --az-rgb:229,72,63; --az2:#a52a20; --gold:#ffcf6b; --gold-rgb:255,207,107; --azl:#ff9184;
  --vi:#ff6f5f; --vi-rgb:255,111,95; --vil:#ffb3a8; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff6b6b; --err-rgb:255,107,107; --warn:#ffb347; --warn-rgb:255,179,71;
  --bg:#1c0d0a; --surface:#2e130f; --surface2:#200e0b;
  --gb:rgba(255,255,255,0.07); --gb2:rgba(255,255,255,0.12); --gbh:rgba(255,255,255,0.13);
  --bd:rgba(255,255,255,0.14); --bd2:rgba(255,255,255,0.22);
  --r:22px; --r2:28px;
}
/* «Ниппон» и «Тории» — одна и та же анимешная стилистика (шрифт, обводка, тушь-фон),
   различаются только палитрой и лого (для Тории — картинка ворот вместо птицы, см. _appLogoIcon) */
body[data-theme="anime"], body[data-theme="anime"] input, body[data-theme="anime"] select, body[data-theme="anime"] textarea, body[data-theme="anime"] button,
body[data-theme="torii"], body[data-theme="torii"] input, body[data-theme="torii"] select, body[data-theme="torii"] textarea, body[data-theme="torii"] button{
  font-family:'AnimeAce','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  letter-spacing:.02em;
  font-size:.95em;   /* у AnimeAce крупный x-height, визуально крупнее обычного шрифта на том же кегле */
}
/* шрифт темы — принудительно везде (кроме иконок), а не только на верхнеуровневых полях:
   иначе он «не подхватывается» у элементов со своим font-family (даты, шапки таблиц и т.п.) */
body[data-theme="anime"] *:not(.ms), body[data-theme="torii"] *:not(.ms){
  font-family:'AnimeAce','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif!important;
}
body[data-theme="anime"] .sky{
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%,rgba(255,111,165,.3) 0%,transparent 58%),
    radial-gradient(ellipse 60% 50% at 85% 8%,rgba(166,133,255,.2) 0%,transparent 52%),
    radial-gradient(ellipse 100% 70% at 50% 0%,rgba(255,210,63,.1) 0%,transparent 48%),
    linear-gradient(180deg,#2a1230 0%,#1c0f26 45%,#0e0714 100%);
  overflow:hidden;
}
body[data-theme="torii"] .sky{
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%,rgba(229,72,63,.32) 0%,transparent 58%),
    radial-gradient(ellipse 60% 50% at 85% 8%,rgba(255,207,107,.16) 0%,transparent 52%),
    radial-gradient(ellipse 100% 70% at 50% 0%,rgba(229,72,63,.14) 0%,transparent 48%),
    linear-gradient(180deg,#2c130f 0%,#200e0b 45%,#100604 100%);
  overflow:hidden;
}
/* плывущая тушь — несколько мелких «окошек» в настоящую загруженную текстуру
   (не абстрактные фигуры): у каждого своя часть текстуры (background-position),
   свой размер/поворот/блюр и своя медленная траектория. border-radius рвёт
   прямоугольную рамку окна на неровное пятно, так что видно именно кусочки
   туши, а не геометрические кружки */
.ink-clouds{position:absolute;inset:0;display:none;overflow:hidden;pointer-events:none}
body[data-theme="anime"] .ink-clouds, body[data-theme="torii"] .ink-clouds{display:block}
/* сама загруженная текстура — ОДНИМ целым бледным слоем, без нарезки на кусочки:
   её рисунок — это тонкая каллиграфия, и любой обрезанный фрагмент читается как
   царапина, а не как мягкое пятно; целиком и еле заметно — она остаётся тушью */
.ink-clouds::before{content:'';position:absolute;inset:-12%;background-image:url('/textures/anime-ink.avif');
  background-repeat:no-repeat;background-size:150% auto;background-position:50% 45%;
  filter:blur(3px);opacity:.07;mix-blend-mode:soft-light;
  animation:inkWashDrift 100s ease-in-out infinite alternate}
body[data-theme="torii"] .ink-clouds::before{filter:blur(3px) hue-rotate(-40deg) saturate(1.3)}
@keyframes inkWashDrift{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(-2.5%,2%)}}
/* мелкие плывущие капли — чистый CSS (радиальный градиент + анимированный органичный
   border-radius), не зависят от содержимого картинки и гарантированно рендерятся */
.ink-cloud{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2);
  border-radius:var(--r1);
  background:radial-gradient(circle at 35% 32%, rgba(var(--vi-rgb),.5), rgba(var(--az-rgb),.22) 62%, transparent 76%);
  filter:blur(calc(var(--s)/5));mix-blend-mode:screen;opacity:.7;
  animation:inkBlob var(--dur) ease-in-out infinite alternate;animation-delay:var(--del)}
@keyframes inkBlob{
  0%{transform:translate(0,0) scale(1);border-radius:var(--r1)}
  33%{transform:translate(var(--dx1),var(--dy1)) scale(1.15);border-radius:var(--r2)}
  66%{transform:translate(var(--dx2),var(--dy2)) scale(.92);border-radius:var(--r3)}
  100%{transform:translate(var(--dx3),var(--dy3)) scale(1.06);border-radius:var(--r1)}
}
body[data-theme="anime"] .o1{background:radial-gradient(circle,#ff6fa5,transparent)}
body[data-theme="anime"] .o2{background:radial-gradient(circle,#a685ff,transparent)}
body[data-theme="anime"] .o3{background:radial-gradient(circle,#ffd23f,transparent)}
body[data-theme="torii"] .o1{background:radial-gradient(circle,#e5483f,transparent)}
body[data-theme="torii"] .o2{background:radial-gradient(circle,#ffcf6b,transparent)}
body[data-theme="torii"] .o3{background:radial-gradient(circle,#a52a20,transparent)}
/* характерная «комиксовая» рисовка: чёткая тушь-обводка + жёсткая (без блюра) тень-попадание */
body[data-theme="anime"] .btn,body[data-theme="anime"] .g,body[data-theme="anime"] .side-item,body[data-theme="anime"] .cab-badge,body[data-theme="anime"] .av,body[data-theme="anime"] .theme-sw,
body[data-theme="torii"] .btn,body[data-theme="torii"] .g,body[data-theme="torii"] .side-item,body[data-theme="torii"] .cab-badge,body[data-theme="torii"] .av,body[data-theme="torii"] .theme-sw{
  border-radius:var(--r2);
  border-width:2px;
  border-color:rgba(255,255,255,.5);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
body[data-theme="anime"] .field input,body[data-theme="anime"] .field select,
body[data-theme="torii"] .field input,body[data-theme="torii"] .field select{border-radius:var(--r)}
body[data-theme="anime"] .btn:hover,body[data-theme="anime"] .side-item:hover,body[data-theme="anime"] .side-item.active,
body[data-theme="torii"] .btn:hover,body[data-theme="torii"] .side-item:hover,body[data-theme="torii"] .side-item.active{
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transform:translate(-1px,-1px);
}
body[data-theme="anime"] .cab-badge.on,body[data-theme="torii"] .cab-badge.on{border-color:var(--gold)}
body[data-theme="anime"] .av,body[data-theme="torii"] .av{border-width:3px}
/* иконки — жирнее и «зарисованнее», как обводка в графической новелле */
body[data-theme="anime"] .ms,body[data-theme="torii"] .ms{font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 200,'opsz' 24}

body[data-theme="pixel"]{
  --az:#5fd95f; --az-rgb:95,217,95; --az2:#2f8f2f; --gold:#ffd23f; --gold-rgb:255,210,63; --azl:#8fe88f;
  --vi:#ff5fd9; --vi-rgb:255,95,217; --vil:#ff9ee8; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff5c5c; --err-rgb:255,92,92; --warn:#ffd23f; --warn-rgb:255,210,63;
  --bg:#0a0a0a; --surface:#141414; --surface2:#0e0e0e;
  --gb:rgba(255,255,255,0.06); --gb2:rgba(255,255,255,0.1); --gbh:rgba(255,255,255,0.12);
  --bd:rgba(95,217,95,0.25); --bd2:rgba(95,217,95,0.4);
  --r:4px; --r2:6px;
}
body[data-theme="diamond"]{
  --az:#5fd9ea; --az-rgb:95,217,234; --az2:#1f8fa5; --gold:#e8f7ff; --gold-rgb:232,247,255; --azl:#a8eef7;
  --vi:#7fe0ff; --vi-rgb:127,224,255; --vil:#c2f4ff; --ok:#52e8a0; --ok-rgb:82,232,160; --err:#ff5c5c; --err-rgb:255,92,92; --warn:#ffd23f; --warn-rgb:255,210,63;
  --bg:#061418; --surface:#0c2228; --surface2:#081a1e;
  --gb:rgba(255,255,255,0.06); --gb2:rgba(255,255,255,0.1); --gbh:rgba(255,255,255,0.12);
  --bd:rgba(95,217,234,0.25); --bd2:rgba(95,217,234,0.4);
  --r:4px; --r2:6px;
}
/* «Пиксель» и «Алмаз» — общая 8-битная стилистика (шрифт, блочные углы, тень под текстом),
   различаются только палитрой (Алмаз — цвета алмазной руды из Minecraft) */
body[data-theme="pixel"], body[data-theme="pixel"] input, body[data-theme="pixel"] select, body[data-theme="pixel"] textarea, body[data-theme="pixel"] button,
body[data-theme="diamond"], body[data-theme="diamond"] input, body[data-theme="diamond"] select, body[data-theme="diamond"] textarea, body[data-theme="diamond"] button{
  font-family:'MinecraftFont','JetBrains Mono','Geologica',monospace;
}
body[data-theme="pixel"] *:not(.ms), body[data-theme="diamond"] *:not(.ms){
  font-family:'MinecraftFont','JetBrains Mono','Geologica',monospace!important;
}
body[data-theme="pixel"] .sky{background:
  repeating-linear-gradient(0deg,rgba(95,217,95,.04) 0px,rgba(95,217,95,.04) 1px,transparent 1px,transparent 3px),
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(95,217,95,.16) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(255,95,217,.1) 0%,transparent 52%),
  linear-gradient(180deg,#0e0e0e 0%,#0a0a0a 45%,#000 100%)}
body[data-theme="diamond"] .sky{background:
  repeating-linear-gradient(0deg,rgba(95,217,234,.05) 0px,rgba(95,217,234,.05) 1px,transparent 1px,transparent 3px),
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(95,217,234,.2) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(200,245,255,.12) 0%,transparent 52%),
  linear-gradient(180deg,#0a1c20 0%,#081a1e 45%,#020a0c 100%)}
body[data-theme="pixel"] .o1{background:radial-gradient(circle,#5fd95f,transparent)}
body[data-theme="pixel"] .o2{background:radial-gradient(circle,#ff5fd9,transparent)}
body[data-theme="pixel"] .o3{background:radial-gradient(circle,#ffd23f,transparent)}
body[data-theme="diamond"] .o1{background:radial-gradient(circle,#5fd9ea,transparent)}
body[data-theme="diamond"] .o2{background:radial-gradient(circle,#c8f5ff,transparent)}
body[data-theme="diamond"] .o3{background:radial-gradient(circle,#1f8fa5,transparent)}
body[data-theme="pixel"] .btn,body[data-theme="pixel"] .g,body[data-theme="pixel"] .side-item,body[data-theme="pixel"] .field input,body[data-theme="pixel"] .field select,body[data-theme="pixel"] .theme-sw,body[data-theme="pixel"] .av,
body[data-theme="diamond"] .btn,body[data-theme="diamond"] .g,body[data-theme="diamond"] .side-item,body[data-theme="diamond"] .field input,body[data-theme="diamond"] .field select,body[data-theme="diamond"] .theme-sw,body[data-theme="diamond"] .av{border-radius:var(--r)!important}
/* фирменная тень под буквами, как в интерфейсе майнкрафта */
body[data-theme="pixel"] h2,body[data-theme="pixel"] .prof-nm,body[data-theme="pixel"] .cab-prof-name b,body[data-theme="pixel"] .sh,body[data-theme="pixel"] .side-logo-t,body[data-theme="pixel"] .btn.primary,
body[data-theme="diamond"] h2,body[data-theme="diamond"] .prof-nm,body[data-theme="diamond"] .cab-prof-name b,body[data-theme="diamond"] .sh,body[data-theme="diamond"] .side-logo-t,body[data-theme="diamond"] .btn.primary{
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
/* иконки — Material Symbols остаются векторным шрифтом (их сотни по всему
   коду, честной поштучной пиксель-артной заменой не покрыть), но отключаем
   сглаживание и утяжеляем засечки — на мелких размерах читается заметно
   грубее/угловатее, ближе к 8-битной эстетике; плюс жёсткая пиксельная тень,
   как у текста заголовков */
body[data-theme="pixel"] .ms, body[data-theme="diamond"] .ms{
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}

/* «Думай позитивно» — полностью чёрно-белая тема, тёмная гамма, без цветных акцентов */
body[data-theme="noir"]{
  --az:#c8c8c8; --az-rgb:200,200,200; --az2:#6a6a6a; --gold:#e8e8e8; --gold-rgb:232,232,232; --azl:#dcdcdc;
  --vi:#a8a8a8; --vi-rgb:168,168,168; --vil:#d0d0d0; --ok:#c8c8c8; --ok-rgb:200,200,200; --err:#ffffff; --err-rgb:255,255,255; --warn:#c8c8c8; --warn-rgb:200,200,200;
  --bg:#050505; --surface:#0e0e0e; --surface2:#090909;
  --gb:rgba(255,255,255,0.05); --gb2:rgba(255,255,255,0.09); --gbh:rgba(255,255,255,0.1);
  --bd:rgba(255,255,255,0.12); --bd2:rgba(255,255,255,0.2);
  --t1:rgba(255,255,255,0.92); --t2:rgba(255,255,255,0.52); --t3:rgba(255,255,255,0.3);
}
body[data-theme="noir"] .sky{background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(255,255,255,.06) 0%,transparent 58%),
  linear-gradient(180deg,#0a0a0a 0%,#050505 45%,#000 100%)}
body[data-theme="noir"] .o1{background:radial-gradient(circle,#c8c8c8,transparent);opacity:.22}
body[data-theme="noir"] .o2{background:radial-gradient(circle,#8a8a8a,transparent);opacity:.16}
body[data-theme="noir"] .o3{background:radial-gradient(circle,#e8e8e8,transparent);opacity:.14}
body[data-theme="noir"] .stars{filter:grayscale(1)}
/* никакой цветной подсветки на активных/выделенных элементах — тоже градации серого */
body[data-theme="noir"] img,body[data-theme="noir"] .av:not(.av-preset){filter:grayscale(1) contrast(1.05)}

/* ─── ОТКЛЮЧЕНИЕ АНИМАЦИЙ ────────────────────────────────────────────────── */
body.no-anim, body.no-anim *, body.no-anim *::before, body.no-anim *::after{
  animation-duration:0.001ms!important; animation-delay:-0.001ms!important; animation-iteration-count:1!important;
  transition-duration:0.001ms!important; transition-delay:0ms!important; scroll-behavior:auto!important;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;overflow:hidden;transition:background .3s}

/* SKY */
.sky{position:fixed;inset:0;background:
  radial-gradient(ellipse 80% 60% at 15% 0%,rgba(255,126,95,.3) 0%,transparent 58%),
  radial-gradient(ellipse 60% 50% at 85% 8%,rgba(254,180,123,.22) 0%,transparent 52%),
  radial-gradient(ellipse 100% 70% at 50% 0%,rgba(var(--az-rgb),.18) 0%,transparent 48%),
  radial-gradient(ellipse 70% 70% at 8% 55%,rgba(var(--vi-rgb),.12) 0%,transparent 58%),
  linear-gradient(180deg,#1a2a4a 0%,var(--surface2) 45%,#080e1e 100%);
  pointer-events:none;z-index:0}
/* «слепок» предыдущего фона при смене темы — растворяется, открывая новый (см. _themeCrossfadeStart) */
.sky-ghost{pointer-events:none;z-index:0}
/* на время смены темы (~1.5с) даём плавный переход цветам интерфейса —
   обычные быстрые transition'ы (hover и т.д.) этот класс не трогает,
   он снимается сам через полторы секунды после переключения */
body.theme-fade,
body.theme-fade .g, body.theme-fade .btn, body.theme-fade .side, body.theme-fade .side-item,
body.theme-fade .theme-sw, body.theme-fade .modal, body.theme-fade .cab-badge,
body.theme-fade input, body.theme-fade select, body.theme-fade textarea,
body.theme-fade .orb{
  transition:background-color 1.3s ease,background 1.3s ease,border-color 1.3s ease,color 1.3s ease,box-shadow 1.3s ease!important;
}
.orb{position:fixed;border-radius:50%;filter:blur(55px);opacity:.35;pointer-events:none;z-index:0;animation:orbf 14s ease-in-out infinite;transition:opacity .9s ease,filter .9s ease}
.o1{width:380px;height:380px;background:radial-gradient(circle,#ff7e5f,transparent);top:-80px;left:-40px;animation-duration:16s}
.o2{width:280px;height:280px;background:radial-gradient(circle,#38b6e8,transparent);top:35%;right:-60px;animation-duration:19s;animation-delay:-6s}
.o3{width:220px;height:220px;background:radial-gradient(circle,#9b6dff,transparent);bottom:18%;left:8%;animation-duration:21s;animation-delay:-11s}
@keyframes orbf{0%,100%{transform:translate(0,0)}40%{transform:translate(20px,-15px)}70%{transform:translate(-15px,12px)}}
/* на светлых темах меньше размытия — иначе цветные пятна почти теряются на белом фоне */
body[data-theme="light"] .orb,
body[data-theme="daylight"] .orb,
body[data-theme="lavender"] .orb,
body[data-theme="peach"] .orb,
body[data-theme="sand"] .orb,
body[data-theme="mist"] .orb{filter:blur(40px)}

/* STARS - slow drift */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;transition:filter .9s ease}
/* когда играет музыка - фон оживает: флюиды ярче, звёзды пульсируют */
body.audio-live .orb{opacity:.52;filter:blur(50px) saturate(1.5)}
body.audio-live .stars{animation:starsBeat 3.6s ease-in-out infinite}
@keyframes starsBeat{0%,100%{filter:brightness(1.35)}50%{filter:brightness(1.95)}}

@keyframes drift{0%{transform:translateY(0);opacity:var(--op)}50%{opacity:calc(var(--op)*2.2)}100%{transform:translateY(-8px);opacity:var(--op)}}

/* LAYOUT */
.app{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 28px 80px}

/* GLASS */
.g{background:var(--gb);border:1px solid var(--bd);border-radius:var(--r2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:border-color .2s,background .2s}
.g{transition:none}
.g-flat{background:var(--gb);border:1px solid var(--bd);border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* TOPBAR */
.topbar{position:relative;z-index:400;display:flex;align-items:center;justify-content:space-between;padding:24px 0 32px;animation:fdu .6s ease both}
.logo{font-size:22px;font-weight:600;letter-spacing:-.5px}
.logo{display:flex;align-items:center;gap:10px}
.logo span{background:linear-gradient(90deg,var(--az),var(--vil));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-icon.logo-bird{background:none!important;box-shadow:none!important;border-radius:0;width:auto;height:auto;color:#fff}
.logo-bird svg{display:block}
/* на светлых темах белая птица не видна на светлом фоне — красим в тёмный */
body[data-theme="light"] .logo-icon.logo-bird,
body[data-theme="daylight"] .logo-icon.logo-bird,
body[data-theme="lavender"] .logo-icon.logo-bird,
body[data-theme="peach"] .logo-icon.logo-bird,
body[data-theme="sand"] .logo-icon.logo-bird,
body[data-theme="mist"] .logo-icon.logo-bird{color:var(--t1)}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--az),var(--az2));color:#fff;font-weight:700;font-size:19px;flex-shrink:0;box-shadow:0 2px 10px rgba(var(--az-rgb),.3)}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-right .year-dd-btn,.topbar-right .btn,.topbar-right .user-badge{height:38px;display:inline-flex;align-items:center;box-sizing:border-box}
.topbar-right .user-badge{padding:0 14px}
.topbar-right .btn{padding:0 16px}
.theme-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--bd);background:var(--gb);color:var(--t1);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.theme-btn:hover{background:var(--gbh);border-color:var(--bd2)}
.year-sel{background:var(--gb);border:1px solid var(--bd);border-radius:12px;padding:6px 14px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13px;cursor:pointer;appearance:none;-webkit-appearance:none}
.year-sel option{background:var(--surface2);color:var(--t1)}
.btn{padding:8px 18px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13px;cursor:pointer;transition:all .18s;white-space:nowrap}
.btn:active,.itab:active,.fchip:active,.filters-btn:active,.sf-btn:active,.chip-clear:active{transform:translateY(1px)}
.cell-btn:active,.ic-btn:active{transform:scale(.88)}
.navtab{transition:color .18s,background .18s}
.btn:hover{background:var(--gbh);color:var(--t1);border-color:var(--bd2)}
.btn.primary{background:rgba(var(--az-rgb),.18);border-color:rgba(var(--az-rgb),.4);color:var(--azl)}
.btn.primary:hover{background:rgba(var(--az-rgb),.28)}
.btn.danger{background:rgba(var(--err-rgb),.15);border-color:rgba(var(--err-rgb),.35);color:var(--err)}
.btn.sm{padding:5px 12px;font-size:12px;border-radius:9px}
.row-acts{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.ic-act{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--bd);background:rgba(255,255,255,.04);color:var(--t2);cursor:pointer;padding:0;transition:background .14s,color .14s,border-color .14s,transform .1s}
.ic-act:hover{background:var(--gbh);color:var(--t1);border-color:var(--bd2)}
.ic-act:active{transform:scale(.92)}
.ic-act.primary{color:var(--azl);border-color:rgba(var(--az-rgb),.4);background:rgba(var(--az-rgb),.12)}
.ic-act.primary:hover{background:rgba(var(--az-rgb),.22)}
.ic-act.danger{color:var(--err)}
.ic-act.danger:hover{background:rgba(var(--err-rgb),.16);border-color:rgba(var(--err-rgb),.4);color:var(--err)}
.ic-sep{width:1px;height:18px;background:var(--bd2);margin:0 2px;flex-shrink:0}
.seg{display:flex;gap:8px}
.seg.seg-wrap{flex-wrap:wrap}
.seg-btn{flex:1;min-width:52px;padding:9px 8px;border-radius:10px;border:1px solid var(--bd);background:var(--gb);color:var(--t2);cursor:pointer;font-size:13px;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;transition:background .14s,color .14s,border-color .14s}
.seg-btn:hover{background:var(--gbh);color:var(--t1)}
.seg-btn.active{background:rgba(var(--az-rgb),.16);border-color:rgba(var(--az-rgb),.45);color:var(--azl)}
.rem-sub{font-size:13px;color:var(--t3);margin:-6px 0 16px}
.pick-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px}
.pick-list{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.pick-list-tall{max-height:300px}
.pick-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:var(--gb);border:1px solid var(--bd);cursor:pointer;font-size:12.5px}
.pick-row:hover{background:var(--gbh)}
.pick-row.conflict{border-color:rgba(var(--err-rgb),.45);background:rgba(var(--err-rgb),.08)}
.pick-row input{width:16px;height:16px;flex-shrink:0;accent-color:var(--az);cursor:pointer}
.pick-when{font-family:'JetBrains Mono',monospace;color:var(--t1)}
.pick-dow{color:var(--t3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-new{color:var(--ok);font-family:'JetBrains Mono',monospace;font-weight:600;flex-shrink:0}
.pick-conf{color:var(--err);font-size:11.5px;flex-shrink:0}
.big-text{width:100%;background:var(--gb);border:1px solid var(--bd);border-radius:10px;padding:12px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13.5px;line-height:1.5;resize:vertical}
.shift-custom{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--t3)}
.shift-custom input{background:var(--gb);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;color:var(--t1);font-family:'JetBrains Mono',monospace}
/* стеклянная модалка */
.modal.modal-glass{background:linear-gradient(160deg,rgba(34,58,102,.66),rgba(15,27,52,.74));backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border:1px solid rgba(255,255,255,.13);box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09)}
.modal.modal-glass .pick-row,.modal.modal-glass .seg-btn,.modal.modal-glass .big-text,.modal.modal-glass .shift-custom input{background:rgba(255,255,255,.05)}
.modal.modal-glass .pick-row:hover,.modal.modal-glass .seg-btn:hover{background:rgba(255,255,255,.09)}
/* кастомный чекбокс */
.cbx{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.cbx-box{width:19px;height:19px;border-radius:6px;border:1.6px solid var(--bd2);flex-shrink:0;position:relative;transition:background .15s,border-color .15s}
.pick-row:hover .cbx-box,.prow:hover .cbx-box{border-color:var(--az)}
.pick-row.on .cbx-box,.prow.on .cbx-box{background:var(--az);border-color:var(--az)}
.pick-row.on .cbx-box::after,.prow.on .cbx-box::after{content:'';position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid #0b1a33;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.pick-row.on{border-color:rgba(var(--az-rgb),.4)}
/* группы/аккордеон в списке переноса */
.pick-group{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin:10px 2px 3px;font-weight:600}
.pick-group:first-child{margin-top:0}
.pick-empty{font-size:12.5px;color:var(--t3);padding:8px 2px}
.pick-cnt{color:var(--t3);font-weight:400}
.pick-acc{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:9px 11px;border-radius:9px;border:1px dashed var(--bd2);background:transparent;color:var(--t2);cursor:pointer;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.pick-acc:hover{color:var(--t1);border-color:var(--az)}
.pick-acc-ch{font-size:11px;color:var(--t3)}
.btn-ic{display:inline-flex;align-items:center;gap:7px}
/* ставки */
.rate-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.rate-p{width:96px;background:var(--gb);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;color:var(--t1);font-family:'JetBrains Mono',monospace}
.rate-d{flex:1;min-width:0;background:var(--gb);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;color:var(--t1);font-family:'JetBrains Mono',monospace;color-scheme:dark}
.rate-cur{color:var(--t3);font-size:12px;margin-left:-4px}
.rate-sep{color:var(--t3);font-size:12px}
.rate-del{width:26px;height:26px;border-radius:7px;border:1px solid var(--bd);background:var(--gb);color:var(--t3);cursor:pointer;font-size:15px;line-height:1;flex-shrink:0}
.rate-del:hover{color:var(--err);border-color:rgba(var(--err-rgb),.4)}
.rate-del-sp{width:26px;flex-shrink:0}
.rate-add{margin-top:2px;padding:8px 12px;border-radius:9px;border:1px dashed var(--bd2);background:transparent;color:var(--t2);cursor:pointer;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px}
.rate-add:hover{color:var(--azl);border-color:var(--az)}
.rate-note{font-size:11.5px;color:var(--t3);margin-top:8px;line-height:1.45}
.rate-hint{font-size:11px;color:var(--vil);background:rgba(var(--vi-rgb),.14);border-radius:6px;padding:2px 7px;margin-left:-4px}
/* сравнение годов */
.yc-t td,.yc-t th{white-space:nowrap}
.yc-sub{font-size:10.5px;color:var(--t3);font-weight:400;margin-top:2px}
.yc-d{display:block;font-size:10px;margin-top:2px}
.yc-d.up{color:var(--ok)} .yc-d.down{color:var(--err)}
.yc-nom{color:var(--t3);font-size:11.5px;font-style:italic}
.yc-run{display:block;font-size:10px;margin-top:2px;color:var(--t3)}
.login-title{letter-spacing:.06em}
.login-acad{display:flex;align-items:center;gap:14px;margin:10px 0 6px;color:var(--gold)}
.login-acad::before,.login-acad::after{content:'';flex:1;height:1px;background:currentColor;opacity:.55}
.login-acad span{font-size:13px;letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;font-weight:500;white-space:nowrap}

/* ── Кабинеты ── */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--err);color:#fff;font-size:11px;font-weight:600;margin-left:6px;vertical-align:middle}
.req-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--gb);margin-bottom:9px}
.req-card.is-new{border-color:rgba(var(--az-rgb),.4);background:rgba(var(--az-rgb),.07)}
.req-main{flex:1;min-width:0}
.req-when{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--t1)}
.req-dow{color:var(--t3);font-size:12px;margin-left:4px}
.req-who{font-size:13.5px;color:var(--azl);margin-top:3px}
.req-cmt{font-size:12.5px;color:var(--t3);margin-top:5px;font-style:italic}
.req-acts{display:flex;gap:8px;flex-shrink:0}
.req-status{font-size:12px;color:var(--t3)}
.req-status.approved{color:var(--ok)} .req-status.rejected{color:var(--err)}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.acc-card{border:1px solid var(--bd);border-radius:14px;background:var(--gb);padding:14px 16px}
.acc-card.off{opacity:.55}
.acc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.acc-role{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px}
.acc-role.student{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.acc-role.parent{background:rgba(var(--gold-rgb),.16);color:var(--gold)}
.acc-off{font-size:11px;color:var(--err)}
.acc-name{font-size:15px;color:var(--t1);font-weight:500}
.acc-stu{font-size:12px;color:var(--t3);margin-top:2px}
.acc-code{margin:10px 0;font-family:'JetBrains Mono',monospace;font-size:20px;letter-spacing:.16em;color:var(--ok);cursor:pointer;text-align:center;padding:8px;border-radius:9px;background:rgba(var(--ok-rgb),.08);border:1px dashed rgba(var(--ok-rgb),.3)}
.acc-code:hover{background:rgba(var(--ok-rgb),.15)}
.acc-perms{font-size:11.5px;color:var(--t2)}
.acc-seen{font-size:11px;color:var(--t3);margin-top:4px}
.acc-acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.chat-wrap{display:flex;gap:14px;height:calc(var(--vph,100vh) - 150px);min-height:340px}
.chat-folders{display:flex;flex-direction:column;gap:4px;flex-shrink:0;width:92px;overflow-y:auto;overscroll-behavior:contain}
.cfold{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:13px;border:1px solid transparent;background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:11px;line-height:1;cursor:pointer;position:relative;transition:background .14s,color .14s;flex-shrink:0}
.cfold:hover{background:var(--gbh);color:var(--t1)}
.cfold.active{background:rgba(var(--az-rgb),.15);border-color:rgba(var(--az-rgb),.3);color:var(--azl)}
.cfold-ic{display:flex}
.cfold-t{white-space:nowrap}
.cfold .nav-badge{position:absolute;top:5px;right:13px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px}
.cfold-ic .ms{font-variation-settings:'FILL' 0,'wght' 350,'GRAD' 0,'opsz' 24}
.cfold.active .cfold-ic .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.chat-who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.chat-line{display:flex;align-items:center;gap:0;min-width:0}   /* имя и метка — в одну строку */
.chat-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-seen{font-size:11px;font-weight:400;color:var(--t3);margin-top:1px}
.chat-seen.online{color:var(--ok,#52e8a0)}
.chat-seen:empty{display:none}
.chat-back{display:none;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:transparent;color:var(--t1);cursor:pointer;padding:0;margin-right:-2px}
.chat-back:active{transform:scale(.92)}
.chat-list{width:270px;max-width:270px;flex-shrink:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.chat-item.active{background:rgba(var(--az-rgb),.14);border-color:rgba(var(--az-rgb),.4)}
.chat-item .nav-badge{position:absolute;right:10px;top:10px;margin:0}
.chat-nm{font-size:13.5px;color:var(--t1)}
.chat-last{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chat-pane{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:14px;background:var(--gb);overflow:hidden}
.chat-head{padding:12px 16px;border-bottom:1px solid var(--bd);font-size:14px;color:var(--t1)}
.call-btn{background:none;border:none;color:var(--az);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex;align-items:center;transition:background .15s}
.call-btn.act{color:var(--err)}
.pres-dot{width:9px;height:9px;border-radius:50%;background:var(--t3);flex:0 0 auto;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.pres-dot.online{background:var(--ok);box-shadow:0 0 8px rgba(var(--ok-rgb),.6)}
.call-btn:hover{background:var(--gbh);color:var(--azl)}
.call-ov{position:fixed;inset:0;z-index:4000;background:rgba(6,10,16,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:16px 0;box-sizing:border-box}
.call-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.call-remote{width:100%;height:100%;object-fit:contain;background:#0a0f16}
.call-local{position:absolute;right:18px;bottom:96px;width:180px;max-width:34vw;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--bd2);background:#0a0f16;box-shadow:0 8px 24px rgba(0,0,0,.5);transform:scaleX(-1)}
.call-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;padding:7px 16px;border-radius:20px;font-size:14px;font-weight:500;white-space:nowrap}
.call-bar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:16px}
.call-b{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.14);transition:all .15s}
.call-b:hover{background:rgba(255,255,255,.24)}
.call-b.off{background:#fff;color:#111}
.call-b.hang,.call-b.decline{background:var(--err)}.call-b.hang:hover,.call-b.decline:hover{background:#ff8080}
.call-b.accept{background:var(--ok)}.call-b.accept:hover{background:#7cf0b8}
.call-ov.call-incoming{background:transparent;pointer-events:none;align-items:flex-start;justify-content:flex-end;padding:18px}
.call-incoming .call-card{pointer-events:auto;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.call-card{background:var(--surface);border:1px solid var(--bd2);border-radius:20px;padding:34px 40px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6);max-width:340px;max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;margin:auto}
.call-av{width:96px;height:96px;border-radius:50%;background:var(--gb);color:var(--az);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.call-av svg{width:46px;height:46px}
.call-name{font-size:20px;font-weight:600;color:var(--t1);margin-bottom:6px}
.call-status{font-size:13px;color:var(--t3);margin-bottom:26px}
.call-acts{display:flex;gap:40px;justify-content:center}
.call-acts .call-b{animation:callpulse 1.4s infinite}
@keyframes callpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cbtn{padding:10px 20px;border-radius:10px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:all .15s}
.cbtn.ghost{background:var(--gb);color:var(--t1)}.cbtn.ghost:hover{background:var(--gbh)}
.cbtn.danger{background:var(--err);color:#fff}.cbtn.danger:hover{background:#ff8080}
.cbtn.ok{background:var(--az);color:#fff}.cbtn.ok:hover{background:var(--azl)}
.call-sel{width:100%;box-sizing:border-box;padding:11px 34px 11px 14px;border-radius:12px;background:var(--gb);color:var(--t1);border:1px solid var(--bd);font-size:14px;font-weight:600;margin-bottom:10px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa0b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.call-sel:hover{border-color:var(--bd2)}.call-sel:focus{outline:none;border-color:var(--az)}
.call-sel option{background:var(--surface);color:var(--t1)}
.prev-card{background:var(--surface);border:1px solid var(--bd2);border-radius:20px;padding:24px;width:420px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.6);max-height:calc(100vh - 32px);box-sizing:border-box;margin:auto;display:flex;flex-direction:column}
.prev-title{font-size:18px;font-weight:600;color:var(--t1);margin-bottom:16px;text-align:center;flex:0 0 auto}
/* середину карточки (видео, селекты, тесты) скроллим отдельно — кнопки Отмена/Позвонить
   всегда остаются видимыми внизу, даже если контент не влезает по высоте */
.prev-body{overflow-y:auto;min-height:0;flex:1 1 auto}
.prev-video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#0a0f16;transform:scaleX(-1);margin-bottom:10px}
.prev-meter{height:8px;border-radius:4px;background:var(--gb);overflow:hidden;margin-bottom:16px}
.prev-meter-fill{height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--az));border-radius:4px;transition:width .08s linear}
.prev-lab{display:block;font-size:12px;color:var(--t3);margin-bottom:5px;font-weight:500}
.prev-acts{display:flex;gap:12px;justify-content:flex-end;margin-top:6px;flex:0 0 auto;padding-top:6px}
.prev-toggles{display:flex;gap:10px;margin-bottom:14px}
.prev-tog{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;background:var(--gb);color:var(--t1);border:1px solid var(--bd);cursor:pointer;font-size:13px}
.prev-tog svg{width:18px;height:18px}.prev-tog:hover{border-color:var(--bd2)}
.prev-tog.off{background:var(--err);color:#fff;border-color:transparent}
.prev-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:6px}
.prev-grid>div{min-width:0}
.prev-grid .ss-wrap,.prev-grid .call-sel{width:100%;max-width:100%;box-sizing:border-box}
.prev-grid .ss-btn{box-sizing:border-box;max-width:100%}
@media(max-width:460px){.prev-grid{grid-template-columns:1fr}}
.call-menu{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--bd2);border-radius:14px;padding:16px;width:300px;max-width:90vw;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:4100;max-height:calc(100vh - 110px);overflow-y:auto;box-sizing:border-box}
.call-confirm{position:fixed;inset:0;z-index:4200;background:rgba(6,10,16,.72);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:16px 0;box-sizing:border-box}
.call-cbox{background:var(--surface);border:1px solid var(--bd2);border-radius:18px;padding:26px 30px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6);max-width:320px;max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;margin:auto}
.call-ctext{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:20px}
.call-cbtns{display:flex;gap:12px;justify-content:center}
.call-b.act{background:var(--az);color:#fff}.call-b.act:hover{background:var(--azl)}
.call-b.sm{width:44px;height:44px}
.call-colors{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);padding:8px 12px;border-radius:30px;margin-right:6px}
.call-dot{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.call-dot.sel{border-color:#fff;transform:scale(1.12)}
.call-draw{position:absolute;z-index:5;pointer-events:none}
.call-draw.on{pointer-events:auto;cursor:crosshair}
.call-local,.call-badge{z-index:6}
.call-bar{z-index:10}
.call-mini{position:fixed;right:18px;bottom:18px;z-index:3900;width:260px;max-width:70vw;border-radius:14px;overflow:hidden;background:#0a0f16;border:1px solid var(--bd2);box-shadow:0 16px 44px rgba(0,0,0,.55)}
.mini-av{position:absolute;inset:0;bottom:44px}
.mini-av .av-circle{width:56px;height:56px;font-size:22px}
.mini-remote{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0f16;display:block}
/* «развернуть» поверх свёрнутого окна — проявляется при наведении */
.mini-expand{position:absolute;left:0;right:0;top:0;bottom:50px;border:0;background:rgba(6,12,22,.55);
  color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-family:'Geologica',sans-serif;font-size:12.5px;opacity:0;transition:opacity .16s;z-index:3}
.mini-expand span{font-weight:500}
.call-mini:hover .mini-expand{opacity:1}
.mini-expand:active{background:rgba(6,12,22,.7)}
@media(pointer:coarse){ .mini-expand{opacity:1;background:transparent;bottom:auto;height:44px;justify-content:flex-end;
  flex-direction:row;padding-right:8px} .mini-expand span{display:none} }
.mini-bar{display:flex;align-items:center;gap:8px;padding:8px 10px}
.mini-name{flex:1;font-size:13px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-b{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--gb);color:var(--t1)}
.mini-b:hover{background:var(--gbh)}.mini-b svg{width:17px;height:17px}
.mini-b.hang{background:var(--err);color:#fff}.mini-b.hang:hover{background:#ff8080}
.call-chat-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:0;background:var(--az);color:#fff;font-size:13px;font-weight:500;cursor:pointer}
.call-chat-banner:hover{background:var(--azl)}
.ccb-dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:callpulse 1.2s infinite}
.ccb-act{margin-left:auto;font-weight:600;text-decoration:underline;cursor:pointer}
.ccb-end{margin-left:10px;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;cursor:pointer}
.ccb-end:hover{background:rgba(255,255,255,.32)}
.call-local{cursor:pointer}
.call-view-menu{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--bd2);border-radius:14px;padding:6px;min-width:250px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:4100}
.cv-row{display:flex;align-items:center;gap:6px;width:100%;padding:11px 14px;background:none;border:none;color:var(--t1);font-size:14px;cursor:pointer;border-radius:9px;text-align:left}
.cv-row:hover{background:var(--gb)}.cv-row.sel{background:var(--gb)}
.cv-ck{width:18px;display:inline-block;color:var(--az);font-weight:700}
.call-stage.layout-gallery{display:flex;gap:8px;padding:10px;align-items:center;justify-content:center}
.call-stage.layout-gallery .call-remote{width:calc(50% - 4px);height:auto;max-height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.call-stage.layout-gallery .call-local{position:relative;right:auto;bottom:auto;width:calc(50% - 4px);height:auto;max-width:none;aspect-ratio:16/9;border-radius:14px}
.call-stage.layout-self .call-remote{position:absolute;right:18px;bottom:96px;width:180px;max-width:34vw;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--bd2);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.call-stage.layout-self .call-local{position:static;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:0;border:none;box-shadow:none}
.call-b.dis{opacity:.4;pointer-events:none}
.wb-overlay{position:fixed;inset:0;z-index:4200;background:#0f1622;
  /* --vph уже посчитан с учётом масштаба интерфейса; чистый 100dvh при масштабе
     не 100% браузер домножал ещё раз, и низ доски вместе с зумом уезжал за экран */
  height:var(--vph,100dvh);max-height:var(--vph,100dvh);overscroll-behavior:none;touch-action:none}
.wb-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.wb-tools{position:absolute;left:50%;top:14px;bottom:auto;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);max-width:96vw;flex-wrap:wrap;justify-content:center;z-index:4210}
.wb-swatch{width:20px;height:20px;border-radius:6px;display:block;border:1px solid rgba(255,255,255,.35)}
.wb-wdot{display:block;background:#cdd6e2;border-radius:50%}
.wb-pop{position:absolute;top:66px;left:50%;transform:translateX(-50%);background:#1b2230;border:1px solid var(--bd2);border-radius:12px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4216;display:flex;flex-direction:column;gap:4px}
.wb-poprow{display:flex;gap:5px;align-items:center}
.wb-popitem{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--t1);font-size:14px;padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;white-space:nowrap}
.wb-popitem:hover{background:rgba(255,255,255,.08)}.wb-popitem svg{width:18px;height:18px;color:var(--t2)}
.wb-ctx{position:absolute;top:66px;right:14px;display:flex;gap:4px;flex-wrap:wrap;max-width:40vw;justify-content:flex-end;background:#1b2230;border:1px solid var(--bd2);border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:4214}
@media (pointer:coarse) and (orientation:portrait), (max-width:820px) and (orientation:portrait){
  /* тулбар: одна строка внизу во всю ширину, кнопки крупные под палец */
  .wb-tools{top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;left:8px!important;right:8px!important;
    transform:none!important;max-width:none!important;width:auto;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:6px;gap:2px;-webkit-overflow-scrolling:touch}
  .wb-tools::-webkit-scrollbar{display:none}
  .wb-b{width:46px;height:46px;flex:0 0 auto}
  .wb-b .ms{font-size:23px!important}
  .wb-b svg{width:23px;height:23px}
  .wb-sep{margin:0 3px;flex:0 0 auto}
  .wb-pop,.wb-ctx,.wb-fx,.wb-bgmenu{top:auto;bottom:76px;max-height:50vh;overflow-y:auto}
  /* панель звонка — по центру сверху, без обрезки по краям */
  .wb-callbar{top:8px!important;left:0!important;right:0!important;transform:none!important;
    justify-content:center;gap:8px;padding:0 8px;flex-wrap:wrap}
  .wb-cb-sep{width:1px;height:22px;background:var(--bd2);margin:0 2px;flex-shrink:0}
.wb-cb{width:46px;height:46px}
  .wb-cb .ms{font-size:23px!important}
  .wb-cb svg{width:21px;height:21px}
  .wb-cam{width:64px;height:64px;top:64px;right:8px}
  .wb-hint{display:none!important}
  .wb-timer{top:auto!important;bottom:calc(118px + env(safe-area-inset-bottom,0px))!important;right:8px!important;left:auto!important;padding:4px 8px 4px 4px}   /* над кнопками зума */
  .wb-timer-t{font-size:13px;min-width:38px}
  .wb-timer-ring{width:24px;height:24px}
  /* зум — над тулбаром справа, не перекрывает инструменты */
  .wb-zoom{bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;right:8px!important;top:auto!important;left:auto!important;
    transform:none!important;padding:4px 6px;gap:4px}
  .wb-zt{height:34px;padding:0 12px;font-size:13px}
  .wb-zb{width:34px;height:34px}
  .wb-roomtag{display:none}
  /* участники — над зумом слева, чтобы ничего не перекрывали */
  .wb-speakers{bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;left:8px!important;top:auto!important;right:auto!important}
}
@media (pointer:coarse) and (orientation:landscape){ .wb-pop,.wb-ctx,.wb-fx,.wb-bgmenu{top:14px;left:70px;transform:none} }
.wb-b{width:40px;height:40px;border-radius:10px;border:none;background:none;color:#cdd6e2;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wb-b svg{width:20px;height:20px}.wb-b:hover{background:rgba(255,255,255,.08)}.wb-b.act{background:var(--az);color:#fff}
.wb-sep{width:1px;height:26px;background:var(--bd);margin:0 4px}
.wb-w{width:34px;height:34px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}.wb-w:hover{background:rgba(255,255,255,.08)}.wb-w.act{background:var(--az)}
.wb-w span{display:block;background:#cdd6e2;border-radius:50%}.wb-w.act span{background:#fff}
.wb-c{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.wb-c.act{border-color:#fff;transform:scale(1.1)}
.wb-b.wbtxt{width:auto;padding:0 10px;font-size:12px;font-weight:600}
.wb-callbar{position:absolute;top:14px;left:14px;display:none;gap:8px;z-index:4210}
.wb-cb{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff}
.wb-cb:hover{background:rgba(255,255,255,.22)}.wb-cb.off{background:#fff;color:#111}
.wb-cb svg{width:20px;height:20px}
.orient-unlock{position:fixed;top:14px;left:14px;z-index:4310;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.orient-unlock:hover{background:rgba(255,255,255,.28)}
@media (pointer:coarse) and (orientation:landscape), (orientation:landscape) and (max-height:620px){
  /* тулбар — колонка слева, кнопки крупные, снизу оставлен запас под аватарки участников */
  .wb-tools{left:8px!important;right:auto!important;bottom:64px!important;top:64px!important;transform:none!important;
    flex-direction:column;flex-wrap:nowrap;max-width:58px;max-height:calc(100% - 128px);
    overflow-y:auto;justify-content:flex-start;padding:6px 5px;gap:2px;-webkit-overflow-scrolling:touch}
  .wb-tools::-webkit-scrollbar{display:none}
  .wb-b{width:46px;height:46px;flex:0 0 auto}
  .wb-b .ms{font-size:23px!important}
  .wb-b svg{width:23px;height:23px}
  .wb-sep{width:28px;height:1px;margin:3px 0;flex:0 0 auto}
  .wb-callbar{top:8px!important;left:0!important;right:0!important;transform:none!important;justify-content:center;gap:8px;padding:0 8px}
  .wb-cb{width:44px;height:44px}
  .wb-cb .ms{font-size:22px!important}
  .wb-cb svg{width:20px;height:20px}
  .wb-cam{width:58px;height:58px;top:8px;right:8px}
  .wb-hint{display:none!important}
  .wb-zoom{bottom:8px!important;right:8px!important;top:auto!important;left:auto!important;transform:none!important;padding:4px 6px;gap:4px}
  .wb-zt{height:34px;padding:0 12px;font-size:13px}
  .wb-zb{width:34px;height:34px}
  .wb-roomtag{display:none}
  /* участники — в самом низу слева, под тулбаром */
  .wb-speakers{bottom:8px!important;left:8px!important;top:auto!important;right:auto!important;flex-direction:row}
  .wb-pop,.wb-ctx,.wb-fx,.wb-bgmenu{top:64px;left:74px;transform:none;max-height:calc(100% - 76px);overflow-y:auto}
}
.wb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:4210}
.wb-close:hover{background:rgba(255,255,255,.22)}
.wb-bgmenu{position:absolute;left:50%;transform:translateX(-50%);top:66px;right:auto;bottom:auto;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:4215}
.wb-fx{position:absolute;left:50%;transform:translateX(-50%);top:66px;right:auto;bottom:auto;width:280px;max-height:70vh;overflow-y:auto;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:4215}
.wb-fx-cat{font-size:12px;color:var(--t3);font-weight:600;padding:8px 8px 4px;text-transform:uppercase;letter-spacing:.5px}
.wb-fx-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--t1);font-size:14px;padding:8px 10px;border-radius:8px;cursor:pointer}
.wb-fx-item:hover{background:rgba(255,255,255,.08)}
.wb-textedit{position:fixed;z-index:4230;background:rgba(15,22,34,.6);border:1px dashed #4da3ff;outline:none;resize:none;min-width:120px;min-height:1.4em;color:#fff;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;padding:2px 5px;overflow:hidden;border-radius:4px}
@media (pointer:coarse){.wb-b{width:36px;height:36px}.wb-b svg{width:18px;height:18px}}
.call-screen{width:100%;height:100%;object-fit:contain;background:#0a0f16;cursor:pointer}
.pip-col{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:6}
.call-pip{width:180px;max-width:30vw;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--bd2);background:#0a0f16;box-shadow:0 6px 18px rgba(0,0,0,.5);cursor:pointer}
#call-local.call-pip{transform:scaleX(-1)}
.rotate-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:4300;background:rgba(20,27,38,.97);border:1px solid var(--bd2);border-radius:14px;padding:8px 10px 8px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:94vw}
.rh-txt2{font-size:13px;color:var(--t1);white-space:nowrap}
.rh-x{background:none;border:none;color:var(--t3);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.vid-av{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0e1621;z-index:4}
.vid-av.show{display:flex}
.vid-av{background:linear-gradient(135deg,#1b2735,#0f1723)}
.av-circle{width:92px;height:92px;border-radius:50%;background:var(--az);color:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.av-circle svg{width:40px;height:40px;stroke:#fff}
.av-cap{position:absolute;bottom:16%;left:0;right:0;text-align:center;color:var(--t2);font-size:13px}
.vid-av.av-local{inset:auto;right:18px;bottom:96px;width:180px;max-width:34vw;aspect-ratio:16/9;height:auto;border-radius:12px;border:1px solid var(--bd2);z-index:7}
.av-local .av-circle{width:50px;height:50px;font-size:20px}.av-local .av-circle svg{width:24px;height:24px}.av-local .av-cap{display:none}
.prev-wrap{position:relative}
.prev-av{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0a0f16;border-radius:14px;color:var(--t3)}
.prev-av.show{display:flex;flex-direction:column;gap:12px;background:linear-gradient(135deg,#1b2735,#0f1723)}.prev-av .av-circle{width:78px;height:78px}.prev-av .av-cap{position:static}
/* демка в скруглённой рамке */
.stage-screen{padding:12px}
.call-screen{border-radius:14px}
.speaking{box-shadow:inset 0 0 0 3px var(--ok), 0 0 16px rgba(var(--ok-rgb),.55)!important}
.mini-bar{flex-wrap:wrap}
.call-mini{width:300px}
/* мобильные/тач: компактные кнопки, бар снизу, помещается */
@media (pointer:coarse){
  .call-b{width:46px;height:46px}.call-b svg{width:19px;height:19px}
  .call-bar{flex-wrap:wrap;gap:8px;max-width:96vw;justify-content:center}
  .dt-b{width:38px;height:38px}.dt-b svg{width:18px;height:18px}
  /* панель на мобиле часто переносится на 2 ряда — поднимаем свой пип, чтобы не наезжал */
  .call-local,.vid-av.av-local{bottom:168px;width:130px}
}
@media (max-height:520px){
  .call-bar{bottom:8px;gap:6px}
  .call-b{width:42px;height:42px}.call-b svg{width:18px;height:18px}
  .prev-card{padding:16px}
  #call-prev{align-items:flex-start;overflow-y:auto;padding:14px 8px}
  .prev-video{max-height:34vh}
  .prev-toggles{margin-bottom:10px}
  .stage-screen{padding:6px}
  .draw-tools{top:auto;bottom:64px;right:8px;transform:none;flex-direction:row;flex-wrap:wrap;max-width:70vw;max-height:none}
  .dt-widths,.dt-colors{flex-direction:row}
  .dt-sep{height:auto;width:1px;margin:2px 4px}
  .pip-col{right:8px;top:8px}
  .call-pip{width:92px}
}
@media(max-width:640px){
  .call-bar{flex-wrap:wrap;justify-content:center;gap:8px;bottom:10px;width:94vw;max-width:94vw}
  .call-b{width:46px;height:46px}.call-b svg{width:19px;height:19px}
  .call-menu,.call-view-menu{max-width:92vw;left:50%}
  .prev-card{width:94vw}
  #call-prev{align-items:flex-start;overflow-y:auto;padding:14px 8px}
  .prev-grid{grid-template-columns:1fr}
  .call-local{width:118px;bottom:auto;top:12px;right:12px;max-width:40vw}
  .call-pip{width:104px;max-width:34vw}
  .pip-col{right:10px;top:10px;gap:6px}
  .draw-tools{right:6px;padding:5px;gap:2px}
  .dt-b{width:34px;height:34px}.dt-b svg{width:17px;height:17px}
  .dt-c{width:15px;height:15px}
  .call-mini{width:180px;right:10px;bottom:10px}
  .call-card,.call-cbox{max-width:90vw}
}
.draw-tools{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:8px;z-index:4100;max-height:92%;overflow-y:auto}
.dt-b{width:40px;height:40px;border-radius:10px;border:none;background:none;color:#cdd6e2;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dt-b svg{width:20px;height:20px}
.dt-b:hover{background:rgba(255,255,255,.08)}
.dt-b.act{background:var(--az);color:#fff}
.dt-b.close{background:var(--err);color:#fff}.dt-b.close:hover{background:#ff8080}
.dt-sep{height:1px;background:var(--bd);margin:3px 5px;flex:0 0 auto}
.dt-widths{display:flex;flex-direction:column;gap:2px;align-items:center}
.dt-w{width:40px;height:24px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}
.dt-w:hover{background:rgba(255,255,255,.08)}.dt-w.act{background:var(--az)}
.dt-w span{display:block;background:#cdd6e2;border-radius:50%}.dt-w.act span{background:#fff}
.dt-colors{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:3px 4px;justify-items:center}
.dt-c{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.dt-c.act{border-color:#fff;transform:scale(1.1)}
.chat-thread{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:min(76%,620px);padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.msg.mine{align-self:flex-end;background:rgba(var(--az-rgb),.18);color:var(--t1);border-bottom-right-radius:5px}
.msg.theirs{align-self:flex-start;background:var(--gbh);color:var(--t1);border-bottom-left-radius:5px}
.msg-time{font-size:10px;color:var(--t3);margin-top:4px;text-align:right}
/* Панель ввода в духе телеграма: без рамок, поле сливается с фоном */
.chat-send{display:flex;align-items:flex-end;gap:2px;padding:8px 10px;border-top:1px solid var(--bd);position:relative}
.chat-in{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:9px 6px;color:var(--t1);
  font-family:'Geologica',sans-serif;font-size:14px;line-height:1.35;max-height:132px;overflow-y:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;caret-color:var(--azl)}
.chat-in:empty::before{content:attr(data-ph);color:var(--t3);pointer-events:none}
.chat-in .emo{vertical-align:-0.25em}
.chat-send input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:9px 6px;color:var(--t1);font-family:'Geologica',sans-serif;font-size:14px}
.hrow{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.hrow.off{opacity:.5}
.hrow input[type=time]{background:var(--gb);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;color:var(--t1);font-family:'JetBrains Mono',monospace;color-scheme:dark}
@media(max-width:760px){.chat-wrap{flex-direction:column;gap:10px;height:calc(var(--vph,100vh) - 120px)}.chat-folders{flex-direction:row;width:auto;gap:6px;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;padding-bottom:2px}.cfold{flex-direction:row;gap:6px;padding:8px 13px;font-size:13px;border:1px solid var(--bd);flex:0 0 auto}.cfold .nav-badge{position:static;margin-left:2px}.chat-list{width:auto;max-width:none;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding-right:0}.chat-pane{flex:1;min-height:0}.chat-wrap:not(.open) .chat-pane{display:none}.chat-wrap.open .chat-folders,.chat-wrap.open .chat-list{display:none}.chat-back{display:flex}}

/* ── Кабинет ученика ── */
.cab-l{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--gb);margin-bottom:8px}
.cab-l.pending{border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.07)}
.cab-l.done{opacity:.75}
.cab-l.cancel_student,.cab-l.cancel_me,.cab-l.no_count,.cab-l.moved{opacity:.5}
.cab-l-date{display:flex;flex-direction:column;min-width:52px}
.cab-l-d{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--t1)}
.cab-l-dw{font-size:11px;color:var(--t3)}
.cab-l-time{font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--azl);min-width:56px}
.cab-l-st{font-size:12.5px;color:var(--t3);flex:1}
.bk-wrap{display:flex;flex-direction:column;gap:12px}
.bk-day{border:1px solid var(--bd);border-radius:12px;background:var(--gb);padding:12px 14px}
.bk-dh{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--t1);margin-bottom:9px}
.bk-dh span{color:var(--t3);font-size:12px;margin-left:5px}
.bk-times{display:flex;flex-wrap:wrap;gap:7px}
.bk-t{padding:9px 15px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'JetBrains Mono',monospace;font-size:13.5px;cursor:pointer;transition:all .15s}
.bk-t:hover{border-color:var(--az);color:var(--t1)}
.bk-t.on{background:rgba(var(--az-rgb),.2);border-color:var(--az);color:var(--azl)}
.bk-foot{margin-top:16px;padding:15px;border:1px solid rgba(var(--az-rgb),.35);border-radius:13px;background:rgba(var(--az-rgb),.07);display:flex;flex-direction:column;gap:11px}
.bk-sum{font-size:14px;color:var(--t1)}
.bk-cmt{background:var(--gb);border:1px solid var(--bd);border-radius:10px;padding:11px 13px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13.5px}
.cab-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:14px}
.cab-st{border:1px solid var(--bd);border-radius:14px;background:var(--gb);padding:18px;text-align:center}
.cab-st-v{font-size:30px;font-weight:600;color:var(--t1);font-family:'JetBrains Mono',monospace}
.cab-st-l{font-size:12px;color:var(--t3);margin-top:5px}
.cab-st.ok .cab-st-v{color:var(--ok)} .cab-st.err .cab-st-v{color:var(--err)} .cab-st.warn .cab-st-v{color:var(--warn)}

/* ═══ БОКОВОЕ МЕНЮ ═══ */
.shell{position:relative;z-index:1;display:flex;height:var(--vph,100vh);overflow:hidden}
.side{position:fixed;left:0;top:0;height:var(--vph,100vh);width:248px;flex-shrink:0;display:flex;flex-direction:column;padding:22px 14px;box-sizing:border-box;overflow-y:auto;background:var(--side-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--bd);z-index:500}
.side-logo{display:flex;align-items:center;gap:11px;padding:4px 10px 22px}
.side-logo .logo-icon{color:#fff}
.side-logo-t{display:flex;flex-direction:column;font-size:16px;font-weight:600;color:var(--t1);letter-spacing:-.2px;line-height:1.15}
.side-logo-t small{font-size:10.5px;font-weight:400;color:var(--gold);letter-spacing:.22em;text-transform:uppercase}
.side-nav{display:flex;flex-direction:column;gap:3px}
.side-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13.5px;cursor:pointer;text-align:left;transition:background .16s,color .16s}
.side-item:hover{background:var(--gbh);color:var(--t1)}
.side-item.active{background:rgba(var(--az-rgb),.15);border-color:rgba(var(--az-rgb),.3);color:var(--azl)}
.si-ic{display:flex;flex-shrink:0;opacity:.9}
.si-t{flex:1}
/* капс — только у пунктов главного меню (сайдбар), не у имён учеников в переключателе ниже */
.side-nav .si-t{text-transform:uppercase;letter-spacing:.02em}
.side-year{margin-top:auto;padding:14px 6px 10px}
.side-cap{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:7px;padding-left:6px}
.side-year .year-dd{width:100%}
.side-year .year-dd-btn{width:100%;justify-content:space-between}
.side-year .year-dd-menu{bottom:calc(100% + 6px);top:auto}
/* учебный год в настройках */
.year-list{display:flex;flex-direction:column;gap:4px;margin-top:9px}
.year-it{display:flex;align-items:center;gap:6px;border-radius:11px;padding:2px 4px 2px 2px;
  border:1px solid transparent;transition:background .14s,border-color .14s}
.year-it:hover{background:var(--gbh)}
.year-it.active{background:rgba(var(--az-rgb),.12);border-color:rgba(var(--az-rgb),.3)}
.year-pick{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;
  background:transparent;color:var(--t1);font-family:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.year-it.active .year-pick{color:var(--azl);font-weight:600}
.yi-dot{width:16px;height:16px;flex-shrink:0}
.year-acts{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .14s}
.year-it:hover .year-acts,.year-it.active .year-acts{opacity:1}
@media(pointer:coarse){ .year-acts{opacity:1} }
/* ближайшее занятие над профилем — тонкой строкой, без тяжёлой плашки */
.next-les{display:flex;align-items:center;gap:9px;margin:auto 14px 12px;padding:0;min-width:0;color:var(--t2)}
.nl-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);flex-shrink:0;transition:background .2s}
.next-les.soon .nl-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(var(--ok-rgb),.16)}
.nl-b{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.nl-t{font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-les.soon .nl-t{color:var(--ok)}
.nl-w{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* низ меню прижат: раньше распорку держал блок учебного года, он уехал в настройки */
.side-foot{margin-top:auto;border-top:1px solid var(--bd);padding-top:12px}
.next-les + .side-foot{margin-top:12px}
.side-prof{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .16s;width:100%;box-sizing:border-box;background:transparent;border:1px solid transparent;color:inherit;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;text-align:left}
.side-prof:hover{background:var(--gbh)}
.prof-av{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--az),var(--az2));display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.prof-t{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.prof-t b{font-size:13px;font-weight:500;color:var(--t1)}
.prof-t small{font-size:11px;color:var(--t3)}
.prof-ch{color:var(--t3);font-size:11px}
.side-prof .adm-menu{bottom:calc(100% + 8px);top:auto;left:0;right:0}
.adm-item.danger{color:var(--err)}
.main{flex:1;min-width:0;margin-left:248px;padding:26px 30px 0;box-sizing:border-box;height:var(--vph,100vh);display:flex;flex-direction:column;overflow:hidden}
.mtop{flex-shrink:0}
#view-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:40px;scroll-behavior:smooth}
body[data-wide="1"]{overflow:hidden;height:var(--vph,100vh)}
body[data-wide="1"] .shell{height:var(--vph,100vh);min-height:0;overflow:hidden}
body[data-wide="1"] .main{box-sizing:border-box}
body[data-wide="1"] .main{max-width:none;height:var(--vph,100vh);padding-bottom:16px;display:flex;flex-direction:column;overflow:hidden}
body[data-wide="1"] #view-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
body[data-wide="1"] .inner-tabs{flex-shrink:0}
body[data-wide="1"] .chat-wrap{flex:1;min-height:0;height:auto}
body[data-wide="1"] .chat-pane{height:auto!important;min-height:0!important}
body[data-wide="1"] .chat-folders{height:auto!important;min-height:0!important}
.mtop{display:none;align-items:center;gap:14px;margin-bottom:18px}
.mtop-t{font-size:19px;font-weight:600;color:var(--t1)}
.burger{display:flex;flex-direction:column;justify-content:center;gap:4.5px;width:40px;height:40px;padding:0 9px;box-sizing:border-box;border-radius:11px;border:1px solid var(--bd);background:var(--gb);cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--t1);transition:transform .2s,opacity .2s}
.side-scrim{display:none}
/* смена раздела: новое проявляется поверх старого.
   Если гасить старое одновременно — между ними просвечивает фон и это читается как моргание. */
::view-transition-old(root){animation:none;opacity:1}
::view-transition-new(root){animation:vtIn .18s ease-out both}
@keyframes vtIn{from{opacity:0}to{opacity:1}}
::view-transition-image-pair(root){isolation:auto}
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);width:270px;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .main{margin-left:0}
  .side.open{transform:none}
  .side-scrim{display:block;position:fixed;inset:0;background:rgba(4,10,22,.6);opacity:0;pointer-events:none;transition:opacity .24s;z-index:499}
  .side-scrim.on{opacity:1;pointer-events:auto}
  .main{padding:18px 16px 70px}
  .mtop{display:flex}
}

/* профиль в подвале панели */
.side-prof{border:1px solid transparent}
.side-prof.active{background:rgba(var(--az-rgb),.13);border-color:rgba(var(--az-rgb),.28)}
.side-tools-row{display:flex;align-items:stretch;gap:8px;margin:8px 0 6px}
.side-tool{flex:1;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:12px;background:transparent;border:1px solid var(--bd);color:var(--t2);cursor:pointer;transition:all .15s}
.side-tool svg{width:19px;height:19px;flex-shrink:0;display:block}
.side-tool:hover{background:var(--gbh);color:var(--t1)}
.side-tool.on{background:rgba(var(--vi-rgb),.14);border-color:rgba(var(--vi-rgb),.35);color:var(--vi)}
.side-exit{width:100%;margin-top:6px;padding:9px 12px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--t3);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px;cursor:pointer;opacity:.65;transition:opacity .16s,color .16s,background .16s;text-align:left}
.side-exit:hover{opacity:1;color:var(--err);background:rgba(var(--err-rgb),.08)}
/* страница профиля */
.prof-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.prof-big{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--az),var(--az2));display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 6px 22px rgba(var(--az-rgb),.25)}
.prof-nm{font-size:24px;font-weight:600;color:var(--t1)}
.prof-sub{font-size:13px;color:var(--t3);margin-top:2px}
.prof-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.prof-num{border:1px solid var(--bd);border-radius:14px;background:var(--gb);padding:15px 17px}
.prof-num b{display:block;font-size:26px;font-family:'JetBrains Mono',monospace;color:var(--azl)}
.prof-num span{font-size:11.5px;color:var(--t3)}
.prof-card{padding:16px 18px;margin-bottom:16px}
.prof-card .sh{margin-bottom:10px}
.prow{display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;padding:12px 10px;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;cursor:pointer;text-align:left;transition:background .15s;border-radius:9px}
.prow:last-of-type{border-bottom:0}
.prow:hover{background:var(--gbh)}
.prow-i{display:flex;color:var(--azl);flex-shrink:0}
.prow-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.prow-t b{font-size:13.5px;font-weight:500}
.prow-t small{font-size:11.5px;color:var(--t3)}
.prow-ch{color:var(--t3);font-size:16px}
.prow.as-row{cursor:pointer}
.prow.as-col{flex-direction:column;align-items:stretch;cursor:default}
.prow.as-col:hover{background:transparent}
.prof-about{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.prof-about div{display:flex;justify-content:space-between;font-size:13px}
.prof-about span{color:var(--t3)}
.prof-about b{color:var(--t1);font-weight:500}
.prof-exit{opacity:1;border:1px solid var(--bd);text-align:center}
.pw-eye .pw-off{display:none}.pw-eye.show .pw-on{display:none}.pw-eye.show .pw-off{display:block}.pw-eye:hover{color:var(--t1)}
.ms{visibility:hidden}
body.ms-ready .ms{visibility:visible}
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga' 1;-webkit-font-feature-settings:'liga' 1;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;vertical-align:middle;user-select:none}
.side-item .ms,.prow-i .ms{font-variation-settings:'FILL' 0,'wght' 350,'GRAD' 0,'opsz' 24}
.side-item.active .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.ui-sel{position:relative}
.ui-sel-native{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%;height:100%}
.ss-opt.sel{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.log-wrap{display:flex;flex-direction:column;gap:3px}
.log-row{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:9px;background:var(--gb);border:1px solid var(--bd);font-size:12.5px}
.log-row:hover{background:var(--gbh)}
.log-time{font-family:'JetBrains Mono',monospace;color:var(--t3);flex-shrink:0}
.log-who{flex-shrink:0;padding:2px 8px;border-radius:6px;font-size:11px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.log-who.admin{background:rgba(var(--az-rgb),.15);color:var(--azl)}
.log-who.student{background:rgba(var(--ok-rgb),.14);color:var(--ok)}
.log-who.parent{background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.log-who.reader{background:var(--gbh);color:var(--t3)}
.log-what{flex:1;min-width:0;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-ago{color:var(--t3);font-size:11px;flex-shrink:0}
@media(max-width:700px){.log-row{flex-wrap:wrap;gap:6px}.log-what{white-space:normal;flex-basis:100%}}
.log-what.is-auth{color:var(--t2)}
.msg{position:relative}
.msg-t{display:inline;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-day{display:flex;justify-content:center;margin:14px 0 10px}
.msg-day span{background:rgba(255,255,255,.08);color:var(--t2);font-size:11.5px;padding:4px 13px;border-radius:12px;backdrop-filter:blur(6px)}
/* Время и галочки — в правом нижнем углу пузыря, текст их обтекает (как в телеграме) */
.msg-meta{float:right;display:inline-flex;align-items:center;gap:3px;font-size:11px;
  color:var(--t3);line-height:1;margin:7px -1px -2px 7px;user-select:none;white-space:nowrap}
.msg.mine .msg-meta{color:rgba(255,255,255,.62)}
.msg-tm{font-variant-numeric:tabular-nums}
.msg-tick{display:inline-flex;align-items:center;color:currentColor;opacity:.9;margin-left:-1px}
.msg-tick.seen{color:var(--azl);opacity:1}
.msg.mine .msg-tick.seen{color:var(--azl)}
.msg::after{content:"";display:block;clear:both}   /* чтобы обтекание не ломало высоту */
.msg-ed{font-style:italic;opacity:.75}
.msg-acts{position:absolute;top:-9px;display:none;gap:3px;background:var(--surface);border:1px solid var(--bd2);border-radius:9px;padding:3px}
.msg.mine .msg-acts{right:6px}
.msg.theirs .msg-acts{left:6px}
.msg:hover .msg-acts{display:flex}
.msg-acts button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--t2);border-radius:6px;cursor:pointer}
.msg-acts button:hover{background:var(--gbh);color:var(--t1)}
.chat-edit{display:flex;align-items:center;gap:9px;padding:8px 13px;border-top:1px solid var(--bd);background:rgba(var(--az-rgb),.08);color:var(--azl);font-size:12.5px}
.chat-edit button{margin-left:auto;background:none;border:0;color:var(--t3);cursor:pointer;font-size:14px}
.chat-edit button:hover{color:var(--t1)}
.av{border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.av-txt{color:#fff;font-weight:600;letter-spacing:.02em}
.av-preset{color:#fff}
.av-preset .ms{color:#fff}
.avp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px}
.avp-opt{background:none;border:2px solid transparent;border-radius:50%;padding:0;cursor:pointer;line-height:0;transition:transform .15s,border-color .15s}
.avp-opt:hover{transform:scale(1.08)}
.avp-opt.sel{border-color:var(--az)}
.msg-row{display:flex;align-items:center;gap:8px;max-width:100%}
.msg-row.mine{justify-content:flex-end}
.msg-row.theirs{justify-content:flex-start}
.msg-acts{display:flex;gap:2px;opacity:0;transition:opacity .14s;flex-shrink:0}
.msg-row:hover .msg-acts{opacity:1}
.msg-acts button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bd);background:var(--gb);color:var(--t3);border-radius:8px;cursor:pointer;padding:0}
.msg-acts button:hover{background:var(--gbh);color:var(--t1)}
.chat-item{display:flex;flex-direction:row;align-items:center;gap:12px;overflow:hidden;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;position:relative;padding:9px 10px;border-radius:12px;border:0;background:transparent;cursor:pointer;transition:background .12s;width:100%;box-sizing:border-box;text-align:left}
.chat-item:hover{background:rgba(255,255,255,.05)}
.chat-item.active{background:rgba(var(--az-rgb),.16)}
.chat-item.active .ci-last,.chat-item.active .ci-time{color:var(--t2)}
.ci-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ci-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci-nm{min-width:0;flex:1;font-size:15px;line-height:1.15;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-time{font-size:12px;color:var(--t3);flex-shrink:0;font-variant-numeric:tabular-nums}
.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:17px}
.ci-last{min-width:0;font-size:13px;line-height:1.25;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ci-tag{margin-left:6px;padding:1px 6px;border-radius:7px;background:rgba(var(--vi-rgb),.22);
  color:var(--vil,#c4aaff);font-size:10px;font-weight:600;vertical-align:middle;letter-spacing:.2px;
  flex-shrink:0;white-space:nowrap}
/* метка «родитель» стоит рядом с именем и не сжимается */
.ci-last.muted{opacity:.5;font-style:italic}
.ci-you{color:var(--t2)}
.ci-tick{font-size:12px;color:var(--t3);flex-shrink:0;letter-spacing:-1px}
.ci-tick.seen{color:var(--az)}
.chat-item .nav-badge{margin:0;min-width:20px;height:20px;font-size:11.5px;background:var(--az);color:#06131f;font-weight:700}
.chat-item.active .nav-badge{background:#fff;color:#0d2036}
.cab-unpaid{color:var(--warn)}
.cab-l-sum{font-family:'JetBrains Mono',monospace;color:var(--warn);font-size:14px}
.base-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.base-chip{padding:7px 13px;border-radius:9px;background:rgba(var(--az-rgb),.12);border:1px solid rgba(var(--az-rgb),.28);color:var(--azl);font-family:'JetBrains Mono',monospace;font-size:13px}
.rec-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);background:rgba(var(--gold-rgb),.14);padding:2px 7px;border-radius:5px}
.rec-tag.mv{color:var(--azl);background:rgba(var(--az-rgb),.14)}
.rec-tag.cn{color:var(--err);background:rgba(var(--err-rgb),.14)}
.rec-tag.rs{color:var(--ok);background:rgba(var(--ok-rgb),.14)}
.acc-av{position:relative;display:inline-block;margin-bottom:10px;cursor:pointer}
.acc-av:hover .av{opacity:.75}
.acc-av-x{position:absolute;right:-4px;top:-4px;width:20px;height:20px;border-radius:50%;border:1px solid var(--bd2);background:var(--surface);color:var(--t3);cursor:pointer;font-size:11px;line-height:1;padding:0}
.acc-av-x:hover{color:var(--err)}
.sr{margin:14px 4px 4px;padding:10px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--bd)}
.sr-main{display:flex;align-items:center;gap:9px}
.sr-play{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:1px solid var(--bd2);background:var(--gb);color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sr-play:hover{border-color:var(--az);color:var(--azl)}
.sr-play.on{background:rgba(var(--az-rgb),.18);border-color:var(--az);color:var(--azl)}
.sr-info{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;display:flex;flex-direction:column;gap:2px}
.sr-st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-now{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-info:hover .sr-st{color:var(--azl)}
.sr-eq{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px;flex-shrink:0}
.sr-eq i{width:2px;background:var(--az);border-radius:1px;animation:srEq .9s ease-in-out infinite}
.sr-eq i:nth-child(1){height:4px;animation-delay:0s}
.sr-eq i:nth-child(2){height:9px;animation-delay:.25s}
.sr-eq i:nth-child(3){height:6px;animation-delay:.5s}
@keyframes srEq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.sr-vol-b{width:26px;height:26px;flex-shrink:0;border:0;background:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:7px}
.sr-vol-b:hover{color:var(--t1);background:var(--gbh)}
.sr-range{margin-top:9px}
.sr-range input{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:linear-gradient(to right,var(--az) var(--p,30%),rgba(255,255,255,.12) var(--p,30%));outline:none;cursor:pointer}
.sr-range input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--azl);cursor:pointer}
.sr-range input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--azl);cursor:pointer}
.sr-list{margin-top:9px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--bd);padding-top:8px}
.sr-item{text-align:left;padding:7px 9px;border-radius:8px;border:0;background:none;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:11.5px;cursor:pointer}
.sr-item:hover{background:var(--gbh);color:var(--t1)}
.sr-item.active{background:rgba(var(--az-rgb),.14);color:var(--azl)}
.crop-box{position:relative;width:260px;height:260px;margin:6px auto 14px;border-radius:14px;overflow:hidden;background:#0d1526}
.crop-box canvas{display:block;cursor:grab;touch-action:none}
.crop-box canvas:active{cursor:grabbing}
.crop-ring{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 999px rgba(8,14,28,.62);border-radius:50%;border:2px solid rgba(255,255,255,.28)}
.crop-zoom{display:flex;align-items:center;gap:11px;color:var(--t3);padding:0 4px}
.crop-zoom input{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;background:var(--bd2);outline:none;cursor:pointer}
.crop-zoom input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--azl);cursor:pointer}
.crop-zoom input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--azl);cursor:pointer}
.av-btn{position:relative;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0;border-radius:50%;line-height:0}
.av-btn:hover .av{opacity:.7}
.av-pen{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--az);color:#08131f;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
#note-host{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9998;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.note{display:flex;align-items:center;gap:12px;min-width:290px;max-width:min(440px,92vw);padding:12px 14px;border-radius:14px;cursor:pointer;pointer-events:auto;
  background:linear-gradient(160deg,rgba(34,58,102,.92),rgba(15,27,52,.94));backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 44px rgba(0,0,0,.5);opacity:0;transform:translateY(-14px);transition:opacity .22s,transform .22s}
.note.show{opacity:1;transform:none}
.note:hover{border-color:rgba(var(--az-rgb),.45)}
.note-i{width:34px;height:34px;border-radius:50%;background:rgba(var(--az-rgb),.18);color:var(--azl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.note-b{flex:1;min-width:0}
.note-t{font-size:13.5px;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-x{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.note-c{background:none;border:0;color:var(--t3);cursor:pointer;font-size:13px;padding:4px;flex-shrink:0}
.note-c:hover{color:var(--t1)}
.msg-img{display:block;max-width:min(320px,60vw);border-radius:11px;overflow:hidden;margin-bottom:5px}
.msg-img img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.msg-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.07);text-decoration:none;color:inherit;margin-bottom:5px;min-width:180px}
.msg-file:hover{background:rgba(255,255,255,.12)}
.mf-i{width:34px;height:34px;border-radius:9px;background:rgba(var(--az-rgb),.2);color:var(--azl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mf-b{display:flex;flex-direction:column;min-width:0}
.mf-n{font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mf-s{font-size:11px;color:var(--t3)}
.msg-q{border-left:2px solid var(--az);padding:4px 0 4px 8px;margin-bottom:6px;cursor:pointer;border-radius:3px}
.msg-q:hover{background:rgba(255,255,255,.05)}
.mq-w{display:block;font-size:11px;color:var(--azl);font-weight:600}
.mq-t{display:block;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.msg-q-gone{opacity:.55;font-size:11.5px;color:var(--t3);cursor:default}
.msg-pin{display:inline-flex;align-items:center;gap:3px;color:var(--gold);font-size:10px}
.msg.pinned{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35)}
.msg.flash{animation:msgFlash 1.2s ease}
@keyframes msgFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(var(--az-rgb),.45)}}
/* ── анимации чата ─────────────────────────────────────────── */
/* своё сообщение вылетает справа, чужое — слева; лёгкий overshoot */
@keyframes msgInMine{from{opacity:0;transform:translate3d(16px,10px,0) scale(.94)}
  60%{opacity:1;transform:translate3d(-2px,0,0) scale(1.008)}
  to{opacity:1;transform:none}}
@keyframes msgInTheirs{from{opacity:0;transform:translate3d(-16px,10px,0) scale(.94)}
  60%{opacity:1;transform:translate3d(2px,0,0) scale(1.008)}
  to{opacity:1;transform:none}}
.msg.in{animation:msgInTheirs .34s cubic-bezier(.22,1.2,.36,1) both}
.msg.mine.in{animation-name:msgInMine}

/* удаление: схлопывается по своей реальной высоте (её проставляет JS) */
.msg.out{overflow:hidden;pointer-events:none;
  transition:max-height .28s cubic-bezier(.4,0,1,1),opacity .18s ease,transform .28s ease,
             margin .28s ease,padding .28s ease;
  max-height:0!important;opacity:0;transform:scale(.9) translateY(-4px);
  margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}

/* сохранённая правка — мягкий тёплый проблеск */
@keyframes msgEdited{0%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),0)}
  35%{box-shadow:0 0 0 3px rgba(var(--ok-rgb),.4)}
  100%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),0)}}
.msg.edited{animation:msgEdited 1s ease}

/* вложения и строка ответа/правки над полем ввода */
@keyframes pendIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.pend{animation:pendIn .22s cubic-bezier(.22,1.2,.36,1) both}
.chat-edit{animation:pendIn .2s ease both}

/* строка чата в списке слева, когда всплывает наверх */
@keyframes ciBump{0%{background:rgba(var(--az-rgb),.16)}100%{background:transparent}}
.chat-item.bump{animation:ciBump .9s ease}

/* микро-отклик на нажатие — ощущается «живее», без риска для вёрстки */
.chat-sendbtn,.chat-clip,.chat-emo{transition:transform .12s cubic-bezier(.22,1.2,.36,1),background .14s,border-color .14s,color .14s}
.chat-sendbtn:active,.chat-clip:active,.chat-emo:active{transform:scale(.93)}   /* .chat-rec не трогаем: запись идёт удержанием, кнопка всё время в :active */
.chat-item{transition:background .16s ease}
.msg-acts button{transition:transform .12s ease,color .12s ease,background .12s ease}
.msg-acts button:hover{transform:scale(1.12)}

@media(prefers-reduced-motion:reduce){
  .msg.in,.msg.mine.in,.msg.edited,.pend,.chat-edit,.chat-item.bump{animation:none!important}
  .msg.out{transition:none!important}
  .chat-sendbtn,.chat-clip,.chat-emo,.msg-acts button{transition:none!important}
  .chat-sendbtn:active,.chat-clip:active,.chat-emo:active,.msg-acts button:hover{transform:none!important}
}
.pin-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--bd);background:rgba(var(--gold-rgb),.07);cursor:pointer}
.pin-bar:hover{background:rgba(var(--gold-rgb),.12)}
.pb-i{color:var(--gold);display:flex;flex-shrink:0}
.pb-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pb-t b{font-size:11px;color:var(--gold);font-weight:600}
.pb-t span{font-size:12.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-x{background:none;border:0;color:var(--t3);cursor:pointer;font-size:13px;flex-shrink:0}
.pb-x:hover{color:var(--t1)}
/* убрана рамка: кнопки как в телеграме, плоские */
.chat-clip{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:0;background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-clip:hover{color:var(--azl);background:rgba(255,255,255,.08)}
.chat-edit.reply{background:rgba(var(--az-rgb),.08)}
.chat-edit.file{background:rgba(var(--ok-rgb),.08);color:var(--ok)}
.msg-grid{display:grid;gap:3px;border-radius:11px;overflow:hidden;margin-bottom:5px;max-width:min(380px,66vw)}
.msg-grid.g2,.msg-grid.g4{grid-template-columns:1fr 1fr}
.msg-grid.g3{grid-template-columns:1fr 1fr 1fr}
.mg-c{display:block;aspect-ratio:1;overflow:hidden}
.mg-c img{width:100%;height:100%;object-fit:cover;display:block}
.msg-pay{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;background:linear-gradient(135deg,rgba(255,180,60,.18),rgba(255,140,60,.07));border:1px solid rgba(255,180,60,.35);margin-bottom:5px;color:#ffb43c}
.mp-t{font-size:12px;color:var(--t2)}
.mp-a{font-size:18px;font-weight:700;color:#ffb43c;line-height:1.1}
.msg-voice{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.msg-voice audio{height:34px;max-width:230px}
.mv-d{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.pend-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 11px;border-top:1px solid var(--bd);background:rgba(255,255,255,.03)}
/* ── вложения перед отправкой: свой вид у картинок, голосовых и файлов ── */
.pend{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:12px;
  background:var(--gb);border:1px solid var(--bd);font-size:12px;max-width:230px;transition:border-color .14s}
.pend:hover{border-color:var(--bd2)}
.pend.up{opacity:.75}
.pend-b{display:flex;flex-direction:column;min-width:0;gap:1px;line-height:1.25}
.pend-n{color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.pend-s{color:var(--t3);font-size:11px}
.pend-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--bd2);
  background:var(--surface);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;opacity:0;transition:opacity .14s,color .14s,background .14s;z-index:2}
.pend:hover .pend-x{opacity:1}
.pend-x:hover{color:var(--err);background:rgba(var(--err-rgb),.16)}
@media(pointer:coarse){ .pend-x{opacity:1} }
/* картинка: квадратное превью с действиями по наведению */
.pend.pend-img{width:76px;height:76px;padding:0;overflow:hidden;border-radius:12px;max-width:none}
.pend-img img{width:100%;height:100%;object-fit:cover;display:block}
.pend-tools{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;gap:4px;padding:5px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .16s}
.pend-img:hover .pend-tools{opacity:1}
.pend-tools button{width:26px;height:26px;border-radius:8px;border:0;background:rgba(0,0,0,.5);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pend-tools button:hover{background:var(--az)}
@media(pointer:coarse){ .pend-tools{opacity:1} }
.pend-load{position:absolute;inset:0;background:rgba(10,18,32,.5);
  backdrop-filter:blur(1px);display:block}
.pend-load::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:pendSpin .7s linear infinite}
@keyframes pendSpin{to{transform:rotate(360deg)}}
/* голосовое: мини-проигрыватель */
.pend.pend-voice{padding-left:6px}
.pv-mini{width:30px;height:30px;flex-shrink:0;border-radius:50%;border:0;background:var(--az);color:#06131f;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:filter .14s}
.pv-mini:hover{filter:brightness(1.12)}
.pv-mini:disabled{opacity:.5;cursor:default}
.pv-mini.on{background:var(--ok)}
/* файл: иконка по типу */
.pend-ic{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--t2)}
.pend-ic.k-pdf{background:rgba(var(--err-rgb),.16);color:var(--err)}
.pend-ic.k-doc{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.pend-ic.k-xls{background:rgba(var(--ok-rgb),.16);color:var(--ok)}
.pend-ic.k-zip{background:rgba(var(--gold-rgb),.16);color:var(--gold)}
.pend-ic.k-video{background:rgba(var(--vi-rgb),.16);color:var(--vil)}
.pend-ic.k-audio{background:rgba(255,169,63,.16);color:#ffc27a}
.pend-add{width:44px;height:44px;align-self:center;border-radius:12px;border:1px dashed var(--bd2);background:none;
  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .14s,border-color .14s}
.pend-add:hover{color:var(--azl);border-color:var(--az)}
/* обрезка изображения */
.crop2{position:relative;display:inline-block;max-width:100%;margin:6px auto 0;line-height:0;user-select:none}
.crop2 img{max-width:100%;max-height:min(52vh,420px);display:block;border-radius:12px}
.crop2-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(6,12,22,.6);cursor:move;touch-action:none}
.crop2-box i{position:absolute;width:16px;height:16px;background:#fff;border-radius:3px;touch-action:none}
.crop2-box i[data-h=nw]{left:-8px;top:-8px;cursor:nwse-resize}
.crop2-box i[data-h=ne]{right:-8px;top:-8px;cursor:nesw-resize}
.crop2-box i[data-h=sw]{left:-8px;bottom:-8px;cursor:nesw-resize}
.crop2-box i[data-h=se]{right:-8px;bottom:-8px;cursor:nwse-resize}
.crop2-hint{margin-top:12px;font-size:12px;color:var(--t3);text-align:center}
.chat-rec{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:0;background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.chat-rec:hover{color:var(--err);border-color:rgba(var(--err-rgb),.5)}
.pin-wrap{border-bottom:1px solid var(--bd);background:rgba(var(--gold-rgb),.06)}
.pin-wrap .pin-bar{border-bottom:0;background:transparent}
.pb-rail{display:flex;flex-direction:column;gap:2px;width:3px;flex-shrink:0}
.pb-rail i{display:block;height:7px;border-radius:2px;background:rgba(var(--gold-rgb),.3)}
.pb-rail i.on{background:var(--gold)}
.pb-ch{color:var(--gold);font-size:11px;flex-shrink:0}
.pin-list{max-height:190px;overflow-y:auto;padding:0 14px 10px}
.pin-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px}
.pin-item:hover{background:rgba(255,255,255,.06)}
.pi-n{width:18px;height:18px;border-radius:50%;background:rgba(var(--gold-rgb),.16);color:var(--gold);font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pi-t{flex:1;min-width:0;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-d{color:var(--t3);font-size:11px;flex-shrink:0}
.vw{position:fixed;inset:0;z-index:10000;background:rgba(6,11,22,.94);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.vw-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;color:var(--t2);font-size:13px;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.vw-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-acts{display:flex;gap:6px;flex-shrink:0}
.vw-acts button{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.vw-acts button:hover{background:rgba(255,255,255,.16)}
.vw-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;padding:60px 84px 44px}
.vw-stage img{max-width:min(100%,1280px);max-height:min(100%,74vh);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 18px 60px rgba(0,0,0,.5);transform-origin:center;transition:transform .08s linear;user-select:none;-webkit-user-drag:none}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vw-nav:hover{background:rgba(255,255,255,.18)}
.vw-nav.l{left:18px} .vw-nav.r{right:18px}
.vw-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--t3);font-size:11.5px;pointer-events:none}
@media(max-width:760px){
  .vw-stage{padding:56px 12px 40px}
  .vw-stage img{max-width:100%;max-height:min(100%,76vh)}
  .vw-nav{width:38px;height:38px;font-size:22px}
  .vw-nav.l{left:6px} .vw-nav.r{right:6px}
  .vw-hint{display:none}
}
@media(max-height:560px){ .vw-stage{padding:48px 60px 30px} .vw-stage img{max-height:100%} .vw-hint{display:none} }
.msg-img{padding:0;border:0;background:none;cursor:zoom-in;display:block;max-width:min(320px,60vw);border-radius:11px;overflow:hidden;margin-bottom:5px}
.mg-c{padding:0;border:0;background:none;cursor:zoom-in}
.vp{display:flex;align-items:center;gap:11px;padding:7px 4px 7px 0;min-width:250px;margin-bottom:4px}
.vp-b,.tp-b{flex-shrink:0;border:0;border-radius:50%;background:var(--az);color:#06131f;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vp-b{width:38px;height:38px}
.tp-b{width:42px;height:42px}
.vp-b:hover,.tp-b:hover{filter:brightness(1.12)}
.vp-mid{flex:1;min-width:0}
.vp-wave{position:relative;display:flex;align-items:center;gap:2px;height:28px;cursor:pointer}
.vp-wave i{flex:1;min-width:2px;max-width:3px;border-radius:2px;background:rgba(255,255,255,.26);transition:background .08s}
.vp-wave i.on{background:var(--az)}
.vp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(var(--az-rgb),.45),rgba(var(--az-rgb),.2));border-radius:3px;pointer-events:none;mix-blend-mode:overlay}

.vp-time,.tp-time{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-top:3px}
.tp{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);min-width:270px;max-width:340px;margin-bottom:4px}
.tp-mid{flex:1;min-width:0}
.tp-n{font-size:13px;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-line{height:4px;border-radius:2px;background:rgba(255,255,255,.16);margin-top:7px;cursor:pointer;overflow:hidden}
.tp-line span{display:block;height:100%;width:0;background:var(--az);border-radius:2px}
.tp-dl{color:var(--t3);flex-shrink:0;display:flex}
.tp-dl:hover{color:var(--azl)}
.tfa-on{display:flex;align-items:center;gap:10px;color:var(--ok);font-size:13.5px;margin-bottom:12px}
.tfa-stat{font-size:12.5px;color:var(--t3);margin-bottom:14px}
.tfa-qr{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:12px;width:fit-content;margin:0 auto 12px}
.tfa-noqr{color:#333;font-size:12px;padding:20px}
.tfa-key{text-align:center;font-family:'JetBrains Mono',monospace;font-size:15px;letter-spacing:.1em;color:var(--azl);background:rgba(var(--az-rgb),.08);border:1px dashed rgba(var(--az-rgb),.3);border-radius:9px;padding:10px;cursor:pointer}
.backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.backup-grid span{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.08em;color:var(--t1);background:var(--gb);border:1px solid var(--bd);border-radius:8px;padding:9px;text-align:center}
.lock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--bd);border-radius:11px;background:var(--gb);margin-bottom:8px}
.lock-w{display:flex;flex-direction:column;gap:2px}
.lock-w b{font-size:13.5px;color:var(--t1);font-weight:500}
.lock-w small{font-size:11.5px;color:var(--warn)}
.lock-box{text-align:center}
.lock-logo-wrap{margin:2px auto 14px;text-align:center}.lock-logo{width:150px;max-width:70%;height:auto;display:inline-block;filter:drop-shadow(0 0 10px rgba(255,42,42,.35)) drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.lock-ring{position:relative;width:150px;height:150px;margin:6px auto 18px}
.lock-ring svg{width:150px;height:150px;transform:rotate(-90deg)}
.lock-ring .lr-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.lock-ring .lr-fg{fill:none;stroke:var(--az);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(var(--az-rgb),.5))}
.lock-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--t1);letter-spacing:.02em}
.lock-msg{font-size:14px;color:var(--t2);line-height:1.5;margin:10px 4px 14px}
.lock-sub{font-size:12.5px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.login-copy{position:fixed;right:18px;bottom:14px;font-size:11.5px;color:var(--t3);letter-spacing:.02em;z-index:5;pointer-events:none;user-select:none}
.login-mark{display:flex;justify-content:center;color:#fff;margin-bottom:14px}
/* командная строка */
.cmd-bg{position:fixed;inset:0;z-index:9997;background:rgba(4,10,22,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;animation:cmdIn .12s ease}
@keyframes cmdIn{from{opacity:0}to{opacity:1}}
.cmd-box{width:min(620px,92vw);background:linear-gradient(160deg,rgba(34,58,102,.82),rgba(15,27,52,.88));backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden}
.cmd-in{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--bd);padding:17px 20px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:15.5px;outline:none}
.cmd-in::placeholder{color:var(--t3)}
.cmd-list{max-height:min(420px,52vh);overflow-y:auto;padding:6px}
.cmd-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;cursor:pointer;font-size:13.5px}
.cmd-row.sel{background:rgba(var(--az-rgb),.16)}
.cmd-ic{color:var(--azl);display:flex;flex-shrink:0}
.cmd-lbl{color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-sub{margin-left:auto;color:var(--t3);font-size:11.5px;white-space:nowrap;flex-shrink:0}
.cmd-empty{padding:22px;text-align:center;color:var(--t3);font-size:13px}
.cmd-foot{padding:9px 16px;border-top:1px solid var(--bd);color:var(--t3);font-size:11px;letter-spacing:.02em}
.btn-ic svg{flex-shrink:0}
.btn.icon-btn{padding:6px 10px;min-width:32px;text-align:center}
.user-badge{padding:6px 14px;background:var(--gb);border:1px solid var(--bd);border-radius:12px;font-size:12px;color:var(--t2);font-family:'JetBrains Mono',monospace}
.user-badge.admin{color:var(--azl);border-color:rgba(var(--az-rgb),.3)}
.user-badge.reader{color:var(--vil);border-color:rgba(var(--vi-rgb),.3)}

/* NAV TABS */
.navtabs{position:relative;z-index:30;display:flex;gap:6px;padding-bottom:28px;animation:fdu .6s ease .05s both;align-items:center}
.lofi-mid{position:fixed;right:24px;bottom:24px;z-index:900;margin:0;display:flex;align-items:center}
.lofi-bubble{position:relative;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,rgba(30,52,90,.92),rgba(16,32,58,.88));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--azl);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;animation:lofiBubbleIn .25s ease}
@keyframes lofiBubbleIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.lofi-bubble:hover{transform:scale(1.08);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 3px rgba(var(--az-rgb),.15)}
.lofi-bubble .lb-ico{display:flex;transition:opacity .15s}
.lofi-bubble .lb-eq{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:2.5px}
.lofi-bubble .lb-eq i{width:3px;height:7px;background:var(--azl);border-radius:1px}
.lofi-bubble.is-playing{border-color:rgba(var(--az-rgb),.5);box-shadow:0 12px 32px rgba(0,0,0,.42),0 0 0 1px rgba(var(--az-rgb),.3),inset 0 1px 0 rgba(255,255,255,.1)}
.lofi-bubble.is-playing .lb-ico{opacity:0}
.lofi-bubble.is-playing .lb-eq{display:flex}
.lofi-bubble.is-playing .lb-eq i{animation:eqb .9s ease-in-out infinite}
.lofi-bubble.is-playing .lb-eq i:nth-child(2){animation-delay:.18s}
.lofi-bubble.is-playing .lb-eq i:nth-child(3){animation-delay:.42s}
.lofi-bubble.is-playing .lb-eq i:nth-child(4){animation-delay:.62s}
.lofi-w.lofi-expanded{animation:lofiExpandIn .22s cubic-bezier(.34,1.4,.64,1);transform-origin:bottom right}
@keyframes lofiExpandIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.lofi-expanded .lofi-list{top:auto;bottom:calc(100% + 8px)}
.lofi-collapse{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--bd2);color:var(--t2);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:all .15s}
.lofi-collapse:hover{color:var(--t1);border-color:var(--azl);transform:scale(1.1)}
#lofi-dock{position:fixed;z-index:900;touch-action:none;-webkit-user-select:none;user-select:none}
#lofi-dock .lofi-bubble{cursor:grab}
#lofi-dock.dragging,#lofi-dock.dragging *{cursor:grabbing !important}
#lofi-dock.dragging .lofi-bubble{animation:none}
#lofi-dock.ar.ab .lofi-expanded{transform-origin:bottom right}
#lofi-dock.ar:not(.ab) .lofi-expanded{transform-origin:top right}
#lofi-dock:not(.ar).ab .lofi-expanded{transform-origin:bottom left}
#lofi-dock:not(.ar):not(.ab) .lofi-expanded{transform-origin:top left}
#lofi-dock.ab .lofi-list{top:auto;bottom:calc(100% + 8px)}
#lofi-dock:not(.ab) .lofi-list{bottom:auto;top:calc(100% + 8px)}
#lofi-dock.ar .lofi-list{right:0;left:auto}
#lofi-dock:not(.ar) .lofi-list{left:0;right:auto}
.lofi-ctx{position:fixed;z-index:9998;min-width:214px;background:linear-gradient(135deg,rgba(26,46,80,.98),rgba(16,30,54,.98));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--bd2);border-radius:13px;padding:5px;box-shadow:0 18px 46px rgba(0,0,0,.55);animation:lofiListIn .14s ease;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.lctx-item{position:relative;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;font-size:12.5px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.lctx-item:hover{background:var(--gbh);color:var(--t1)}
.lctx-item svg{flex-shrink:0;color:var(--azl)}
.lctx-item.active{color:var(--azl)}
.lctx-arr{margin-left:auto;font-size:11px;opacity:.6;transition:transform .2s}
.lctx-station-head.open .lctx-arr{transform:rotate(90deg);opacity:1;color:var(--azl)}
.lctx-check{margin-left:auto;opacity:0;color:var(--azl);font-size:12px}
.lctx-item.active .lctx-check{opacity:1}
.lctx-stations{max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.4,0,.2,1)}
.lctx-stations.open{overflow-y:auto}
.lctx-stations-inner{padding:3px 4px 4px}
.lctx-sub-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:12px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.lctx-sub-item:hover{background:var(--gbh);color:var(--t1)}
.lctx-sub-item.active{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.lctx-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0}
.lctx-sub-item.active .lctx-dot{background:var(--ok);box-shadow:0 0 6px rgba(var(--ok-rgb),.6)}
.lofi-w{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(30,52,90,.72),rgba(16,32,58,.6));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:15px;padding:9px 15px 9px 11px;box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1)}
.lofi-w::before{content:"";position:absolute;inset:0;border-radius:15px;padding:1px;background:linear-gradient(135deg,rgba(var(--az-rgb),.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.lofi-w.live::before{opacity:1}
.lofi-play{position:relative;background:rgba(var(--az-rgb),.12);border:1px solid rgba(var(--az-rgb),.25);color:var(--azl);cursor:pointer;font-size:13px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .16s;flex-shrink:0}
.lofi-play:hover{background:rgba(var(--az-rgb),.22);border-color:rgba(var(--az-rgb),.45);transform:scale(1.05)}
/* эквалайзер живёт внутри play-кнопки: ▶ когда стоп, бегущие полоски когда играет, ❚❚ при наведении */
.lofi-play .lp-ico,.lofi-play .lp-pause{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .14s}
.lofi-play .lp-pause{opacity:0;font-size:11px}
.lofi-play .lp-eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px;opacity:0;transition:opacity .14s}
.lofi-play .lp-eq i{width:3px;height:5px;background:var(--azl);border-radius:1px}
.lofi-play.is-playing .lp-ico{opacity:0}
.lofi-play.is-playing .lp-eq{opacity:1}
.lofi-play.is-playing .lp-eq i{animation:eqb .9s ease-in-out infinite}
.lofi-play.is-playing .lp-eq i:nth-child(2){animation-delay:.18s}
.lofi-play.is-playing .lp-eq i:nth-child(3){animation-delay:.42s}
.lofi-play.is-playing .lp-eq i:nth-child(4){animation-delay:.62s}
.lofi-play.is-playing:hover .lp-eq{opacity:0}
.lofi-play.is-playing:hover .lp-pause{opacity:1}
@keyframes eqb{0%,100%{height:5px;opacity:.5}50%{height:16px;opacity:1}}
.lofi-col{display:flex;flex-direction:column;gap:5px;min-width:160px}
.lofi-head{display:flex;align-items:center;gap:6px}
.lofi-station{background:none;border:none;color:var(--t1);cursor:pointer;font-size:12px;font-weight:600;padding:0;display:flex;align-items:center;gap:3px;transition:color .14s}
.lofi-station:hover{color:var(--azl)}
.lofi-arr{font-size:9px;opacity:.7}
.lofi-meta{display:flex;flex-direction:column;line-height:1.15;max-width:230px}
.lofi-artist{font-size:11px;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;position:relative}
.lofi-artist .la-inner{display:inline-block;white-space:nowrap}
.lofi-artist.scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent 100%)}
.lofi-artist.scroll .la-inner{animation:laMarquee linear infinite;animation-duration:var(--mdur,12s)}
@keyframes laMarquee{0%,8%{transform:translateX(0)}48%,58%{transform:translateX(calc(-1 * var(--mshift,0px)))}98%,100%{transform:translateX(0)}}
.lofi-track{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ползунок громкости в стиле Apple Music: динамики по краям, тонкая дорожка, светящаяся точка при перетаскивании */
.av-vol{display:flex;align-items:center;gap:9px;width:100%}
.av-spk{background:none;border:none;color:var(--t3);cursor:pointer;padding:1px;display:flex;flex-shrink:0;transition:color .14s,transform .14s}
.av-spk:hover{color:var(--azl);transform:scale(1.12)}
.av-spk svg{width:15px;height:15px;display:block}
.av-range{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.av-range input{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:0}
.av-pct{position:absolute;bottom:calc(100% + 2px);transform:translateX(-50%);background:var(--surface);border:1px solid var(--bd2);color:var(--azl);font-size:10px;font-family:'JetBrains Mono',monospace;padding:1px 6px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .14s;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:5}
.av-range.dragging .av-pct{opacity:1}
.av-range input::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:linear-gradient(90deg,var(--azl) var(--p,30%),rgba(255,255,255,.16) var(--p,30%));transition:height .16s}
.av-range input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;background:var(--azl);margin-top:-2.5px;box-shadow:0 0 0 0 rgba(var(--az-rgb),0);transition:width .16s,height .16s,margin-top .16s,box-shadow .16s,background .16s}
.av-range input:hover::-webkit-slider-runnable-track{height:5px}
.av-range input:active::-webkit-slider-runnable-track{height:6px}
.av-range input:active::-webkit-slider-thumb{width:15px;height:15px;margin-top:-4.5px;background:#fff;box-shadow:0 0 0 6px rgba(var(--az-rgb),.22),0 0 16px 3px rgba(var(--az-rgb),.65)}
.av-range input::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.16)}
.av-range input::-moz-range-progress{height:4px;border-radius:3px;background:var(--azl)}
.av-range input::-moz-range-thumb{width:9px;height:9px;border:none;border-radius:50%;background:var(--azl);transition:all .16s}
.av-range input:active::-moz-range-thumb{width:15px;height:15px;background:#fff;box-shadow:0 0 0 6px rgba(var(--az-rgb),.22),0 0 16px 3px rgba(var(--az-rgb),.65)}
.lofi-list{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:linear-gradient(135deg,rgba(26,46,80,.96),rgba(16,30,54,.96));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--bd2);border-radius:14px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);z-index:950;animation:lofiListIn .16s ease}
@keyframes lofiListIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.lofi-st{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:12.5px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.lofi-st:hover{background:var(--gbh);color:var(--t1)}
.lofi-st.active{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.lofi-st .st-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);flex-shrink:0;transition:background .14s}
.lofi-st.active .st-dot{background:var(--azl);box-shadow:0 0 8px 1px rgba(var(--az-rgb),.7)}
.lofi-st.active.playing .st-dot{animation:stPulse 1.4s ease-in-out infinite}
@keyframes stPulse{0%,100%{box-shadow:0 0 6px 0 rgba(var(--az-rgb),.5)}50%{box-shadow:0 0 11px 3px rgba(var(--az-rgb),.85)}}
.lofi-st .st-name{flex:1}
.lofi-st .st-eq{display:none;align-items:flex-end;gap:1.5px;height:11px}
.lofi-st.active.playing .st-eq{display:inline-flex}
.lofi-st .st-eq i{width:2px;height:4px;background:var(--azl);border-radius:1px;animation:eqb .9s ease-in-out infinite}
.lofi-st .st-eq i:nth-child(2){animation-delay:.3s}
.lofi-st .st-eq i:nth-child(3){animation-delay:.55s}
.adm-wrap{position:relative;display:inline-block}
.adm-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:5px;box-shadow:0 14px 36px rgba(0,0,0,.5);min-width:190px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:all .15s;z-index:950}
.adm-menu.show{opacity:1;transform:translateY(0);pointer-events:auto}
.adm-item{padding:9px 12px;border-radius:8px;font-size:12.5px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s}
.adm-item:hover{background:var(--gbh);color:var(--t1)}
.adm-item.adm-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adm-item.adm-toggle.active{color:var(--azl)}
.adm-sw{position:relative;width:30px;height:17px;border-radius:9px;background:rgba(255,255,255,.16);flex-shrink:0;transition:background .16s}
.adm-sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .16s}
.adm-item.adm-toggle.active .adm-sw{background:var(--az)}
.adm-item.adm-toggle.active .adm-sw::after{transform:translateX(13px)}
.adm-sub{padding:4px 12px 7px;font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.adm-volwrap{position:relative}
.adm-volhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adm-volhead:hover{background:var(--gbh);color:var(--t1)}
.adm-vchev{font-size:11px;color:var(--t3);line-height:1;transition:transform .2s}
.adm-volwrap.open .adm-vchev{transform:rotate(180deg);color:var(--azl)}
/* инлайн-аккордеон: список dB раскрывается прямо внутри меню вниз, без ухода за экран */
.adm-acc{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .22s ease}
.adm-volwrap.open .adm-acc{grid-template-rows:1fr}
.adm-acc-inner{min-height:0;overflow:hidden}
.adm-acc-inner .adm-item{display:flex;align-items:center;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--t3);margin:1px 0 1px 8px;padding:7px 10px;border-left:2px solid transparent}
.adm-acc-inner .adm-item:hover{color:var(--t1)}
.adm-acc-inner .adm-item.active{color:var(--azl);background:rgba(var(--az-rgb),.12);border-left-color:var(--azl)}
.adm-acc-inner .adm-item .av-tick{opacity:0;font-size:11px}
.adm-acc-inner .adm-item.active .av-tick{opacity:1}
@media(max-width:760px){.lofi-mid{right:16px;bottom:16px}}
.navtab{padding:9px 20px;border-radius:14px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13px;cursor:pointer;transition:all .18s}
.navtab:hover{background:var(--gbh);color:var(--t1)}
.navtab.active{background:rgba(var(--az-rgb),.16);border-color:rgba(var(--az-rgb),.38);color:var(--azl)}

/* SECTION HEAD */
.sh{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sh::after{content:'';flex:1;height:1px;background:var(--bd)}

/* STATS GRID */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.sc{padding:18px 20px;position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:20px 20px 0 0}
.sc.az::before{background:linear-gradient(90deg,var(--az),var(--azl))}
.sc.s::before{background:linear-gradient(90deg,var(--s1),var(--s2))}
.sc.vi::before{background:linear-gradient(90deg,var(--vi),var(--vil))}
.sc.ok::before{background:linear-gradient(90deg,var(--ok),#a8f5d0)}
.sc.e::before{background:linear-gradient(90deg,var(--err),#ffa0a0)}
.sc.w::before{background:linear-gradient(90deg,var(--warn),#ffe0b0)}
.sc-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:7px}
.sc-val{font-size:24px;font-weight:600;line-height:1}
.sc-val.az{color:var(--azl)} .sc-val.s{color:var(--s2)} .sc-val.vi{color:var(--vil)}
.sc-val.ok{color:var(--ok)} .sc-val.e{color:var(--err)} .sc-val.w{color:var(--warn)}
.sc-note{font-size:11px;color:var(--t3);margin-top:5px}
.prog{height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-top:8px}
.prog-f{height:100%;border-radius:3px}

/* GLOW DIV */
.gdiv{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--az-rgb),.35),rgba(var(--vi-rgb),.25),transparent);margin:28px 0}

/* WEEK GRID */
.week-grid{display:grid;gap:16px;margin-bottom:28px}
.week-row{display:grid;grid-template-columns:90px repeat(7,1fr);gap:8px;align-items:center}
.week-row.head .wc{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;padding:4px 0;text-align:center}
.week-row.head .wc:first-child{text-align:left}
.wc{font-size:12px;color:var(--t2);font-family:'JetBrains Mono',monospace}
.wc.time{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;justify-content:flex-start;min-height:38px;padding-left:4px;white-space:nowrap;align-self:center}
.slot-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:10px;font-size:11px;font-weight:500;white-space:nowrap;cursor:pointer;width:100%;transition:all .15s;border:1px solid transparent}
.slot-pill.done{background:rgba(var(--az-rgb),.18);color:var(--azl);border-color:rgba(var(--az-rgb),.3)}
.slot-pill.cancel_student{background:rgba(var(--err-rgb),.15);color:var(--err);border-color:rgba(var(--err-rgb),.25)}
.slot-pill.cancel_me{background:rgba(var(--warn-rgb),.15);color:var(--warn);border-color:rgba(var(--warn-rgb),.25)}
.slot-pill.base{background:rgba(var(--vi-rgb),.15);color:var(--vil);border-color:rgba(var(--vi-rgb),.25)}
.slot-pill.planned{background:rgba(var(--warn-rgb),.1);color:var(--warn);border-color:rgba(var(--warn-rgb),.2);font-style:italic}
.qbtn{border:1px solid;border-radius:7px;font-size:11px;cursor:pointer;padding:3px 5px;line-height:1;background:transparent}
.qbtn.qdone{background:rgba(var(--ok-rgb),.2);border-color:rgba(var(--ok-rgb),.4);color:var(--ok)}
.qbtn.qpaid{background:rgba(var(--ok-rgb),.2);border-color:rgba(var(--ok-rgb),.4);color:var(--ok)}
.qbtn.qunpaid{background:rgba(var(--warn-rgb),.15);border-color:rgba(var(--warn-rgb),.35);color:var(--warn)}
.slot-pill.base:hover{background:rgba(var(--vi-rgb),.25)}
.slot-pill.empty-add{background:transparent;color:var(--t3);border:1px dashed rgba(255,255,255,.15);font-size:10px}
.slot-pill.empty-add:hover{border-color:rgba(var(--az-rgb),.4);color:var(--azl)}
.day-hdr{text-align:center;font-size:11px;color:var(--t2);padding:6px 0 10px}
.day-hdr.today{color:var(--azl)}
.day-hdr span{display:block;font-size:9px;color:var(--t3);margin-top:2px}

/* STUDENT TABLE */
.stbl{width:100%;border-collapse:collapse;font-size:13px}
.stbl .rep-total td{font-weight:600;color:var(--t1);border-top:1px solid var(--bd2)}
.stbl th{padding:8px 12px;text-align:left;font-weight:500;font-size:10px;color:var(--t3);border-bottom:1px solid var(--bd);letter-spacing:.9px;text-transform:uppercase}
.stbl td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.stbl tr:last-child td{border-bottom:none}
.stbl tr:hover td{background:rgba(255,255,255,.03);cursor:pointer}
.sname{font-weight:500}
.grade-b{display:inline-block;padding:2px 9px;border-radius:8px;font-size:11px;font-weight:500;background:rgba(var(--az-rgb),.14);color:var(--azl);border:1px solid rgba(var(--az-rgb),.23)}
.grade-b.hi{background:rgba(var(--vi-rgb),.14);color:var(--vil);border-color:rgba(var(--vi-rgb),.23)}
.price-t{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--s2)}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t2)}
.err-t{color:var(--err);font-family:'JetBrains Mono',monospace;font-size:12px}
.warn-t{color:var(--warn);font-family:'JetBrains Mono',monospace;font-size:12px}
.archive-row td{opacity:.45}

/* MODAL */
.modal-bg{position:fixed;inset:0;height:var(--vph,100vh);background:rgba(5,10,20,.75);backdrop-filter:blur(6px);z-index:4500;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;animation:fdi .18s ease}
.modal{background:var(--surface);border:1px solid var(--bd2);border-radius:var(--r2);padding:26px 28px;width:100%;max-width:520px;
  max-height:calc(var(--vph,100vh) - 40px);overflow-y:auto;margin:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  animation:modalIn .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* на телефоне — шторкой снизу, как привычнее пальцу */
@media(max-width:620px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:88vh;animation:sheetIn .3s cubic-bezier(.2,.9,.3,1) both}
  .modal::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto 14px}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.modal h2{font-size:17px;font-weight:600;margin-bottom:20px}
.modal-close{float:right;background:none;border:none;color:var(--t3);font-size:20px;cursor:pointer;line-height:1;margin-top:-4px}
.modal-close:hover{color:var(--t1)}
@keyframes fdi{from{opacity:0}to{opacity:1}}

/* FORM */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:14px;outline:none;transition:border-color .18s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(var(--az-rgb),.5)}
.field select option{background:var(--surface2)}
/* CUSTOM STUDENT SELECT */
.ss-wrap{position:relative}
.ss-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:14px;cursor:pointer;text-align:left;transition:border-color .18s}
.ss-btn:hover{border-color:var(--bd2)}
.ss-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-val.placeholder{color:var(--t3)}
.ss-arr{font-size:10px;color:var(--t3);flex-shrink:0}
.ss-list{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:230px;overflow-y:auto;background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .15s;z-index:650}
.ss-list.open{opacity:1;visibility:visible;transform:translateY(0)}
.ss-opt{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--t1);cursor:pointer;transition:background .1s}
.ss-opt:hover{background:var(--gbh)}
.ss-opt.sel{background:rgba(var(--az-rgb),.18);color:var(--azl)}
.ss-opt .ss-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-opt .ss-grade{flex-shrink:0;font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.ss-opt.ss-empty{color:var(--t3)}
.ss-arch-toggle{width:100%;margin-top:4px;padding:9px 12px;border-radius:8px;border:1px dashed var(--bd2);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px;cursor:pointer;text-align:left;transition:all .14s}
.ss-arch-toggle:hover{background:var(--gbh);color:var(--t1);border-color:var(--bd2)}
.ss-arch{border-top:1px solid var(--bd);margin-top:4px;padding-top:4px}
.ss-arch .ss-opt{opacity:.82}
.ss-list::-webkit-scrollbar{width:6px}
.ss-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.qt-picker{position:relative;flex:1}
.qt-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:14px;cursor:pointer;transition:border-color .18s}
.qt-btn:hover{border-color:var(--bd2)}
.qt-arr{font-size:10px;color:var(--t3)}
.qt-list{position:absolute;bottom:calc(100% + 4px);left:0;right:0;max-height:168px;overflow-y:auto;background:var(--surface);border:1px solid var(--bd2);border-radius:10px;padding:4px;box-shadow:0 -12px 36px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .15s;z-index:600}
.qt-list.open{opacity:1;visibility:visible;transform:translateY(0)}
.qt-opt{padding:7px 12px;border-radius:7px;font-size:14px;color:var(--t2);cursor:pointer;text-align:center;transition:all .1s;font-family:'JetBrains Mono',monospace}
.qt-opt:hover{background:var(--gbh);color:var(--t1)}
.qt-opt.sel{background:rgba(var(--az-rgb),.2);color:var(--azl)}
.qt-list::-webkit-scrollbar{width:6px}
.qt-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
/* TIME DIAL */
.dt-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.dt-svg{width:100%;max-width:248px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;display:block}
.dt-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.5}
.dt-tick{cursor:pointer}
.dt-tick text{font-family:'JetBrains Mono',monospace;fill:var(--t2);text-anchor:middle;dominant-baseline:central;transition:fill .12s}
.dt-tick.dt-h text{font-size:12px}
.dt-tick.dt-m text{font-size:10px;fill:var(--t3)}
.dt-tick:hover text{fill:var(--t1)}
.dt-tick.sel text{fill:#06121f;font-weight:700}
.dt-hit{fill:transparent}
.dt-bg{fill:var(--az);opacity:0;transition:opacity .12s}
.dt-tick.sel .dt-bg{opacity:1}
.dt-tick.dt-m.sel .dt-bg{fill:var(--azl)}
.dt-hand{stroke-linecap:round;transition:opacity .12s}
.dt-hand-h{stroke:var(--az);stroke-width:3}
.dt-hand-m{stroke:rgba(168,221,247,.75);stroke-width:2}
.dt-knob-h{fill:var(--az)}
.dt-knob-m{fill:var(--azl)}
.dt-hub{fill:var(--surface2);stroke:var(--bd2);stroke-width:1}
.dt-read{font-family:'JetBrains Mono',monospace;font-size:17px;fill:var(--t1);text-anchor:middle;dominant-baseline:central;font-weight:600;letter-spacing:.5px;pointer-events:none}
.dt-caption{font-size:10px;color:var(--t3);text-align:center;max-width:240px;line-height:1.4}
.field textarea{resize:vertical;min-height:80px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--bd)}

/* NOTE CARDS */
.note-card{background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:10px;position:relative}
.topic-item{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.topic-status{flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:7px;white-space:nowrap;margin-top:1px}
.topic-status.tp-done{background:rgba(var(--ok-rgb),.18);color:var(--ok)}
.topic-status.tp-repeat{background:rgba(var(--warn-rgb),.18);color:#ffb347}
.topic-status.tp-planned{background:rgba(var(--az-rgb),.18);color:var(--azl)}
.topic-body{flex:1;min-width:0}
.topic-text{font-size:13px;color:var(--t1);line-height:1.4;word-break:break-word}
.topic-date{font-size:10.5px;color:var(--t3);margin-top:3px;font-family:'JetBrains Mono',monospace}
.topic-acts{display:flex;gap:4px;flex-shrink:0}
.note-text{font-size:13px;color:var(--t1);line-height:1.6;white-space:pre-wrap}
.note-meta{font-size:10px;color:var(--t3);margin-top:8px;font-family:'JetBrains Mono',monospace}
.note-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.note-card:hover .note-actions{opacity:1}

/* LESSON LOG */
.lesson-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.04);margin-bottom:6px;border:1px solid rgba(255,255,255,.06)}
.lesson-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lesson-dot.done{background:var(--ok)}
.lesson-dot.cancel_student{background:var(--err)}
.lesson-dot.cancel_me{background:var(--warn)}
.lesson-dot.planned{background:rgba(var(--warn-rgb),.5);border:1px dashed var(--warn)}
.lesson-info{flex:1;font-size:12px}
.lesson-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t2)}
.lesson-del{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;opacity:0;transition:opacity .15s}
.lesson-item:hover .lesson-del{opacity:1}
.lesson-del:hover{color:var(--err)}

/* TYPE PILLS for quick add */
.type-group{display:flex;flex-direction:column;gap:10px}
.type-zone-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.type-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.type-sub{overflow:hidden;max-height:0;opacity:.001;transition:max-height .22s ease,opacity .2s ease;display:flex;flex-direction:column;gap:6px}
.type-sub.open{max-height:160px;opacity:1}
.type-pill{padding:9px 10px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px;cursor:pointer;transition:all .16s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-pill:hover{background:var(--gbh);color:var(--t1)}
.type-pill.active{font-weight:600}
.type-pill.active.planned{background:rgba(var(--az-rgb),.18);border-color:rgba(var(--az-rgb),.4);color:var(--azl)}
.type-pill.active.done{background:rgba(var(--ok-rgb),.18);border-color:rgba(var(--ok-rgb),.4);color:var(--ok)}
.type-pill.cancel-group.active{background:rgba(var(--err-rgb),.14);border-color:rgba(var(--err-rgb),.35);color:var(--err)}
.type-pill.active.cancel_student{background:rgba(var(--err-rgb),.18);border-color:rgba(var(--err-rgb),.4);color:var(--err)}
.type-pill.active.cancel_me{background:rgba(var(--warn-rgb),.18);border-color:rgba(var(--warn-rgb),.4);color:var(--warn)}
.type-pill.active.no_count{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--t1)}
.type-pill.subj-pill.active{background:color-mix(in srgb, var(--sc,#8a97a8) 18%, transparent);border-color:color-mix(in srgb, var(--sc,#8a97a8) 45%, transparent);color:var(--sc,#8a97a8)}

/* DETAIL PANEL */
.detail-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
@media(max-width:800px){.detail-panel{grid-template-columns:1fr}}
.detail-col{display:flex;flex-direction:column;gap:16px}

/* LOGIN */
.login-wrap{min-height:var(--vph,100vh);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.login-box{padding:36px 32px;width:100%;max-width:380px;text-align:center}
.login-box .field{margin-bottom:14px}
.login-title{font-size:26px;font-weight:600;margin-bottom:8px}
.login-sub{font-size:13px;color:var(--t2);margin-bottom:30px}
.login-err{font-size:12px;color:var(--err);margin-top:10px;min-height:16px}

/* CHARTS */
.chart-wrap{position:relative;width:100%;height:220px;overflow:hidden}
.chart-wrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

/* ANIM */
@keyframes fdu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fdr{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}

/* DIVIDER tiny */
.tgdiv{height:1px;background:var(--bd);margin:16px 0}

/* PAGINATION / empty */
.empty-state{text-align:center;padding:40px 20px;color:var(--t3);font-size:13px}


/* ── MOBILE ─────────────────────────────────────────── */
@media(max-width:640px){
  .app{padding:0 12px 60px}
  .topbar{position:relative;z-index:400;padding:16px 0 20px;flex-wrap:wrap;gap:10px}
  .topbar-right{gap:8px;flex-wrap:wrap}
  .logo{font-size:18px}
  .year-sel{font-size:12px;padding:5px 10px}
  .navtabs{gap:4px;padding-bottom:20px;overflow-x:auto;flex-wrap:nowrap}
  .navtab{padding:7px 14px;font-size:12px;white-space:nowrap}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
  .sc{padding:14px 14px}
  .sc-val{font-size:20px}
  .wchips{gap:6px}
  .wchip{font-size:11px;padding:4px 10px}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .modal{padding:20px;max-width:100%}
  .modal h2{font-size:15px}
  .field-row{grid-template-columns:1fr}
  .stbl{font-size:11px}
  .stbl th,.stbl td{padding:7px 8px}
  .detail-panel{grid-template-columns:1fr}
  /* week grid mobile - scroll */
  .week-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .week-grid-inner{min-width:560px}
  /* hide Сб/Вс columns label on mobile - they still scroll */
  .login-box{padding:28px 20px}
  .login-title{font-size:22px}
  /* stats 2-col on mobile */
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  /* charts smaller */
  .chart-wrap{height:180px}
  /* topbar compact */
  .user-badge{display:none}
  /* schedule pill text smaller */
  .slot-pill{font-size:10px;padding:3px 6px}
  .day-hdr{font-size:10px}
  .day-hdr span{font-size:8px}
  .wc.time{font-size:10px}
  /* toast bottom center on mobile */
  #toast-host{bottom:14px;gap:5px}
  .toast{text-align:left;font-size:12px;padding:6px 7px 6px 12px;max-width:94vw}
}
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr}
}

/* SCROLLBAR */

/* ── CUSTOM DATEPICKER ──────────────────────────────── */
.dp-wrap{position:relative}
.dp-input{width:100%;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:14px;cursor:pointer;text-align:left;transition:border-color .18s;user-select:none}
.dp-input:hover{border-color:var(--bd2)}
.dp-input.open{border-color:rgba(var(--az-rgb),.5)}
.dp-popup{position:fixed;z-index:800;max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;background:var(--surface);border:1px solid var(--bd2);border-radius:16px;padding:16px;width:280px;box-shadow:0 16px 48px rgba(0,0,0,.6);animation:fdu .15s ease}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dp-nav{background:none;border:none;color:var(--t2);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .15s;line-height:1}
.dp-nav:hover{background:var(--gbh);color:var(--t1)}
.dp-month-label{font-size:14px;font-weight:500;color:var(--t1);cursor:pointer;padding:4px 10px;border-radius:8px;transition:all .15s}
.dp-month-label:hover{background:var(--gbh)}
.dp-days-head{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.dp-days-head span{text-align:center;font-size:10px;color:var(--t3);padding:4px 0;text-transform:uppercase;letter-spacing:.5px}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{text-align:center;padding:7px 2px;font-size:13px;border-radius:8px;cursor:pointer;color:var(--t2);transition:all .15s;border:none;background:none;width:100%}
.dp-day:hover{background:rgba(var(--az-rgb),.15);color:var(--azl)}
.dp-day.today{color:var(--az);font-weight:600}
.dp-day.selected{background:rgba(var(--az-rgb),.3);color:var(--azl);font-weight:600}
.dp-day.other-month{color:var(--t3);opacity:.4}
.dp-day.disabled{opacity:.2;cursor:default;pointer-events:none}
.dp-footer{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}

/* ── SCHEDULE CELL ──────────────────────────────────── */
.cell-lesson{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 8px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:filter .15s;min-height:30px;overflow:hidden}
.cell-lesson:hover{filter:brightness(1.15)}
.cell-lesson.done,.cell-lesson.planned:not(.is-base),.cell-lesson.cancel_student,.cell-lesson.cancel_me,.cell-lesson.no_count{border-style:dashed}
.cell-lesson.is-base{border-style:solid !important}
.cell-lesson.done{background:rgba(var(--ok-rgb),.16);border-color:rgba(var(--ok-rgb),.3)}
.cell-lesson.planned{background:rgba(var(--az-rgb),.16);border-color:rgba(var(--az-rgb),.3)}
.cell-lesson.overdue{border-color:rgba(var(--warn-rgb),.65)!important;box-shadow:0 0 0 1px rgba(var(--warn-rgb),.35),0 0 12px rgba(var(--warn-rgb),.18)}
.overdue-mark{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:rgba(var(--warn-rgb),.16);border:1px solid rgba(var(--warn-rgb),.45);color:var(--warn);font-size:10px;font-weight:700;margin-right:5px;flex-shrink:0;line-height:1}
.mrow.overdue{border-color:rgba(var(--warn-rgb),.6)!important;box-shadow:inset 3px 0 0 rgba(var(--warn-rgb),.8)}
.cell-lesson.cancel_student{background:rgba(var(--err-rgb),.15);border-color:rgba(var(--err-rgb),.28)}
.cell-lesson.cancel_me{background:rgba(var(--warn-rgb),.15);border-color:rgba(var(--warn-rgb),.28)}
.cell-lesson.base{background:rgba(var(--vi-rgb),.13);border-color:rgba(var(--vi-rgb),.25);border-style:dashed}
.cell-lesson.base-static{background:rgba(var(--az-rgb),.13);border-color:rgba(var(--az-rgb),.25)}
.cell-lesson.base-static .cell-name{color:var(--azl)}
.cell-main{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.cell-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.cell-grade{font-size:10px;color:var(--t3);font-weight:500;white-space:nowrap}
/* Метка предмета (Математика/Информатика) — компактная цветная плашка,
   цвет передаётся через --sc из subjTagHtml() в shared.js */
.subj-tag{font-size:9px;font-weight:700;letter-spacing:.02em;line-height:1;flex-shrink:0;
  color:var(--sc,#8a97a8);background:color-mix(in srgb, var(--sc,#8a97a8) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--sc,#8a97a8) 35%, transparent);
  padding:2px 5px;border-radius:5px;white-space:nowrap}
.nl-subj{margin:0 -2px 0 2px}
.cell-lesson.done .cell-name{color:var(--ok)}
.cell-lesson.planned .cell-name{color:var(--azl)}
.cell-lesson.cancel_student .cell-name{color:var(--err)}
.cell-lesson.cancel_me .cell-name{color:var(--warn)}
.cell-lesson.base .cell-name{color:var(--vil)}
.paid-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25)}
.paid-dot.paid{background:var(--ok);border-color:var(--ok)}
.cell-actions{display:flex;gap:2px;flex-shrink:0}
.cell-btn{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--t2);font-size:10px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s}
.cell-btn:hover{background:rgba(255,255,255,.18);color:var(--t1)}
.cell-btn.on{background:rgba(var(--ok-rgb),.25);border-color:rgba(var(--ok-rgb),.45);color:var(--ok)}
.cell-btn.red:hover{background:rgba(var(--err-rgb),.25);border-color:rgba(var(--err-rgb),.4);color:var(--err)}


.cell-stack{display:flex;flex-direction:column;gap:3px;align-self:start;position:relative;border-radius:8px;transition:background .12s}
.cell-carousel{position:relative}
.cc-nav{position:absolute;top:3px;right:6px;display:flex;align-items:center;gap:2px;z-index:3;background:rgba(8,16,30,.82);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:1px 3px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.cc-arrow{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:rgba(13,26,53,.7);color:var(--t2);font-size:9px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;line-height:1}
.cc-arrow:hover{background:rgba(255,255,255,.18);color:var(--t1)}
.cc-pos{font-size:8px;color:var(--t3);font-family:'JetBrains Mono',monospace;padding:0 1px}
.mcar{position:relative}
.mcar .cc-nav{position:static;display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:6px 14px 0;transform:none;background:transparent;border:none;border-radius:0;box-shadow:none}
.cell-carousel{position:relative;overflow:hidden;border-radius:10px}
.cc-items{display:flex;transition:transform .26s cubic-bezier(.4,0,.2,1)}
.cc-item{flex:0 0 100%;width:100%;min-width:0}
.cc-slider{position:absolute;left:50%;transform:translateX(-50%);bottom:5px;height:14px;display:flex;align-items:center;z-index:3;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.cc-track{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.cc-stop{position:absolute;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.28);transform:translate(-50%,-50%)}
.cc-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:6px;border-radius:4px;background:var(--azl);box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 5px rgba(var(--az-rgb),.35);cursor:grab;transition:left .16s ease}
.cc-knob:active{cursor:grabbing}
.cell-carousel .cc-item .cv-body{align-self:flex-start}
.cell-carousel .cc-item .rd-cell .cell-main{padding-bottom:12px}
.rd-grid .rd-row{border-top:1px solid rgba(255,255,255,.05);min-height:48px;padding:4px 0}
.rd-grid .rd-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.05)}
.rd-grid .cell-stack{border-left:1px solid rgba(255,255,255,.04);padding-left:4px;min-height:50px;justify-content:center}
.rd-grid .cell-stack:last-child{border-right:1px solid rgba(255,255,255,.04)}
.cell-stack .empty-add{height:68px;min-height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}

.cell-lesson.no_count{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);border-style:dotted}
.cell-lesson.no_count .cell-name{color:var(--t2)}


.cell-lesson.is-base{position:relative;border-style:solid}
.cell-time{font-size:9px;color:var(--t3);font-family:'JetBrains Mono',monospace;flex-shrink:0;background:rgba(255,255,255,.08);padding:1px 4px;border-radius:5px;margin-right:2px}
.cell-lesson.topt{flex-direction:column;align-items:stretch;justify-content:center;gap:1px;min-height:40px;box-sizing:border-box;padding:3px 8px}
/* новый горизонтальный layout ячейки */
.cell-lesson.cellv{display:flex;flex-direction:row;align-items:center;gap:6px;height:68px;box-sizing:border-box;padding:4px 7px}
/* карточка draggable="true" — Chrome рисует ей пунктирный focus-outline при
   клике по кнопке внутри (фокус утекает на ближайший draggable-предок),
   из-за чего казалось, что карточка «сдвигается»/меняет вид при клике на иконку */
.cell-lesson:focus,.cell-lesson:focus-visible{outline:none}
.cv-icons{display:flex;flex-direction:column;gap:2px;flex-shrink:0;align-self:center}
.cv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.cv-body .cell-name{display:flex;align-items:center;gap:5px}
.cv-body .cell-toptime{justify-content:flex-start;text-align:left}
/* третья строка карточки — предмет + класс, отдельно от имени, чтобы не
   сжиматься в одну тесную линию (см. cell-name выше) */
.cell-meta{display:flex;align-items:center;gap:4px;line-height:1}
.ic-btn{flex-shrink:0;width:26px;height:21px;border-radius:6px;border:1px solid rgba(var(--az-rgb),.35);background:rgba(var(--az-rgb),.15);color:var(--azl);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .14s}
.ic-btn:hover{background:rgba(var(--az-rgb),.32);color:#fff}
.cellv .cell-actions{flex-shrink:0;align-self:center}
.cell-actions.vert{flex-direction:column;gap:3px}
.wk-nav{display:inline-flex;align-items:center;gap:4px;background:var(--gb);border:1px solid var(--bd);border-radius:12px;padding:3px 4px;height:38px;box-sizing:border-box}
.wk-arrow{width:30px;height:30px;border:none;background:transparent;color:var(--t2);font-size:20px;line-height:1;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .14s}
.wk-arrow:hover{background:var(--gbh);color:var(--azl)}
.wk-label{font-size:12px;color:var(--t2);min-width:130px;text-align:center;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.wk-label-btn{font-size:12px;color:var(--t2);min-width:130px;text-align:center;font-family:'JetBrains Mono',monospace;white-space:nowrap;background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;transition:all .14s}
.wk-label-btn:hover{background:var(--gbh);color:var(--azl)}
.week-picker{position:fixed;z-index:1100;background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.5);max-height:340px;overflow-y:auto;min-width:220px;opacity:0;transform:translateY(-6px);transition:all .15s}
.week-picker.show{opacity:1;transform:translateY(0)}
.wp-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s;font-size:12.5px;color:var(--t2)}
.wp-item:hover{background:var(--gbh)}
.wp-item.sel{background:rgba(var(--az-rgb),.18);color:var(--azl)}
.wp-lbl{font-family:'JetBrains Mono',monospace}
.wp-now{font-size:9px;background:rgba(var(--az-rgb),.25);color:var(--azl);padding:1px 6px;border-radius:6px;margin-left:4px;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.wp-cnt{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace;flex-shrink:0}
.add-lesson-btn{display:inline-flex;align-items:center;gap:5px;height:38px;box-sizing:border-box}
.pay-bar{flex-shrink:0;width:3px;align-self:stretch;margin:4px 0 4px 2px;border-radius:3px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.pay-bar.paid{background:rgba(255,255,255,.12)}
.pay-bar.paid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--ok);box-shadow:0 0 6px rgba(var(--ok-rgb),.5);border-radius:3px}
.pay-bar.pay-anim::after{animation:payFill .6s cubic-bezier(.34,1.05,.5,1)}
@keyframes payFill{from{height:0}to{height:100%}}
@keyframes cardPop{0%{transform:scale(.95)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
.cell-lesson.card-flash{animation:cardPop .42s ease}
.cell-lesson.card-flash .cell-btn,.cell-lesson.card-flash .cell-actions{animation:btnIn .34s cubic-bezier(.34,1.4,.64,1)}
@keyframes btnIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes cardIn{from{opacity:0;transform:scale(.8) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cell-lesson.card-in{animation:cardIn .34s cubic-bezier(.34,1.45,.64,1)}
.cell-toptime{font-size:10.5px;color:var(--t2);font-family:'JetBrains Mono',monospace;letter-spacing:-.3px;text-align:center;line-height:1.1;white-space:nowrap;display:inline-flex;justify-content:center}
.cell-toptime .rg-tail{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.cell-lesson.topt:hover .cell-toptime .rg-tail,.cell-lesson.topt.show-end .cell-toptime .rg-tail,.cell-lesson.cellv:hover .cell-toptime .rg-tail,.cell-lesson.cellv.show-end .cell-toptime .rg-tail{max-width:80px;opacity:1}
.prof-btn{flex-shrink:0;cursor:pointer}
.prof-btn{display:inline-flex}
.cell-row{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%}
.cell-lesson.topt .cell-main{flex:1;min-width:0}
.cell-lesson.done .cell-toptime{color:rgba(var(--ok-rgb),.7)}
.cell-lesson.planned .cell-toptime{color:rgba(var(--az-rgb),.8)}
.cell-lesson.cancel_student .cell-toptime{color:rgba(var(--err-rgb),.7)}
.cell-lesson.cancel_me .cell-toptime{color:rgba(var(--warn-rgb),.7)}
.cell-lesson.base-static .cell-toptime{color:rgba(var(--az-rgb),.7)}


.cell-lesson[draggable=true]{cursor:grab}
.cell-lesson.dragging{opacity:.4;cursor:grabbing}
.cell-stack.dragover{background:rgba(var(--az-rgb),.1);border-radius:10px;outline:1px dashed rgba(var(--az-rgb),.4)}
.cell-stack.today-col{background:rgba(var(--az-rgb),.045);border-radius:10px}
.sf-dd{position:relative;display:inline-block}
.sf-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.05);color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;cursor:pointer;transition:all .15s}
.sf-btn svg{flex-shrink:0;opacity:.85}
.sf-btn:hover{border-color:var(--bd2);color:var(--t1)}
.sf-dd.on .sf-btn{border-color:rgba(var(--az-rgb),.5);color:var(--azl);background:rgba(var(--az-rgb),.1)}
.sf-cur{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-arr{font-size:9px;opacity:.7;transition:transform .18s}
.sf-dd.open .sf-arr{transform:rotate(180deg)}
.sf-list{position:absolute;top:calc(100% + 6px);left:0;min-width:184px;max-height:320px;overflow-y:auto;background:linear-gradient(135deg,rgba(26,46,80,.97),rgba(16,30,54,.97));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--bd2);border-radius:12px;padding:5px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:60;animation:lofiListIn .16s ease}
.sf-opt{padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.sf-opt:hover{background:var(--gbh);color:var(--t1)}
.sf-opt.sel{background:rgba(var(--az-rgb),.16);color:var(--azl)}
.cell-lesson.sched-dim{opacity:.18;filter:grayscale(.5);transition:opacity .15s}
.cell-lesson.sched-dim:hover{opacity:.5}
.cell-lesson.sched-hl{box-shadow:inset 0 0 0 1.5px rgba(var(--az-rgb),.6)}
.next-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;background:rgba(var(--az-rgb),.12);border:1px solid rgba(var(--az-rgb),.3);font-size:12px;white-space:nowrap}
.next-badge .nb-ico{flex-shrink:0;color:var(--azl)}
.next-badge .nb-when{color:var(--azl);font-weight:500}
.next-badge .nb-name{color:var(--t1);font-weight:500}
.cell-lesson.lesson-now{box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.4)}
.now-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:5px;vertical-align:middle;box-shadow:0 0 6px rgba(var(--ok-rgb),.75);animation:nowDot 1.6s ease-in-out infinite}
@keyframes nowDot{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.day-hdr.today span{color:var(--azl)}


.stbl th.th-center,.stbl td.td-center{text-align:center}
.stbl td,.stbl th{border-right:1px dashed rgba(255,255,255,.06)}
.stbl td:last-child,.stbl th:last-child{border-right:none}
.sort-arr{font-size:9px;color:var(--t3);opacity:.5}
.sort-arr.active{color:var(--azl);opacity:1}
.stbl th:hover{color:var(--t2)}


.year-dd{position:relative}
.year-dd-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;padding:7px 14px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13px;cursor:pointer;transition:all .15s}
.year-dd-btn:hover{border-color:var(--bd2);background:rgba(255,255,255,.1)}
.year-dd-arr{font-size:10px;color:var(--t3)}
.year-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:6px;box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .15s;z-index:500}
.year-dd-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.year-dd-item{padding:0 12px;min-height:40px;box-sizing:border-box;border-radius:8px;font-size:13px;color:var(--t2);cursor:pointer;transition:background .12s,color .12s;display:flex;align-items:center;justify-content:space-between;gap:8px}
.year-dd-item .ydi-label{flex:1}
.year-dd-item .ydi-acts{display:none;gap:4px}
.year-dd-item:hover .ydi-acts{display:flex}
.ydi-btn{width:22px;height:22px;border-radius:6px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--t2);font-size:11px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.ydi-btn:hover{background:rgba(255,255,255,.14);color:var(--t1)}
.ydi-btn.del:hover{background:rgba(var(--err-rgb),.2);border-color:rgba(var(--err-rgb),.4);color:var(--err)}
.year-dd-item:hover{background:var(--gbh);color:var(--t1)}
.year-dd-item.active{background:rgba(var(--az-rgb),.15);color:var(--azl)}
.year-dd-add{padding:9px 12px;border-radius:8px;font-size:13px;color:var(--azl);cursor:pointer;font-weight:500;border-bottom:1px solid var(--bd);margin-bottom:4px;transition:all .12s}
.year-dd-add:hover{background:rgba(var(--az-rgb),.12)}


.star{position:absolute;border-radius:50%;background:#fff;opacity:var(--op);pointer-events:none;will-change:transform,opacity}
/* на светлых темах белые звёздочки на светлом фоне не видны — красим в тёмный */
body[data-theme="light"] .star,
body[data-theme="daylight"] .star,
body[data-theme="lavender"] .star,
body[data-theme="peach"] .star,
body[data-theme="sand"] .star,
body[data-theme="mist"] .star{background:var(--t1)}
@keyframes starDrift{0%{transform:translate(0,0)}50%{transform:translate(var(--dx),var(--dy))}100%{transform:translate(0,0)}}
@keyframes starPulse{0%,100%{opacity:calc(var(--op) * .4)}50%{opacity:var(--op)}}


.rd-cell{cursor:default;position:relative}
.rd-cell .cell-name{width:100%;text-align:center}
.rd-note{font-size:11px;color:var(--azl);cursor:help;padding:0 4px;flex-shrink:0}
.cell-note{font-size:10px;margin-left:2px;opacity:.75}
.cell-note:hover{opacity:1}
.note-mark{flex-shrink:0;cursor:pointer}
.note-mark.empty{opacity:.45}
.note-mark.empty:hover{opacity:1}
.note-bubble{position:absolute;transform:scale(.92);opacity:0;max-width:300px;min-width:190px;background:linear-gradient(135deg,rgba(30,55,95,.78),rgba(20,40,75,.68));backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.2);border-radius:16px;border-top-left-radius:8px;padding:34px 16px 14px;font-size:13px;line-height:1.5;color:var(--t1);z-index:1200;box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);transition:opacity .16s ease,transform .18s ease}
.note-bubble.show{opacity:1;transform:scale(1)}
.note-bubble .nb-date{font-size:11px;font-weight:600;color:var(--azl);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-right:18px}
.nb-ear{position:absolute;top:4px;left:4px;width:26px;height:21px;border-radius:6px;background:rgba(var(--az-rgb),.3);border:1px solid rgba(var(--az-rgb),.5);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}
.note-bubble .nb-text{white-space:pre-wrap;padding-right:18px}
.note-bubble .nb-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--t2);font-size:18px;line-height:1;cursor:pointer;padding:0;transition:color .12s}
.note-bubble .nb-close:hover{color:var(--t1)}
.note-bubble .nb-img{margin-top:10px;max-width:100%;max-height:160px;border-radius:10px;border:1px solid rgba(255,255,255,.15);cursor:zoom-in;display:block}
.note-mark:hover{background:rgba(var(--az-rgb),.35);color:#fff}
.prof-note-last{background:rgba(var(--az-rgb),.08);border:1px solid rgba(var(--az-rgb),.2);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--t1);line-height:1.4}
.prof-note-last.empty{color:var(--t3);background:rgba(255,255,255,.03);border-color:var(--bd);font-style:italic}
.ctx-menu{position:fixed;min-width:190px;background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:4300;opacity:0;transform:scale(.94);transform-origin:top left;transition:opacity .16s ease,transform .22s cubic-bezier(.2,.85,.25,1)}
.ctx-menu.show{opacity:1;transform:scale(1)}
.ctx-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:13px;color:var(--t1);cursor:pointer;transition:background .1s}
/* кнопка «поставить реакцию» — проявляется при наведении на сообщение */
.msg-rxb{position:absolute;bottom:0;left:calc(100% + 5px);width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(3px) scale(.82);pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.22,1.1,.36,1),color .16s,background .16s;
  transition-delay:.12s}                 /* исчезает не мгновенно — успеваешь довести курсор */
.msg.mine .msg-rxb{left:auto;right:calc(100% + 5px)}
/* Невидимая зона вокруг пузыря: кнопка и правый клик срабатывают с запасом.
   По вертикали только 3px — промежуток между сообщениями 8px, больше нельзя,
   иначе зоны соседей склеятся и подсветится не то сообщение. */
.msg::before{content:"";position:absolute;top:-3px;bottom:-3px;left:-52px;right:-52px;z-index:-1}
.msg-rxb::before{content:"";position:absolute;top:-4px;bottom:-4px;left:-7px;right:-7px}
.msg:hover .msg-rxb,.msg-rxb:hover{opacity:.6;transform:none;pointer-events:auto;transition-delay:0s}
.msg-rxb:hover{opacity:1;color:var(--azl);background:rgba(255,255,255,.09)}
.msg-rxb:active{transform:scale(.9)}
/* без мыши (телефон/планшет) кнопка не нужна — там долгое нажатие */
@media (hover:none),(pointer:coarse){ .msg-rxb{display:none} }
/* меню, в котором только ряд эмодзи */
/* когда есть реакции — сам контейнер прозрачный, а внутри две плашки */
.ctx-menu.has-rx{background:transparent;border:0;box-shadow:none;padding:0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:min(320px,92vw)}
.ctx-menu.has-rx .ctx-react{border-bottom:0;margin-bottom:0;padding:4px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--bd2);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.ctx-menu.has-rx .ctx-body{min-width:190px;background:var(--surface);border:1px solid var(--bd2);
  border-radius:12px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.ctx-menu.has-rx.rx-only .ctx-body{display:none}
/* меню целиком выравниваем по стороне сообщения */
.ctx-menu.has-rx.to-right{align-items:flex-end}
/* эмодзи-картинки из пака */
.emo{display:inline-block;vertical-align:-0.25em;object-fit:contain;user-select:none;-webkit-user-drag:none;margin:0 1px}
.msg-t.big-emo{display:inline-block;line-height:1.1}
.msg-t.big-emo .emo{vertical-align:-0.08em;margin:1px}
.emo-tx{line-height:1}
/* панель выбора эмодзи для набора сообщения */
.emo-pop{position:fixed;z-index:10060;padding:8px;border-radius:14px;
  background:rgba(20,33,58,.94);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(6px) scale(.98);transition:opacity .15s ease,transform .15s cubic-bezier(.22,1.2,.36,1)}
.emo-pop.show{opacity:1;transform:none}
.emo-grid{display:grid;grid-template-columns:repeat(8,34px);gap:2px;max-height:280px;overflow-y:auto;
  max-width:min(300px,92vw)}
.emo-b{width:34px;height:34px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s,transform .12s}
.emo-b:hover{background:rgba(255,255,255,.12);transform:scale(1.15)}
.emo-b:active{transform:scale(.94)}
/* перетаскивание файлов в окно */
.drop-ov{position:fixed;inset:0;z-index:10070;display:flex;flex-direction:column;gap:10px;padding:14px;
  background:rgba(6,12,22,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fdi .16s ease}
.drop-z{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:2px dashed var(--bd2);border-radius:18px;color:var(--t2);text-align:center;padding:16px;
  transition:border-color .14s,background .14s,color .14s}
.drop-z.over{border-color:var(--az);background:rgba(var(--az-rgb),.12);color:var(--t1)}
.dz-ic{display:flex;color:var(--t3)}
.drop-z.over .dz-ic{color:var(--azl)}
.drop-z b{font-size:17px;font-weight:600}
.drop-z small{font-size:12.5px;color:var(--t3)}
/* кнопка эмодзи в панели ввода */
.chat-emo{width:38px;height:38px;flex-shrink:0;border:0;background:transparent;color:var(--t3);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .14s,background .14s,transform .12s}
.chat-emo:hover{color:var(--azl);background:rgba(255,255,255,.08)}
.chat-emo:active{transform:scale(.92)}
/* полная сетка реакций — раскрывается по стрелке */
/* полный список раскрывается ПОВЕРХ, продолжая ряд быстрых реакций */
.ctx-menu.has-rx .ctx-react{position:relative}
.ctx-rx-all{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:2;
  grid-template-columns:repeat(8,32px);gap:2px;max-height:236px;overflow-y:auto;
  padding:7px;border-radius:14px;background:var(--surface);border:1px solid var(--bd2);
  box-shadow:0 14px 38px rgba(0,0,0,.5)}
.ctx-menu.has-rx.to-right .ctx-rx-all{left:auto;right:0}
.ctx-menu.rx-open .ctx-rx-all{display:grid}
.ctx-rx.more{color:var(--t3)}
.ctx-menu.rx-open .ctx-rx.more{transform:rotate(180deg)}
/* ── недельная сетка по времени ── */
.swk{overflow-x:auto;overflow-y:visible;padding-bottom:4px}
.swk-head{display:grid;gap:3px;position:sticky;top:0;z-index:3;padding-bottom:6px;background:none}
.swk-dh{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12.5px;font-weight:600;color:var(--t2);padding:4px 0}
.swk-dh i{font-style:normal;font-size:11px;color:var(--t3);font-weight:400}
.swk-dh.today{color:var(--azl)}
.swk-dh.today i{color:var(--azl);opacity:.75}
.swk-body{display:grid;gap:3px;align-items:start}
.swk-axis{position:relative}
.swk-hr{position:absolute;right:8px;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--t3);white-space:nowrap}
.swk-col{position:relative;border-radius:12px;background:rgba(255,255,255,.015);
  border:1px solid transparent;border-left:1px solid rgba(255,255,255,.05);
  transition:background .15s,border-color .15s;cursor:pointer}
.swk-col.today-col{background:rgba(var(--az-rgb),.05);border-color:rgba(var(--az-rgb),.22)}
.swk-col.dragover{background:rgba(var(--az-rgb),.12);border-color:var(--az)}
/* Фоновых часовых линий нет: сквозь полупрозрачные карточки они просвечивали
   и резали блоки пополам. Ориентир даёт ось слева. */
.swk-col:first-of-type{border-left-color:transparent}
/* фон-подложка: общая зона «открыто для записи», под плашками времени —
   просто общая картина, без своего взаимодействия. */
.swk-avail{position:absolute;left:5px;right:5px;border-radius:12px;pointer-events:none;
  background:rgba(108,196,148,.045);border:1px solid rgba(108,196,148,.09)}
.swk-col.today-col .swk-avail{background:rgba(108,196,148,.07);border-color:rgba(108,196,148,.14)}
/* свободный слот — своя плашка на каждое время, без рамки, чуть светлее
   фона колонки, время видно сразу (не только по наведению). */
.swk-slot{position:absolute;left:5px;right:5px;border-radius:8px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.05);border:none;color:rgba(255,255,255,.42);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  transition:background .13s,color .13s}
.swk-slot:hover,.swk-slot:focus-visible{background:rgba(108,196,148,.18);color:var(--t1)}
.swk-col.today-col .swk-slot{background:rgba(255,255,255,.065)}
.sws-a{font-weight:500}
/* закрытые для записи интервалы — спокойнее, без агрессивного контраста */
.swk-shut{position:absolute;left:5px;right:5px;border-radius:9px;pointer-events:none;overflow:hidden;
  background-color:rgba(30,26,28,.55);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 8px,rgba(255,255,255,.02) 8px 16px);
  border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.swk-shut span{font-size:11px;color:var(--t2);font-weight:500;text-align:center;padding:0 4px;line-height:1.2;
  position:sticky;top:50%}
.swk-item{position:absolute;overflow:hidden}
.swk-item .cell-lesson,.swk-item .cell-base{height:100%;box-sizing:border-box}
/* раньше тут иконки/кнопки укладывались в ряд вместо столбика — карточка была
   слишком низкой для столбика. Теперь карточки выше (см. itemH в buildWeekGrid),
   так что возвращаем обычную укладку в столбик, как везде. */
/* стопка инструментов рисования — сплит-кнопка с чертой-разделителем выглядела
   отдельным разделом тулбара, а не «доп. вариантами пера». Убрали границу и
   фон совсем: стрелка — просто маленький значок в углу кнопки пера, без своей
   рамки/подложки, читается как деталь ЭТОЙ кнопки, а не соседний инструмент. */
.wb-stack{position:relative;display:inline-flex}
.wb-stack .wb-b{width:40px}
.wb-more-dot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;padding:0;border:0;
  background:transparent;color:#8a97a8;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:none;transition:color .14s}
.wb-more-dot:hover{color:var(--azl)}
.wb-stack.act .wb-more-dot{color:#fff}
/* панель урока: отдельно от рисования */
.wb-lesson{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:center;gap:4px;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4210}
.wb-lesson.side-v{flex-direction:column}
.wb-lesson:not(.side-v){flex-direction:row}
/* перетаскиваемые панели доски */
.wb-movable{cursor:grab;touch-action:none}   /* position не трогаем: панели уже позиционированы */
.wb-movable.dragging{cursor:grabbing;user-select:none;box-shadow:0 22px 60px rgba(0,0,0,.65);
  transform:scale(1.02)}
.wb-movable.dragging *{pointer-events:none}
/* мягкое примагничивание к краю */
.wb-movable.snapping{transition:left .38s cubic-bezier(.22,1.3,.36,1),top .38s cubic-bezier(.22,1.3,.36,1),
  transform .38s cubic-bezier(.22,1.3,.36,1),box-shadow .3s ease}
/* у боковой стенки панель разворачивается столбиком */
.wb-movable.side-v{flex-direction:column!important;flex-wrap:nowrap!important;max-width:none!important}
.wb-movable.side-v .wb-sep{width:22px;height:1px;margin:3px 0}
.wb-movable.side-v .wb-zsl{writing-mode:vertical-lr;direction:rtl;width:6px;height:110px}
.wb-movable.side-v .wb-timer-t{font-size:12px}
/* ручка у боковой стенки переезжает на бок */
.wb-movable.side-v .wb-grip{top:50%;left:auto;right:-8px;transform:translateY(-50%) translateX(3px);
  width:16px;height:30px}
.wb-movable.side-v .wb-grip .ms{transform:none}
.wb-movable.side-v:hover .wb-grip{transform:translateY(-50%) translateX(0)}
.wb-movable.side-left.side-v .wb-grip{right:auto;left:-8px}
/* ручка: подсказывает, что панель можно переставить */
.wb-grip{position:absolute;top:-8px;left:50%;transform:translateX(-50%) translateY(3px);
  display:flex;align-items:center;justify-content:center;width:30px;height:16px;border-radius:8px;
  background:var(--surface);border:1px solid var(--bd2);color:var(--t3);
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s cubic-bezier(.22,1.2,.36,1)}
.wb-grip .ms{font-size:14px;transform:rotate(90deg)}
.wb-movable:hover .wb-grip{opacity:1;transform:translateX(-50%) translateY(0)}
.wb-movable.dragging .wb-grip{opacity:1;transform:translateX(-50%) translateY(0);
  border-color:var(--az);color:var(--azl)}
/* свёрнутая панель кнопок */
.wb-callbar.hid{padding:4px;gap:0;background:transparent;border:0;box-shadow:none;width:auto}
.wb-callbar.hid .wb-cb{background:rgba(27,34,48,.92);border:1px solid var(--bd2);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.wb-cb-hide{opacity:.65}
.wb-cb-hide:hover{opacity:1}
/* плашка сессии занятия */
.ses-bar{align-items:center}
.ses-seats{display:flex;align-items:center;gap:-6px;flex-shrink:0}
.ses-seat{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);background:var(--gb);overflow:hidden;margin-right:-8px;
  box-shadow:0 0 0 1px var(--bd)}
.ses-seat:last-child{margin-right:0}
.ses-seat.on{box-shadow:0 0 0 2px var(--ok)}
.ses-seat .av{width:100%;height:100%}
.ses-empty{display:flex;color:var(--t3)}
.ses-b{display:flex;flex-direction:column;min-width:0;line-height:1.25;margin-left:10px}
.ses-t{font-size:13px;color:var(--t1)}
.ses-s{font-size:11px;color:var(--t3)}
/* таймер занятия — отдельный от доски */
.les-timer{position:fixed;right:18px;top:64px;z-index:4400;display:flex;align-items:center;gap:8px;
  padding:8px 10px 8px 12px;border-radius:999px;background:rgba(20,33,58,.92);border:1px solid var(--bd2);
  box-shadow:0 12px 32px rgba(0,0,0,.45);color:var(--t1);font-variant-numeric:tabular-nums;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.les-timer.over{border-color:rgba(var(--err-rgb),.6);color:var(--err)}
.lt-ic{display:flex;color:var(--azl)}
.les-timer.over .lt-ic{color:var(--err)}
.lt-v{font-size:14px;font-weight:600;min-width:46px;text-align:center}
.lt-x{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lt-x:hover{background:rgba(255,255,255,.1);color:var(--t1)}
/* закрытое время в сетке записи */
.bkc-shut{position:absolute;left:2px;right:2px;border-radius:8px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 7px,rgba(255,255,255,.02) 7px 14px);
  border:1px dashed rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bkc-shut span{font-size:10.5px;color:var(--t3);text-align:center;padding:0 4px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.blk-acts{margin-left:auto;display:flex;gap:2px;flex-shrink:0}
.blk-b{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.blk-b:hover{background:var(--gbh);color:var(--t1)}
.blk-b.del:hover{background:rgba(var(--err-rgb),.15);color:var(--err)}
/* закрытые для записи даты */
.blk-list{display:flex;flex-direction:column;gap:6px}
.blk-it{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  background:var(--gb);border:1px solid var(--bd)}
.blk-ic{display:flex;flex-shrink:0;color:var(--gold)}
.blk-b{display:flex;flex-direction:column;min-width:0;gap:1px;line-height:1.25}
.blk-d{font-size:13.5px;color:var(--t1);font-weight:600}
.blk-s{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.blk-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.blk-f>span{font-size:11.5px;color:var(--t3)}
@media(max-width:620px){ .blk-form{grid-template-columns:1fr} }
/* причина закрытия в кабинете ученика */
.blk-note{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:12px;margin-bottom:12px;
  background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.28);color:var(--t2);font-size:13px}
.blk-note .ms{color:var(--gold);flex-shrink:0}
/* поле ввода в модалках (класса .inp в проекте не было — поля выходили белыми) */
.inp{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--t1);
  font-family:'Geologica',sans-serif;font-size:14px;outline:none;
  transition:border-color .16s,background .16s}
.inp::placeholder{color:var(--t3)}
.inp:hover{border-color:var(--bd2)}
.inp:focus{border-color:rgba(var(--az-rgb),.55);background:rgba(255,255,255,.08)}
.mh{font-size:17px;font-weight:600;color:var(--t1);margin-bottom:16px}
.mb{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--bd)}
/* ── списки задач ── */
.cl{margin:2px 0 4px;min-width:min(260px,60vw)}
.cl-h{font-weight:600;font-size:14px;margin-bottom:7px}
.cl-list{display:flex;flex-direction:column;gap:1px}
.cl-item{display:flex;align-items:flex-start;gap:8px;padding:7px 6px;border-radius:9px;cursor:pointer;
  transition:background .13s;-webkit-touch-callout:none;user-select:none}
.cl-item:hover{background:rgba(255,255,255,.07)}
.cl-item.locked{cursor:default}
.cl-item.locked:hover{background:transparent}
.cl-mark{flex-shrink:0;width:19px;height:19px;margin-top:0;border-radius:5px;border:1.5px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;color:transparent;transition:background .14s,border-color .14s,color .14s}
.cl-item.done .cl-mark{background:var(--ok);border-color:var(--ok);color:#0b1a12}
.cl-tx{flex:1;min-width:0;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.cl-item.done .cl-tx{opacity:.55;text-decoration:line-through}
.cl-foot{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;color:var(--t3);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.cl-plus{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--azl);
  font-family:'Geologica',sans-serif;font-size:11.5px;cursor:pointer;padding:2px 4px;border-radius:7px}
.cl-plus:hover{background:rgba(var(--az-rgb),.14)}
/* окно создания списка */
.cl-edit{display:flex;flex-direction:column;gap:7px;margin-top:14px;max-height:min(38vh,300px);overflow-y:auto;padding-right:2px}
.cl-row{display:flex;align-items:center;gap:10px}
.cl-box{width:17px;height:17px;flex-shrink:0;border-radius:5px;border:1.5px solid var(--bd2)}
.cl-i{flex:1;min-width:0}
.cl-del{width:28px;height:28px;flex-shrink:0;border:0;background:transparent;color:var(--t3);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.cl-del:hover{background:rgba(var(--err-rgb),.14);color:var(--err)}
.cl-add{margin-top:12px;align-self:flex-start}
@media(pointer:coarse){ .cl-item{padding:10px 6px} .cl-mark{width:22px;height:22px} .cl-tx{font-size:14px} }
/* ── выделение нескольких сообщений ── */
.msg.picked{outline:2px solid var(--az);outline-offset:2px}
.msg.picked::after{content:"";display:block;clear:both}
.chat-thread:has(.msg.picked) .msg{cursor:pointer}
.sel-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--bd);
  animation:pendIn .18s cubic-bezier(.22,1.2,.36,1) both}
.sel-x{width:34px;height:34px;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:var(--t2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.sel-x:hover{background:rgba(255,255,255,.09);color:var(--t1)}
.sel-n{font-size:13.5px;color:var(--t2)}
.sel-n b{color:var(--t1);font-size:14.5px}
.sel-acts{margin-left:auto;display:flex;gap:4px}
.sel-b{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:0;border-radius:11px;
  background:var(--gb);color:var(--t1);font-family:'Geologica',sans-serif;font-size:13px;cursor:pointer;
  transition:background .14s,color .14s,transform .12s}
.sel-b:hover{background:var(--gbh)}
.sel-b:active{transform:scale(.95)}
.sel-b.danger{color:var(--err)}
.sel-b.danger:hover{background:rgba(var(--err-rgb),.14)}
/* окно пересылки */
.fw-list{max-height:min(46vh,360px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-top:10px}
.fw-it{display:flex;align-items:center;gap:10px;padding:7px 9px;border:0;border-radius:12px;background:transparent;
  color:var(--t1);font-family:'Geologica',sans-serif;font-size:13.5px;cursor:pointer;text-align:left;
  transition:background .14s}
.fw-it:hover{background:var(--gbh)}
.fw-it.cur{background:rgba(var(--az-rgb),.1)}
.fw-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.fw-cur{font-size:11px;color:var(--t3);flex-shrink:0}
@media(max-width:760px){ .sel-b span{display:none} .sel-b{padding:9px 11px} }
/* ── реакции на сообщения ── */
.msg-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;clear:both}   /* не наезжаем на плавающее время */
.rx{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:11px;cursor:pointer;
  border:1px solid transparent;background:rgba(255,255,255,.09);color:var(--t1);font-size:12.5px;line-height:1.5;
  transition:background .13s,border-color .13s,transform .12s cubic-bezier(.22,1.2,.36,1)}
.rx:hover{background:rgba(255,255,255,.16)}
.rx:active{transform:scale(.92)}
.rx.on{background:rgba(var(--az-rgb),.22);border-color:rgba(var(--az-rgb),.5)}
.rx-e{display:inline-flex;align-items:center;line-height:1}
.rx-n{font-size:11px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.rx.on .rx-n{color:var(--azl)}
@keyframes rxPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.msg-rx .rx{animation:rxPop .2s cubic-bezier(.22,1.4,.36,1)}
/* ряд эмодзи в контекстном меню сообщения */
.ctx-react{display:flex;gap:2px;padding:3px 2px 6px;margin-bottom:3px;border-bottom:1px solid var(--bd);
  flex-wrap:nowrap;justify-content:flex-start}
.ctx-rx{width:32px;height:32px;border:0;background:transparent;border-radius:9px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:background .12s,transform .12s cubic-bezier(.22,1.2,.36,1)}
.ctx-rx:hover{background:rgba(255,255,255,.12);transform:scale(1.18)}
.ctx-rx.on{background:rgba(var(--az-rgb),.25)}
@media(prefers-reduced-motion:reduce){ .msg-rx .rx{animation:none} .rx:active,.ctx-rx:hover{transform:none} }
.ctx-item.checked{background:rgba(var(--az-rgb),.12);color:var(--azl)}
.ctx-item.checked:hover{background:rgba(var(--az-rgb),.2)}
.ctx-check{display:flex;color:var(--azl);flex-shrink:0}
.ctx-lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-check{margin-left:auto}   /* галочку вправо — без растягивания подписи */
/* громкость собеседника — всплывает по правому клику на его видео/аватаре */
.peer-vol{position:fixed;z-index:10050;min-width:230px;padding:10px 12px;border-radius:12px;
  background:rgba(20,33,58,.92);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 44px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-4px) scale(.97);transition:opacity .14s ease,transform .14s cubic-bezier(.22,1.2,.36,1)}
.peer-vol.show{opacity:1;transform:none}
.pv-h{font-size:12px;color:var(--t3);margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-row{display:flex;align-items:center;gap:9px}
.pv-ic{display:flex;color:var(--t2);flex-shrink:0}
.pv-val{font-size:12px;color:var(--t2);min-width:42px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.pv-val.boost{color:var(--gold,#e8b04b);font-weight:600}
.pv-hint{margin-top:7px;font-size:10.5px;color:var(--t3);line-height:1.3}
/* засечка на отметке 100% — середина шкалы 0..200, считается от самого ползунка */
.pv-track{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.pv-track::after{content:"";position:absolute;left:calc(50% - 1px);top:50%;width:2px;height:10px;
  margin-top:-5px;background:rgba(255,255,255,.3);border-radius:1px;pointer-events:none}
.vol-range{flex:1;min-width:0;accent-color:var(--az);height:22px;cursor:pointer;background:transparent}
.vol-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--gb)}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--azl);margin-top:-5.5px;border:0;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vol-range::-moz-range-track{height:4px;border-radius:2px;background:var(--gb)}
.vol-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--azl);border:0}
.ctx-item:hover{background:var(--gbh)}
.ctx-item.danger{color:var(--err)}
.ctx-item.danger:hover{background:rgba(var(--err-rgb),.14)}
.ctx-sep{height:1px;background:var(--bd);margin:5px 8px}
.paste-ghost{position:fixed;pointer-events:none;z-index:1001;background:rgba(var(--az-rgb),.92);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
.note-upload{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--gb);border:1px dashed var(--bd2);border-radius:10px;font-size:13px;color:var(--t2);cursor:pointer;transition:all .15s}
.note-upload:hover{background:var(--gbh);color:var(--t1)}
.note-img-prev{margin-top:8px;display:flex;align-items:center;gap:10px}
.note-img-thumb{max-width:120px;max-height:90px;border-radius:8px;border:1px solid var(--bd)}
.note-img-del{background:none;border:none;color:var(--err);font-size:12px;cursor:pointer}
.note-photo{max-width:100%;max-height:240px;border-radius:10px;margin-top:8px;cursor:zoom-in;border:1px solid var(--bd);display:block}
.note-photo-wrap,.nb-img-wrap{position:relative;display:inline-block;margin-top:8px}
.nb-copy{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(15,30,55,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s}
.nb-copy:hover{background:rgba(var(--az-rgb),.6);border-color:rgba(var(--az-rgb),.8)}
.img-viewer{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:fdu .15s ease}
.img-viewer img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.rd-tip{position:fixed;transform:translate(-50%,-100%);background:var(--surface);border:1px solid var(--bd2);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--t1);font-family:'JetBrains Mono',monospace;white-space:nowrap;z-index:300;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .16s ease,transform .16s ease}
.rd-tip.note{transform:translate(-50%,4px);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;max-width:260px;white-space:pre-wrap;line-height:1.45}
.rd-tip.note.show{opacity:1;transform:translate(-50%,0)}


.desktop-only{display:block}
.mobile-only{display:none}
.mday{margin-bottom:14px;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.mday.today{border-color:rgba(var(--az-rgb),.4)}
.mday-hdr{padding:10px 14px;font-size:13px;font-weight:600;color:var(--t1);background:rgba(255,255,255,.04);border-bottom:1px solid var(--bd)}
.mday.today .mday-hdr{color:var(--azl)}
.mday-empty{padding:12px 14px;font-size:13px;color:var(--t3);text-align:center}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .12s}
.mrow:last-child{border-bottom:none}
.mrow:active{background:rgba(255,255,255,.06)}
.mrow-time{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t2);min-width:44px;flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:baseline}
.mrow-time .rg-tail{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;white-space:nowrap}
.mrow.show-end .mrow-time .rg-tail{max-width:70px;opacity:1}
.mrow-name{flex:1;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}
.mrow.done .mrow-name{color:var(--ok)}
.mrow.planned .mrow-name{color:var(--azl)}
.mrow.cancel_student .mrow-name{color:var(--err)}
.mrow.cancel_me .mrow-name{color:var(--warn)}
.mrow.no_count .mrow-name{color:var(--t2)}
.mrow.is-base{border-left:3px solid var(--vil)}
.mrow-act{display:flex;gap:4px;flex-shrink:0}
@media(max-width:760px){
  .year-dd-menu{position:fixed;top:auto;right:12px;left:auto;min-width:160px;max-width:calc(100vw - 24px)}
  .desktop-only{display:none !important}
  .mobile-only{display:block !important}
  .topbar{position:relative;z-index:400;flex-wrap:wrap;gap:10px}
  .navtabs{flex-wrap:wrap}
  .stbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal{width:94vw;max-width:94vw;padding:20px}
  .field-row{flex-direction:column;gap:0}
  .wchips{flex-wrap:wrap}
  .mday-hdr{padding:14px 16px;font-size:16px}
  .mrow{padding:15px 16px;gap:12px}
  .mrow-time{font-size:15px;min-width:54px}
  .mrow-name{font-size:17px;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .mrow .paid-dot{width:7px;height:7px}
  .mrow-act{gap:8px}
  .mrow .cell-btn{width:34px;height:34px;font-size:15px;border-radius:9px}
  .mday-empty .btn.sm{padding:11px 18px;font-size:15px}
  .mcar .cc-arrow{width:26px;height:26px;font-size:14px}
  .mcar .cc-pos{font-size:11px}
  .mcar .cc-nav{padding:8px 16px 0;gap:6px}
}



/* pure-CSS cell hover guide (подсветка только наведённой ячейки, не строки) */
.rd-grid .rd-cell{transition:background .15s,box-shadow .15s;height:50px;box-sizing:border-box}
@keyframes wkInL{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
@keyframes wkInR{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}
.week-grid-inner.wk-in-l{animation:wkInL .3s cubic-bezier(.22,.61,.36,1)}
.week-grid-inner.wk-in-r{animation:wkInR .3s cubic-bezier(.22,.61,.36,1)}
.rd-grid .cell-stack:hover .rd-cell{background:rgba(var(--az-rgb),.12)}

/* reader toolbar + toggle */
.rd-toolbar{display:flex;justify-content:flex-start;align-items:center;gap:16px;margin-bottom:16px}
.tz-note{font-size:11px;color:var(--t3);font-style:italic}
.tgl{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:12px;color:var(--t2);user-select:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl-track{position:relative;width:38px;height:22px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid var(--bd);transition:background .18s,border-color .18s;flex-shrink:0}
.tgl-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--t2);transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s}
.tgl input:checked + .tgl-track{background:rgba(var(--az-rgb),.3);border-color:rgba(var(--az-rgb),.5)}
.tgl input:checked + .tgl-track .tgl-thumb{transform:translateX(16px);background:var(--azl)}
.tgl-lbl{transition:color .22s ease}
@keyframes viewFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.view-fade{animation:viewFade .22s ease}
.tgl input:checked ~ .tgl-lbl{color:var(--t1)}
.field label.chk{display:inline-flex;align-items:center;gap:9px;margin-bottom:0;cursor:pointer}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk-box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--bd2);background:rgba(255,255,255,.05);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;flex-shrink:0}
.chk-box::after{content:"";width:4px;height:8px;border:solid #06121f;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s;margin-top:-2px}
.chk input:checked + .chk-box{background:var(--ok);border-color:var(--ok)}
.chk input:checked + .chk-box::after{transform:rotate(45deg) scale(1)}
.chk:hover .chk-box{border-color:rgba(var(--ok-rgb),.6)}
.chk input:focus-visible + .chk-box{box-shadow:0 0 0 3px rgba(var(--ok-rgb),.3)}
.chk-lbl{transition:color .15s}
.chk input:checked ~ .chk-lbl{color:var(--ok)}
.cell-lesson.with-range .cell-main{flex-direction:column;align-items:center;gap:1px}
.cell-range{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--t2);line-height:1.1;letter-spacing:-.3px;white-space:nowrap;display:inline-flex;justify-content:center}
.cell-range .rg-tail{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.rd-cell:hover .cell-range .rg-tail,.cell-lesson.show-end .cell-range .rg-tail{max-width:60px;opacity:1}
.cell-lesson.planned.with-range .cell-range{color:var(--azl)}
.cell-lesson.cancel_student.with-range .cell-range{color:var(--err)}



/* badge */
.badge{display:inline-block;padding:2px 8px;border-radius:7px;font-size:10px;font-weight:500}
.badge.arch{background:rgba(var(--err-rgb),.15);color:var(--err);border:1px solid rgba(var(--err-rgb),.25)}
.badge.ok{background:rgba(var(--ok-rgb),.15);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.25)}

/* ── скроллбары: тонкие и незаметные, как в телеграме ──
   Дорожки нет вовсе, ползунок полупрозрачный и проявляется при наведении. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,.42)}
::-webkit-scrollbar-corner{background:transparent}
/* на светлых темах светлый ползунок не виден — берём тёмный */
body[data-theme="light"] *,body[data-theme="daylight"] *{scrollbar-color:rgba(0,0,0,.22) transparent}
body[data-theme="light"] ::-webkit-scrollbar-thumb,body[data-theme="daylight"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22)}
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover,body[data-theme="daylight"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.38)}

/* toast */
#toast-host{justify-content:flex-end;position:fixed;bottom:28px;left:0;right:0;margin:0 auto;width:fit-content;max-width:92vw;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 14px;background:rgba(20,33,58,.6);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.38);animation:toastIn .26s cubic-bezier(.34,1.4,.64,1);max-width:min(420px,90vw)}
.toast.err-t{border-color:rgba(var(--err-rgb),.4);border-left:3px solid var(--err);color:var(--t1)}
.toast .toast-msg{flex:1;min-width:0}
.toast-n{flex-shrink:0;font-size:11px;font-weight:700;color:var(--t2);background:rgba(255,255,255,.1);border-radius:7px;padding:1px 6px}
.toast-x{flex-shrink:0;width:19px;height:19px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:var(--t2);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s}
.toast-x:hover{background:rgba(255,255,255,.18);color:var(--t1)}
.toast.toast-undo{gap:10px}
.toast-undo-btn{background:rgba(var(--az-rgb),.2);border:1px solid rgba(var(--az-rgb),.45);color:var(--azl);padding:5px 13px;border-radius:8px;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.toast-undo-btn:hover{background:rgba(var(--az-rgb),.32)}
@keyframes toastIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.toast.toast-out{animation:toastOut .3s cubic-bezier(.4,0,1,1) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}

/* weekly chips */
.wchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.wchip{padding:5px 13px;border-radius:12px;font-size:12px;background:var(--gb);border:1px solid var(--bd);color:var(--t2);font-family:'JetBrains Mono',monospace}
.wchip strong{color:var(--t1);font-weight:500}
.wchip-wrap{position:relative}
.wchip.clickable{cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,background .15s}
.wchip.wchip2{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.3}
.wchip.wchip2 .wc-sub{font-size:10px;color:var(--t3)}
.wchip.wchip2 .wc-sub strong{color:var(--t2);font-weight:500}
.wchip.clickable:hover{border-color:var(--bd2);background:var(--gbh)}
.wchip.has-debt{border-color:rgba(var(--err-rgb),.35)}
.wchip-badge{font-size:10px;color:var(--err);background:rgba(var(--err-rgb),.13);padding:2px 7px;border-radius:8px}
.wchip-arr{font-size:9px;color:var(--t3);transition:transform .2s}
.money-panel.open ~ * .wchip-arr,.wchip-wrap:has(.money-panel.open) .wchip-arr{transform:rotate(180deg)}
.money-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;max-width:380px;background:var(--surface);border:1px solid var(--bd2);border-radius:14px;padding:10px;box-shadow:0 16px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s;z-index:400}
.money-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.mp-sec{padding:6px}
.mp-sec+.mp-sec{border-top:1px solid var(--bd);margin-top:4px;padding-top:10px}
.mp-h{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.mp-total{color:var(--err);font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:0}
.mp-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;font-size:13px;transition:background .12s}
.mp-row:hover{background:var(--gbh)}
.mp-name{flex:1;color:var(--t1);cursor:pointer}
.mp-name:hover{color:var(--azl)}
.mp-cnt{color:var(--t3);font-size:11px;font-family:'JetBrains Mono',monospace}
.mp-sum{font-family:'JetBrains Mono',monospace;font-size:12px;min-width:64px;text-align:right}
.mp-sum.ok{color:var(--ok)}
.mp-sum.err{color:var(--err)}
.mp-empty{font-size:12px;color:var(--t3);padding:4px 8px}
.mp-grp{margin-bottom:4px}
.mp-grp-head .mp-name{font-weight:600}
.mp-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 8px 3px 18px}
.mp-date{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.mp-pay{width:24px;height:22px;border-radius:6px;border:1px solid rgba(var(--ok-rgb),.35);background:rgba(var(--ok-rgb),.12);color:var(--ok);font-size:12px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.mp-pay:hover{background:rgba(var(--ok-rgb),.28);color:#fff}

/* tab row inside panel */
.inner-tabs{display:flex;gap:6px;margin-bottom:16px}
.itab{padding:6px 14px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;cursor:pointer;transition:all .16s}
.itab:hover{background:var(--gbh);color:var(--t1)}
.stud-search{width:100%;max-width:340px;padding:9px 14px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.05);color:var(--t1);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:13px;transition:border-color .15s}
.stud-search:focus{outline:none;border-color:rgba(var(--az-rgb),.5)}
.stud-search::placeholder{color:var(--t3)}
.stud-search-empty{margin-left:12px;font-size:12px;color:var(--t3)}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.fchip{padding:6px 12px;border-radius:16px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;cursor:pointer;transition:all .15s}
.fchip:hover{border-color:var(--bd2);color:var(--t1)}
.fchip.on{background:rgba(var(--az-rgb),.14);border-color:rgba(var(--az-rgb),.5);color:var(--azl)}
.filters-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.05);color:var(--t2);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12px;cursor:pointer;transition:all .15s}
.filters-btn:hover{border-color:var(--bd2);color:var(--t1)}
.filters-btn.open,.filters-btn.has{border-color:rgba(var(--az-rgb),.4);color:var(--azl)}
.fb-count{background:var(--az);color:#04293f;font-weight:700;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.chip-clear{background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.chip-clear:hover{color:var(--err)}
.chip-row{animation:chipsIn .2s ease}
@keyframes chipsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.itab.active{background:rgba(var(--az-rgb),.14);border-color:rgba(var(--az-rgb),.34);color:var(--azl)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

/* ─── boot-splash (ленивая загрузка ролевого бандла) ─── */
.boot-splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:5}
.boot-mark{display:block;animation:bootPulse 1.6s ease-in-out infinite}
.boot-mark svg{filter:drop-shadow(0 8px 26px rgba(var(--az-rgb),.38))}
@keyframes bootPulse{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-6px);opacity:1}}
.boot-dots{display:flex;gap:9px}
.boot-dots i{width:8px;height:8px;border-radius:50%;background:var(--az,#38b6e8);opacity:.35;animation:bootDot 1s ease-in-out infinite}
.boot-dots i:nth-child(2){animation-delay:.15s}
.boot-dots i:nth-child(3){animation-delay:.3s}
@keyframes bootDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ─── сетка часов записи (колонки + зоны) ─── */
.hg{border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--gb);user-select:none;-webkit-user-select:none;touch-action:none;margin-bottom:10px;max-width:640px}
.hg-head{display:grid;grid-template-columns:50px repeat(7,1fr);border-bottom:1px solid var(--bd);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.hg-corner{display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--azl);white-space:nowrap}
.hg-dh{padding:8px 0;text-align:center;font-size:12px;color:var(--t2);border-left:1px solid rgba(255,255,255,.06)}
.hg-body{display:grid;grid-template-columns:50px repeat(7,1fr)}
.hg-axis{position:relative;height:660px}
.hg-hr{position:absolute;right:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--t3);line-height:1}
.hg-col{position:relative;height:660px;border-left:1px solid rgba(255,255,255,.06);cursor:crosshair;background:repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(255,255,255,.055) 43px,rgba(255,255,255,.055) 44px)}
.hg-col:first-of-type{border-left:none}
.hg-zone{position:absolute;left:4px;right:4px;border-radius:7px;background:linear-gradient(180deg,#4aa6ec 0%,#3d93dd 100%);box-shadow:0 2px 10px rgba(40,110,190,.4),inset 0 0 0 1px rgba(160,215,255,.4);pointer-events:none;overflow:hidden}
.hz-t,.hz-b,.hz-c{position:absolute;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1;color:rgba(255,255,255,.5);letter-spacing:.2px;pointer-events:none}
.hz-t{top:3px}.hz-b{bottom:3px}.hz-c{top:50%;transform:translateY(-50%)}

/* ─── часовые пояса ─── */
.tz-note{font-size:12px;color:var(--t3);margin:0 0 12px 2px}
.tz-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.tz-opt{text-align:left;padding:11px 14px;border-radius:10px;background:var(--gb);border:1px solid var(--bd);color:var(--t1);cursor:pointer;font-size:14px;transition:all .12s}
.tz-opt:hover{background:var(--gbh)}
.tz-opt.on{background:rgba(var(--az-rgb),.16);border-color:rgba(var(--az-rgb),.4);color:var(--azl)}

/* ─── запись: выбор режима + недельный календарь ─── */
.bk-mode{display:flex;gap:12px;flex-wrap:wrap}
.bk-mode-b{flex:1;min-width:210px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;padding:16px 18px;border-radius:14px;background:var(--gb);border:1px solid var(--bd);cursor:pointer;transition:all .14s}
.bk-mode-b:hover{background:var(--gbh);border-color:rgba(var(--az-rgb),.4);transform:translateY(-1px)}
.bk-mode-t{font-size:16px;font-weight:600;color:var(--t1)}
.bk-mode-d{font-size:12.5px;color:var(--t3)}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bk-mode-cur{font-size:13px;color:var(--t2)}
.bk-mode-chg{background:none;border:none;color:var(--azl);cursor:pointer;font-size:13px;padding:0;text-decoration:underline;text-underline-offset:2px}
.bkc{border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--gb);margin-bottom:14px}
.bkc-scroll{overflow-x:auto}
.bkc-head{display:grid;border-bottom:1px solid var(--bd);background:rgba(255,255,255,.03);min-width:max-content}
.bkc-dh{padding:8px 2px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t2);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.bkc-dh i{font-style:normal;font-size:10px;color:var(--t3);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.bkc-body{display:grid;min-width:max-content}
.bkc-axis{position:relative}
.bkc-hr{position:absolute;right:8px;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3)}
.bkc-col{position:relative;border-left:1px solid rgba(255,255,255,.06)}
.bkc-slot{position:absolute;left:5px;right:5px;border-radius:9px;background:rgba(76,168,122,.18);border:1px solid rgba(108,196,148,.4);color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:11.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0;transition:background .12s,border-color .12s;padding:0}
.bkc-a{font-weight:500}
.bkc-b{opacity:0;max-width:0;overflow:hidden;white-space:nowrap;color:rgba(205,242,220,.92);font-size:10.5px;transition:opacity .18s ease,max-width .2s ease}
.bkc-slot:hover .bkc-a,.bkc-slot.sel .bkc-a{margin-right:5px}
.bkc-slot:hover{background:rgba(84,192,134,.32);border-color:rgba(138,222,172,.62)}
.bkc-slot:hover .bkc-b{opacity:1;max-width:72px}
.bkc-slot.sel{background:linear-gradient(180deg,var(--ok),#309d5e);border-color:rgba(140,240,180,.72);color:#fff;box-shadow:0 3px 14px rgba(40,150,90,.45)}
.bkc-slot.sel .bkc-b{opacity:1;max-width:72px;color:rgba(255,255,255,.92)}

.bk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.bk-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(var(--ok-rgb),.13);border:1px solid rgba(var(--ok-rgb),.34);border-radius:999px;padding:5px 6px 5px 13px;font-size:13px;color:var(--t1);font-family:'JetBrains Mono',monospace}
.bk-chip-x{width:18px;height:18px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0}
.bk-chip-x:hover{background:rgba(var(--err-rgb),.35);color:#fff}

/* ─── кабинет: действия по занятию + перенос ─── */
.cab-l-act{display:flex;gap:8px;margin-left:auto}
.btn.danger{background:rgba(255,95,95,.14);border-color:rgba(255,95,95,.36);color:var(--err)}
.btn.danger:hover{background:rgba(255,95,95,.24);color:#ffb0b0}
.ta{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;background:var(--gb);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;color:var(--t1);font-family:inherit;font-size:14px;margin-bottom:14px}
.ta:focus{outline:none;border-color:rgba(var(--az-rgb),.5)}
.mv-list{max-height:300px;overflow-y:auto;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.mv-dh{font-size:12px;color:var(--t3);margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.mv-times{display:flex;flex-wrap:wrap;gap:6px}
.mv-t{padding:7px 12px;border-radius:9px;background:var(--gb);border:1px solid var(--bd);color:var(--t1);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:13px;transition:all .1s}
.mv-t:hover{background:var(--gbh)}
.mv-t.on{background:linear-gradient(180deg,var(--ok),#309d5e);border-color:rgba(140,240,180,.7);color:#fff}

/* ─── кабинет: календарь занятий (2 недели) ─── */
.cl-wk-h{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;margin:18px 0 8px}
.cl-rec-box{margin-top:22px;padding:16px 16px 14px;border-radius:16px;background:rgba(var(--vi-rgb),.05);border:1px solid rgba(var(--vi-rgb),.18)}
.cl-rec-box .cl-wk-h{margin-top:0}
.cl-wk-h.rec{display:flex;align-items:center;gap:6px;color:var(--vi)}
.cl-wk-h.rec .ms{font-size:14px!important}
.cl-rec-box .cl-day{background:rgba(255,255,255,.03)}
.cl-wk{display:grid;grid-template-columns:repeat(7,minmax(94px,1fr));gap:8px;overflow-x:auto;padding-bottom:2px}
.cl-day{background:var(--gb);border:1px solid var(--bd);border-radius:12px;padding:8px;min-height:96px;display:flex;flex-direction:column}
.cl-day.today{border-color:rgba(var(--az-rgb),.5);background:rgba(var(--az-rgb),.06)}
.cl-dh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:12px}
.cl-dh b{color:var(--t1);font-weight:600}
.cl-dh span{color:var(--t3);font-family:'JetBrains Mono',monospace;font-size:11px}
.cl-body{display:flex;flex-direction:column;gap:6px;flex:1}
.cl-chip{border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.cl-t{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--t1);font-size:13px}
.cl-s{color:var(--t3);font-size:10.5px}
.cl-unpaid{color:var(--err);font-size:10px;margin-top:1px}
.cl-chip.planned{background:rgba(var(--az-rgb),.14);border:1px solid rgba(var(--az-rgb),.32);cursor:pointer;transition:background .12s}
.cl-chip.planned:hover{background:rgba(var(--az-rgb),.26)}
.cl-chip.done{background:rgba(var(--ok-rgb),.14);border:1px solid rgba(var(--ok-rgb),.3)}
.cl-chip.cancel_student,.cl-chip.cancel_me,.cl-chip.moved,.cl-chip.no_count{background:rgba(255,255,255,.04);border:1px solid var(--bd);opacity:.6}
.cl-chip.restorable{cursor:pointer;opacity:.85;transition:background .12s,opacity .12s}
.cl-chip.restorable:hover{background:rgba(var(--ok-rgb),.12);opacity:1}
.cl-chip.pend{background:rgba(240,163,92,.15);border:1px solid rgba(240,163,92,.32);cursor:pointer}
.cl-chip.pend:hover{background:rgba(240,163,92,.26)}
.cl-empty{color:rgba(255,255,255,.16);text-align:center;font-size:13px;margin:auto 0}

@media(max-width:640px){
  .cl-wk{grid-template-columns:1fr;overflow-x:visible;gap:6px}
  .cl-day{flex-direction:row;align-items:flex-start;min-height:0;gap:14px;padding:11px 13px}
  .cl-dh{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:0;min-width:52px;flex:0 0 auto}
  .cl-body{flex-direction:row;flex-wrap:wrap;gap:6px;flex:1}
  .cl-chip{flex-direction:row;align-items:center;gap:8px}
  .cl-empty{margin:2px 0;text-align:left}
}

@media(max-width:640px){
  .bkc-slot .bkc-b{display:none!important}
  .bkc-slot .bkc-a{margin-right:0!important}
  .bkc-slot{font-size:11px}
}

.cl-chip.rec{background:rgba(var(--vi-rgb),.14);border:1px solid rgba(var(--vi-rgb),.32);cursor:pointer;transition:background .12s}
.cl-chip.rec:hover{background:rgba(var(--vi-rgb),.26)}
.cl-chip.rec.pend{cursor:default;opacity:.7}
.cl-chip.rec.pend:hover{background:rgba(var(--vi-rgb),.14)}
.cl-day.rec{opacity:.95}
@media(max-width:640px){
  .cl-day.empty{min-height:0;padding:8px 13px;opacity:.7}
  .cl-day.empty .cl-body{display:none}
  .cl-day.empty .cl-dh{flex-direction:row;gap:8px;align-items:baseline}
}

/* ─── доска: камера, зум, подсказка ─── */
.wb-cam{position:absolute;top:14px;right:14px;width:118px;height:118px;border-radius:50%;object-fit:cover;background:#0b0f18;border:2px solid rgba(255,255,255,.22);box-shadow:0 10px 28px rgba(0,0,0,.55);z-index:4211;display:none}
.wb-cam.mirror{transform:scaleX(-1)}
.wb-cb-x svg{width:20px;height:20px}
.wb-hint{position:absolute;top:146px;right:14px;width:232px;background:#1b2230;border:1px solid var(--bd2);border-radius:13px;padding:12px 14px;color:#c3cde0;font-size:12.5px;line-height:1.55;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4211;display:none}
.wb-hint b{color:#fff;display:block;margin-bottom:6px;font-size:13px}
.wb-hint-x{position:absolute;top:5px;right:9px;background:none;border:none;color:#8091a8;font-size:19px;line-height:1;cursor:pointer;padding:0}
.wb-hint-x:hover{color:#fff}
.wb-zoom{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;background:#1b2230;border:1px solid var(--bd2);border-radius:13px;padding:6px 9px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4211}
.wb-zb{width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wb-zb:hover{background:rgba(255,255,255,.2)}
.wb-zc svg{width:18px;height:18px}
.wb-zsl{width:104px;accent-color:#4da3ff}
.wb-zval{color:#c3cde0;font-family:'JetBrains Mono',monospace;font-size:12px;min-width:44px;text-align:center}


.wb-zt{display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;border:none;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:13px}
.wb-zt:hover{background:rgba(255,255,255,.2)}
.wb-zt .ms{font-size:18px!important}
.wb-zb .ms,.wb-zc .ms{font-size:20px!important}
.wb-cb-x .ms{font-size:24px!important}
.wb-b .ms{font-size:20px!important}

.call-b .ms,.mini-b .ms,.wb-cb .ms,.prev-tog .ms{font-size:22px}
.av-circle .ms{font-size:46px}

@media(max-width:820px){
  .call-bar{flex-wrap:wrap;justify-content:center;gap:8px;width:96vw;max-width:96vw;overflow-x:auto;padding-bottom:2px}
  .call-b{width:46px;height:46px}
}

@media(max-width:760px){
  .msg{max-width:88%}
  .vp{min-width:0}
  .tp{min-width:0;max-width:100%}
  .msg-file{min-width:0;max-width:100%}
  .msg-img,.msg-grid{max-width:100%}
  .msg-voice{max-width:100%}
  .msg-voice audio{max-width:100%}
}

.chat-sendbtn{display:inline-flex;align-items:center;gap:6px}
.chat-sendbtn .ms{display:none;font-size:20px}
@media(max-width:760px){
  .chat-send{gap:6px;padding:9px}
  .chat-sendbtn{padding:10px 12px}
  .chat-sendbtn .cs-tx{display:none}
  .chat-sendbtn .ms{display:inline-flex}
  .vp{min-width:0;width:100%}
  .vp-mid,.vp-wave{overflow:hidden}
  .vp-wave i{min-width:1px}
}

.vp-rate,.tp-rate{flex:0 0 46px;width:46px;border:none;background:rgba(255,255,255,.1);color:var(--t2);font-size:11px;font-family:'JetBrains Mono',monospace;border-radius:8px;padding:4px 0;cursor:pointer;text-align:center;align-self:center}
.vp-rate:hover,.tp-rate:hover{background:rgba(255,255,255,.18);color:var(--t1)}
[data-seek]{touch-action:none}

/* ─── запись голосового (тг-стиль) ─── */
.chat-rec{position:relative}
.chat-send.recording{align-items:center}
.chat-send.recording .chat-clip,.chat-send.recording .chat-emo,.chat-send.recording #chat-input{display:none}
.chat-send.recording .chat-sendbtn{visibility:hidden}
.chat-send.recording .chat-rec{background:var(--az);color:#06131f}
.chat-send.rec-locked .chat-emo,.chat-send.rec-locked .chat-clip,.chat-send.rec-locked #chat-input,.chat-send.rec-locked .chat-rec,.chat-send.rec-locked .chat-sendbtn{visibility:hidden}
.rec-bar.rec-inline{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;height:38px}
.rec-bar.rec-overlay{position:absolute;inset:0;background:var(--surface2);border-radius:0 0 14px 14px;display:flex;align-items:center;gap:10px;padding:0 14px;z-index:6;animation:recIn .15s ease}
@keyframes recIn{from{opacity:0}to{opacity:1}}
.rec-t{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:14px;color:#ff6a6a;flex:0 0 auto;min-width:74px}
.rec-t::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--err);animation:recPulse 1.2s infinite;flex:0 0 auto}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.2}}
.rec-cancel{flex:1;text-align:center;color:var(--t3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s}
.chat-send.recording .rec-bar.cancel-arm~*,.rec-bar.cancel-arm .rec-cancel{color:#ff8a8a}
.chat-send.recording.cancel-arm{}
.rec-bar.cancel-arm .rec-cancel{color:#ff8a8a}
.rec-lockpill{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:34px;padding:7px 0;border-radius:17px;background:var(--surface);border:1px solid var(--bd2);display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--t2);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .12s,background .12s,color .12s;z-index:7}
.rec-lockpill .ms{font-size:15px!important}
.rec-lockpill.near{background:var(--az);color:#06131f;transform:translateX(-50%) translateY(-8px)}
.rec-wave{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:26px;overflow:hidden}
.rec-wave i{flex:0 0 auto;width:2.5px;border-radius:2px;background:var(--az);min-height:3px}
.rec-bar.rec-overlay .rec-t{min-width:48px;color:var(--t1)}
.rec-trash,.rec-send{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rec-trash{background:rgba(var(--err-rgb),.16);color:var(--err)}
.rec-trash:hover{background:rgba(var(--err-rgb),.28)}
.rec-send{background:var(--az);color:#06131f}
.rec-send:hover{filter:brightness(1.1)}
.rec-trash .ms{font-size:18px!important}.rec-send .ms{font-size:20px!important}

/* ─── системные сообщения в чате (звонки, отмены, переносы) ─── */
.msg-sys{display:flex;justify-content:center;margin:6px 0}
.msg-sys span{background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--t3);font-size:12px;line-height:1.5;padding:7px 14px;border-radius:12px;max-width:82%;text-align:center;white-space:pre-line}

/* ─── кастомный дропдаун поверх .call-sel ─── */
.csel{position:relative;margin-bottom:10px}
.csel .csel-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.csel-btn{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:12px;background:var(--gb);color:var(--t1);border:1px solid var(--bd);font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.csel-btn:hover{background:var(--gbh)}
.csel-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.csel-btn .ms{font-size:18px!important;color:var(--t3);flex:0 0 auto}

/* ─── доска: чип восстановления при локальном сворачивании ─── */
.wb-chip{position:fixed;left:18px;bottom:18px;z-index:3950;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#1b2230;border:1px solid var(--bd2);color:#fff;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.wb-chip:hover{background:#232c3d}
.wb-chip .ms{font-size:18px!important;color:var(--az)}
@media(max-width:640px){ .wb-chip{left:10px;bottom:10px;padding:9px 13px;font-size:12.5px} }

/* ─── доска: кто есть и кто говорит (углу свободный, снизу-слева) ─── */
.wb-speakers{position:absolute;left:14px;bottom:14px;display:none;flex-direction:column;gap:8px;background:#1b2230;border:1px solid var(--bd2);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4211}
.wbs-row{display:flex;align-items:center;gap:9px}
.wbs-av{position:relative;width:30px;height:30px;border-radius:50%;background:var(--az);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.wbs-av.speaking{box-shadow:0 0 0 2px var(--ok),0 0 12px 2px rgba(var(--ok-rgb),.65);animation:wbsPulse 1.1s ease-in-out infinite}
@keyframes wbsPulse{0%,100%{box-shadow:0 0 0 2px var(--ok),0 0 10px 1px rgba(var(--ok-rgb),.5)}50%{box-shadow:0 0 0 3px var(--ok),0 0 16px 4px rgba(var(--ok-rgb),.8)}}
.wbs-mute{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:#2a3140;border:1.5px solid #1b2230;display:flex;align-items:center;justify-content:center;color:var(--err)}
.wbs-mute .ms{font-size:11px!important}
.wbs-name{color:#c3cde0;font-size:12.5px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (pointer:coarse) and (orientation:portrait), (max-width:820px) and (orientation:portrait){
  .wb-speakers{left:10px;bottom:66px;padding:8px 11px 8px 8px}
  .wbs-av{width:26px;height:26px;font-size:11.5px}
  .wbs-name{font-size:11.5px;max-width:82px}
}

/* ─── звонок: индикатор пинга ─── */
.call-ping{margin-left:8px;padding:2px 8px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;vertical-align:middle}
.call-ping.good{background:rgba(var(--ok-rgb),.22);color:var(--ok)}
.call-ping.mid{background:rgba(var(--gold-rgb),.22);color:#ffd76b}
.call-ping.bad{background:rgba(var(--err-rgb),.22);color:var(--err)}

/* ─── доска: калькулятор (только препод) ─── */
.wb-calc{position:absolute;top:170px;right:14px;width:264px;max-height:calc(100% - 200px);overflow-y:auto;background:#1b2230;border:1px solid var(--bd2);border-radius:16px;padding:12px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:4212;display:flex;flex-direction:column;gap:9px}
.wbc-head{display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:600}
.wbc-head .ms{font-size:16px!important;color:#ffd23f}
.wbc-head span{flex:1}
.wbc-x{background:none;border:none;color:#8091a8;cursor:pointer;padding:0;display:flex}
.wbc-x:hover{color:#fff}
.wbc-x .ms{font-size:16px!important}
.wbc-thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--bd2);max-height:110px;display:flex;justify-content:center;background:#0f1622}
.wbc-thumb img{max-width:100%;max-height:110px;object-fit:contain}
.wbc-thumb-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wbc-sel{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:9px;border:1px dashed rgba(255,176,46,.5);background:rgba(255,176,46,.08);color:#ffb02e;font-size:12.5px;cursor:pointer}
.wbc-sel:hover{background:rgba(255,176,46,.16)}
.wbc-sel.act{background:rgba(255,176,46,.24)}
.wbc-sel .ms{font-size:15px!important}
.wbc-in{width:100%;box-sizing:border-box;background:#0f1622;border:1px solid var(--bd2);border-radius:9px;padding:9px 11px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:14px}
.wbc-in:focus{outline:none;border-color:rgba(var(--az-rgb),.5)}
.wbc-res{font-family:'JetBrains Mono',monospace;font-size:15px;padding:2px 2px 0}
.wbc-res.ok{color:var(--ok)}
.wbc-res.err{color:var(--err);font-size:12px}
.wbc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wbc-b{height:34px;border-radius:8px;border:none;background:rgba(255,255,255,.06);color:#e7ecf5;font-family:'JetBrains Mono',monospace;font-size:14px;cursor:pointer}
.wbc-b:hover{background:rgba(255,255,255,.13)}
.wbc-b.fn{background:rgba(var(--az-rgb),.12);color:var(--azl);font-family:'AppleEmoji','Geologica','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:12.5px}
.wbc-b.fn:hover{background:rgba(var(--az-rgb),.22)}
.wbc-b.op{color:#ffd23f}
.wbc-b.eq{grid-column:span 2;background:linear-gradient(180deg,var(--ok),#309d5e);color:#fff;font-weight:700}
.wbc-b.eq:hover{filter:brightness(1.1)}
@media (pointer:coarse) and (orientation:portrait), (max-width:820px) and (orientation:portrait){
  .wb-calc{top:auto;bottom:70px;right:8px;left:8px;width:auto;max-height:60vh}
}

/* ─── переключатель темы (свотчи с названиями, по 2 в ряд) ─── */
.theme-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.theme-sw{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:38px;padding:7px 10px;border-radius:11px;border:1.5px solid var(--bd);background:var(--gb);cursor:pointer;position:relative;transition:transform .15s,border-color .15s,background .15s;box-sizing:border-box;text-align:left}
.theme-sw:hover{background:var(--gbh)}
.theme-sw.active{border-color:var(--tsw);background:var(--gbh);box-shadow:0 0 0 1px var(--tsw)}
.theme-sw-dot{width:15px;height:15px;border-radius:50%;background:var(--tsw);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.16) inset}
.theme-sw.active .theme-sw-dot{box-shadow:0 0 0 2px #fff inset}
.theme-sw-lbl{flex:1;min-width:0;font-size:10px;font-weight:500;color:var(--t2);white-space:normal;line-height:1.22;word-break:break-word;text-align:left}
.theme-sw.active .theme-sw-lbl{color:var(--t1)}

/* ─── всплывающая панель выбора темы — компактная, у кнопки, со скроллом ─── */
.theme-pop{position:fixed;width:296px;max-width:92vw;background:var(--surface);background:color-mix(in srgb, var(--surface) 84%, transparent);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--bd2);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4);z-index:4300;opacity:0;transform:scale(.96) translateY(-4px);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.85,.25,1),background .3s ease;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.theme-pop.show{opacity:1;transform:scale(1) translateY(0)}
.theme-pop-head{display:flex;align-items:center;justify-content:space-between;padding:13px 8px 8px 16px;flex:none}
.theme-pop-head h3{margin:0;font-size:13.5px;font-weight:600;color:var(--t1)}
.theme-pop-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:18px;line-height:1;padding:6px;border-radius:8px;display:flex;flex:none}
.theme-pop-close:hover{color:var(--t1);background:var(--gb)}
.theme-pop-body{overflow-y:auto;overflow-x:hidden;padding:2px 14px 14px;box-sizing:border-box}
.theme-pop .pick-label{margin:12px 0 7px}
.theme-pop .pick-label:first-child{margin-top:0}

/* ─── кнопка «Оформление» в сайдбаре кабинета ─── */
.side-gear{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--bd);background:var(--gb);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.side-gear:hover{color:var(--t1);background:var(--gbh)}

/* ─── поиск по чату ─── */
.chat-search{position:relative;border-bottom:1px solid var(--bd);padding:10px 14px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.02)}
.chat-search input{flex:1;min-width:0;background:var(--gb);border:1px solid var(--bd);border-radius:9px;padding:8px 11px;color:var(--t1);font-size:13.5px}
.chat-search input:focus{outline:none;border-color:rgba(var(--az-rgb),.5)}
.chat-search-x{width:28px;height:28px;flex:0 0 auto;border-radius:8px;border:none;background:var(--gb);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-search-x:hover{color:var(--t1);background:var(--gbh)}
.chat-search-res{position:absolute;left:14px;right:14px;top:calc(100% - 1px);max-height:340px;overflow-y:auto;background:var(--surface);border:1px solid var(--bd2);border-radius:0 0 14px 14px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:20}
.chat-search-res:empty{display:none}
.chat-search-item{padding:9px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--bd)}
.chat-search-item:last-child{border-bottom:none}
.chat-search-item:hover{background:var(--gbh)}
.csi-who{font-size:11px;color:var(--t3)}
.csi-tx{font-size:13px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csi-tx mark{background:rgba(var(--gold-rgb),.35);color:var(--t1);border-radius:2px;padding:0 1px}
.chat-search-empty{padding:14px;text-align:center;color:var(--t3);font-size:13px}

/* ─── стрик посещаемости в статистике ученика ─── */
.cab-streak{margin-top:14px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(255,176,46,.16),rgba(255,126,95,.1));border:1px solid rgba(255,176,46,.32);color:var(--t1);font-size:14px}
.cab-streak b{color:var(--gold);font-size:16px}

/* ─── доска: панель сохранённых досок ─── */
.wb-boards{position:absolute;top:170px;left:14px;width:268px;max-height:calc(100% - 200px);overflow-y:auto;background:#1b2230;border:1px solid var(--bd2);border-radius:16px;padding:12px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:4212;display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.wb-boards.in{opacity:1;transform:none}
.wbb-head{display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:600}
.wbb-head .ms{font-size:16px!important;color:var(--azl)}
.wbb-head span{flex:1}
.wbb-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.wbb-loading{padding:14px;text-align:center;color:var(--t3);font-size:12.5px}
.wbb-item{display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.wbb-item:hover{background:rgba(255,255,255,.06)}
.wbb-item.act{border-color:rgba(var(--az-rgb),.5);background:rgba(var(--az-rgb),.1)}
.wbb-thumb{width:44px;height:32px;flex:0 0 auto;border-radius:6px;overflow:hidden;background:#0f1622;display:flex;align-items:center;justify-content:center}
.wbb-thumb img{width:100%;height:100%;object-fit:cover}
.wbb-noth{color:var(--t3)}
.wbb-noth .ms{font-size:16px!important}
.wbb-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wbb-title{font-size:12.5px;color:#e7ecf5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbb-date{font-size:10.5px;color:var(--t3)}
.wbb-ic{width:24px;height:24px;flex:0 0 auto;border-radius:7px;border:none;background:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wbb-ic:hover{color:#fff;background:rgba(255,255,255,.1)}
.wbb-ic.del:hover{color:var(--err);background:rgba(var(--err-rgb),.16)}
@media (pointer:coarse) and (orientation:portrait), (max-width:820px) and (orientation:portrait){
  .wb-boards{top:auto;bottom:70px;left:8px;right:8px;width:auto;max-height:60vh}
}

/* ─── карточка сохранённой доски в чате ─── */
.msg-board{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--bd);padding:6px;transition:background .12s;max-width:260px}
.msg-board:hover{background:rgba(255,255,255,.08)}
.msg-board img{width:64px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.mb-noth{width:64px;height:44px;border-radius:8px;background:#0f1622;display:flex;align-items:center;justify-content:center;color:var(--t3);flex:0 0 auto}
.mb-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mb-t{font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.mb-open{font-size:11.5px;color:var(--az)}

/* ─── казино: колесо удачи ─── */
.cas-loading{padding:30px;text-align:center;color:var(--t3)}
.cas-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;text-align:center}
.cas-spins{display:flex;flex-direction:column;align-items:center}
.cas-spins b{font-size:34px;color:var(--gold);line-height:1.1}
.cas-spins span{font-size:13px;color:var(--t2)}
.cas-wheelbox{position:relative;width:240px;height:240px;margin:14px auto 34px}
.cas-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.16) 0%,transparent 68%);animation:casGlowPulse 3.2s ease-in-out infinite;pointer-events:none}
@keyframes casGlowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
.cas-scan{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(0,212,255,.35) 18deg,transparent 42deg,transparent 360deg);
  animation:casScan 5s linear infinite}
.cas-wheelbox:has(.cas-wheel.spinning) .cas-scan{animation-duration:.9s}
.cas-wheelbox:has(.cas-wheel.spinning) .cas-glow{animation-duration:.9s}
@keyframes casScan{to{transform:rotate(360deg)}}
.cas-pointer{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 0 6px #00d4ff) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cas-wheel{position:relative;width:100%;height:100%;display:block;border-radius:50%;transform-origin:50% 50%;transform:rotate(0deg);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))}
.cas-hub-ring{filter:drop-shadow(0 0 5px #00d4ff)}
.cas-hub-dot{animation:casHubPulse 1.6s ease-in-out infinite}
@keyframes casHubPulse{0%,100%{opacity:1;r:4.5}50%{opacity:.5;r:3.2}}
.cas-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:0 auto 20px;max-width:300px}
.cas-lg-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);padding:6px 10px;border-radius:9px;background:var(--gb);border:1px solid var(--bd)}
.cas-lg-item.win{background:color-mix(in srgb, var(--lc) 16%, transparent);border-color:var(--lc);color:var(--t1);font-weight:700;box-shadow:0 0 10px color-mix(in srgb, var(--lc) 45%, transparent)}
.cas-lg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 5px currentColor}
@keyframes casWinPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.cas-spinbtn{width:100%}
.cas-hist{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--gb);border:1px solid var(--bd);margin-bottom:6px;font-size:13px}
.cas-hist-l{flex:1;color:var(--t1);font-weight:500}
.cas-hist-d{color:var(--t3);font-size:11.5px}
.cas-used{color:var(--t3);font-size:11px;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px}
.cas-hist.admin{flex-wrap:wrap}
.cas-result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0}
.cas-result-ic{font-size:52px;margin-bottom:6px}
.cas-result h2{margin:0 0 6px}
.cas-result-t{font-size:20px;font-weight:700;color:var(--gold)}
.cas-result.jackpot .cas-result-t{color:#ffd23f;text-shadow:0 0 18px rgba(255,210,63,.6)}

/* ─── выдача спинов вручную (админ) ─── */
.cas-grant{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.cas-grant input{width:64px;box-sizing:border-box;padding:8px 10px;border-radius:9px;background:var(--gb);border:1px solid var(--bd);color:var(--t1);font-size:14px}

/* ─── сравнение с прошлым периодом (неделя/месяц) ─── */
.pc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:24px}
.pc-card{padding:16px 18px}
.pc-t{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:9px}
.pc-row2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pc-row2.sub{margin-top:4px}
.pc-v{font-size:22px;font-weight:600;color:var(--t1)}
.pc-n{font-size:13px;color:var(--t2)}
.pc-d{font-size:11.5px;font-weight:600;white-space:nowrap}
.pc-d.up{color:var(--ok)}
.pc-d.down{color:var(--err)}
@media(max-width:640px){ .pc-row{grid-template-columns:1fr} }

/* ─── домашние задания ─── */
.hw-card{display:flex;gap:12px;padding:12px;border-radius:14px;background:var(--gb);border:1px solid var(--bd);margin-bottom:10px}
.hw-card.done{opacity:.72}
.hw-thumb{width:64px;height:48px;flex:0 0 auto;border-radius:9px;overflow:hidden;cursor:pointer}
.hw-thumb img{width:100%;height:100%;object-fit:cover}
.hw-body{flex:1;min-width:0}
.hw-title{font-size:14px;font-weight:600;color:var(--t1)}
.hw-text{font-size:13px;color:var(--t2);margin-top:3px;white-space:pre-wrap}
.hw-meta{font-size:11px;color:var(--t3);margin-top:5px}
.hw-donebadge{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-size:12px;margin-top:6px}
.hw-donebadge .ms{font-size:14px!important}
.hw-files-prev{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hw-file-chip{background:var(--gb2);border-radius:7px;padding:4px 9px;font-size:11.5px;color:var(--t2)}

/* ─── бейджи достижений ─── */
.cab-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.cab-badge{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;border-radius:12px;background:var(--gb);border:1px solid var(--bd);opacity:.5}
.cab-badge.on{opacity:1;background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.3)}
.cab-badge-ic{font-size:26px;color:var(--t3)}
.cab-badge.on .cab-badge-ic{color:var(--gold)}
.cab-badge.on .cab-badge-ic .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.cab-badge-t{font-size:10.5px;color:var(--t2);text-align:center;line-height:1.3;font-weight:600}
.cab-badge-d{font-size:9px;color:var(--t3);text-align:center;line-height:1.25}

/* ─── личный кабинет ученика ─── */
.prof-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left}
.prof-link:hover .prof-t b{color:var(--az)}
.cab-prof-hero{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cab-prof-name{display:flex;flex-direction:column;gap:3px}
.cab-prof-name b{font-size:18px;font-weight:600;color:var(--t1)}
.cab-prof-name small{font-size:12.5px;color:var(--t3)}
.cab-about{display:flex;flex-direction:column;gap:2px}
.cab-about-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.cab-about-row:last-child{border-bottom:0}
.cab-about-row span{font-size:13px;color:var(--t3)}
.cab-about-row b{font-size:13px;color:var(--t1);font-weight:500;text-align:right}
.cab-about-row i{color:var(--t3);font-style:normal;opacity:.7}
.cab-hist{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow-y:auto}
.cab-hist-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--bd);font-size:13px}
.cab-hist-row:last-child{border-bottom:0}
.cab-hist-date{color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:12px}
.cab-hist-date i{color:var(--t3);font-style:normal;margin-left:6px}
.cab-hist-time{color:var(--t3);font-family:'JetBrains Mono',monospace;font-size:12px}

/* ─── тепловая карта загруженности ─── */
.load-heatmap{overflow-x:auto}
.load-row{display:grid;grid-template-columns:52px repeat(7,minmax(38px,1fr));gap:3px;margin-bottom:3px;align-items:center}
.load-head{margin-bottom:8px}
.load-hlabel{font-size:10.5px;color:var(--t3);font-family:'JetBrains Mono',monospace;text-align:right;padding-right:6px}
.load-dlabel{font-size:11px;color:var(--t2);text-align:center;font-weight:600}
.load-cell{height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--t1);font-family:'JetBrains Mono',monospace}

/* ─── доска: таймер ─── */
.wb-timer{position:absolute;top:14px;right:14px;left:auto;transform:none;display:flex;align-items:center;gap:8px;background:#1b2230;border:1px solid var(--bd2);border-radius:999px;padding:6px 10px 6px 6px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:4211;color:var(--azl)}
.wb-timer.low{color:#ff6b6b;animation:wbTimerPulse 1s ease-in-out infinite}
@keyframes wbTimerPulse{0%,100%{opacity:1}50%{opacity:.6}}
.wb-timer-ring{width:30px;height:30px}
.wb-timer-t{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#fff;min-width:44px}
.wb-timer-b{width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#c3cde0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wb-timer-b:hover{background:rgba(255,255,255,.2)}
.wb-timer-b .ms{font-size:13px!important}

/* ─── личная заметка во время звонка ─── */
.quick-note{position:fixed;right:18px;bottom:100px;width:250px;background:#1b2230;border:1px solid var(--bd2);border-radius:16px;padding:12px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:4000;display:flex;flex-direction:column;gap:8px}
.qn-head{display:flex;align-items:center;gap:7px;color:#fff;font-size:12.5px;font-weight:600}
.qn-head .ms{font-size:15px!important;color:var(--azl)}
.qn-head span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-note textarea{width:100%;box-sizing:border-box;min-height:90px;resize:vertical;background:#0f1622;border:1px solid var(--bd2);border-radius:9px;padding:9px 11px;color:#fff;font-family:inherit;font-size:13px}
.quick-note textarea:focus{outline:none;border-color:rgba(var(--az-rgb),.5)}
@media(max-width:640px){ .quick-note{right:8px;left:8px;width:auto;bottom:90px} }

/* ═══ КОЛЕСО СОЗВЕЗДИЙ — концепция целиком ═══════════════════════════════ */

/* — шапка — */
.cas-hero{text-align:center;margin-bottom:18px}
.cas-hero-stars{color:var(--gold);letter-spacing:6px;font-size:13px;opacity:.7;margin-bottom:6px}
.cas-title{margin:0 0 6px;font-size:24px;background:linear-gradient(90deg,#00d4ff,#a855f7,#ffd23f);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.cas-tagline{font-size:13px;color:var(--t3);max-width:280px;margin:0 auto}

/* — прогресс до следующего спина — */
.cas-progress{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:26px}
.cas-pips{display:flex;gap:7px}
.cas-pip{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:all .3s}
.cas-pip.on{background:radial-gradient(circle,#ffe38a,#ffd23f);border-color:#ffd23f;box-shadow:0 0 8px #ffd23f}
.cas-progress-note{font-size:12px;color:var(--t3)}
.cas-ready-badge{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:linear-gradient(90deg,rgba(0,212,255,.16),rgba(168,85,247,.16));border:1px solid rgba(0,212,255,.4);color:var(--t1);font-size:13px;animation:casReadyPulse 2s ease-in-out infinite}
.cas-ready-badge .ms{font-size:16px!important;color:#ffd23f}
@keyframes casReadyPulse{0%,100%{box-shadow:0 0 0 rgba(0,212,255,0)}50%{box-shadow:0 0 16px rgba(0,212,255,.35)}}

/* — колесо: туманность за колесом (глубже прежнего) — */
.cas-nebula{position:absolute;inset:-40px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%,rgba(0,212,255,.14) 0%,transparent 55%),
    radial-gradient(circle at 70% 70%,rgba(168,85,247,.14) 0%,transparent 55%),
    radial-gradient(circle at 50% 50%,rgba(255,210,63,.06) 0%,transparent 65%);
  filter:blur(6px);animation:casNebula 6s ease-in-out infinite}
@keyframes casNebula{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.06) rotate(8deg)}}

/* — орбитальные звёзды вокруг колеса — */
.cas-orbits{position:absolute;inset:0;pointer-events:none;animation:casOrbitSpin 22s linear infinite}
@keyframes casOrbitSpin{to{transform:rotate(360deg)}}
.cas-orbit-star{position:absolute;top:50%;left:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#ffe38a;
  transform:rotate(calc(var(--oi) * 51.4deg)) translateX(128px) rotate(calc(var(--oi) * -51.4deg));
  animation:casTwinkle 2.6s ease-in-out infinite}
.cas-orbit-star .ms{font-size:11px!important}
@keyframes casTwinkle{0%,100%{opacity:.25;transform:rotate(calc(var(--oi) * 51.4deg)) translateX(128px) rotate(calc(var(--oi) * -51.4deg)) scale(.8)}50%{opacity:1;transform:rotate(calc(var(--oi) * 51.4deg)) translateX(128px) rotate(calc(var(--oi) * -51.4deg)) scale(1.15)}}

/* — кнопка-амулет — */
.cas-amulet{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:16px;border:1px solid rgba(0,212,255,.4);
  background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(168,85,247,.18));color:var(--t1);font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 20px rgba(0,212,255,.15);transition:transform .15s,box-shadow .15s}
.cas-amulet:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 26px rgba(0,212,255,.28)}
.cas-amulet:disabled{opacity:.4;cursor:default}
.cas-amulet-ic{display:flex;color:#ffd23f;animation:casAmuletSpin 3s linear infinite}
.cas-amulet:disabled .cas-amulet-ic{animation:none}
@keyframes casAmuletSpin{to{transform:rotate(360deg)}}

/* — хроника побед (таймлайн) — */
.cas-chronicle{position:relative;padding-left:26px}
.cas-chronicle::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,rgba(255,210,63,.5),transparent)}
.cas-chron-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 0}
.cas-chron-ic{position:absolute;left:-26px;width:19px;height:19px;border-radius:50%;background:var(--surface2);border:1px solid rgba(255,210,63,.5);display:flex;align-items:center;justify-content:center;font-size:10px}
.cas-chron-body{flex:1;display:flex;flex-direction:column}
.cas-chron-l{font-size:13px;color:var(--t1);font-weight:500}
.cas-chron-d{font-size:11px;color:var(--t3)}

/* — драматичное раскрытие приза в модалке — */
.cas-result-burst{position:relative;width:96px;height:96px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.cas-ray{position:absolute;top:50%;left:50%;width:2px;height:38px;background:linear-gradient(180deg,rgba(255,210,63,.7),transparent);
  transform:rotate(calc(var(--ri) * 30deg)) translateY(-48px);animation:casRayPulse 1.4s ease-in-out infinite;animation-delay:calc(var(--ri) * .05s)}
@keyframes casRayPulse{0%,100%{opacity:.3}50%{opacity:1}}
.cas-result-ic{position:relative;font-size:52px;z-index:1;animation:casResultPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes casResultPop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ═══ НОЧЬ ИСПОЛНЕНИЯ ЖЕЛАНИЙ — новая механика (не колесо!) ═══════════════ */

.wish-sky{position:relative;height:280px;border-radius:22px;overflow:hidden;margin-bottom:20px;
  background:radial-gradient(ellipse at 50% 30%,rgba(30,20,60,.9) 0%,rgba(10,8,22,.96) 70%);
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.wish-star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff;animation:wishTwinkle 2.8s ease-in-out infinite}
.wish-star.s1{width:2px;height:2px;opacity:.5}
.wish-star.s2{width:3px;height:3px;opacity:.7}
@keyframes wishTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}

.wish-moonwrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.wish-moon{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 32%,#fffef4,#e8dfc0 55%,#b8ac86 100%);
  box-shadow:0 0 24px rgba(255,247,210,.25),inset -6px -6px 14px rgba(0,0,0,.18);transition:box-shadow .6s}
.wish-moon-shadow{position:absolute;inset:0;background:#0a0816;border-radius:50%;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.wish-moon.full{box-shadow:0 0 42px rgba(255,247,210,.55),inset -6px -6px 14px rgba(0,0,0,.12)}
.wish-moon-halo{position:absolute;top:50%;left:50%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,210,.2) 0%,transparent 70%);animation:wishHalo 2.8s ease-in-out infinite;pointer-events:none}
@keyframes wishHalo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

.wish-fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.wish-shoot{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:-14px 2px 10px 2px rgba(255,255,255,.6);
  animation:wishShoot 1.2s cubic-bezier(.25,.1,.3,1) forwards}
@keyframes wishShoot{
  0%{transform:translate(-50%,-50%) rotate(var(--ang)) translateX(0) rotate(calc(var(--ang) * -1));opacity:0}
  8%{opacity:1}
  100%{transform:translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) rotate(calc(var(--ang) * -1));opacity:0}
}
.wish-burst{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffe38a 40%,transparent 72%);animation:wishBurst .85s ease-out forwards}
@keyframes wishBurst{0%{transform:scale(.2);opacity:1}100%{transform:scale(11);opacity:0}}

.wish-chart{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;max-width:300px;margin:0 auto}
.wish-chart-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);padding:6px 10px;border-radius:9px;background:var(--gb);border:1px solid var(--bd)}
.wish-chart-star{font-size:12px;color:#c9bd8a}
.wish-chart-star.mid{font-size:14px;color:#ffd23f;text-shadow:0 0 4px rgba(255,210,63,.5)}
.wish-chart-star.big{font-size:15px}

/* — звёзды-кандидаты и выбор случайной — */
.wish-cand{position:absolute;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-17px 0 0 -17px;
  color:rgba(255,255,255,.16);transition:color .2s,transform .2s,filter .2s,left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s;z-index:2;cursor:default}
.wish-cand svg{width:22px;height:22px;display:block}
.wish-cand.dim{color:rgba(255,255,255,.1)}
.wish-cand.active{color:#ffe38a;opacity:.85;cursor:pointer;animation:wishInvite 2.2s ease-in-out infinite}
.wish-cand.active:hover{transform:scale(1.3);filter:drop-shadow(0 0 10px #ffe38a)}
@keyframes wishInvite{0%,100%{filter:drop-shadow(0 0 3px #ffe38a);opacity:.7}50%{filter:drop-shadow(0 0 10px #ffe38a);opacity:1}}
.wish-cand.faded{opacity:.08;animation:none;cursor:default;pointer-events:none}
.wish-cand.chosen{left:50%!important;top:40%!important;width:52px;height:52px;margin:-26px 0 0 -26px;
  color:#fff;transform:scale(1);filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 32px #ffe38a);
  animation:none;cursor:pointer;opacity:1}
.wish-cand.chosen svg{width:44px;height:44px}
.wish-cand.chosen.shake{animation:wishShake .28s ease-in-out}
@keyframes wishShake{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.08) rotate(-6deg)}75%{transform:scale(1.08) rotate(6deg)}}
.wish-cand.chosen.shatter{animation:wishShatter .35s ease-in forwards;pointer-events:none}
@keyframes wishShatter{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
.wish-prompt{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:13px;color:var(--t2);text-align:center;white-space:nowrap;z-index:4}
.wish-prompt b{color:#ffe38a}

/* — медленное изящное распускание — */
.wish-bloom{position:absolute;width:0;height:0;pointer-events:none}
.wish-bloom-core{position:absolute;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffe38a 45%,transparent 75%);animation:wishCoreGrow 1.9s ease-out forwards}
@keyframes wishCoreGrow{0%{transform:scale(.6);opacity:.9}55%{transform:scale(3.2);opacity:1}100%{transform:scale(4.2);opacity:0}}
.wish-petal{position:absolute;top:0;left:0;width:8px;height:0;margin-left:-4px;border-radius:50% 50% 4px 4px / 60% 60% 4px 4px;
  background:linear-gradient(180deg,#fff 0%,#ffe38a 45%,rgba(232,171,47,.25) 85%,transparent);
  box-shadow:0 0 8px rgba(255,227,138,.5);
  transform:rotate(calc(var(--pi) * (360deg / var(--pn)))) translateY(0);transform-origin:50% 0;
  opacity:0;animation:wishPetalOpen 1.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes wishPetalOpen{0%{height:0;opacity:0;width:8px}20%{opacity:1}70%{width:10px}100%{height:76px;opacity:0;width:4px}}

/* — настоящий разлёт осколков при разбитии звезды — */
.wish-shards{position:absolute;width:0;height:0;pointer-events:none;z-index:5}
.wish-shard{position:absolute;top:0;left:0;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  background:var(--tone);clip-path:polygon(50% 0%,100% 70%,70% 100%,0% 60%);
  box-shadow:0 0 6px var(--tone);
  animation:wishShardFly .85s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes wishShardFly{
  0%{transform:rotate(var(--ang)) translate(0,0) rotate(0);opacity:1}
  100%{transform:rotate(var(--ang)) translate(var(--dist),28px) rotate(var(--rot));opacity:0}
}

/* ═══ СЕКРЕТНАЯ АРКАДА ═══════════════════════════════════════════════════ */
.logo-icon-wrap{position:relative;display:inline-flex}
.secret-fill{position:absolute;inset:0;color:#ffd23f;opacity:0;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,210,63,.7))}
.logo,.side-logo{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}

.arcade-shell{max-width:640px}
.arcade-headrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.arcade-title{margin:0;font-size:22px}
.arcade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.arcade-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px;border-radius:16px;background:var(--gb);border:1px solid var(--bd);color:var(--t1);cursor:pointer;font-size:13px;font-weight:600;transition:background .15s,transform .15s}
.arcade-card:hover:not(:disabled){background:var(--gbh);transform:translateY(-2px)}
.arcade-card.soon{opacity:.4;cursor:default}
.arcade-ic{font-size:34px}
.arcade-card small{font-weight:400;color:var(--t3);font-size:10.5px}

.arcade-game{display:flex;flex-direction:column;align-items:center;gap:10px}
.arcade-gamehead{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:340px}
.arcade-score{font-size:13px;color:var(--t2)}
.arcade-score b{color:var(--t1)}
.arcade-hint{font-size:12px;color:var(--t3)}
#snake-cv{border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);touch-action:none;cursor:pointer}
.arcade-pad{display:flex;flex-direction:column;align-items:center;gap:6px}
.arcade-pad-mid{display:flex;gap:60px}
.arcade-pb{width:44px;height:44px;border-radius:12px;background:var(--gb);border:1px solid var(--bd);color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer}
.arcade-pb:hover{background:var(--gbh)}
.arcade-pb .ms{font-size:20px!important}

.runner-track{position:relative;width:100%;max-width:340px;height:120px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0d1420,#182338);box-shadow:0 10px 30px rgba(0,0,0,.4);touch-action:none;cursor:pointer}
.runner-ground{position:absolute;left:0;right:0;bottom:26px;height:2px;background:rgba(255,255,255,.18)}
.runner-kite{position:absolute;left:24px;bottom:26px;width:30px;height:30px;color:#00d4ff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));will-change:transform}
.runner-ob{position:absolute;bottom:26px;width:14px;height:26px;background:linear-gradient(180deg,#f4318f,#a855f7);border-radius:3px 3px 0 0;box-shadow:0 0 8px rgba(244,49,143,.4)}
.runner-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;
  background:rgba(8,12,20,.55);color:var(--t1);font-size:13px;font-weight:600}

/* — 2048 — */
.g2048-board{display:grid;grid-template-columns:repeat(4,72px);grid-template-rows:repeat(4,72px);gap:8px;padding:10px;border-radius:14px;
  background:#1b2230;box-shadow:0 10px 30px rgba(0,0,0,.4);touch-action:none}
.g2048-cell{border-radius:9px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff}
.g2048-cell.pop{animation:g2048Pop .18s ease-out}
@keyframes g2048Pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* — крестики-нолики — */
.ttt-board{display:grid;grid-template-columns:repeat(3,84px);grid-template-rows:repeat(3,84px);gap:8px;padding:10px;border-radius:14px;
  background:#1b2230;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ttt-cell{border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:700;cursor:pointer;transition:background .12s}
.ttt-cell:hover:not(.filled){background:rgba(255,255,255,.1)}
.ttt-cell.filled{cursor:default}

/* — Flappy Kite / Тетрис: канвасы в общем стиле — */
#flappy-cv,#tetris-cv{border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);touch-action:none;cursor:pointer}

/* — память (найди пару) — */
.memory-board{display:grid;grid-template-columns:repeat(4,60px);grid-template-rows:repeat(4,60px);gap:8px;padding:10px;border-radius:14px;
  background:#1b2230;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.memory-card{border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--bd);font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.memory-card:hover{background:rgba(255,255,255,.1)}
.memory-card.up{background:rgba(0,212,255,.14);border-color:rgba(0,212,255,.4);transform:scale(1.03)}
.memory-card.matched{background:rgba(0,230,168,.14);border-color:rgba(0,230,168,.4);opacity:.75;cursor:default}

/* — тесты звука в окне проверки перед звонком — */
.prev-tests{display:flex;gap:8px;margin-top:10px}
.prev-tests .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.prev-tests .ms{font-size:15px!important}
.test-mic-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.test-mic-bar i{display:block;height:100%;width:0%;border-radius:4px;background:linear-gradient(90deg,var(--ok),var(--gold));transition:width .08s linear}

/* — индикатор постоянной комнаты доски (когда открыта без звонка) — */
.wb-roomtag{display:inline-flex;align-items:center;gap:5px;padding:0 10px;color:var(--t3);font-size:11.5px;white-space:nowrap}
.wb-roomtag .ms{font-size:15px!important;color:var(--ok)}

/* — секция действий в панели досок — */
.wbb-cur{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04)}
.wbb-cur b{color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbb-cur small{color:var(--t3)}
.wbb-cur .ms{font-size:14px!important;color:var(--az);flex:0 0 auto}
.wbb-actions{display:flex;flex-direction:column;gap:5px}
.wbb-act{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;border:1px solid var(--bd);background:var(--gb);color:var(--t1);
  font-size:13px;cursor:pointer;text-align:left;transition:background .14s,border-color .14s,transform .12s}
.wbb-act:hover{background:var(--gbh);border-color:var(--bd2);transform:translateX(2px)}
.wbb-act .ms{font-size:17px!important;color:var(--az);flex:0 0 auto}
.wbb-sep{height:1px;background:var(--bd);margin:2px 0}
.wbb-item{animation:wbbIn .22s ease-out backwards}
@keyframes wbbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wbb-item.base .wbb-thumb{background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(168,85,247,.12))}

/* — плавное появление всех раскрывающихся панелей доски — */
.wb-calc,.wb-zoom.open,.wb-speakers,.wb-hint{animation:wbPanelIn .2s cubic-bezier(.2,.8,.3,1)}
@keyframes wbPanelIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.ctx-menu,.wb-pop{transform-origin:top left}

/* ═══ МОБИЛЬНАЯ ДОСКА: компактные панели ═══════════════════════════════════ */

/* участники — на телефоне только кружки, без имён и подложки */
.wb-speakers.compact{background:none;border:none;box-shadow:none;padding:0;gap:6px;flex-direction:row}
.wb-speakers.compact .wbs-row{gap:0}
.wb-speakers.compact .wbs-av{width:34px;height:34px;font-size:14px;box-shadow:0 3px 10px rgba(0,0,0,.45)}

/* меню «ещё» — редкие инструменты сеткой */
.wb-more{position:absolute;background:#1b2230;border:1px solid var(--bd2);border-radius:16px;padding:10px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:4215;opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.wb-more.in{opacity:1;transform:none}
.wb-more-grid{display:grid;grid-template-columns:repeat(5,50px);gap:5px}
.wb-more .wb-b{width:50px!important;height:50px!important}
.wb-more .wb-b .ms{font-size:24px!important}
@media (orientation:portrait) and (pointer:coarse){ .wb-more{left:50%;transform:translateX(-50%) translateY(6px) scale(.97);bottom:calc(70px + env(safe-area-inset-bottom,0px))} .wb-more.in{transform:translateX(-50%)} }
@media (orientation:landscape) and (pointer:coarse){ .wb-more{left:74px;bottom:8px} .wb-more-grid{grid-template-columns:repeat(4,50px)} }

/* меню устройств звонка — на телефоне шторкой снизу на всю ширину */
@media (pointer:coarse), (max-width:820px){
  .call-menu{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;max-width:none!important;transform:none!important;
    border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
    max-height:72vh;overflow-y:auto;animation:sheetUp .24s cubic-bezier(.2,.8,.3,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .call-menu::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 14px}
}

/* — шторка настроек звонка: затемнение, кнопка закрытия, свайп — */
.call-menu-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:4213;animation:fdi .18s ease}
/* position здесь НЕ задаём: на десктопе действует absolute (см. выше), на телефоне —
   fixed из медиа-запроса. Раньше тут стоял relative и на десктопе выбрасывал панель
   из её места вниз за экран. z-index — выше затемнения, иначе панель под ним. */
.call-menu{transition:transform .2s cubic-bezier(.2,.8,.3,1),opacity .18s ease;z-index:4214}
.call-menu.closing{transform:translateX(-50%) translateY(14px);opacity:0}
@media (pointer:coarse), (max-width:820px){
  .call-menu.closing{transform:translateY(100%)!important;opacity:1}
}
.call-menu-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:var(--t1);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.call-menu-x:hover{background:rgba(255,255,255,.2)}
.call-menu-x .ms{font-size:20px!important}
@media (pointer:coarse), (max-width:820px){
  .call-menu{z-index:4214!important}
  .call-menu-x{display:flex}
  .call-menu .prev-lab:first-of-type{margin-top:6px}
}

/* ═══ УСТАНОВКА КАК ПРИЛОЖЕНИЕ (PWA) ══════════════════════════════════════ */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5000;
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--bd2);box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .26s ease,transform .34s cubic-bezier(.2,.9,.3,1)}
.pwa-banner.in{opacity:1;transform:none}
.pwa-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--az),var(--vi));color:#fff}
.pwa-ic .ms{font-size:22px!important}
.pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pwa-txt b{font-size:13.5px;font-weight:600;color:var(--t1);line-height:1.35}
.pwa-txt small{font-size:11.5px;color:var(--t3);line-height:1.4;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.pwa-txt small .ms{font-size:13px!important;vertical-align:middle}
.pwa-btn{flex:0 0 auto;padding:9px 15px;border-radius:11px;border:none;cursor:pointer;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,var(--az),var(--az2));color:#fff;box-shadow:0 4px 14px rgba(var(--az-rgb),.3)}
.pwa-btn:hover{filter:brightness(1.08)}
.pwa-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.08);
  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:flex-start}
.pwa-x:hover{color:var(--t1);background:rgba(255,255,255,.16)}
.pwa-x .ms{font-size:18px!important}

/* пункт «Установить приложение» в сайдбаре */
.side-install{width:100%;display:flex;align-items:center;gap:9px;padding:10px 12px;margin-bottom:6px;border-radius:11px;
  border:1px solid rgba(var(--az-rgb),.3);background:rgba(var(--az-rgb),.08);color:var(--t1);
  font-size:13px;font-family:inherit;cursor:pointer;text-align:left;transition:background .15s,transform .12s}
.side-install:hover{background:rgba(var(--az-rgb),.16);transform:translateX(2px)}
.side-install .ms{font-size:17px!important;color:var(--az);flex:0 0 auto}

/* шаги установки для iOS */
.pwa-steps{display:flex;flex-direction:column;gap:9px}
.pwa-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--t2);line-height:1.4}
.pwa-step span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--az);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pwa-step .ms{font-size:15px!important;vertical-align:middle}