/* ===== ТЕМЫ ===== Весь цвет интерфейса собран здесь. Ниже по файлу прямых цветов почти нет: вместо них переменные, поэтому вторая тема — это один блок значений, а не вторая вёрстка. Тему ставит applyTheme() в app.js атрибутом data-theme на ; выбор хранится на устройстве (localStorage bp_theme), а не в профиле: планшет в клубе общий, и чужой вход не должен его перекрашивать. Три канала вместо одного «чёрно-белого»: --lift — чем поверхность ПОДСВЕЧИВАЮТ сверху (стеклянный блик, рамка); --sink — чем её УТОПЛЯЮТ снизу внутри самой поверхности; --shadow — чем она отбрасывает тень НАРУЖУ. На тёмной теме первые два — белый и чёрный, и разница незаметна. Но в светлой теме тень остаётся тёмной, а «утопленный» край становится светлым: если бы канал был один, все карточки на светлой теме почернели бы. Каналы записаны через пробел (255 255 255), чтобы подставляться в rgb(var(--lift) / .08) — прозрачность у каждого места своя. Цвета, которые НЕ здесь и это осознанно: — чёрный фон под видео и полотном обрезки (леттербокс чёрный в любой теме); — всё, что лежит ПОВЕРХ видео (заставка, ролики, сетка кадра, органы плеера): там белый читается по кадру, а не по теме; — тона плашек в «Активность логи» (зелёный старт, красный стоп): они смысловые, а не оформительские. */ :root{ --radius:calc(16px * var(--r-k)); /* высота основных кнопок пульта (пауза/запись) — общая точка отсчёта для кнопок верхнего ряда эфира ниже (см. .rec-toprow-left/-panel) */ --ctrl-btn-h:clamp(50px,4.8vw,64px); /* ФОРМА И ЭФФЕКТЫ — вторая половина темы, помимо цвета. Сделано множителями, а не набором готовых значений: при единице вид ровно тот, что был, поэтому нынешняя тема не двигается ни на пиксель, а новой хватит одного числа, чтобы стать острой, плоской или, наоборот, мягче. --r-k скругления (0.3 — почти прямые углы, 1.4 — мягче) --r-pill «таблетка» отдельным токеном: при острых углах она может как остаться таблеткой, так и распрямиться — это решает тема --bw толщина рамки, от неё же считаются двойные и тройные --sh-k тени: 0 гасит их все разом и делает интерфейс плоским --blur-k размытие стекла позади панелей; 0 — матовые панели --glow свечение вокруг главных кнопок, --glow-soft — вокруг карточек и панелей. Это отдельный СЛОЙ в списке теней, поэтому «выключено» тут не none (в списке слоёв он недопустим), а прозрачная тень нулевого размера. Слоты уже расставлены. Чего темой быть НЕ может: размеры и расположение блоков. Раскладку экрана записи считает JS по замерам (см. fitVideoBox), и сдвиг габаритов ломает подгонку видео. Скругления, тени и свечение габаритов не трогают. */ --r-k:1; --r-pill:999px; --bw:1px; --sh-k:1; --blur-k:1; --glow:0 0 0 rgba(0,0,0,0); --glow-soft:0 0 0 rgba(0,0,0,0); } /* Тёмная зелёная — та, что была всегда. Значения продублированы в :root без селектора темы: если атрибут data-theme почему-то не проставился (старый кэш, отключённый JS), приложение выглядит как раньше, а не голым HTML. Третий селектор — просто [data-theme="…"], без :root — нужен не приложению, а витринам: в Claude Design карточки компонентов оборачивают в узел с этим атрибутом, и без него тема на них не попадала бы. В самом приложении атрибут стоит только на , так что на вид это не влияет. */ :root, :root[data-theme="green"], [data-theme="green"]{ /* явный color-scheme — иначе некоторые WebView (напр. Fully Kiosk Browser на части Android-сборок) включают алгоритмический "force dark" и перекрашивают полупрозрачные белые элементы (см. .live-timeline/.live-scrub-fill ниже) в чёрный, хотя весь интерфейс и так тёмный */ color-scheme:dark; --bg:#0f1714; --bg2:#16211c; --card:#1b2924; --line:#2c3d35; --txt:#eaf2ee; --mut:#9bb0a6; --acc:#1f9d5f; --acc-d:#14773f; --acc-l:#3fe08f; --goal:#2ec27a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:255 255 255; --sink:0 0 0; --shadow:0 0 0; --mix-dark:#000; /* чем гасят акцент в градиентах кнопок */ --mix-light:#fff; --scrim:5 10 8; /* затемнение под всплывающими окнами */ --bloom:31 157 95; /* два пятна на фоне страницы */ --bloom2:20 119 63; --sheet-hi:rgba(30,42,36,.98); /* лист окна «О системе» */ --sheet-lo:rgba(12,18,15,.98); --on-acc:#fff; /* текст на акцентной заливке */ --on-acc-soft:#eafff2; /* второстепенный текст там же */ --on-acc-dim:#d8f5e6; /* подпись под ним — глуше на тон */ --on-glass:#fff; /* текст на стеклянной панели (пульт, плеер) */ --ink:#06140d; /* самый глухой тон: фон тоста, текст на светлом */ --ok-t:#a9f0c9; /* текст статусных плашек */ --warn-t:#f2d27a; --danger-t:#ff9891; /* экран просмотра записи живёт по своему макету (см. theme-v02.css) и оттенки у него чуть свои — но переключаться он обязан вместе со всеми */ --player-panel:#0d1311; --player-txt:#e8f0ec; --player-mut:#8fa39b; --player-acc:#1d9e75; } /* Вторая тема — тёмно-бордовая. Пока это образец: на нём видно, что переключение работает и что цвет нигде не остался прибитым гвоздями. Когда из Claude Design придёт настоящий редизайн, он ляжет сюда же — отдельным блоком с тем же набором имён. */ :root[data-theme="wine"], [data-theme="wine"]{ color-scheme:dark; --bg:#180f12; --bg2:#22161a; --card:#2b1c21; --line:#432c33; --txt:#f3e9ea; --mut:#b39ba1; --acc:#a63a4e; --acc-d:#7c2739; --acc-l:#e06880; --goal:#c4a24a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:255 246 248; --sink:0 0 0; --shadow:0 0 0; --mix-dark:#12080b; --mix-light:#fff; --scrim:12 6 8; --bloom:166 58 78; --bloom2:124 39 57; --sheet-hi:rgba(48,30,36,.98); --sheet-lo:rgba(22,13,16,.98); --on-acc:#fff; --on-acc-soft:#ffeaef; --on-acc-dim:#f6dbe1; --on-glass:#fff5f7; --ink:#150a0d; --ok-t:#f0d9a9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#140c0f; --player-txt:#f3e9ea; --player-mut:#a89197; --player-acc:#a63a4e; } /* «Изумруд» — тема из Claude Design (10.08.2026). Первая, пришедшая не от меня: значения целиком авторские, я только разложил их по нашим именам. Фон глубже нынешнего, акцент ярче и холоднее, вокруг главных кнопок свечение. */ :root[data-theme="emerald"], [data-theme="emerald"]{ color-scheme:dark; --bg:#070a09; --bg2:#0c1110; --card:#111917; --line:#22302c; --txt:#eef5f2; --mut:#8fa69f; --acc:#25c274; --acc-d:#0f8a51; --acc-l:#5ff0a8; --goal:#2ec27a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:235 255 246; --sink:0 0 0; --shadow:0 0 0; --mix-dark:#000; --mix-light:#fff; --scrim:3 6 5; --bloom:37 194 116; --bloom2:48 120 190; --sheet-hi:rgba(22,31,28,.92); --sheet-lo:rgba(8,12,11,.94); --on-acc:#ffffff; --on-acc-soft:#eafff3; --on-acc-dim:#cdf3e0; --on-glass:#fff; --ink:#04100b; --ok-t:#a9f0c9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#0a100e; --player-txt:#eef5f2; --player-mut:#8fa69f; --player-acc:#25c274; --r-k:1.3; --r-pill:999px; --bw:1px; --sh-k:1.25; --blur-k:1.15; --glow:0 0 26px rgba(95,240,168,.34); --glow-soft:0 0 22px rgba(37,194,116,.10); } /* Объёмные шары — правило из редизайна, дословно. Оно НЕ токенное, поэтому заскоплено на темы, которым принадлежит: в зелёной и в моих образцах шар остаётся плоским. В прототипе подсвеченный шар помечался инлайновым style, у нас это класс .lit — единственное, что я перевёл. ОСТОРОЖНО: градиент на шаре мы однажды уже убирали. На WebView клубного планшета (Fully Kiosk) radial-gradient на диаметре 22–32 точки рисовался тёмным пятном вместо блика, и тени там же вели себя так же; причина в драйвере, а не в разметке, так что смена темы её не отменяет. Прежде чем ставить любую из этих тем на планшет у стола — посмотреть на шары вживую. См. комментарий у .pp-ball выше. */ [data-theme="emerald"] .pp-ball, [data-theme="felt"] .pp-ball, [data-theme="aurora"] .pp-ball{ background:radial-gradient(circle at 34% 26%, rgb(var(--lift) / .18), rgb(var(--sink) / .5) 62%); border:var(--bw) solid rgb(var(--lift) / .3); box-shadow:inset 0 calc(-2px * var(--sh-k)) calc(4px * var(--sh-k)) rgb(var(--sink) / .55), inset 0 calc(1px * var(--sh-k)) calc(1px * var(--sh-k)) rgb(var(--lift) / .18); } [data-theme="emerald"] .pp-ball.lit, [data-theme="felt"] .pp-ball.lit, [data-theme="aurora"] .pp-ball.lit{ background:radial-gradient(circle at 34% 26%, #fff6d2 0%, var(--ball-lit) 44%, #b07f1c 100%); border-color:color-mix(in srgb, var(--ball-lit) 40%, transparent); box-shadow:0 calc(3px * var(--sh-k)) calc(7px * var(--sh-k)) rgb(var(--shadow) / .5), inset 0 calc(-2px * var(--sh-k)) calc(4px * var(--sh-k)) rgba(90,55,0,.4); } /* «Сукно» — из того же редизайна: теплее, мягче углы, стекло почти без размытия, свечение приглушённое. */ :root[data-theme="felt"], [data-theme="felt"]{ color-scheme:dark; --bg:#0b1512; --bg2:#10201a; --card:#15271f; --line:#26402f; --txt:#f1f7f2; --mut:#9db9a8; --acc:#1fa968; --acc-d:#136e43; --acc-l:#4ede9a; --goal:#2ec27a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:255 250 240; --sink:0 0 0; --shadow:0 0 0; --mix-dark:#04100a; --mix-light:#fff; --scrim:5 12 9; --bloom:31 169 104; --bloom2:150 108 46; --sheet-hi:rgba(28,45,36,.98); --sheet-lo:rgba(11,21,18,.98); --on-acc:#fff; --on-acc-soft:#eafff2; --on-acc-dim:#d8f5e6; --on-glass:#fff; --ink:#06140d; --ok-t:#a9f0c9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#0d1815; --player-txt:#f1f7f2; --player-mut:#9db9a8; --player-acc:#1fa968; --r-k:1.55; --r-pill:999px; --bw:1px; --sh-k:.85; --blur-k:.5; --glow:0 0 16px rgba(78,222,154,.22); --glow-soft:0 0 0 rgba(0,0,0,0); } /* «Аврора» — самая контрастная: холодный синий фон, сиреневое пятно на заднике, сильное свечение и самое заметное размытие. */ :root[data-theme="aurora"], [data-theme="aurora"]{ color-scheme:dark; --bg:#07090f; --bg2:#0c1018; --card:#121722; --line:#252c3d; --txt:#eef1f8; --mut:#94a0ba; --acc:#2fd08a; --acc-d:#179a63; --acc-l:#74f7ba; --goal:#2ec27a; --dispute:#e6b53b; --custom:#6aa8ff; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:236 240 255; --sink:0 0 0; --shadow:2 4 16; --mix-dark:#05060b; --mix-light:#fff; --scrim:4 5 10; --bloom:126 74 224; --bloom2:47 208 138; --sheet-hi:rgba(24,29,42,.92); --sheet-lo:rgba(8,10,16,.94); --on-acc:#ffffff; --on-acc-soft:#e9fff5; --on-acc-dim:#c9f4e1; --on-glass:#fff; --ink:#05070d; --ok-t:#a9f0c9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#0a0d15; --player-txt:#eef1f8; --player-mut:#94a0ba; --player-acc:#2fd08a; --r-k:1.45; --r-pill:999px; --bw:1px; --sh-k:1.4; --blur-k:1.35; --glow:0 0 30px rgba(47,208,138,.42); --glow-soft:0 0 28px rgba(126,74,224,.18); } /* «Неон» — тема, которая отличается НЕ цветом, а оформлением: вокруг главных кнопок и панелей стоит свечение, стекло размыто сильнее, углы мягче. Она и заведена ради проверки, что через тему проходит не только палитра. */ :root[data-theme="neon"], [data-theme="neon"]{ color-scheme:dark; --bg:#080c14; --bg2:#0d1420; --card:#121c2b; --line:#1e3350; --txt:#e6f3ff; --mut:#8fa8c4; --acc:#1f8fd4; --acc-d:#12608f; --acc-l:#5ad2ff; --goal:#2ec27a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:214 238 255; --sink:0 0 0; --shadow:0 6 20; --mix-dark:#05080f; --mix-light:#fff; --scrim:3 7 14; --bloom:31 143 212; --bloom2:18 96 143; --sheet-hi:rgba(22,36,54,.98); --sheet-lo:rgba(8,13,20,.98); --on-acc:#fff; --on-acc-soft:#dff1ff; --on-acc-dim:#c3e4fb; --on-glass:#f2fbff; --ink:#050b14; --ok-t:#a9f0c9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#0a121c; --player-txt:#e6f3ff; --player-mut:#8fa8c4; --player-acc:#1f8fd4; --r-k:1.35; --bw:1px; --sh-k:1.2; --blur-k:1.6; --glow:0 0 22px rgba(90,210,255,.55); --glow-soft:0 0 16px rgba(90,210,255,.18); } /* «Плоская» — обратный полюс: теней нет вовсе, стекло не размывается, углы почти прямые. Цвет при этом близок к нынешнему — чтобы на ней было видно именно разницу в оформлении, а не в палитре. */ :root[data-theme="flat"], [data-theme="flat"]{ color-scheme:dark; --bg:#101815; --bg2:#18211d; --card:#1d2723; --line:#33423b; --txt:#e8f0ec; --mut:#93a89e; --acc:#1f9d5f; --acc-d:#14773f; --acc-l:#3fe08f; --goal:#2ec27a; --dispute:#e6b53b; --custom:#4ea3e0; --danger:#e0584e; --tag:#a86ee0; --ball-lit:#f4d03f; --lift:255 255 255; --sink:0 0 0; --shadow:0 0 0; --mix-dark:#000; --mix-light:#fff; --scrim:5 10 8; --bloom:31 157 95; --bloom2:20 119 63; --sheet-hi:#1d2723; --sheet-lo:#1d2723; --on-acc:#fff; --on-acc-soft:#eafff2; --on-acc-dim:#d8f5e6; --on-glass:#fff; --ink:#0b120f; --ok-t:#a9f0c9; --warn-t:#f2d27a; --danger-t:#ff9891; --player-panel:#141c19; --player-txt:#e8f0ec; --player-mut:#93a89e; --player-acc:#1f9d5f; --r-k:.3; --r-pill:6px; --bw:1px; --sh-k:0; --blur-k:0; --glow:0 0 0 rgba(0,0,0,0); --glow-soft:0 0 0 rgba(0,0,0,0); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%} body{ /* no-repeat — без него background (repeat по умолчанию) тайлит оба radial-gradient вниз по странице на длинном контенте (напр. #view-sysadmin в 2 колонки при узком/высоком окне) — виден жёсткий шов и повтор пятна. attachment:fixed — держит оба пятна привязанными к вьюпорту, а не к верху/низу документа, так что при любой высоте страницы и любом скролле фон выглядит одинаково цельным */ background: radial-gradient(1200px 800px at 10% -10%,rgb(var(--bloom) / .16),transparent 60%), radial-gradient(900px 700px at 110% 110%,rgb(var(--bloom2) / .16),transparent 55%), var(--bg); background-repeat:no-repeat; background-attachment:fixed; color:var(--txt); font-family:-apple-system,Segoe UI,Roboto,Inter,system-ui,sans-serif; overscroll-behavior:none; } /* height (не min-height) — иначе flex:1 у #main/.view считается от неопределённой (auto) высоты, и min-height:0 на record-view/rec-main ниже ничего не решает (сжимать нечего, если у контейнера нет жёсткого потолка для расчёта). Другим экранам (архив, история баланса и т.п.) это не мешает: у #app нет overflow:hidden, длинный контент по-прежнему просто выйдет за рамки и страница проскроллится как обычно. */ #app{display:flex;flex-direction:column;height:100dvh} .hidden{display:none !important} /* topbar */ #topbar{ display:flex;align-items:center;gap:8px; padding:env(safe-area-inset-top) 12px 0; height:calc(54px + env(safe-area-inset-top)); background:linear-gradient(180deg,rgb(var(--lift) / .06),rgb(var(--sink) / .25)),var(--bg2); border-bottom:var(--bw) solid rgb(var(--lift) / .12);position:sticky;top:0;z-index:20; backdrop-filter:blur(calc(10px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(10px * var(--blur-k))); } #title{flex:1;text-align:center;font-weight:700;letter-spacing:.3px} .icon-btn{ display:flex;align-items:center;justify-content:center;gap:8px; background:rgb(var(--lift) / .08);border:var(--bw) solid rgb(var(--lift) / .16);color:var(--txt); font-size:22px;height:42px;padding:0 12px;border-radius:var(--r-pill);cursor:pointer; backdrop-filter:blur(calc(8px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(8px * var(--blur-k))); transition:transform .12s,filter .12s,background .12s; } .icon-btn:active{transform:scale(.95);filter:brightness(.9)} @media (hover:hover){ .icon-btn:hover{background:rgb(var(--lift) / .16);transform:translateY(-1px)} } .icon-btn.ghost{font-size:20px} #backBtn{width:42px;padding:0} .logout-btn{font-size:18px} .logout-btn .icon-btn-lbl{font-size:13px;font-weight:700;white-space:nowrap} #main{flex:1;display:flex;flex-direction:column;min-height:0} .view{display:none;flex:1;padding:18px;max-width:680px;width:100%;margin:0 auto} .view.active{display:flex;flex-direction:column} /* auth */ .brand{text-align:center;margin:34px 0 22px} .brand-logo{height:72px;width:auto;display:inline-block} .brand-sub{color:var(--mut);margin:6px 0 0} .card{ background:linear-gradient(165deg,rgb(var(--lift) / .08),rgb(var(--sink) / .35)); border:var(--bw) solid rgb(var(--lift) / .14); border-radius:var(--radius);padding:18px; box-shadow:0 calc(8px * var(--sh-k)) calc(22px * var(--sh-k)) rgb(var(--shadow) / .35),inset 0 calc(1.5px * var(--sh-k)) calc(2px * var(--sh-k)) rgb(var(--lift) / .08),var(--glow-soft); backdrop-filter:blur(calc(10px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(10px * var(--blur-k))); } .auth-form{display:flex;flex-direction:column;gap:14px} label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)} input,select{ background:rgb(var(--lift) / .06);border:var(--bw) solid rgb(var(--lift) / .18);color:var(--txt); padding:13px;border-radius:calc(11px * var(--r-k));font-size:16px;outline:none; backdrop-filter:blur(calc(6px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(6px * var(--blur-k))); transition:border-color .12s,background .12s; } input:focus,select:focus{border-color:var(--acc);background:rgb(var(--lift) / .1)} input[readonly]{opacity:.65;cursor:default} #playersBlock{display:flex;flex-direction:column;gap:14px} .btn{ border:none;border-radius:calc(12px * var(--r-k));padding:14px;font-size:16px;font-weight:700; cursor:pointer;color:var(--on-acc);transition:transform .12s,filter .12s,box-shadow .12s; } .btn:active{transform:scale(.97);filter:brightness(.9)} @media (hover:hover){ .btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.12)} } /* до сих пор ни одна .btn не бывала disabled, поэтому вида у неё не было — выключенная кнопка выглядела рабочей (см. «Отправить вызов» в разработке) */ .btn:disabled{opacity:.45;cursor:not-allowed} .btn:disabled:active{transform:none;filter:none} .btn-primary{ background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 60%,var(--mix-dark)),color-mix(in srgb,var(--acc-d) 55%,var(--mix-dark))); border:var(--bw) solid rgb(var(--lift) / .22); box-shadow:0 calc(8px * var(--sh-k)) calc(20px * var(--sh-k)) rgb(var(--shadow) / .4),inset 0 calc(1.5px * var(--sh-k)) calc(2px * var(--sh-k)) rgb(var(--lift) / .15),var(--glow); } .btn-danger{ background:rgba(224,88,78,.1);border:var(--bw) solid rgba(224,88,78,.55);color:var(--danger-t); backdrop-filter:blur(calc(6px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(6px * var(--blur-k))); } @media (hover:hover){ .btn-danger:hover{background:rgba(224,88,78,.22)} } .btn-secondary{ background:rgb(var(--lift) / .06);border:var(--bw) solid rgb(var(--lift) / .22);color:var(--txt); backdrop-filter:blur(calc(6px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(6px * var(--blur-k))); } @media (hover:hover){ .btn-secondary:hover{background:rgb(var(--lift) / .12)} } .form-msg{margin:0;font-size:13px;min-height:16px;color:var(--dispute)} .form-msg.ok{color:var(--goal)} .hint{color:var(--mut);font-size:12px;text-align:center;margin-top:16px;line-height:1.5} .btn-link{background:none;border:none;color:var(--acc);font-size:13px;cursor:pointer;padding:2px;text-align:left;transition:color .12s} @media (hover:hover){ .btn-link:hover{color:var(--acc-l);text-decoration:underline} } /* ввод телефона + стрелка "отправить код" рядом с полем (см. #phoneAuthForm) */ .phone-input-row{display:flex;gap:8px} /* min-width:0 — иначе поле не сжимается уже собственной «естественной» ширины (у input это ~20 знаков, у select — самый длинный вариант), и ряд из трёх полей с кнопкой выходил за правый край экрана телефона */ .phone-input-row input,.phone-input-row select{flex:1;min-width:0} /* флаг определённой по номеру страны слева от поля (см. #phoneFlag) */ .phone-flag{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;font-size:22px;line-height:1;border:var(--bw) solid rgb(var(--lift) / .14);border-radius:calc(11px * var(--r-k));background:rgb(var(--lift) / .06)} /* список кода страны слева от поля (см. #phoneDial): флаг + код, код подставляется автоматически, но список можно раскрыть и выбрать другой */ /* Код страны не растягиваем. Правило «.phone-input-row input, select{flex:1}» выше нужно селектам в РЯДАХ ПРИВЯЗКИ (клуб/камера/планшет) — там их и правда тянут на всю строку. Здесь же содержимое короткое, «🇷🇺 +7», и flex-grow раздувал его на половину ряда: на телефоне это пряталось за переносом строки, а на десктопе рядом с номером зияло пустое поле. Сжиматься ему по-прежнему можно — иначе на узком экране ряд снова полезет за край. Селектор из двух классов, потому что «.phone-input-row select» специфичнее одного «.phone-dial» и порядком его не перебить. */ .phone-input-row .phone-dial{flex:0 1 auto} .phone-dial{flex-shrink:0;width:auto;padding:0 8px;font-size:16px;line-height:1;border:var(--bw) solid rgb(var(--lift) / .14);border-radius:calc(11px * var(--r-k));background:rgb(var(--lift) / .06);cursor:pointer} /* смена валюты на экране баланса (см. #currencySwitchBlock) */ .currency-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:var(--bw) solid rgb(var(--lift) / .1)} .currency-switch-label{font-size:13px;color:var(--mut)} .currency-switch select{flex:1;min-width:120px} .currency-switch select:disabled{opacity:.55;cursor:not-allowed} .currency-switch .form-msg{flex-basis:100%;margin:0} .phone-send-btn{ flex-shrink:0;width:48px;border:var(--bw) solid rgb(var(--lift) / .22);border-radius:calc(11px * var(--r-k)); background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 60%,var(--mix-dark)),color-mix(in srgb,var(--acc-d) 55%,var(--mix-dark))); color:var(--on-acc);font-size:20px;font-weight:700;cursor:pointer; box-shadow:0 calc(4px * var(--sh-k)) calc(12px * var(--sh-k)) rgb(var(--shadow) / .35); transition:transform .12s,filter .12s; } .phone-send-btn:active{transform:scale(.95);filter:brightness(.9)} @media (hover:hover){ .phone-send-btn:hover{transform:translateY(-1px);filter:brightness(1.15)} } /* "Вход по QR" для Игрока-2 (см. "Новая запись") — тот же приём, что .phone-send-btn (иконка рядом с полем в той же строке, чтобы было видно, к какому именно полю относится), но auto-width: после успешного входа меняется на текстовую красную "Выйти" (.is-authenticated), а не остаётся квадратом под одну иконку */ .player2-qr-btn{ flex-shrink:0;min-width:48px;padding:0 14px;border:var(--bw) solid rgb(var(--lift) / .22);border-radius:calc(11px * var(--r-k)); background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 60%,var(--mix-dark)),color-mix(in srgb,var(--acc-d) 55%,var(--mix-dark))); color:var(--on-acc);font-size:20px;font-weight:700;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 calc(4px * var(--sh-k)) calc(12px * var(--sh-k)) rgb(var(--shadow) / .35); transition:transform .12s,filter .12s,background .12s,border-color .12s,box-shadow .12s; } .player2-qr-btn:active{transform:scale(.95);filter:brightness(.9)} @media (hover:hover){ .player2-qr-btn:hover{transform:translateY(-1px);filter:brightness(1.15)} } .player2-qr-btn.is-authenticated{ background:rgba(224,88,78,.15);border-color:rgba(224,88,78,.55);color:var(--danger-t); font-size:14px;box-shadow:none; } @media (hover:hover){ .player2-qr-btn.is-authenticated:hover{background:rgba(224,88,78,.28)} } /* номер для "подтверждения по звонку" (см. #phoneCallBlock) — крупно, чтобы легко было набрать/скопировать на телефоне-клиенте */ .call-phone-number{display:block;text-align:center;font-size:26px;font-weight:700;letter-spacing:.02em;margin:4px 0;color:var(--acc);text-decoration:none} @media (hover:hover){ .call-phone-number:hover{text-decoration:underline} } /* menu */ .menu-topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:16px} .wallet-chip{ display:flex;align-items:center;gap:7px; background:linear-gradient(165deg,rgb(var(--lift) / .1),rgb(var(--sink) / .4)); border:var(--bw) solid rgb(var(--lift) / .18); border-radius:calc(14px * var(--r-k));padding:9px 14px;color:var(--txt);cursor:pointer;font-weight:700;font-size:15px; backdrop-filter:blur(calc(8px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(8px * var(--blur-k))); box-shadow:0 calc(4px * var(--sh-k)) calc(14px * var(--sh-k)) rgb(var(--shadow) / .3),var(--glow-soft); transition:transform .12s,filter .12s,background .12s; } .wallet-chip:active{transform:scale(.97)} @media (hover:hover){ .wallet-chip:hover{transform:translateY(-1px);background:linear-gradient(165deg,rgb(var(--lift) / .16),rgb(var(--sink) / .45))} } /* display:flex, а не просто align-items у чипа: внутри span — инлайновый элемент и стоит на базовой линии текста, из-за чего под ним оставался запас под нижние выносные элементы и иконка визуально уезжала выше цифр баланса. Флекс-контейнер убирает базовую линию и центрирует иконку по высоте */ .wallet-chip .wallet-ico{font-size:18px;display:flex;align-items:center;line-height:0} .wallet-chip .wallet-amt{font-variant-numeric:tabular-nums} .btn-sm{padding:9px 16px;font-size:14px} /* два ряда: [начать запись][архив] сверху, [админ-панель] снизу на всю ширину */ .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .big-card{ display:flex;flex-direction:column;align-items:flex-start;gap:8px; background:linear-gradient(165deg,rgb(var(--lift) / .09),rgb(var(--sink) / .38)); border:var(--bw) solid rgb(var(--lift) / .16);border-radius:calc(20px * var(--r-k)); padding:26px 22px;color:var(--txt);cursor:pointer;text-align:left; box-shadow:0 calc(8px * var(--sh-k)) calc(22px * var(--sh-k)) rgb(var(--shadow) / .35),inset 0 calc(1.5px * var(--sh-k)) calc(2px * var(--sh-k)) rgb(var(--lift) / .08),var(--glow-soft); backdrop-filter:blur(calc(10px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(10px * var(--blur-k))); transition:transform .12s,filter .12s,box-shadow .12s; } .big-card.accent{ background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 55%,var(--mix-dark)),color-mix(in srgb,var(--acc-d) 45%,var(--mix-dark))); border:var(--bw) solid rgb(var(--lift) / .25); box-shadow:0 calc(8px * var(--sh-k)) calc(22px * var(--sh-k)) rgb(var(--shadow) / .4),inset 0 calc(1.5px * var(--sh-k)) calc(2px * var(--sh-k)) rgb(var(--lift) / .15),var(--glow); } .big-card:active{transform:scale(.98);filter:brightness(.95)} @media (hover:hover){ .big-card:hover{transform:translateY(-2px);box-shadow:0 calc(12px * var(--sh-k)) calc(28px * var(--sh-k)) rgb(var(--shadow) / .45);filter:brightness(1.08)} } .big-card.span-2{grid-column:1 / -1} .big-ico{font-size:34px} .big-t{font-size:20px;font-weight:700} .big-s{font-size:13px;color:var(--mut)} .big-card.accent .big-s{color:var(--on-acc-dim)} .big-card.disabled{background:linear-gradient(165deg,rgb(var(--lift) / .05),rgb(var(--sink) / .3));opacity:.5;cursor:not-allowed} .big-card.disabled:hover{transform:none;filter:none;box-shadow:0 calc(8px * var(--sh-k)) calc(22px * var(--sh-k)) rgb(var(--shadow) / .35)} .big-card.disabled .big-s{color:var(--mut)} /* archive */ .screen-h{font-size:22px;margin:6px 0 16px} /* Заголовок записи прижимаем к полосе меню: на экране просмотра каждый лишний десяток пикселей — это отъеденная высота у самого видео. */ #view-player{padding-top:8px} .list{display:flex;flex-direction:column;gap:10px} .rec-item{ display:flex;align-items:center;gap:12px; background:linear-gradient(165deg,rgb(var(--lift) / .08),rgb(var(--sink) / .35)); border:var(--bw) solid rgb(var(--lift) / .14);border-radius:calc(14px * var(--r-k));padding:14px;cursor:pointer; backdrop-filter:blur(calc(8px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(8px * var(--blur-k))); box-shadow:0 calc(4px * var(--sh-k)) calc(14px * var(--sh-k)) rgb(var(--shadow) / .3),var(--glow-soft); transition:transform .12s,filter .12s,background .12s; } .rec-item:active{transform:scale(.98);filter:brightness(.95)} @media (hover:hover){ .rec-item:hover{transform:translateY(-1px);background:linear-gradient(165deg,rgb(var(--lift) / .13),rgb(var(--sink) / .4))} } .rec-thumb{ width:46px;height:46px;border-radius:calc(11px * var(--r-k));flex-shrink:0; background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 55%,var(--mix-dark)),color-mix(in srgb,var(--acc-d) 40%,var(--mix-dark))); border:var(--bw) solid rgb(var(--lift) / .2); display:flex;align-items:center;justify-content:center;font-size:22px; } .rec-info{flex:1;min-width:0} .rec-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Стена камер (см. renderCamWall): все ракурсы клуба сразу, плиткой. Плитка крупная — 420 px минимум: экран нужен, чтобы РАЗГЛЯДЕТЬ, что в зале, а на мелких превью стол превращается в зелёное пятно. min(100%,420px) — чтобы на телефоне это не превратилось в горизонтальную прокрутку: там одна колонка во всю ширину. */ .cam-wall{ display:grid;gap:12px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); } .cam-tile{ position:relative;aspect-ratio:16/9;border-radius:calc(14px * var(--r-k));overflow:hidden; background:#000;border:var(--bw) solid var(--line); } /* contain, а не cover: экран ровно про то, чтобы видеть ВЕСЬ кадр камеры */ .cam-tile video{width:100%;height:100%;object-fit:contain;display:block} .cam-tile-cap{ position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px; font-size:13px;font-weight:700;color:#fff;pointer-events:none; background:linear-gradient(transparent,rgba(0,0,0,.75)); } .cam-tile-msg{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:12px;color:var(--mut); } .cam-tile-msg-err{color:var(--danger)} /* значок «доступны траектории» в строке архива (см. buildGameRow) — того же цвета, что и «забитый шар» в легенде: зелёный тут значит «готово» */ .rec-traj{display:inline-flex;vertical-align:-2px;color:var(--goal)} .rec-meta{color:var(--mut);font-size:12px;margin-top:3px} /* остаток срока хранения в строке архива: последнюю неделю — янтарным, чтобы «скачайте, если нужно» относилось к конкретной записи, а не ко всем сразу */ .rec-expire.soon{color:var(--warn-t)} /* строка про срок хранения над списком архива */ .archive-retention{margin:0 0 12px;line-height:1.4} .rec-arrow{color:var(--mut);font-size:20px} .admin-item{cursor:default} @media (hover:hover){ .rec-item.admin-item:hover{transform:none} } .admin-stop-btn{ border:var(--bw) solid rgba(224,88,78,.55);border-radius:calc(12px * var(--r-k));padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer; background:rgba(224,88,78,.1);color:var(--danger-t);flex-shrink:0; backdrop-filter:blur(calc(6px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(6px * var(--blur-k))); transition:transform .12s,filter .12s,background .12s; } .admin-stop-btn:active{transform:scale(.97);filter:brightness(.9)} @media (hover:hover){ .admin-stop-btn:hover{background:rgba(224,88,78,.25);transform:translateY(-1px)} } .empty{color:var(--mut);text-align:center;margin-top:40px} /* Активность логи (сисадмин) — фильтры сверху + двухстрочные карточки событий */ .log-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px} .log-filters select{flex:1;min-width:150px} /* Компактная строка фильтров (логи, статистика). Раньше select'ы «Все действия»/«Все клубы» стояли на flex:1 и растягивались на всю оставшуюся ширину — рядом с узкими полями дат это выглядело несоразмерно. Здесь всё по содержимому и в одну строку: сначала период, потом выпадающие списки. */ .filters-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .card > .filters-row{margin-bottom:0} .filters-row .btn{padding:9px 16px;font-size:14px} /* label глобально стоит колонкой — здесь подпись слева от поля, в строку */ .filter-date{flex-direction:row;align-items:center;gap:6px;font-size:12px;color:var(--mut)} /* 16px у самого поля — иначе iOS зумит страницу при фокусе на date-инпуте */ .filter-date input{width:auto;padding:8px 10px;font-size:16px} .filter-select{width:auto;max-width:100%;padding:8px 10px;font-size:14px} /* ===== «Баланс заканчивается» ===== */ /* Узкая янтарная полоска: заметная, но игру не перекрывает — на экране записи она стоит над пультом, а не поверх него. */ .low-balance-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 10px;padding:8px 12px;border-radius:calc(12px * var(--r-k)); background:rgba(215,170,40,.14);border:var(--bw) solid rgba(215,170,40,.4); } .low-balance-text{flex:1;min-width:0;color:var(--warn-t);font-size:13px;font-weight:600} /* Кнопка «Пополнить» переливается: это единственное место, где интерфейс действительно должен поймать взгляд — иначе запись остановится посреди партии. Блик гоняем через background-position, а не через box-shadow: тень пришлось бы перерисовывать каждым кадром, а сдвиг фона композитор тянет сам, не трогая раскладку. */ .low-balance-btn{ flex-shrink:0;border:none;color:#1a1206;font-weight:700; background:linear-gradient(100deg,#e8c25a 0%,#f7e3a6 42%,#fffdf5 50%,#f7e3a6 58%,#e8c25a 100%); background-size:280% 100%; animation:lowBalanceShine 2.4s linear infinite; } @keyframes lowBalanceShine{ from{background-position:140% 0} to{background-position:-140% 0} } /* уважаем системную настройку «меньше анимации» — блик там просто гаснет, кнопка остаётся золотой и заметной */ @media (prefers-reduced-motion:reduce){ .low-balance-btn{animation:none;background:linear-gradient(100deg,#e8c25a,#f7e3a6)} } /* Пополнение поверх записи (см. openTopupOverlay) */ .topup-overlay{ position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; padding:16px;background:rgb(var(--scrim) / .78);backdrop-filter:blur(calc(4px * var(--blur-k)));-webkit-backdrop-filter:blur(calc(4px * var(--blur-k))); } .topup-overlay-box{ width:100%;max-width:420px;max-height:90vh;overflow-y:auto; background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:16px; } .topup-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;margin-bottom:6px} /* пресеты минут на экране баланса и в оверлее */ .minute-presets{display:flex;gap:8px;flex-wrap:wrap} /* ===== Колокольчик уведомлений в шапке ===== */ .bell-btn{position:relative;flex-shrink:0} .bell-dot{ position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%; background:var(--danger);border:calc(var(--bw) * 2) solid var(--bg); } /* строки уведомлений: непрочитанное — акцентной полосой слева, как у алертов */ .ntf-row{align-items:flex-start;cursor:default} .ntf-row.unread{border-left:calc(var(--bw) * 3) solid var(--acc)} .ntf-body{flex:1;min-width:0} .ntf-title{font-weight:600;font-size:15px} /* перевод строки в шаблоне сообщения — значимый, текст свёрстан абзацами */ .ntf-text{color:var(--txt);font-size:14px;margin-top:6px;white-space:pre-line} .ntf-fine{color:var(--mut);font-size:11px;margin-top:8px;line-height:1.35} .ntf-meta{color:var(--mut);font-size:12px;margin-top:8px} /* кто играл — сисадмин видит, кому возвращать минуты, не открывая игру */ .alert-player{color:var(--txt);font-size:12px;margin-top:6px} /* форма компенсации внутри строки алерта */ .alert-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .alert-actions .btn{background:rgb(var(--lift) / .1);border:var(--bw) solid rgb(var(--lift) / .18)} @media(hover:hover){ .alert-actions .btn:hover{background:rgb(var(--lift) / .18)} } .compensate-box{margin-top:10px} .compensate-form{display:flex;flex-direction:column;gap:8px; background:var(--bg2);border:var(--bw) solid var(--line);border-radius:calc(12px * var(--r-k));padding:12px} .compensate-form label{font-size:12px} .compensate-form input,.compensate-form textarea{width:100%;min-width:0;padding:9px;font-size:14px; background:rgb(var(--lift) / .06);border:var(--bw) solid rgb(var(--lift) / .18);color:var(--txt);border-radius:calc(10px * var(--r-k))} .compensate-form textarea{resize:vertical;font-family:inherit;line-height:1.4} /* история движений баланса */ .wtx-row{align-items:center} .wtx-amount{text-align:right;font-weight:700;font-size:15px;white-space:nowrap;display:flex;flex-direction:column;gap:2px} .wtx-amount.plus{color:var(--goal)} .wtx-amount.minus{color:var(--mut)} .wtx-after{font-weight:400;font-size:11px;color:var(--mut)} /* кнопка «Видео» в таблице «Активность логи» — компактнее обычной btn-sm */ .log-video-btn{padding:4px 12px;font-size:12px;background:rgb(var(--lift) / .1);border:var(--bw) solid rgb(var(--lift) / .18)} @media(hover:hover){ .log-video-btn:hover{background:rgb(var(--lift) / .18)} } /* Полоска активного клуба над клубозависимыми экранами сисадмина (см. mountClubBar в app.js). Чипы — те же .role-chip, что у фильтра ролей: отдельный визуальный язык для «того же действия» тут ни к чему. */ .club-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0; margin:0 0 16px;padding:10px 12px; background:var(--bg2);border:var(--bw) solid var(--line);border-radius:calc(14px * var(--r-k)); } .club-bar-label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em} .club-bar-chips{display:flex;gap:8px;flex-wrap:wrap;min-width:0} .club-bar .role-chip{font-size:13px;padding:6px 12px} /* готовые интервалы под полями дат («Сегодня», «Неделя», «30 дней» …) — те же пилюли, что у фильтра ролей, только мельче: это не самостоятельный фильтр, а быстрый способ подставить период в поля выше */ .range-presets{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px} .card .range-presets{margin:10px 0 0} .preset-chip{ padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;font-size:12px;font-weight:600; border:var(--bw) solid var(--line);background:var(--card);color:var(--mut); transition:background .12s,color .12s,border-color .12s; } .preset-chip:hover{color:var(--txt);border-color:var(--acc)} .preset-chip.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)} /* выбор темы в «Моих данных» (см. renderThemePick в app.js). Кружок слева — не украшение: он показывает фон и акцент темы, поэтому выбирают по нему, а не по названию */ .theme-pick{ display:flex;flex-direction:column;gap:8px; margin:14px 0 0;padding-top:14px;border-top:var(--bw) solid var(--line); } .theme-pick-label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em} .theme-pick-row{display:flex;gap:8px;flex-wrap:wrap} .theme-opt{ display:inline-flex;align-items:center;gap:8px; padding:5px 14px 5px 5px;border-radius:var(--r-pill);cursor:pointer; font-size:13px;font-weight:600; border:var(--bw) solid var(--line);background:var(--card);color:var(--mut); transition:color .12s,border-color .12s; } .theme-opt:hover{color:var(--txt);border-color:var(--acc)} .theme-opt.on{color:var(--txt);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)} .theme-swatch{ width:24px;height:24px;border-radius:50%;flex:none; border:var(--bw) solid rgb(var(--lift) / .2); } /* Телефон: две строки — сверху период, снизу выпадающие списки. Раньше поля дат стояли на flex:1 1 0 (базис — ноль), а списки шли по содержимому, и вчетвером всё оставалось в ОДНОЙ строке: списки забирали ~330px, датам доставались считанные пиксели, и «29 Jul» лез из-под «Все действия». Теперь базис у каждого — половина строки, поэтому пара дат заполняет первую, пара списков переносится на вторую. Шрифт полей остаётся 16px (меньше — и iOS зумит страницу при фокусе), горизонтальные отступы режем. Кнопка «Показать» — своей строкой. */ @media(max-width:560px){ .filters-row .filter-date{flex:1 1 calc(50% - 8px);min-width:0;gap:4px} .filters-row .filter-date input{width:100%;min-width:0;padding:8px 4px} .filters-row .filter-select{flex:1 1 calc(50% - 8px);min-width:0;width:auto} #view-stats .filters-row .btn{flex:1 1 100%;margin-top:2px} } .log-item{align-items:flex-start} /* верхняя строка: дата/время + чип характера действия */ .log-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .log-when{font-weight:600;font-size:15px} .log-action{font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap; background:rgb(var(--lift) / .1);border:var(--bw) solid rgb(var(--lift) / .16);color:#dfe7ff} .log-action--record_start{background:rgba(20,119,63,.28);border-color:rgba(46,194,122,.4);color:var(--ok-t)} .log-action--record_stop{background:rgba(224,88,78,.16);border-color:rgba(224,88,78,.4);color:var(--danger-t)} .log-action--topup{background:rgba(215,170,40,.18);border-color:rgba(215,170,40,.4);color:var(--warn-t)} /* попытка — приглушённо, отказ — тревожно: в логе они должны читаться врозь, иначе три статуса одного действия сливаются в одно жёлтое пятно */ .log-action--topup_try{background:rgba(215,170,40,.10);border-color:rgba(215,170,40,.28);color:#cdbc8c} .log-action--topup_failed{background:rgba(224,88,78,.20);border-color:rgba(224,88,78,.5);color:var(--danger-t)} /* просмотр и скачивание — синим: это не про деньги и не про запись, а про то, что человек делает со ГОТОВЫМ архивом */ /* уточнение под чипом действия — у скачивания это ракурс («Сверху»/«Сбоку»). Отдельной колонки не заводим: заполнено оно у одного вида событий из шести, а таблица и без того на восемь столбцов */ .log-note{font-size:11px;color:var(--mut);margin-top:3px;white-space:nowrap} .log-action--watch{background:rgba(78,163,224,.16);border-color:rgba(78,163,224,.4);color:#9ecbff} .log-action--download{background:rgba(78,163,224,.24);border-color:rgba(78,163,224,.5);color:#bfe0ff} /* нижняя строка — нежирным, приглушённым: имя, телефон, клуб, место */ .log-sub{color:var(--mut);font-size:12px;font-weight:400;margin-top:4px} /* фильтр по дате в «Активность логи» */ .log-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)} .log-date input{width:auto} /* сисадмин: база пользователей */ .user-row{cursor:pointer} .user-edit-box{max-width:440px;width:92vw} .user-edit-games{max-height:220px;overflow-y:auto;margin-top:12px;border-top:var(--bw) solid rgb(var(--lift) / .1)} /* сисадмин: привязка стола — сложнее одной строки текста (3 select'а), поэтому не горизонтальный .rec-item, а карточка с полями в столбик */ .sysadmin-row{flex-direction:column;align-items:stretch;cursor:default;gap:12px;min-width:0} .sysadmin-fields{display:flex;gap:10px;flex-wrap:wrap;min-width:0} .sysadmin-fields label{flex:1;min-width:130px;font-size:12px} /* min-width:0 обязателен: у