/* ============================================================================
   VibeOS — Design System / Tokens + Components
   Бренд ВайбМаркетолог 2026 · editorial dark · anti-AI-slop iron
   ----------------------------------------------------------------------------
   Эталон: _ref/index_v2_editorial_REFERENCE.html
   Дисциплина: _ref/craft/anti-ai-slop.md · color.md · typography-hierarchy-editorial.md
   Автор: architect (aiops) · 24.06.2026
   ----------------------------------------------------------------------------
   ANTI-SLOP IRON (нарушение = регрессия, не вкусовщина):
     1. Иконки — monoline SVG (stroke 1.6px, currentColor). НЕ эмодзи.
     2. Display — editorial light (300–400), крупный 48–96px, tracking отриц.
     3. Лайм #B4FF39 — АКЦЕНТ, ≤3 видимых использования на экран (cap.color.md).
     4. Границы — hairline 1px (var(--hair)). НЕ толстые tiles с radius+left-border.
     5. БЕЗ indigo (#6366F1/#4F46E5/…). БЕЗ «trust»-градиентов. БЕЗ AI-tiles.
     6. Метрики честные (из источника). Никаких выдуманных «10× / 99.9%».
   Нейтрали несут 70–90% пикселей; лайм — единственный акцент; семантика 0–5%.
   ============================================================================ */

:root{
  /* ── ПАЛИТРА ───────────────────────────────────────────────────────────
     Имена по НАЗНАЧЕНИЮ, не по оттенку (color.md §semantic naming).        */

  /* Акцент — ЕДИНСТВЕННЫЙ. Лайм. Ration ≤3/экран. */
  --accent:        #B4FF39;   /* бренд-лайм */
  --accent-dim:    #8FCC2E;   /* приглушённый лайм для hover/мелкого текста */
  --accent-soft:   rgba(180,255,57,.10); /* лаймовая подложка (fills only) */
  --accent-glow:   rgba(180,255,57,.60); /* неоновое свечение логотипа/маркера */

  /* Нейтрали — фон/поверхности (тёмная тема, не чистый чёрный — color.md). */
  --bg:            #0B0811;   /* холст */
  --surface:       #13101C;   /* поверхность 1 (hover-строки, поля ввода) */
  --surface-2:     #181421;   /* поверхность 2 (приподнятые блоки) */
  --hair:          #221C2E;   /* hairline 1px — несущая структура */
  --hair-soft:     rgba(255,255,255,.06); /* полупрозрачная грань на тёмном */

  /* Нейтрали — текст (тёплый кремовый ink, не чистый белый). */
  --ink:           #ECE6D6;   /* основной текст */
  --ink-2:         #9C95AB;   /* вторичный / подписи */
  --ink-3:         #665F75;   /* третичный / labels, eyebrow, mono-метки */

  /* Семантика — статусы (0–5% пикселей). НЕ путать с акцентом. */
  --ok:            #4ADE80;   /* в строю / успех */
  --warn:          #E0A03C;   /* деградация / внимание */
  --danger:        #EF4444;   /* офлайн / ошибка */
  --info:          #A480EF;   /* фиолет — вспомогательный, НЕ акцент, НЕ indigo */

  /* Бренд-фиолет (из брендбука, для редких смысловых акцентов — аватары/иконы
     инструментов). Сознательно НЕ #6366F1 indigo. Использовать скупо. */
  --violet:        #8B5CF6;
  --violet-soft:   #A480EF;

  /* ── ТИПОГРАФИКА ───────────────────────────────────────────────────────
     display=Pragmatica Cyr (editorial light), ui=Inter, mono=JetBrains.    */
  --font-display: 'Pragmatica Cyr','Helvetica Neue','Inter',system-ui,sans-serif;
  --font-ui:      'Inter',-apple-system,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* Editorial-шкала (typography-hierarchy-editorial.md §1 — драматичные скачки).
     Display — событие (3–5× над body), не просто заголовок. */
  --t-display:   76px;  /* лид/Mission Control — light 300 */
  --t-h1:        42px;  /* крупная цифра/заголовок секции — light 300 */
  --t-h2:        26px;  /* заголовок флота — light 300 */
  --t-deck:      19px;  /* стендфёрст/подзаголовок — обязательный скачок вниз */
  --t-body:      14px;  /* UI-body */
  --t-body-lg:   15.5px;
  --t-label:     11px;  /* eyebrow / section label — mono, трекинг широкий */
  --t-cap:       10.5px;/* mono-метки, footer */

  --w-light:     300;   /* display editorial — light */
  --w-reg:       400;
  --w-med:       500;
  --w-semi:      600;   /* максимум для UI; НЕ для display */

  /* Editorial display: tracking отрицательный (mandatory @56px+). */
  --track-display: -.035em;
  --track-h2:      -.02em;
  --track-label:   .20em;   /* широкий трекинг для caps-меток */
  --lh-display:    .98;
  --lh-body:       1.55;

  /* ── ГЕОМЕТРИЯ / РАДИУСЫ ──────────────────────────────────────────────
     Сдержанные радиусы. Hairline-структура вместо «карточек-плиток».      */
  --r-1:  6px;   /* мелкие чипы/моно-квадраты */
  --r-2:  8px;   /* кнопки, строки, поля */
  --r-3:  10px;  /* аватары/иконо-боксы */
  --r-4:  14px;  /* контейнер-сетка (border 1px, НЕ заливка-плитка) */

  /* ── СЕТКА ОТСТУПОВ (4px база) ─────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px; --s-6:30px;
  --s-7:46px; --s-8:64px;

  /* ── ДВИЖЕНИЕ (см. craft/animation-discipline.md) ───────────────────── */
  --ease:     cubic-bezier(.23,1,.32,1);
  --dur-fast: .16s;
  --dur:      .20s;

  /* ── ИКОНКИ ─────────────────────────────────────────────────────────── */
  --icon-stroke: 1.6;   /* monoline 1.6–1.8px — anti-slop */
  --icon-size:   17px;

  /* ── СЛОИ ──────────────────────────────────────────────────────────── */
  --z-side:10; --z-overlay:50; --z-modal:100; --z-toast:120;
}

/* Уважение к prefers-reduced-motion (accessibility-baseline.md). */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:.001s; --dur:.001s; }
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ============================================================================
   BASE / RESET
   ========================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent-soft); color:var(--ink); }

/* Фокус — видимый, лайм (accessibility-baseline.md). Считается как accent-use. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-1); }

/* ── monoline SVG icon helper. Все иконки — ЧЕРЕЗ это, НЕ эмодзи. ──────── */
.vi{
  width:var(--icon-size); height:var(--icon-size);
  stroke:currentColor; stroke-width:var(--icon-stroke);
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}
.vi-sm{ width:14px; height:14px; }
.vi-lg{ width:22px; height:22px; }

/* ============================================================================
   ТИПОГРАФИКА — editorial
   ========================================================================== */
.display{
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--t-display); letter-spacing:var(--track-display);
  line-height:var(--lh-display); color:var(--ink);
}
.h1{ font-family:var(--font-display); font-weight:var(--w-light);
     font-size:var(--t-h1); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.h2{ font-family:var(--font-display); font-weight:var(--w-light);
     font-size:var(--t-h2); letter-spacing:var(--track-h2); line-height:1.1; color:var(--ink); }
/* единственный лаймовый сегмент заголовка — ОДНА из ≤3 accent-uses */
.display .pt,.h1 .pt,.h2 .pt{ color:var(--accent); }

/* Deck / standfirst — обязательный крупный скачок вниз от display. */
.deck{ font-size:var(--t-deck); font-weight:var(--w-light);
       color:var(--ink-2); line-height:1.5; max-width:46ch; }

/* Eyebrow / section label — mono, широкий трекинг, caps. Wayfinding. */
.eyebrow{ font-family:var(--font-mono); font-size:var(--t-label);
          letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); }

.mono{ font-family:var(--font-mono); }
.muted{ color:var(--ink-2); }
.faint{ color:var(--ink-3); }

/* ============================================================================
   LAYOUT — app shell (sidebar + main), editorial padding
   ========================================================================== */
.vos-app{ display:grid; grid-template-columns:232px 1fr; height:100vh; }
.vos-main{ overflow-y:auto; padding:46px 56px 70px; position:relative; }

/* ── SIDEBAR ───────────────────────────────────────────────────────────── */
.vos-side{
  border-right:1px solid var(--hair);
  padding:22px 16px; display:flex; flex-direction:column;
  background:var(--bg); z-index:var(--z-side);
}
.vos-brand{ display:flex; align-items:center; gap:11px; padding:2px 6px 26px; }
/* неоновая «W»-волна — единственный «glow». Считается accent-use. */
.vos-mark{ width:40px; height:26px; }
.vos-mark path{
  stroke:var(--accent); stroke-width:13; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 9px var(--accent-glow));
}
.vos-wm{ font-family:var(--font-display); font-weight:var(--w-semi);
         font-size:18px; letter-spacing:-.01em; color:var(--ink); }
.vos-wm i{ font-style:normal; color:var(--ink-3); font-weight:var(--w-reg); }

.vos-sect{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
           color:var(--ink-3); text-transform:uppercase; padding:18px 7px 9px; }

.vos-row{
  display:flex; align-items:center; gap:11px; padding:8px;
  border-radius:var(--r-2); color:var(--ink-2); font-size:13.5px;
  cursor:pointer; transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vos-row:hover{ color:var(--ink); background:var(--surface); }
.vos-row.on{ color:var(--ink); }
.vos-row.on .vi{ color:var(--accent); }   /* активная иконка — лайм */

/* моно-литера агента (вместо эмодзи-иконки) */
.vos-mono{
  width:22px; height:22px; border:1px solid var(--hair); border-radius:var(--r-1);
  display:grid; place-items:center; font-family:var(--font-display);
  font-size:11px; font-weight:var(--w-semi); color:var(--ink-2); flex-shrink:0;
}
.vos-row.on .vos-mono{ border-color:var(--accent); color:var(--accent); }

/* статус-точка в строке сайдбара */
.vos-st{ width:5px; height:5px; border-radius:50%; margin-left:auto; background:var(--ok); }
.vos-st.warn{ background:var(--warn); } .vos-st.off{ background:var(--ink-3); }

.vos-kbd{ margin-top:auto; display:flex; align-items:center; gap:8px;
          color:var(--ink-3); font-size:11.5px; padding:9px 7px; border-top:1px solid var(--hair); }
.vos-kbd b{ font-family:var(--font-mono); font-size:10px; border:1px solid var(--hair);
            border-radius:4px; padding:1px 6px; color:var(--ink-2); font-weight:var(--w-reg); }

/* ============================================================================
   КАРТА — hairline (НЕ tile). border 1px, без radius+left-border-акцента.
   ========================================================================== */
.vos-card{
  background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-4);
  padding:22px; position:relative;
}
/* Сетка карт через hairline-зазоры (gap=1px на фоне var(--hair)) — единый
   editorial-приём вместо набора отдельных «плиток». */
.vos-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(312px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
  border-radius:var(--r-4); overflow:hidden;
}
.vos-grid > .vos-cell{
  background:var(--bg); padding:22px; cursor:pointer;
  transition:background var(--dur) var(--ease); position:relative;
}
.vos-grid > .vos-cell:hover{ background:var(--surface); }
/* активная ячейка — тонкий лаймовый маркер слева (2px, со свечением),
   НЕ толстый left-border tile. Скупо. */
.vos-cell.active::before{
  content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
}

/* ============================================================================
   МЕТРИКИ — editorial figures (без плиток, hairline-разделители)
   ========================================================================== */
.vos-figs{ display:flex; gap:0; margin:54px 0 30px;
           border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.vos-fig{ flex:1; padding:24px 26px 22px; border-right:1px solid var(--hair); }
.vos-fig:last-child{ border-right:none; }
.vos-fig .n{ font-family:var(--font-display); font-weight:var(--w-light);
             font-size:42px; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.vos-fig .n .u{ font-size:17px; color:var(--ink-3); font-weight:var(--w-reg); }
.vos-fig.key .n{ color:var(--accent); }   /* ключевая цифра — лайм (accent-use) */
.vos-fig .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
               text-transform:uppercase; color:var(--ink-3); margin-top:13px; }
.vos-fig .ctx{ font-size:12px; color:var(--ink-2); margin-top:4px; }

/* ============================================================================
   ТАБЫ — underline-индикатор (НЕ pill-плитки)
   ========================================================================== */
.vos-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--hair); }
.vos-tab{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  font-size:13px; color:var(--ink-2); cursor:pointer;
  border-bottom:1.5px solid transparent; margin-bottom:-1px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.vos-tab:hover{ color:var(--ink); }
.vos-tab.on{ color:var(--ink); border-bottom-color:var(--accent); }
.vos-tab .count{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }

/* ============================================================================
   КНОПКИ — плоские поверхности + сдержанный лаймовый primary
   ========================================================================== */
.vos-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:13px; font-weight:var(--w-med);
  padding:10px 16px; border-radius:var(--r-2); cursor:pointer;
  border:1px solid var(--hair); background:var(--surface); color:var(--ink);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.vos-btn:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.vos-btn:active{ transform:translateY(1px); }   /* запоминающийся микро-жест */

/* primary — ОДНА из ≤3 accent-uses на экран. Плоская заливка, без градиента. */
.vos-btn.primary{
  background:var(--accent); color:#0B0811; border-color:var(--accent); font-weight:var(--w-semi);
}
.vos-btn.primary:hover{ background:var(--accent-dim); border-color:var(--accent-dim); }

.vos-btn.ghost{ background:transparent; }
.vos-btn.ghost:hover{ background:var(--surface); }
.vos-btn:disabled{ opacity:.45; cursor:not-allowed; }
.vos-btn .vi{ width:15px; height:15px; }

/* иконо-кнопка (квадрат) */
.vos-iconbtn{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--hair); border-radius:var(--r-2);
  background:var(--surface); color:var(--ink-2);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vos-iconbtn:hover{ color:var(--ink); background:var(--surface-2); }

/* ============================================================================
   ПОЛЯ ВВОДА
   ========================================================================== */
.vos-input,.vos-textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--hair); border-radius:var(--r-2);
  padding:12px 14px; font-family:var(--font-ui); font-size:14px; outline:none;
  transition:border-color var(--dur) var(--ease);
}
.vos-input::placeholder,.vos-textarea::placeholder{ color:var(--ink-3); }
.vos-input:focus,.vos-textarea:focus{ border-color:var(--accent); }
.vos-textarea{ resize:vertical; min-height:84px; line-height:1.5; }

/* ============================================================================
   БЕЙДЖИ СТАТУСОВ — точка + текст, семантика (НЕ лайм)
   ========================================================================== */
.vos-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
}
.vos-badge .d{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.vos-badge.ok    .d{ background:var(--ok); }
.vos-badge.warn  .d{ background:var(--warn); }
.vos-badge.off   .d{ background:var(--ink-3); }
.vos-badge.danger .d{ background:var(--danger); }
/* «LIVE» — пульсирующая семантическая метка (не акцент) */
.vos-badge.live{ color:var(--ok); }
.vos-badge.live .d{ background:var(--ok); animation:vos-pulse 2s var(--ease) infinite; }
@keyframes vos-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* пилюля-тег (нейтральная, для тарифов/ролей) */
.vos-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--hair); border-radius:999px; padding:3px 10px;
}

/* ============================================================================
   ЧАТ-БАББЛЫ — плоские поверхности + hairline. Без градиент-«стекла».
   Различие сторон — выравниванием и тонкой гранью, НЕ заливкой-градиентом.
   ========================================================================== */
.vos-chat{ display:flex; flex-direction:column; gap:16px; }
.vos-msg{ max-width:74%; display:flex; gap:11px; }
.vos-msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.vos-msg .av{
  width:32px; height:32px; border-radius:var(--r-3); flex-shrink:0;
  display:grid; place-items:center; border:1px solid var(--hair);
  background:var(--surface-2); color:var(--ink-2);
}
.vos-msg.ag .av{ color:var(--violet-soft); }   /* агент — фиолет-иконка (не акцент) */
.vos-bub{
  padding:12px 15px; border-radius:14px; font-size:14px; line-height:var(--lh-body);
  background:var(--surface); border:1px solid var(--hair); color:var(--ink);
}
.vos-msg.ag .vos-bub{ border-top-left-radius:4px; }
/* мои сообщения — едва заметная лаймовая грань (НЕ заливка-градиент) */
.vos-msg.me .vos-bub{
  border-top-right-radius:4px; background:var(--surface-2); border-color:var(--hair);
}
.vos-bub b{ color:var(--accent); font-weight:var(--w-semi); }  /* выделение — accent, скупо */
.vos-bub .mm{ font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
              background:var(--bg); padding:2px 6px; border-radius:5px; }
/* строка вызова инструмента — mono, фиолет, hairline-разделитель сверху */
.vos-tool{ font-family:var(--font-mono); font-size:12px; color:var(--violet-soft);
           display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:8px;
           border-top:1px dashed var(--hair); }

/* композер (поле ввода чата) */
.vos-compose{ display:flex; gap:12px; align-items:center;
              padding-top:16px; border-top:1px solid var(--hair); }
.vos-compose .vos-input{ flex:1; }

/* ============================================================================
   ГРАФИКИ / СПАРКЛАЙНЫ — hairline-оси, лайм-линия как accent (скупо)
   ----------------------------------------------------------------------------
   Чарты рисуем inline-SVG; классы задают цвета штрихов через currentColor/токены.
   ========================================================================== */
.vos-chart{ width:100%; height:auto; display:block; }
.vos-chart .axis{ stroke:var(--hair); stroke-width:1; }
.vos-chart .grid{ stroke:var(--hair); stroke-width:1; stroke-dasharray:2 4; opacity:.6; }
.vos-chart .line{ stroke:var(--ink-2); stroke-width:1.6; fill:none;
                  stroke-linecap:round; stroke-linejoin:round; }
/* ключевая серия — лайм (одна accent-use на чарт, не больше) */
.vos-chart .line.key{ stroke:var(--accent); }
.vos-chart .area.key{ fill:var(--accent-soft); stroke:none; }
.vos-chart .dot{ fill:var(--bg); stroke:var(--ink-2); stroke-width:1.6; }
.vos-chart .dot.key{ stroke:var(--accent); }
.vos-chart .lbl{ font-family:var(--font-mono); font-size:10px; fill:var(--ink-3); }
/* бар-метрика (тонкие столбики, нейтраль + одна лайм-серия) */
.vos-bar{ fill:var(--ink-3); }
.vos-bar.key{ fill:var(--accent); }

/* ── progress / meter (лимиты тарифа, расход) ────────────────────────── */
.vos-meter{ height:4px; border-radius:999px; background:var(--hair); overflow:hidden; }
.vos-meter > i{ display:block; height:100%; background:var(--ink-2); border-radius:999px; }
.vos-meter.key > i{ background:var(--accent); }
.vos-meter.warn > i{ background:var(--warn); }
.vos-meter.danger > i{ background:var(--danger); }

/* ============================================================================
   РАЗДЕЛИТЕЛИ / ЗАГОЛОВКИ СЕКЦИЙ (editorial: eyebrow + h2 + hairline)
   ========================================================================== */
.vos-sechead{ display:flex; align-items:baseline; gap:16px; margin:46px 0 22px; }
.vos-sechead .e{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
                 color:var(--ink-3); text-transform:uppercase; }
.vos-sechead .ln{ flex:1; height:1px; background:var(--hair); }
.vos-hr{ height:1px; background:var(--hair); border:none; margin:var(--s-6) 0; }
.vos-foot{ margin-top:50px; font-family:var(--font-mono); font-size:11px;
           color:var(--ink-3); letter-spacing:.04em; }

/* ============================================================================
   СОСТОЯНИЯ (state-coverage.md): empty / loading / skeleton
   ========================================================================== */
.vos-empty{ text-align:center; padding:var(--s-8) var(--s-5); color:var(--ink-3); }
.vos-empty .vi{ width:28px; height:28px; color:var(--ink-3); margin:0 auto var(--s-4); }
.vos-skel{ background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));
           background-size:200% 100%; animation:vos-shimmer 1.4s linear infinite; border-radius:var(--r-2); }
@keyframes vos-shimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
.vos-spinner{ width:16px; height:16px; border:2px solid var(--hair);
              border-top-color:var(--accent); border-radius:50%;
              animation:vos-spin .7s linear infinite; }
@keyframes vos-spin{ to{ transform:rotate(360deg) } }

/* ============================================================================
   RESPONSIVE — сворачивание сайдбара, уменьшение display
   ========================================================================== */
@media (max-width:1080px){
  .vos-app{ grid-template-columns:64px 1fr; }
  .vos-wm,.vos-sect,.vos-row span:not(.vos-mono),.vos-kbd b,.vos-kbd span{ display:none; }
  .vos-main{ padding:30px 22px; }
  .display{ font-size:48px; }
  .vos-figs{ flex-wrap:wrap; } .vos-fig{ min-width:50%; }
  .vos-msg{ max-width:88%; }
}
@media (max-width:640px){
  .vos-figs .vos-fig{ min-width:100%; border-right:none; border-bottom:1px solid var(--hair); }
  .vos-tabs{ overflow-x:auto; }
}

/* ============================================================================
   ИКОНОТЕКА — готовые monoline-пути (вставлять в <svg class="vi" viewBox="0 0 24 24">)
   Документация (НЕ рендерится). Используем ВМЕСТО эмодзи в навигации/кнопках.
   ----------------------------------------------------------------------------
   mission-control : <circle cx=12 cy=12 r=3/><circle cx=12 cy=12 r=9/>
   pipeline        : <path d="M5 12h14M5 12l4-4M5 12l4 4"/><path d="M19 6v12"/>
   kanban          : <rect x=4 y=4 width=6 height=16 rx=1/><rect x=14 y=4 width=6 height=9 rx=1/>
   chat            : <path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.5A8 8 0 1 1 21 12z"/>
   sessions        : <path d="M4 6h16M4 12h16M4 18h10"/>
   skills          : <path d="M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 21l-5-2.9 1-5.5-4-3.9 5.5-.8z"/>
   mcp / plug      : <path d="M9 7V3M15 7V3M7 7h10v4a5 5 0 0 1-10 0z"/><path d="M12 16v5"/>
   memory          : <path d="M12 3a6 6 0 0 0-6 6c0 4 6 12 6 12s6-8 6-12a6 6 0 0 0-6-6z"/><circle cx=12 cy=9 r=2/>
   workspace       : <path d="M3 7h7l2 2h9v10H3z"/>
   goal            : <circle cx=12 cy=12 r=8/><circle cx=12 cy=12 r=3/><path d="M12 2v3M12 19v3"/>
   billing         : <rect x=3 y=6 width=18 height=12 rx=2/><path d="M3 10h18"/>
   send            : <path d="M5 12l14-7-5 14-3-5-6-2z"/>
   attach          : <path d="M8 13l6-6a3 3 0 0 1 4 4l-8 8a5 5 0 0 1-7-7l8-8"/>
   mic             : <rect x=9 y=3 width=6 height=11 rx=3/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>
   settings        : <circle cx=12 cy=12 r=3/><path d="M19 12a7 7 0 0 0-.1-1.4l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.4-1.4L14 2h-4l-.2 2.3a7 7 0 0 0-2.4 1.4l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.4l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.4 1.4L10 22h4l.2-2.3a7 7 0 0 0 2.4-1.4l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"/>
   alert           : <path d="M12 3l9 16H3z"/><path d="M12 10v4M12 17h.01"/>
   check           : <path d="M4 12l5 5L20 6"/>
   ========================================================================== */

/* === END vibeos-tokens.css === */
</content>