/* «Шафа Каті» 2.0 · «Кімната Каті». Один файл, пласти каскаду.
   Сила пласта задаётся порядком в строке ниже: каждый следующий сильнее предыдущего.
   - reset: нули браузера, самый слабый;
   - legacy: старые экраны как были, пока их не переделали (худеет с каждой фазой);
   - tokens: только сырые значения (цвета, размеры, шрифты, время, z-index);
   - base: элементы страницы, гигиена касания, цель 44 px, отклик на нажатие;
   - components: кирпичи ui.js и layers.js, только var(--...);
   - layouts: каркас (колонка, меню, строка состояния, экраны);
   - screens: только раскладка экранов (grid, flex, gap, порядок), без цветов и размеров.
   В плане порядок записан как «reset, tokens, ..., legacy», но в CSS побеждает последний
   пласт, а смысл плана в том, что новое сильнее старого: поэтому legacy стоит вторым. */
@layer reset, legacy, tokens, base, components, layouts, screens;

/* ========================================================================== tokens */
@layer tokens {
  :root {
    /* цвета: penpot-mcp/kimnata-lib.js, объект K */
    --bg: #F7F3EE;
    --surface: #FFFDFB;
    --surface-2: #F1EAE1;
    --surface-3: #E8DDD0;
    --ink: #241F1A;
    --ink-2: #6B625A;
    --ink-3: #A0958B;          /* шевроны, заглушки, выключенное: не для информации (2,65 : 1) */
    --ph-ink: #736860;         /* текст-подсказка в полях (4,5 : 1) */
    --line: #E4DAD0;           /* обводка карточек и разделители */
    --line-2: #D5C8BA;         /* обводка кнопок и полей, ручка листа */
    --acc: #8A4A3D;
    --acc-deep: #733B30;
    --acc-soft: #F4E5DF;
    --acc-ink: #FFF8F4;
    --olive: #6F7F5B;
    --olive-soft: #E6EBDD;
    --olive-ink: #58654A;      /* оливковый текст: нарисованный #6F7F5B не держит 4,5 : 1 */
    --mus: #C9993A;
    --mus-soft: #F6ECD5;
    --mus-ink: #8A6420;
    --danger: #A33A34;
    --danger-soft: #F7E1DE;
    --oak: #C99A6B;
    --oak-deep: #A87A4E;
    --oak-light: #DDB892;
    --oak-lighter: #EAD2B5;
    --oak-ink: #7E5836;
    --inner: #5E4230;
    --inner-light: #6E5040;
    --brass: #B08A4A;
    --sky: #D3E4EB;
    --white: #FFFFFF;
    --black: #000000;
    --toast-action: #F2B9A8;   /* слово-действие в тосте (9,6 : 1 на --ink) */
    --night: #16120F;          /* просмотр во весь экран (m-viewer) */
    --night-2: #26201A;
    --night-3: #2A231D;
    --on-night: #F4EFE8;
    --on-night-2: rgb(244 239 232 / .72);
    --night-btn: rgb(255 255 255 / .14);
    --scrim: rgb(30 22 18 / .34);
    --shadow-rgb: 58 42 30;
    --ink-rgb: 36 31 26;

    /* тени, как нарисованы */
    --shadow-sheet: 0 -2px 18px rgb(var(--shadow-rgb) / .18);
    --shadow-toast: 0 4px 14px rgb(var(--shadow-rgb) / .25);
    --shadow-float: 0 4px 12px rgb(var(--shadow-rgb) / .22);
    --shadow-tag: 0 2px 6px rgb(var(--shadow-rgb) / .16);
    --shadow-strip: 0 2px 8px rgb(var(--shadow-rgb) / .10);
    --shadow-thumb: 0 1px 3px rgb(var(--shadow-rgb) / .10);
    --shadow-knob: 0 1px 2px rgb(var(--shadow-rgb) / .22);
    --shadow-dialog: 0 18px 50px rgb(var(--shadow-rgb) / .25);
    --shadow-deskbar: 0 4px 16px rgb(var(--shadow-rgb) / .12);
    --shadow-hover: 0 12px 26px rgb(var(--shadow-rgb) / .18), 0 2px 6px rgb(var(--shadow-rgb) / .08); /* motion #2: готовая тень карточки под мышью */
    --tint-press: rgb(var(--ink-rgb) / .08);

    /* шрифты: свои WOFF2 подключаются файлом public/fonts/fonts.css, пока их нет, работает запасной ряд */
    --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Palatino Linotype", Palatino, Georgia, serif;

    /* размеры текста, rem от 16 px */
    --fs-display-xl: 2.125rem;   /* 34: заголовок вкладки (44 на компьютере) */
    --fs-display-l: 1.875rem;    /* 30: «Сумки», «Валіза · Рим», «Мої образи» */
    --fs-display-m: 1.625rem;    /* 26: вопрос, название вещи и образа */
    --fs-title: 1.25rem;         /* 20/600: заголовок листа и карточки */
    --fs-section: 1.0625rem;     /* 17/600: «Я вже вдягнена», «Попереду» */
    --fs-body: 1rem;             /* 16: и все поля ввода, иначе iOS увеличивает страницу */
    --fs-body-s: .9375rem;       /* 15 */
    --fs-hint: .875rem;          /* 14/1.4 */
    --fs-caption: .8125rem;      /* 13 */
    --fs-label: .75rem;          /* 12: нижний предел (меню, значки, КАПС) */
    --lh-display: 1.1;
    --lh-body: 1.45;
    --lh-hint: 1.4;
    --ls-caps: .08em;

    /* отступы */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --gutter: 16px;              /* поле страницы: карточки с x 16 */
    --inset: 20px;               /* текст с x 20 */

    /* скругления */
    --r-badge: 12px;
    --r-photo-s: 14px;
    --r-btn: 16px;
    --r-tile: 18px;
    --r-card: 20px;
    --r-card-l: 22px;
    --r-card-xl: 24px;
    --r-hero: 28px;
    --r-sheet: 28px;
    --r-pill: 999px;

    /* размеры управления */
    --target: 44px;              /* палец: меньше не бывает нигде */
    --btn-h: 52px;
    --btn-h-compact: 44px;
    --btn-max: 340px;
    --input-max: 560px;
    --input-h: 48px;
    --chip-h: 40px;              /* нарисовано 40, коробка 44 */
    --seg-h: 42px;
    --row-h: 56px;
    --row-h-group: 52px;
    --badge-h: 24px;
    --icon: 22px;
    --icon-nav: 26px;
    --icon-stroke: 2px;
    --avatar: 44px;
    --stylist-circle: 30px;      /* ui-a-27 (06 · Меню): круг в ряду, высотой с зону иконок; было 56 */
    --stylist-raise: 0px;        /* ui-a-27: круг больше не выступает над меню (было 18) */
    --stylist-icon: 20px;        /* зеркало в круге */
    --strip-h: 38px;
    --toast-h: 54px;
    --handle-w: 40px;
    --handle-h: 5px;
    --switch-w: 50px;
    --switch-h: 30px;
    --knob: 24px;
    --sheet-top: 60px;           /* высокий лист начинается на 60 от верха */
    --col: 880px;                /* колонка старых экранов */
    --desk-max: 1280px;
    /* фаза 9: плавающая панель справа на компьютере (d2-*, d3-*): верх 130, справа 80, низ над меню */
    --desk-panel-top: 130px;
    --desk-panel-side: 80px;
    --desk-panel-bottom: 128px;
    --desk-panel-w: 528px;

    /* слои по высоте; листы, окна и просмотр живут в top layer через <dialog> */
    --z-dock: 18;
    --z-legacy-sheet: 19;
    --z-strip: 20;
    --z-header: 25;
    --z-nav: 30;
    --z-legacy-over: 70;
    --z-toast-fallback: 90;
    /* ширины: телефон до 760; 760-1099 телефонная раскладка на 3-4 колонки; компьютер с 1100 */

    /* ---------- движение: motion-lab/motion.css v0.1 (MOTION-SPEC §2) ---------- */
    --motion-scale: 1;
    --dur-press: calc(100ms * var(--motion-scale));
    --dur-hover-in: calc(180ms * var(--motion-scale));
    --dur-hover-out: calc(140ms * var(--motion-scale));
    --dur-fade-in: calc(150ms * var(--motion-scale));
    --dur-fade-out: calc(75ms * var(--motion-scale));
    --dur-state: calc(200ms * var(--motion-scale));
    --dur-tab: calc(180ms * var(--motion-scale));
    --dur-enter: calc(250ms * var(--motion-scale));
    --dur-exit: calc(200ms * var(--motion-scale));
    --dur-move: calc(300ms * var(--motion-scale));
    --dur-screen: calc(350ms * var(--motion-scale));
    --dur-sheet-in: calc(450ms * var(--motion-scale));
    --dur-sheet-out: calc(300ms * var(--motion-scale));
    --dur-sheet-grow: calc(400ms * var(--motion-scale));
    --dur-pop: calc(350ms * var(--motion-scale));
    --dur-check: calc(240ms * var(--motion-scale));
    --dur-flight: calc(600ms * var(--motion-scale));
    --dur-caption: calc(180ms * var(--motion-scale));
    --dur-shimmer: calc(1400ms * var(--motion-scale));
    --dur-progress: calc(200ms * var(--motion-scale));
    --dur-reveal: calc(300ms * var(--motion-scale));
    --dur-hover-delay: calc(40ms * var(--motion-scale)); /* сердце на плитке проявляется чуть позже подъёма */
    --dur-spring-smooth: calc(470ms * var(--motion-scale));
    --dur-spring-snappy: calc(450ms * var(--motion-scale));
    --dur-spring-bouncy: calc(730ms * var(--motion-scale));
    --stagger-step: calc(30ms * var(--motion-scale));
    --stagger-reflow: calc(18ms * var(--motion-scale));
    --stagger-cap: calc(120ms * var(--motion-scale));
    --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-exit: cubic-bezier(0.3, 0, 1, 1);
    --ease-move: cubic-bezier(0.2, 0, 0, 1);
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-fade: cubic-bezier(0.31, 0.94, 0.34, 1);
    --ease-linear: linear;
    --ease-pop: cubic-bezier(0.42, 1.67, 0.21, 0.9);
    --spring-smooth: cubic-bezier(0.2, 0, 0, 1);
    --spring-snappy: cubic-bezier(0.27, 1.06, 0.18, 1);
    --spring-bouncy: cubic-bezier(0.38, 1.21, 0.22, 1);
    --scale-press: 0.97;
    --scale-press-card: 0.98;
    --press-opacity: 0.6;
    --scale-enter: 0.96;
    --scale-exit: 0.9;
    --scale-backdrop: 0.96;
    --scale-hover-photo: 1.02;
    --lift-hover: -3px;
    --rise-enter: 12px;
    --sink-exit: 8px;
    --slide-swap: 12px;
    --slide-place: 20px;
    --slide-month: 28px;
    --sheet-offset: 100%;
    --sheet-fade-from: 1;
    --scrim-opacity: 0.34;
    --swing-amp: 6;
    --swing-amp-bag: 3;
    --swing-period: calc(600ms * var(--motion-scale));
    --swing-period-bag: calc(460ms * var(--motion-scale));
    --swing-decay: calc(280ms * var(--motion-scale));
    --swing-dur: calc(980ms * var(--motion-scale));
    --swing-nudge: 1;
    --swing-nudge-delay: calc(70ms * var(--motion-scale));
    --release-response: 0.4;
    --release-damping: 0.8;
    --fling-velocity: 0.4;
    --close-distance: 0.25;
    --grow-content-at: 0.7;
    --month-distance: 0.25;
    --month-resist: 0.4;
  }

  /* настоящие пружины там, где есть linear() (у Кати iOS 26: есть) */
  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --spring-smooth: linear(0, 0.005 1.2%, 0.019 2.5%, 0.046 4%, 0.084 5.7%, 0.162 8.5%, 0.459 18.3%, 0.551 21.8%, 0.628 25.2%, 0.694 28.5%, 0.752 32%, 0.803 35.7%, 0.846 39.5%, 0.887 44.2%, 0.919 49.2%, 0.945 54.7%, 0.964 60.8%, 0.988 75.5%, 1);
      --spring-snappy: linear(0, 0.005 1.3%, 0.023 2.8%, 0.054 4.5%, 0.098 6.3%, 0.19 9.5%, 0.51 19.5%, 0.608 23%, 0.689 26.3%, 0.755 29.5%, 0.814 32.8%, 0.862 36.2%, 0.902 39.7%, 0.937 43.8%, 0.965 48.3%, 0.984 53.2%, 0.997 58.8%, 1.006 72.3%, 1);
      --spring-bouncy: linear(0, 0.007 1.3%, 0.027 2.7%, 0.061 4.2%, 0.11 5.8%, 0.22 8.8%, 0.476 15%, 0.587 17.8%, 0.693 20.8%, 0.78 23.7%, 0.849 26.3%, 0.908 29.2%, 0.957 32.2%, 0.993 35.2%, 1.017 38%, 1.033 41%, 1.046 47.8%, 1.005 76.8%, 1);
    }
  }

  /* компьютер с мышью: тише и быстрее */
  @media (hover: hover) and (pointer: fine) {
    :root {
      --dur-sheet-in: calc(300ms * var(--motion-scale));
      --dur-sheet-out: calc(200ms * var(--motion-scale));
      --dur-screen: calc(250ms * var(--motion-scale));
    }
  }

  @media (min-width: 1100px) {
    :root { --fs-display-xl: 2.75rem; }
  }

  /* «Менше руху»: системная настройка и та же самая в приложении (:root[data-motion="reduce"]).
     Движение в пространстве становится затуханием или мгновенной сменой; мелкий отклик остаётся. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-move: 0ms;
      --dur-tab: 0ms;
      --dur-screen: var(--dur-fade-in);
      --dur-sheet-in: calc(200ms * var(--motion-scale));
      --dur-sheet-out: calc(150ms * var(--motion-scale));
      --dur-sheet-grow: calc(200ms * var(--motion-scale));
      --dur-flight: 0ms;
      --dur-shimmer: calc(2000ms * var(--motion-scale));
      --dur-spring-smooth: var(--dur-fade-in);
      --dur-spring-snappy: var(--dur-fade-in);
      --dur-spring-bouncy: var(--dur-fade-in);
      --stagger-step: 0ms; --stagger-reflow: 0ms; --stagger-cap: 0ms;
      --ease-pop: var(--ease-fade);
      --spring-smooth: var(--ease-fade);
      --spring-snappy: var(--ease-fade);
      --spring-bouncy: var(--ease-fade);
      --scale-press: 1; --scale-press-card: 1;
      --scale-enter: 1; --scale-exit: 1; --scale-backdrop: 1; --scale-hover-photo: 1;
      --lift-hover: 0px; --rise-enter: 0px; --sink-exit: 0px;
      --slide-swap: 0px; --slide-place: 0px; --slide-month: 0px;
      --sheet-offset: 0%; --sheet-fade-from: 0;
      --swing-amp: 0; --swing-amp-bag: 0; --swing-nudge: 0;
      --release-damping: 1;
    }
  }
  :root[data-motion="reduce"] {
    --dur-move: 0ms;
    --dur-tab: 0ms;
    --dur-screen: var(--dur-fade-in);
    --dur-sheet-in: calc(200ms * var(--motion-scale));
    --dur-sheet-out: calc(150ms * var(--motion-scale));
    --dur-sheet-grow: calc(200ms * var(--motion-scale));
    --dur-flight: 0ms;
    --dur-shimmer: calc(2000ms * var(--motion-scale));
    --dur-spring-smooth: var(--dur-fade-in);
    --dur-spring-snappy: var(--dur-fade-in);
    --dur-spring-bouncy: var(--dur-fade-in);
    --stagger-step: 0ms; --stagger-reflow: 0ms; --stagger-cap: 0ms;
    --ease-pop: var(--ease-fade);
    --spring-smooth: var(--ease-fade);
    --spring-snappy: var(--ease-fade);
    --spring-bouncy: var(--ease-fade);
    --scale-press: 1; --scale-press-card: 1;
    --scale-enter: 1; --scale-exit: 1; --scale-backdrop: 1; --scale-hover-photo: 1;
    --lift-hover: 0px; --rise-enter: 0px; --sink-exit: 0px;
    --slide-swap: 0px; --slide-place: 0px; --slide-month: 0px;
    --sheet-offset: 0%; --sheet-fade-from: 0;
    --swing-amp: 0; --swing-amp-bag: 0; --swing-nudge: 0;
    --release-damping: 1;
  }

  /* motion: действия с клавиатуры не анимируются (MOTION-SPEC §5, шаг 9). data-kbd ставит motion.js
     по клавише действия (Enter, пробел, Esc, Tab, стрелки) и снимает при первом касании или щелчке.
     Остаются нажатие, наведение, ход загрузки и шиммер ожидания. */
  :root[data-kbd] {
    --dur-fade-in: 0ms; --dur-fade-out: 0ms; --dur-state: 0ms; --dur-tab: 0ms;
    --dur-enter: 0ms; --dur-exit: 0ms; --dur-move: 0ms; --dur-screen: 0ms;
    --dur-sheet-in: 0ms; --dur-sheet-out: 0ms; --dur-sheet-grow: 0ms;
    --dur-pop: 0ms; --dur-check: 0ms; --dur-flight: 0ms; --dur-caption: 0ms; --dur-reveal: 0ms;
    --dur-spring-smooth: 0ms; --dur-spring-snappy: 0ms; --dur-spring-bouncy: 0ms;
    --stagger-step: 0ms; --stagger-reflow: 0ms; --stagger-cap: 0ms;
  }
}

/* ========================================================================== reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  dialog { max-width: none; max-height: none; padding: 0; border: 0; margin: 0; color: inherit; background: none; }
  [popover] { margin: 0; padding: 0; border: 0; color: inherit; background: none; overflow: visible; }
  /* hidden сильнее любого display: у !important в пластах побеждает самый ранний */
  [hidden] { display: none !important; }
}

/* ========================================================================== base */
@layer base {
  html {
    background: var(--bg);
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
  }
  img { -webkit-user-drag: none; }
  :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  /* Цель касания 44 px задаётся здесь один раз: экраны её не уменьшают. */
  button,
  [role="button"],
  a[href],
  summary,
  select,
  textarea,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]) {
    min-height: var(--target);
  }
  button,
  [role="button"] { min-width: var(--target); }

  /* Гигиена касания: без серой вспышки, без меню картинки, без выделения текста, без задержки двойного тапа. */
  :is(button, [role="button"], a[href], summary, [data-press]) {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  :is(button, [role="button"], [data-press], .k-tile, .card) img { -webkit-touch-callout: none; }

  /* Нажатие (MOTION-SPEC #1): класс .is-pressed ставит motion.js по pointer-событиям, не :active.
     Отдельное свойство scale складывается с любым transform. Компоненты добавляют свои переходы через --tr-x. */
  :is(button, [role="button"], a[href], summary, [data-press]) {
    transition: var(--tr-press, scale var(--dur-spring-snappy) var(--spring-snappy)), var(--tr-x, opacity 0s);
  }
  .is-pressed {
    scale: var(--scale-press);
    --tr-press: scale var(--dur-press) var(--ease-enter);
  }
  .is-pressed:is([data-press="card"], .card, .list-item, .banner, .today-look, .import-card, .pick, .costume, .bubble .collage-cell) {
    scale: var(--scale-press-card);
  }
  .is-pressed[data-press="dim"] { scale: 1; }
  /* иконки темнеют на 8% всегда; при «Менше руху» так откликается всё, что нажимается */
  .is-pressed:is(.mark, .icon-btn, .vote-btn, .composer-btn, .quick-bar, .lightbox-close, .lightbox-arrow):not([data-press]) {
    background-image: linear-gradient(var(--tint-press), var(--tint-press));
  }
  :root[data-motion="reduce"] .is-pressed:not([data-press]) {
    background-image: linear-gradient(var(--tint-press), var(--tint-press));
  }
  @media (prefers-reduced-motion: reduce) {
    .is-pressed:not([data-press]) { background-image: linear-gradient(var(--tint-press), var(--tint-press)); }
  }
}

/* ========================================================================== components */
@layer components {
  /* ---------- иконки (icons.js): 48-единичная сетка, штрих в пикселях при любом размере ---------- */
  .k-icon {
    display: block;
    flex: none;
    width: var(--icon);
    height: var(--icon);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }
  .k-icon * { vector-effect: non-scaling-stroke; }

  .k-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- общее для нажимаемых компонентов: тонировка под пальцем через ::after ---------- */
  :where([data-press]) { position: relative; }
  :where([data-press])::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-press) var(--ease-fade);
  }
  [data-press="tint"].is-pressed::after,
  .k-ibtn.is-pressed::after,
  .k-heart.is-pressed > span::after { opacity: .08; }
  :root[data-motion="reduce"] [data-press]:not([data-press="dim"]).is-pressed::after { opacity: .08; }
  @media (prefers-reduced-motion: reduce) {
    [data-press]:not([data-press="dim"]).is-pressed::after { opacity: .08; }
  }
  [data-press="dim"]::after { content: none; }

  /* ---------- 1. шапка вкладки ---------- */
  .k-thead {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 9px var(--sp-1) var(--sp-3);
  }
  .k-thead__text { flex: 1 1 auto; min-width: 0; }
  .k-thead__title {
    margin: 0;
    font: 600 var(--fs-display-xl)/var(--lh-display) var(--font-display);
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .k-thead__sub {
    margin: var(--sp-1) 0 0 1px;
    font: 500 var(--fs-hint)/1.3 var(--font-ui);
    color: var(--ink-2);
  }
  .k-thead__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: 2px;
  }
  .k-thead__actions > .k-avatar { margin-left: var(--sp-1); }

  /* ---------- 2. шапка вложенного экрана ---------- */
  .k-phead {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: calc(env(safe-area-inset-top) + 7px) 12px 7px 10px;
    background: var(--bg);
  }
  .k-phead__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 2px;
    font: 600 var(--fs-section)/1.25 var(--font-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .k-phead__actions { flex: none; display: flex; align-items: center; }

  /* ---------- круглая кнопка-иконка 44 и аватар ---------- */
  .k-ibtn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--target);
    height: var(--target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
  }
  .k-ibtn--bare { background: none; box-shadow: none; }
  .k-ibtn--soft { color: var(--ink-2); }
  .k-ibtn[aria-pressed="true"] { color: var(--acc); }
  .k-ibtn[aria-pressed="true"] .k-icon { fill: currentColor; }
  .k-ibtn:disabled { opacity: .45; cursor: default; }

  .k-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--avatar);
    height: var(--avatar);
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--oak-lighter);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--acc-deep);
    font: 700 1.375rem/1 var(--font-display);
  }
  .k-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .k-avatar--l { width: 56px; height: 56px; font-size: 1.625rem; }

  /* ---------- 3. нижнее меню ---------- */
  .k-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    padding: 0 env(safe-area-inset-right) max(calc(env(safe-area-inset-bottom) - 6px), 6px) env(safe-area-inset-left);
    background: var(--surface);
    border-top: 1px solid var(--line);
    -webkit-user-select: none;
    user-select: none;
  }
  .k-nav__i {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 55px;
    padding: 9px 0 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    font: 500 var(--fs-label)/1.25 var(--font-ui);
  }
  .k-nav__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: opacity var(--dur-state) var(--ease-fade);
  }
  .k-nav__i.is-pressed .k-nav__face { opacity: var(--press-opacity); transition-duration: var(--dur-press); }
  .k-nav__ic { display: grid; }
  .k-nav__ic > .k-icon { grid-area: 1 / 1; width: var(--icon-nav); height: var(--icon-nav); --icon-stroke: 2.1px; }
  .k-nav__ic > .k-nav__on { --icon-stroke: 2.6px; color: var(--acc); }
  .k-nav__l { display: grid; white-space: nowrap; }
  .k-nav__l > span { grid-area: 1 / 1; text-align: center; }
  .k-nav__l > .k-nav__on { color: var(--acc); font-weight: 700; }
  .k-nav .k-nav__on { opacity: 0; transition: opacity var(--dur-tab) var(--ease-fade); }
  .k-nav__off { transition: opacity var(--dur-tab) var(--ease-fade); }
  .k-nav__i[aria-current="page"] .k-nav__on { opacity: 1; }
  .k-nav__i[aria-current="page"] .k-nav__off { opacity: 0; }
  /* ui-a-27 (06 · Меню): круг 30 на месте иконки 26, центр на той же линии (по 2 px выше и ниже зоны иконок),
     подпись на одной линии с остальными; без тени, он больше не парит над меню */
  .k-nav__sty {
    display: grid;
    place-items: center;
    width: var(--stylist-circle);
    height: var(--stylist-circle);
    margin: calc((var(--icon-nav) - var(--stylist-circle)) / 2) 0;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
  }
  .k-nav__sty > .k-icon { width: var(--stylist-icon); height: var(--stylist-icon); --icon-stroke: 2.2px; }
  .k-nav__i--sty .k-nav__ic { display: none; }

  /* ---------- 4. кнопка ---------- */
  .k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    max-width: var(--btn-max);
    min-height: var(--btn-h);
    padding: 0 var(--sp-5);
    border: 0;
    border-radius: var(--r-btn);
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font: 600 var(--fs-body)/1.2 var(--font-ui);
    text-align: center;
    --tr-x: background-color var(--dur-state) var(--ease-fade), color var(--dur-state) var(--ease-fade);
  }
  .k-btn > .k-icon { width: 20px; height: 20px; }
  .k-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-btn--block { display: flex; width: 100%; margin-inline: auto; }
  .k-btn--compact { min-height: var(--btn-h-compact); padding: 0 var(--sp-4); font-size: var(--fs-body-s); border-radius: 14px; }
  .k-btn--primary { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
  .k-btn--soft { background: var(--acc-soft); color: var(--acc-deep); box-shadow: none; }
  .k-btn--ghost { background: none; color: var(--acc); box-shadow: none; }
  .k-btn--danger { color: var(--danger); }
  .k-btn--danger-solid { background: var(--danger); color: var(--acc-ink); box-shadow: none; }
  .k-btn--dark { background: var(--ink); color: var(--bg); box-shadow: none; }
  .k-btn:disabled { opacity: .5; cursor: default; }

  /* ---------- 5. фишка: нарисовано 40, коробка 44 (прозрачная рамка) ---------- */
  .k-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    height: var(--target);
    padding: 0 var(--sp-4);
    border: 2px solid transparent;
    border-inline-width: 0;
    border-radius: 22px;
    background: var(--surface);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    font: 500 var(--fs-hint)/1 var(--font-ui);
    white-space: nowrap;
    --tr-x: background-color var(--dur-state) var(--ease-fade), color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .k-chip[aria-pressed="true"],
  .k-chip[aria-selected="true"],
  .k-chip.is-on { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); }
  .k-chip > .k-icon { width: 18px; height: 18px; margin-left: -3px; color: var(--ink-2); }
  .k-chip[aria-pressed="true"] > .k-icon, .k-chip.is-on > .k-icon { color: var(--bg); }
  .k-chip__dot {
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--dot, var(--surface-3));
    box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .k-chip:disabled { opacity: .5; cursor: default; }

  .k-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  /* ряд, что листается вбок: мягкий край только там, где правда что-то спрятано (MOTION-SPEC §4) */
  .k-hscroll {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline-end: var(--target);
    -webkit-mask-image: linear-gradient(to right, transparent, var(--black) var(--fade-l, 0px), var(--black) calc(100% - var(--fade-r, 0px)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--black) var(--fade-l, 0px), var(--black) calc(100% - var(--fade-r, 0px)), transparent);
  }
  .k-hscroll::-webkit-scrollbar { display: none; }
  .k-hscroll > * { scroll-snap-align: start; }
  .k-hscroll.more-left { --fade-l: 28px; }
  .k-hscroll.more-right { --fade-r: 36px; }

  /* ---------- 6. переключатель из частей ---------- */
  .k-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    height: var(--seg-h);
    padding: 0 3px;
    border-radius: 21px;
    background: var(--surface-2);
  }
  .k-seg__i {
    height: var(--target);
    margin-block: -1px;
    min-width: 0;
    padding: 0 var(--sp-3);
    border: 4px solid transparent;
    border-inline-width: 0;
    border-radius: 22px;
    background: none;
    background-clip: padding-box;
    color: var(--ink-2);
    font: 500 var(--fs-hint)/1 var(--font-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    --tr-x: background-color var(--dur-state) var(--ease-fade), color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .k-seg__i[aria-checked="true"],
  .k-seg__i[aria-selected="true"] {
    background-color: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-thumb);
  }

  /* ---------- 7. строка списка и группа ---------- */
  .k-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: var(--row-h);
    padding: var(--sp-2) 0;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    font: 500 var(--fs-body)/1.3 var(--font-ui);
  }
  .k-row + .k-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--row-line-from, 0px);
    right: 0;
    height: 1px;
    background: var(--line);
  }
  .k-row--lead { --row-line-from: 36px; }
  .k-row > .k-icon { color: var(--ink-2); }
  .k-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .k-row__label { font: 500 var(--fs-body)/1.3 var(--font-ui); }
  .k-row__sub { font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .k-row__value { flex: none; max-width: 45%; font: 400 var(--fs-body-s)/1.3 var(--font-ui); color: var(--ink-2); text-align: right; }
  .k-row__chev { width: 16px; height: 16px; color: var(--ink-3); }
  .k-row__thumb { flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: var(--r-photo-s); background: var(--surface-2); }
  .k-row__thumb > img { width: 100%; height: 100%; object-fit: cover; }
  .k-row--danger, .k-row--danger > .k-icon { color: var(--danger); }
  .k-row:disabled { opacity: .5; cursor: default; }
  .k-group {
    padding: 0 var(--sp-4);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .k-group > .k-row { min-height: var(--row-h-group); }
  .k-caps {
    margin: var(--sp-6) var(--sp-1) var(--sp-2);
    font: 700 var(--fs-label)/1.3 var(--font-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ---------- 8. переключатель вкл/выкл на настоящем checkbox role=switch ---------- */
  .k-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: var(--switch-w);
    height: var(--target);
    margin: 0;
    border: 7px solid transparent;
    border-inline-width: 0;
    border-radius: 22px;
    background: var(--surface-3);
    background-clip: padding-box;
    cursor: pointer;
    transition: background-color var(--dur-state) var(--ease-fade);
  }
  .k-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: var(--knob);
    height: var(--knob);
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-knob);
    transition: translate var(--dur-state) var(--ease-enter);
  }
  .k-switch:checked { background-color: var(--acc); }
  .k-switch:checked::before { translate: 20px 0; }
  .k-switch:disabled { opacity: .6; cursor: default; }
  .k-switch:focus-visible { outline: 2px solid var(--acc); outline-offset: -3px; }
  label.k-row { cursor: pointer; }

  /* ---------- 9. поле ввода ---------- */
  .k-field {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--input-max);
    min-height: var(--input-h);
    margin-inline: auto;
    padding: 0 2px 0 var(--sp-4);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
  }
  .k-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .k-field > .k-icon { width: 20px; height: 20px; margin-right: var(--sp-2); color: var(--ink-2); }
  .k-field__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--input-h);
    padding: 0 var(--sp-2) 0 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--ink);
    font: 400 var(--fs-body)/1.3 var(--font-ui);
  }
  .k-field__input::placeholder { color: var(--ph-ink); }
  .k-field__input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .k-field > .k-ibtn { color: var(--ink-2); }
  .k-field__act {
    flex: none;
    min-height: var(--target);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--acc-deep);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
  }
  .k-area {
    position: relative;
    width: 100%;
    max-width: var(--input-max);
    margin-inline: auto;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .k-area:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .k-area__input {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 14px 16px 14px;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: none;
    color: var(--ink);
    font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
  }
  .k-area__input::placeholder { color: var(--ph-ink); }
  .k-area--mic .k-area__input { padding-bottom: 50px; }
  .k-area > .k-ibtn { position: absolute; right: 4px; bottom: 4px; color: var(--ink-2); }

  /* ---------- 10. значок ---------- */
  .k-badge {
    display: inline-flex;
    align-items: center;
    height: var(--badge-h);
    padding: 0 9px;
    border-radius: var(--r-badge);
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-label)/1 var(--font-ui);
    white-space: nowrap;
  }
  .k-badge--olive { background: var(--olive-soft); color: var(--olive-ink); }
  .k-badge--mus { background: var(--mus-soft); color: var(--mus-ink); }
  .k-badge--ink { background: var(--ink); color: var(--bg); }
  .k-badge--white { background: var(--surface); color: var(--ink); }
  .k-badge--danger { background: var(--danger-soft); color: var(--danger); }

  /* ---------- 11. карточка и главная карточка ---------- */
  .k-card {
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: var(--sp-4);
  }
  .k-card--l { border-radius: var(--r-card-l); }
  .k-card--soft { background: var(--surface-2); box-shadow: none; }
  button.k-card { display: block; width: 100%; border: 0; text-align: left; color: inherit; font: inherit; }
  .k-hero {
    overflow: hidden;
    border-radius: var(--r-hero);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .k-hero__ill { position: relative; background: var(--surface-2); }
  .k-hero__body { padding: var(--sp-5); }

  .k-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-6) var(--sp-1) var(--sp-3);
    font: 600 var(--fs-section)/1.25 var(--font-ui);
  }
  .k-section__t { margin: 0; font: inherit; }
  .k-section__more {
    min-height: var(--target);
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--acc);
    font: 500 var(--fs-hint)/1 var(--font-ui);
  }
  .k-hint { margin: 0; font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui); color: var(--ink-2); }
  .k-display-l { margin: 0; font: 600 var(--fs-display-l)/var(--lh-display) var(--font-display); }
  .k-display-m { margin: 0; font: 600 var(--fs-display-m)/var(--lh-display) var(--font-display); }
  .k-title { margin: 0; font: 600 var(--fs-title)/1.3 var(--font-ui); }

  /* ---------- 12. плитка вещи: вещь целиком, contain ---------- */
  .k-tile { position: relative; min-width: 0; }
  .k-tile__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--r-tile);
    background: none;
    color: var(--ink);
    text-align: left;
  }
  .k-tile__ph {
    position: relative;
    display: block;
    aspect-ratio: 7 / 8;
    border-radius: var(--r-tile);
    background: var(--surface-2);
    overflow: hidden;
  }
  .k-tile__ph > img {
    position: absolute;
    left: 9%;
    top: 8%;
    width: 82%;
    height: 84%;
    object-fit: contain;
    -webkit-user-drag: none;
  }
  .k-tile--photo .k-tile__ph > img { left: 0; top: 0; width: 100%; height: 100%; }
  .k-tile__badge { position: absolute; left: var(--sp-2); top: var(--sp-2); }
  .k-tile__t {
    display: -webkit-box;
    margin: var(--sp-2) 2px 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font: 500 var(--fs-hint)/1.3 var(--font-ui);
  }
  .k-tile__s { display: block; margin: 2px 2px 0; font: 500 var(--fs-label)/1.3 var(--font-ui); color: var(--ink-2); }
  .k-tile--dim .k-tile__ph > img { opacity: .5; }
  .k-tile--sm .k-tile__ph { border-radius: var(--r-photo-s); }
  .k-heart {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: var(--target);
    height: var(--target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink-2);
  }
  .k-heart > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
  }
  .k-heart > span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0;
    transition: opacity var(--dur-press) var(--ease-fade);
  }
  .k-heart::after { content: none; }
  .k-heart .k-icon { width: 20px; height: 20px; transition: fill var(--dur-state) var(--ease-fade), color var(--dur-state) var(--ease-fade); }
  .k-heart[aria-pressed="true"] { color: var(--acc); }
  .k-heart[aria-pressed="true"] .k-icon { fill: var(--acc); }
  .k-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }

  /* motion #2: наведение на компьютере. Карточка поднимается на --lift-hover, готовая тень под рамкой
     проступает прозрачностью (не box-shadow), фото 1.02 в своей рамке, сердце проявляется чуть позже.
     То же на :focus-visible. На телефоне сердце видно всегда. «Менше руху»: без подъёма и масштаба. */
  .k-tile__open { display: grid; grid-template-columns: minmax(0, 1fr); --tr-x: translate var(--dur-hover-out) var(--ease-enter); }
  .k-tile__open > .k-tile__ph { grid-area: 1 / 1; }
  .k-tile__open::before {
    content: "";
    grid-area: 1 / 1;
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-hover);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-hover-out) var(--ease-fade);
  }
  .k-tile--sm .k-tile__open::before { border-radius: var(--r-photo-s); }
  .k-tile__ph > img { transition: scale var(--dur-hover-out) var(--ease-enter); }
  @media (hover: hover) and (pointer: fine) {
    .k-heart > span { opacity: 0; scale: .8; transition: opacity var(--dur-fade-in) var(--ease-fade), scale var(--dur-fade-in) var(--ease-enter); }
    .k-heart[aria-pressed="true"] > span,
    .k-tile:hover .k-heart > span,
    .k-tile:focus-within .k-heart > span { opacity: 1; scale: 1; }
    .k-tile:hover .k-heart > span,
    .k-tile:focus-within .k-heart > span { transition-delay: var(--dur-hover-delay); }
    .k-tile:hover > .k-tile__open,
    .k-tile__open:focus-visible { translate: 0 var(--lift-hover); --tr-x: translate var(--dur-hover-in) var(--ease-enter); }
    .k-tile:hover > .k-tile__open::before,
    .k-tile__open:focus-visible::before { opacity: 1; transition-duration: var(--dur-hover-in); }
    .k-tile:hover .k-tile__ph > img,
    .k-tile__open:focus-visible .k-tile__ph > img { scale: var(--scale-hover-photo); transition-duration: var(--dur-hover-in); }
    /* остальное нажимаемое чуть темнеет под мышью тем же слоем, что и под пальцем */
    :is([data-press=""], [data-press="tint"]):hover::after { opacity: .04; }
    .k-nav__i:not([aria-current="page"]):hover { background: var(--surface-2); }
  }

  /* ---------- 13. коллаж образа: 2, 3 или 4 вещи на мягкой подложке ---------- */
  .k-collage {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 6px;
    aspect-ratio: var(--collage-ratio, 1);
    border-radius: var(--r-card-l);
    background: var(--surface-2);
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  .k-collage[data-n="1"] { grid-template-columns: 1fr; }
  .k-collage[data-n="3"] { grid-template-columns: 55fr 45fr; grid-template-rows: 1fr 1fr; }
  .k-collage[data-n="3"] > :first-child { grid-row: 1 / 3; }
  .k-collage[data-n="4"] { grid-template-rows: 1fr 1fr; }
  .k-collage__cell { position: relative; min-width: 0; min-height: 0; border-radius: 16px; overflow: hidden; }
  .k-collage__cell > img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; }
  .k-collage__badge { position: absolute; left: 12px; bottom: 12px; }

  /* ---------- 16. полоса хода: двигается scaleX у ребёнка, не width ---------- */
  .k-progress {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
  }
  .k-progress__fill {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: var(--acc);
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
    transition: transform var(--dur-progress) linear;
  }

  /* ---------- 17. плитка варианта и шкала 1-5 ---------- */
  .k-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--btn-h);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-btn);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    font: 500 var(--fs-body-s)/1.25 var(--font-ui);
    --tr-x: background-color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .k-option .k-chip__dot { margin: 0; }
  .k-option > .k-icon { display: none; width: 18px; height: 18px; color: var(--acc); }
  .k-option[aria-pressed="true"], .k-option[aria-checked="true"] { background: var(--acc-soft); box-shadow: inset 0 0 0 1.5px var(--acc); }
  .k-option[aria-pressed="true"] > .k-icon, .k-option[aria-checked="true"] > .k-icon { display: block; }
  .k-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .k-rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .k-rating__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    --tr-x: background-color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .k-rating__n { font: 600 var(--fs-section)/1 var(--font-ui); }
  .k-rating__l { font: 500 var(--fs-label)/1.2 var(--font-ui); color: var(--ink-2); text-align: center; }
  .k-rating__i[aria-checked="true"] { background: var(--acc-soft); box-shadow: inset 0 0 0 1.5px var(--acc); }

  /* ---------- 18. плитка поля (m-review) ---------- */
  .k-fieldtile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    text-align: left;
  }
  .k-fieldtile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .k-fieldtile__l { font: 500 var(--fs-label)/1.2 var(--font-ui); color: var(--ink-2); }
  .k-fieldtile__v { font: 600 var(--fs-body)/1.25 var(--font-ui); }
  .k-fieldtile > .k-icon { width: 18px; height: 18px; color: var(--ink-3); }

  /* ---------- лист снизу: <dialog> в top layer ---------- */
  .k-sheet {
    position: fixed;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - var(--sheet-top));
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    background: var(--surface);
    box-shadow: var(--shadow-sheet);
    color: var(--ink);
    overscroll-behavior: contain;
    translate: 0 0;
    opacity: 1;
    transition: translate var(--dur-sheet-in) var(--ease-sheet), opacity var(--dur-sheet-in) var(--ease-fade);
  }
  .k-sheet:not([open]) { display: none; }
  .k-sheet--full { height: calc(100dvh - var(--sheet-top)); }
  .k-sheet::backdrop { background: var(--scrim); opacity: 1; transition: opacity var(--dur-sheet-in) var(--ease-fade); }
  @starting-style {
    .k-sheet[open] { translate: 0 var(--sheet-offset); opacity: var(--sheet-fade-from); }
    .k-sheet[open]::backdrop { opacity: 0; }
  }
  .k-sheet__grab { flex: none; padding-top: 8px; touch-action: none; }
  /* motion #5: лист тянут за ручку и шапку; поднятый выше края лист не открывает щель снизу */
  .k-sheet__head { touch-action: none; }
  .k-sheet.is-dragging { box-shadow: var(--shadow-sheet), 0 120px 0 0 var(--surface); }
  /* motion #4: рост из полки (sheet-grow.js): пустая форма растёт, лист прозрачен, пока она не встанет */
  .k-sheet.k-sheet--grow { transition: none; }
  @starting-style {
    .k-sheet.k-sheet--grow[open] { translate: 0 0; opacity: 1; }
  }
  .k-sheet.k-sheet--growing { overflow: visible; background: transparent; box-shadow: none; }
  .k-sheet--growing > :not(.k-sheet__shape, .k-toast) { position: relative; z-index: 1; }
  .k-sheet__shape {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: 0 0;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    background: var(--surface);
    box-shadow: var(--shadow-sheet);
    pointer-events: none;
  }
  .k-sheet.k-sheet--gone,
  .k-sheet.k-sheet--gone::backdrop { opacity: 0 !important; }
  .k-sheet__handle { width: var(--handle-w); height: var(--handle-h); margin: 0 auto; border-radius: 3px; background: var(--line-2); }
  .k-sheet__head { flex: none; display: flex; align-items: flex-start; gap: var(--sp-3); padding: 5px var(--sp-5) var(--sp-2); }
  .k-sheet__heading { flex: 1 1 auto; min-width: 0; padding-top: 12px; }
  .k-sheet__title { margin: 0; font: 600 var(--fs-title)/1.3 var(--font-ui); }
  .k-sheet__title--display { font: 600 var(--fs-display-l)/var(--lh-display) var(--font-display); }
  .k-sheet__count { margin-left: var(--sp-2); font: 500 var(--fs-body-s)/1 var(--font-ui); color: var(--ink-2); }
  .k-sheet__sub { margin: 6px 0 0; font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui); color: var(--ink-2); }
  .k-sheet__head > .k-ibtn { margin-top: var(--sp-1); color: var(--ink-2); }
  .k-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-1) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  }
  .k-sheet__foot + .k-sheet__body, .k-sheet:has(.k-sheet__foot) .k-sheet__body { padding-bottom: var(--sp-4); }
  .k-sheet__foot {
    flex: none;
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--surface);
  }
  .k-sheet__foot > .k-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-3); }
  .k-sheet:focus, .k-dialog:focus, .k-lightbox:focus { outline: none; }

  /* ---------- маленькое окно: только необратимое ---------- */
  .k-dialog {
    position: fixed;
    inset: 0;
    width: min(calc(100% - 32px), 360px);
    height: fit-content;
    margin: auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-radius: var(--r-card-l);
    background: var(--surface);
    box-shadow: var(--shadow-dialog);
    color: var(--ink);
    opacity: 1;
    scale: 1;
    transition: opacity var(--dur-enter) var(--ease-fade), scale var(--dur-enter) var(--ease-enter);
  }
  .k-dialog:not([open]) { display: none; }
  .k-dialog::backdrop { background: var(--scrim); opacity: 1; transition: opacity var(--dur-enter) var(--ease-fade); }
  @starting-style {
    .k-dialog[open] { opacity: 0; scale: var(--scale-enter); }
    .k-dialog[open]::backdrop { opacity: 0; }
  }
  .k-dialog__title { margin: 0; font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .k-dialog__text { margin: var(--sp-2) 0 0; font: 400 var(--fs-body-s)/var(--lh-body) var(--font-ui); color: var(--ink-2); white-space: pre-line; }
  .k-dialog__body { margin-top: var(--sp-3); }
  .k-dialog__body .k-field, .k-dialog__body .k-area { max-width: none; }
  .k-dialog__actions { display: flex; gap: var(--sp-2); margin-top: 18px; }
  .k-dialog__actions > .k-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-3); }

  /* ---------- тост с отменой ---------- */
  .k-toast {
    position: fixed;
    inset: auto var(--gutter) calc(var(--nav-clear) + var(--strip-space)) var(--gutter);
    z-index: var(--z-toast-fallback);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: auto;
    max-width: 420px;
    height: auto;
    min-height: var(--toast-h);
    margin: 0 auto;
    padding: 5px 5px 5px 18px;
    border-radius: var(--r-btn);
    background: var(--ink);
    color: var(--bg);
    box-shadow: var(--shadow-toast);
    font: 500 var(--fs-body-s)/1.3 var(--font-ui);
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-enter) var(--ease-enter), translate var(--dur-enter) var(--ease-enter);
    touch-action: none; /* motion #13: тост смахивают пальцем, страница под ним не едет */
  }
  .k-toast[popover]:not(:popover-open) { display: none; }
  @starting-style { .k-toast { opacity: 0; translate: 0 var(--rise-enter); } }
  .k-toast__m { flex: 1 1 auto; min-width: 0; padding: 8px 0; }
  .k-toast__a {
    flex: none;
    min-height: var(--target);
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--toast-action);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
  }
  .k-toast--plain { padding-right: 18px; }
  dialog .k-toast { position: absolute; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }

  /* ---------- строка состояния над меню: нарисовано 38, коробка 44 ---------- */
  .k-strip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: var(--nav-clear);
    z-index: var(--z-strip);
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 560px;
    min-height: var(--target);
    margin: 0 auto;
    padding: 0 4px 0 12px;
    color: var(--ink);
    font: 500 var(--fs-hint)/1.25 var(--font-ui);
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-enter) var(--ease-enter), translate var(--dur-enter) var(--ease-enter);
  }
  .k-strip::before {
    content: "";
    position: absolute;
    inset: 3px 0;
    z-index: -1;
    border-radius: 19px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-strip);
  }
  @starting-style { .k-strip { opacity: 0; translate: 0 var(--rise-enter); } }
  .k-strip__ic { display: grid; flex: none; color: var(--acc); }
  .k-strip__ic > .k-icon { width: 20px; height: 20px; }
  .k-strip--danger .k-strip__ic { color: var(--danger); }
  .k-strip__t { flex: 1 1 auto; min-width: 0; padding-block: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .k-strip .k-progress { flex: none; width: 120px; margin-right: 10px; }
  .k-strip__a {
    flex: none;
    min-height: var(--target);
    padding: 0 12px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--acc);
    font: 600 var(--fs-hint)/1 var(--font-ui);
  }

  /* ---------- просмотр во весь экран: тёмный <dialog> ---------- */
  .k-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: env(safe-area-inset-top) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
    background: var(--night);
    color: var(--on-night);
    opacity: 1;
    transition: opacity var(--dur-fade-in) var(--ease-fade);
  }
  .k-lightbox:not([open]) { display: none; }
  .k-lightbox::backdrop { background: var(--night); }
  @starting-style { .k-lightbox[open] { opacity: 0; } }
  .k-lightbox__top { flex: none; display: flex; justify-content: flex-end; padding: var(--sp-2) 0; }
  .k-lightbox__btn {
    display: grid;
    place-items: center;
    width: var(--target);
    height: var(--target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--night-btn);
    color: var(--on-night);
  }
  .k-lightbox__btn::after { background: var(--white); }
  .k-lightbox__btn.is-pressed::after { opacity: .12; }
  .k-lightbox__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--r-card-l);
    background: var(--night-2);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .k-lightbox__stage > img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .k-lightbox__prev, .k-lightbox__next { position: absolute; top: 50%; margin-top: -22px; z-index: 1; }
  .k-lightbox__prev { left: -8px; }
  .k-lightbox__next { right: -8px; }
  .k-lightbox__caption { flex: none; padding: var(--sp-5) var(--sp-1) 0; }
  .k-lightbox__title { margin: 0; font: 600 var(--fs-display-l)/var(--lh-display) var(--font-display); }
  .k-lightbox__sub { margin: 6px 0 0; font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--on-night-2); }
  .k-lightbox__actions { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-5); }
  .k-lightbox__act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 70px;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--night-3);
    color: var(--on-night);
    font: 500 var(--fs-hint)/1.2 var(--font-ui);
  }
  .k-lightbox__act::after { background: var(--white); }
  .k-lightbox__act--danger { color: var(--toast-action); }
}

/* ========================================================================== layouts */
@layer layouts {
  :root {
    --nav-h: 84px;               /* меряет app.js: от верха меню до низа окна */
    --nav-clear: calc(var(--nav-h) + var(--stylist-raise) + 8px);
    --strip-space: 0px;
    --dock-h: 0px;               /* поле переписки над меню (старый «Стиліст») */
  }
  html[data-strip] { --strip-space: 52px; }
  html { scroll-padding-bottom: var(--nav-clear); }
  /* пока открыт лист, окно или старая панель, страница под ними не едет */
  html[data-lock],
  html[data-lock] body { overflow: hidden; }
  /* фаза 9: на компьютере body не становится прокручиваемым контейнером (clip, не hidden),
     иначе липкие шапки уходят вверх, пока справа открыта панель (d2-swap) */
  @media (min-width: 1100px) {
    html[data-lock] body { overflow: clip; }
  }
  html[data-nav="hidden"] .k-nav { display: none; }

  .k-main { display: block; min-height: 100dvh; }
  /* безопасная зона сверху у контейнера вкладки: шапка и строка «Секунду...» не уходят под часы */
  .k-pane.app { padding-top: env(safe-area-inset-top); padding-bottom: calc(var(--nav-clear) + var(--strip-space) + var(--sp-4)); }
  .k-pane.app > .hint:first-child,
  .k-pane.app > .empty-text:first-child { padding-top: var(--sp-5); }
  .k-pane.is-ghost { position: fixed; z-index: 1; margin: 0; pointer-events: none; }
  .k-screen {
    width: min(100%, var(--col));
    min-height: 100dvh;
    margin: 0 auto;
    padding-bottom: calc(var(--nav-clear) + var(--strip-space) + var(--sp-4));
    background: var(--bg);
  }
  .k-screen__body { padding: 0 var(--gutter); }
  .k-strip { bottom: calc(var(--nav-clear) + var(--dock-h)); }
  html[data-strip] .k-toast:not(dialog .k-toast) { bottom: calc(var(--nav-clear) + var(--strip-space) + var(--dock-h)); }

  /* компьютер: меню плавающей пилюлей 560 × 60 внизу по центру */
  @media (min-width: 1100px) {
    :root { --nav-clear: calc(var(--nav-h) + 12px); }
    .k-nav {
      left: 50%;
      right: auto;
      bottom: 16px;
      width: 560px;
      height: 60px;
      margin-left: -280px;
      padding: 7px 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 30px;
      box-shadow: var(--shadow-deskbar);
    }
    .k-nav__i {
      justify-content: center;   /* ui-a-27: значок и подпись по центру пункта 44, а не у его верха */
      min-height: var(--target);
      padding: 0 6px;
      border-radius: 22px;
      font-size: var(--fs-hint);
      --tr-x: background-color var(--dur-state) var(--ease-fade);
    }
    .k-nav__i[aria-current="page"] { background: var(--acc-soft); }
    .k-nav__face { flex-direction: row; gap: 8px; }
    .k-nav__ic > .k-icon { width: 24px; height: 24px; }
    .k-nav__sty { display: none; }
    .k-nav__i--sty .k-nav__ic { display: grid; }
    .k-thead { padding-top: 36px; }
    .k-thead__sub { font-size: var(--fs-body-s); }
    /* фаза 9: каждый лист на компьютере - плавающая панель справа, сцена или список за ней видны
       и не тускнеют (d2-*, d3-*); высота по содержимому, над меню. Экраны задают свою ширину. */
    .k-sheet {
      inset: var(--desk-panel-top) var(--desk-panel-side) auto auto;
      width: min(var(--desk-panel-w), calc(100% - 2 * var(--desk-panel-side)));
      max-height: calc(100dvh - var(--desk-panel-top) - var(--desk-panel-bottom));
      margin: 0;
      border-radius: var(--r-sheet);
      box-shadow: var(--shadow-dialog);
    }
    .k-sheet--full { height: auto; }
    .k-sheet::backdrop { background: transparent; }
    .k-sheet > .k-sheet__grab { display: none; }
    .k-sheet > .k-sheet__head { padding-top: var(--sp-5); }
    /* панель проявляется на месте и чуть поднимается, а не едет снизу экрана */
    @starting-style {
      .k-sheet[open] { translate: 0 var(--rise-enter); opacity: 0; }
    }
  }
}

/* ========================================================================== screens */
@layer screens {
  /* Раскладка переделанных экранов появляется здесь с фазы 2. Только grid, flex, gap, порядок. */
}

/* ========================================================================== legacy
   Старые экраны без изменений, кроме: темы, «дерево», старая шапка, старое меню, тост и окна ask.js ушли;
   цвета и шрифты идут через токены; цели касания не меньше 44; шрифт не меньше 12. */
@layer legacy {
  /* Старые переменные ведут на новые токены: старые экраны сразу в палитре «Кімнати».
     Имена --bg, --surface, --surface-2, --ink, --line, --danger совпадают с токенами и берутся оттуда. */
  :root {
    --ink-soft: var(--ink-2);
    --accent: var(--acc);
    --accent-ink: var(--acc-ink);
    --radius: var(--r-btn);
    --gap: var(--sp-3);
    --font: var(--font-ui);
    --title-font: var(--font-ui);
    --title-spacing: normal;
    --panel-shadow: none;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Колонка растёт ступенями вместе с экраном. */
  @media (min-width: 1024px) { :root { --col: 1000px; } }
  @media (min-width: 1500px) { :root { --col: 1160px; } }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 var(--font);
    -webkit-text-size-adjust: 100%;
  }

  /* Приложение это одна колонка по центру экрана: и содержимое, и шапка,
     и нижнее меню. На широком мониторе оно не растягивается на всю ширину,
     а стоит посередине, как на телефоне. */
  .app {
    /* Сверху место под закреплённую шапку, снизу под меню. */
    padding: 0 16px calc(var(--nav-h) + 24px);
    width: min(100%, var(--col));
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
  }

  /* Шапка раздела */
  .head { display: flex; flex-direction: column; gap: var(--gap); }

  /* Переключатель из двух половин: видно оба положения и то, какое сейчас. */
  .segmented {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
    margin: 4px 0 2px;
  }
  .segment {
    appearance: none;
    border: none;
    background: none;
    color: var(--ink-soft);
    padding: 12px 20px;
    min-height: 44px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .segment.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  /* fixes-27: наведение только у мыши, на Android :hover залипает после касания */
  @media (hover: hover) and (pointer: fine) { .segment:not(.on):hover { color: var(--ink); } }

  /* Виды вещей: словарные серым, свои цветом. */
  .type-block { margin: 0 0 18px; }
  .type-block .chips { gap: 8px; }
  .type-block .section-title { margin: 0 0 8px; }
  .chip.muted { background: var(--surface-2); color: var(--ink-soft); border-style: dashed; cursor: default; }

  /* Вещь не под рукой: убрана на сезон или уложена в чемодан. */
  .card.away .card-photo { opacity: 0.55; }
  .card-away { font-size: 12px; color: var(--ink-soft); padding: 0 2px 4px; text-align: left; }

  /* Образ дня на главном экране: строка, а не плакат во весь экран. */
  .today-look {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
  }
  .today-thumbs { display: flex; gap: 4px; flex: none; }
  .today-thumb {
    width: 52px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    flex: none;
  }
  .today-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .today-look-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .today-look-info .look-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ОДНА ШИРИНА НА ЭКРАНЕ.
     Прошлая попытка развела содержимое на два размера: текст и кнопки по центру
     узкой полосой, а фотографии от края до края. Выглядит как две разные
     страницы. Поэтому ширина теперь одна: всё, что на экране, выравнивается
     по одним и тем же краям колонки, а колонка растёт вместе с монитором.
     Отдельно ограничен только абзац текста, и то по левому краю: строка длиннее
     восьмидесяти знаков читается тяжело. */
  .hint,
  .empty-text,
  .look-why,
  .lookEditor-note { max-width: 80ch; }

  /* Коллаж и календарь не раздуваются в афиши: ячейка знает свой предел. */
  .collage { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .event-photo, .import-photo { max-width: 100%; }

  /* Переписка: пузырь короче колонки, иначе строка тянется через весь монитор. */
  .chat .bubble { max-width: min(92%, 760px); }

  /* Просмотр образа во весь экран: тёмный фон, фотография целиком, листание.
     Так смотрят фотографии везде, и незачем выдумывать своё. */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-legacy-over);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--night);
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  .lightbox.in { opacity: 1; }
  .lightbox-stage {
    position: relative;
    width: min(100%, 720px);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
  }
  .lightbox-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
  }
  .lightbox-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    width: 100%;
    max-height: 100%;
    overflow: auto;
  }
  .lightbox-collage .collage-cell { background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
  .lightbox-close,
  .lightbox-arrow {
    position: absolute;
    appearance: none;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: var(--white);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
  }
  .lightbox-close { top: 0; right: 0; width: 46px; height: 46px; font-size: 24px; }
  .lightbox-arrow { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 20px; }
  .lightbox-arrow.prev { left: 0; }
  .lightbox-arrow.next { right: 0; }
  @media (hover: hover) and (pointer: fine) { /* fixes-27 */
    .lightbox-close:hover,
    .lightbox-arrow:hover { background: rgba(0, 0, 0, 0.7); }
  }
  .lightbox-caption {
    width: min(100%, 720px);
    flex: 0 0 auto;
    color: var(--on-night);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .lightbox-title { font-size: 17px; font-weight: 600; font-family: var(--title-font); }
  .lightbox-line { font-size: 13px; color: var(--on-night-2); }
  .lightbox-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
  .lightbox-actions .chip { background: var(--night-btn); border-color: var(--night-btn); color: var(--on-night); }
  .lightbox-actions .chip.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
  .lightbox-actions .chip.danger { color: var(--toast-action); }

  /* Кадрирование: окно, в котором видно ровно то, что сохранится. */
  .crop-frame {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 1;
    margin: 12px 0;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    touch-action: none;
    cursor: grab;
  }
  .crop-frame.round { border-radius: 50%; }
  .crop-frame:active { cursor: grabbing; }
  .crop-image { position: absolute; top: 0; left: 0; transform-origin: top left; user-select: none; -webkit-user-drag: none; max-width: none; }
  .crop-zoom { width: 100%; min-height: 44px; }

  /* Фотография хозяйки в меню «Моє» */
  .me-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
  .me-face {
    width: min(140px, 34vw);
    height: min(140px, 34vw);
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    font-family: var(--title-font);
    color: var(--ink-soft);
  }
  .me-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .me-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
  .me-actions .btn { width: 100%; }

  /* Переключатели в «Моє»: строка списка со словом справа. */
  .list-item.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .switch-state { color: var(--ink-soft); font-size: 13px; }
  .list-item.switch.on .switch-state { color: var(--accent); }

  .count { color: var(--ink-soft); font-size: 14px; }

  .hint { color: var(--ink-soft); font-size: 13px; }
  .hint.locked { color: var(--accent); }

  /* Кнопки */
  .btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .btn.danger { color: var(--danger); }
  .btn.wide { width: 100%; }
  .btn[disabled] { opacity: 0.5; }

  .icon-btn {
    appearance: none;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    padding: 6px 10px 6px 0;
    cursor: pointer;
  }

  /* Поиск */
  .search {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 16px;
  }

  /* Табы категорий */
  .tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    padding: 2px 0;
  }
  /* На широком экране перенос строкой: скрытая горизонтальная прокрутка
     на десктопе читается как обрезанная страница. */
  @media (min-width: 760px) {
    .tabs { flex-wrap: wrap; overflow-x: visible; }
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 11px 16px;
    min-height: 44px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
  }
  .tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .controls { display: flex; gap: 8px; flex-wrap: wrap; }

  .chip[disabled],
  .btn[disabled],
  .mark[disabled],
  .segment[disabled] { opacity: 0.5; cursor: default; }

  .chip {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 999px;
    padding: 11px 16px;
    min-height: 44px;
    font-size: 14px;
    cursor: pointer;
  }
  .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  .banner {
    width: 100%;
    text-align: left;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--ink);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
  }

  /* Загрузка */
  .progress { display: flex; flex-direction: column; gap: 6px; }
  .progress-text { font-size: 13px; color: var(--ink-soft); }
  .bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
  .bar-fill { height: 100%; background: var(--accent); transition: width 0.2s ease; }

  /* Сетка вещей */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: 16px;
  }
  @media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .card {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .card-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .badge {
    position: absolute;
    left: 8px;
    top: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
  }
  .card-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .card-title {
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
  .dot.unknown { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--line) 3px, var(--line) 6px); }

  /* Пустые состояния */
  .empty { padding: 48px 8px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
  .empty-title { font-size: 20px; margin: 0; }
  .empty-text { color: var(--ink-soft); font-size: 15px; grid-column: 1 / -1; }

  /* Панель поверх экрана: карточка вещи, фильтры, сортировка */
  .sheet {
    position: fixed;
    /* Панель это та же колонка по центру, а не полотно во весь монитор. */
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--col));
    margin-left: calc(min(100%, var(--col)) / -2);
    /* Панель лежит под строкой состояния и меню: меню видно и поверх неё. */
    z-index: var(--z-legacy-sheet);
    overscroll-behavior: contain;
    background: var(--bg);
    overflow-y: auto;
    /* Снизу оставляем место под меню: оно видно всегда, даже поверх панели. */
    padding: 0 20px calc(var(--nav-h) + 32px);
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .sheet.in { transform: none; opacity: 1; }

  /* Содержимое панели держится той же колонкой, что и основной экран.
     Центрируем через align-items, а не через авто-отступы: у блоков внутри
     свои margin, и они такие отступы затирали, из-за чего текст уезжал влево. */
  .sheet {
    display: flex;
    flex-direction: column;
    /* По центру: блоки с пределом ширины стоят на одной оси, а не прижаты к краю. */
    align-items: center;
  }
  .sheet > * {
    width: 100%;
    /* Панель живёт по тем же краям, что и экран под ней: раньше её содержимое
       было уже, и панель читалась как другая страница. */
    max-width: 100%;
    flex: 0 0 auto;
  }
  .sheet-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 14px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .sheet-title { font-size: 18px; font-weight: 600; font-family: var(--title-font); letter-spacing: var(--title-spacing); }

  /* Блоки панели разделены не только заголовком: без воздуха и линии
     четыре разные настройки читаются как одна длинная простыня. */
  .sheet > .section-title {
    margin: 30px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .sheet > .section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 18px; }
  .sheet > .list { margin-bottom: 6px; }
  .sheet > .fields { margin-bottom: 10px; }
  .sheet > .hint + .list { margin-top: 10px; }

  .item-photo {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    margin-bottom: 16px;
    max-height: 46vh;
    display: flex;
    justify-content: center;
  }
  .item-photo img { width: 100%; object-fit: contain; }
  .item-photo-empty { padding: 48px 0; color: var(--ink-soft); font-size: 14px; }

  /* Форма вещи это сетка, а не колбаса: короткие поля стоят парами,
     длинные занимают строку целиком. */
  .fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .fields > .field.wide,
  .fields > .chips-field { grid-column: 1 / -1; }

  /* Второй блок формы: открывается, когда действительно нужен. */
  .more-fields {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 14px;
    background: var(--surface);
  }
  .more-fields > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink-soft);
    list-style: none;
  }
  .more-fields > summary::-webkit-details-marker { display: none; }
  .more-fields > summary::before { content: '+'; margin-right: 6px; color: var(--accent); }
  .more-fields[open] > summary::before { content: '-'; }
  .more-fields[open] > summary { margin-bottom: 12px; color: var(--ink); }

  /* Старые образы: карточка на каждую фотографию. */
  .import-list { display: flex; flex-direction: column; gap: 16px; margin: 14px 0; }
  .import-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .import-card.saved { opacity: 0.6; }
  .import-photo { border-radius: 10px; overflow: hidden; background: var(--surface-2); max-height: 320px; }
  .import-photo img { width: 100%; height: 100%; object-fit: contain; display: block; max-height: 320px; }

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field.row { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
  .field-label { font-size: 13px; color: var(--ink-soft); }
  .field select,
  .field textarea,
  .field input[type='text'],
  .field input[type='number'],
  .field input[type='date'] {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 16px;
    width: 100%;
  }
  /* галочки формы вещи теперь переключатели .k-switch (коробка 44) */

  .stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; color: var(--ink-soft); font-size: 13px; }
  /* Кнопки панели прижаты к низу: в карточке вещи до них была тысяча точек прокрутки. */
  .sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    position: sticky;
    bottom: 0;
    z-index: 4;
    /* Полоса, а не парящая кнопка. Прозрачный верх пропускал сквозь себя поля,
       и кнопка выглядела приклеенной поверх формы: непонятно, где что кончается. */
    padding: 12px 20px;
    margin: 12px -20px 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }

  .list { display: flex; flex-direction: column; gap: 6px; }
  .list-item {
    text-align: left;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 15px;
    cursor: pointer;
  }
  .list-item.on { border-color: var(--accent); color: var(--accent); }

  /* Проверка вещей */
  .confirm-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
  .confirm-title { font-size: 18px; font-weight: 600; }

  /* Стилист */
  .ask { display: flex; gap: 8px; }
  .ask .search { flex: 1; }
  .looks { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
  .look { display: flex; flex-direction: column; gap: 10px; }
  .look-title { font-size: 17px; font-weight: 600; }
  .collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
  }
  .collage-cell {
    aspect-ratio: 3 / 4;
    background: var(--surface-2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .collage-cell img { width: 100%; height: 100%; object-fit: cover; }
  .collage-empty { font-size: 12px; color: var(--ink-soft); padding: 6px; text-align: center; }
  .look-items { font-size: 13px; color: var(--ink-soft); }
  .look-why { font-size: 15px; line-height: 1.5; }
  .look-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .look-actions .btn { flex: 1 1 140px; min-width: 0; white-space: normal; line-height: 1.25; }

  /* Календарь */
  .month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 16px 0 20px;
  }
  .month-weekday { font-size: 12px; color: var(--ink-soft); text-align: center; padding-bottom: 4px; }
  .month-cell {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    padding: 0;
  }
  .month-cell {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-start;
  }
  .month-cell.empty { border: none; background: none; cursor: default; }
  .month-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  /* Фотография образа этого дня заполняет клетку целиком. */
  .cell-photo, .cell-collage { position: absolute; inset: 0; }
  .cell-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cell-collage { display: grid; grid-template-columns: 1fr 1fr; }
  .cell-collage span { overflow: hidden; background: var(--surface-2); }
  .cell-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .month-day {
    position: absolute;
    top: 3px;
    left: 4px;
    z-index: 2;
    font-size: 12px;
    line-height: 1.1;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-radius: 6px;
    padding: 1px 4px;
  }
  /* Запланированное: образ собран, но ещё не надет. */
  .cell-planned {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    z-index: 2;
  }
  .cell-planned.static { position: static; display: inline-block; flex: none; }
  /* Название события из её календаря: подпись по нижнему краю клетки. */
  .cell-event {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    font-size: 12px;
    line-height: 1.2;
    padding: 2px 4px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  /* На телефоне клетка узкая: подпись в четыре буквы там бесполезна, поэтому
     событие превращается в полоску по нижнему краю, а клетка становится выше,
     чтобы фотографии образа было где поместиться. */
  @media (max-width: 520px) {
    .month { gap: 3px; }
    .month-cell { aspect-ratio: 3 / 4; }
    /* В режиме образов подпись мешает фотографии и превращается в полоску,
       а в режиме событий она и есть содержимое, поэтому остаётся текстом. */
    .month.looks-mode .cell-event {
      color: transparent;
      overflow: hidden;
      height: 4px;
      padding: 0;
      background: var(--accent);
      opacity: 0.55;
    }
    .month.events-mode .cell-event { font-size: 12px; padding: 2px 3px; }
  }
  .dots { display: flex; gap: 3px; height: 6px; }
  .mini-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
  .mini-dot.worn { background: var(--accent); }
  .mini-dot.planned { background: transparent; border: 1px solid var(--accent); }
  .mini-dot.from-calendar { background: var(--ink-soft); }
  /* Что означают метки под числами: без этой строки сетка нечитаема. */
  .legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; color: var(--ink-soft); font-size: 12px; }
  .legend span { display: flex; align-items: center; gap: 6px; }
  .legend .mini-dot { flex: none; }

  /* Фотография образа в списке дня: смотреть, а не читать названия. */
  .event-photo { border-radius: 12px; overflow: hidden; background: var(--surface-2); max-height: 320px; }
  .event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .day-list { display: flex; flex-direction: column; gap: 16px; }
  .event { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .event-line { display: flex; gap: 8px; align-items: center; }
  .event-date { font-size: 13px; color: var(--ink-soft); }
  .event-kind { font-size: 12px; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line); color: var(--ink-soft); }
  .event-kind.worn { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .event-title { font-size: 16px; font-weight: 550; }

  .card.chosen .card-photo { outline: 3px solid var(--accent); outline-offset: -3px; }
  .picked { margin: 8px 0; }

  /* Разбор и цифры */
  .numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 8px; }
  /* На широком экране четыре в ряд: два огромных прямоугольника читаются хуже. */
  @media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .number { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
  .number-value { font-size: 24px; font-weight: 650; }
  .number-label { font-size: 12px; color: var(--ink-soft); }
  .section-title { font-size: 17px; font-weight: 600; margin: 24px 0 8px; font-family: var(--title-font); letter-spacing: var(--title-spacing); }
  .profile {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 12px;
    padding: 12px;
    font: inherit;
    margin-bottom: 8px;
  }
  .weather { margin-top: 2px; }

  /* Лента фотографий в образах */
  .photo-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
  .photo-strip::-webkit-scrollbar { display: none; }
  .strip-cell {
    flex: 0 0 96px;
    aspect-ratio: 3 / 4;
    border: none;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
  }
  .strip-cell img { width: 100%; height: 100%; object-fit: cover; }

  .badge.soft { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }

  .badge.drop {
    left: auto;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    border: 9px solid transparent !important;
    background-clip: padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }

  /* Доступность: видимый фокус для клавиатуры и уважение к отключённой анимации */
  :where(button, input, select, textarea, a):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Фраза дня и обучение */
  .phrase {
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-radius: 14px;
    padding: 12px 14px;
  }
  .help-step { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
  .help-count { font-size: 12px; color: var(--ink-soft); }
  .help-title { font-size: 22px; margin: 0; }
  .help-body { font-size: 16px; line-height: 1.5; margin: 0; color: var(--ink); }
  .help-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0; }
  .help-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
  .help-dot.on { background: var(--accent); }

  /* Образ по слотам */
  .slots { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
  .slot { display: flex; gap: 12px; align-items: flex-start; }
  .slot-photo {
    flex: 0 0 76px;
    width: 76px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .slot-photo img { width: 100%; height: 100%; object-fit: cover; }
  .slot-photo.blank {
    border: 2px dashed var(--line);
    background: none;
  }
  .slot-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
  .slot-name { font-size: 12px; color: var(--ink-soft); }
  .slot-item { font-size: 15px; }
  .slot-item.missing { color: var(--ink-soft); font-style: italic; }
  .slot-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .slot-options { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
  .missing-note {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--ink);
    margin-top: 10px;
  }

  /* События из её собственного календаря */
  .agenda { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .agenda-time { flex: 0 0 62px; font-size: 13px; color: var(--ink-soft); padding-top: 2px; }
  .agenda-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .agenda-title { font-size: 15px; }
  .mini-dot.agenda { background: var(--ink-soft); }

  /* Переключение вариантов в ячейке образа */
  .variant-nav { display: flex; align-items: center; gap: 8px; }
  .variant-nav .chip { padding: 4px 12px; font-size: 16px; line-height: 1; min-width: 44px; }
  .colors-box { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
  .colors-box .chip { display: inline-flex; align-items: center; gap: 6px; }

  /* Простой график по месяцам */
  .chart { display: flex; gap: 6px; align-items: flex-end; height: 120px; margin: 10px 0; overflow-x: auto; }
  .chart-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 34px; height: 100%; }
  .chart-bars { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
  .chart-bar { width: 10px; border-radius: 4px 4px 0 0; min-height: 2px; }
  .chart-bar.added { background: var(--line); }
  .chart-bar.worn { background: var(--accent); }
  .chart-label { font-size: 12px; color: var(--ink-soft); }

  /* Значки действий: на карточке и в шапке карточки вещи */
  .mark {
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 50%;
    border: 6px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mark svg { width: 100%; height: 100%; }
  .mark.on { background-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
  .card-marks {
    position: absolute;
    right: 6px;
    top: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 2;
  }
  .quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: -6px 0 14px;
  }
  .quick-actions .mark { width: 44px; height: 44px; padding: 7px; border-width: 1px; }

  /* Голос и фото рядом с полем */
  .input-extras { display: flex; gap: 6px; align-items: center; }
  .input-extras .mark { width: 44px; height: 44px; padding: 9px; border-width: 2px; }
  .ask { align-items: center; }

  /* Переписка со стилистом */
  .chat { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 90px; }
  .bubble { display: flex; flex-direction: column; gap: 10px; max-width: 92%; }
  .bubble.user {
    align-self: flex-end;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
  }
  .bubble.assistant {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px 16px 16px 4px;
    padding: 12px 14px;
    width: 100%;
  }
  .bubble-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
  /* Нижний блок переписки: полоска подсказок и поле ввода одним куском,
     прижатым к меню. Ничего не висит в воздухе. */
  .chat-dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--col));
    /* Ровно на меню, без щели: высота меню известна точно. */
    bottom: var(--nav-h);
    padding-bottom: var(--stylist-raise);
    z-index: var(--z-dock);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -20px rgba(0, 0, 0, 0.6);
  }
  .chat { padding-bottom: 120px; }

  /* ПРАВИЛО НА ВЕСЬ САЙТ: ОРГАНЫ УПРАВЛЕНИЯ НЕ РАСТЯГИВАЮТСЯ.
     Кнопка шириной в монитор читается как ошибка вёрстки, а не как забота:
     палец всё равно попадает в неё с любого места, а глаз теряет, где она
     кончается. Поэтому у кнопки, строки списка и поля есть предел, а ряды
     раскладываются сеткой: на широком экране они становятся в ряд, на узком
     в колонку. Всё выравнивается по левому краю, общему со всем остальным. */
  .btn { max-width: 340px; }
  .btn.wide { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }

  .sheet-actions,
  .look-actions,
  .list,
  .me-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 340px));
    gap: 8px;
    justify-content: center;
  }
  .sheet-actions .btn,
  .look-actions .btn,
  .me-actions .btn { width: 100%; max-width: none; }
  .list-item { max-width: none; }

  /* Поля ввода: строка длиннее этого всё равно не читается. */
  .ask { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .profile, .sheet .field, .app .search { max-width: 560px; margin-left: auto; margin-right: auto; }
  .fields { max-width: 100%; }

  /* Карточки и коллажи: ячейка знает предел, три вещи не становятся плакатом. */
  .collage { grid-template-columns: repeat(auto-fit, minmax(110px, 180px)); justify-content: center; }
  .today-look { max-width: 560px; margin-left: auto; margin-right: auto; }
  .event-photo, .import-photo { max-width: 420px; margin-left: auto; margin-right: auto; }
  .theme-row { grid-template-columns: repeat(auto-fit, minmax(160px, 240px)); justify-content: center; }
  .numbers { grid-template-columns: repeat(auto-fit, minmax(150px, 240px)); justify-content: center; }

  /* Текст и заголовки: блок по центру, строки внутри читаются слева направо. */
  /* Текст держится читаемой ширины, а ряды кнопок пользуются всей строкой:
     рубрики, свёрнутые в три этажа посреди пустой колонки, выглядят сломанными. */
  .hint, .empty-text, .look-why, .field-label, .section-title, .phrase, .weather {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .chips, .controls, .tabs, .legend {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .chips, .controls, .legend, .tabs { justify-content: center; }

  /* Заголовки и подписи на экранах тоже по центру: иначе строка слева, а блок
     под ней посередине, и страница выглядит собранной из двух вёрсток. */
  .app > .head > .phrase,
  .app > .head > .weather,
  .app > .hint,
  .app > .empty-text,
  .app > .section-title,
  .looks > .field-label,
  .looks > .hint,
  .looks .look-title,
  .looks .look-items,
  .looks .look-why,
  .day-list > .field-label,
  .legend { text-align: center; }

  /* Внутри карточек, списков и переписки текст остаётся слева: там его читают,
     а не разглядывают. */
  .list-item, .sheet .field, .bubble, .event-title, .agenda-info, .import-card { text-align: left; }

  /* Переключатель календаря тоже по центру, как и всё остальное. */
  .segmented { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

  /* ПЕРЕПОЛНЕНИЕ ПО ШИРИНЕ.
     Ячейка сетки по умолчанию не уже своего содержимого, а содержимое у нас
     это фотография в две тысячи точек. Пока в шкафу лежали нарисованные
     примеры, это не мешало; с настоящими снимками страница поехала вправо
     и обрезалась на телефоне. Ячейки обязаны сжиматься, картинки вписываться. */
  .grid > *,
  .collage > *,
  .numbers > *,
  .fields > *,
  .list > *,
  .sheet-actions > *,
  .look-actions > *,
  .me-actions > *,
  .theme-row > *,
  .today-thumbs > * { min-width: 0; }
  img { max-width: 100%; }


  /* ПАНЕЛЬ ВВОДУ В ПЕРЕПИСЦІ.
     Зроблена як у месенджерах: одна рамка, всередині місце для тексту, плюс для
     фото ліворуч і кругла кнопка відправки праворуч. Раніше рядок ділив ширину
     з кнопкою і трьома кружечками, і на телефоні від нього лишалось віконце,
     у якому не видно власного питання. */
  .composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 560px;
    /* Поровну сверху и снизу: с нулём сверху поле прилипало к краю полосы. */
    margin: 8px auto;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--panel-shadow);
  }
  .composer-field {
    width: 100%;
    min-height: 44px;
    max-height: 150px;
    padding: 4px 6px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
  }
  .composer-row { display: flex; align-items: center; gap: 6px; }
  .composer-space { flex: 1 1 auto; }
  .composer-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
  }
  .composer-send {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 20px;
    line-height: 1;
  }
  .composer-send:disabled { opacity: 0.35; }

  /* Прикріплене фото лежить у самій рамці, як вкладення в пошті: видно, що піде
     разом із питанням, і прибрати його можна одним хрестиком. */
  .composer-files { display: none; }
  .composer-files.on { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 0; }
  .composer-file { position: relative; width: 64px; height: 64px; }
  .composer-file img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  .composer-file.loading img { opacity: 0.45; }
  .composer-file-drop {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 11px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
  }

  /* Меню плюса: два пункти над панеллю, як у месенджерах. */
  .composer-menu { display: none; }
  .composer-menu.on {
    display: grid;
    gap: 2px;
    position: absolute;
    left: 16px;
    bottom: 72px;
    z-index: 40;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6);
  }
  .composer-menu-item {
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
  }
  @media (hover: hover) and (pointer: fine) { .composer-menu-item:hover { background: var(--surface-2); } } /* fixes-27 */

  /* Знімок лишається у своїй репліці: інакше через день незрозуміло, про що йшлося. */
  .bubble-photo {
    display: block;
    width: 100%;
    max-width: 260px;
    border-radius: 12px;
  }

  /* РЕЧІ, НА ЯКІ ВІН ПОКАЗАВ.
     Три варіанти стоять поруч, у три колонки: так їх видно разом і можна
     порівняти, а не гортати список. Під знімком назва і рядок про те, чому
     саме ця річ. «Підібрати ще» стоїть нижче маленькою кнопкою: це відповідь
     «не те», вона не повинна кричати гучніше за самі речі. */
  .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pick {
    /* Кнопка сама центрирует своё содержимое по вертикали, и колонка с более
       длинной подписью поднимала свой снимок выше соседних: ряд фотографий
       переставал быть рядом.Flex сверху вниз ставит их на одну линию. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
  }
  .pick-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
  }
  .pick-photo img { width: 100%; height: 100%; object-fit: cover; }
  .pick-text { min-width: 0; }
  .pick-title { margin-top: 5px; font-size: 13px; line-height: 1.25; }
  .pick-why { margin-top: 3px; color: var(--ink-soft); font-size: 12px; line-height: 1.3; }

  .more-picks {
    align-self: flex-start;
    width: auto;
    max-width: none;
    margin-top: 2px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: normal;
  }

  /* Назва речі: поле росте разом із текстом, щоб довге ім'я було видно цілком. */
  .grow-field { resize: none; overflow: hidden; line-height: 1.3; font-family: var(--font); }

  /* ПРОВЕРКА РАЗМЕТКИ: СМОТРЯТ НА ВЕЩЬ, А НЕ НА КНОПКИ.
     Пять одинаковых полос занимали больше половины экрана, и от самой вещи
     оставалась полоска сверху. Теперь главное действие одно, под ним пара
     обычных, а редкие - мелкие и негромкие. Снимку от этого достаётся место. */
  .confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .confirm-actions .btn { width: 100%; max-width: none; }
  .confirm-actions .ok { grid-column: 1 / -1; }
  .confirm-actions .small {
    padding: 6px 10px;
    border-color: var(--line);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
  }
  .sheet .item-photo { max-height: 56vh; }

  /* Поле формы занимает свою колонку целиком: иначе рядом остаётся пустое
     место, а само поле выглядит вдвое уже, чем есть на самом деле. */
  .fields > .field { width: 100%; }

  /* ПОДТВЕРЖДЕНИЕ РЯДОМ СО СТРЕЛКОЙ НАЗАД.
     Кнопка сохранения переехала в шапку карточки и стала галочкой: уйти и
     подтвердить теперь ищут в одном месте, а форма не теряет низ под полосой. */
  .sheet-head .sheet-title { flex: 1 1 auto; min-width: 0; }
  .save-check {
    /* Галочка в кружке: серый крючок на общем фоне терялся, а это единственная
       кнопка в карточке, которая что-то меняет. Пока менять нечего - кружок
       тихий, как только есть что сохранить - он закрашивается. */
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--accent-ink);
    font-size: 19px;
    line-height: 1;
  }
  .save-check:disabled {
    background-color: var(--surface);
    color: var(--ink-soft);
    opacity: 0.55;
  }

  /* ПАНЕЛЬ ВВОДУ В ОДНУ СМУГУ: плюс, мікрофон, рядок і відправка стоять поруч.
     Розміри кнопок тепер не менші за 44: зменшення з цього блоку прибрано. */
  .composer { padding: 6px 8px; border-radius: 26px; gap: 6px; }
  .composer-row { align-items: center; gap: 6px; }
  .composer-row .composer-field { flex: 1 1 auto; min-width: 0; margin: 0; padding: 11px 4px; }
  .composer-menu.on { bottom: 62px; }
  .composer-files.on { padding: 4px 4px 0; }

  /* Речі в образі стоять сіткою по чотири, а не колонкою: набір видно цілком. */
  .bubble .collage { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; justify-content: start; }

  /* Річ, під яку збирали образ, стоїть першою і обведена: видно, з чим порівнювати. */
  .collage-cell.ref { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* Кнопки образу в переписці: три в ряд і дрібні. Три широкі смуги на образ
     з'їдали екран, а сам образ ставав смужкою між ними. */
  .bubble .look-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bubble .look-actions .btn { width: 100%; max-width: none; padding: 6px 8px; font-size: 13px; }

  /* Олівець на картці речі в переписці: дрібний, у кутку знімка. Сам знімок
     відкриває річ на весь екран, а олівець веде одразу в картку. */
  .pick-photo { position: relative; }
  .pick-edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 10px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
  }
  /* Речі в образі теж натискаються: кнопка не повинна виглядати інакше за плитку. */
  button.collage-cell { padding: 0; border: 0; cursor: pointer; }

  /* ВИБІР КІЛЬКОХ РЕЧЕЙ. Відмічене видно галочкою і рамкою, а внизу стоїть
     смуга з «додати» і «скасувати вибір»: помилковий дотик має чим виправити. */
  .card.chosen { outline: 2px solid var(--accent); outline-offset: -2px; }
  .card-tick {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
  }
  .card.chosen .card-tick { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .pick-bar { display: none; }
  .pick-bar.on {
    display: flex;
    gap: 8px;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 12px -20px 0;
    padding: 12px 20px;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }

  /* КОСТЮМИ: двійка чи трійка речей однією карткою. */
  .costume {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .costume-title { font-size: 15px; line-height: 1.3; }
  .costume-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
  .costume-cell {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
  }
  .costume-cell img { width: 100%; height: 100%; object-fit: cover; }
  .costume .btn { align-self: flex-start; width: auto; max-width: none; padding: 5px 12px; font-size: 13px; }

  /* ВИДИ РЕЧЕЙ: СПИСОК, А НЕ СТРІЧКА.
     Стрічка не вміщалась: половина видів жила за краєм екрана, і дотягнутись до
     сумок можна було лише навпомацки. Список видно цілком, і можна відмітити
     кілька видів одразу. */
  .tabs { position: relative; }
  .tab.dropdown { white-space: nowrap; }
  .cat-menu { display: none; }
  .cat-menu.on {
    display: grid;
    gap: 2px;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6);
  }
  .cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }
  .cat-row::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
  }
  .cat-row.on::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-ink);
    font-size: 12px;
    line-height: 1;
  }
  @media (hover: hover) and (pointer: fine) { .cat-row:hover { background: var(--surface-2); } } /* fixes-27 */


  /* Список видів більше не обрізається смугою прокрутки: кнопок стало три,
     стрічка не потрібна, а випадне меню в ній просто ховалось за краєм. */
  .tabs { overflow: visible; flex-wrap: wrap; }

  /* Вибрані види поруч зі списком: слово і хрестик. */
  .picked-types { display: flex; flex-wrap: wrap; gap: 8px; }

  /* «+ вид» стоїть у кінці списку видів і не вдає із себе галочку. */
  .cat-row.add { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--ink-soft); }
  .cat-row.add::before { content: none; }

  /* Порожній вид видно, але приглушено: це теж відповідь, а не пропуск. */
  .cat-row.zero { color: var(--ink-soft); opacity: 0.6; }

  /* ОЦІНКА ОБРАЗУ: ПАЛЕЦЬ УГОРУ АБО ВНИЗ.
     Стоїть біля самого образу, без анкети і без пояснень: відповідь «не те»
     має бути одним дотиком, інакше її просто не дадуть. Відхилене сполучення
     більше не пропонується, тому картка гасне одразу. */
  .look-vote { display: flex; gap: 6px; margin-top: 2px; }
  .vote-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 5px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 50%;
    background-color: var(--surface);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .vote-btn.on { background-color: var(--accent); box-shadow: none; }
  .vote-btn:disabled { opacity: 0.55; }
  .look.dropped { opacity: 0.45; }
  .look-note { margin-top: 4px; color: var(--ink-soft); font-size: 13px; }

  /* Список оцінок: значок, текст і хрестик в один рядок. */
  .vote-row { display: flex; align-items: center; gap: 10px; }
  .vote-mark { flex: 0 0 auto; font-size: 15px; }
  .vote-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; }
  .vote-drop {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 9px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }


  /* РЯД КЕРУВАННЯ: дії першим рядком, види другим. Висота фішок тут більше не зменшується. */
  .controls { gap: 6px 8px; flex-wrap: wrap; justify-content: center; }
  .controls .chip { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .drop { position: relative; display: inline-flex; }

  /* Фільтри: чіпси сіткою, інакше різна довжина слів робить драбину. */
  .grid-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    justify-content: stretch;
  }
  .grid-chips .chip { width: 100%; padding: 7px 8px; font-size: 13px; }

  /* Скидання в шапці панелі: поруч із галочкою, але тихіше за неї. */
  .head-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    border: 5px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1;
  }
  .head-reset + .save-check { margin-left: 2px; }
  .tabs { justify-content: flex-start; gap: 6px; margin-top: 2px; }
  .tabs .tab { padding: 6px 12px; font-size: 13px; }

  /* Кнопка, що наздоганяє при прокручуванні: напівпрозора, дрібна, над меню. */
  .quick-bar {
    position: fixed;
    right: 14px;
    bottom: calc(var(--nav-clear) + var(--strip-space) + 4px);
    z-index: calc(var(--z-dock) - 1);
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .quick-bar.on { display: block; }

  /* ВОПРОСЫ СТИЛИСТКИ: один вопрос и два крупных варианта.
     Как у проверки разметки: смотрят на вещь, а ответ даётся одним касанием. */
  .question-text { font-size: 16px; color: var(--ink); }
  .question-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 10px;
  }
  .question-options .question-option { width: 100%; max-width: none; gap: 8px; display: inline-flex; align-items: center; justify-content: center; }
  .question-options .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }

  /* Окошко «Що не так?» после пальца вниз: причины чипами, под ними поле. */
  .why-box { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .why-box .chips { flex-wrap: wrap; gap: 6px; }
  .why-box textarea { width: 100%; max-width: 560px; resize: none; }
}

/* ========================================================================== fixes-27: касание без плашек
   Кирилл, 27.09 (п. 9 плана): при наведении и долгом нажатии видна белая плашка («служебный блок»).
   Нажатие показывается движением (scale, качание, рост листа) и слоем ::after из base и components,
   наведение только у мыши (hover: hover), кольцо фокуса только с клавиатуры (:focus-visible, data-kbd).
   Зоны сцены «Шафи»: css/shafa.css (.sc-lit). */
@layer base {
  /* Android: долгое нажатие на картинку внутри кнопки или карточки открывает меню картинки и выделяет
     её плашкой. Касание достаётся самой кнопке; на iOS то же закрывает -webkit-touch-callout. */
  :is(button, [role="button"], a[href], summary, [data-press], .k-tile, .card) img { pointer-events: none; }
  /* Выделение текста долгим нажатием не красит картинки синей плашкой (текст выделяется как раньше). */
  img { -webkit-user-select: none; user-select: none; }
}
@layer components {
  /* Меню телефона под мышью (окно уже 1100): у пункта нет скругления, плашка наведения ложилась
     прямоугольником во всю ячейку и под круг «Стиліст». Она остаётся только в пилюле компьютера. */
  @media (hover: hover) and (pointer: fine) and (max-width: 1099.98px) {
    .k-nav__i:not([aria-current="page"]):hover { background: none; }
  }
}