/* Стили дашборда. Перенесены из prototype/dashboard.html без изменений —
   внешний вид согласован с заказчиком. В конце файла добавлено только то,
   чего в прототипе не было: экран входа, плашка конфликта версий и
   неинтерактивное название строки для участника без прав администратора. */
:root{
  --ink:#0A1118;
  --panel:#111C25;
  --panel-2:#16232E;
  --panel-3:#1B2C39;
  --rule:#22343F;
  --rule-2:#2E4757;
  --text:#D8E4EE;
  --text-2:#95A9B9;
  --muted:#677E8F;
  --red:#E64535;
  --amber:#F0B02A;
  --green:#31B978;
  --grey:#5A7183;
  --red-bg:rgba(230,69,53,.10);
  --amber-bg:rgba(240,176,42,.10);
  --green-bg:rgba(49,185,120,.10);
  --sans:'PT Sans','Segoe UI',system-ui,sans-serif;
  --narrow:'PT Sans Narrow','Arial Narrow',var(--sans);
  --mono:'IBM Plex Mono','Consolas',monospace;
  --col-name:266px;
  --col-check:66px;
  --col-pocket:minmax(154px,1fr);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid #6FB6E8;outline-offset:2px}

/* ─────────── шапка ─────────── */
.top{
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#0E1A23,#0A1118);
  padding:18px 24px 0;
}
.top-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;margin-bottom:6px;
}
h1{
  font-family:var(--narrow);font-weight:700;font-size:29px;line-height:1.05;
  margin:0;letter-spacing:.01em;text-transform:uppercase;
}
h1 span{color:var(--text-2);font-weight:400}
.sub{color:var(--text-2);font-size:12.5px;margin-top:7px}
.sub b{color:var(--text);font-weight:400;font-family:var(--mono);font-size:12px}

/* Плитки разбиты на две смысловые группы: проверки (ячейки) и ошибки (карточки).
   Каждая группа — отдельный флекс-контейнер, поэтому при нехватке ширины
   переносится ГРУППА ЦЕЛИКОМ вместе со своей подписью и разделителем. */
.kpis{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
.kpi-group{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
/* разделитель между группами — тонкая линия в цвете бордеров + отступ */
.kpi-group + .kpi-group{border-left:1px solid var(--rule);padding-left:30px}
/* надгруппа-подпись — в том же «эйбрау»-стиле, что и подписи плиток */
.kpi-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.kpi-tiles{display:flex;gap:26px;align-items:flex-end}
.kpi{text-align:right}
.kpi .num{font-family:var(--narrow);font-size:31px;font-weight:700;line-height:1;letter-spacing:.01em}
.kpi .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin-top:5px}
.kpi.red .num{color:var(--red)} .kpi.amber .num{color:var(--amber)} .kpi.green .num{color:var(--green)}

/* полоса готовности — «рельсовая» шкала */
.gauge{margin:16px 0 0;padding-bottom:16px}
/* ряд процентов НАД полосой: фиксированная высота держит место под подписи и
   выноски, чтобы они не наезжали на KPI выше */
.gauge-marks{position:relative;height:20px;margin-bottom:3px}
.gm-label{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;line-height:1}
.gm-g{color:var(--green)} .gm-y{color:var(--amber)}
/* выноска: вертикальная чёрточка у центра сегмента + короткая горизонтальная
   перемычка к смещённой подписи. Рисуются только при смещении. */
.gm-lead{position:absolute;top:13px;height:7px;width:1px;background:var(--rule-2)}
.gm-bridge{position:absolute;top:13px;height:1px;background:var(--rule-2)}
.gauge-bar{
  position:relative;height:12px;border:1px solid var(--rule-2);
  background:
    repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,255,255,.05) 15px 16px),
    var(--panel);
  overflow:hidden;
}
.gauge-fill{position:absolute;inset:0 auto 0 0;background:var(--green);opacity:.85;transition:width .4s ease}
.gauge-fill.part{background:var(--amber)}
.gauge-legend{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* ─────────── панель управления ─────────── */
.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 24px;border-bottom:1px solid var(--rule);background:var(--panel);
}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--rule-2);color:var(--text-2);
}
.chip[aria-pressed="true"]{background:var(--panel-3);color:var(--text);border-color:#3E5C71}
.chip:disabled{opacity:.4;cursor:default}
.tb-sep{flex:1}

/* фильтр карточек по людям — выпадашка под кнопкой */
.filt{position:relative}
.filt-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:45;
  width:250px;max-height:360px;overflow:auto;
  background:var(--panel);border:1px solid var(--rule-2);padding:9px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.filt-mode{display:flex;border:1px solid var(--rule-2);margin-bottom:9px}
.filt-mode button{
  flex:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 4px;color:var(--text-2);background:none;cursor:pointer;
}
.filt-mode button+button{border-left:1px solid var(--rule-2)}
.filt-mode button[aria-pressed="true"]{background:var(--panel-3);color:var(--text)}
.filt-list{display:flex;flex-direction:column}
.filt-row{display:flex;align-items:center;gap:8px;padding:4px 3px;font-size:12px;color:var(--text);cursor:pointer}
.filt-row:hover{background:var(--panel-2)}
.filt-row input{width:13px;height:13px;flex:0 0 auto;accent-color:var(--green)}
.filt-row em{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.filt-empty{font-size:11.5px;color:var(--muted);padding:4px 3px}
.filt-sub{margin-top:7px;border-top:1px solid var(--rule);padding-top:6px}
.filt-subhead{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:none;cursor:pointer;padding:3px 2px;width:100%;text-align:left;
}
.filt-subhead:hover{color:var(--text-2)}
.filt-foot{margin-top:9px;border-top:1px solid var(--rule);padding-top:8px}
.filt-foot button{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--rule-2);padding:5px 9px;cursor:pointer;background:none;
}
.filt-foot button:hover{color:var(--text);border-color:#4A6C84}
.hint{font-size:11.5px;color:var(--muted)}
.save{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;text-transform:uppercase}
.save::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grey);transition:background .2s}
.save.ok::before{background:var(--green)}
.save.busy::before{background:var(--amber)}
.save.off::before{background:var(--red)}
.banner{padding:9px 24px;background:rgba(49,185,120,.09);border-bottom:1px solid var(--rule);
  font-size:12px;color:var(--text-2)}
.banner b{color:var(--text);font-weight:400}
.hint kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--rule-2);padding:1px 4px;color:var(--text-2)}

/* ─────────── матрица ─────────── */
.scroller{overflow-x:auto;padding-bottom:60px}
.grid{
  display:grid;
  grid-template-columns:var(--col-name) repeat(6,var(--col-check)) 20px repeat(3,var(--col-pocket));
  min-width:1180px;
}
.h{
  position:sticky;top:0;z-index:5;background:var(--panel-2);
  border-bottom:1px solid var(--rule-2);
  padding:9px 8px;font-family:var(--narrow);text-transform:uppercase;
  font-size:11.5px;letter-spacing:.06em;color:var(--text-2);
}
.h.g1{border-left:1px solid var(--rule-2);line-height:1.22;font-weight:700;color:var(--text);font-size:11px}
.h.lvl1{height:62px;overflow:hidden}
.h.g2{top:62px;font-size:10.5px;letter-spacing:.08em;text-align:center;font-family:var(--mono);color:var(--muted)}
.h.spacer{background:var(--panel-2)}
.h.name{border-left:none;display:flex;align-items:flex-end}
.grp-a{grid-column:span 2}
.pocket-hdr{grid-column:span 3;border-left:1px solid var(--rule-2)}
.h-row2{position:sticky;z-index:5}

.pocket-labels{display:contents}
.pl{
  position:sticky;top:62px;z-index:5;background:var(--panel-2);border-bottom:1px solid var(--rule-2);
  padding:9px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.pl.red{color:var(--red);border-left:1px solid var(--rule-2)}
.pl.amber{color:var(--amber)}
.pl.green{color:var(--green)}

/* строка = «путь» */
.cell{border-bottom:1px solid var(--rule);padding:10px 8px;position:relative}
.row-name{
  border-bottom:1px solid var(--rule);padding:12px 12px 12px 10px;
  display:flex;gap:10px;align-items:flex-start;
}
.signal{
  flex:0 0 auto;width:19px;padding:4px 0;border:1px solid var(--rule-2);border-radius:10px;
  background:#070C11;display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:1px;
}
.lamp{width:9px;height:9px;border-radius:50%;background:#1D2A34}
.signal.red .lamp.l1{background:var(--red);box-shadow:0 0 7px rgba(230,69,53,.75)}
.signal.amber .lamp.l2{background:var(--amber);box-shadow:0 0 7px rgba(240,176,42,.75)}
.signal.green .lamp.l3{background:var(--green);box-shadow:0 0 7px rgba(49,185,120,.7)}
.rn-text{min-width:0}
.tt{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.tt b{color:var(--text);font-weight:600}
.rn-title{font-family:var(--narrow);font-size:15.5px;line-height:1.15;margin-top:2px;text-transform:uppercase;
  letter-spacing:.01em;text-align:left;padding:0;color:var(--text);border-bottom:1px solid transparent}
.rn-title:hover{border-bottom-color:var(--rule-2)}

/* «путь» под ячейками проверок */
.checkzone{position:relative}
.checkzone::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.28;
}
.checkzone.st-red{color:var(--red)} .checkzone.st-amber{color:var(--amber)}
.checkzone.st-green{color:var(--green)} .checkzone.st-idle{color:var(--grey)}
.check{
  border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  padding:10px 4px;
}
.chk{
  width:34px;height:34px;border:1px solid var(--rule-2);background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;color:var(--muted);position:relative;z-index:1;
  transition:background .15s,border-color .15s;
}
.chk:hover{border-color:#4A6C84}
.chk.untested{border-style:dashed}
.chk.pass{color:var(--green);border-color:rgba(49,185,120,.5);background:var(--green-bg)}
.chk.defect{color:var(--red);border-color:rgba(230,69,53,.55);background:var(--red-bg)}
.chk.retest{color:var(--amber);border-color:rgba(240,176,42,.5);background:var(--amber-bg)}
.chk.has-hist::after{content:"";position:absolute;left:2px;bottom:2px;
  border-left:5px solid transparent;border-bottom:5px solid currentColor;opacity:.55}
.chk-badge{
  position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;border-radius:7px;
  background:var(--panel-3);border:1px solid var(--rule-2);
  font-family:var(--mono);font-size:9px;line-height:12px;color:var(--text-2);
}
.gap{border-bottom:1px solid var(--rule)}

/* карманы */
.pocket{
  border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);
  padding:8px;min-height:62px;display:flex;flex-direction:column;gap:6px;
  transition:background .12s;
}
.pocket.p-red{border-left-color:var(--rule-2);background:linear-gradient(180deg,rgba(230,69,53,.045),transparent 60%)}
.pocket.p-amber{background:linear-gradient(180deg,rgba(240,176,42,.045),transparent 60%)}
.pocket.p-green{background:linear-gradient(180deg,rgba(49,185,120,.045),transparent 60%)}
.pocket.over{background:var(--panel-3);box-shadow:inset 0 0 0 1px #4A6C84}
.card{
  border:1px solid var(--rule-2);background:var(--panel-2);padding:6px 7px 6px 9px;
  cursor:grab;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.card.c-red::before{background:var(--red)}
.card.c-amber::before{background:var(--amber)}
.card.c-green::before{background:var(--green)}
.card:hover{background:var(--panel-3)}
.card.dragging{opacity:.4}
.card.sel{box-shadow:inset 0 0 0 1px #6FB6E8}
.card-id{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--text-2)}
.card-t{font-size:11.5px;line-height:1.25;margin-top:2px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.add{
  border:1px dashed var(--rule-2);color:var(--muted);font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;padding:5px;text-align:center;text-transform:uppercase;
}
.add:hover{color:var(--text-2);border-color:#4A6C84}
.empty{color:#3D5062;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:4px 2px}

/* стопка карточек: верхняя карточка «пачкой» (тени-слои сзади) + счётчик скрытых */
.card.stacked{
  margin:0 6px 8px 0;
  box-shadow:
    3px 3px 0 0 var(--panel-2), 3px 3px 0 1px var(--rule-2),
    6px 6px 0 0 var(--panel-2), 6px 6px 0 1px var(--rule-2);
}
.stack-count,.stack-collapse{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-align:center;
  border:1px solid var(--rule-2);color:var(--text-2);background:var(--panel-2);
  padding:4px 6px;cursor:pointer;
}
.stack-count:hover,.stack-collapse:hover{color:var(--text);border-color:#4A6C84;background:var(--panel-3)}
.stack-collapse{border-style:dashed;color:var(--muted);text-transform:uppercase;font-size:9px}
/* кнопка «стопки» у названия типа */
.rn-stack{
  display:inline-block;margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-2);padding:2px 6px;cursor:pointer;
}
.rn-stack:hover{color:var(--text-2);border-color:#4A6C84}
.viewing .card.stacked{cursor:default}

/* итоговая строка */
.foot{
  grid-column:1 / -1;border-top:1px solid var(--rule-2);padding:14px 12px;
  display:flex;gap:28px;align-items:baseline;flex-wrap:wrap;background:var(--panel);
}
.foot .lbl{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);font-size:12px}
.foot .val{font-family:var(--mono);font-size:12.5px}
/* метрика по карточкам — обособлена и прижата к правому краю итоговой строки */
.foot-cards{margin-left:auto;display:inline-flex;gap:10px;align-items:baseline;
  padding-left:28px;border-left:1px solid var(--rule-2)}

/* ─────────── боковая панель ─────────── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100%;
  background:var(--panel);border-left:1px solid var(--rule-2);z-index:40;
  transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.dr-head{padding:16px 18px;border-bottom:1px solid var(--rule)}
.dr-body{padding:16px 18px;overflow-y:auto;flex:1}
.dr-foot{padding:14px 18px;border-top:1px solid var(--rule);display:flex;gap:8px;flex-wrap:wrap}
.dr-close{position:absolute;top:13px;right:14px;color:var(--muted);font-size:19px;line-height:1}
.dr-close:hover{color:var(--text)}
.dr-title{font-family:var(--narrow);font-size:19px;text-transform:uppercase;line-height:1.15;margin-top:4px;padding-right:20px}
.field{margin-bottom:15px}
.field .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.field .v{font-size:13px;color:var(--text)}
.btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--rule-2);color:var(--text-2);
}
.btn:hover{background:var(--panel-3);color:var(--text)}
.btn.act{background:var(--panel-3);color:var(--text);border-color:#4A6C84}
.btn.red{border-color:rgba(230,69,53,.5);color:var(--red)}
.lnk{display:block;width:100%;text-align:left;font-size:12px;line-height:1.35;color:var(--text-2);
  border-left:2px solid var(--rule-2);padding:6px 0 6px 9px;margin-bottom:6px}
.lnk:hover{color:var(--text)}
.lnk.c-red{border-left-color:var(--red)}
.lnk.c-amber{border-left-color:var(--amber)}
.lnk.c-green{border-left-color:var(--green)}
.btn.amber{border-color:rgba(240,176,42,.5);color:var(--amber)}
.btn.green{border-color:rgba(49,185,120,.5);color:var(--green)}
.hist{border-left:1px solid var(--rule-2);padding-left:12px;margin-top:2px}
.hist li{list-style:none;font-size:12px;color:var(--text-2);margin-bottom:9px;position:relative}
.hist li::before{content:"";position:absolute;left:-16px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--rule-2)}
.hist li.h-red::before{background:var(--red)}
.hist li.h-amber::before{background:var(--amber)}
.hist li.h-green::before{background:var(--green)}
.cm{border-left:2px solid var(--rule-2);padding:7px 0 7px 10px;margin-bottom:10px}
.cm-dev{border-left-color:#4A8FC4}
.cm-qa{border-left-color:var(--green)}
.cm-h{display:flex;gap:9px;align-items:baseline;margin-bottom:3px}
.cm-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cm-dev .cm-tag{color:#6FB6E8}
.cm-qa .cm-tag{color:var(--green)}
.cm-x{font-size:12.5px;line-height:1.4;color:var(--text)}
.cm-empty{font-size:12px;color:var(--muted)}
/* пометка отредактированного комментария и кнопки автора/руководителя */
.cm-edited{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:italic}
.cm-act{display:flex;gap:12px;margin-top:5px}
.cm-act button{background:none;border:0;padding:0;cursor:pointer;font-size:11px;color:var(--text-2);text-decoration:underline}
.cm-act button:hover{color:var(--text)}
.cm-act button.danger:hover{color:var(--red)}
.cm-edit textarea{margin-bottom:6px}
.cm-edit .row{display:flex;gap:8px}
.hist .when{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.06em}
textarea,select,input[type=text],input[type=password]{
  width:100%;background:var(--ink);border:1px solid var(--rule-2);color:var(--text);
  font-family:var(--sans);font-size:13px;padding:8px;
}
textarea{min-height:78px;resize:vertical}

.person{display:flex;gap:7px;align-items:center;margin-bottom:8px}
.person input[type=text]{flex:1 1 auto}
.person select{flex:0 0 128px}
.person .del{flex:0 0 auto;color:var(--muted);font-size:17px;line-height:1;padding:0 5px}
.person .del:hover{color:var(--red)}
.warn{font-size:11.5px;color:var(--amber);margin-top:-6px;margin-bottom:14px}
.hidden{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media (max-width:760px){
  .top{padding:14px 14px 0}
  h1{font-size:22px}
  .toolbar{padding:10px 14px}
  /* на узком экране группы встают одна под другую, разделитель — горизонтальный */
  .kpis{gap:14px;flex-direction:column;align-items:flex-end}
  .kpi-group + .kpi-group{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:12px}
  .kpi-tiles{gap:18px}
  .kpi .num{font-size:24px}
}

/* ═══════════ добавлено при переносе на сервер ═══════════ */

/* кто вошёл — в правом углу панели инструментов */
.whoami{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-2);
  text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.whoami .role{color:var(--muted)}

/* название строки для участника без прав администратора: тот же вид, но не кнопка */
.rn-title.static{cursor:default}
.rn-title.static:hover{border-bottom-color:transparent}

/* конфликт версий: та же плашка, что и banner, но с кнопками выбора */
.banner.conflict{background:rgba(240,176,42,.10)}
.banner .cf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
.banner .cf .btn{padding:6px 11px}

/* подтверждение переноса карточки в другой тип задания */
.modal-wrap{position:fixed;inset:0;z-index:60;background:rgba(7,12,17,.72);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:100%;max-width:420px;border:1px solid var(--rule-2);background:var(--panel);padding:22px 22px 18px}
.modal .dr-title{margin:0 0 10px;padding:0}
.modal-text{font-size:13px;line-height:1.45;color:var(--text-2)}
.modal-text b{color:var(--text);font-weight:400}
.modal-foot{display:flex;gap:8px;margin-top:20px}

/* ─────────── экран входа ─────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{width:100%;max-width:360px;border:1px solid var(--rule-2);background:var(--panel);padding:28px 26px}
.login-box h1{font-size:22px;margin-bottom:6px}
.login-box .eyebrow{margin-bottom:10px}
.login-sub{color:var(--text-2);font-size:12.5px;margin-bottom:22px}
.login-box .field{margin-bottom:14px}
.login-err{font-size:12.5px;color:var(--red);margin-bottom:14px;min-height:17px}
.login-box .btn{width:100%;text-align:center;padding:11px 13px}

/* режим просмотра на форме входа */
.login-guest{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.login-or{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;text-align:center;margin-bottom:12px}
.login-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}

/* индикатор режима просмотра на доске */
.viewer-badge{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border:1px solid rgba(240,176,42,.55);color:var(--amber);
  background:var(--amber-bg);
}
.viewer-badge::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--amber);margin-right:7px;vertical-align:middle}
/* в режиме просмотра карточки не перетаскиваются — курсор не должен обещать обратное */
.viewing .card{cursor:default}