/* ══════════════════════════════════════════════════════════════════
   MOZGI UI v1 — единые токены и компоненты.
   Источник правил: UI-аудит 2026-09-14 (размеры, типографика, состояния)
   + визуальный язык сайта (монохром, hairline).
   Правило: размеры и цвета берутся ТОЛЬКО отсюда. Исключение — документируется.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Цвета ── */
  --bg:        #0a0a0a;
  --panel:     #131313;
  --panel-2:   #171717;
  --panel-3:   #1e1e1e;
  --ink:       #ffffff;
  --soft:      rgba(255,255,255,.72);
  --dim:       rgba(255,255,255,.50); /* 5.4:1 на bg — WCAG ≥4.5 для 12px меты */
  --hairline:  rgba(255,255,255,.07);
  --hairline-2:rgba(255,255,255,.12);
  --fill:      rgba(255,255,255,.10);
  --fill-2:    rgba(255,255,255,.06);
  --fill-3:    rgba(255,255,255,.12);
  --danger:    #ef4444;
  --ink-contrast: #0a0a0a;   /* текст на ink-фоне (кнопка primary) */
  --panel-elev: #161616;     /* всплывающие поверхности: диалог, меню, тост */
  --success:   #22c55e;

  /* ── Шрифты ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ── Шкала интервалов (аудит: 4 8 12 16 24 32 48 64) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── Радиусы: ровно три роли (аудит) ── */
  --r-card: 16px;   /* карточки, панели, диалоги */
  --r-ctl:  12px;   /* кнопки, поля */
  --r-pill: 999px;  /* только для pill-элементов */
  --r-xs:   4px;    /* чекбокс, бейджи (M3 extra-small) */
  --r-sm:   8px;    /* тултипы, мелкие вложенные (M3 small) */

  /* ── Elevation (M3 уровни): 0 — hairline без тени; 2 — меню/поповеры; 3 — диалоги/шиты/тосты ── */
  --shadow-2: 0 8px 24px -6px rgba(0,0,0,.5), inset 0 0 0 1px var(--hairline-2);
  --shadow-3: 0 24px 64px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);

  /* ── Window size classes (M3): навигация по ширине ── */
  --bp-compact: 600px;   /* <600 мобильный хедер */
  --bp-expanded: 840px;  /* 600–839 рейл 64; ≥840 полный сайдбар */

  /* ── Layout ── */
  --sbw: 264px;            /* desktop sidebar */
  --sbw-collapsed: 64px;
  --page-pad: 32px;        /* desktop; tablet 24, mobile 16 — в media */

  /* ── Зоны нажатия ── */
  /* ── State layers (M3: hover 8, focus/press 12, drag 16; disabled 38/12) ── */
  --fill-hover: rgba(255,255,255,.08);
  --fill-press: rgba(255,255,255,.12);

  --hit: 44px;             /* минимум touch */
  --hit-lg: 48px;          /* частые действия, поля, мобильные кнопки */

  /* ── Motion (Material 3: md.sys.motion.*) ── */
  --dur-s2: 100ms; --dur-s3: 150ms; --dur-s4: 200ms;   /* short */
  --dur-m1: 250ms; --dur-m2: 300ms; --dur-m4: 400ms;   /* medium */
  --ease-standard:  cubic-bezier(.2,0,0,1);
  --ease-decel:     cubic-bezier(0,0,0,1);
  --ease-accel:     cubic-bezier(.3,0,1,1);
  --ease-emph-in:   cubic-bezier(.05,.7,.1,1);  /* вход панелей/диалогов */
  --ease-emph-out:  cubic-bezier(.3,0,.8,.15);  /* выход */
  /* легаси-алиасы (постепенно заменяются на явные) */
  --t-fast: var(--dur-s3);
  --t-base: var(--dur-m1);
  --ease: var(--ease-standard);
  /* правило: вход длиннее выхода; state-изменения — standard 150–200 */
}
/* ── Светлая тема: html[data-theme="light"], выбор хранится в localStorage mozgi-theme ── */
html[data-theme="light"]{
  --bg:#fafafa; --panel:#ffffff; --panel-2:#f4f4f5; --panel-3:#e9e9eb;
  --panel-elev:#ffffff;
  --ink:#0a0a0a; --ink-contrast:#ffffff;
  --soft:rgba(0,0,0,.72); --dim:rgba(0,0,0,.56); /* 4.9:1 */
  --danger:#dc2626; /* 4.6:1 на light */ --success:#15803d; /* 4.8:1 */
  --hairline:rgba(0,0,0,.08); --hairline-2:rgba(0,0,0,.16);
  --fill:rgba(0,0,0,.10); --fill-2:rgba(0,0,0,.05); --fill-3:rgba(0,0,0,.08);
  --fill-hover:rgba(0,0,0,.08); --fill-press:rgba(0,0,0,.12);
}
html[data-theme="light"] .btn-primary:hover{background:rgba(0,0,0,.82)}
html[data-theme="light"] .input:focus,html[data-theme="light"] .select:focus{box-shadow:inset 0 0 0 1px var(--hairline-2),0 0 0 2px rgba(0,0,0,.22)}
html[data-theme="light"] .btn-primary.is-loading::after{color:rgba(255,255,255,.75)}
@media (max-width:1024px){ :root{ --page-pad:24px } }
@media (max-width:599px){  :root{ --page-pad:16px } }

/* ── Базовые контракты ── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important} /* UI-05/06: hidden всегда скрыт, без исключений */
/* Кнопка без UA-стилей ВЕЗДЕ — иначе любая новая кнопка рождается белой плиткой */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══════════ ТИПОГРАФИКА — роли из аудита (size/line) ══════════ */
.t-hero      {font:700 32px/36px var(--font);letter-spacing:-.02em;color:var(--ink)}
.t-page      {font:700 24px/30px var(--font);letter-spacing:-.015em;color:var(--ink)}
.t-section   {font:700 24px/30px var(--font);letter-spacing:-.015em;color:var(--ink)}
.t-panel     {font:600 18px/24px var(--font);letter-spacing:-.01em;color:var(--ink)}
.t-body      {font:400 16px/24px var(--font);color:var(--soft)}
.t-caption   {font:400 14px/20px var(--font);color:var(--soft)}
.t-meta      {font:500 12px/16px var(--font);color:var(--dim)}
.t-meta-mono {font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
@media (min-width:600px){
  .t-hero    {font-size:44px;line-height:48px}
  .t-page    {font-size:28px;line-height:34px}
  .t-section {font-size:28px;line-height:34px}
}

/* ══════════ КНОПКИ ══════════
   Высота: mobile 48, desktop 40; compact 32 — только плотные desktop-панели.
   Иконка внутри 20–24; зона нажатия не меньше высоты кнопки. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--hit-lg);padding:0 20px;border-radius:var(--r-ctl);
  font:500 16px var(--font);cursor:pointer;border:0;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
  -webkit-tap-highlight-color:transparent;user-select:none;
}
@media (min-width:600px){ .btn{height:40px;font-size:14px;padding:0 16px} }
.btn svg{width:20px;height:20px;flex:0 0 20px}
.btn{position:relative}
@media (pointer:coarse){ .btn::before{content:"";position:absolute;inset:calc((var(--hit) - 100%)/2) 0} }
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;pointer-events:none}

.btn-primary{background:var(--ink);color:var(--ink-contrast)}
.btn-primary:hover{background:rgba(255,255,255,.86)}
.btn-secondary{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline-2)}
.btn-secondary:hover{background:var(--panel-3)}
.btn-ghost{background:transparent;color:var(--soft)}
.btn-ghost:hover{background:var(--fill-hover);color:var(--ink)}
.btn-ghost:active{background:var(--fill-press)}
.btn-danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px rgba(239,68,68,.35)}
.btn-danger:hover{background:rgba(239,68,68,.12)}

/* compact — ТОЛЬКО desktop плотные панели; на touch зона остаётся var(--hit) */
.btn-compact{height:32px;font-size:13px;padding:0 12px}
@media (pointer:coarse){
  .btn-compact{position:relative}
  .btn-compact::after{content:"";position:absolute;inset:calc((var(--hit) - 100%)/2) 0}
}

/* loading: высота не меняется (аудит-приёмка) */
.btn.is-loading{pointer-events:none;color:transparent;position:relative}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--dim);animation:mzg-spin .7s linear infinite;
}
.btn-primary.is-loading::after{color:rgba(10,10,10,.6)}
@keyframes mzg-spin{to{transform:rotate(360deg)}}

/* Иконка-кнопка: видимая часть может быть меньше, зона — минимум 44 */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--hit);height:var(--hit);border-radius:var(--r-ctl);
  background:transparent;color:var(--soft);border:0;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--fill-hover);color:var(--ink)}
.icon-btn:active{background:var(--fill-press)}
.icon-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ══════════ ПОЛЯ ══════════ — mobile 48/16px, desktop 40/14px */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field-label{font:500 14px/20px var(--font);color:var(--soft)}
.input,.select{
  height:var(--hit-lg);padding:0 14px;border-radius:var(--r-ctl);
  background:var(--panel-2);color:var(--ink);border:0;
  box-shadow:inset 0 0 0 1px var(--hairline);
  font:400 16px var(--font);width:100%;
  transition:box-shadow var(--t-fast);
}
@media (min-width:600px){ .input,.select{height:40px;font-size:14px} }
.input::placeholder{color:var(--dim)}
.input:focus,.select:focus{outline:0;box-shadow:inset 0 0 0 1px var(--hairline-2),0 0 0 2px rgba(255,255,255,.18)}
.input[disabled]{opacity:.38}
.input.is-error{box-shadow:inset 0 0 0 1px rgba(239,68,68,.55)}
.field-error{font:400 13px/18px var(--font);color:var(--danger)}
.field-hint{font:400 13px/18px var(--font);color:var(--dim)}
.field-label .req{color:var(--danger);margin-left:2px}
/* Обёртка: leading-иконка слева, trailing help/error-иконка справа */
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg.lead{position:absolute;left:14px;width:16px;height:16px;color:var(--dim);pointer-events:none}
.input-wrap>svg.trail{position:absolute;right:14px;width:16px;height:16px;color:var(--dim);pointer-events:none}
.input-wrap.has-lead .input{padding-left:40px}
.input-wrap.has-trail .input{padding-right:40px}
.input-wrap.is-error>svg.trail{color:var(--danger)}
textarea.input{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5'><path d='M2.5 4.5L6 8l3.5-3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
}

/* ══════════ CHECKBOX / SWITCH ══════════ — кликабельная строка 48, знак 20–24 */
.check-row{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--hit-lg);padding:0 var(--sp-2);border-radius:var(--r-ctl);
  cursor:pointer;font:400 16px var(--font);color:var(--soft);
  transition:background var(--t-fast);-webkit-tap-highlight-color:transparent;
}
@media (min-width:600px){ .check-row{font-size:14px} }
.check-row:hover{background:var(--fill-hover)}
.check-row:active{background:var(--fill-press)}
.check-row input{position:absolute;opacity:0;pointer-events:none}
.check-box{
  width:20px;height:20px;flex:0 0 20px;border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1.5px var(--hairline-2);
  display:grid;place-items:center;transition:background var(--t-fast),box-shadow var(--t-fast);
}
.check-box{color:var(--ink-contrast)}
.check-box svg{width:12px;height:12px;opacity:0;transition:opacity var(--t-fast)}
.check-row input:checked + .check-box{background:var(--ink);box-shadow:none}
.check-row input:checked + .check-box svg{opacity:1}
.check-row input:focus-visible + .check-box{outline:2px solid var(--ink);outline-offset:2px}

.switch-row{composes:check-row} /* строка та же — 48px */
.switch{
  width:40px;height:24px;flex:0 0 40px;border-radius:var(--r-pill);
  background:var(--fill);position:relative;transition:background var(--t-fast);
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--ink);transition:transform var(--t-base) var(--ease);
}
.check-row input:checked + .switch{background:var(--success)}
.check-row input:checked + .switch::after{transform:translateX(16px)}
.check-row input:focus-visible + .switch{outline:2px solid var(--ink);outline-offset:2px}

/* ══════════ БЕЙДЖИ ══════════ — статусы и метки; не кликабельны (кликабельное — chip) */
.mz-badge{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:var(--r-pill);
  font:500 12px/1 var(--font);
  background:var(--fill-2);color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.mz-badge-sm{height:20px;padding:0 8px;font-size:11px}
.mz-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.mz-badge-success{background:rgba(34,197,94,.12);color:var(--success);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
.mz-badge-danger{background:rgba(239,68,68,.12);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(239,68,68,.25)}
.mz-badge .x{display:grid;place-items:center;width:14px;height:14px;margin-right:-4px;border-radius:50%;cursor:pointer;color:inherit;opacity:.7}
.mz-badge .x:hover{opacity:1;background:var(--fill)}
.mz-badge .x svg{width:8px;height:8px}

/* ══════════ CHIPS ══════════ — зона минимум 44 */
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:var(--hit);padding:0 16px;border-radius:var(--r-pill);
  background:transparent;color:var(--soft);cursor:pointer;border:0;
  box-shadow:inset 0 0 0 1px var(--hairline-2);
  font:500 14px var(--font);text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.chip svg{width:16px;height:16px}
.chip:hover{background:var(--fill-2);color:var(--ink)}
.chip.is-active{background:var(--ink);color:var(--ink-contrast);box-shadow:none}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ══════════ КАРТОЧКИ / ПАНЕЛИ ══════════ — radius 16 */
.panel{
  background:var(--panel);border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.panel-pad{padding:var(--sp-5)}
@media (max-width:599px){ .panel-pad{padding:var(--sp-4)} }

/* ══════════ ДИАЛОГ ══════════ — фокус внутрь, Esc, закрытие 48 */
.dlg-bd{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:8vh var(--sp-4) var(--sp-4);
}
.dlg-bd.open{display:flex;justify-content:center;align-items:flex-start}
.dlg{
  width:min(560px,100%);max-height:min(76vh,680px);
  display:flex;flex-direction:column;
  background:var(--panel-elev);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-3);
}
.dlg-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--hairline);
}
.dlg-title{font:600 18px/24px var(--font);color:var(--ink);margin:0}
.dlg-close{
  width:var(--hit-lg);height:var(--hit-lg);flex:0 0 var(--hit-lg);
  display:grid;place-items:center;border-radius:var(--r-ctl);
  background:transparent;border:0;color:var(--dim);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.dlg-close svg{width:16px;height:16px}
.dlg-close:hover{background:var(--fill-hover);color:var(--ink)}
.dlg-close:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.dlg-body{overflow-y:auto;padding:var(--sp-5);scrollbar-width:thin}
@media (max-width:599px){
  .dlg-bd{padding:var(--sp-3)}
  .dlg{max-height:calc(100dvh - 24px)}
  .dlg-body{padding:var(--sp-4)}
}

/* ══════════ SIDEBAR-фрагменты ══════════ — 264 / collapsed 64 */
.mz-side-link{
  display:grid;grid-template-columns:20px 1fr auto;gap:var(--sp-3);align-items:center;
  min-height:var(--hit);padding:0 var(--sp-3);border-radius:var(--r-ctl);
  color:var(--soft);text-decoration:none;
  font:600 15px/20px var(--font);letter-spacing:-.005em;
  transition:background var(--t-fast),color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.mz-side-link svg{width:20px;height:20px;color:var(--dim)}
.mz-side-link:hover{background:var(--fill-hover);color:var(--ink)}
.mz-side-link:active{background:var(--fill-press)}
.mz-side-link.is-active{background:var(--fill-2);color:var(--ink)}
.mz-side-link .count{font:500 12px/18px var(--font);color:var(--dim)}
.mz-side-title{
  /* Inter 12/18 bold, без трекинга — как Untitled UI, аккуратнее mono-caps */
  font:700 11px/16px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);padding:0 var(--sp-3);
  margin:var(--sp-5) 0 var(--sp-2); /* 24 сверху — группы читаются раздельно (реф. Untitled UI) */
}
.mz-side-title:first-child{margin-top:var(--sp-2)}

/* ══════════ КАРТОЧКИ ══════════ — radius 16, hairline, hover затемняет */
.mz-card{
  display:flex;flex-direction:column;
  background:var(--panel);border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--hairline);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:background var(--t-fast);
}
a.mz-card:hover{background:var(--panel-2)}
.mz-card-media{
  position:relative;aspect-ratio:5/4;min-height:0;overflow:hidden;
  background:var(--panel-3);
  display:grid;place-items:center;color:var(--dim);
}
/* Абсолютный слой: натуральный размер картинки не растягивает ячейку (grid/flex min-content) */
.mz-card-media img,.mz-card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mz-card-media svg{width:40px;height:40px}
.mz-card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.mz-card-title{font:600 16px/22px var(--font);color:var(--ink);margin:0}
.mz-card-sub{font:500 12px/16px var(--mono);color:var(--dim)}
.mz-card-desc{
  font:400 14px/20px var(--font);color:var(--soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mz-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-2);
}
/* Карточка скилла: иконка-квадрат 40 вместо медиа */
.mz-skill-ic{
  width:40px;height:40px;flex:0 0 40px;border-radius:10px;
  background:var(--panel-3);display:grid;place-items:center;color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.mz-skill-ic svg{width:18px;height:18px}
.mz-card-headrow{display:flex;align-items:center;gap:var(--sp-3)}

/* ══════════ МОБИЛЬНЫЙ ХЕДЕР ══════════
   Высота 64, паддинг 16. Лого+название слева, иконки-кнопки 44 справа.
   Один на все страницы; на десктопе хедер живёт в сайдбаре. */
.mz-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:64px;padding:var(--sp-2) var(--sp-4);
  background:var(--bg);
}
.mz-topbar-brand{
  display:inline-flex;align-items:center;gap:10px;
  font:700 16px var(--font);letter-spacing:-.015em;color:var(--ink);text-decoration:none;
  min-height:var(--hit);
}
.mz-topbar-logo{width:24px;height:24px;flex:0 0 24px;object-fit:contain}
.mz-topbar-actions{display:flex;align-items:center;gap:var(--sp-1)}

/* ══════════ SKELETON ══════════ */
.skel{
  background:linear-gradient(100deg,var(--panel-2) 40%,var(--panel-3) 50%,var(--panel-2) 60%);
  background-size:200% 100%;animation:mzg-skel 1.2s linear infinite;
  border-radius:var(--r-ctl);
}
@keyframes mzg-skel{to{background-position:-200% 0}}

/* ── Скрим: текст поверх изображений/видео ВСЕГДА через подложку (M3 color-contrast) ── */
.mz-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.62));pointer-events:none}
.mz-scrim-solid{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:none}

/* ══════════ HERO ══════════ — карточка 16, высота ПО КОНТЕНТУ (UI-02), не режет текст */
.mz-hero{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--hairline);
  padding:var(--sp-6) var(--sp-6);min-height:200px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);
}
.mz-hero .t-body{max-width:560px}
@media (max-width:599px){
  /* min-height 375 — решение пользователя 2026-09-14: единая высота hero на мобиле
     для всех страниц; при более длинном контенте растёт (текст не режем, UI-02) */
  .mz-hero{padding:var(--sp-5) var(--sp-4);min-height:375px;text-align:center;align-items:center;justify-content:center}
}
.mz-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.mz-hero > :not(.mz-hero-media){position:relative;z-index:1}

/* ══════════ СЕКЦИЯ С ЛЕНТОЙ ══════════ — заголовок слева, контролы справа;
   на мобиле «Смотреть все» уезжает вниз кнопкой на всю ширину */
.mz-sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.mz-sec-ctl{display:flex;align-items:center;gap:var(--sp-2)}
.mz-arrow{
  width:var(--hit);height:var(--hit);border-radius:50%;flex:0 0 var(--hit);
  display:grid;place-items:center;color:var(--soft);
  background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--hairline);
  transition:background var(--t-fast),color var(--t-fast);
}
.mz-arrow svg{width:16px;height:16px}
.mz-arrow:hover{background:var(--panel-3);color:var(--ink)}
.mz-see-all{
  display:inline-flex;align-items:center;height:var(--hit);padding:0 18px;
  border-radius:var(--r-pill);font:500 14px var(--font);color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--hairline-2);text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.mz-see-all:hover{background:var(--fill-2);color:var(--ink)}
.mz-see-all-bottom{display:none}
@media (max-width:599px){
  .mz-sec-head .mz-see-all{display:none}
  .mz-see-all-bottom{
    display:flex;justify-content:center;align-items:center;
    width:100%;min-height:var(--hit-lg);margin-top:var(--sp-4);
  }
}
.mz-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:var(--sp-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
@media (max-width:599px){
  /* На compact лента edge-to-edge, чтобы виден был срез следующей карточки.
     scroll-padding обязателен: без него snap прижимает первую карточку к краю
     экрана (x=0) вместо левого поля страницы. */
  .mz-strip{margin:0 calc(-1 * var(--page-pad));padding:0 var(--page-pad);scroll-padding:0 var(--page-pad)}
}
.mz-strip::-webkit-scrollbar{display:none}
.mz-strip > *{scroll-snap-align:start}
@media (max-width:599px){ .mz-strip{grid-auto-columns:78%} }

/* ══════════ ТАБЫ ══════════ — 44px, активный подчёркнут */
.mz-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--hairline)}
.mz-tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--hit);padding:0 var(--sp-4);
  font:500 14px var(--font);color:var(--soft);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.mz-tab:hover{color:var(--ink)}
.mz-tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.mz-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* ══════════ SEGMENTED ══════════ (2× / 4×, Промпт / Команда) — 44px */
.mz-seg{
  display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-ctl);
  background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--hairline);
}
.mz-seg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;min-width:56px;padding:0 var(--sp-4);border-radius:8px;
  font:500 14px var(--font);color:var(--soft);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
@media (pointer:coarse){ .mz-seg-btn{min-height:var(--hit)} }
.mz-seg-btn.is-active{background:var(--ink);color:var(--ink-contrast)}
.mz-seg-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ══════════ RANGE ══════════ — трек 4, ползунок 20, зона строки 44 */
.mz-range-row{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--hit)}
.mz-range-row .field-label{flex:0 0 auto}
.mz-range-val{font:500 13px var(--mono);color:var(--dim);min-width:44px;text-align:right}
input[type=range].mz-range{
  -webkit-appearance:none;appearance:none;flex:1;height:var(--hit);background:transparent;cursor:pointer;margin:0;
}
input[type=range].mz-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--fill)}
input[type=range].mz-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);
  margin-top:-8px;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range].mz-range::-moz-range-track{height:4px;border-radius:2px;background:var(--fill)}
input[type=range].mz-range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--ink)}
input[type=range].mz-range:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-ctl)}

/* ══════════ DROPZONE ══════════ — настоящая кнопка (UI-15), компактная до выбора файла */
.mz-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  width:100%;padding:var(--sp-6) var(--sp-4);border-radius:var(--r-card);
  background:var(--panel);cursor:pointer;text-align:center;
  box-shadow:inset 0 0 0 1px var(--hairline);
  border:1px dashed var(--hairline-2);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.mz-drop:hover,.mz-drop.is-over{background:var(--panel-2);border-color:rgba(255,255,255,.28)}
.mz-drop:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mz-drop svg{width:28px;height:28px;color:var(--dim)}
.mz-drop-title{font:500 16px/22px var(--font);color:var(--ink)}
.mz-drop-hint{font:400 13px/18px var(--font);color:var(--dim)}
@media (pointer:coarse){ .mz-drop-hint .drag-only{display:none} } /* «перетащите» — только desktop */

/* ══════════ ПРОГРЕСС И СТАТУСЫ ══════════ */
.mz-progress{height:8px;border-radius:4px;background:var(--fill-2);overflow:hidden}
.mz-progress-bar{height:100%;border-radius:4px;background:var(--ink);transition:width var(--t-base) var(--ease)}
.mz-progress.is-indet .mz-progress-bar{width:40%;animation:mzg-indet 1.2s ease-in-out infinite}
@keyframes mzg-indet{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.mz-status{display:flex;align-items:center;gap:var(--sp-2);font:400 14px/20px var(--font);color:var(--soft)}
.mz-status svg{width:16px;height:16px;flex:0 0 16px}
.mz-status.is-success{color:var(--success)}
.mz-status.is-error{color:var(--danger)}

/* ══════════ ПОПАП-МЕНЮ ══════════ (язык, сортировка) — пункт 44 */
.mz-menu{
  min-width:200px;padding:6px;border-radius:var(--r-card);background:var(--panel-elev);
  box-shadow:var(--shadow-2);
}
.mz-menu-item{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:var(--hit);padding:0 var(--sp-3);border-radius:8px;
  font:500 14px var(--font);color:var(--soft);cursor:pointer;text-align:left;
  transition:background var(--t-fast),color var(--t-fast);
}
.mz-menu-item:hover{background:var(--fill-hover);color:var(--ink)}
.mz-menu-item:active{background:var(--fill-press)}
.mz-menu-item.is-active{color:var(--ink);font-weight:600}
.mz-menu-item .lc{font:600 10px var(--mono);color:var(--dim);width:22px;flex:0 0 22px;letter-spacing:.08em}
.mz-menu-item .tick{margin-left:auto;width:12px;height:12px;flex:0 0 12px}

/* ══════════ TOOLTIP ══════════ — мгновенный (≤80мс), fixed, не режется overflow'ом */
.mz-tip{
  position:fixed;z-index:300;pointer-events:none;
  background:var(--panel-2);color:var(--ink);
  padding:5px 10px;border-radius:var(--r-sm);
  font:500 12.5px var(--font);white-space:nowrap;
  box-shadow:var(--shadow-2);
  opacity:0;transition:opacity 60ms ease;
}
.mz-tip.show{opacity:1}
.mz-tip-rich{white-space:normal;max-width:280px;padding:10px 12px;border-radius:var(--r-ctl)}
.mz-tip-rich .tip-t{display:block;font:600 12.5px/16px var(--font);color:var(--ink);margin-bottom:2px}
.mz-tip-rich .tip-d{display:block;font:400 12px/17px var(--font);color:var(--soft)}

/* ══════════ СТРОКА СПИСКА ══════════ (файлы скилла, настройки) — 48 */
.mz-row{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:var(--hit-lg);padding:0 var(--sp-3);border-radius:var(--r-ctl);
  font:500 14px var(--font);color:var(--soft);cursor:pointer;text-align:left;
  text-decoration:none;transition:background var(--t-fast),color var(--t-fast);
}
.mz-row:hover{background:var(--fill-hover);color:var(--ink)}
.mz-row:active{background:var(--fill-press)}
.mz-row svg{width:16px;height:16px;flex:0 0 16px;color:var(--dim)}
.mz-row .mz-row-meta{margin-left:auto;font:500 12px var(--mono);color:var(--dim)}
.mz-rows{display:flex;flex-direction:column;gap:2px}
.mz-rows-divided .mz-row{border-radius:0;border-bottom:1px solid var(--hairline)}
.mz-rows-divided .mz-row:last-child{border-bottom:0}

/* ══════════ КОД-БЛОК ══════════ — с кнопкой копирования 44 */
.mz-code{
  position:relative;border-radius:var(--r-ctl);background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--hairline);
  padding:var(--sp-4);padding-right:56px;
  font:400 13px/20px var(--mono);color:var(--soft);
  overflow-x:auto;white-space:pre;
}
.mz-code .mz-copy{position:absolute;top:6px;right:6px}
.mz-copy{
  width:var(--hit);height:var(--hit);border-radius:var(--r-ctl);
  display:grid;place-items:center;color:var(--dim);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.mz-copy:hover{background:var(--fill-hover);color:var(--ink)}
.mz-copy svg{width:16px;height:16px}

/* ══════════ TOAST ══════════ */
.mz-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:12px 18px;border-radius:var(--r-ctl);
  background:var(--panel-elev);color:var(--ink);font:500 14px var(--font);
  box-shadow:var(--shadow-3);
}
.mz-toast svg{width:16px;height:16px;color:var(--success)}

/* ══════════ EMPTY STATE ══════════ */
.mz-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-7) var(--sp-4);text-align:center;
}
.mz-empty svg{width:32px;height:32px;color:var(--dim)}
.mz-empty-title{font:600 16px/22px var(--font);color:var(--ink)}
.mz-empty-text{font:400 14px/20px var(--font);color:var(--dim);max-width:360px}

/* ══════════ BOTTOM SHEET ══════════ — мобильный drawer (аудит: Esc, фон, фокус, scroll-lock) */
.mz-sheet-bd{
  position:fixed;inset:0;z-index:250;display:none;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mz-sheet-bd.open{display:flex;align-items:flex-end;justify-content:center}
.mz-sheet{
  width:100%;max-width:560px;max-height:82dvh;
  display:flex;flex-direction:column;
  background:var(--panel-elev);border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:var(--shadow-3);
  padding-bottom:env(safe-area-inset-bottom);
  animation:mzg-sheet-up var(--dur-m1) var(--ease-emph-in);
}
@keyframes mzg-sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.mz-sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--fill);margin:10px auto 2px}
.mz-sheet-body{overflow-y:auto;padding:var(--sp-3) var(--sp-4) var(--sp-4)}

/* ══════════ ФУТЕР ══════════ */
.mz-footer{
  border-top:1px solid var(--hairline);
  padding:var(--sp-6) var(--page-pad);
  display:flex;flex-direction:column;gap:var(--sp-5);
}
.mz-footer-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.mz-footer-links a{
  display:inline-flex;align-items:center;min-height:var(--hit);
  font:500 14px var(--font);color:var(--soft);text-decoration:none;
}
.mz-footer-links a:hover{color:var(--ink)}
.mz-footer-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font:400 13px/18px var(--font);color:var(--dim)}