/* =========================================================================
   ПРОТОТИП №10 — общая лента уведомлений.
   Панель-объяснение (общая для мобильных прототипов) + стили ленты.
   Собственные классы — с префиксом `na-` (в клоне таких нет).
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:380px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__lead b{color:#fff;font-weight:600}
.proto-panel__now{margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#7E8894;margin:22px 0 10px}
.proto-flow{display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;transition:background .25s ease,border-color .25s ease}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-panel__list code,.proto-panel__lead code{font-size:11px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;color:#DDE3EA}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
.proto-adapt{display:flex;flex-direction:column;gap:8px}
.proto-adapt__item{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-adapt__item b{color:#fff;font-weight:600}
.proto-adapt__tz{display:block;font-size:11px;color:#8FA0B4;margin-bottom:4px}
.proto-adapt__tz s{color:#C98A8A}
@media (max-width:1150px){.proto-panel{display:none}}

/* ---- Состояния и варианты (методология прототипов, см. CLAUDE.md) ------- */
.proto-var{margin-bottom:12px}
.proto-var__t{font-size:12px;font-weight:600;color:#E7EAEE;margin-bottom:6px}
.proto-var__chips{display:flex;flex-wrap:wrap;gap:6px}
.proto-var__chip{padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;line-height:1.3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.proto-var__chip:hover{background:rgba(255,255,255,.12);color:#fff}
.proto-var__chip.is-on{background:rgba(74,134,199,.28);border-color:#4A86C7;color:#fff}
.proto-var__hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:#8FA0B4}
.proto-check{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.proto-check button{padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#fff;background:#3F73AB;cursor:pointer}
.proto-check button:hover{background:#4A86C7}
.proto-check__res{font-size:11.5px;line-height:1.45;color:#8FA0B4;white-space:pre-line}

/* =========================================================================
   ТОЧКИ ВХОДА
   ========================================================================= */
.na-bell{position:relative}
.na-bell__badge{position:absolute;top:-4px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:100px;
  background:var(--accent500);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center;
  border:1px solid #fff}
.na-bell__badge--crit{background:var(--red)}
.na-menu__badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent500);
  color:#fff;font-size:11px;font-weight:600;line-height:20px;text-align:center}

/* Метка компании: цветной знак + короткое имя (О-10) */
.na-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.na-cnt{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent500);color:#fff;
  font-size:10.5px;font-weight:600;line-height:18px;text-align:center;flex:0 0 auto;font-style:normal}
.na-cnt--blue{background:var(--primary500)}

/* Табы компаний — .tab клона + знак и счётчик */
.na-tabs .tab{gap:6px}
.na-tabs .tab .ic{flex:0 0 auto}

/* Шторка выбора компании: плитка + колокол-число справа (М-4) */
.otlv__item.na-coitem{padding:0;align-items:stretch;gap:0}
.na-coitem__main{flex:1;min-width:0;text-align:left;padding:12px}
.na-coitem__bell{flex:0 0 56px;display:flex;align-items:center;justify-content:center;gap:2px;
  border-left:1px solid var(--text300);position:relative}
.na-coitem__bell:active{background:var(--default5)}
.na-coitem__bell .na-cnt{position:absolute;top:8px;right:6px}
.na-hint{display:flex;align-items:flex-start;gap:6px;margin-top:12px;line-height:1.45}

/* =========================================================================
   ЛЕНТА
   ========================================================================= */
.na-list{padding:12px 12px 120px;display:flex;flex-direction:column;gap:8px}
.na-list .sum-stale{margin:0}
.na-stale{align-items:center}
.na-stale__btn{color:var(--statusWarning);text-decoration:underline;flex:0 0 auto;padding:4px 0}

/* Заголовок дня липнет к верху (№9) */
.na-day{position:sticky;top:0;z-index:3;margin:4px -12px -4px;padding:6px 16px 8px;
  display:flex;align-items:center;gap:6px;background:linear-gradient(var(--surface) 70%,rgba(228,229,236,0))}
.na-day--co{padding-top:10px}

/* --------------------------- Строка -------------------------------------- */
.na-row{position:relative;border-radius:12px;overflow:hidden;background:var(--white);touch-action:pan-y}
.na-row__bg{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 18px;color:#fff;opacity:0;transition:opacity .12s ease}
.na-row__bg .p3m{color:#fff}
.na-row__bg--read{background:var(--green);justify-content:flex-start}
.na-row__bg--hide{background:var(--text700);justify-content:flex-end}
.na-row.is-read .na-row__bg--read{opacity:1}
.na-row.is-hide .na-row__bg--hide{opacity:1}

.na-row__body{position:relative;display:flex;background:var(--white);border-radius:12px;cursor:pointer;user-select:none}
.na-row__body:active{background:#F7F8F9}
.na-row__body--flat{cursor:default}
.na-row__body--flat:active{background:var(--white)}
.na-row--read .na-row__body{background:var(--default5)}
.na-row--read .na-row__body:active{background:#EFF0F1}
.na-row--read .na-row__body--flat:active{background:var(--default5)}

/* Срочность — полоса во всю высоту. Слово — только у двух верхних классов */
.na-row__loud{width:4px;flex:0 0 4px;align-self:stretch;border-radius:12px 0 0 12px}
.na-row--read .na-row__loud{opacity:.45}
.na-row__col{flex:1;min-width:0;padding:10px 12px 12px 10px}
.na-row__meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-height:15px}
.na-co{display:inline-flex;align-items:center;gap:5px;min-width:0;flex:0 1 auto}
.na-co__name{font-size:11px;font-weight:500;line-height:1.3;color:var(--text700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-loud{font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap;flex:0 0 auto}
.na-row__time{margin-left:auto;font-size:11px;font-weight:400;line-height:1.4;color:var(--text600);white-space:nowrap;flex:0 0 auto}
.na-row__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--primary400)}
.na-row__title{margin-bottom:3px}
.na-row__text{color:var(--text700)}
.na-clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.na-row--read .na-row__title{color:var(--text700)}
.na-row--read .na-row__text{color:var(--text600)}
/* Закрытое — приглушено: итог в чипе, полоса бледнеет (О-15) */
.na-row--closed .na-row__loud{opacity:.3}
.na-row--closed .na-row__title{color:var(--text700)}
.na-row__go{flex:0 0 28px;display:flex;align-items:center;justify-content:flex-start;padding-right:4px}

.na-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Д-1: живая строка открытой проблемы и итог закрытой */
.na-row__state{display:flex;align-items:flex-start;gap:6px;margin-top:7px;line-height:1.4}
.na-row__state .ic{margin-top:1px}
.na-row__snz{display:flex;align-items:flex-start;gap:6px;margin-top:4px;color:var(--text600);line-height:1.4}
.na-row__res{display:flex;align-items:flex-start;gap:5px;margin-top:7px;color:var(--text800);line-height:1.4}
.na-row__res .ic{margin-top:1px}
.na-row__resfull{margin-top:2px;color:var(--text600);line-height:1.45}
.na-row--closed .na-row__text{color:var(--text600)}
/* П-6: быстрые кнопки записи — .btn-action, нейтральный тон */
.na-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.btn-action.na-act{background:var(--taskNeutralBg);padding:5px 10px 5px 8px;gap:6px}
.btn-action.na-act .lbl{font-size:12.5px;color:var(--text900)}
.btn-action.na-act:active{background:var(--text300)}

/* Пачка однотипных: «+ ещё N» (как свёртка тревог машины) и край второй
   карточки под первой */
.na-row--stack{overflow:visible;margin-bottom:5px}
.na-row--stack::after{content:'';position:absolute;left:8px;right:8px;bottom:-5px;height:5px;border-radius:0 0 10px 10px;
  background:var(--white);opacity:.7;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.na-row--stack.na-row--read::after{background:var(--default5)}
.na-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 8px;border-radius:6px;
  background:var(--default10);color:var(--text700)}
.na-more:active{background:var(--text300)}
.na-stack{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:14px;background:rgba(117,113,126,.08)}
.na-stack__head{display:flex;align-items:center;gap:6px;padding:2px 4px 2px 6px}
.na-stack__fold{color:var(--primary500);padding:4px}
.na-stack__t{flex:1;min-width:0;color:var(--text800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Раскрытая строка: время в двух поясах, пояснения, быстрые действия */
.na-row__extra{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--text300)}
.na-row__tz,.na-row__note{display:flex;align-items:flex-start;gap:6px;color:var(--text700);line-height:1.45}
.na-row__tz .ic,.na-row__note .ic{margin-top:1px}

/* --------------------------- Закреплённое -------------------------------- */
.na-pinhead{display:flex;align-items:center;gap:6px;padding:2px 4px 0}
.na-pinsep{height:4px}
.na-dec{display:flex;flex-direction:column;gap:6px;width:100%;padding:12px;border-radius:12px;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--primary100);text-align:left}
.na-dec:active{background:#F7F8F9}
.na-dec__head{display:flex;align-items:center;gap:8px;width:100%}
.na-dec__lines{display:flex;flex-direction:column;gap:3px;padding-left:28px;width:100%}
.na-dec__line{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;line-height:1.35;color:var(--text700)}
.na-dec__rest{margin-top:1px}

/* --------------------------- Шапка списка -------------------------------- */
.na-note{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:10px 12px;border-radius:10px}
.na-note .p3{flex:1;min-width:0;color:var(--text800);line-height:1.45}
.na-note--info{background:var(--primary50);border:1px solid var(--primary100)}
.na-note--warn{background:var(--yellow10);border:1px solid rgba(234,182,49,.5)}
.na-note--mute{background:var(--default5);border:1px solid var(--bgGray30)}
button.na-note{cursor:pointer}
.na-note__x{flex:0 0 auto;padding:3px}

/* Ф-7: строка активного фильтра — тот же вид, что .select-activator */
.na-sum{display:flex;align-items:stretch;background:var(--white);border:1px solid var(--bgGray30);border-radius:8px;min-height:46px}
.na-sum__main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 4px 7px 12px;text-align:left}
.na-sum__main:active{background:var(--default5)}
.na-sum__txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.na-sum__txt .p3m{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-sum__k{font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text600)}
.na-sum__x{flex:0 0 44px;display:flex;align-items:center;justify-content:center}
.na-sum__x:active{background:var(--default5)}

/* С-6: плашка «Новые» — не сдвигает список под пальцем */
.na-newpill{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:6px;
  padding:8px 14px;color:var(--primary600)}

/* --------------------------- Подвал и состояния -------------------------- */
.na-tail{display:flex;align-items:flex-start;gap:8px;padding:14px 6px 0;line-height:1.5}
.na-more-load{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 4px}
.na-spin-sm{width:24px;height:24px;border-width:2.5px;margin:0}
.na-btn-sm{height:36px;padding:0 16px;width:auto}
.na-refresh{display:flex;justify-content:center;padding:4px 0 8px}
.na-refresh .spinner{width:28px;height:28px;border-width:2.5px}
.na-empty{flex:1;min-height:420px;display:flex;flex-direction:column;justify-content:center;padding:0 12px 100px}
.na-empty .placeholder{flex:0 0 auto}
.na-empty__btn{display:flex;justify-content:center;padding:16px 24px 0}
.na-empty__btn .btn-secondary{max-width:280px}
.na-bone{display:block;border-radius:4px;background:linear-gradient(90deg,var(--bgGray30) 25%,var(--icons200) 50%,var(--bgGray30) 75%);
  background-size:200% 100%;animation:naBone 1.2s ease-in-out infinite}
@keyframes naBone{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ------------------------------ Снекбар ---------------------------------- */
.na-snack-host{position:absolute;left:12px;right:12px;bottom:104px;z-index:66;display:flex;justify-content:center;pointer-events:none}
.na-snack{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(29,33,38,.96);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto}
.na-snack__btn{color:#8CABCD;flex:0 0 auto;padding:4px 2px}
.na-snack__bar{position:absolute;left:0;bottom:0;height:2px;background:var(--primary400);width:100%;
  animation-name:naSnackBar;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes naSnackBar{from{width:100%}to{width:0}}

/* =========================================================================
   ШТОРКИ
   ========================================================================= */
.na-count{padding:10px 12px;border-radius:8px;background:var(--default5);color:var(--text800);line-height:1.45}
.na-count b{font-weight:600;color:var(--text900)}
.na-count--zero{background:var(--yellow10);color:var(--statusWarning)}

/* Предпросмотр объекта другой компании */
.cbs__step .na-dot{margin-right:5px;vertical-align:1px;width:7px;height:7px}
.na-pv{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.na-pv__kv{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--text300)}
.na-pv__rec{padding:10px 12px;border-radius:10px;background:var(--default5)}
.na-pv__meta{color:var(--text600)}
.na-pv__btns{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.na-pv__btns .btn-primary,.na-pv__btns .btn-secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
/* Решение на предпросмотре: строка запроса и кнопки его набора */
.na-pv__dec{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:var(--primary50);border:1px solid var(--primary100)}
.na-pv__dec .na-row__state{margin-top:0}
.na-pv__decbtns{display:flex;flex-wrap:wrap;gap:8px}
.btn-action.na-decbtn{padding:7px 12px 7px 10px;gap:6px}
.btn-action.na-decbtn .lbl{font-size:13.5px}

/* Загрузка компании при переходе */
.na-sync__bar{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.na-sync__bar .pbar{height:6px;border-radius:3px;overflow:hidden;background:rgba(63,70,78,.1);display:flex}

/* ----------------- Имитации ОС: экран блокировки и пуши -----------------
   Не часть ДС: экран блокировки, системный запрос разрешения и настройки
   телефона нужны, чтобы показать пуши (Д-2, Д-4, Д-5). */
.na-lock{position:absolute;inset:0;z-index:92;padding:54px 10px 0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;
  background:linear-gradient(165deg,#41607e 0%,#24384e 55%,#151e29 100%)}
.na-lock::-webkit-scrollbar{display:none}
.na-lock__clock{text-align:center;font-size:64px;font-weight:300;line-height:1;color:#fff;letter-spacing:-1px}
.na-lock__date{text-align:center;font-size:15px;color:rgba(255,255,255,.85);margin:6px 0 22px}
.na-lock__list{display:flex;flex-direction:column;gap:8px;padding-bottom:20px}
.na-lock__empty{text-align:center;color:rgba(255,255,255,.7);font-size:13px}
.na-lock__hint{margin-top:auto;padding:12px 0 18px;text-align:center;font-size:10.5px;color:rgba(255,255,255,.55)}
.na-push{position:relative;display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  padding:10px 12px;border-radius:18px;background:rgba(246,246,246,.94);backdrop-filter:blur(14px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.na-push--crit{box-shadow:0 0 0 2px rgba(234,76,66,.55),0 6px 20px rgba(0,0,0,.25)}
.na-push--quiet{background:rgba(246,246,246,.82)}
.na-push__app{flex:0 0 36px;height:36px;border-radius:9px;background:var(--primary500);display:flex;align-items:center;justify-content:center;overflow:hidden}
.na-push__app img{width:28px;height:28px;object-fit:contain}
.na-push__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.na-push__top{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#6b7078}
.na-push__top b{font-weight:600;color:#3a3f45;text-transform:uppercase;letter-spacing:.2px}
.na-push__title{font-size:13px;font-weight:600;color:#111;line-height:1.3}
.na-push__body{font-size:12.5px;color:#333;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.na-push--exp .na-push__body{-webkit-line-clamp:6}
.na-push__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.na-push__btn{padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.07);font-size:12.5px;font-weight:600;color:#1d4f86}
.na-push__btn:active{background:rgba(0,0,0,.14)}
.na-push__reply{display:flex;gap:6px;margin-top:8px}
.na-push__reply input{flex:1;min-width:0;height:34px;border-radius:17px;border:1px solid rgba(0,0,0,.15);padding:0 12px;font:inherit;font-size:13px;background:#fff}
.na-push__send{flex:0 0 34px;height:34px;border-radius:50%;background:#2f6db0;display:flex;align-items:center;justify-content:center}
.na-push__err{margin-top:4px;font-size:11.5px;color:#c4302b}
.na-push__sending,.na-push__unlock{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#444}
.na-spin-xs{width:14px;height:14px;border-width:2px;margin:0}

/* Д-3: баннер в открытом приложении — карточка ДС с полосой класса */
.na-inapp{position:absolute;left:8px;right:8px;top:50px;z-index:88;display:flex;align-items:stretch;
  transform:translateY(-140%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.na-inapp.on{transform:translateY(0)}
.na-inapp__card{flex:1;min-width:0;display:flex;text-align:left;background:var(--white);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.na-inapp__stripe{width:4px;flex:0 0 4px}
.na-inapp__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px 34px 10px 10px}
.na-inapp__top{display:flex;align-items:center;gap:8px}
.na-inapp__title{color:var(--text900)}
.na-inapp__text{color:var(--text700);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-inapp__x{position:absolute;right:6px;top:6px;padding:6px}

/* Д-5: экран-объяснение и системный запрос разрешения */
.na-explain{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px}
.na-explain__ico{width:72px;height:72px;border-radius:50%;background:var(--primary50);display:flex;align-items:center;justify-content:center}
.na-sys{position:absolute;inset:0;z-index:96;background:rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px}
.na-sys__box{width:100%;max-width:280px;border-radius:14px;background:rgba(242,242,242,.97);overflow:hidden;text-align:center}
.na-sys__t{padding:18px 16px 4px;font-size:15px;font-weight:600;color:#111;line-height:1.3}
.na-sys__s{padding:0 16px 16px;font-size:12.5px;color:#333;line-height:1.35}
.na-sys__btns{display:flex;border-top:1px solid rgba(0,0,0,.15)}
.na-sys__btns button{flex:1;padding:12px 0;font-size:15px;color:#1a6ad6}
.na-sys__btns button+button{border-left:1px solid rgba(0,0,0,.15)}
.na-sys .na-lock__hint{margin-top:14px;color:rgba(255,255,255,.8)}
.na-phoneset{position:absolute;inset:0;z-index:97;background:#f2f2f6;padding:48px 0 0;overflow-y:auto}
.na-phoneset__bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 12px}
.na-phoneset__bar button{color:#1a6ad6;font-size:15px}
.na-phoneset__bar b{font-size:16px}
.na-phoneset__bar span{width:60px}
.na-phoneset__app{display:flex;align-items:center;gap:10px;padding:8px 16px 14px;font-size:15px;font-weight:600}
.na-phoneset__app img{width:34px;height:34px;border-radius:8px;background:#fff;object-fit:contain}
.na-phoneset__row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:12px 16px;background:#fff;border-bottom:1px solid #e3e3e8;font-size:14px;color:#111}
.na-phoneset__row small{color:#6b7078;font-size:12px}
.na-phoneset__row.is-off{opacity:.45}
.na-phoneset__cap{padding:18px 16px 6px;font-size:12px;color:#6b7078;text-transform:uppercase;letter-spacing:.3px}

/* -------------- Имитация экрана телефона: число на иконке (Ч-1) ----------- */
.na-home{position:absolute;inset:0;z-index:95;padding:72px 22px 0;
  background:linear-gradient(160deg,#3b5875 0%,#1f3247 55%,#18222e 100%)}
.na-home__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 12px}
.na-home__app{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.na-home__ico{width:60px;height:60px;border-radius:15px;background:rgba(255,255,255,.18)}
.na-home__ico--ot{background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25)}
.na-home__ico--ot img{width:42px;height:42px;object-fit:contain}
.na-home__lbl{font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.na-home__badge{position:absolute;top:-7px;right:2px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;
  background:#FF3B30;color:#fff;font-size:13px;font-weight:600;line-height:24px;text-align:center}

/* ------------------------------- Настройки -------------------------------- */
.na-setwrap{padding:16px 16px 120px;display:flex;flex-direction:column;gap:16px}
.na-setco{gap:10px}
.na-types.is-muted{opacity:.6}
.na-set__sec{color:var(--text700);padding:4px 4px 0;margin-bottom:-6px;text-transform:uppercase;letter-spacing:.3px;font-size:11px}
.na-set__field{display:flex;flex-direction:column;gap:4px}
.na-set__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.select-activator.is-err{border-color:var(--red)}
.na-set__err{margin:4px 0 0 2px;color:var(--statusDanger);line-height:1.4}
.na-set__dig{display:flex;align-items:center;gap:8px}
.na-set__del{flex:0 0 36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.na-set__del:active{background:var(--default5)}
.na-set__eff{display:flex;align-items:flex-start;gap:6px;color:var(--text700);line-height:1.45;margin-top:-6px}
.na-set__eff b{font-weight:600;color:var(--text900)}
.na-type{display:flex;flex-direction:column}
.na-chs{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.switch.is-dim{opacity:.45}
.na-mutelvl{align-items:flex-start}
.na-radio{width:18px;height:18px;flex:0 0 18px;margin-top:1px;border-radius:50%;border:1.5px solid var(--text500);position:relative}
.na-radio.on{border-color:var(--primary500)}
.na-radio.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary500)}
.na-tg{border:1px solid var(--primary100);background:var(--primary50)}
.na-steps{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.na-step{display:flex;align-items:flex-start;gap:10px}
.na-step__n{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--primary50);color:var(--primary600);
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.na-perm{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;background:var(--yellow10);border:1px solid rgba(234,182,49,.5)}
.na-perm .p3{color:var(--text800)}
.na-perm__btn{color:var(--primary600);flex:0 0 auto;padding:4px 0}
.na-copyres{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.na-copyres__row{display:flex;align-items:flex-start;gap:10px}
.na-copyres__row .na-dot{margin-top:6px}
.na-timein{font-size:20px!important;letter-spacing:1px}

/* Тост из двух строк: текст ответа сервера */
.toast.na-toast2{display:flex;flex-direction:column;gap:2px;max-width:88%}
.na-toast2__t{font-weight:600}
.na-toast2__b{font-weight:400;opacity:.92;font-size:12px;line-height:1.35}
.na-set__warn{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;border-radius:8px;
  background:var(--yellow10);color:var(--statusWarning);line-height:1.45}
.na-set__warn span{flex:1;min-width:0}
