@font-face { font-family: 'Relief Space'; src: url('fonts/SpaceGrotesk-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: block; }

/* ============================================================
   LDS OS - FASCIA (оболочка): панель, док, окна, Дом
   ------------------------------------------------------------
   Приборный тон: острые углы, один бордер на панель, тонкие
   линии, mono-метки, ноль декоративных свечений. Тест на каждый
   элемент: «приборка премиум-EV или игра?»
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--radius-sm); }
/* Поля ввода НЕ обводим кольцом: подсвечивается сама панель вокруг них.
   Оранжевая рамка на вводе читалась как ошибка, а не как фокус. */
textarea:focus-visible, input:focus-visible { box-shadow: none; }
::selection { background: var(--accent-wash); color: var(--text-primary); }

/* Тихие скроллбары - не мебель, а намёк. */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius-pill);
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* ============================================================
   СЦЕНА
   ============================================================ */
.stage { position: relative; height: 100vh; width: 100vw; isolation: isolate; }

/* ============================================================
   ГОЛО-СЛОЙ (референс Star Citizen, адаптирован под наш язык)
   ------------------------------------------------------------
   Три дозы, переключаются data-holo на :root:
     off  - чистые панели (как было)
     soft - срез угла + волосяная кромка + сетка-подложка
     full - плюс HUD-засечки, свечение периметра, скан-линия
   Циан из референса НЕ берём: наш холодный тон - --cool, тёплый
   акцент один. Иначе система расползается на три цвета.
   ============================================================ */
/* Доза зафиксирована (лок Алекса 2026-08-02): база чистая, свет живёт
   на кромках приборов и активных элементах - не размазан по всему.
   Переключатель убран, три уровня схлопнуты в один. */
:root {
  --holo-edge: rgba(207,224,255,.26);
  --holo-edge-hot: rgba(207,224,255,.5);
  --holo-grid: .55;
}
:root[data-theme="light"] {
  --holo-edge: rgba(74,111,192,.20);
  --holo-edge-hot: rgba(74,111,192,.38);
}

/* Точечная сетка - техническая подложка, а не текстура «под металл». */
/* Выше дыма (z 1-3), ниже зерна и контента: иначе сетку съедает Plume. */
.stage::before {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: calc(var(--holo-grid) * .55);
  background-image: radial-gradient(rgba(207,224,255,.30) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 50%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 100% at 100% 50%, #000 0%, transparent 72%);
  transition: opacity var(--dur-3) var(--ease-out);
}

/* Срезов углов НЕТ (лок Алекса 2026-08-02: референс №1, кабинный HUD -
   там углы скруглённые; фасочные плашки StarMap отклонены). Голография
   идёт светом и глубиной, а не формой панели. */

/* Волосяная кромка света по верхней грани - «панель под током». */
.glance::before, .command::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--holo-edge) 22%, var(--holo-edge) 78%, transparent);
  pointer-events: none;
}

/* Активное окно: светящийся периметр + двойное тиснение, как у дока -
   эхо-контур с горячими торцами и тихой внешней линией. */
.win.is-active {
  border-color: var(--holo-edge);
  box-shadow: var(--shadow-4),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -12px 26px rgba(0,0,0,.22),
    0 0 26px rgba(207,224,255,.08);
}
.win.is-active::after {
  content: ""; position: absolute; inset: -6px; z-index: -1;
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(207,224,255,.11);
  border-left-color: rgba(207,224,255,.30);
  border-right-color: rgba(207,224,255,.30);
  outline: 1px solid rgba(207,224,255,.06);
  outline-offset: 3px;
  pointer-events: none;
}
.win.is-max::after { display: none; }   /* фуллскрину эхо некуда */

/* ============================================================
   АТМОСФЕРА (Firstlight + Plume) - утверждено 1:1
   ============================================================ */
/* ЛУЧ = ЭТАЛОН ИЗ ВАРИАНТА G (выбор Алекса 2026-08-11 по скрину):
   оригинальная геометрия - большое свечение с тёплым ядром у правого
   края, слева экран уходит в ПОЛНЫЙ чёрный (линейка #000 до 26%).
   Это тот вид, который «раньше делали». Не трогать. */
/* ЛУЧ - ЭТАЛОН 1:1, blur(30) на месте. Все попытки «улучшить» его
   (снять фильтр, растянуть, добавить стопы) откачены: каждая ломала
   вид, за который держится весь экран. НЕ ТРОГАТЬ. */
.light {
  position: fixed; inset: 0; z-index: var(--z-atmos);
  transform: scale(1.06); filter: blur(22px);
  background:
    /* КОЛОННА, а не шар (референс Grok, 2026-08-11): по горизонтали
       вдвое уже (38% -> 21%), по вертикали выше (60% -> 82%). Свет
       стоит узкой полосой у самого края и рассеивается влево -
       радиальность пропадает, «ебашить» перестаёт. */
    /* ГОЛУБОЙ, а не электрик (правка 2026-08-12). Насыщенная синь
       #4d87e6/#2f62c4 читалась нейтронной звездой. Здесь тона светлее
       и мягче: ядро бело-голубое, середина - разбавленный небесный
       #a8caf0, хвост уходит в приглушённый #6f93c8. Цвет холодный, но
       пастельный - между прежней серостью и электриком. */
    radial-gradient(27% 86% at 107% 48%, #ffffff 0%, #eaf5ff 8%, #cfe4fa 20%,
      #a8caf0 36%, #89aee0 52%, #6f93c8 66%, #5b7cae2e 80%, transparent 93%),
    radial-gradient(42% 104% at 110% 50%, #86aede2e 0%, #5f83b818 46%, transparent 84%),
    radial-gradient(44% 44% at 104% 90%, #7b9ecc16 0%, transparent 74%),
    linear-gradient(90deg, #000 0%, #000 26%, #000000cc 44%, #0000005c 58%, transparent 76%),
    linear-gradient(180deg, #000000b4 0%, transparent 22%, transparent 80%, #000000da 100%);
  animation: beam-breathe var(--dur-breath) var(--ease-in-out) infinite;
}
/* Синяя ночь под сценой + ВИНЬЕТКА В ЧЁРНЫЙ (2026-08-11, слово Алекса:
   «тёмные оттенки засветлены, края должны уходить с синего в чёрный»).
   Синева живёт только в середине кадра; к краям сцена гаснет до
   почти-чистого чёрного - раньше базовый градиент высветлял углы. */
/* БАЗА = ВАРИАНТ G (выбор Алекса): синева живёт справа и в центре,
   к ЛЕВОМУ краю уходит в чистый чёрный. Градиент горизонтальный -
   именно это «немножко синий, потом уходит в чёрный слева».
   Дизер первым слоем: ступени базовых градиентов разбиты, blend
   внутри элемента стабилен и в Safari. */
.stage::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    var(--lds-dither),
    radial-gradient(70% 60% at 88% 46%, rgba(126,158,220,.10) 0%,
      rgba(96,124,186,.05) 44%, transparent 74%),
    linear-gradient(97deg, #000000 0%, #010204 16%, #04070e 34%,
      #070c18 52%, #0a1120 70%, #0c1526 86%, #0d1729 100%);
  background-size: 128px 128px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
}
:root[data-theme="light"] .stage::before { display: none; }
.light::before {
  content: ""; position: absolute; right: -8%; top: 2%; width: 80%; height: 52%;
  /* Верхний отсвет в тон - голубой, не насыщенный синий. */
  background: radial-gradient(50% 50% at 82% 62%, #a8cdf526 0%, #7ea3d616 48%, transparent 75%);
  transform: rotate(-15deg);
}
/* Интенсивность луча снята (2026-08-11, «ебашит слишком сильно»):
   форма эталонная, приглушение только через opacity. */
@keyframes beam-breathe { 0%,100% { opacity:.86 } 50% { opacity:.92 } }

/* Светлая тема: тот же луч, но бумажный - без черноты слева. */
:root[data-theme="light"] .light {
  filter: blur(40px);
  background:
    radial-gradient(46% 66% at 108% 44%, #fffefc 0%, #fff4e6 12%, #eaf1fd 34%,
      #d3e0f6 54%, #c2d2ee 70%, transparent 88%),
    radial-gradient(60% 90% at 112% 52%, #dbe6fa66 0%, transparent 76%),
    linear-gradient(180deg, #ffffff5c 0%, transparent 26%, transparent 82%, #cfd6e199 100%);
}

/* Дым: blur поднят с ~9 до 14-18px - кромки частиц тонут, облака
   рассеиваются без рваных краёв (фикс артефактов со скринов Алекса).
   Маска - плавная кривая из восьми стопов: прежние четыре с большими
   скачками альфы (1→.42→.12→0) рисовали видимые «кольца» дыма. */
/* СОЗВЕЗДИЯ - космический слой из кадра D1.1. Лежит НИЖЕ дыма и луча:
   звёзды видны только там, где атмосфера тонкая, и не спорят с ней.
   Никакого мерцания - только очень медленный дрейф (Elite Dangerous). */
#stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .55; }
:root[data-theme="light"] #stars { display: none; }

/* Plume: половинный растр WebGL, без CSS-blur и масок частиц. */
#smoke { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; visibility: hidden; }
#smokeF { position: absolute; left: 0; top: calc(-1 * var(--chrome-top)); width: 100vw; height: 100vh;
  z-index: 3; pointer-events: none; visibility: hidden; }
:root:not([data-theme="light"]) .light { display: none; }
:root[data-theme="light"] #smoke, :root[data-theme="light"] #smokeF { display: none; }

/* ТУМАН вместо канвас-дыма (2026-08-11). Три больших пятна медленно
   плывут своими траекториями; в фоне каждого первым слоем лежит дизер.
   Почему это чище канваса: у чистого радиального градиента нет
   альфа-ступеней от наложения частиц, нечему «бликовать», а дизер
   внутри элемента добивает 8-битный бандинг - и работает в Safari,
   в отличие от mix-blend на fixed-слое. */
.haze { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* БЕЗ ДИЗЕРА ВНУТРИ (урок 2026-08-11): тайл первым слоем растягивался
   на весь элемент и перекрывал градиент сплошной серой заливкой -
   огромные пятна на экране. Дизер уместен только там, где под ним
   непрозрачный фон (сцена, окна), а полупрозрачным пятнам он не нужен:
   у чистого радиального градиента ступеней почти нет. */
.haze i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.haze i:nth-child(1) {
  width: 78vw; height: 74vh; right: -14vw; top: 4vh;
  background: radial-gradient(closest-side,
    rgba(150,178,232,.13) 0%, rgba(120,146,205,.07) 44%, rgba(96,120,180,.02) 70%, transparent 100%);
  animation: haze-a 68s var(--ease-in-out) infinite;
}
.haze i:nth-child(2) {
  width: 62vw; height: 58vh; right: 2vw; bottom: -8vh;
  background: radial-gradient(closest-side,
    rgba(128,158,220,.10) 0%, rgba(96,124,186,.05) 48%, transparent 100%);
  animation: haze-b 86s var(--ease-in-out) infinite;
}
.haze i:nth-child(3) {
  width: 52vw; height: 50vh; right: 20vw; top: 16vh;
  background: radial-gradient(closest-side,
    rgba(168,192,240,.08) 0%, rgba(120,148,208,.04) 50%, transparent 100%);
  animation: haze-c 74s var(--ease-in-out) infinite;
}
@keyframes haze-a {
  0%,100% { transform: translate3d(0,0,0) scale(1) }
  50% { transform: translate3d(-7vw,4vh,0) scale(1.14) }
}
@keyframes haze-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.08) }
  50% { transform: translate3d(-10vw,-5vh,0) scale(1) }
}
@keyframes haze-c {
  0%,100% { transform: translate3d(0,0,0) scale(1) }
  50% { transform: translate3d(-13vw,6vh,0) scale(1.2) }
}
:root[data-theme="light"] .haze { display: none; }
.stage.has-windows .haze { opacity: .4; transition: opacity var(--dur-4) var(--ease-cine); }

/* ПОЛНОЭКРАННОГО ЗЕРНА БОЛЬШЕ НЕТ (2026-08-11). Два урока подряд:
   зерно с ненулевым средним серит экран, а mix-blend-mode на fixed-слое
   ЛОМАЕТСЯ В SAFARI - блендинг не применяется, и серый тайл рисуется
   как есть: бежевая пелена со скрина Алекса. Дизер теперь живёт ТОЛЬКО
   внутри фонов конкретных элементов через background-blend-mode -
   смешивание внутри одного элемента работает надёжно везде. */
.grain { display: none; }

/* Когда открыто окно - атмосфера уходит на задний план, не мешает работе. */
.stage.has-windows .light { opacity: .5; }
.stage.has-windows #smoke,
.stage.has-windows #smokeF { opacity: .35; }
.light, #smoke, #smokeF { transition: opacity var(--dur-4) var(--ease-cine); }

/* ============================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ============================================================ */
/* Верхняя панель - то же стекло, что у дока, но легче: полоса-козырёк
   с волосяной кромкой и второй тихой линией (двойное сечение) снизу. */
.top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--chrome-top);
  z-index: var(--z-chrome); display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--space-4);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-1) 62%, transparent),
    color-mix(in srgb, var(--surface-0) 38%, transparent));
  backdrop-filter: blur(24px) saturate(1.15);
  border-bottom: 1px solid var(--holo-edge);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: linear-gradient(90deg, transparent 4%,
    rgba(207,224,255,.10) 30%, rgba(207,224,255,.10) 70%, transparent 96%);
  pointer-events: none;
}

/* Логотип-меню: как яблоко в macOS - голый глиф без рамки-коробки,
   живёт сам по себе, подсвечивается на наведении и пока меню открыто. */
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 4px 4px;
  margin-left: -4px; border-radius: var(--radius-sm);
  color: var(--text-secondary); transition: var(--transition-control); }
.brand:hover { color: var(--text-primary); background: var(--surface-3); }
.brand.is-on { color: var(--text-primary); background: var(--surface-4); }
.brand__mark {
  width: 32px; height: 32px; flex-shrink: 0;
  color: var(--text-primary); display: block;
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand__mark, .brand.is-on .brand__mark { color: var(--accent); }
.brand__wm {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest); text-transform: uppercase; white-space: nowrap;
}

/* Стрелка у марки: за логотипом системное меню, это надо показать. */
.brand__caret { font-size: 11px; opacity: .5; margin-left: -3px; }
.brand:hover .brand__caret, .brand.is-on .brand__caret { opacity: .9; }

/* Имя текущего экрана рядом с маркой, через разделитель - из кадра
   D1.1: сразу видно, где ты стоишь в системе. */
/* mr:auto, а не space-between: имя экрана прижато к марке, а не
   болтается в середине панели. Всё системное уезжает вправо само. */
.top__where {
  position: relative; margin-right: auto;
  margin-left: var(--space-4); padding-left: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-secondary); white-space: nowrap;
}
.top__where::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: var(--line-3);
}

.sys { display: flex; align-items: center; gap: var(--space-5); }
/* Разделитель перед временем суток - тот же ритм, что у имени экрана. */
.sys__sep { width: 1px; height: 13px; background: var(--line-3); }
.sys__sundial { text-transform: uppercase; letter-spacing: var(--ls-widest); }
.sys__item {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}
.sys__wx .sun { color: var(--accent); }
.sys__clock { color: var(--text-secondary); font-size: var(--fs-label); }

/* Пульс демона: система жива. Точка дышит - не мигает. */
.sys__pulse { display: flex; align-items: center; gap: 7px; }
.sys__pulse .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--ok) 50%, transparent);
  animation: pulse-breathe 4s var(--ease-in-out) infinite;
}
.sys__pulse.is-warn .dot { background: var(--warn); box-shadow: 0 0 8px 1px var(--warn-wash); }
@keyframes pulse-breathe { 0%,100% { opacity:.45 } 50% { opacity:1 } }

.icon-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-tertiary);
  border: 1px solid transparent; transition: var(--transition-control);
}
.icon-btn:hover { color: var(--text-primary); background: var(--surface-3); border-color: var(--line-2); }
.icon-btn svg { width: 16px; height: 16px; }

/* ============================================================
   ДОМ (ЭФИР) - состояние покоя
   ============================================================ */
.home {
  position: absolute; inset: var(--chrome-top) 0 var(--chrome-dock); z-index: var(--z-home);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 42px; padding: 12vh var(--space-6) 0;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
/* Открылось окно - Дом уходит в расфокус, как задний план в кадре:
   видно, что он там, но глаз держится на окне. */
.stage.has-windows .home {
  opacity: .32; transform: scale(.985); pointer-events: none;
  filter: blur(4px) saturate(.8);
}
.home { transition: opacity var(--dur-3) var(--ease-out),
        transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out); }

/* Блок «поле + состояние»: присутствие выключено влево по кромке поля,
   как в кадре D1.1. Отдельной строки над героем больше нет. */
.home__ask {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: min(760px, 90vw);
}
.presence {
  display: flex; align-items: center; gap: 8px; padding-left: 2px;
  font-family: var(--font-mono); font-size: var(--fs-nano); font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-tertiary);
}
.presence .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-glow);
  animation: presence-bloom 4s var(--ease-in-out) infinite;
}
.presence.is-thinking .dot { animation-duration: 1.1s; }
@keyframes presence-bloom { 0%,100% { opacity:.5; transform:scale(1) } 50% { opacity:1; transform:scale(1.18) } }

/* Relief: более спокойная форма и тень снизу по правке Алекса 16.09.2026. */
/* ПРЯМОУГОЛЬНИК ВОКРУГ EDEM («хитбокс», скрин Алекса 2026-09-09) - это
   был filter на элементах с background-clip:text: Safari теряет клип и
   рисует фон градиента целиком, прямоугольником. Блум и тень-градиент
   на клипе убраны совсем. Металл живёт на .wm-fill БЕЗ filter; тень -
   отдельным слоем со сплошным цветом, там filter безопасен. Размер
   поднят до референса Grok (~половина ширины экрана). */
.wordmark {
  position: relative; z-index: 2; font-family: 'Relief Space', 'Space Grotesk', sans-serif; font-weight: 500;
  letter-spacing: .01em; line-height: .9; font-size: clamp(76px, 17vw, 262px); white-space: nowrap;
  will-change: transform;
}
.wm-fill {
  position: relative; z-index: 1; display: block;
  /* Свет находится на поверхности букв. Без filter/blend поверх clip:
     это сохраняет контур глифов в Safari. Тёмный металл оставляет запас бликам. */
  background:
    radial-gradient(ellipse var(--wm-shade-width, 60%) var(--wm-shade-height, 84%) at var(--wm-shade-x, 8%) var(--wm-shade-y, 98%),
      var(--wm-shadow-color, rgba(2,4,9,.64)) 0%, transparent 100%),
    radial-gradient(ellipse var(--wm-glint-width, 3%) var(--wm-glint-height, 16%) at var(--wm-glint-x, 55%) var(--wm-glint-y, 50%),
      var(--wm-glint, rgba(255,255,255,.6)) 0%, transparent 100%),
    radial-gradient(ellipse 2.5% 9% at var(--wm-glint2-x, 86%) var(--wm-glint2-y, 30%),
      var(--wm-glint2, rgba(244,249,255,.5)) 0%, transparent 100%),
    radial-gradient(ellipse var(--wm-beam-width, 65%) var(--wm-beam-height, 47%) at var(--wm-beam-x, 92%) var(--wm-beam-y, 58%),
      var(--wm-beam, rgba(201,222,255,.6)) 0%, transparent 100%),
    radial-gradient(ellipse var(--wm-light-width, 104%) var(--wm-light-height, 138%) at 108% var(--wm-light-y, 48%),
      var(--wm-hot, rgba(248,251,255,.92)) 0%, var(--wm-cool, rgba(171,197,238,.5)) 44%, transparent 100%),
    linear-gradient(100deg, #505462 0%, #596273 24%, #69758b 50%, #7c899f 78%, #8b99af 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  color: transparent; -webkit-text-stroke: .65px var(--wm-edge, transparent);
  /* Тонкое отражение только на освещённой стороне. Без blur/filter на глифах. */
  -webkit-mask-image: linear-gradient(100deg, transparent var(--wm-edge-start, 44%), #000 94%);
  mask-image: linear-gradient(100deg, transparent var(--wm-edge-start, 44%), #000 94%);
}
.wm-surface {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; visibility: hidden;
}
.has-lit-surface .wm-fill, .has-lit-surface .wm-edge { opacity: 0; }
.has-lit-surface .wm-surface { visibility: visible; }
:root[data-theme="light"] .wm-surface { display: none; }
.wm-shadow {
  position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
  color: rgba(0,0,0,.55); filter: blur(16px); transform: translateY(10px);
}
/* Вуаль-затемнение УБРАНА (2026-08-02, слово Алекса). Тёмный блоб
   1100x380 поверх дыма выедал пятно вокруг словомарка - дым «обходил
   надпись стороной», а на светлой теме блоб оставался грязным пятном.
   Тень в самих буквах даёт .wm-shade, ему вуаль не нужна.
   Элемент жив: за него держится параллакс (Atmosphere.parallax). */
.wm-veil {
  position: absolute; z-index: 3; pointer-events: none;
  left: 50%; top: 50%; width: min(1100px, 98vw); height: 380px; transform: translate(-50%,-50%);
  background: none;
  will-change: transform;
}
/* Светлая тема: металл темнеет, тень почти нулевая (на бумаге даже
   слабое пятно читается грязью). Полная доводка светлой - отдельным заходом. */
:root[data-theme="light"] .wm-fill {
  background: linear-gradient(95deg, #aeb7c4 0%, #8b95a5 20%, #5d6878 44%,
    #3c4554 62%, #262e3c 80%, #171d28 100%);
  -webkit-background-clip: text; background-clip: text;
}
:root[data-theme="light"] .wm-shadow { color: rgba(20,35,70,.10); filter: blur(8px); transform: translateY(3px); }
:root[data-theme="light"] .wm-edge { display: none; }
:root[data-theme="light"] .wm-veil {
  background: radial-gradient(38% 60% at 18% 50%, rgba(233,236,241,.86) 0%, transparent 70%); }

/* Командная строка Дома */
/* Стекло, а не марля: дым идёт ПОД панелью и размывается за ней.
   Прежний полупрозрачный фон пропускал его насквозь и засвечивал текст. */
/* Компактнее, чем было (72px / 22px паддинг): в принятом кадре поле
   тоньше и не спорит с героем. Громоздкая плита из прежней версии
   тянула на себя весь низ экрана. */
/* КРУПНЕЕ, на две строки, стрелка в правом нижнем углу (референс Grok,
   слово Алекса 2026-09-09: «композер побольше»). */
.command {
  position: relative; z-index: 10; width: 100%; min-height: 110px; box-sizing: border-box;
  background-image: var(--lds-dither),
    linear-gradient(color-mix(in srgb, var(--surface-1) 88%, transparent),
                    color-mix(in srgb, var(--surface-1) 88%, transparent));
  background-size: 128px 128px, auto;
  background-blend-mode: soft-light, normal;
  backdrop-filter: blur(28px) saturate(1.2);
  /* radius-xl, а не md: при высоте 62px десятка читалась почти прямым
     углом - поле выпадало из системы, где скруглено всё остальное. */
  border: 1px solid var(--line-3); border-radius: var(--radius-xl);
  padding: 20px 22px 56px; box-shadow: var(--shadow-3);
  transition: var(--transition-control);
}
.command:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-3), var(--glow-cool); }
.command__input {
  width: 100%; background: transparent; border: none; outline: none; resize: none;
  font-size: var(--fs-body-lg); line-height: var(--lh-normal); font-family: var(--font-body);
}
.command__input::placeholder { color: var(--text-tertiary); }
.command__send {
  position: absolute; right: 14px; bottom: 14px;
  width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-4); border: 1px solid var(--line-3);
  color: var(--text-secondary); box-shadow: var(--bevel-top);
  transition: var(--transition-control);
}
.command__send:hover { color: var(--text-primary); border-color: var(--line-strong); background: var(--accent-wash); }
.command__send svg { width: 16px; height: 16px; }

/* ── ГЛАНСЫ (карточки Дома) ──────────────────────────────── */
/* ВРЕМЕННО у левого края (лок Алекса 2026-08-02): это не уведомления,
   и центр Дома они занимали зря. Судьба решается отдельно - лента
   событий, строка-статус или переезд в Центр. */
.glances {
  z-index: 10; position: absolute; left: var(--space-5); bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: opacity var(--dur-2) var(--ease-out);
}
/* Такое же стекло, как у командной строки - дым остаётся позади. */
.glance {
  width: 244px; padding: 11px 14px; text-align: left;
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
  backdrop-filter: blur(24px) saturate(1.15);
  border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); transition: var(--transition-control);
}
.glance:hover { border-color: var(--line-3); background: var(--surface-2); }
.glance__row { display: flex; gap: 10px; align-items: flex-start; }
.glance__txt { flex: 1; font-size: var(--fs-body-sm); line-height: 1.4; color: var(--text-primary); }
.glance__cols { display: flex; gap: var(--space-6); }
.glance__k { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; }
.glance__v { font-family: var(--font-mono); font-size: 20px;
  font-variant-numeric: tabular-nums; color: var(--text-primary); }
.glance__v--ac { color: var(--accent); }

/* ── ПУЛЬС СИСТЕМЫ (правый низ) ──────────────────────────────
   Не карточка и не кнопка: система тихо говорит о себе. Слева -
   то, что она хочет от владельца; справа - как она сама дышит.
   Числа сада раньше лежали третьей карточкой слева - это был дубль. */
.pulse {
  z-index: 10;
  position: absolute; right: var(--space-5); bottom: var(--space-5);
  text-align: right; pointer-events: none;
  font-family: var(--font-mono); letter-spacing: var(--ls-wider);
  text-transform: uppercase; line-height: 1.7;
}
/* Правый низ - самое светлое место экрана (там луч), поэтому тексту
   нужна собственная тень, иначе он тонет в свете. */
.pulse__t { font-size: var(--fs-nano); color: var(--text-primary); opacity: .78;
  text-shadow: 0 1px 6px rgba(5,7,11,.75); }
.pulse__v { font-size: var(--fs-nano); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(5,7,11,.75); }

.tag {
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .12em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-xs);
  height: fit-content; white-space: nowrap;
  color: var(--accent); border: 1px solid var(--accent-glow);
}
.tag--cool { color: var(--cool); border-color: var(--cool-wash); }
.tag--ok { color: var(--ok); border-color: var(--ok-wash); }
.tag--danger { color: var(--danger); border-color: var(--danger-wash); }

/* ============================================================
   ДОК
   ============================================================ */
/* Полосы-подложки НЕТ (лок Алекса 2026-08-02): капсула дока висит сама,
   как в кабинном HUD. Подложка под подложкой - двойная мебель ни за чем. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--chrome-dock);
  z-index: var(--z-chrome); display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--space-5);
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.dock__sys {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: var(--space-2);
}
/* Док-капсула (референс №1): иконки собраны в одну обойму по центру,
   а не размазаны по полосе. Подписи под иконками видны всегда. */
/* Обойма кабинного HUD: длинная капсула с двойным контуром, внутри
   плитки-кнопки. Внешняя линия - корпус прибора, внутренняя - экран. */
/* Обойма-голограмма: вытянутый прямоугольник со скруглением, висит
   неподвижно (без наклонов и перспективы - лок Алекса 2026-08-02).
   Корпус - тёмное стекло с тонкой светлой кромкой; никакого двойного
   контура-кольца. Вылет выступает за верх, обрезать нельзя. */
.dock__apps {
  position: absolute; left: 50%; bottom: 8px;
  /* Наклон ОТ ЗРИТЕЛЯ (лок Алекса, третья формулировка - именно так):
     верх панели уходит вглубь, как приборная доска. Не skew вбок.
     Плитки наклоняются вместе с панелью; контент при 9deg визуально
     остаётся прямым - искажение меньше процента. */
  transform: translateX(-50%) perspective(950px) rotateX(9deg);
  transform-origin: 50% 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 26px;
  overflow: visible;
  /* СТЕКЛО (лок Алекса 2026-08-02), доведённое: просвет в середине,
     глубокая полость к низу, яркая верхняя грань, амбиент голограммы
     изнутри и отрыв от «пола» тенью - стекло ВИСИТ, а не лежит. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 44%, transparent),
    color-mix(in srgb, var(--surface-0) 56%, transparent) 55%,
    color-mix(in srgb, var(--surface-0) 72%, transparent));
  backdrop-filter: blur(30px) saturate(1.25);
  border: 1px solid var(--holo-edge);
  /* Свечение прибрано (2026-08-11, слово Алекса: «чуть поменьше, но не
     полностью»): внешний глоу вдвое тише, боковые холодные засветы и
     амбиент изнутри ослаблены. Стекло и тени отрыва не тронуты. */
  box-shadow:
    var(--shadow-3),
    0 24px 48px -14px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(207,224,255,.08),
    inset 0 -14px 28px rgba(0,0,0,.36),
    inset 0 0 46px rgba(207,224,255,.03),
    inset 14px 0 18px -12px rgba(207,224,255,.10),
    inset -14px 0 18px -12px rgba(207,224,255,.10),
    0 0 24px rgba(207,224,255,.045);
}
/* Блик по верхней грани - прибор под напряжением. */
.dock__apps::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--holo-edge-hot) 30%,
    var(--holo-edge-hot) 70%, transparent);
  pointer-events: none;
}

/* ДВОЙНАЯ ПРОЕКЦИЯ (референс: торец бара SC): внешний контур-эхо с
   зазором от корпуса, на торцах ярче - голограмма проецируется, и у
   неё есть повторный след. Дышит в такт лучу; глохнет при
   prefers-reduced-motion вместе с --dur-breath. */
.dock__apps::after {
  content: ""; position: absolute; inset: -7px; border-radius: 33px;
  border: 1px solid rgba(207,224,255,.13);
  border-left-color: rgba(207,224,255,.40);
  border-right-color: rgba(207,224,255,.40);
  /* Двойное тиснение: вторая, более тихая линия проекции снаружи. */
  outline: 1px solid rgba(207,224,255,.06);
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(207,224,255,.04), inset 0 0 12px rgba(207,224,255,.035);
  pointer-events: none;
  animation: holo-echo calc(var(--dur-breath) / 2.2) var(--ease-in-out) infinite;
}
@keyframes holo-echo { 0%,100% { opacity: .65 } 50% { opacity: 1 } }
:root[data-theme="light"] .dock__apps::after {
  border-color: rgba(74,111,192,.12);
  border-left-color: rgba(74,111,192,.30);
  border-right-color: rgba(74,111,192,.30);
}

/* Материал дока ЗАЛОЧЕН Алексом 2026-08-02: СТЕКЛО. Варианты «призрак»
   и «борт» отклонены и удалены; витрина - interfaces/os/dock-variants.html. */

/* Блок статуса слева: слот логотипа + счётчики сада в полный рост,
   не сжатые в столбик-микрошрифт. */
.dock__id {
  display: flex; align-items: center; gap: 14px; padding: 0 16px 0 4px;
  margin-right: 6px; border-right: 1px solid var(--line-1);
}
/* Слот под логотип: наклон даёт перспектива обоймы, свой скос не нужен.
   Когда Алекс принесёт финальный SVG, он встаёт сюда же. */
.dock__id-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface-3) 55%, transparent);
  color: var(--text-primary);
  transition: var(--transition-control);
}
/* Логотип живой: дышит свечением в такт эху обоймы, под курсором
   просыпается ярче. Глушится prefers-reduced-motion через --dur-breath. */
.dock__id-mark svg {
  width: 26px; height: 26px; display: block;
  animation: mark-breathe calc(var(--dur-breath) / 2.2) var(--ease-in-out) infinite;
  transition: transform var(--dur-2) var(--ease-out);
}
@keyframes mark-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(207,224,255,0)); opacity: .92; }
  50%      { filter: drop-shadow(0 0 8px rgba(207,224,255,.5)); opacity: 1; }
}
.dock__id-mark:hover { border-color: var(--holo-edge-hot);
  box-shadow: inset 0 0 14px rgba(207,224,255,.08), 0 0 14px rgba(207,224,255,.10); }
.dock__id-mark:hover svg { transform: scale(1.08);
  filter: drop-shadow(0 0 9px rgba(207,224,255,.55)); }
.dock__id-txt { display: flex; flex-direction: column; gap: 2px; }
.dock__id-v {
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.dock__id-k {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); line-height: 1;
}
.dock__right { display: flex; align-items: center; gap: var(--space-2); }

/* Плитка: продолговатый прямоугольник с обводкой. Наклон «от нас» ей
   даёт перспектива обоймы - свой скос плитке не нужен (боковой skew
   отклонён Алексом: наклон не в сторону, а вглубь). */
.app {
  /* Радиус КОНЦЕНТРИЧЕН обойме: 26px корпуса минус 9px паддинга = 17.
     Несогласованные радиусы (были 10) спорили с формой корпуса. */
  position: relative; width: 96px; height: 58px; border-radius: 17px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding-bottom: 8px;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--surface-3) 46%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
              inset 0 0 0 1px rgba(207,224,255,.08);
  transition: color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
/* Риска в основании - широкая, как в референсе. */
.app::before {
  content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 62%; height: 3px; border-radius: 2px;
  background: var(--line-2); transition: var(--transition-control);
}
.app:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-4) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              inset 0 0 0 1px var(--holo-edge),
              inset 0 0 20px rgba(207,224,255,.07);
}
.app:hover::before { background: var(--holo-edge-hot); }
.app svg { width: 20px; height: 20px;
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.app:hover > svg { transform: translateY(-2px); }

/* АКТИВНАЯ плитка - светлая, как HOME в референсе: заливка холодным,
   текст в полную силу. Иконка улетает в вылет. */
.app.is-active {
  color: var(--text-primary);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cool) 20%, var(--surface-4)),
    color-mix(in srgb, var(--cool) 8%, var(--surface-2)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              inset 0 0 24px rgba(207,224,255,.10),
              0 0 18px rgba(207,224,255,.10);
}
/* ВЫЛЕТ - один на всю систему, и у него ОДНА анимация (лок Алекса,
   финальный): иконка ИЗ СВОЕЙ плитки растёт и поднимается за край
   обоймы. Горизонтальных перелётов в коде больше НЕТ - как в
   референсе, вылет всегда возникает на месте. transform ставится
   только мгновенно и в transition не участвует. */
.dock__fly {
  position: absolute; left: 0; top: -16px; z-index: 3; pointer-events: none;
  width: 34px; height: 34px; opacity: 0;
  color: var(--text-primary);
  filter: drop-shadow(0 0 13px rgba(207,224,255,.7))
          drop-shadow(0 5px 11px rgba(0,0,0,.6));
  transition: opacity var(--dur-2) var(--ease-out);
}
.dock__fly.is-on { opacity: 1; }

/* Иконка живёт слоями .fx - при переезде их два (морф). */
.dock__fly .fx { position: absolute; inset: 0; display: block; }

/* ПОСАДКА (обратный FLIP): вылет летит назад в штатную иконку своей
   плитки. На время полёта штатная скрыта - иначе двоится; проявляется
   в момент касания. */
.app.is-landing > svg { visibility: hidden; }

/* РОЖДЕНИЕ (первое открытие) - FLIP в JS: штатная иконка плитки
   «сама» растёт и выезжает - вылет стартует с её замеренного
   прямоугольника, непрозрачным. CSS-анимации не участвуют. */

/* ПЕРЕЕЗД (переключение открытых): вылет ПЛАВНО едет к новой плитке
   (WAAPI в JS), и В ПУТИ иконка меняется морфом - старая растворяется
   в размытие, новая проявляется из него. Один объект, меняющийся под
   кнопку (лок Алекса, шестая итерация - финальная). */
.dock__fly .fx.fx-out { animation: fx-out var(--dur-3) var(--ease-out) both; }
.dock__fly .fx.fx-in  { animation: fx-in  var(--dur-3) var(--ease-out) both; }
@keyframes fx-out {
  0%   { opacity: 1; filter: blur(0); }
  45%  { opacity: 0; filter: blur(5px); }
  100% { opacity: 0; filter: blur(5px); }
}
@keyframes fx-in {
  0%   { opacity: 0; filter: blur(5px); }
  40%  { opacity: 0; filter: blur(5px); }
  100% { opacity: 1; filter: blur(0); }
}
/* Иконка вылета ПЛОТНАЯ: жирнее штрих, меньше воздуха вокруг глифа -
   иначе в 30px она смотрится паутинкой без контраста. */
.dock__fly svg {
  width: 100%; height: 100%; opacity: .95;
  overflow: visible; transform: scale(1.16); stroke-width: 2.1;
}
/* Своя иконка ПРЯЧЕТСЯ, пока наверху копия - иначе двоится (баг со
   скрина Алекса: opacity перебивался transition, visibility надёжнее). */
.app.is-active > svg { visibility: hidden; }

/* Подпись читаемая, не микроскопическая - в референсе имена видны. */
.app__label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; white-space: nowrap; opacity: .85;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.app.is-active .app__label { opacity: 1; color: var(--text-primary); }
.app.is-open { color: var(--text-secondary); }
.app.is-active { color: var(--text-primary); }
/* Точка у открытого, акцентная черта у активного - как в настоящей ОС. */
/* ОТКРЫТО, но не в фокусе: риска горит приглушённым оранжевым -
   окно живо и ждёт, но не вылетает. Вылет один на всю систему. */
.app.is-open::before {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* АКТИВНО: риска в полный оранжевый и медленно дышит. */
.app.is-active::before {
  background: var(--app-accent, var(--accent));
  box-shadow: 0 0 12px var(--accent-glow), 0 0 3px var(--accent);
  animation: dock-pulse 3.4s var(--ease-in-out) infinite;
}
@keyframes dock-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow), 0 0 3px var(--accent); }
  50%      { box-shadow: 0 0 22px var(--accent-glow), 0 0 5px var(--accent); }
}
.app svg { width: 19px; height: 19px; }
.app__tip {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-primary);
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 4px 8px; opacity: 0; pointer-events: none; z-index: var(--z-tip);
  transition: opacity var(--dur-1) var(--ease-out);
}
.app:hover .app__tip { opacity: 1; }
/* Бейдж: сколько ждёт внимания. Всегда акцентом - это «система просит». */
.app__badge {
  position: absolute; top: 3px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--text-inverse);
  font-family: var(--font-mono); font-size: var(--fs-nano); font-weight: var(--w-bold);
  display: grid; place-items: center; box-shadow: 0 0 10px var(--accent-glow);
}

/* ============================================================
   ОКНА (оконный менеджер)
   ============================================================ */
.windows { position: absolute; inset: var(--chrome-top) 0 var(--chrome-dock); z-index: var(--z-window);
  pointer-events: none; }

/* Окно - стекло из языка дока: просвет, глубина к низу, светлая
   верхняя грань. Плотность выше доковой (в окне работают с текстом),
   но фон сквозь него дышит. */
.win {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  /* Первый слой - дизер-тайл в soft-light: backdrop-blur под окном
     оставляет плавные градиенты, и на стекле проступали ступени-рябь.
     Нейтральный шум растворяет их прямо на поверхности окна. */
  background-image: var(--lds-dither), linear-gradient(180deg,
    color-mix(in srgb, var(--surface-1) 84%, transparent),
    color-mix(in srgb, var(--surface-0) 90%, transparent));
  background-size: 128px 128px, auto;
  background-blend-mode: soft-light, normal;
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -12px 26px rgba(0,0,0,.22);
  /* Клип контента - на баре и теле (ниже): сам контейнер открыт,
     иначе эхо-контур активного окна срезался бы. */
  overflow: visible;
  transform-origin: center bottom;
  animation: win-open var(--dur-3) var(--ease-out) both;
}
@keyframes win-open {
  from { opacity: 0; transform: scale(.965) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.win.is-closing { animation: win-close var(--dur-2) var(--ease-in-out) both; }
@keyframes win-close {
  to { opacity: 0; transform: scale(.97) translateY(10px); }
}
/* Активное окно приподнято светом, неактивные - тише. Золото не разливаем. */
.win.is-active { border-color: var(--line-3); box-shadow: var(--shadow-4); }
.win:not(.is-active) { opacity: .88; }
.win:not(.is-active) .win__title { color: var(--text-tertiary); }
.win.is-max { border-radius: var(--radius-md); }
.win.is-min { display: none; }
.win.is-dragging, .win.is-resizing { transition: none; }
/* Пока тащим - гасим выделение во всём документе: иначе текст в
   соседних окнах подсвечивается синим за курсором. */
body.is-dragging, body.is-dragging * { user-select: none !important; }
.win.is-dragging { cursor: grabbing; box-shadow: var(--shadow-4); }

.win__bar {
  height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3);
  padding: 0 10px 0 12px; cursor: grab;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-bottom: 1px solid var(--line-1); user-select: none;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow: hidden;
}
.win__bar:active { cursor: grabbing; }
.win__glyph { width: 16px; height: 16px; color: var(--app-accent, var(--text-tertiary)); flex-shrink: 0; }
.win__glyph svg { width: 100%; height: 100%; }
.win__title {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.win__sub {
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .1em;
  color: var(--text-faint); white-space: nowrap;
}
.win__ctl { display: flex; align-items: center; gap: 1px; margin-left: auto; flex-shrink: 0; }
.win__btn {
  width: 26px; height: 24px; border-radius: 5px; display: grid; place-items: center;
  color: var(--text-faint); transition: var(--transition-control);
}
.win__btn:hover { color: var(--text-primary); background: var(--surface-4); }
.win__btn--close:hover { color: var(--danger); background: var(--danger-wash); }
.win__btn svg { width: 13px; height: 13px; }

.win__body { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.win__body iframe { width: 100%; height: 100%; border: none; background: var(--surface-0); }

/* Ручки resize: невидимые полосы по краям, курсор подсказывает. */
.win__grip { position: absolute; z-index: 5; }
.win__grip--n { top: -3px; left: 12px; right: 12px; height: 7px; cursor: ns-resize; }
.win__grip--s { bottom: -3px; left: 12px; right: 12px; height: 7px; cursor: ns-resize; }
.win__grip--w { left: -3px; top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; }
.win__grip--e { right: -3px; top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; }
.win__grip--nw { top: -3px; left: -3px; width: 15px; height: 15px; cursor: nwse-resize; }
.win__grip--ne { top: -3px; right: -3px; width: 15px; height: 15px; cursor: nesw-resize; }
.win__grip--sw { bottom: -3px; left: -3px; width: 15px; height: 15px; cursor: nesw-resize; }
.win__grip--se { bottom: -3px; right: -3px; width: 15px; height: 15px; cursor: nwse-resize; }

/* Подсветка зоны прилипания - показывает, куда ляжет окно. */
.snap-hint {
  position: absolute; z-index: 1; pointer-events: none; opacity: 0;
  border: 1px solid var(--cool); background: var(--cool-wash);
  border-radius: var(--radius-md); backdrop-filter: blur(2px);
  transition: opacity var(--dur-1) var(--ease-out),
              left var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out),
              width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out);
}
.snap-hint.is-on { opacity: 1; }

/* ============================================================
   СОДЕРЖИМОЕ КОМНАТ (общие примитивы L2)
   ============================================================ */
.room { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.room__head {
  flex-shrink: 0; padding: var(--space-4) var(--space-5) var(--space-3);
  display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line-1);
}
.room__h { font-size: var(--fs-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); }
.room__scroll { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-6); }
.room__empty {
  flex: 1; display: grid; place-items: center; text-align: center;
  color: var(--text-tertiary); font-size: var(--fs-body-sm); padding: var(--space-7);
}

/* Сегментный переключатель видов - приборный, без пузырей. */
.seg { display: flex; gap: 1px; padding: 2px; background: var(--surface-inset);
  border: 1px solid var(--line-1); border-radius: var(--radius-sm); }
.seg__b {
  padding: 5px 12px; border-radius: 6px; font-family: var(--font-mono);
  font-size: var(--fs-nano); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary); transition: var(--transition-control);
}
.seg__b:hover { color: var(--text-secondary); }
.seg__b.is-on { color: var(--text-primary); background: var(--surface-3); box-shadow: var(--bevel-top); }

.field {
  width: 100%; padding: 9px 12px; background: var(--surface-inset);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm); outline: none; transition: var(--transition-control);
}
.field:focus { border-color: var(--line-strong); box-shadow: var(--glow-cool); }
.field::placeholder { color: var(--text-faint); }

.btn {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-secondary); transition: var(--transition-control);
}
.btn:hover { color: var(--text-primary); border-color: var(--line-strong); background: var(--surface-3); }
.btn--pri { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-wash); }
.btn--pri:hover { color: var(--accent-strong); border-color: var(--accent); }
.btn--danger { color: var(--danger); border-color: var(--danger-wash); }
.btn--danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }

.meta {
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ============================================================
   ЛАУНЧЕР «Все приложения»
   ============================================================ */
.launcher {
  position: fixed; inset: 0; z-index: var(--z-launcher); display: none;
  background: var(--scrim); backdrop-filter: blur(18px);
  align-items: center; justify-content: center;
}
.launcher.is-on { display: flex; animation: fade-in var(--dur-2) var(--ease-out) both; }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
/* Flex, не grid: последняя неполная строка тоже центрируется. */
.launcher__grid {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center; max-width: 720px; padding: var(--space-6);
}
.launcher__app {
  width: 132px; padding: var(--space-4) var(--space-2); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-secondary); border: 1px solid transparent; transition: var(--transition-control);
}
.launcher__app:hover { color: var(--text-primary); background: var(--surface-2); border-color: var(--line-2); }
.launcher__app svg { width: 30px; height: 30px; }
.launcher__name { font-size: var(--fs-body-sm); }
.launcher__kind { font-family: var(--font-mono); font-size: var(--fs-nano);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ============================================================
   ТЕЛЕПОРТ (Cmd+K)
   ============================================================ */
.teleport {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  background: var(--scrim); backdrop-filter: blur(10px);
  align-items: flex-start; justify-content: center; padding-top: 18vh;
}
.teleport.is-on { display: flex; animation: fade-in var(--dur-1) var(--ease-out) both; }
.teleport__box {
  width: min(560px, 92vw);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 78%, transparent),
    color-mix(in srgb, var(--surface-1) 88%, transparent));
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--holo-edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,.09),
    0 0 34px rgba(207,224,255,.07);
  overflow: hidden;
  animation: teleport-in var(--dur-2) var(--ease-out) both;
}
@keyframes teleport-in { from { opacity:0; transform:translateY(-10px) scale(.99) } to { opacity:1; transform:none } }
.teleport__input {
  width: 100%; padding: 16px 18px; background: transparent; border: none; outline: none;
  font-size: var(--fs-body-lg); border-bottom: 1px solid var(--line-1);
}
.teleport__input::placeholder { color: var(--text-faint); }
.teleport__list { max-height: 320px; overflow-y: auto; padding: 6px; }
.teleport__item {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius-sm); text-align: left;
  color: var(--text-secondary); transition: var(--transition-control);
}
.teleport__item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-tertiary); }
.teleport__item.is-sel { background: var(--surface-4); color: var(--text-primary); }
.teleport__item.is-sel svg { color: var(--accent); }
.teleport__hint { margin-left: auto; font-family: var(--font-mono);
  font-size: var(--fs-nano); letter-spacing: .1em; color: var(--text-faint); }

/* ============================================================
   СИСТЕМНОЕ МЕНЮ (по словомарку - как яблоко в macOS)
   ============================================================ */
.sysmenu {
  position: fixed; top: 40px; left: 12px; z-index: var(--z-modal); display: none;
  min-width: 232px; padding: 5px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 80%, transparent),
    color-mix(in srgb, var(--surface-1) 88%, transparent));
  backdrop-filter: blur(26px) saturate(1.2);
  border: 1px solid var(--holo-edge); border-radius: var(--radius-md);
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,.08);
}
.sysmenu.is-on { display: block; animation: teleport-in var(--dur-1) var(--ease-out) both; }
.sysmenu__i {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; text-align: left; font-size: var(--fs-body-sm);
  color: var(--text-secondary); transition: var(--transition-control);
}
.sysmenu__i:hover { background: var(--surface-4); color: var(--text-primary); }
.sysmenu__i .meta { margin-left: auto; padding-left: var(--space-4); }
.sysmenu__sep { height: 1px; background: var(--line-1); margin: 5px 8px; }

/* ============================================================
   ОБ ЭТОЙ СИСТЕМЕ - паспорт машины, а не рекламный экран
   ============================================================ */
.about {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  background: var(--scrim); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
}
.about.is-on { display: flex; animation: fade-in var(--dur-2) var(--ease-out) both; }
.about__box {
  position: relative;
  width: min(380px, 92vw); padding: var(--space-7) var(--space-6) var(--space-5);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 80%, transparent),
    color-mix(in srgb, var(--surface-1) 90%, transparent));
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--holo-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,.09);
  text-align: center; animation: teleport-in var(--dur-2) var(--ease-out) both;
}
/* Паспорт системы достоин двойного тиснения. */
.about__box::after {
  content: ""; position: absolute; inset: -6px; z-index: -1;
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(207,224,255,.11);
  border-left-color: rgba(207,224,255,.30);
  border-right-color: rgba(207,224,255,.30);
  outline: 1px solid rgba(207,224,255,.06); outline-offset: 3px;
  pointer-events: none;
}
.about__mark { display: block; width: 68px; height: 68px; margin: 0 auto var(--space-4);
  color: var(--text-primary); }
.about__mark svg { width: 100%; height: 100%; }
.about__wm { font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); }
.about__ver { margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); }
/* Ведомость показаний: ключ, пунктир-заполнитель, значение. Приём
   приборной панели - глаз ведёт по линии от подписи к цифре. */
.about__specs { margin: var(--space-5) 0; text-align: left;
  display: flex; flex-direction: column; gap: 10px; }
.about__specs .spec { display: flex; align-items: baseline; gap: 8px; }
.about__specs dt { font-family: var(--font-mono); font-size: var(--fs-nano);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap; }
.about__specs .spec__dots { flex: 1; height: 1px; margin-bottom: 3px;
  background-image: linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 4px 1px; }
.about__specs dd { font-size: var(--fs-body-sm); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   АДАПТИВ - на узком экране окон нет, только фуллскрин-комнаты
   ============================================================ */
@media (max-width: 860px) {
  .sys__wx, .sys__date { display: none; }
  .glances { flex-direction: column; align-items: center; }
  .glance { width: min(340px, 92vw); }
  .win { border-radius: 0; }
}
@media (max-width: 560px) {
  .glances { display: none; }
  .brand__wm { display: none; }
}

/* Поле не засвечивается передней пеленой. */
:root:not([data-theme="light"]) .command { background-color: #05070a; }
@media (max-width: 600px) {
  .home { gap: 30px; padding-top: 6vh; }
  .wordmark { font-size: 24vw; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .home { padding-top: 0; gap: 24px; }
  .wordmark { font-size: min(20vw, 29vh); }
}