/* ════════════════════════════════════════════════════════════════════════════
   Alisar · каркас интерфейса v3 (общий для всех рабочих страниц)
   Подключается в <head> каждой страницы ПОСЛЕ её собственного <style>:
     <link rel="stylesheet" href="/ui/shell.css?v=N">
     <script src="/ui/shell.js?v=N" defer></script>
   Перекрывает только оболочку: токены цвета, боковое меню, верхнюю панель,
   заголовки. Содержимое страниц, их обработчики и API не трогает.
   Специфичность поднята через :root — у страниц есть правила вида
   [data-theme="dark"] .sidebar, их нужно перебивать без !important.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── токены v3 поверх токенов страницы ── */
:root:root{
  --v3-brand:#dfff00; --v3-brand-2:#cbe900;
  --v3-ink:#111214;
  --v3-side-w:248px; --v3-top-h:64px;
  --v3-bg:#f4f5f6; --v3-surface:#fff; --v3-surface-2:#fafafa;
  --v3-text:#17191c; --v3-text-2:#5f666e; --v3-text-3:#68707a;
  --v3-line:#e0e3e6; --v3-line-2:#cbd0d5;
  --v3-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* общие имена, которыми пользуются страницы */
  --bg:var(--v3-bg); --canvas:var(--v3-bg);
  --ink:var(--v3-ink); --lime:var(--v3-brand); --lime-deep:var(--v3-brand-2);
  --line:var(--v3-line); --line-2:var(--v3-line-2);
  --mute:var(--v3-text-2);
}
:root:root[data-theme="dark"]{
  --v3-bg:#0f1012; --v3-surface:#151719; --v3-surface-2:#191b1e;
  --v3-text:#f2f4f5; --v3-text-2:#a3aab0; --v3-text-3:#8a9298;
  --v3-line:#292d31; --v3-line-2:#3a4046;
  /* в тёмной теме страницы держат в --ink светлый цвет текста — не трогаем */
  --ink:#EDEFF1; --line:var(--v3-line); --line-2:var(--v3-line-2); --mute:var(--v3-text-2);
}
:root body{background:var(--v3-bg)}

/* техническая строка (узел, модуль, часы) — только админу, в подсказке шапки */
:root .statusbar{display:none}

/* ── боковое меню ── */
:root .sidebar.v3-side{
  width:var(--v3-side-w); flex:none; align-items:stretch;
  background:var(--v3-ink); color:#9ea5ab; border-right:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:16px 12px 12px; position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; z-index:20; overflow:hidden;
}
:root[data-theme="dark"] .sidebar.v3-side{background:#0b0c0d;border-right:1px solid #1f2225}
:root .v3-side .s-logo{
  width:auto; height:auto; background:none; color:#fff; border-radius:0;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:0 8px 16px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:inherit; text-decoration:none;
}
:root .v3-brand-mark{
  width:38px; height:38px; flex:none; border-radius:10px; background:var(--v3-brand); color:var(--v3-ink);
  display:grid; place-items:center; font:800 16px/1 var(--v3-font); letter-spacing:-.05em;
}
:root .v3-brand-name{font:800 15px/1.15 var(--v3-font); color:#fff; letter-spacing:-.02em}
:root .v3-brand-sub{font:500 11px/1.2 var(--v3-font); color:#8a9298; margin-top:3px; display:block}
:root .v3-brand-text{min-width:0}
:root .v3-side .s-agents{display:flex; flex-direction:column; align-items:stretch; gap:0; flex:1 1 auto; overflow:auto; min-height:0; border:0; padding:0; margin:0}
/* у части страниц в меню пустой распорный <nav style="flex:1"> — он делил высоту пополам */
:root .v3-side > nav:empty{display:none}
:root .v3-side .s-foot{display:flex; flex-direction:column; align-items:stretch; gap:3px; margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,.08)}
:root .v3-group{display:flex; flex-direction:column; align-items:stretch; gap:3px; margin:0 0 14px}
:root .v3-group:not(:has(> .s-btn:not([style*="none"]))){display:none}
:root .v3-nav-label{padding:6px 10px 6px; font:800 11px/1 var(--v3-font); letter-spacing:.1em; text-transform:uppercase; color:#80888f}
:root .v3-side .s-btn{
  width:100%; height:auto; min-height:40px; padding:0 10px; border-radius:9px;
  display:flex; align-items:center; justify-content:flex-start; gap:11px;
  color:#a7aeb4; background:transparent; text-decoration:none; cursor:pointer; transition:background .15s,color .15s;
}
:root .v3-side button.s-btn{border:0; font:inherit; text-align:left; -webkit-appearance:none; appearance:none}
:root .v3-side .s-btn svg{width:18px; height:18px; flex:none}
:root .v3-side .s-btn:hover{background:#1c1f22; color:#fff}
:root .v3-side .s-btn.active,
:root[data-theme="dark"] .v3-side .s-btn.active{background:var(--v3-brand); color:var(--v3-ink)}
:root .v3-side .s-btn:focus-visible{outline:2px solid var(--v3-brand); outline-offset:2px}
:root .v3-lbl{font:600 13.5px/1.2 var(--v3-font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* тема переехала в верхнюю панель; кнопка в меню остаётся в DOM — у неё обработчик страницы */
:root .v3-theme-src{display:none!important}

/* ── верхняя панель ── */
:root .topbar.v3-top{
  min-height:var(--v3-top-h); height:auto; padding:10px 28px; gap:14px;
  display:flex; align-items:center; flex-wrap:wrap;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--v3-line); position:sticky; top:0; z-index:15;
}
:root[data-theme="dark"] .topbar.v3-top{background:rgba(21,23,25,.94)}
:root .v3-top .t-brand,:root .v3-crumbs{display:flex; align-items:center; gap:8px; font:500 13px/1.2 var(--v3-font); color:var(--v3-text-2)}
:root .v3-top .t-crumb,:root .v3-crumbs b{color:var(--v3-text); font-weight:700}
:root .v3-top .t-sep,:root .v3-crumbs i{color:#b3b9be; font-style:normal}
:root .v3-top .t-ast{display:none}
:root .v3-tools{margin-left:auto; display:flex; align-items:center; gap:10px}
/* Порядок в шапке: путь и инструменты — первой строкой, контролы страницы
   (фильтры РНП, кабинет и запуск цикла в «Отзывах») — второй. Узлы страницы
   не переносим (у неё есть селекторы вида .topbar > .t-right), только order. */
:root .v3-top > *{order:4}
:root .v3-top > .burger{order:0}
:root .v3-top > .t-brand,:root .v3-top > .v3-crumbs{order:1}
:root .v3-top > .v3-tools{order:2}
:root .v3-top > .v3-break{order:3; flex-basis:100%; height:0; margin:0; padding:0}
:root .v3-top .t-crumb{font-family:var(--v3-font); text-transform:none; letter-spacing:0; font-size:13px}
:root .v3-icon-btn{
  width:38px; height:38px; border:1px solid var(--v3-line); border-radius:10px; background:var(--v3-surface);
  color:var(--v3-text); display:grid; place-items:center; cursor:pointer; padding:0;
}
:root .v3-icon-btn:hover{border-color:var(--v3-line-2); background:var(--v3-surface-2)}
:root .v3-icon-btn:focus-visible{outline:2px solid var(--v3-ink); outline-offset:2px}
:root[data-theme="dark"] .v3-icon-btn:focus-visible{outline-color:var(--v3-brand)}
:root .v3-icon-btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
:root .v3-sys{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px; border-radius:999px;
  border:1px solid var(--v3-line); background:var(--v3-surface); color:var(--v3-text-2);
  font:600 12px/1 var(--v3-font); cursor:help; white-space:nowrap;
}
:root .v3-sys i{width:7px; height:7px; border-radius:50%; background:#13895f; box-shadow:0 0 0 4px rgba(19,137,95,.14)}
:root .v3-profile{display:flex; align-items:center; gap:10px; padding-left:12px; border-left:1px solid var(--v3-line)}
:root .v3-profile-meta{text-align:right; line-height:1.15}
:root .v3-profile-meta b{display:block; font:700 13px/1.2 var(--v3-font); color:var(--v3-text)}
:root .v3-profile-meta span{display:block; font:500 12px/1.2 var(--v3-font); color:var(--v3-text-3); margin-top:3px}
:root .v3-avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--v3-brand); color:var(--v3-ink); border:2px solid var(--v3-ink); font:800 12px/1 var(--v3-font);
}
:root[data-theme="dark"] .v3-avatar{border-color:#2a2e32}

/* ── заголовки разделов: Inter вместо курсивной антиквы ── */
:root .serif,:root .h-title,:root .sect-title{font-family:var(--v3-font)!important; font-style:normal!important; font-weight:800!important; letter-spacing:-.04em}
:root .hero h1,:root .page > h1,:root .sect-title,:root .h-title{font-size:28px; line-height:1.08}

/* ── адаптив: ≤1100 — только иконки, подписи в title ── */
@media (max-width:1100px){
  :root:root{--v3-side-w:76px}
  :root .v3-side{padding:14px 8px 10px}
  :root .v3-side .s-logo{justify-content:center; padding:0 0 14px}
  :root .v3-brand-text,:root .v3-lbl,:root .v3-nav-label{display:none}
  :root .v3-group{margin-bottom:10px}
  :root .v3-group + .v3-group{border-top:1px solid rgba(255,255,255,.08); padding-top:10px}
  :root .v3-side .s-btn{justify-content:center; padding:0}
  :root .v3-profile-meta{display:none}
}
@media (max-width:640px){
  :root:root{--v3-side-w:60px}
  :root .v3-side .s-btn{min-height:42px}
  :root .topbar.v3-top{padding:8px 14px}
  :root .v3-sys{display:none}
}
@media (prefers-reduced-motion:reduce){:root .v3-side .s-btn{transition:none}}

/* подсказки [data-tip] в шапке открываются влево: невидимый блок 260px раньше
   выпирал за правый край и давал горизонтальную прокрутку («Отзывы») */
:root .v3-top [data-tip]::after{left:auto!important; right:0!important; transform:none!important}
/* «Доступы»: почта и имя в шапке страницы дублировали профиль каркаса */
:root .v3-top #whoami{display:none}

/* Тёмная тема: на страницах много элементов «фон var(--ink) + текст var(--lime)».
   В тёмной теме --ink светлый, и лаймовый текст на нём не читается (выбранная сумма
   в «Оплате», сегменты Контента, активная папка Диска…). Переворачиваем: лайм + тёмный. */
:root[data-theme="dark"] .amt-seg button.on,
:root[data-theme="dark"] .lvl-seg button.on,
:root[data-theme="dark"] .opt .seg button.on,
:root[data-theme="dark"] .mode-btn.active,
:root[data-theme="dark"] .seg-tabs a.on,
:root[data-theme="dark"] .view-tab.active,
:root[data-theme="dark"] .tree-node-row.active,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .chip.owner,
:root[data-theme="dark"] .chip.act,
:root[data-theme="dark"] .ap-msg.me,
:root[data-theme="dark"] .model-card .mc-check,
:root[data-theme="dark"] .tile.admin .tile-ic,
:root[data-theme="dark"] .brand-icon,
:root[data-theme="dark"] .resolved .r-type{background:var(--v3-brand)!important; color:var(--v3-ink)!important; border-color:var(--v3-brand)!important}