/* clients.css — личный кабинет в стиле клиента drokclient; токены темы из /css/style.css */

:root{
  --c-bg:var(--bg);
  --c-surface:var(--surface);
  --c-surface-2:var(--surface-2);
  --c-surface-hover:var(--surface-hover);
  --c-line:var(--border);
  --c-line-strong:var(--border-strong);
  --c-text:var(--text);
  --c-muted:var(--text-muted);
  --c-faint:var(--text-faint);
  --c-accent:var(--accent);
  --c-accent-2:var(--accent-2);
  --c-accent-strong:var(--accent-strong);
  --c-on-accent:var(--accent-contrast);
  --c-good:var(--success);
  --c-danger:var(--danger);
  --c-warning:var(--warning);
  --c-icon:var(--icon-color);
  --c-shadow-sm:var(--shadow-sm);
  --c-shadow-md:var(--shadow-md);
  --c-shadow-lg:var(--shadow-lg);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --sb-collapsed:76px; --sb-expanded:264px;
  --header-h:76px;
  /* значения перезаписываются из /api/site-settings через theme.js */
  --site-blur:18px;
  --site-bg-blur:8px;
}

*{ box-sizing:border-box; }

/* ---------- Оболочка ---------- */
.client-app{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--sb-expanded) 1fr;
  background:
    radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--c-accent) 9%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, color-mix(in srgb, var(--c-accent-2) 6%, transparent), transparent 55%),
    var(--c-bg);
  color:var(--c-text);
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1);
}
.client-app.sidebar-collapsed{ grid-template-columns: var(--sb-collapsed) 1fr; }

#sidebar-overlay{
  display:none;
  position:fixed; inset:0; z-index:39;
  background:rgba(5,9,16,.55);
  backdrop-filter:blur(var(--site-blur,2px));
  -webkit-backdrop-filter:blur(var(--site-blur,2px));
  opacity:0; transition:opacity .22s ease;
}
.client-app.sidebar-open #sidebar-overlay{ display:block; opacity:1; }

/* ---------- Сайдбар ---------- */
.client-sidebar{
  position:sticky; top:0; height:100vh; z-index:40;
  display:flex; flex-direction:column;
  padding:18px 14px 16px;
  border-right:1px solid var(--c-line);
  background:color-mix(in srgb, var(--c-bg) 88%, var(--c-surface) 12%);
  backdrop-filter:blur(var(--site-blur,18px));
  -webkit-backdrop-filter:blur(var(--site-blur,18px));
  overflow:hidden;
}

.sidebar-toggle-row{
  display:flex; align-items:center; gap:12px;
  min-height:38px; width:100%; margin-bottom:8px; padding:0 13px;
  border:1px solid transparent; border-radius:11px;
  background:transparent; color:var(--c-muted); font-size:13.5px; cursor:pointer;
  white-space:nowrap; overflow:hidden;
}
.sidebar-toggle-row:hover{ background:var(--c-surface-hover); color:var(--c-text); }
.sidebar-toggle-icon{ width:14px; height:14px; flex:0 0 14px; --icon-tint:var(--c-muted); transform:rotate(180deg); transition:transform .2s ease; }
.sidebar-toggle-row:hover .sidebar-toggle-icon{ --icon-tint:var(--c-accent); }
.sidebar-toggle-label{ overflow:hidden; text-overflow:ellipsis; }

.client-brand{
  display:flex; align-items:center; gap:12px;
  padding:6px 8px 20px; min-width:0;
}
.brand-mark{
  width:42px; height:42px; flex:0 0 42px; border-radius:13px;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg, var(--c-accent), var(--c-good));
  box-shadow:0 8px 22px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.brand-mark img{ width:23px; height:23px; filter:none !important; opacity:.95; }
.client-brand strong{ display:block; font-size:16px; letter-spacing:.11em; white-space:nowrap; }
.client-brand span{ display:block; color:var(--c-muted); font-size:11px; letter-spacing:.15em; margin-top:3px; white-space:nowrap; }
.client-brand > div:last-child{ min-width:0; overflow:hidden; transition:opacity .16s ease, width .2s ease; }

.client-user{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:11px 12px; padding:12px; margin-bottom:16px;
  border:1px solid var(--c-line); border-radius:var(--r-lg);
  background:var(--c-surface); box-shadow:var(--c-shadow-sm);
  border-color:color-mix(in srgb, var(--role-color,#8b9bb4) 30%, var(--c-line));
}
.user-topline{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:12px;
  display:grid; place-items:center; font-weight:800; font-size:14px;
  background:linear-gradient(135deg, var(--c-accent), var(--c-good));
  color:var(--c-on-accent);
}
.user-status{ display:none; }
.user-copy{ grid-column:1/-1; min-width:0; }
.user-copy b, .user-copy span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-copy b{ font-size:14.5px; }
.user-copy span{ font-size:12px; color:var(--c-muted); margin-top:2px; }
.sidebar-role-badge{
  --role-color:#8b9bb4; grid-column:1/-1;
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:28px; padding:5px 10px; border-radius:9px;
  color:var(--role-color);
  background:color-mix(in srgb, var(--role-color) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--role-color) 42%, transparent);
  font-size:12px; font-weight:800; letter-spacing:.03em;
}
.sidebar-role-badge .role-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--role-color); box-shadow:0 0 9px var(--role-color); flex:0 0 7px;
}

.client-nav{ display:grid; gap:4px; overflow-y:auto; overflow-x:hidden; padding-right:2px; }
.nav-item{
  position:relative; min-height:46px; border:1px solid transparent; border-radius:12px;
  background:transparent; display:flex; align-items:center; gap:13px; padding:0 13px;
  color:var(--c-muted); font-size:14.5px; text-align:left; white-space:nowrap; overflow:hidden;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.nav-item:hover{ color:var(--c-text); background:var(--c-surface-hover); transform:translateX(2px); }
.nav-item.active{
  color:var(--c-text);
  background:linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 85%);
  box-shadow:inset 3px 0 0 var(--c-accent);
}
.nav-item.active span:last-child{ font-weight:700; }
.nav-item .nav-icon{ transform:none; }
.nav-item span:last-child{ overflow:hidden; text-overflow:ellipsis; opacity:1; transition:opacity .14s ease; }
.nav-item[hidden]{ display:none !important; }
/* заголовки групп меню: «Участие», «Работа», «Ещё»; в свёрнутом меню — тонкая черта */
.nav-group-title{ padding:12px 12px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); flex-shrink:0; }
.nav-group-title:first-child{ padding-top:2px; }
.nav-group-title[hidden]{ display:none !important; }
.client-app.sidebar-collapsed .nav-group-title{ font-size:0; padding:0; height:1px; margin:8px 14px; background:var(--c-line); }
.client-app.sidebar-collapsed .nav-group-title:first-child{ display:none; }
/* видимый фокус с клавиатуры для пунктов и кнопок сайдбара */
.nav-item:focus-visible, .sidebar-action:focus-visible, .sidebar-toggle-row:focus-visible{
  outline:2px solid color-mix(in srgb, var(--c-accent) 70%, transparent); outline-offset:2px;
}

.sidebar-bottom{ margin-top:auto; padding-top:10px; display:grid; gap:7px; }
.sidebar-action{
  min-height:42px; border:1px solid var(--c-line); border-radius:11px;
  background:var(--c-surface); color:var(--c-text);
  display:flex; align-items:center; gap:11px; padding:0 12px; cursor:pointer; white-space:nowrap; overflow:hidden;
}
.sidebar-action:hover{ border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.sidebar-action b{ margin-left:auto; font-size:11px; color:var(--c-muted); font-weight:700; }
.sidebar-action.danger{ color:var(--c-danger); }
.sidebar-action.danger:hover{ border-color:color-mix(in srgb, var(--c-danger) 45%, var(--c-line)); }

/* свёрнутый сайдбар на десктопе — полоса иконок */
.client-app.sidebar-collapsed .client-brand > div:last-child,
.client-app.sidebar-collapsed .user-copy,
.client-app.sidebar-collapsed .sidebar-role-badge,
.client-app.sidebar-collapsed .nav-item span:last-child,
.client-app.sidebar-collapsed .sidebar-action span:not(.nav-icon),
.client-app.sidebar-collapsed .sidebar-action b{
  display:none;
}
.client-app.sidebar-collapsed .client-sidebar{ padding-left:12px; padding-right:12px; }

.client-app.sidebar-collapsed .client-user{
  width:100%; min-height:68px; padding:9px 6px;
  border-radius:18px 11px 18px 11px;
  border-left-color:color-mix(in srgb, var(--role-color,#8b9bb4) 48%, var(--c-line));
  border-right-color:color-mix(in srgb, var(--c-accent) 28%, var(--c-line));
  box-shadow:8px 10px 22px color-mix(in srgb, var(--c-bg) 55%, transparent), inset 1px 0 0 color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.client-app.sidebar-collapsed .client-user .avatar{ width:44px; height:44px; border-radius:14px 9px 14px 9px; font-size:15px; }
.client-app.sidebar-collapsed .user-topline{ justify-content:center; }
.client-app.sidebar-collapsed .nav-item{ justify-content:center; padding:0; }
.client-app.sidebar-collapsed .sidebar-action{ justify-content:center; padding:0; }
.client-app.sidebar-collapsed .sidebar-collapse-btn .ui-icon{ transform:rotate(180deg); }

/* ---------- Шапка ---------- */
.client-main{ min-width:0; width:100%; padding:0 0 64px clamp(18px,3vw,46px); }
.client-header{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  min-height:var(--header-h);
  padding:16px 0;
  background:color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter:blur(var(--site-blur,14px));
  -webkit-backdrop-filter:blur(var(--site-blur,14px));
}
.header-left{ display:flex; align-items:center; gap:14px; min-width:0; }
#menu-toggle{
  display:none; width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  border:1px solid var(--c-line); background:var(--c-surface); align-items:center; justify-content:center; cursor:pointer;
}
.client-header > div:first-child > span, #tab-kicker{
  font-size:10px; letter-spacing:.18em; color:var(--c-accent); font-weight:800;
}
.client-header h1{ font-size:clamp(22px,2.6vw,30px); line-height:1.1; margin:6px 0 4px; }
.client-header p{ font-size:12.5px; color:var(--c-muted); margin:0; max-width:56ch; }
.header-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.sync-state{ font-size:10.5px; color:var(--c-muted); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.sync-state i{ width:7px; height:7px; border-radius:50%; background:var(--c-good); box-shadow:0 0 10px var(--c-good); }
body.syncing .sync-state i{ background:var(--c-accent); animation:c-pulse 1s infinite; }
@keyframes c-pulse{ 50%{ opacity:.3; transform:scale(.7); } }
.icon-btn{
  width:40px; height:40px; border:1px solid var(--c-line); background:var(--c-surface);
  border-radius:12px; display:grid; place-items:center; cursor:pointer;
}
.icon-btn:hover{ border-color:color-mix(in srgb, var(--c-accent) 50%, var(--c-line)); box-shadow:0 0 18px color-mix(in srgb, var(--c-accent) 14%, transparent); }
.icon-refresh:hover .ui-icon{ animation:c-spin .6s ease; }
@keyframes c-spin{ to{ transform:rotate(180deg); } }

/* ---------- Вкладки / разделы ---------- */
/* обзор виден до загрузки js */
#tab-overview{display:block;}
/* без id-селектора: иначе его специфичность перебивала .tab.active на мобильных */

.tab{ display:none; padding-top:14px; }
.tab.active{ display:block; animation:c-tab-in .2s ease; }
@keyframes c-tab-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.alert{
  padding:13px 16px; border-radius:var(--r-md); margin-bottom:16px;
  background:color-mix(in srgb, var(--c-danger) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c-danger) 35%, transparent);
  color:var(--c-danger); font-size:12px;
}
.hidden{ display:none !important; }

/* ---------- Приветствие ---------- */
.welcome-card{
  position:relative; overflow:hidden;
  border:1px solid var(--c-line); border-radius:var(--r-xl);
  background:
    radial-gradient(480px 220px at 88% 12%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 65%),
    linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
  box-shadow:var(--c-shadow-lg);
  padding:30px 32px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.welcome-card > div:first-child > span{ font-size:10px; letter-spacing:.18em; color:var(--c-accent); font-weight:800; }
.welcome-card h2{ font-size:clamp(22px,3vw,32px); margin:10px 0 8px; }
.welcome-card p{ font-size:13px; color:var(--c-muted); margin:0 0 4px; }
.welcome-symbol{
  width:96px; height:96px; flex:0 0 96px; border-radius:28px;
  border:1px solid var(--c-line); display:grid; place-items:center;
  background:color-mix(in srgb, var(--c-accent) 8%, transparent);
}
.welcome-symbol img{ width:46px; height:46px; filter:none !important; }

.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.metric-grid > div{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:18px; transition:border-color .18s ease, transform .18s ease;
}
.metric-grid > div:hover{ border-color:color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); transform:translateY(-2px); }
.metric-grid span{ display:block; color:var(--c-muted); font-size:10.5px; letter-spacing:.02em; }
.metric-grid b{ display:block; font-size:26px; margin-top:8px; }

.content-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.wide-panel{ grid-column:1/-1; }

/* ---------- Панель ---------- */
.panel{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--c-shadow-sm); margin-bottom:14px;
}
.panel > span{ font-size:10px; letter-spacing:.16em; color:var(--c-accent); font-weight:800; }
.panel h2, .panel h3{ margin:8px 0 4px; }
.panel h2{ font-size:21px; }
.panel h3{ font-size:16px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.panel-head h2, .panel-head h3{ margin-top:2px; }
.panel-head p{ margin:4px 0 0; }
.panel-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.text-btn{
  border:1px solid var(--c-line); background:var(--c-surface-2); color:var(--c-text);
  border-radius:10px; padding:9px 13px; font-size:11px; cursor:pointer; white-space:nowrap;
}
.text-btn:hover{ border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); color:var(--c-accent); }
.danger-text{ color:var(--c-danger) !important; }
.count{ font-size:19px; color:var(--c-accent); font-weight:700; }

.brief{ display:grid; }
.brief-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--c-line); font-size:11.5px;
}
.brief-row:last-child{ border-bottom:0; }
.brief-row span{ color:var(--c-muted); }
.list{ display:grid; }
.muted{ color:var(--c-muted); font-size:11.5px; line-height:1.6; }

/* ---------- Панель инструментов / фильтры ---------- */
.toolbar{ display:flex; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar input{ max-width:380px; }
.filters{ display:flex; gap:6px; flex-wrap:wrap; }
.filters button{
  border:1px solid var(--c-line); background:var(--c-surface-2); color:var(--c-muted);
  border-radius:10px; padding:9px 13px; font-size:11px; cursor:pointer;
}
.filters button:hover{ color:var(--c-text); }
.filters button.active{
  border-color:var(--c-accent); color:var(--c-accent);
  background:color-mix(in srgb, var(--c-accent) 10%, transparent);
}

/* ---------- Формы ---------- */
input, select, textarea{
  width:100%; height:42px; border:1px solid var(--c-line); background:var(--input-bg);
  color:var(--c-text); border-radius:11px; padding:0 12px; outline:0; font-size:12.5px;
  font-family:inherit;
}
textarea{ height:auto; padding:10px 12px; resize:vertical; min-height:88px; }
input:focus, select:focus, textarea:focus{
  border-color:var(--c-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.form-grid label{ font-size:10.5px; color:var(--c-muted); display:block; }
.form-grid input, .form-grid select, .form-grid textarea{ margin-top:6px; }

/* нативные контролы (включая календарь) следуют теме */
select, input[type="date"], input[type="datetime-local"], input[type="time"]{
  color-scheme:dark;
  accent-color:var(--c-accent);
}
html[data-theme="light"] select, html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="datetime-local"], html[data-theme="light"] input[type="time"]{ color-scheme:light; }
html[data-theme="military"] select, html[data-theme="military"] input[type="date"], html[data-theme="military"] input[type="datetime-local"], html[data-theme="military"] input[type="time"]{ color-scheme:dark; }
select option, select optgroup{ background:var(--c-surface); color:var(--c-text); }
select[multiple]{ min-height:132px; padding:9px; }
.form-grid .wide{ grid-column:1/-1; }

.check{
  display:inline-flex; align-items:center; gap:11px; font-size:12px; color:var(--c-text);
  margin:14px 0; cursor:pointer; user-select:none; -webkit-user-select:none;
}
.check input[type=checkbox]{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.check .box{
  width:25px; height:25px; flex:0 0 25px; border-radius:8px;
  border:2px solid var(--c-line-strong); background:var(--input-bg);
  display:grid; place-items:center; transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.check .tick{
  width:22px; height:22px; background:var(--c-on-accent);
  -webkit-mask:url(/icons/check.svg) center/contain no-repeat; mask:url(/icons/check.svg) center/contain no-repeat;
  transform:scale(0); transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.check:hover .box{ border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-line-strong)); }
.check input[type=checkbox]:focus-visible ~ .box{ outline:2px solid var(--c-accent); outline-offset:2px; }
.check input[type=checkbox]:checked ~ .box{
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent);
}
.check input[type=checkbox]:checked ~ .box .tick{ transform:scale(1); }
.check input[type=checkbox]:disabled ~ .box{ opacity:.5; }
.check input[type=checkbox]:disabled ~ *{ cursor:not-allowed; }
.check-label{ line-height:1.35; }

.primary{
  border:0; background:linear-gradient(135deg, var(--c-accent), var(--c-good)); color:var(--c-on-accent);
  font-weight:800; border-radius:11px; padding:11px 18px; font-size:11px; cursor:pointer;
  box-shadow:0 10px 26px color-mix(in srgb, var(--c-accent) 24%, transparent);
}
.primary:hover{ filter:brightness(1.05); }
.primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.primary.full{ width:100%; }
.judge-only{ display:none; }

.manager-card{
  margin-top:20px; padding:20px; border:1px solid var(--c-line); border-radius:var(--r-lg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 55%);
}
.manager-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }

/* ---------- Таблицы ---------- */
.table-wrap{ overflow:auto; border:1px solid var(--c-line); border-radius:var(--r-md); }
.table-wrap.compact{ margin-top:16px; }
table{ width:100%; border-collapse:collapse; min-width:640px; }
th{
  padding:12px; text-align:left; color:var(--c-muted); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; background:var(--c-surface-2);
  position:sticky; top:0;
}
td{ padding:13px 12px; border-top:1px solid var(--c-line); font-size:11.5px; vertical-align:top; }
tbody tr:hover td{ background:color-mix(in srgb, var(--c-accent) 4%, transparent); }
.status{ display:inline-flex; padding:5px 10px; border-radius:999px; border:1px solid var(--c-line); font-size:9.5px; font-weight:700; }
.status.open{ color:var(--c-good); border-color:color-mix(in srgb, var(--c-good) 40%, var(--c-line)); }
.status.mine{ color:var(--c-accent); border-color:color-mix(in srgb, var(--c-accent) 40%, var(--c-line)); }
.status.closed{ color:var(--c-muted); }
/* статусы закрепления механика за пилотом («Закреплён»/«Не закреплён») */
.status.linked{ color:var(--c-good); background:color-mix(in srgb, var(--c-good) 14%, transparent); border-color:color-mix(in srgb, var(--c-good) 42%, var(--c-line)); }
.status.unlinked{ color:var(--c-muted); background:color-mix(in srgb, var(--c-text) 6%, transparent); }
.action{ border:1px solid var(--c-line); background:var(--c-surface-2); color:var(--c-accent); border-radius:10px; padding:8px 12px; font-size:10.5px; cursor:pointer; }
.action:disabled{ opacity:.4; cursor:not-allowed; color:var(--c-muted); }
.empty{ padding:34px; text-align:center; color:var(--c-muted); font-size:11.5px; }

/* ---------- Судья / секундомер ---------- */
.timer-panel{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.timer-panel > span{ align-self:flex-start; }
.timer-panel .panel-head{ width:100%; margin-bottom:4px; }
.timer-context{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 2px; text-align:left; }
.timer-context label{ font-size:11px; color:var(--c-muted); }
.timer-context select{ margin-top:6px; width:100%; }
.timer-participant-hint{ width:100%; margin:4px 0 0; font-size:10px; color:var(--c-muted); text-align:left; }
.timer-state{
  font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--c-muted);
  border:1px solid var(--c-line); border-radius:999px; padding:5px 11px; align-self:center;
}
.timer-state.running{ color:var(--c-good); border-color:color-mix(in srgb, var(--c-good) 45%, var(--c-line)); }
.timer-ring{ position:relative; width:min(240px,64vw); aspect-ratio:1/1; margin:22px auto 8px; }
.timer-ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.timer-ring-track{ fill:none; stroke:var(--c-line); stroke-width:8; }
.timer-ring-progress{
  fill:none; stroke:var(--c-accent); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:565.48; stroke-dashoffset:565.48; transition:stroke-dashoffset .12s linear;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 55%, transparent));
}
.timer-face{
  position:absolute; inset:14px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:var(--c-surface); box-shadow:inset 0 2px 12px rgba(0,0,0,.18);
}
.timer-face b{ font:700 clamp(22px,4vw,30px)/1 ui-monospace, Consolas, monospace; color:var(--c-accent); letter-spacing:.01em; }
.timer-face small{ font-size:10px; color:var(--c-muted); }
.timer-buttons{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.timer-buttons button{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--c-line); background:var(--c-surface-2); color:var(--c-text);
  border-radius:10px; padding:10px 16px; font-size:11px; cursor:pointer;
}
.timer-buttons button .ui-icon{ width:14px; height:14px; --icon-tint:currentColor; }
.timer-buttons button:first-child{ border-color:var(--c-accent); color:var(--c-accent); }
.timer-buttons button:disabled{ opacity:.4; cursor:not-allowed; }
.timer-buttons button:not(:disabled):hover{ border-color:color-mix(in srgb, var(--c-accent) 50%, var(--c-line)); }
.laps{ text-align:left; margin-top:18px; max-height:220px; overflow:auto; width:100%; }
.lap{ display:flex; justify-content:space-between; padding:9px 4px; border-top:1px solid var(--c-line); font-size:11.5px; }

/* ---------- Права ---------- */
.rights-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.rights-category{ border:1px solid var(--c-line); background:var(--c-surface-2); border-radius:var(--r-lg); padding:18px; }
.rights-category > span{ font-size:9px; letter-spacing:.1em; color:var(--c-accent); font-weight:800; }
.rights-category h3{ margin:7px 0 10px; }
.perm{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--c-line); gap:15px; }
.perm b{ display:block; font-size:10.5px; }
.perm small{ display:block; color:var(--c-muted); font-size:8.5px; margin-top:3px; }
.switch{ width:38px; height:21px; border-radius:20px; background:color-mix(in srgb, var(--c-muted) 30%, transparent); padding:3px; flex:0 0 auto; }
.switch i{ display:block; width:15px; height:15px; border-radius:50%; background:var(--c-muted); transition:transform .16s ease, background .16s ease; }
.switch.on{ background:color-mix(in srgb, var(--c-good) 26%, transparent); }
.switch.on i{ background:var(--c-good); transform:translateX(17px); }

/* ---------- Дроны ---------- */
.drone-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.drone{
  border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-surface-2);
  padding:18px; transition:border-color .18s ease, transform .18s ease;
}
.drone:hover{ border-color:color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); transform:translateY(-2px); }
.drone-icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c-accent) 12%, transparent); margin-bottom:12px;
}
.drone-icon img{ width:24px; height:24px; }
.drone b{ font-size:12.5px; }
.drone p{ font-size:10.5px; color:var(--c-muted); margin:5px 0; }

/* ---------- Уведомления ---------- */
.notification-card{
  display:grid; grid-template-columns:42px 1fr auto; gap:14px; align-items:center;
  padding:16px; border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-surface-2);
  margin-bottom:10px;
}
.notification-card.unread{
  border-color:color-mix(in srgb, var(--c-danger) 55%, var(--c-line));
  box-shadow:0 8px 24px color-mix(in srgb, var(--c-danger) 10%, transparent);
}
.notification-card.unread .notification-icon{
  background:color-mix(in srgb, var(--c-danger) 16%, transparent);
  color:var(--c-danger);
  position:relative;
}
.notification-card.unread .notification-icon::after{
  content:'';
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  right:-2px;top:-2px;
  background:var(--c-danger);
  box-shadow:0 0 0 3px var(--c-surface-2);
}
.notification-icon{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.notification-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.notification-body b{ font-size:12.5px; }
.notification-body small{ color:var(--c-muted); font-size:10px; }
.notification-actions{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
#notifications-list{ max-height:calc(100vh - 320px); overflow:auto; padding-right:2px; }

/* ---------- Иконки (mask, цвет по теме) ---------- */
.nav-icon, .ui-icon{
  width:22px; height:22px; display:inline-block; flex:0 0 22px;
  background:var(--icon-tint,var(--c-icon));
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
  transition:background-color .18s ease, filter .18s ease;
}
/* свой акцентный цвет иконки у каждого пункта меню, цикл по палитре темы */
.nav-item:nth-of-type(1) .nav-icon{ --icon-tint:var(--c-accent); }
.nav-item:nth-of-type(2) .nav-icon{ --icon-tint:var(--c-good); }
.nav-item:nth-of-type(3) .nav-icon{ --icon-tint:var(--c-accent-2); }
.nav-item:nth-of-type(4) .nav-icon{ --icon-tint:var(--c-danger); }
.nav-item:nth-of-type(5) .nav-icon{ --icon-tint:var(--c-accent-strong); }
.nav-item:nth-of-type(6) .nav-icon{ --icon-tint:var(--c-accent-2); }
.nav-item:nth-of-type(7) .nav-icon{ --icon-tint:var(--c-good); }
.nav-item:nth-of-type(8) .nav-icon{ --icon-tint:var(--c-warning); }
.nav-item:nth-of-type(9) .nav-icon{ --icon-tint:var(--c-accent-strong); }
.nav-item:nth-of-type(10) .nav-icon{ --icon-tint:var(--c-danger); }
.nav-item:nth-of-type(11) .nav-icon{ --icon-tint:var(--c-accent); }
.nav-item:nth-of-type(12) .nav-icon{ --icon-tint:var(--c-good); }
.nav-item:nth-of-type(13) .nav-icon{ --icon-tint:var(--c-warning); }
.nav-item:nth-of-type(14) .nav-icon{ --icon-tint:var(--c-accent-2); }
.nav-item:nth-of-type(15) .nav-icon{ --icon-tint:var(--c-accent-strong); }
/* в покое иконка приглушена, при наведении и на активном пункте — полный цвет со свечением */
.nav-item .nav-icon{ transform:none; opacity:.68; filter:saturate(.45); transition:background-color .18s ease, filter .18s ease, opacity .18s ease; }
.nav-item:hover .nav-icon{ opacity:1; filter:saturate(1); }
.nav-item.active .nav-icon{ opacity:1; filter:saturate(1) drop-shadow(0 0 8px color-mix(in srgb, var(--icon-tint) 65%, transparent)); }
.sidebar-action .nav-icon{ --icon-tint:var(--c-muted); }
.sidebar-action:hover .nav-icon{ --icon-tint:var(--c-accent); }
.icon-refresh .ui-icon{ --icon-tint:var(--c-accent); }

/* ---------- Бейдж роли ---------- */
.role-badge{
  --role-color:#8b9bb4; display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:7px 13px; border-radius:999px; line-height:1;
  color:var(--role-color);
  background:linear-gradient(135deg, color-mix(in srgb, var(--role-color) 20%, transparent), color-mix(in srgb, var(--role-color) 7%, transparent));
  border:1px solid color-mix(in srgb, var(--role-color) 45%, transparent);
  font-weight:800; letter-spacing:.02em; font-size:11.5px;
}
.role-badge::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--role-color); box-shadow:0 0 10px var(--role-color); }

/* ---------- Тост ---------- */
.toast{
  position:fixed; right:22px; bottom:22px; z-index:60;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:13px;
  padding:13px 18px; font-size:12px; box-shadow:var(--c-shadow-lg);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease;
}
.toast.show{ opacity:1; transform:none; }

/* пока профиль не загружен, пункты меню с правами скрыты */
.auth-loading [data-perm], .auth-loading [data-any],
.auth-loading .nav-item[data-tab=judge], .auth-loading .nav-item[data-tab=notifications],
.auth-loading [data-perm-section]{ display:none !important; }
/* до загрузки прав пункты «Работы» скрыты — скрыт и её заголовок; дальше заголовки ведёт syncNavGroups() */
.auth-loading .nav-group-title[data-nav-group=work]{ display:none !important; }

/* плавная смена темы */
.client-app, .client-sidebar, .client-main, .client-user, .panel, .welcome-card,
.metric-grid>div, .rights-category, .drone, .notification-card, .table-wrap, th, td,
input, select, textarea, .text-btn, .filters button, .action, .icon-btn, .sidebar-action,
.nav-item, .role-badge, .sidebar-role-badge, .avatar, .welcome-symbol, .manager-card,
.notification-icon, .status, .switch, .primary, .toast, .timer-face, .timer-ring-track, .timer-state{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease,
             box-shadow .3s ease, background .3s ease, filter .3s ease;
}

/* ==================== Адаптив ==================== */
@media (max-width:1180px){
  :root{ --sb-expanded:230px; }
  .content-grid, .rights-grid{ grid-template-columns:1fr; }
  .drone-grid{ grid-template-columns:repeat(2,1fr); }
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:901px){
  .sidebar-collapse-btn{ display:flex; }
}

@media (max-width:900px){
  .client-app{ display:block; }
  .client-app.sidebar-collapsed{ grid-template-columns:none; }
  .client-sidebar{
    position:fixed; top:0; left:0; height:100vh; width:min(300px,84vw); z-index:45;
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--c-line); box-shadow:var(--c-shadow-lg);
  }
  .client-app.sidebar-open .client-sidebar{ transform:translateX(0); }
  .client-app.sidebar-collapsed .client-sidebar{ padding-left:14px; padding-right:14px; }
  .client-app.sidebar-collapsed .client-brand > div:last-child,
  .client-app.sidebar-collapsed .user-copy,
  .client-app.sidebar-collapsed .sidebar-role-badge,
  .client-app.sidebar-collapsed .nav-item span:last-child,
  .client-app.sidebar-collapsed .sidebar-action span:not(.nav-icon),
  .client-app.sidebar-collapsed .sidebar-action b{ display:revert; }
  .client-app.sidebar-collapsed .client-user{ grid-template-columns:auto 1fr; justify-items:stretch; padding:12px; }
  .client-app.sidebar-collapsed .nav-item, .client-app.sidebar-collapsed .sidebar-action{ justify-content:flex-start; padding:0 13px; }
  #menu-toggle{ display:flex; }
  .client-main{ padding:0 16px 48px; }
  .client-header{ flex-wrap:wrap; row-gap:10px; }
  .sync-state{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .timer-context{ grid-template-columns:1fr; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar input{ max-width:none; }
  .welcome-card{ flex-direction:column; align-items:flex-start; padding:22px; }
  .welcome-symbol{ width:64px; height:64px; }
  .welcome-symbol img{ width:32px; height:32px; }
}

@media (max-width:560px){
  .metric-grid{ grid-template-columns:1fr 1fr; }
  .drone-grid{ grid-template-columns:1fr; }
  .notification-card{ grid-template-columns:38px 1fr; }
  .notification-actions{ grid-column:1/-1; justify-content:flex-start; }
  .toast{ left:12px; right:12px; bottom:12px; text-align:center; }
}


/* обзор / аналитика лидеров */
.overview-stats,.self-stats,.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.overview-stat,.self-stat,.analytics-item{padding:13px 14px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-surface-2)}
.overview-stat span,.self-stat span,.analytics-item span{display:block;color:var(--c-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.overview-stat b,.self-stat b,.analytics-item b{display:block;margin-top:5px;font-size:18px}
.analytics-grid{grid-template-columns:repeat(2,1fr)}
.leaderboard-layout .wide-panel{grid-column:1/-1}
@media(max-width:760px){.overview-stats,.self-stats,.analytics-grid{grid-template-columns:1fr}.leaderboard-layout .wide-panel{grid-column:auto}}

/* --- менеджер мероприятий / выравнивание по краю --- */
.client-main{width:100%;max-width:none;min-width:0;overflow-x:hidden;padding-right:0;}
.manager-card{position:relative;}
.event-manager-actions{justify-content:flex-end;margin-top:16px;width:100%;}
.event-manager-actions .primary{margin-left:auto;}

/* --- аналитика таблицы лидеров --- */
.leaderboard-shell{display:flex;flex-direction:column;gap:16px;}
.leaderboard-head{margin-bottom:0;}
.leader-switch{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border:1px solid var(--c-line);background:var(--c-surface-2);border-radius:12px;}
.leader-switch button{border:1px solid transparent;background:transparent;color:var(--c-muted);padding:9px 14px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease;}
.leader-switch button:hover{color:var(--c-text);background:var(--c-surface-hover);}
.leader-switch button.active{color:var(--c-text);background:color-mix(in srgb,var(--c-accent) 16%,var(--c-surface));border-color:color-mix(in srgb,var(--c-accent) 30%,var(--c-line));}
.leader-view{display:none;}
.leader-view.active{display:block;}
.people-grid,.top-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}

/* две вкладки техконтроля («Заявки» / «Механик») в одной панели, переключатель как .leader-switch */
.tech-switch{ margin-bottom:16px; }
.tech-view{ display:none; }
.tech-view.active{ display:block; }
.tech-view .toolbar{ margin-bottom:14px; }
.pilot-mech-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.pilot-mech-card{
  padding:14px; border:1px solid var(--c-line); border-radius:var(--r-md);
  background:var(--c-surface-2); display:flex; flex-direction:column; gap:8px;
  transition:.18s ease;
}
.pilot-mech-card:hover{ border-color:color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); transform:translateY(-1px); }
.pilot-mech-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pilot-mech-head b{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pilot-mech-sub{ font-size:11px; }
.pilot-mech-actions{ display:flex; gap:8px; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--c-line); }
.pilot-mech-actions select{ flex:1 1 140px; min-width:0; }
.person-card,.top-card{border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface-2);padding:16px;cursor:pointer;transition:.18s ease;}
.person-card:hover,.top-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line));}
.person-card .person-head,.top-card .person-head{display:flex;align-items:center;gap:10px;}
.person-avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-accent) 16%,transparent);color:var(--c-accent);font-weight:900;}
.person-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.person-meta div{padding:9px;border:1px solid var(--c-line);border-radius:10px;}
.person-meta span{display:block;font-size:8px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;}
.person-meta b{display:block;margin-top:3px;font-size:12px;}
.top-card{position:relative;overflow:hidden;}
.top-rank{font-size:26px;font-weight:900;color:var(--c-accent);line-height:1;}
.leader-detail{padding:18px;margin-top:2px;}
.panel-subtle{border:1px solid var(--c-line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-surface-2) 72%,transparent);}
.analytics-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:14px;}
.mini-chart{margin-top:14px;min-height:150px;display:flex;align-items:flex-end;gap:7px;padding:16px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface-2);overflow:auto;}
.mini-chart .bar-col{min-width:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:118px;gap:5px;}
.mini-chart .bar{width:18px;min-height:3px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--c-accent),var(--c-accent-2));}
.mini-chart small{font-size:7px;color:var(--c-muted);white-space:nowrap;}
.analytics-table table{min-width:560px;}
.leader-personal{border-top:1px solid var(--c-line);padding-top:18px;}
@media(max-width:900px){.analytics-layout{grid-template-columns:1fr}.leader-switch{width:100%;}.leader-switch button{flex:1}.event-manager-actions{justify-content:stretch}.event-manager-actions .primary{margin-left:0;flex:1}.event-manager-actions .text-btn{flex:0 0 auto}}
.best-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--c-accent) 30%,var(--c-line));border-radius:11px;background:color-mix(in srgb,var(--c-accent) 7%,transparent);font-size:10.5px;color:var(--c-muted)}
.best-row b{color:var(--c-accent);font-size:13px}


/* ---------- Доступность: крупнее шрифт ---------- */
.client-app .client-brand strong{font-size:18px}
.client-app .client-brand span{font-size:13px}
.client-app .sidebar-toggle-row{font-size:15.5px}
.client-app .nav-item{font-size:16.5px}
.client-app .sidebar-action{font-size:15px}
.client-app .sidebar-action b{font-size:13px}
.client-app .user-copy b{font-size:16.5px}
.client-app .user-copy span{font-size:14px}
.client-app .sidebar-role-badge{font-size:14px}
.client-app .client-header h1{font-size:clamp(24px,2.6vw,32px)}
.client-app .client-header p{font-size:14.5px}
.client-app .sync-state{font-size:12.5px}
.client-app .alert{font-size:14px}
.client-app .welcome-card > div:first-child > span{font-size:12px}
.client-app .welcome-card p{font-size:15px}
.client-app .metric-grid > div span{font-size:13px}
.client-app .metric-grid > div b{font-size:22px}
.client-app .panel-head > div > span,.client-app .panel > span{font-size:12px}
.client-app .panel h2{font-size:23px}
.client-app .panel h3{font-size:18px}
.client-app .muted{font-size:13.5px}
.client-app .toolbar input,.client-app input,.client-app select,.client-app textarea{font-size:14.5px}
.client-app .form-grid label{font-size:12.5px}
.client-app .check{font-size:14px}
.client-app button{font-size:13px}
.client-app th{font-size:11px}
.client-app td{font-size:13.5px}
.client-app .status{font-size:11.5px}
.client-app .action{font-size:12.5px}
.client-app .empty{font-size:13.5px}
.client-app .overview-stat span,.client-app .self-stat span,.client-app .analytics-item span{font-size:12px}
.client-app .overview-stat b,.client-app .self-stat b,.client-app .analytics-item b{font-size:20px}
.client-app .leader-switch button{font-size:13px}
.client-app .person-meta span{font-size:10px}
.client-app .person-meta b{font-size:14px}
.client-app .notification-body b{font-size:14.5px}
.client-app .notification-body small{font-size:12px}
.client-app .drone b{font-size:14.5px}
.client-app .drone p{font-size:12.5px}

/* ---------- Профиль / устройства ---------- */
.devices-panel{grid-column:1/-1}
.devices-list{display:grid;gap:10px;margin-top:14px}
.device-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface-2);transition:.18s ease}
.device-card:hover{border-color:color-mix(in srgb,var(--c-accent) 40%,var(--c-line));transform:translateY(-1px)}
.device-card.current{border-color:color-mix(in srgb,var(--c-good) 42%,var(--c-line));background:color-mix(in srgb,var(--c-good) 5%,var(--c-surface-2))}
.device-card.revoked{opacity:.68}
.device-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-accent) 12%,transparent);border:1px solid var(--c-line);color:var(--c-accent)}
.device-icon .ui-icon{width:21px;height:21px}
.device-main{min-width:0}
.device-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.device-title>b{font-size:16px}
.device-platform,.device-current,.device-suspicious,.device-status{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border-radius:999px;border:1px solid var(--c-line);font-size:11px;font-weight:800;letter-spacing:.04em}
.device-platform{color:var(--c-muted)}
.device-current{color:var(--c-good);border-color:color-mix(in srgb,var(--c-good) 35%,var(--c-line));background:color-mix(in srgb,var(--c-good) 9%,transparent)}
.device-suspicious{color:var(--c-danger);border-color:color-mix(in srgb,var(--c-danger) 45%,var(--c-line));background:color-mix(in srgb,var(--c-danger) 12%,transparent)}
.device-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;color:var(--c-muted);font-size:13px}
.device-meta b{color:var(--c-text);font-weight:700}
.device-id{display:block;margin-top:7px;color:var(--c-faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.device-status.online{color:var(--c-good);border-color:color-mix(in srgb,var(--c-good) 35%,var(--c-line))}
.device-status.offline{color:var(--c-muted)}

/* ---------- Телефон ---------- */
html,body{min-height:100%;overflow-x:hidden}
@media(max-width:900px){
  .client-app{min-height:100dvh}
  .client-sidebar{height:100dvh;max-height:100dvh}
  .client-main{padding:0 14px 34px}
  .client-header{min-height:auto;padding:12px 0}
  .client-header h1{font-size:24px}
  .client-header p{font-size:14px}
  .header-actions{margin-left:auto}
  .panel{padding:17px}
  .welcome-card{padding:20px}
  .metric-grid{gap:9px}
  .metric-grid > div{padding:14px}
  .device-card{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .device-actions{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .device-meta{gap:8px 14px;font-size:12.5px}
  .device-id{max-width:100%}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:680px}
  .toolbar{gap:8px}
  .toolbar input{min-height:46px}
  .form-grid input,.form-grid select,.form-grid textarea{min-height:46px}
  button,.icon-btn,.sidebar-action,.nav-item{touch-action:manipulation}
}
@media(max-width:560px){
  .client-main{padding-left:10px;padding-right:10px}
  .client-header{gap:8px}
  .header-left{gap:9px}
  #menu-toggle{width:42px;height:42px;flex-basis:42px}
  .client-header h1{font-size:22px}
  .client-header p{font-size:13.5px}
  .welcome-card h2{font-size:24px}
  .welcome-card{border-radius:16px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-grid > div span{font-size:12px}
  .metric-grid > div b{font-size:20px}
  .panel{padding:14px}
  .panel h2{font-size:21px}
  .device-card{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px}
  .device-icon{width:38px;height:38px}
  .device-title>b{font-size:15px}
  .device-meta{display:grid;grid-template-columns:1fr;gap:4px;font-size:12px}
  .device-actions{grid-column:2}
  .device-id{font-size:10px}
}

/* ==================== Единые контролы темы и раскладка профиля/обзора ==================== */
.client-app select,
.client-app input,
.client-app textarea,
.client-app .filters button,
.client-app .leader-switch button,
.client-app .text-btn,
.client-app .primary,
.client-app .icon-btn {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease,
              color .18s ease, transform .18s ease, filter .18s ease;
}

/* нативные выпадающие списки наследуют токены темы */
.client-app select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  cursor:pointer;
  background-color:var(--input-bg);
  background-image:url("/icons/arrow.svg");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:14px 14px;
}
.client-app select:hover { border-color:color-mix(in srgb,var(--c-accent) 38%,var(--c-line)); }
.client-app select:disabled { cursor:not-allowed; opacity:.55; }
.client-app select option,
.client-app select optgroup {
  background:var(--c-surface);
  color:var(--c-text);
}
html[data-theme="light"] .client-app select { color-scheme:light; }
html[data-theme="dark"] .client-app select,
html[data-theme="military"] .client-app select { color-scheme:dark; }

.client-app .text-btn:hover,
.client-app .filters button:hover,
.client-app .leader-switch button:hover { transform:translateY(-1px); }
.client-app .primary:hover { transform:translateY(-1px); }


/* кнопки настроек профиля справа, в цвет темы */
#tab-profile .panel > .primary:not(.full){
  align-self:flex-end;
  margin-left:auto;
}
#tab-profile .panel > .primary{
  color:var(--c-on-accent);
}

/* вкладки на десктопе на всю ширину */
@media (min-width:901px){
  .client-main, .client-main > .tab, .client-main > .alert{
    width:100%;
    max-width:none;
  }
}

/* профиль: все карточки в две колонки */
#tab-profile .content-grid {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-flow:row;
  align-items:stretch;
}
#tab-profile .content-grid > .panel {
  width:100%;
  min-width:0;
  height:100%;
  margin-bottom:0;
}
#tab-profile .devices-panel { grid-column:auto; }
#tab-profile .panel > .form-grid { align-content:start; }
#tab-profile .devices-list { display:grid; gap:10px; }

/* обзор: герой, показатели и четыре равные карточки */
#tab-overview .overview-hero { margin-bottom:14px; }
#tab-overview .overview-hero-copy { min-width:0; }
.overview-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.overview-metric { min-height:112px; display:flex; flex-direction:column; justify-content:center; }
.overview-metric small { display:block; margin-top:7px; color:var(--c-faint); font-size:11px; }
.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.overview-card {
  min-width:0;
  min-height:260px;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
}
.overview-card .panel-head { min-height:62px; }
.overview-card .brief,
.overview-card .list { flex:1; }
.overview-live {
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:7px 10px; border-radius:999px;
  color:var(--c-good);
  background:color-mix(in srgb,var(--c-good) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c-good) 28%,var(--c-line));
  font-size:11px; font-weight:800;
}
.overview-live i { width:7px; height:7px; border-radius:50%; background:var(--c-good); box-shadow:0 0 9px var(--c-good); }
.overview-performance-card .mini-chart { min-height:155px; }
.overview-events-card .list { min-height:150px; }

@media (max-width:1100px) {
  .overview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  #tab-profile .content-grid,
  .overview-grid { grid-template-columns:1fr; }
  .overview-metric { min-height:96px; }
}
@media (max-width:480px) {
  .overview-metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .overview-metric { padding:14px; }
  .overview-metric b { font-size:21px !important; }
}


/* ---------- Читаемость профиля и управление устройствами ---------- */
#tab-profile .brief-row{font-size:13.5px;padding:13px 0}
#tab-profile .brief-row span{font-size:13.5px}
#tab-profile .brief-row b{font-size:15.5px}
#tab-profile .form-grid label{font-size:14.5px}
#tab-profile .form-grid input,#tab-profile .form-grid select,#tab-profile .form-grid textarea{font-size:16.5px}
#tab-profile .check{font-size:16px}
#tab-profile .panel > span{font-size:12px}

/* права: текст крупнее на 2px */
#tab-rights .rights-category > span{font-size:11px}
#tab-rights .rights-category h3{font-size:20px}
#tab-rights .perm b{font-size:12.5px}
#tab-rights .perm small{font-size:10.5px}

/* управление устройствами — отдельная вкладка */
#tab-devices .devices-panel{width:100%;margin-bottom:0}
#tab-devices .device-title>b{font-size:17px}
#tab-devices .device-meta{font-size:14px}
#tab-devices .device-platform,#tab-devices .device-current,#tab-devices .device-suspicious,#tab-devices .device-status{font-size:12px}
#tab-devices .device-id{font-size:12px}
#tab-devices .empty{font-size:15.5px}

@media(max-width:760px){
  #tab-devices .device-card{grid-template-columns:auto minmax(0,1fr)}
}

/* ==================== Контролы по теме: подписи кнопок, стрелки, календари ==================== */
.client-app .primary {
  color: var(--c-text) !important;
  text-shadow: none;
}

/* все действия в цвет темы, без чёрного браузерного по умолчанию */
.client-app button:not(.primary) {
  color: var(--c-text);
}
.client-app button:not(.primary):hover {
  color: var(--c-accent);
}
.client-app .primary .ui-icon,
.client-app .primary .icon,
.client-app .primary svg {
  --icon-tint: var(--c-on-accent);
  color: var(--c-on-accent);
}

/* подписи кнопок в цвет темы, а не браузера */
.client-app button {
  font-family: inherit;
}
.client-app .text-btn,
.client-app .filters button,
.client-app .leader-switch button,
.client-app .action,
.client-app .icon-btn {
  color: var(--c-text);
}
.client-app .text-btn:hover,
.client-app .filters button:hover,
.client-app .leader-switch button:hover,
.client-app .action:hover {
  color: var(--c-accent);
}
.client-app .filters button.active,
.client-app .leader-switch button.active {
  color: var(--c-accent);
}

/* стрелка select — маска в цвет темы, меняется вместе с темой */
.client-app select {
  position: relative;
  background-image: none;
  padding-right: 42px;
}
.client-app select:not([multiple]) {
  --select-arrow-color: var(--c-accent);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow-color) 50%),
    linear-gradient(135deg, var(--select-arrow-color) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 18px,
    calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.client-app select:focus {
  --select-arrow-color: var(--c-accent-strong);
}

/* дата/время в цветах темы; в Chromium/WebKit красим и иконку, Firefox — через color-scheme */
.client-app input[type="date"],
.client-app input[type="datetime-local"],
.client-app input[type="time"] {
  accent-color: var(--c-accent);
  color-scheme: dark;
}
.client-app input[type="date"]::-webkit-calendar-picker-indicator,
.client-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.client-app input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .9;
  cursor: pointer;
  filter: brightness(0) saturate(100%);
}
html[data-theme="light"] .client-app input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .client-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .client-app input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(36%) sepia(96%) saturate(1700%) hue-rotate(204deg) brightness(92%) contrast(92%);
}
html[data-theme="dark"] .client-app input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .client-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .client-app input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(57%) sepia(83%) saturate(2500%) hue-rotate(197deg) brightness(101%) contrast(102%);
}
html[data-theme="military"] .client-app input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="military"] .client-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="military"] .client-app input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(69%) sepia(31%) saturate(850%) hue-rotate(27deg) brightness(91%) contrast(89%);
}
html[data-theme="light"] .client-app input[type="date"],
html[data-theme="light"] .client-app input[type="datetime-local"],
html[data-theme="light"] .client-app input[type="time"] { color-scheme: light; }
html[data-theme="dark"] .client-app input[type="date"],
html[data-theme="dark"] .client-app input[type="datetime-local"],
html[data-theme="dark"] .client-app input[type="time"],
html[data-theme="military"] .client-app input[type="date"],
html[data-theme="military"] .client-app input[type="datetime-local"],
html[data-theme="military"] .client-app input[type="time"] { color-scheme: dark; }

/* ---------- Назначение судей ---------- */
.judge-assignment-manager{grid-column:1/-1}
.judge-assignment-toolbar{align-items:end}
.judge-assignment-add,.judge-assignment-actions{display:flex;align-items:end;gap:8px;min-height:42px}
.judge-assignment-actions{grid-column:1/-1;justify-content:flex-end}
.assignment-list{display:grid;gap:9px;margin-top:14px}
.assignment-card{display:grid;grid-template-columns:minmax(180px,1fr) 34px minmax(180px,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface-2)}
.assignment-person{display:flex;align-items:center;gap:10px;min-width:0}.assignment-person>div{min-width:0}.assignment-person b,.assignment-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assignment-person small{font-size:10px;color:var(--c-muted);margin-top:2px}.assignment-arrow{text-align:center;color:var(--c-accent);font-size:18px;font-weight:900}
.profile-card{display:flex;flex-direction:column;min-height:100%}.profile-card-actions{margin-top:auto;padding-top:18px;display:flex;justify-content:flex-end;align-items:flex-end}.profile-card-actions .primary{width:auto}

/* Судейская информация имеет собственную, отдельную кнопку сохранения. */
.judge-save-actions{margin-top:auto;padding-top:16px;border-top:1px solid var(--c-line);display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%}
.judge-save-caption{margin-right:auto;font-size:11px;color:var(--c-muted);line-height:1.35}
.judge-save-actions .judge-only{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:220px}
@media(max-width:600px){.judge-save-actions{align-items:stretch;flex-direction:column;gap:10px}.judge-save-caption{margin-right:0}.judge-save-actions .judge-only{width:100%;min-width:0}}

/* отступ справа на десктопе, чистый край на мобильных */
.client-main{width:100%;max-width:none;min-width:0;overflow-x:hidden;padding:0 clamp(20px,1.6vw,24px) 64px}
.client-header{margin-right:0;border:1px solid var(--c-line);border-radius:16px 16px 0 0;padding-left:16px;padding-right:16px}
@media(max-width:900px){.client-main{padding:0 12px 48px}.client-header{border-radius:14px 14px 0 0;padding-left:12px;padding-right:12px}.assignment-card{grid-template-columns:1fr auto}.assignment-arrow{display:none}.assignment-card>.text-btn{grid-column:2}.judge-assignment-actions{grid-column:1/-1;justify-content:stretch;flex-wrap:wrap}.judge-assignment-actions button{flex:1}.judge-assignment-add{grid-column:1/-1}.judge-assignment-add .primary{width:100%}}


/* ==================== Мобильные и сенсорные экраны ==================== */
html,body{max-width:100%;overflow-x:hidden}
.client-app{width:100%;min-width:0}
.client-main,.client-header,.tab,.panel,.content-grid,.toolbar,.form-grid,.manager-card{min-width:0}
.profile-card-actions{margin-top:auto;justify-content:flex-end}
@media (max-width:900px){
  .client-main{width:100%;padding-left:12px;padding-right:12px;padding-bottom:40px}
  .client-header{width:100%;margin:0 0 12px;min-height:64px}
  .header-left{flex:1 1 auto;min-width:0}
  .client-header h1{font-size:clamp(20px,6vw,26px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .client-header p{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-actions{max-width:100%;}
  .panel{padding:16px;border-radius:16px}
  .panel-head{align-items:flex-start}
  .panel-actions{width:100%}
  .panel-actions>*{flex:1 1 auto}
  .content-grid{grid-template-columns:1fr!important}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric-grid>div{padding:13px}
  .welcome-card{margin-bottom:12px}
  .welcome-card h2{font-size:22px}
  .welcome-card p{font-size:12px}
  .overview-stats,.self-stats,.analytics-grid,.rights-grid,.people-grid,.top-grid,.drone-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .form-grid .wide{grid-column:auto}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  .toolbar{width:100%}
  .toolbar input{width:100%;max-width:none}
  .filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .filters button{flex:0 0 auto;min-height:40px}
  .leader-switch{display:flex;overflow-x:auto;max-width:100%;width:100%;-webkit-overflow-scrolling:touch}
  .leader-switch button{flex:1 0 auto;min-height:40px}
  .assignment-card{grid-template-columns:minmax(0,1fr) auto!important}
  .assignment-person{min-width:0}
  .assignment-person b,.assignment-person small{white-space:normal}
  .assignment-card>.text-btn{grid-column:2}
  .judge-assignment-toolbar{grid-template-columns:1fr!important}
  .judge-assignment-add{width:100%;align-items:stretch}
  .judge-assignment-add .primary{width:100%}
  .judge-assignment-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .judge-assignment-actions button{min-height:44px}
  .profile-card-actions{width:100%;padding-top:16px;justify-content:flex-end}
  .profile-card-actions .primary{width:auto;max-width:100%;white-space:normal;text-align:center}
  .notification-card{grid-template-columns:38px minmax(0,1fr)!important}
  .notification-body{min-width:0}
  .notification-actions{grid-column:1/-1}
  .device-card{min-width:0!important}
  .manager-actions{width:100%}
  .manager-actions>*{flex:1 1 auto}
  input,select,textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:100px}
  .primary,.text-btn,.filters button,.action,.icon-btn{min-height:42px}
  .toast{max-width:calc(100vw - 24px)}
}
@media (max-width:560px){
  .client-main{padding-left:8px;padding-right:8px}
  .client-header{padding-left:10px;padding-right:10px}
  .metric-grid{grid-template-columns:1fr 1fr!important}
  .metric-grid b{font-size:20px}
  .welcome-card{padding:18px}
  .panel{padding:14px}
  .panel h2{font-size:19px}
  .panel-head{gap:10px}
  .panel-actions{display:grid;grid-template-columns:1fr}
  .profile-card-actions .primary{width:100%}
  .judge-assignment-actions{grid-template-columns:1fr}
  .notification-card{padding:12px}
  .notification-actions{display:grid;grid-template-columns:1fr}
  .notification-actions>*{width:100%}
}
@media (max-width:380px){
  .client-main{padding-left:6px;padding-right:6px}
  .metric-grid{grid-template-columns:1fr!important}
  .client-header h1{font-size:19px}
  .client-header p{display:none}
}
@media (orientation:landscape) and (max-width:900px){
  .client-sidebar{width:min(320px,62vw)}
}
@supports(padding:max(0px)){
  .client-main{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}

/* таблица результатов */
.race-color{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:.78rem;font-weight:600}
.race-color::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.race-color-red{color:#ef4444}.race-color-yellow{color:#eab308}.race-color-green{color:#22c55e}.race-color-blue{color:#3b82f6}
#tab-leaderboard .table-wrap{overflow-x:auto}
#tab-leaderboard table{min-width:1100px}


/* ==================== Визуальный слой: фон и стекло, отключаются глобально или лично ==================== */
.client-app{position:relative;isolation:isolate;overflow:hidden;}
.client-app::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(800px 520px at 12% 8%, color-mix(in srgb,var(--c-accent) 11%,transparent),transparent 65%),
    radial-gradient(760px 560px at 92% 82%, color-mix(in srgb,var(--c-accent-2) 10%,transparent),transparent 68%),
    linear-gradient(120deg,transparent 0 48%,color-mix(in srgb,var(--c-accent) 2%,transparent) 50%,transparent 52%);
}
.client-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.client-main,.client-sidebar{position:relative;z-index:1;}
.client-ambient-grid{
  position:absolute;inset:-10%;opacity:.24;
  background-image:
    linear-gradient(color-mix(in srgb,var(--c-accent) 10%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 10%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,black 0 42%,transparent 82%);
  transform:perspective(900px) rotateX(58deg) scale(1.25) translateY(13%);
  transform-origin:center bottom;
}
.client-ambient-orb{
  position:absolute;border-radius:50%;filter:blur(1px);mix-blend-mode:screen;
  opacity:.28;box-shadow:0 0 70px color-mix(in srgb,var(--c-accent) 25%,transparent),inset -18px -20px 34px color-mix(in srgb,#000 30%,transparent);
  background:radial-gradient(circle at 30% 26%,color-mix(in srgb,#fff 24%,var(--c-accent)),color-mix(in srgb,var(--c-accent) 65%,transparent) 42%,transparent 72%);
}
.client-orb-a{width:210px;height:210px;left:-65px;top:11%;}
.client-orb-b{width:150px;height:150px;right:12%;top:6%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,#fff 18%,var(--c-accent-2)),color-mix(in srgb,var(--c-accent-2) 58%,transparent) 45%,transparent 73%);}
.client-orb-c{width:270px;height:270px;right:-100px;bottom:8%;}
.client-orb-d{width:92px;height:92px;left:39%;bottom:18%;opacity:.2;}
.client-orb-e{width:125px;height:125px;left:18%;top:27%;opacity:.20;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,#fff 20%,#38bdf8),color-mix(in srgb,#38bdf8 58%,transparent) 44%,transparent 74%);}
.client-orb-f{width:165px;height:165px;right:27%;bottom:22%;opacity:.20;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,#fff 18%,#a78bfa),color-mix(in srgb,#a78bfa 55%,transparent) 44%,transparent 74%);}
.client-orb-g{width:72px;height:72px;left:57%;top:16%;opacity:.22;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,#fff 22%,#2dd4bf),color-mix(in srgb,#2dd4bf 62%,transparent) 44%,transparent 75%);}
.client-orb-h{width:105px;height:105px;right:4%;top:45%;opacity:.18;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,#fff 18%,#fbbf24),color-mix(in srgb,#fbbf24 54%,transparent) 44%,transparent 75%);}
.client-ambient-ring{position:absolute;border:1px solid color-mix(in srgb,var(--c-accent) 22%,transparent);border-radius:50%;opacity:.24;box-shadow:0 0 35px color-mix(in srgb,var(--c-accent) 8%,transparent);}
.client-ring-a{width:430px;height:430px;right:-150px;top:18%;}
.client-ring-b{width:250px;height:250px;left:23%;bottom:-140px;border-color:color-mix(in srgb,var(--c-accent-2) 18%,transparent);}

/* стекло в стиле iOS: полупрозрачность, насыщенность, мягкая граница */
.client-sidebar,
.client-header,
.client-user,
.panel,
.overview-metric,
.welcome-card,
.manager-card,
.device-card,
.notification-card,
.assignment-card,
.analytics-item,
.brief-row,
.self-stat,
.overview-stat,
.toolbar,
.filters,
.leader-switch,
.panel-subtle,
.text-btn,
.primary,
.icon-btn,
.sidebar-action{
  --glass-bg:color-mix(in srgb,var(--c-surface) 68%,transparent);
  background:var(--glass-bg);
  border-color:color-mix(in srgb,var(--c-line) 78%,white 8%);
  box-shadow:0 18px 45px color-mix(in srgb,#000 18%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent);
}
.client-sidebar,.client-header,.client-user,.panel,.overview-metric,.welcome-card,.manager-card,.device-card,.notification-card,.assignment-card,.analytics-item,.brief-row,.self-stat,.overview-stat,.toolbar,.filters,.leader-switch,.panel-subtle{
  backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
  -webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
}
.client-sidebar{background:color-mix(in srgb,var(--c-bg) 58%,transparent);}
.client-header{background:color-mix(in srgb,var(--c-bg) 58%,transparent);}

/* глобальные и личные переключатели */
html.server-decor-off .client-ambient,
html.client-user-decor-off .client-ambient{display:none!important;}
html.server-effects-off .client-ambient-orb,
html.server-effects-off .client-ambient-ring,
html.server-effects-off .client-ambient-grid,
html.client-user-effects-off .client-ambient-orb,
html.client-user-effects-off .client-ambient-ring,
html.client-user-effects-off .client-ambient-grid{animation:none!important;}
html.server-effects-off .client-ambient-orb,
html.server-effects-off .client-ambient-ring,
html.client-user-effects-off .client-ambient-orb,
html.client-user-effects-off .client-user-effects-off .client-ambient-ring{transition:none!important;}
html.server-effects-off .client-ambient-grid,
html.client-user-effects-off .client-ambient-grid{opacity:.14;}

html.server-effects-off .client-app::before,
html.client-user-effects-off .client-app::before{transition:none;}
html.server-decor-off .client-app::before,
html.client-user-decor-off .client-app::before{opacity:0;}

html.server-effects-off .client-ambient-orb,
html.client-user-effects-off .client-ambient-orb{transform:none!important;}

html.client-user-glass-off .client-sidebar,
html.client-user-glass-off .client-header,
html.client-user-glass-off .client-user,
html.client-user-glass-off .panel,
html.client-user-glass-off .overview-metric,
html.client-user-glass-off .welcome-card,
html.client-user-glass-off .manager-card,
html.client-user-glass-off .device-card,
html.client-user-glass-off .notification-card,
html.client-user-glass-off .assignment-card,
html.client-user-glass-off .analytics-item,
html.client-user-glass-off .brief-row,
html.client-user-glass-off .self-stat,
html.client-user-glass-off .overview-stat,
html.client-user-glass-off .toolbar,
html.client-user-glass-off .filters,
html.client-user-glass-off .leader-switch,
html.client-user-glass-off .panel-subtle{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--c-surface);
}

@media(prefers-reduced-motion:reduce){
  .client-ambient-orb,.client-ambient-ring,.client-ambient-grid{animation:none!important;}
}

@keyframes clientOrbFloatA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-22px,0) scale(1.06)}}
@keyframes clientOrbFloatB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,28px,0) scale(.94)}}
@keyframes clientOrbFloatC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-38px,-26px,0)}}
@keyframes clientRingDrift{0%,100%{transform:rotate(0deg) translate3d(0,0,0)}50%{transform:rotate(18deg) translate3d(-18px,12px,0)}}
@keyframes clientGridPulse{0%,100%{opacity:.16}50%{opacity:.27}}
.client-orb-a{animation:clientOrbFloatA 14s ease-in-out infinite}
.client-orb-b{animation:clientOrbFloatB 11s ease-in-out infinite}
.client-orb-c{animation:clientOrbFloatC 17s ease-in-out infinite}
.client-orb-d{animation:clientOrbFloatB 9s ease-in-out infinite reverse}
.client-orb-e{animation:clientOrbFloatA 16s ease-in-out infinite reverse}
.client-orb-f{animation:clientOrbFloatC 19s ease-in-out infinite}
.client-orb-g{animation:clientOrbFloatB 12s ease-in-out infinite}
.client-orb-h{animation:clientOrbFloatA 15s ease-in-out infinite reverse}
.client-ring-a{animation:clientRingDrift 22s ease-in-out infinite}
.client-ring-b{animation:clientRingDrift 18s ease-in-out infinite reverse}
.client-ambient-grid{animation:clientGridPulse 8s ease-in-out infinite}


/* стекло: степень задаёт общий blur сайта, личный переключатель может только выключить */
html.client-user-glass-off { --site-blur:0px !important; }
html.client-user-glass-off .client-app,
html.client-user-glass-off .client-sidebar,
html.client-user-glass-off .client-header,
html.client-user-glass-off #sidebar-overlay,
html.client-user-glass-off .client-user,
html.client-user-glass-off .panel,
html.client-user-glass-off .overview-metric,
html.client-user-glass-off .welcome-card,
html.client-user-glass-off .manager-card,
html.client-user-glass-off .device-card,
html.client-user-glass-off .notification-card,
html.client-user-glass-off .assignment-card,
html.client-user-glass-off .analytics-item,
html.client-user-glass-off .brief-row,
html.client-user-glass-off .self-stat,
html.client-user-glass-off .overview-stat,
html.client-user-glass-off .toolbar,
html.client-user-glass-off .filters,
html.client-user-glass-off .leader-switch,
html.client-user-glass-off .panel-subtle {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* стекло выключено и при выключенном главном blur сервера */
html.server-effects-off, html.server-effects-off .client-app { --site-blur:0px; }
html.server-effects-off .client-sidebar,
html.server-effects-off .client-header,
html.server-effects-off #sidebar-overlay,
html.server-effects-off .client-user,
html.server-effects-off .panel,
html.server-effects-off .overview-metric,
html.server-effects-off .welcome-card,
html.server-effects-off .manager-card,
html.server-effects-off .device-card,
html.server-effects-off .notification-card,
html.server-effects-off .assignment-card,
html.server-effects-off .analytics-item,
html.server-effects-off .brief-row,
html.server-effects-off .self-stat,
html.server-effects-off .overview-stat,
html.server-effects-off .toolbar,
html.server-effects-off .filters,
html.server-effects-off .leader-switch,
html.server-effects-off .panel-subtle {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* основные кнопки наследуют цвет текста темы */
.client-app .primary{color:var(--c-text)!important;text-shadow:none!important}
.client-app .primary .ui-icon,.client-app .primary .icon,.client-app .primary svg{--icon-tint:var(--c-text);color:var(--c-text)!important}


/* оболочка остаётся видимой, даже если браузер заблокировал второстепенный скрипт */
.client-app{min-height:100vh;min-height:100dvh;}
.client-main{display:block;visibility:visible!important;opacity:1!important;}
.tab.active{display:block!important;}
@media(max-width:900px){
  html,body{width:100%;min-width:0;overflow-x:hidden;}
  .client-app{display:block!important;width:100%;min-height:100dvh;min-width:0;}
  .client-main{width:100%;display:block!important;}
  .client-sidebar{max-width:84vw;}
  .client-header,.panel,.welcome-card,.overview-metric,.manager-card{max-width:100%;}
}

/* ==================== Мобильная раскладка clients/ ==================== */
@media (max-width: 900px) {
  :root {
    --mobile-pad: 12px;
    --mobile-header: 58px;
    --mobile-drawer: min(318px, 88vw);
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  body.drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  .client-app {
    position: relative;
    display: block !important;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--c-bg);
  }

  /* тот же декоративный слой, что на welcome/; видимость и blur задаёт сервер */
  .client-ambient { display:block !important; }

  /* у меню свой слой поверх страницы */
  #sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 900 !important;
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    background: rgba(4, 8, 14, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity .2s ease, visibility 0s linear .2s;
  }

  .client-app.sidebar-open #sidebar-overlay {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0s;
  }

  .client-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--mobile-drawer) !important;
    max-width: var(--mobile-drawer) !important;
    height: 100dvh !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    margin: 0;
    border: 0;
    border-right: 1px solid var(--c-line);
    border-radius: 0 22px 22px 0;
    background: var(--c-bg);
    box-shadow: 18px 0 50px rgba(0, 0, 0, .32);
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility 0s linear .22s;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .client-app.sidebar-open .client-sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .client-brand {
    flex: 0 0 auto;
    padding: 4px 6px 14px;
    min-height: 54px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .client-brand strong { font-size: 14px; }
  .client-brand span { font-size: 9px; letter-spacing: .12em; }

  .client-user {
    flex: 0 0 auto;
    margin: 0 0 12px;
    padding: 10px;
    border-radius: 15px;
    gap: 8px 10px;
  }

  .client-user .avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .user-copy b { font-size: 13px; }
  .user-copy span { font-size: 11px; }
  .sidebar-role-badge { min-height: 26px; font-size: 11px; }

  .client-nav {
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
    padding: 0;
  }

  .nav-item {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 13px;
  }

  .sidebar-bottom {
    flex: 0 0 auto;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-line);
  }

  .sidebar-action { min-height: 42px; }

  /* контент сразу под компактной шапкой */
  .client-main {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 0 var(--mobile-pad) 24px !important;
    overflow-x: hidden;
  }

  .client-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 700 !important;
    width: calc(100% + (var(--mobile-pad) * 2));
    min-height: var(--mobile-header);
    margin-left: calc(var(--mobile-pad) * -1);
    padding: 8px var(--mobile-pad);
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .header-left {
    min-width: 0;
    flex: 1 1 auto;
    gap: 9px;
  }

  #menu-toggle {
    display: grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    z-index: 710;
  }

  .client-header > div:first-child > span,
  #tab-kicker { font-size: 8px; letter-spacing: .12em; }
  .client-header h1 { font-size: 18px; margin: 2px 0 0; line-height: 1.12; }
  .client-header p { display: none; }
  .header-actions { gap: 6px; }
  .sync-state { display: none !important; }
  .header-actions .icon-btn { width: 38px; height: 38px; }

  .tab {
    width: 100%;
    min-width: 0;
    padding: 10px 0 0 !important;
  }

  .content-grid,
  .rights-grid,
  .metric-grid,
  .drone-grid,
  .overview-stats,
  .self-stats,
  .analytics-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin: 0;
  }

  .panel,
  .welcome-card,
  .manager-card,
  .overview-metric,
  .device-card,
  .notification-card,
  .assignment-card,
  .analytics-item,
  .brief-row,
  .self-stat,
  .overview-stat,
  .rights-category,
  .drone,
  .toolbar,
  .filters,
  .leader-switch,
  .panel-subtle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 15px;
  }

  .panel { padding: 14px; margin: 0 0 10px; }
  .panel-head { align-items: flex-start; gap: 9px; margin-bottom: 11px; }
  .panel h2, .panel h3 { font-size: 16px; margin: 4px 0; }
  .panel p, .muted { font-size: 11px; line-height: 1.45; }

  .welcome-card {
    padding: 15px !important;
    margin: 0 0 10px;
    gap: 12px;
  }

  .welcome-card h2 { font-size: 21px; margin: 3px 0 5px; }
  .welcome-card p { font-size: 11px; line-height: 1.45; }
  .welcome-symbol { width: 52px; height: 52px; }
  .welcome-symbol img { width: 27px; height: 27px; }

  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .metric-grid > div { padding: 13px; border-radius: 13px; }
  .metric-grid b { font-size: 22px; margin-top: 5px; }

  .overview-stat,
  .self-stat,
  .analytics-item { padding: 11px 12px; }
  .overview-stat b,
  .self-stat b,
  .analytics-item b { font-size: 17px; }

  .toolbar,
  .filters { padding: 10px; gap: 8px; }
  .toolbar input { width: 100%; max-width: none; }
  .filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filters button { flex: 0 0 auto; }

  .form-grid { grid-template-columns: 1fr !important; gap: 9px; margin: 10px 0; }
  label { min-width: 0; }
  input, select, textarea { width: 100%; min-height: 42px; font-size: 13px; }
  textarea { min-height: 100px; }

  .panel-actions,
  .manager-actions,
  .judge-assignment-actions,
  .timer-buttons,
  .event-manager-actions,
  .profile-card-actions,
  .judge-save-actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
  }

  .panel-actions > *,
  .manager-actions > *,
  .event-manager-actions > *,
  .profile-card-actions > *,
  .judge-save-actions > * { flex: 1 1 140px; min-width: 0; }

  .primary,
  .text-btn,
  .action { min-height: 40px; padding: 9px 12px; }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  table { min-width: 620px; }
  th { padding: 10px 9px; font-size: 9px; }
  td { padding: 10px 9px; font-size: 10.5px; }

  .leaderboard-shell { gap: 10px; }
  .leader-switch {
    display: flex;
    width: 100%;
    overflow-x: auto;
    padding: 3px;
  }
  .leader-switch button { flex: 1 0 auto; min-height: 38px; padding: 8px 12px; }

  .timer-context { grid-template-columns: 1fr !important; gap: 8px; }
  .timer-ring { width: min(210px, 68vw); margin: 14px auto 6px; }
  .timer-buttons > * { flex: 1 1 42%; min-width: 0; }
  .laps { max-height: 180px; }

  .notification-card { grid-template-columns: 34px minmax(0, 1fr); padding: 11px; gap: 9px; }
  .notification-actions { grid-column: 1 / -1; }
  #notifications-list { max-height: none; overflow: visible; padding: 0; }

  .devices-list { display: grid; gap: 8px; }
  .device-card { padding: 12px; }

  .drone-grid { grid-template-columns: 1fr !important; }
  .drone { padding: 14px; }

  .empty { padding: 25px 12px; }
  .toast { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  :root { --mobile-pad: 10px; }
  .client-header h1 { font-size: 17px; }
  .metric-grid { gap: 7px; }
  .metric-grid > div { padding: 11px 10px; }
  .metric-grid b { font-size: 20px; }
  .panel { padding: 12px; }
  .panel-head { flex-direction: column; }
  .panel-head > * { max-width: 100%; }
  .panel-actions { width: 100%; }
  .panel-actions > * { width: 100%; flex-basis: 100%; }
  .welcome-card { padding: 13px !important; }
  .leader-switch button { font-size: 10px; }
}

@media (max-width: 380px) {
  .metric-grid { grid-template-columns: 1fr !important; }
  .client-brand span { display: none; }
  .client-header h1 { font-size: 16px; }
}

/* ==================== Мобильная раскладка: итоговая композиция ==================== */
@media (max-width: 900px) {
  :root {
    --m-gap: 10px;
    --m-pad: 10px;
    --m-header: 54px;
    --m-drawer: min(300px, 86vw);
  }

  html, body {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden !important;
    margin: 0;
  }

  body.drawer-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .client-app {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh;
    overflow: hidden;
  }

  .client-ambient {
    display: none !important;
  }

  /* меню поверх всего */
  #sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    background: rgba(0,0,0,.66) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
  }

  .client-app.sidebar-open #sidebar-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .client-sidebar {
    position: fixed !important;
    z-index: 9100 !important;
    inset: 0 auto 0 0 !important;
    width: var(--m-drawer) !important;
    max-width: var(--m-drawer) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
    overflow: hidden auto !important;
    overscroll-behavior: contain;
    transform: translate3d(-105%,0,0) !important;
    transition: transform .2s ease !important;
    padding: 12px 10px max(12px, env(safe-area-inset-bottom)) !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.42) !important;
  }

  .client-app.sidebar-open .client-sidebar {
    transform: translate3d(0,0,0) !important;
  }

  .client-brand {
    min-height: 42px !important;
    padding: 3px 5px 9px !important;
    margin-bottom: 3px !important;
  }

  .client-brand .brand-mark {
    width: 34px !important;
    height: 34px !important;
  }

  .client-brand strong { font-size: 13px !important; }
  .client-brand span { font-size: 8px !important; }

  .client-user {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 1px 9px !important;
    padding: 9px !important;
    margin-bottom: 7px !important;
  }

  .user-topline {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .client-user .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .user-status { display: none !important; }
  .user-copy { min-width: 0; }
  .user-copy b { font-size: 12px !important; line-height: 1.2 !important; }
  .user-copy span { font-size: 10px !important; }

  .sidebar-role-badge {
    justify-self: start;
    min-height: 20px !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .sidebar-toggle-row {
    display: none !important;
  }

  .client-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 3px 0 !important;
  }

  /* компактные кнопки списка */
  .client-nav .nav-item {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    box-sizing: border-box;
    padding: 0 9px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    gap: 9px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    justify-content: flex-start !important;
  }

  .client-nav .nav-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  .sidebar-bottom {
    margin-top: 8px !important;
    padding-top: 8px !important;
    gap: 3px !important;
  }

  .sidebar-action {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  .sidebar-action .nav-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .sidebar-action b { font-size: 9px !important; }

  .client-main {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 var(--m-pad) max(24px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .client-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    width: calc(100% + (var(--m-pad) * 2)) !important;
    min-width: 0 !important;
    height: var(--m-header) !important;
    min-height: var(--m-header) !important;
    box-sizing: border-box !important;
    margin: 0 0 10px calc(var(--m-pad) * -1) !important;
    padding: 6px var(--m-pad) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }

  #menu-toggle {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px !important;
  }

  #menu-toggle .ui-icon { width: 18px !important; height: 18px !important; }

  .client-header #tab-kicker {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  .client-header h1 {
    max-width: 54vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .client-header #tab-desc { display: none !important; }

  .header-actions {
    flex: 0 0 auto !important;
    gap: 5px !important;
  }

  .sync-state {
    max-width: 96px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 8px !important;
  }

  .icon-btn.icon-refresh {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .tab {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tab.active {
    display: block !important;
  }

  .content-grid,
  .overview-grid,
  .overview-metrics,
  .metric-grid,
  .form-grid,
  .analytics-grid,
  .rights-grid,
  .drone-grid,
  .leaderboard-layout {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .panel,
  .welcome-card,
  .overview-metric,
  .manager-card,
  .device-card,
  .notification-card,
  .assignment-card,
  .analytics-item,
  .brief-row,
  .self-stat,
  .overview-stat,
  .toolbar,
  .filters,
  .leader-switch,
  .panel-subtle {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .panel {
    padding: 13px !important;
    border-radius: 12px !important;
  }

  .panel-head {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .panel-head h2 { font-size: 17px !important; margin: 2px 0 !important; }
  .panel-head h3 { font-size: 14px !important; }
  .panel-head .muted { font-size: 10px !important; line-height: 1.4 !important; }

  .overview-hero {
    min-height: 0 !important;
    padding: 15px !important;
    margin: 0 0 var(--m-gap) !important;
  }

  .overview-hero h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .welcome-symbol { display: none !important; }

  .overview-metrics {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-bottom: var(--m-gap) !important;
  }

  .overview-metric {
    padding: 11px !important;
    min-height: 72px !important;
    border-radius: 10px !important;
  }

  .overview-metric b { font-size: 21px !important; }
  .overview-metric span { font-size: 9px !important; }
  .overview-metric small { font-size: 8px !important; }

  .overview-grid { gap: var(--m-gap) !important; }
  .overview-card { margin: 0 !important; }

  .toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  .filters {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 5px !important;
  }

  .filters button,
  .leader-switch button {
    min-height: 34px !important;
    font-size: 10px !important;
    padding: 5px 7px !important;
  }

  input, select, textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  button { max-width: 100%; }

  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .table-wrap table {
    min-width: 720px;
  }

  #tab-leaderboard .table-wrap table { min-width: 900px; }
  #tab-judge .table-wrap table { min-width: 560px; }

  .leaderboard-head .panel-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    gap: 5px !important;
  }

  .leader-switch {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 4px !important;
  }

  .device-card,
  .notification-card,
  .assignment-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 11px !important;
  }

  .device-actions,
  .assignment-card > .text-btn {
    width: 100%;
  }

  .device-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .timer-ring { width: min(210px,70vw) !important; height: min(210px,70vw) !important; margin: 12px auto !important; }
  .timer-buttons { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .timer-buttons button { min-height: 40px !important; }

  .judge-assignment-toolbar { grid-template-columns: 1fr !important; }
  .judge-assignment-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .judge-assignment-actions button { width: 100% !important; }

  .toast {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 560px) {
  :root { --m-pad: 8px; --m-drawer: min(292px, 88vw); }
  .sync-state { display: none !important; }
  .client-header h1 { max-width: 62vw; }
  .panel { padding: 11px !important; }
  .overview-metric { min-height: 68px !important; padding: 9px !important; }
  .overview-metric b { font-size: 19px !important; }
}

@media (max-width: 380px) {
  :root { --m-pad: 6px; --m-drawer: min(280px, 90vw); }
  .client-nav .nav-item,
  .sidebar-action { height: 34px !important; min-height: 34px !important; font-size: 11px !important; }
  .overview-metrics { grid-template-columns: 1fr !important; }
  .client-header h1 { font-size: 14px !important; max-width: 58vw; }
}


/* ==================== Мобильная типографика и отступы ==================== */
@media (max-width: 900px) {
  :root {
    --m-gap: 13px;
    --m-pad: 13px;
  }

  body,
  .client-main,
  .client-main button,
  .client-main input,
  .client-main select,
  .client-main textarea {
    font-size: 16px;
  }

  .client-header {
    min-height: 60px !important;
    padding: 9px 13px !important;
  }

  .client-header h1 { font-size: 22px !important; }
  .client-header > div:first-child > span,
  #tab-kicker { font-size: 12px !important; }

  .client-sidebar {
    width: min(308px, 88vw) !important;
    padding: max(12px, env(safe-area-inset-top)) 13px max(13px, env(safe-area-inset-bottom)) !important;
  }

  .client-brand strong { font-size: 18px !important; }
  .client-brand span { font-size: 12px !important; }
  .client-user { padding: 12px !important; }
  .client-user .avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .user-copy b { font-size: 17px !important; }
  .user-copy span { font-size: 14px !important; }
  .sidebar-role-badge { min-height: 29px !important; font-size: 14px !important; }

  /* кнопки сайдбара ниже, текст крупнее */
  .client-nav { gap: 3px !important; }
  .nav-item,
  .sidebar-action {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .nav-icon { width: 18px !important; height: 18px !important; }

  .tab { padding-top: 13px !important; }
  .panel { padding: 17px !important; margin-bottom: 13px !important; border-radius: 16px !important; }
  .panel h2 { font-size: 22px !important; }
  .panel h3 { font-size: 20px !important; }
  .panel p,
  .panel .muted { font-size: 15px !important; line-height: 1.5 !important; }

  .welcome-card { padding: 19px !important; margin-bottom: 13px !important; }
  .welcome-card h2 { font-size: 27px !important; }
  .welcome-card p { font-size: 15px !important; }

  .metric-grid { gap: 10px !important; }
  .metric-grid > div { padding: 15px !important; }
  .metric-grid b { font-size: 27px !important; }
  .metric-grid span { font-size: 14px !important; }

  .overview-stat,
  .self-stat,
  .analytics-item { padding: 14px !important; }
  .overview-stat b,
  .self-stat b,
  .analytics-item b { font-size: 21px !important; }

  label,
  .check-label { font-size: 16px !important; }
  input, select, textarea {
    min-height: 46px !important;
    font-size: 17px !important;
    padding: 10px 12px !important;
  }
  textarea { min-height: 112px !important; }

  .primary,
  .text-btn,
  .action {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
  }

  th { font-size: 13px !important; }
  td { font-size: 15px !important; padding: 12px 10px !important; }

  .leader-switch button { font-size: 16px !important; min-height: 42px !important; }
  .empty { font-size: 16px !important; padding: 30px 14px !important; }
}

@media (max-width: 560px) {
  .client-header h1 { font-size: 21px !important; }
  .panel { padding: 16px !important; }
  .panel h2 { font-size: 21px !important; }
  .panel h3 { font-size: 19px !important; }
  .welcome-card h2 { font-size: 25px !important; }
  .nav-item,
  .sidebar-action { min-height: 36px !important; height: 36px !important; font-size: 16px !important; }
}

/* ==================== Мобильные карточки, переключение страниц, отступы ==================== */
.tab[hidden]{display:none !important;}

@media (max-width: 900px){
  :root{
    --mobile-content-pad:16px;
    --mobile-card-pad:18px;
    --mobile-card-radius:18px;
  }

  html, body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  body{
    padding:0 !important;
    margin:0 !important;
  }

  .client-app{
    width:100%;
    min-height:100dvh;
    overflow:visible !important;
  }

  .client-main{
    width:100%;
    min-width:0;
    padding:0 var(--mobile-content-pad) max(42px, env(safe-area-inset-bottom)) !important;
  }

  .client-header{
    position:sticky;
    top:0;
    z-index:800;
    width:100%;
    min-height:68px;
    margin:0 0 14px !important;
    padding:12px 0 !important;
    border-radius:0 0 16px 16px;
    background:color-mix(in srgb,var(--c-bg) 82%,transparent);
    backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
    -webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
  }

  .header-left{min-width:0;flex:1 1 auto;}
  .client-header h1{
    margin:4px 0 2px;
    font-size:clamp(24px,6.4vw,29px) !important;
    line-height:1.12;
  }
  .client-header p{
    font-size:14px !important;
    line-height:1.35;
    max-width:100%;
  }
  #tab-kicker{font-size:11px !important;}

  .tab{
    width:100%;
    min-width:0;
    padding:0 !important;
    animation:c-tab-in .18s ease;
  }

  .content-grid,
  .overview-grid,
  .leaderboard-layout{
    width:100%;
    min-width:0;
    grid-template-columns:1fr !important;
    gap:14px;
  }

  .panel,
  .welcome-card,
  .manager-card,
  .overview-card,
  .overview-metric,
  .device-card,
  .notification-card,
  .assignment-card,
  .analytics-item,
  .self-stat,
  .overview-stat,
  .rights-category,
  .toolbar,
  .filters,
  .leader-switch,
  .panel-subtle{
    min-width:0;
    width:100%;
    border-radius:var(--mobile-card-radius);
  }

  .panel{
    padding:var(--mobile-card-pad) !important;
    margin-bottom:0;
  }

  .panel h2{font-size:23px !important;line-height:1.2;}
  .panel h3{font-size:18px !important;}
  .panel > span{font-size:11px;}
  .muted{font-size:14px;line-height:1.55;}

  /* данные профиля/обзора не касаются краёв карточки */
  .brief{
    gap:8px;
    margin-top:12px;
  }
  .brief-row{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(82px,.7fr) minmax(0,1.3fr);
    align-items:center;
    gap:12px;
    padding:13px 14px !important;
    border:1px solid var(--c-line) !important;
    border-radius:13px;
    background:color-mix(in srgb,var(--c-surface-2) 78%,transparent);
  }
  .brief-row span,
  .brief-row b{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .brief-row b{text-align:right;font-size:14px;line-height:1.35;}

  .overview-stats,
  .self-stats,
  .analytics-grid{
    grid-template-columns:1fr !important;
    gap:9px;
  }
  .overview-stat,.self-stat,.analytics-item{
    padding:15px !important;
    border-radius:14px;
  }
  .overview-stat span,.self-stat span,.analytics-item span{font-size:11px;}
  .overview-stat b,.self-stat b,.analytics-item b{font-size:21px;}

  .metric-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px;
    margin-bottom:14px;
  }
  .metric-grid > div{padding:16px 14px;border-radius:16px;}
  .metric-grid span{font-size:12px;line-height:1.25;}
  .metric-grid b{font-size:25px;margin-top:8px;}

  .welcome-card{
    padding:20px !important;
    gap:16px;
  }
  .welcome-card h2{font-size:26px !important;}
  .welcome-card p{font-size:14px;}

  .form-grid{
    grid-template-columns:1fr !important;
    gap:13px;
  }
  .form-grid label,
  .check-label{font-size:14px;}
  .client-app input,
  .client-app select,
  .client-app textarea{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:12px 13px;
    font-size:16px;
    border-radius:12px;
  }
  .client-app textarea{min-height:112px;}

  .panel-head{gap:12px;margin-bottom:15px;}
  .panel-actions{width:100%;gap:8px;}
  .panel-actions > *{flex:1 1 auto;min-width:0;}

  .primary,.text-btn,.sidebar-action,.nav-item{
    font-size:14px;
  }
  .primary,.text-btn{min-height:44px;padding:10px 14px;}

  .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    border-radius:14px;
  }

  /* меню: плотно, но с удобными зонами нажатия */
  .client-sidebar{
    width:min(326px,88vw) !important;
    max-width:min(326px,88vw) !important;
    padding:12px 11px max(12px,env(safe-area-inset-bottom)) !important;
    border-radius:0 20px 20px 0;
  }
  .client-nav{gap:3px;padding:2px 1px;}
  .nav-item{
    min-height:38px !important;
    height:38px;
    padding:0 11px !important;
    gap:10px;
    border-radius:10px;
  }
  .nav-item .nav-icon{width:18px;height:18px;flex:0 0 18px;}
  .sidebar-toggle-row{min-height:36px;height:36px;margin-bottom:5px;padding:0 11px;font-size:14px;}
  .sidebar-action{min-height:38px;height:38px;padding:0 11px;}
  .sidebar-bottom{gap:5px;padding-top:7px;}
  .client-brand{padding:2px 5px 9px !important;min-height:44px;}
  .client-brand strong{font-size:14px !important;}
  .client-brand span{font-size:9px !important;}
  .brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:11px;}
  .client-user{padding:10px !important;margin-bottom:8px !important;border-radius:14px;}
  .sidebar-role-badge{min-height:26px;padding:4px 8px;font-size:12px;}

  /* меню всегда над шапкой и контентом */
  #sidebar-overlay{z-index:9000 !important;}
  .client-sidebar{z-index:9100 !important;}
  .client-header{z-index:800 !important;}
  .client-app.sidebar-open .client-sidebar{z-index:9100 !important;}
  .client-app.sidebar-open #sidebar-overlay{z-index:9000 !important;}
}

@media (max-width:560px){
  .client-main{padding-left:14px !important;padding-right:14px !important;}
  .client-header{padding-left:0 !important;padding-right:0 !important;}
  .panel{padding:17px !important;}
  .brief-row{grid-template-columns:1fr;gap:5px;}
  .brief-row b{text-align:left;font-size:15px;}
  .metric-grid > div{padding:15px 13px;}
  .metric-grid span{font-size:12px;}
  .metric-grid b{font-size:23px;}
}

@media (max-width:380px){
  .client-main{padding-left:11px !important;padding-right:11px !important;}
  .panel{padding:15px !important;}
  .metric-grid{gap:8px;}
  .metric-grid > div{padding:13px 11px;}
  .metric-grid b{font-size:21px;}
  .client-sidebar{width:90vw !important;max-width:90vw !important;}
}


/* размеры и мобильная шапка */
.client-app .nav-item{font-size:18.5px;}
.client-app .filters button{font-size:13px;}
.my-results-trend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;margin-top:14px;border-radius:14px;}
.my-results-trend > span{font-size:11px;color:var(--c-muted);font-weight:800;letter-spacing:.08em;}
.my-results-trend > b{font-size:16px;}
.my-results-trend > small{width:100%;}
@media(max-width:900px){
  .client-app .nav-item{font-size:16px !important;}
  .client-app .filters button{font-size:16px !important;}
  .client-header{
    margin:10px 0 16px !important;
    width:100% !important;
    min-height:72px !important;
    padding:10px 12px !important;
    border:1px solid color-mix(in srgb,var(--c-line) 85%,transparent) !important;
    border-radius:20px !important;
    background:color-mix(in srgb,var(--c-surface) 72%,transparent) !important;
    box-shadow:0 12px 30px color-mix(in srgb,#000 18%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent);
    backdrop-filter:blur(var(--site-blur,18px)) saturate(155%);
    -webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(155%);
  }
  .header-left{gap:10px;}
  #menu-toggle,.header-actions .icon-btn{border-radius:13px !important;}
  #menu-toggle{width:44px;height:44px;flex:0 0 44px;}
  .header-actions{gap:7px;}
  .sync-state{padding:7px 10px;border-radius:999px;border:1px solid var(--c-line);background:color-mix(in srgb,var(--c-surface-2) 78%,transparent);}
  .client-header h1{font-size:22px !important;}
}


/* ==================== Визуальные настройки сервера (/api/site-settings через theme.js) ==================== */
.client-app .client-ambient{
  filter:blur(var(--site-bg-blur,8px));
  transform:scale(1.035);
  transform-origin:center;
  transition:filter .25s ease,opacity .25s ease;
}
.client-app .client-ambient-grid{
  filter:blur(calc(var(--site-bg-blur,8px) * .55));
}

/* общий настраиваемый blur для всех стеклянных поверхностей, включая вложенные */
.client-app .client-sidebar,
.client-app .client-header,
.client-app .client-user,
.client-app .panel,
.client-app .overview-card,
.client-app .overview-metric,
.client-app .welcome-card,
.client-app .manager-card,
.client-app .device-card,
.client-app .notification-card,
.client-app .assignment-card,
.client-app .analytics-item,
.client-app .brief-row,
.client-app .self-stat,
.client-app .overview-stat,
.client-app .toolbar,
.client-app .filters,
.client-app .leader-switch,
.client-app .panel-subtle,
.client-app .person-card,
.client-app .top-card,
.client-app .rights-category,
.client-app .mini-chart,
.client-app .best-row,
.client-app .drone-card,
.client-app .judge-card{
  backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
  -webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(145%);
}

/* поверхности полупрозрачные, чтобы фон просвечивал */
.client-app .panel,
.client-app .overview-card,
.client-app .overview-metric,
.client-app .welcome-card,
.client-app .manager-card,
.client-app .device-card,
.client-app .notification-card,
.client-app .assignment-card,
.client-app .analytics-item,
.client-app .brief-row,
.client-app .self-stat,
.client-app .overview-stat,
.client-app .toolbar,
.client-app .filters,
.client-app .leader-switch,
.client-app .panel-subtle,
.client-app .person-card,
.client-app .top-card,
.client-app .rights-category,
.client-app .mini-chart,
.client-app .best-row,
.client-app .drone-card,
.client-app .judge-card{
  background:color-mix(in srgb,var(--c-surface) 68%,transparent);
}

/* главные переключатели из общих настроек в приоритете */
html.server-decor-off .client-ambient,
html.client-user-decor-off .client-ambient{display:none!important;}
html.server-decor-off .client-app::before,
html.client-user-decor-off .client-app::before{opacity:0!important;}
html.server-effects-off .client-ambient,
html.client-user-effects-off .client-ambient{animation:none!important;}
html.server-effects-off .client-ambient-orb,
html.server-effects-off .client-ambient-ring,
html.server-effects-off .client-ambient-grid,
html.client-user-effects-off .client-ambient-orb,
html.client-user-effects-off .client-ambient-ring,
html.client-user-effects-off .client-ambient-grid{animation:none!important;}

/* blur не зависит от декора: выключен — стекло сразу без backdrop-filter */
html.server-effects-off .client-app,
html.client-user-glass-off .client-app{--site-blur:0px!important;}
html.client-user-glass-off .client-app .client-sidebar,
html.client-user-glass-off .client-app .client-header,
html.client-user-glass-off .client-app .client-user,
html.client-user-glass-off .client-app .panel,
html.client-user-glass-off .client-app .overview-card,
html.client-user-glass-off .client-app .overview-metric,
html.client-user-glass-off .client-app .welcome-card,
html.client-user-glass-off .client-app .manager-card,
html.client-user-glass-off .client-app .device-card,
html.client-user-glass-off .client-app .notification-card,
html.client-user-glass-off .client-app .assignment-card,
html.client-user-glass-off .client-app .analytics-item,
html.client-user-glass-off .client-app .brief-row,
html.client-user-glass-off .client-app .self-stat,
html.client-user-glass-off .client-app .overview-stat,
html.client-user-glass-off .client-app .toolbar,
html.client-user-glass-off .client-app .filters,
html.client-user-glass-off .client-app .leader-switch,
html.client-user-glass-off .client-app .panel-subtle,
html.client-user-glass-off .client-app .person-card,
html.client-user-glass-off .client-app .top-card,
html.client-user-glass-off .client-app .rights-category,
html.client-user-glass-off .client-app .mini-chart,
html.client-user-glass-off .client-app .best-row,
html.client-user-glass-off .client-app .drone-card,
html.client-user-glass-off .client-app .judge-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:var(--c-surface)!important;
}

/* blurEnabled=false приходит из theme.js как --site-blur:0px */


/* ==================== Сайдбар на десктопе: закреплён, прокручивается только список; сворачивание только на мобильных ==================== */
@media (min-width:901px){
  .client-app,
  .client-app.sidebar-collapsed{
    display:block !important;
    min-height:100vh;
    min-height:100dvh;
    padding-left:var(--sb-expanded) !important;
    grid-template-columns:none !important;
  }

  .client-sidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--sb-expanded) !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    align-self:auto !important;
    z-index:100 !important;
  }

  /* список разделов занимает оставшуюся высоту и прокручивается сам */
  .client-sidebar .client-nav{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }
  .client-sidebar .sidebar-bottom{
    flex:0 0 auto !important;
    margin-top:auto !important;
  }

  .client-main{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #sidebar-collapse,
  .sidebar-collapse-btn{display:none !important;}

  /* сохранённое свёрнутое состояние не должно давать полосу иконок на десктопе */
  .client-app.sidebar-collapsed .client-brand > div:last-child,
  .client-app.sidebar-collapsed .user-copy,
  .client-app.sidebar-collapsed .sidebar-role-badge,
  .client-app.sidebar-collapsed .nav-item span:last-child,
  .client-app.sidebar-collapsed .sidebar-action span:not(.nav-icon),
  .client-app.sidebar-collapsed .sidebar-action b{display:revert !important;}
  .client-app.sidebar-collapsed .client-user{
    width:auto !important; min-height:0 !important; padding:12px !important;
    border-radius:var(--r-lg) !important; box-shadow:var(--c-shadow-sm) !important;
  }
  .client-app.sidebar-collapsed .client-user .avatar{
    width:40px !important; height:40px !important; border-radius:12px !important; font-size:14px !important;
  }
  .client-app.sidebar-collapsed .user-topline{justify-content:flex-start !important;}
  .client-app.sidebar-collapsed .nav-item,
  .client-app.sidebar-collapsed .sidebar-action{
    justify-content:flex-start !important; padding:0 13px !important;
  }
}


/* ---------- Обзор: центр управления и аккаунт ---------- */
#tab-overview .overview-control-strip{
  position:relative;display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.8fr);gap:18px;
  margin:0 0 16px;padding:18px;border:1px solid color-mix(in srgb,var(--c-line) 76%,white 8%);
  border-radius:20px;background:color-mix(in srgb,var(--c-surface) 62%,transparent);
  box-shadow:0 20px 55px color-mix(in srgb,#000 16%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent);
  backdrop-filter:blur(var(--site-blur,18px)) saturate(150%);-webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(150%);
  overflow:hidden;
}
#tab-overview .overview-control-strip:before{content:"";position:absolute;inset:auto -80px -120px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 18%,transparent),transparent 68%);pointer-events:none}
.control-strip-title{display:flex;flex-direction:column;justify-content:center;padding:4px 8px;position:relative;z-index:1}
.control-strip-title>span{font-size:10px;letter-spacing:.18em;font-weight:900;color:var(--c-accent);margin-bottom:7px}
.control-strip-title>b{font-size:21px;letter-spacing:-.025em}
.control-strip-title small{margin-top:6px;color:var(--c-muted);font-size:12px;line-height:1.45;max-width:300px}
.control-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:1}
.control-action{appearance:none;border:1px solid var(--c-line);border-radius:15px;background:color-mix(in srgb,var(--c-bg) 34%,transparent);color:var(--c-text);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;padding:12px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.control-action:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-accent) 55%,var(--c-line));background:color-mix(in srgb,var(--c-accent) 8%,transparent);box-shadow:0 12px 25px color-mix(in srgb,#000 14%,transparent)}
.control-action-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-accent) 12%,transparent);color:var(--c-accent);border:1px solid color-mix(in srgb,var(--c-accent) 22%,var(--c-line))}
.control-action-icon .ui-symbol{width:19px;height:19px}
.control-action-icon .nav-icon{width:19px;height:19px;flex:none}
.overview-more-title{display:block;font-size:13px;margin-top:14px;margin-bottom:8px;color:var(--c-text)}
.overview-more-actions{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:0}
.overview-more-actions:empty{display:none;margin-top:0}
.overview-more-tile{appearance:none;border:1px solid var(--c-line);background:color-mix(in srgb,var(--c-bg) 34%,transparent);color:var(--c-text);font:inherit;text-align:left;cursor:pointer;border-radius:14px;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.overview-more-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-accent) 55%,var(--c-line));background:color-mix(in srgb,var(--c-accent) 8%,transparent);box-shadow:0 12px 25px color-mix(in srgb,#000 14%,transparent)}
.overview-more-tile span{color:var(--c-faint);font-size:11px}
.overview-more-tile b{font-size:21px;margin-top:4px}
.control-action span:nth-child(2){min-width:0}.control-action b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-action small{display:block;margin-top:3px;color:var(--c-faint);font-size:10px}.control-action>i{font-style:normal;color:var(--c-accent);font-size:17px}
.system-footer{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--c-line) 65%,transparent);font-size:10px;color:var(--c-muted)}
.system-footer b{margin-left:auto;color:var(--c-good);font-size:9px;letter-spacing:.14em}.system-pulse{width:7px;height:7px;border-radius:50%;background:var(--c-good);box-shadow:0 0 12px var(--c-good)}
.overview-account-card{padding:0;overflow:hidden}
.account-cover{position:relative;display:flex;align-items:center;gap:13px;padding:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--c-accent) 12%,transparent),color-mix(in srgb,var(--c-surface) 30%,transparent) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--c-line) 65%,transparent)}
.account-avatar-lg{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;font-size:20px;font-weight:900;color:var(--c-text);background:color-mix(in srgb,var(--c-accent) 15%,var(--c-surface));border:1px solid color-mix(in srgb,var(--c-accent) 32%,var(--c-line));box-shadow:0 10px 25px color-mix(in srgb,#000 18%,transparent)}
.account-cover-copy{min-width:0}.account-cover-copy>span{font-size:9px;letter-spacing:.16em;font-weight:900;color:var(--c-accent)}.account-cover-copy h3{margin:3px 0 2px;font-size:19px}.account-cover-copy p{margin:0;color:var(--c-muted);font-size:11px}.account-open{margin-left:auto;width:36px;height:36px;border-radius:11px;border:1px solid var(--c-line);background:color-mix(in srgb,var(--c-bg) 28%,transparent);color:var(--c-text);font-size:17px;cursor:pointer;transition:.18s}.account-open:hover{color:var(--c-accent);border-color:var(--c-accent);transform:translate(2px,-2px)}
.account-identity{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px 4px}.account-identity>div{display:flex;flex-direction:column;gap:2px}.account-identity b{font-size:14px}.account-identity span{font-size:10px;color:var(--c-faint)}.account-role{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--c-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--c-accent) 24%,var(--c-line));color:var(--c-accent)!important;font-weight:800;white-space:nowrap}
.overview-account-card .brief{padding:0 18px}.overview-account-card .brief-row{margin:0;padding:9px 0;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--c-line) 50%,transparent);box-shadow:none}.overview-account-card .brief-row:last-child{border-bottom:0}.overview-account-card .self-stats{padding:8px 18px 16px;margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.overview-account-card .self-stat{padding:9px;border-radius:10px;background:color-mix(in srgb,var(--c-bg) 22%,transparent);border:1px solid color-mix(in srgb,var(--c-line) 55%,transparent);box-shadow:none}.overview-account-card .self-stat span{font-size:8px}.overview-account-card .self-stat b{font-size:14px}
@media(max-width:900px){#tab-overview .overview-control-strip{grid-template-columns:1fr}.control-actions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.control-actions{grid-template-columns:1fr}.control-action{min-height:58px}.overview-account-card .self-stats{grid-template-columns:repeat(2,1fr)}}

/* режим правки: во время фонового опроса профиль только для чтения */
.editable-card input:disabled,
.editable-card select:disabled,
.editable-card textarea:disabled{
  opacity:.78;
  cursor:not-allowed;
}
.editable-card.editing input:not(:disabled),
.editable-card.editing select:not(:disabled),
.editable-card.editing textarea:not(:disabled){
  border-color:color-mix(in srgb,var(--c-accent) 55%,var(--c-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 10%,transparent);
}
.profile-edit-actions{align-self:flex-start;flex-wrap:wrap}

/* пол в профиле — тот же кастомный список, что в auth/; меню не обрезается */
#tab-profile .gender-profile-row{position:relative;z-index:30;overflow:visible}
#tab-profile .gender-profile-row .themed-select{flex:1;min-width:180px}
#tab-profile .gender-profile-row .themed-select-menu{z-index:9999;pointer-events:auto}

/* Профиль: поле пола должно работать один-в-один как список в auth/. */
#tab-profile .gender-profile-row.input-group{display:flex;flex-direction:column;align-items:stretch;gap:8px;position:relative;z-index:100;overflow:visible}
#tab-profile .gender-profile-row .themed-select{width:100%;position:relative;z-index:101;overflow:visible}
#tab-profile .gender-profile-row .themed-select-control{width:100%;min-height:42px}
#tab-profile .gender-profile-row .themed-select-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:10000;pointer-events:auto;overflow:visible}
#tab-profile .gender-profile-row .themed-select-option{pointer-events:auto;user-select:none}
#tab-profile .editable-card.editing .gender-profile-row .themed-select-control{cursor:pointer;opacity:1}
#tab-profile .editable-card:not(.editing) .gender-profile-row .themed-select-control{cursor:not-allowed}

/* ==================== Производительность на телефонах: меньше blur и анимаций, эффекты не отключаем ==================== */
html.mobile-performance-mode:not(.server-effects-off) {
  --site-blur: 10px !important;
  --site-bg-blur: 4px !important;
}
html.site-low-performance:not(.server-effects-off) {
  --site-blur: 8px !important;
  --site-bg-blur: 3px !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  html:not(.server-effects-off) {
    --site-blur: 10px !important;
    --site-bg-blur: 4px !important;
  }
  html.site-low-performance:not(.server-effects-off) {
    --site-blur: 8px !important;
    --site-bg-blur: 3px !important;
  }

  /* стекло сохраняем, но без анимированных фильтров */
  .client-ambient-orb,
  .client-ambient-ring,
  .client-ambient-grid {
    animation-duration: 18s !important;
  }

  .client-app::before,
  .client-ambient-orb,
  .client-ambient-ring,
  .client-ambient-grid {
    will-change: transform, opacity;
  }

  .client-sidebar,
  .client-header,
  .panel,
  .notification-card,
  .device-card,
  .assignment-card,
  .overview-metric,
  .welcome-card,
  .manager-card,
  .toolbar,
  .filters {
    transition-duration: 160ms !important;
  }
}


#site-notification-stack{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 36px));pointer-events:none}
.site-notification-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--c-danger) 55%,var(--c-line));border-radius:12px;background:var(--c-surface);box-shadow:0 12px 32px color-mix(in srgb,var(--c-danger) 12%,transparent);animation:siteNotifIn .18s ease-out}
.site-notification-toast-icon{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:9px;background:color-mix(in srgb,var(--c-danger) 15%,transparent);color:var(--c-danger)}
.site-notification-toast-body{display:flex;flex-direction:column;gap:3px;min-width:0}.site-notification-toast-body b{font-size:12px;color:var(--c-danger)}.site-notification-toast-body span{font-size:13px;line-height:1.35}.site-notification-toast-close{margin-left:auto;border:0;background:transparent;color:var(--c-text-secondary);font-size:20px;cursor:pointer}
@keyframes siteNotifIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==================== Модалки clients/ (уведомления, пароль): свои классы, прямые потомки body — filter на предке ломал fixed ==================== */
.client-modal{
  position:fixed; inset:0; z-index:20000; display:none;
  padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.client-modal.is-open{ display:flex; align-items:flex-start; justify-content:center; }
.client-modal-backdrop{
  position:fixed; inset:0;
  background:color-mix(in srgb, var(--c-bg) 55%, transparent);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.client-modal-dialog{
  position:relative; z-index:1; width:100%; max-width:560px; margin:auto;
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.45);
  padding:28px 26px; animation:client-modal-in .22s cubic-bezier(.2,.9,.25,1);
}
.client-modal-dialog--wide{ max-width:720px; }
@keyframes client-modal-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.client-modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; border:1px solid var(--c-line); background:var(--c-surface-2);
  color:var(--c-muted); cursor:pointer;
}
.client-modal-close:hover{ color:var(--c-text); border-color:color-mix(in srgb, var(--c-accent) 40%, var(--c-line)); }
.client-modal-icon{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center; margin:0 auto 14px;
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  color:var(--c-on-accent);
}
.client-modal-dialog h2{ margin:0 0 6px; font-size:19px; text-align:center; }
.client-modal-subtitle{ margin:0 0 16px; text-align:center; font-size:12.5px; color:var(--c-muted); line-height:1.5; }
.client-modal-dialog .auth-error{ margin-bottom:12px; }
body.client-modal-open{ overflow:hidden; }

@media (max-width:640px){
  .client-modal{ padding:0; align-items:flex-end !important; }
  .client-modal-dialog{
    max-width:none; width:100%; margin:0; border-radius:20px 20px 0 0;
    max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:22px 18px max(18px, env(safe-area-inset-bottom));
    animation:client-modal-in-mobile .22s ease-out;
  }
  @keyframes client-modal-in-mobile{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
}

.notif-form{ display:flex; flex-direction:column; gap:18px; text-align:left; margin-top:6px; }

.condition-block{ display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--c-line); }
.condition-block:first-child{ padding-top:0; border-top:0; }
.condition-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.condition-head b{ font-size:13px; letter-spacing:.02em; color:var(--c-text); }
.condition-head select{ min-width:200px; }
.condition-hint{ margin:0; font-size:11.5px; color:var(--c-muted); line-height:1.5; }
.condition-error{ margin:0; font-size:12px; color:var(--c-danger); min-height:0; }
.condition-error:empty{ display:none; }

.picklist{ border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-surface-2); overflow:hidden; }
.picklist-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-bottom:1px solid var(--c-line); font-size:11px; color:var(--c-muted); }
.picklist-selectall{ display:flex; align-items:center; gap:6px; border:1px solid var(--c-line); background:var(--c-surface); color:var(--c-text); border-radius:8px; padding:4px 9px; font-size:11px; cursor:pointer; white-space:nowrap; }
.picklist-selectall:hover{ border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); color:var(--c-accent); }
.picklist-selectall b{ font-weight:700; color:var(--c-accent); }
.picklist-body{ max-height:150px; overflow-y:auto; padding:7px; display:flex; flex-direction:column; gap:4px; }
.picklist--tall .picklist-body{ max-height:200px; }
.picklist-body:empty::after{ content:"Ничего не найдено"; display:block; padding:14px 6px; text-align:center; font-size:12px; color:var(--c-faint); }

.picklist-item{ display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid transparent; border-radius:9px; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.picklist-item:hover{ background:var(--c-surface-hover); border-color:var(--c-line); }
.picklist-item input[type=checkbox]{ pointer-events:none; }
.picklist-item .picklist-item-copy{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.picklist-item .picklist-item-copy b{ font-size:12.5px; font-weight:600; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picklist-item .picklist-item-copy small{ font-size:10.5px; color:var(--c-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.picklist-user-block{ display:flex; flex-direction:column; gap:10px; }
.picklist-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.picklist-toolbar > span{ font-size:11px; color:var(--c-muted); margin-right:2px; }
.picklist-toolbar input[type=text]{ flex:1 1 140px; min-width:120px; }
.picklist-toolbar select{ flex:0 0 auto; min-width:130px; }
.picklist-toolbar .picklist-selectall{ margin-left:auto; }

.modal-field{ display:block; font-size:11px; color:var(--c-muted); }
.modal-field textarea{ margin-top:7px; }

/* пароль — строка внутри карточки «Профиль» */
.profile-security-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--c-line);
}
.profile-security-copy{ display:flex; align-items:center; gap:12px; min-width:0; }
.profile-security-copy .icon{
  --icon-tint:var(--c-accent); flex:0 0 auto; width:18px; height:18px; padding:10px;
  border-radius:11px; box-sizing:content-box;
  background:color-mix(in srgb, var(--c-accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-line));
}
.profile-security-copy b{ display:block; font-size:13.5px; }
.profile-security-copy small{ display:block; font-size:11.5px; color:var(--c-muted); margin-top:2px; }
@media (max-width:640px){
  .profile-security-row{ flex-direction:column; align-items:stretch; }
  .profile-security-row .text-btn{ width:100%; text-align:center; }
}

@media (max-width:640px){
  .picklist-toolbar .picklist-selectall{ margin-left:0; }
  .condition-head select{ min-width:0; width:100%; }
}

/* компактные нативные чекбоксы в пиклистах уведомлений */
.picklist-item input[type=checkbox]{
  width:17px; height:17px; flex:0 0 17px; margin:0; accent-color:var(--c-accent);
  cursor:pointer;
}
.picklist-item.is-checked{ background:color-mix(in srgb, var(--c-accent) 10%, transparent); border-color:color-mix(in srgb, var(--c-accent) 30%, var(--c-line)); }

/* ==================== Явные цвета кнопок в client-modal: она вне .client-app ==================== */
.client-modal-dialog .primary{
  border:0; cursor:pointer; font-weight:800; letter-spacing:.01em;
  border-radius:12px; padding:12px 20px; font-size:12.5px;
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  color:var(--c-on-accent);
  box-shadow:0 12px 28px color-mix(in srgb, var(--c-accent) 32%, transparent);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.client-modal-dialog .primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.client-modal-dialog .primary:active{ transform:translateY(0); filter:brightness(.97); }
.client-modal-dialog .primary:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.client-modal-dialog .primary:disabled{ opacity:.55; cursor:progress; filter:none; transform:none; box-shadow:none; }
.client-modal-dialog .primary .icon{ --icon-tint:var(--c-on-accent); }

.client-modal-dialog .text-btn{
  border:1px solid var(--c-line); background:var(--c-surface-2); color:var(--c-text);
  border-radius:12px; padding:12px 18px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.client-modal-dialog .text-btn:hover{ border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); color:var(--c-accent); background:var(--c-surface-hover); }

.client-modal-dialog .auth-btn{
  border:0; cursor:pointer; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color:var(--c-on-accent);
  box-shadow:0 12px 28px color-mix(in srgb, var(--c-accent) 32%, transparent);
  transition:transform .15s ease, filter .15s ease;
}
.client-modal-dialog .auth-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.client-modal-dialog .auth-btn:active{ transform:translateY(0); filter:brightness(.97); }
.client-modal-dialog .auth-btn:disabled{ opacity:.55; cursor:progress; filter:none; transform:none; }

.client-modal-dialog .manager-actions{ justify-content:flex-end; padding-top:6px; border-top:1px solid var(--c-line); margin-top:2px; }
.client-modal-dialog .manager-actions .text-btn{ margin-right:auto; }

.client-modal-dialog select,
.client-modal-dialog input[type=text]:not(.input-group input),
.client-modal-dialog textarea{
  background:var(--input-bg); color:var(--c-text); border:1.5px solid var(--c-line);
  border-radius:11px; padding:.7rem .85rem; font-size:13px; outline:none; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.client-modal-dialog input[type=text]:not(.input-group input):focus,
.client-modal-dialog textarea:focus{
  border-color:var(--c-accent); background:var(--c-surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.client-modal-dialog textarea{ resize:vertical; min-height:88px; font-family:inherit; }

/* поля пароля не трогаем: иначе при переключении type=password/text сбрасывались отступы и размер */
.client-modal-dialog .input-group input{
  background:var(--input-bg); color:var(--c-text);
}
.client-modal-dialog .input-group input:focus{
  background:var(--c-surface);
}

@media (max-width:640px){
  .client-modal-dialog .manager-actions{ flex-direction:column-reverse; }
  .client-modal-dialog .manager-actions > *{ width:100%; justify-content:center; }
  .client-modal-dialog .manager-actions .text-btn{ margin-right:0; }
}

/* Подсветка строк пилоток (женский пол) в таблицах заявок/составов вылетов */
.female-row{ background:rgba(236,72,153,.08); }
.row-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* горизонтальный степпер этапов заявки с ФИО принявшего; переменные темы */
.app-stepper{ display:flex; align-items:flex-start; gap:0; margin:10px 0; overflow-x:auto; padding-bottom:2px; }
.app-stepper-step{ display:flex; align-items:flex-start; flex:0 0 auto; }
.app-stepper-dot-col{ display:flex; flex-direction:column; align-items:center; width:88px; text-align:center; }
.app-stepper-dot{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--c-muted);
  background:var(--c-surface-2); border:1px solid var(--c-line);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.app-stepper-step.is-reached .app-stepper-dot{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-on-accent); }
.app-stepper-label{ margin-top:5px; font-size:10.5px; font-weight:600; color:var(--c-muted); line-height:1.3; }
.app-stepper-step.is-reached .app-stepper-label{ color:var(--c-text); }
.app-stepper-approver{ margin-top:2px; font-size:9.5px; color:var(--c-muted); line-height:1.3; word-break:break-word; }
.app-stepper-connector{ flex:0 0 auto; width:22px; height:2px; margin-top:11px; background:var(--c-line); transition:background .15s ease; }
.app-stepper-connector.is-reached{ background:var(--c-accent); }
.app-stepper-wrap{ border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-surface-2); padding:12px; margin-bottom:12px; }
.app-stepper-status{ font-size:12.5px; font-weight:700; margin:0 0 4px; }
.app-stepper-hint{ font-size:11.5px; color:var(--c-muted); margin:4px 0 0; line-height:1.5; }

/* ---------- Сайдбар: прокручиваемый список разделов + переключатель темы ---------- */
/* сайдбар — колонка: шапка и низ фиксированы, список прокручивается */
.client-sidebar > :not(.client-nav){ flex:0 0 auto; }
.client-nav{
  flex:1 1 auto; min-height:0;
  align-content:start;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--c-accent) 45%, transparent) transparent;
  margin-right:-6px; padding-right:6px;
  /* мягкое затухание у краёв, когда список длиннее сайдбара */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  padding-top:4px; padding-bottom:10px;
}
.client-nav::-webkit-scrollbar{ width:6px; }
.client-nav::-webkit-scrollbar-track{ background:transparent; }
.client-nav::-webkit-scrollbar-thumb{
  border-radius:6px;
  background:color-mix(in srgb, var(--c-accent) 38%, transparent);
}
.client-nav::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--c-accent) 62%, transparent); }
.client-nav .nav-item{ flex-shrink:0; }
.client-sidebar .sidebar-bottom{ margin-top:0 !important; }

.sidebar-theme{
  display:grid; gap:8px; padding:10px;
  border:1px solid color-mix(in srgb, var(--c-line) 78%, white 8%); border-radius:13px;
  background:color-mix(in srgb, var(--c-surface) 68%, transparent);
}
.sidebar-theme-title{ display:flex; align-items:center; gap:11px; padding:0 2px; font-size:14px; color:var(--c-text); white-space:nowrap; }
.sidebar-theme-title b{ margin-left:auto; font-size:12px; color:var(--c-muted); font-weight:700; }
.sidebar-theme-title .nav-icon{ --icon-tint:var(--c-muted); }
.sidebar-theme-seg{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; padding:3px;
  border-radius:10px; background:color-mix(in srgb, var(--c-bg) 55%, transparent);
}
.sidebar-theme-seg button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:44px; padding:4px 2px; border:0; border-radius:8px;
  background:transparent; color:var(--c-muted); font:inherit; font-size:11px; font-weight:600;
  cursor:pointer; transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
/* значки — цветные, как в приложении (theme.js: decorateThemeButtons); активная кнопка — цвет акцента с тонким кольцом */
.sidebar-theme-seg button .nav-icon{ width:17px; height:17px; --icon-tint:var(--c-muted); }
.sidebar-theme-seg button:hover{ color:var(--c-text); background:color-mix(in srgb, var(--c-accent) 14%, transparent); }
.sidebar-theme-seg button.is-active{
  color:var(--c-on-accent);
  background:var(--c-accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.sidebar-theme-seg button:focus-visible{ outline:2px solid color-mix(in srgb, var(--c-accent) 70%, transparent); outline-offset:1px; }
/* тема закреплена сервером — переключатель скрыт */
html.server-theme-locked .sidebar-theme{ display:none; }

/* низкие экраны: подписи сегментов прячем, чтобы оставить место списку */
@media (max-height:640px){
  .sidebar-theme-seg button{ min-height:34px; }
  .sidebar-theme-seg button span:last-child{ display:none; }
  .client-user{ margin-bottom:10px; }
}

/* соревнования (классы) */
.comp-chips{flex-wrap:wrap;margin:8px 0}
.event-classes{display:grid;gap:6px;margin-top:8px}
.ec-row{display:flex;align-items:center;gap:16px}
.ec-row>b{min-width:88px}
.comp-bar{display:grid;gap:4px;margin:8px 0}
.comp-bar .comp-chips{margin:0}
.profile-classes{margin-top:12px}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-edit{display:grid;gap:6px;margin:8px 0}
/* класс с зачётами: название и отметки ЛЗ / КЗ в одной строке */
.pc-class-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pc-class-row>b{min-width:180px;font-weight:600}

/* бейдж соревнования: пустой элемент, текст — из data-c / data-f через псевдоэлементы.
   Внутри нет вложенных тегов, поэтому правила родителей (b, i, span, small) его не ломают; строка всегда одна */
.cbadge{--k:var(--c-accent);display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;
  width:auto!important;max-width:none;box-sizing:border-box;margin:0 6px 0 0;padding:0!important;flex:none;vertical-align:middle;
  border-radius:999px;overflow:hidden;white-space:nowrap!important;line-height:1!important;font-size:11px;font-weight:800;letter-spacing:.03em;
  border:1px solid color-mix(in srgb,var(--k) 55%,transparent);background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--k)}
.cbadge::before,.cbadge::after{display:block;padding:6px 0;font:inherit;line-height:1}
.cbadge::before{content:attr(data-c);padding-left:11px;padding-right:9px;color:var(--k)}
.cbadge::after{content:attr(data-f);padding-left:9px;padding-right:11px;color:var(--c-text);border-left:1px solid color-mix(in srgb,var(--k) 50%,transparent);background:color-mix(in srgb,var(--k) 10%,transparent)}
.cbadge::before{order:0}.cbadge::after{order:1}
.cbadge .cbn{order:2;padding:6px 11px 6px 9px;line-height:1;font-weight:800;color:var(--k);border-left:1px solid color-mix(in srgb,var(--k) 50%,transparent)}
.cbadge.k1{--k:#14b8a6}.cbadge.k2{--k:#3b82f6}.cbadge.k3{--k:#8b5cf6}.cbadge.k4{--k:#f59e0b}.cbadge.k5,.cbadge.k0{--k:#64748b}
.cbadges{display:inline-flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.event-card-foot .cbadges{gap:6px;justify-content:flex-start}
.mh-head .cbadge{margin-right:8px}
.events-mini-row .cbadge{margin-right:10px}
.event-stages-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

/* переключатель соревнования: сегменты классов и зачёта одной строкой */
.comp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0;border:0;background:none;margin:2px 0 12px}
.comp-bar[hidden]{display:none}
.cs-seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--c-line);background:color-mix(in srgb,var(--c-text) 5%,transparent)}
.cs-seg button{--k:var(--c-accent);display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--c-muted);font:800 13px inherit;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cs-seg button:hover{color:var(--c-text)}
.cs-seg button.active{color:var(--k);background:color-mix(in srgb,var(--k) 20%,transparent);border-color:color-mix(in srgb,var(--k) 60%,transparent)}
.cs-fmts button.active{--k:var(--c-text)}
.cs-seg .ui-icon{width:13px;height:13px;--icon-tint:currentColor}
.cs-classes .k1{--k:#14b8a6}.cs-classes .k2{--k:#3b82f6}.cs-classes .k3{--k:#8b5cf6}.cs-classes .k4{--k:#f59e0b}.cs-classes .k5{--k:#64748b}
@media(max-width:600px){.cs-seg button{padding:0 12px}}

/* телефон: теги мероприятий — компактные капсулы одной высоты: цветная точка + класс, мелкий формат, число в кружке */
@media (max-width:640px){
  .event-card-foot{gap:5px;align-items:center}
  .event-card-foot .ev-w,.event-card-foot .ev-part.off{display:none}
  .event-card-foot .pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:22px;padding:0 8px;font-size:11px;line-height:1;border-radius:11px}
  .event-card-foot .ev-part{padding:0;width:22px}
  .event-card-foot .cbadge{align-items:center;min-height:22px;padding:0 3px 0 9px;border-radius:11px;font-size:11px;background:color-mix(in srgb,var(--k) 12%,transparent);border:1px solid color-mix(in srgb,var(--k) 40%,transparent);position:relative}
  .event-card-foot .cbadge::before{padding:0 0 0 0;margin-left:0}
  .event-card-foot .cbadge::after{padding:0 6px 0 4px;border-left:0;background:none;color:var(--c-muted);font-size:9.5px;font-weight:700}
  .event-card-foot .cbadge .cbn{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;margin-right:2px;border:0;border-radius:8px;background:var(--k);color:#fff;font-size:10px}
}

/* ТС: время вылета — минуты и секунды в одну строку */
.ev-sim-time{display:flex;align-items:center;gap:6px}
.ev-sim-time input{width:90px}

/* «Все заявки»: этапы заявки (техконтроль, секретарь) с комментариями */
.app-stages{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:2px}
.app-stages li{display:grid;grid-template-columns:14px 1fr;gap:8px;position:relative;padding-bottom:6px}
.app-stages li:not(:last-child)::after{content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:2px;background:color-mix(in srgb,var(--c-line) 80%,transparent)}
.app-stages li.st-done:not(:last-child)::after{background:var(--c-good,#22c55e)}
.app-stages i{width:12px;height:12px;margin-top:3px;border-radius:50%;border:2px solid var(--st);box-sizing:border-box;background:var(--st)}
.app-stages li{--st:var(--c-muted)}
.app-stages li.st-done{--st:var(--c-good,#22c55e)}.app-stages li.st-current{--st:var(--c-accent)}
.app-stages li.st-warn{--st:var(--c-warn,#f59e0b)}.app-stages li.st-fail{--st:var(--c-bad,#ef4444)}
.app-stages li.st-wait i,.app-stages li.st-skip i{background:transparent}.app-stages li.st-skip{opacity:.5}
.app-stages b{display:block;font-size:12.5px;color:var(--st)}.app-stages li.st-wait b{color:var(--c-muted);font-weight:600}
.app-stages small{display:block;font-size:11px;color:var(--c-muted)}
.app-stages q{display:block;margin-top:3px;padding:5px 8px;border-radius:6px;font-size:12px;quotes:"«" "»";
  background:color-mix(in srgb,var(--st) 10%,transparent);border:1px solid color-mix(in srgb,var(--st) 35%,transparent)}
/* «Состояние заявок»: плитки и этапы с долей */
#hja-view-seg{margin:0 0 12px}
.hja-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:4px}
.hja-tile{display:grid;gap:2px;justify-items:center;padding:10px;border-radius:10px;border:1px solid var(--c-line);background:transparent;color:inherit;cursor:pointer}
.hja-tile small{color:var(--c-muted)}.hja-tile b{font-size:22px}
.hja-tile.accent b{color:var(--c-accent)}.hja-tile.good b{color:var(--c-good,#22c55e)}.hja-tile.bad b{color:var(--c-bad,#ef4444)}
.hja-stage{display:grid;grid-template-columns:1fr auto;gap:4px 8px;width:100%;padding:6px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.hja-stage span{display:flex;align-items:center;gap:8px;font-size:12.5px}.hja-stage span i{width:10px;height:10px;border-radius:50%}
.hja-stage em{grid-column:1/-1;display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--c-line) 60%,transparent)}
.hja-stage em u{display:block;height:100%;border-radius:2px}
@media (max-width:700px){.hja-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* «Судейство» главного судьи: идущие вылеты и управление вылетом */
.mj-live-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.mj-live-strip small{color:var(--c-muted)}
.mj-live-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--c-line);background:transparent;color:inherit;font-size:12px;cursor:pointer}
.mj-live-chip.active{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 14%,transparent)}
.mj-live-chip i{width:8px;height:8px;border-radius:50%;background:var(--c-good,#22c55e);animation:mjLivePulse 1.4s infinite}
@keyframes mjLivePulse{50%{opacity:.35}}
.mj-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.mj-control .bad{color:var(--c-bad,#ef4444)}

/* «Вылеты» (просмотр): карточки вылетов и составы */
#hv-seg{margin:10px 0}
#hv-seg i{font-style:normal;opacity:.7}
.hv-heat{border:1px solid var(--c-line);border-radius:12px;margin:0 0 8px;overflow:hidden;background:color-mix(in srgb,var(--c-panel,transparent) 60%,transparent)}
.hv-heat.mine{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent) inset}
.hv-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.hv-head:disabled{cursor:default;opacity:1}
.hv-no{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;font-weight:800;color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 14%,transparent)}
.hv-title{flex:1;min-width:0;display:grid}.hv-title b,.hv-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-title small{color:var(--c-muted);font-size:12px}
.hv-heat.mine .hv-title b{color:var(--c-accent)}
.hv-clock{font-size:17px}
.hv-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--c-muted);background:color-mix(in srgb,var(--c-line) 50%,transparent)}
.hv-status i{width:8px;height:8px;border-radius:50%;background:var(--c-good,#22c55e);animation:mjLivePulse 1.4s infinite}
.hv-heat.st-running .hv-status,.hv-heat.st-running .hv-clock{color:var(--c-good,#22c55e)}
.hv-heat.st-paused .hv-status,.hv-heat.st-paused .hv-clock{color:var(--c-warn,#f59e0b)}
.hv-heat.st-ready .hv-status{color:var(--c-accent)}
.hv-chev{color:var(--c-muted)}
.hv-rows{display:grid;gap:4px;padding:0 12px 10px}
.hv-row{display:grid;grid-template-columns:4px 1fr auto auto;align-items:center;gap:10px;padding:5px 0}
.hv-row>i{width:4px;height:28px;border-radius:2px;background:var(--pc)}
.hv-row span{display:grid;min-width:0}.hv-row small{color:var(--c-muted);font-size:11.5px}
.hv-row em{font-style:normal;font-size:12px;color:var(--c-muted)}
.hv-row strong{color:var(--c-accent)}
.hv-row.out{opacity:.5}.hv-row.me b{color:var(--c-accent)}
@media (max-width:700px){.hv-row{grid-template-columns:4px 1fr auto}.hv-row em{grid-column:2/-1}}

/* попытки вылета в карточке пилота у судьи */
.mj-attempts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0}
.mj-attempt-no{font-size:12px;font-weight:700;color:var(--c-accent)}
.mj-attempt-list{flex-basis:100%;display:grid;gap:4px}
.mj-attempt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px;border-radius:8px;border:1px solid var(--c-line);font-size:12px}
.mj-attempt.active{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 10%,transparent)}
.mj-attempt.best b{color:var(--c-good,#22c55e)}
.mj-attempt span{flex:1;min-width:0;color:var(--c-muted);font-family:ui-monospace,monospace}
.mj-attempt em{font-style:normal;font-size:11px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--c-accent) 18%,transparent)}
.mj-attempt em.good{background:color-mix(in srgb,var(--c-good,#22c55e) 20%,transparent)}
.mj-attempt-toggle{display:flex;flex:1;min-width:0;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.mj-attempt-toggle span{flex:1;min-width:0;color:var(--c-muted);font-family:ui-monospace,monospace}
.mj-attempt-detail{flex-basis:100%;display:grid;gap:2px;padding-top:4px;border-top:1px solid var(--c-line)}
.mj-attempt-lap{display:grid;grid-template-columns:34px 86px 96px 1fr;align-items:center;gap:8px;font-size:12px}
.mj-attempt-lap small{text-align:right;color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-attempt-lap.best span:first-of-type{color:var(--c-good,#22c55e)}
@media (max-width:700px){.mj-attempt-lap{grid-template-columns:30px 80px 1fr}.mj-attempt-lap .muted{display:none}}

/* форма мероприятия: попытки вылета у каждой дисциплины — в её строке */
.ec-row .ec-att{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--c-muted);white-space:nowrap}
.ec-row .ec-att input{width:56px;min-height:34px;padding:0 6px;text-align:center}

/* дисциплина с дронами мероприятия: бейдж с отметкой и чекбокс в форме мероприятия */
.cbadge.prov { box-shadow: 0 0 0 1.5px #34d399; }
.cbadge.prov::after { content: "★"; margin-left: 4px; color: #34d399; font-size: .8em; }
.ec-row .ec-prov { margin-left: 10px; white-space: nowrap; font-size: .82rem; }

/* конструктор вылетов судьи */
.heats-opts { display: grid; gap: 4px; margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.heats-opts b { font-size: .86rem; }
.hd { display: grid; gap: 12px; }
.hd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hd-spacer { flex: 1; }
.hd-hint { color: var(--warning, #fbbf24); font-size: .82rem; }
.hd-stage { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--accent); font-weight: 700; cursor: pointer; }
.hd-stage.active { background: var(--accent); color: var(--accent-contrast, #fff); }
.hd-roster { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.hd-roster.hd-over { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.hd-roster-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.hd-roster-head small { color: var(--text-muted); }
.hd-roster-tip { margin: 0; }
.hd-roster-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.hd-roster-group { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.hd-roster-group > b { color: var(--accent); font-size: .86rem; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.hd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--warning, #fbbf24); cursor: grab; font-size: .85rem; user-select: none; }
.hd-chip:active { cursor: grabbing; }
.hd-chip.judge { border-color: var(--border-strong); }
.hd-chip.judge.free { border-color: var(--accent); }
.hd-chip small { min-width: 16px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-muted); font-size: .72rem; text-align: center; }
.hd-chip.sel { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); }
.hd-cols { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.hd-col { flex: 1 1 240px; width: auto; max-width: 300px; min-width: min(190px, 100%); box-sizing: border-box; display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.hd-col.locked { opacity: .7; }
/* вылет, за который отвечает пользователь (конструктор ответственного) */
.hd-col.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hd-col header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 6px; min-width: 0; }
.hd-col header b { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-col header small { grid-column: 2; grid-row: 1; color: var(--text-muted); white-space: nowrap; }
.hd-col header .heat-status { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-col header small.bad { color: var(--danger); }
.hd-fill { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 20%, transparent); overflow: hidden; }
.hd-fill i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .16s ease-out; }
.hd-fill i.full { background: var(--success); }
.hd-fill i.over { background: var(--danger); }
.hd-col header small.hd-unjudged { grid-column: 1 / -1; grid-row: auto; justify-self: start; color: var(--warning, #fbbf24); font-weight: 700; }
.hd-over { outline: 2px dashed var(--success); outline-offset: 1px; background: color-mix(in srgb, var(--success) 10%, transparent); }
.hd-seat { display: grid; gap: 3px; padding: 0; border: 0; background: transparent; cursor: pointer; min-width: 0; }
.hd-pilot-card { display: flex; align-items: center; gap: 8px; width: calc(100% - 10px); min-width: 0; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.hd-judge-line { display: flex; align-items: stretch; gap: 4px; margin-left: 17px; margin-right: 10px; min-width: 0; }
.hd-judge-branch { width: 12px; flex: none; color: var(--accent); font-size: 1rem; line-height: 30px; }
.hd-judge-card { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; box-sizing: border-box; overflow: hidden; padding: 3px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-muted); font-size: .72rem; }
.hd-judge-drag { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 22px; color: var(--text-muted); cursor: grab; }
.hd-judge-drag:active { cursor: grabbing; }
.hd-judge-drag .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; --icon-tint: currentColor; }
.hd-judge-select { flex: 1; min-width: 0; width: 100%; height: 26px; padding: 2px 22px 2px 5px; border: 0; border-radius: 5px; outline: 0; background-color: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.hd-judge-select:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.hd-judge-select option { background: var(--surface-2); color: var(--text-primary); }
.hd-pilot-card span { display: grid; flex: 1; min-width: 0; }
.hd-seat b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-seat small { color: var(--text-muted); font-size: .7rem; }
.hd-seat.sel .hd-pilot-card { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.hd-seat.out { opacity: .55; }
.hd-seat.locked { cursor: default; }
.hd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hd-x { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--danger, #ef5350); cursor: pointer; }
.hd-x:hover { border-color: color-mix(in srgb, var(--danger, #ef5350) 35%, transparent); background: color-mix(in srgb, var(--danger, #ef5350) 14%, transparent); }
.hd-x .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; --icon-tint: currentColor; }
.hd-here { width: 100%; }
.hd-drag-preview { position: fixed; z-index: 2147483647; left: 0; top: 0; width: min(280px, 70vw); box-sizing: border-box; overflow: hidden; padding: 10px 14px; border: 2px solid var(--accent, #22c5b5); border-radius: 10px; background: var(--surface-2, #202b3d); color: var(--text-primary, #eef4ff); box-shadow: 0 12px 32px rgb(0 0 0 / .48); font-weight: 700; font-size: .9rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.hd-drag-preview.judge { border-color: var(--warning, #fbbf24); }
.heats-list.view-designer .hd-roster, .heats-list.view-designer .hd-cols, .heats-list.view-designer .hd-col { min-width: 0; }
.heats-list.view-designer [data-d-pool], .heats-list.view-designer [data-d-rjudge], .heats-list.view-designer [data-d-seat], .heats-list.view-designer [data-d-judge] { -webkit-user-drag: element; }

/* вкладка «Обучение» и плеер урока */
.tut-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.tut-h { margin: 18px 0 10px; }
.tut-hero { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 18px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; }
.tut-hero > div { flex: 1; min-width: 0; }
.tut-hero h3 { margin: 0 0 4px; font-size: 1.3rem; }
.tut-play { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.tut-play i { width: 0; height: 0; margin-left: 5px; border-left: 20px solid var(--accent-contrast, #fff); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.tut-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid #34d399; color: #34d399; font-size: .7rem; font-weight: 700; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tut-card { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.tut-card:hover { border-color: var(--accent); }
.tut-card > div { display: grid; gap: 3px; min-width: 0; }
.tut-card em { font-style: normal; font-size: .75rem; color: var(--text-muted); }
.tut-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; background: color-mix(in srgb, var(--accent) 16%, transparent); position: relative; }
.tut-ic::after, .tut-bigic::after { content: ""; position: absolute; inset: 22%; background: var(--accent); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.tut-player { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: rgba(6, 10, 18, .96); color: #fff; }
.tut-top { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.tut-spacer { flex: 1; }
.tut-video { flex: 1; min-height: 0; width: 100%; background: #000; border-radius: 14px; }
.tut-segs { display: flex; gap: 4px; }
.tut-segs i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; cursor: pointer; }
.tut-segs b { display: block; height: 100%; background: var(--accent); }
.tut-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; }
.tut-slide { max-width: 820px; text-align: center; display: grid; gap: 14px; justify-items: center; animation: tutIn .4s ease; }
.tut-slide h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.tut-slide p { margin: 0; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.tut-slide small { color: rgba(255, 255, 255, .5); }
.tut-bigic { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); position: relative; animation: tutPulse 1.8s ease-in-out infinite; }
.tut-ctrl { display: flex; justify-content: center; gap: 14px; }
.tut-done { display: grid; gap: 14px; justify-items: center; }
.tut-notes { width: min(820px, 100%); display: grid; gap: 10px; align-self: start; }
.tut-notes > div { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.tut-notes b { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.tut-notes h4 { margin: 0 0 3px; } .tut-notes p { margin: 0; color: rgba(255, 255, 255, .78); }
@keyframes tutIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tutPulse { 50% { transform: scale(1.06); } }

/* форма дрона: своё значение вместо варианта из списка и подсказка по каналу */
.drone-build-custom { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.drone-build-custom input { flex: 1; min-width: 0; }
.lane-suggest { display: block; flex: 1 1 100%; margin-top: 4px; color: var(--success, #4caf70); font-size: .78rem; line-height: 1.4; }

/* обучение: поиск, выбор набора уроков, подписи карточек */
.tut-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.tut-bar input[type=search] { flex: 1 1 260px; min-width: 0; }
.tut-seg { display: inline-flex; gap: 6px; }
.tut-seg button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--accent); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.tut-seg button.on { background: var(--accent); color: var(--accent-contrast, #fff); border-color: var(--accent); }
.tut-start { display: block; margin-top: 4px; color: var(--accent); font-weight: 700; }
.tut-inside { opacity: .85; }

.hd-pool-q { flex: 1 1 180px; min-width: 140px; max-width: 240px; padding: 5px 10px; border-radius: 999px; font-size: .85rem; }

/* список вылетов: строка пилота спокойнее — главное на виду, редкие действия в меню «⋯» */
.heat-pilot.full{ border-radius:12px; padding-top:10px; padding-bottom:10px; }
.heat-pilot-who b, .heat-pilot-link{ font-size:.95rem; }
.heat-pilot-judge select{ min-height:34px; border-radius:10px; font-size:.85rem; }
.heat-more{ position:relative; }
.heat-more > summary{ list-style:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; cursor:pointer; font-size:1.2rem; font-weight:800; color:var(--c-muted); }
.heat-more > summary::-webkit-details-marker{ display:none; }
.heat-more > summary:hover, .heat-more[open] > summary{ background:color-mix(in srgb, var(--c-muted) 18%, transparent); }
.heat-more-menu{ position:absolute; right:0; top:36px; z-index:20; min-width:230px; display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:12px; background:var(--c-surface, var(--surface, #1d283c)); border:1px solid var(--c-line); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.heat-more-menu .text-btn{ text-align:left; justify-content:flex-start; width:100%; border-radius:8px; }
.bad-text{ color:var(--c-danger) !important; }

.drone-build-combo { width:100%; min-width:0; }

/* форма дрона: единый список полей, нижних карточек нет */
.drone-store{ display:none !important; }
.drone-extra-grid{ margin-top:6px; }
.drone-missing{ margin-right:auto; align-self:center; color:var(--c-warning, #d6a800); font-size:.85rem; }
.vtx-hint{ margin:2px 0 8px; }
#drone-save:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- Жидкое стекло (как в приложении: glass/LiquidRim, GlassCard) ----------
   Всё считает браузер на GPU: объём края — внутренние тени, блик — градиент поверх заливки, «линза» — насыщенность
   и яркость в том же backdrop-filter. Полный эффект — только у карточек верхнего уровня: строки и плашки внутри
   панелей остаются как есть (иначе стекло на стекле). Свет медленно покачивается только на компьютере
   (CSS-анимация, без JS); выключенные стекло, эффекты или «меньше движения» убирают анимацию и нажатие */
@property --lg-light{syntax:'<percentage>';inherits:true;initial-value:22%}
:root{
  --lg-rim:color-mix(in srgb,#fff 26%,transparent);
  --lg-rim-soft:color-mix(in srgb,#fff 9%,transparent);
  --lg-depth:color-mix(in srgb,#000 22%,transparent);
  --lg-sheen:color-mix(in srgb,#fff 10%,transparent);
  --lg-drop:0 18px 45px color-mix(in srgb,#000 18%,transparent);
  /* объём края: блик по верхней кромке, «мениск» внутри края, затенение глубины снизу */
  --lg-volume:inset 0 1px 0 var(--lg-rim),inset 1px 0 0 var(--lg-rim-soft),inset 0 0 0 1px color-mix(in srgb,#fff 5%,transparent),
              inset 0 10px 22px -16px var(--lg-rim),inset 0 -12px 24px -18px var(--lg-depth);
}
html[data-theme="light"]{
  --lg-rim:color-mix(in srgb,#fff 70%,transparent);
  --lg-rim-soft:color-mix(in srgb,#fff 35%,transparent);
  --lg-depth:color-mix(in srgb,#000 10%,transparent);
  --lg-sheen:color-mix(in srgb,#fff 32%,transparent);
}
html:not(.client-user-glass-off) :is(.client-user,.panel,.overview-metric,.welcome-card,.manager-card,.device-card,.notification-card,.assignment-card){
  box-shadow:var(--lg-drop),var(--lg-volume);
  backdrop-filter:blur(var(--site-blur,18px)) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter:blur(var(--site-blur,18px)) saturate(170%) brightness(1.04);
}
/* блик сверху и пятно света у верхнего края — поверх собственной заливки; у приветствия и карточки менеджера свой градиент */
html:not(.client-user-glass-off) :is(.client-user,.panel,.overview-metric,.device-card,.notification-card,.assignment-card){
  background-image:
    radial-gradient(130% 70% at var(--lg-light) -10%,var(--lg-sheen),transparent 62%),
    linear-gradient(180deg,var(--lg-rim-soft),transparent 38%);
}
/* непрочитанное уведомление сохраняет свою подсветку */
html:not(.client-user-glass-off) .notification-card.unread{
  box-shadow:0 8px 24px color-mix(in srgb,var(--c-danger) 10%,transparent),var(--lg-volume);
}
/* кнопки на стекле: тот же объём края, мельче */
html:not(.client-user-glass-off) :is(.text-btn,.icon-btn,.sidebar-action){
  box-shadow:inset 0 1px 0 var(--lg-rim),inset 0 -6px 12px -10px var(--lg-depth),0 6px 16px color-mix(in srgb,#000 14%,transparent);
}
/* нажатие — стекло «проседает», как у карточек приложения; плавная смена темы сохраняется */
html:not(.client-user-glass-off):not(.client-user-effects-off):not(.server-effects-off) :is(.assignment-card,.notification-card,.device-card,.overview-metric,.text-btn,.icon-btn,.sidebar-action){
  transition:transform .14s cubic-bezier(.22,.61,.36,1),background-color .3s ease,color .3s ease,border-color .3s ease,
             box-shadow .3s ease,background .3s ease,filter .3s ease;
}
html:not(.client-user-glass-off):not(.client-user-effects-off):not(.server-effects-off) :is(.assignment-card,.notification-card,.device-card,.overview-metric,.text-btn,.icon-btn,.sidebar-action):active{
  transform:scale(.985);
}
/* общий свет окна покачивается около «сверху слева» (~14 с), как GlassBackground.lightDir в приложении */
@keyframes lgLightSway{0%,100%{--lg-light:14%}50%{--lg-light:62%}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not(.client-user-glass-off):not(.client-user-effects-off):not(.server-effects-off){animation:lgLightSway 14s ease-in-out infinite}
}
/* телефон: размытие и насыщенность легче — у мобильного GPU backdrop-filter самый дорогой */
@media (max-width:700px){
  html:not(.client-user-glass-off) :is(.client-user,.panel,.overview-metric,.welcome-card,.manager-card,.device-card,.notification-card,.assignment-card){
    backdrop-filter:blur(min(var(--site-blur,18px),14px)) saturate(150%);
    -webkit-backdrop-filter:blur(min(var(--site-blur,18px),14px)) saturate(150%);
  }
}

/* рабочий режим судьи: меню только с рабочими разделами; «Обучение» — не в меню (плитка Главной или кнопка в углу) */
.nav-item.nav-offmenu, .nav-item.focus-off { display: none !important; }
.work-corner { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; gap: 8px; }
.work-corner[hidden] { display: none; }
.work-corner button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text-primary); font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / .3); backdrop-filter: blur(10px); }
.work-corner button:hover { background: var(--accent); color: var(--accent-contrast, #fff); }
@media (max-width: 700px) { .work-corner { right: 12px; bottom: 84px; } .work-corner button { height: 36px; padding: 0 12px; font-size: .85rem; } }
/* ближайшие вылеты судьи у секундомера */
.mj-near { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 8px 0; padding-bottom: 2px; }
.mj-near[hidden] { display: none; }
.mj-near-title { color: var(--text-muted); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.mj-near button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.mj-near button.live { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 700; }