/* «Про тебе», «Моє», анкета, «Налаштування», «Календар Google», первый запуск, «Що нового», код доступа (фаза 8).
   Модули: review.js, person.js, quick.js, first-run.js. Подключается после styles.css: порядок пластов задан там.
   Сырые значения (цвета комнаты в картинках, размеры гида) только в tokens; screens только раскладывает. */

/* ========================================================================== tokens */
@layer tokens {
  :root {
    /* комната в картинках (penpot-mcp/s-m-f-*.js, s-m-n-*.js) */
    --fr-inside: #EFE1CE;
    --fr-base: #E3CFB3;
    --fr-glass: #E7EDEE;
    --fr-perfume: #D9C6E2;
    --fr-leaf-2: #86956F;
    --fr-leaf-3: #7C8C63;
    --fr-chair-base: #5F6E4D;
    --fr-curtain: #EDCFC6;
    --fr-cap-a-l: #EBD2CA;
    --fr-cap-b-l: #D5DEC8;
    --fr-shade: rgb(0 0 0 / .05);
    --fr-veil: rgb(241 234 225 / .62);
    --fr-glint: rgb(255 255 255 / .8);
    /* силуэты вещей: цвет самой вещи, а у примеров первого запуска спокойная палитра */
    --fr-sil-line: rgb(var(--shadow-rgb) / .3);
    --fr-sil-none: #CDBBA8;
    --fr-g1: #D9B8A6;
    --fr-g2: #9FAE8C;
    --fr-g3: #E8DCC8;
    --fr-g4: #8E6A55;
    --fr-g5: #7F94A8;
    --fr-g6: #B5585A;
    /* метка касания: --acc 25 % и светлое кольцо */
    --fr-tap: rgb(138 74 61 / .25);
    --fr-tap-ring: rgb(255 253 251 / .6);
    --fr-scrim-desk: rgb(30 22 18 / .42);
    --fr-shadow-card: 0 10px 40px rgb(var(--shadow-rgb) / .22);
    --fr-shadow-look: 0 4px 16px rgb(var(--shadow-rgb) / .12);
    --fr-shadow-pill: 0 2px 8px rgb(var(--shadow-rgb) / .08);
    --fr-shadow-panel: 0 -2px 14px rgb(var(--shadow-rgb) / .14);
    --fr-shadow-bubble: 0 2px 10px rgb(var(--shadow-rgb) / .14);
    /* размеры гида (m-n-*, d3-n-room) */
    --fr-top-h: 58px;
    --fr-ill-r: 28px;
    --fr-ill-max: 46dvh;
    --fr-dot: 6px;
    --fr-dot-on: 18px;
    --fr-tag-h: 26px;
    --fr-tap-d: 30px;
    --fr-foot2-h: 46px;
    --fr-note-ic: 36px;
    --fr-card-w: 830px;
    --fr-card-h: 470px;
    --fr-card-r: 32px;
    --fr-card-pad: 32px;
    --fr-card-ill-w: 358px;
    --fr-card-ill-h: 398px;
    --fr-card-gap: 48px;
    --fr-card-text: 360px;
    --fr-card-title: 2.5rem;       /* 40 на компьютере */
    --fr-card-top: 76px;
    /* код доступа */
    --fr-code-field-h: 56px;
    --fr-code-r: 28px;
    /* «Про тебе» */
    --ab-thumb: 74px;
    --ab-peek-w: 96px;
    --ab-peek-h: 72px;
    --ab-most-w: 114px;
    --ab-most-h: 92px;
    --ab-tile-h: 88px;
    --ab-tile-n: 1.75rem;          /* 28: число на плитке */
    --ab-mic: 44px;
    --ab-area-min: 300px;
    --ab-side-w: 628px;
    --ab-chart-h: 120px;
    --ab-dot: 12px;
    --ab-col-gap: 32px;
  }
}

/* ========================================================================== components */
@layer components {
  /* ---------- гид: первый запуск и «Що нового» (свой <dialog> во весь экран) ---------- */
  .fr {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    overflow: hidden;
    border: 0;
    background: var(--bg);
    color: var(--ink);
  }
  .fr:not([open]) { display: none; }
  .fr::backdrop { background: transparent; }
  .fr:focus { outline: none; }
  .fr.is-cover .fr__top, .fr.is-cover .fr__foot { visibility: hidden; }
  .fr__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--fr-top-h);
    padding: var(--sp-2) var(--sp-2) 0 var(--inset);
  }
  .fr-dots { position: relative; flex: none; width: var(--fr-dots-w, 54px); height: var(--fr-dot); }
  .fr-dots > span {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fr-dot);
    height: var(--fr-dot);
    border-radius: var(--fr-dot);
    background: var(--line-2);
    transition: translate var(--dur-move) var(--ease-move);
  }
  .fr-dots > .fr-dots__on { width: var(--fr-dot-on); background: var(--acc); }
  .fr-skip {
    min-height: var(--target);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--ink-2);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
    --tr-x: opacity var(--dur-state) var(--ease-fade);
  }
  .fr-skip.is-gone, .fr-alt.is-gone, .fr-hint.is-gone { opacity: 0; pointer-events: none; }
  .fr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fr__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
  }
  .fr__body.is-dragging { cursor: grabbing; }
  .fr-step {
    position: absolute;
    inset: 0;
    padding: 0 var(--gutter) var(--sp-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .fr-step::-webkit-scrollbar { display: none; }
  .fr-step.out { pointer-events: none; }
  .fr-step__ill {
    position: relative;
    width: 100%;
    aspect-ratio: var(--fr-ill-ratio, 358 / 340);
    max-height: var(--fr-ill-max);
    overflow: hidden;
    border-radius: var(--fr-ill-r);
    background: var(--surface-2);
  }
  .fr-step--ward { --fr-ill-ratio: 358 / 398; }
  .fr-step--week { --fr-ill-ratio: 358 / 322; }
  .fr-step--shelf, .fr-step--me { --fr-ill-ratio: 358 / 330; }
  .fr-step__t { margin: var(--sp-5) var(--sp-1) 0; font: 600 var(--fs-display-xl)/var(--lh-display) var(--font-display); }
  .fr-step__d { margin: 10px var(--sp-1) 0; font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--ink-2); }
  .fr-note {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--r-tile);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .fr-note__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--fr-note-ic);
    height: var(--fr-note-ic);
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc-deep);
  }
  .fr-note__ic .k-icon { width: 20px; height: 20px; }
  .fr-note small { display: block; font: 400 var(--fs-hint)/1.35 var(--font-ui); color: var(--ink-2); }
  .fr-note b { display: block; margin-top: 2px; font: 600 var(--fs-hint)/1.35 var(--font-ui); }
  .fr__foot { flex: none; padding: var(--sp-2) var(--gutter) var(--sp-3); }
  .fr-next__l { display: grid; }
  .fr-next__l > span {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-width: 0;
    transition: opacity var(--dur-state) var(--ease-fade);
  }
  .fr-next__l > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-next[data-lab="0"] .fr-next__l > span:last-child,
  .fr-next[data-lab="1"] .fr-next__l > span:first-child { opacity: 0; }
  .fr-next .k-icon, .fr-alt .k-icon { width: 20px; height: 20px; }
  .fr__foot2 { display: grid; min-height: var(--fr-foot2-h); margin-top: 6px; }
  .fr__foot2 > * { grid-area: 1 / 1; }
  .fr-alt { min-height: var(--fr-foot2-h); --tr-x: opacity var(--dur-state) var(--ease-fade); }
  .fr-hint {
    align-self: center;
    margin: 0;
    text-align: center;
    font: 400 var(--fs-caption)/1.3 var(--font-ui);
    color: var(--ink-2);
    transition: opacity var(--dur-state) var(--ease-fade);
  }

  /* ---------- картинки: сцена в пропорциях макета, SVG и подписи поверх ---------- */
  .fr-stage { position: absolute; left: 0; top: 0; width: calc(var(--fr-w) * 1px); height: calc(var(--fr-h) * 1px); transform-origin: 0 0; }
  .fr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .fr-svg .oak { fill: var(--oak); }
  .fr-svg .oak-l { fill: var(--oak-light); }
  .fr-svg .oak-d { fill: var(--oak-deep); }
  .fr-svg .oak-ll { fill: var(--oak-lighter); }
  .fr-svg .inside { fill: var(--fr-inside); }
  .fr-svg .shade { fill: var(--fr-shade); }
  .fr-svg .brass { fill: var(--brass); }
  .fr-svg .base { fill: var(--fr-base); }
  .fr-svg .drawer { fill: var(--fr-base); stroke: var(--oak-light); stroke-width: 1; }
  .fr-svg .sky { fill: var(--sky); }
  .fr-svg .mus { fill: var(--mus); }
  .fr-svg .white { fill: var(--white); }
  .fr-svg .frame { fill: none; stroke: var(--white); stroke-width: 5; }
  .fr-svg .curtain { fill: var(--fr-curtain); }
  .fr-svg .olive { fill: var(--olive); }
  .fr-svg .leaf-2 { fill: var(--fr-leaf-2); }
  .fr-svg .leaf-3 { fill: var(--fr-leaf-3); }
  .fr-svg .pot { fill: var(--acc); opacity: .88; }
  .fr-svg .glass { fill: var(--fr-glass); }
  .fr-svg .glint { fill: var(--fr-glint); }
  .fr-svg .perfume { fill: var(--fr-perfume); }
  .fr-svg .jewel { fill: var(--acc); opacity: .85; }
  .fr-svg .acc { fill: var(--acc); }
  .fr-svg .acc-d { fill: var(--acc-deep); }
  .fr-svg .pillow { fill: var(--oak-lighter); stroke: var(--line-2); stroke-width: 1; }
  .fr-svg .seat { fill: var(--fr-leaf-2); }
  .fr-svg .chair-base { fill: var(--fr-chair-base); }
  .fr-svg .paper { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
  .fr-svg .ink-2 { fill: var(--ink-2); }
  .fr-svg .line-2 { fill: var(--line-2); }
  .fr-svg .veil { fill: var(--fr-veil); }
  .fr-svg .inner { fill: var(--inner); }
  .fr-svg .mat { fill: var(--acc); opacity: .8; }
  .fr-svg .ring { fill: none; stroke: var(--brass); stroke-width: 4; }
  .fr-svg .case { fill: var(--acc-deep); }
  .fr-svg .case-h { fill: none; stroke: var(--acc-deep); stroke-width: 4; }
  .fr-svg .case-s { fill: var(--oak-lighter); opacity: .45; }
  .fr-svg .cap-a { fill: var(--acc-soft); }
  .fr-svg .cap-a-l { fill: var(--fr-cap-a-l); }
  .fr-svg .cap-b { fill: var(--olive-soft); }
  .fr-svg .cap-b-l { fill: var(--fr-cap-b-l); }
  .fr-svg .fr-spark { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; }
  .fr-svg .fr-spark--l { stroke-width: 2.4; }
  .fr-svg .fr-heart { fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-linejoin: round; }
  .fr-svg .fr-arrow { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .fr-svg .fr-sil { stroke: var(--fr-sil-line); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .fr-svg .fr-sil__h { fill: none; stroke: var(--fr-sil-line); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .fr-svg .fr-sil__hook { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .fr-svg .fr-sil--none { fill: var(--fr-sil-none); }
  .fr-svg .fr-sil--g1 { fill: var(--fr-g1); }
  .fr-svg .fr-sil--g2 { fill: var(--fr-g2); }
  .fr-svg .fr-sil--g3 { fill: var(--fr-g3); }
  .fr-svg .fr-sil--g4 { fill: var(--fr-g4); }
  .fr-svg .fr-sil--g5 { fill: var(--fr-g5); }
  .fr-svg .fr-sil--g6 { fill: var(--fr-g6); }
  .fr-over { pointer-events: none; }
  .fr-scene { position: absolute; }
  .fr-tag {
    position: absolute;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    height: var(--fr-tag-h);
    padding: 0 10px;
    border-radius: var(--fr-tag-h);
    background: var(--surface);
    box-shadow: var(--shadow-tag);
    color: var(--ink);
    font: 600 var(--fs-caption)/1 var(--font-ui);
    white-space: nowrap;
    pointer-events: none;
  }
  .fr-pillow { position: absolute; translate: -50% -50%; color: var(--acc-deep); font: 700 var(--fs-section)/1 var(--font-display); pointer-events: none; }
  .fr-tap {
    position: absolute;
    width: var(--fr-tap-d);
    height: var(--fr-tap-d);
    margin: calc(var(--fr-tap-d) / -2) 0 0 calc(var(--fr-tap-d) / -2);
    border-radius: 50%;
    background: var(--fr-tap);
    box-shadow: 0 0 0 4px var(--fr-tap-ring);
    pointer-events: none;
  }
  .fr-tap::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--acc); }
  .fr-tap--in { left: auto; right: 6px; top: 50%; margin: calc(var(--fr-tap-d) / -2) 0 0; }
  .fr-bubble {
    position: absolute;
    padding: var(--sp-2) 10px;
    border-radius: 16px 16px 16px 4px;
    background: var(--surface);
    box-shadow: var(--fr-shadow-bubble);
    font: 500 var(--fs-caption)/1.3 var(--font-ui);
    pointer-events: none;
  }
  .fr-found {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px 0 10px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-tag);
    font: 600 var(--fs-caption)/1 var(--font-ui);
  }
  .fr-found .k-icon { width: 16px; height: 16px; color: var(--olive); }

  /* образ от стиліста в картинке шага 2 */
  .fr-look {
    position: absolute;
    left: calc(16 / 358 * 100%);
    top: calc(16 / 340 * 100%);
    width: calc(272 / 358 * 100%);
    padding: 10px 10px 12px;
    border-radius: var(--r-card-xl);
    background: var(--surface);
    box-shadow: var(--fr-shadow-look);
  }
  .fr-look__col { aspect-ratio: 252 / 116; }
  .fr-look__col .k-lcol { height: 100%; aspect-ratio: auto; border-radius: var(--r-tile); }
  .fr-look__t { margin: 10px 6px 0; overflow: hidden; font: 600 var(--fs-section)/1.25 var(--font-ui); white-space: nowrap; text-overflow: ellipsis; }
  .fr-look__a { display: flex; gap: var(--sp-2); margin-top: 10px; }
  .fr-look__no {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--target);
    height: var(--target);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-2);
  }
  .fr-look__no .k-icon, .fr-look__like .k-icon { width: 20px; height: 20px; }
  .fr-look__like {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--target);
    padding-right: 28px;
    border-radius: var(--r-btn);
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
  }
  .fr-pill {
    position: absolute;
    left: calc(148 / 358 * 100%);
    top: calc(276 / 340 * 100%);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 48px;
    padding: 0 18px;
    border-radius: var(--r-btn);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2), var(--fr-shadow-pill);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
    white-space: nowrap;
  }
  .fr-pill .k-icon { width: 19px; height: 19px; }

  /* неделя и открытый день в картинке шага 3 */
  .fr-week {
    position: absolute;
    left: calc(10 / 358 * 100%);
    right: calc(10 / 358 * 100%);
    top: calc(10 / 322 * 100%);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
  }
  .fr-wd { display: grid; justify-items: center; gap: 6px; }
  .fr-wd__n { font: 500 var(--fs-label)/1 var(--font-ui); color: var(--ink-2); }
  .fr-wd__b {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 44 / 58;
    overflow: hidden;
    border-radius: var(--r-badge);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .fr-wd__b > i { position: absolute; left: 7px; top: 5px; z-index: 1; color: var(--ink); font: 600 var(--fs-label)/1 var(--font-ui); font-style: normal; }
  .fr-wd__b > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fr-wd.is-worn .fr-wd__b { background: var(--surface-3); }
  .fr-wd.is-worn .fr-wd__b > i { left: 3px; top: 3px; padding: 3px 5px; border-radius: 9px; background: var(--surface); }
  .fr-wd.is-today .fr-wd__b { box-shadow: inset 0 0 0 2px var(--acc); }
  .fr-wd.is-today .fr-wd__b > i { color: var(--acc); font-weight: 700; }
  .fr-wd.is-sel .fr-wd__b { background: var(--acc); box-shadow: none; }
  .fr-wd.is-sel .fr-wd__b > i { color: var(--acc-ink); font-weight: 700; }
  .fr-daypanel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(104 / 322 * 100%);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    border-radius: var(--r-card-xl) var(--r-card-xl) 0 0;
    background: var(--surface);
    box-shadow: var(--fr-shadow-panel);
  }
  .fr-daypanel__grab { display: block; width: var(--handle-w); height: var(--handle-h); margin: 0 auto 10px; border-radius: 3px; background: var(--line-2); }
  .fr-daypanel__t { margin: 0 2px; font: 600 var(--fs-section)/1.2 var(--font-ui); }
  .fr-ev { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); padding: 10px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
  .fr-ev > b { flex: none; color: var(--olive-ink); font: 600 var(--fs-body-s)/1 var(--font-ui); }
  .fr-ev__t { display: block; font: 600 var(--fs-body)/1.25 var(--font-ui); }
  .fr-ev small { display: block; color: var(--ink-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .fr-daypanel__add {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 48px;
    margin-top: 14px;
    border-radius: var(--r-btn);
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-body)/1 var(--font-ui);
  }
  .fr-daypanel__add .k-icon { width: 20px; height: 20px; }

  /* ---------- «Потрібен код доступу» (m-f-code) ---------- */
  .fr-code {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--input-max));
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--gutter) calc(env(safe-area-inset-bottom) + var(--sp-4));
  }
  .fr-ill--door { position: relative; width: 100%; aspect-ratio: 358 / 268; overflow: hidden; border-radius: var(--fr-ill-r); background: var(--surface-2); }
  .fr-code__t { margin: 28px var(--sp-1) 0; font: 600 var(--fs-display-xl)/var(--lh-display) var(--font-display); }
  .fr-code__d { margin: 10px var(--sp-1) 0; color: var(--ink-2); font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); }
  .fr-code__l { display: block; margin: 22px var(--sp-1) 6px; color: var(--ink-2); font: 600 var(--fs-caption)/1.2 var(--font-ui); }
  .fr-code__field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--fr-code-field-h);
    padding: 6px 6px 6px var(--sp-5);
    border-radius: var(--fr-code-r);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-2);
  }
  .fr-code__field:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .fr-code__field.is-bad { box-shadow: inset 0 0 0 1.5px var(--danger); }
  .fr-code__input { flex: 1 1 auto; min-width: 0; min-height: var(--target); padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: 400 var(--fs-body)/1.2 var(--font-ui); }
  .fr-code__paste {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--target);
    padding: 0 18px;
    border: 0;
    border-radius: 22px;
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
  }
  .fr-code__paste .k-icon { width: 20px; height: 20px; }
  .fr-code__err { display: flex; gap: var(--sp-2); margin: 10px var(--sp-1) 0; color: var(--danger); font: 500 var(--fs-hint)/1.4 var(--font-ui); }
  .fr-code__err .k-icon, .fr-code__note .k-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
  .fr-code__notes { display: grid; gap: var(--sp-3); margin: 26px var(--sp-1) 0; }
  .fr-code__note { display: flex; gap: 10px; margin: 0; color: var(--ink-2); font: 400 var(--fs-hint)/1.4 var(--font-ui); }
  .fr-code__foot { margin-top: auto; padding-top: var(--sp-6); }

  /* ---------- «Про тебе»: обзор (m-about) ---------- */
  /* QA: .k-card перебивает button.k-card { display: block } из styles.css (иначе пропадал отступ 6px). */
  .k-card.ab-about {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px var(--sp-4) var(--sp-4);
    text-align: left;
    font: inherit;
    color: inherit;
  }
  .ab-about__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .ab-about__t { font: 600 var(--fs-body)/1.3 var(--font-ui); }
  .ab-about__edit { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); font: 600 var(--fs-hint)/1 var(--font-ui); }
  .ab-about__edit .k-icon { display: none; width: 16px; height: 16px; }
  .ab-about__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    color: var(--ink-2);
    font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui);
    white-space: pre-line;
  }
  .ab-about__text.is-empty { color: var(--ink-2); font-style: italic; }
  .ab-about__reads { display: none; color: var(--ink-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-card { padding: 0 var(--sp-4); }
  .ab-row .k-row__label { font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
  .ab-row > .k-icon:not(.k-row__chev) { color: var(--acc); }
  .ab__col .k-group .k-row > .k-icon:not(.k-row__chev) { color: var(--ink); }
  .ab-facts { display: none; flex-wrap: wrap; gap: var(--sp-2); padding: 0 0 var(--sp-4); }
  .ab-fact { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sp-4); border-radius: 17px; background: var(--surface-2); font: 500 var(--fs-caption)/1.2 var(--font-ui); }
  .ab-peek { display: none; align-items: center; gap: var(--sp-2); padding: 0 0 var(--sp-4); }
  .ab-peek__more { margin-left: var(--sp-2); color: var(--ink-2); font: 600 var(--fs-hint)/1 var(--font-ui); }
  .ab-calm {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-3) 14px;
    padding: var(--sp-4);
    border-radius: var(--r-card-l);
    background: var(--surface-2);
  }
  .ab-calm__ic { flex: none; color: var(--oak-deep); }
  .ab-calm__ic .k-icon { width: 28px; height: 28px; }
  .ab-calm__text { flex: 1 1 0; min-width: 0; }
  .ab-calm__t { margin: 0; font: 600 var(--fs-body-s)/1.35 var(--font-ui); }
  .ab-calm__sub { margin: var(--sp-1) 0 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.35 var(--font-ui); }
  .ab-calm--off { align-items: center; color: var(--ink-2); }
  .ab-calm--off .k-icon { width: 22px; height: 22px; }
  .ab-soon { display: none; flex-basis: 100%; gap: var(--sp-3); }
  .ab-soon__i {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 92px;
    padding: var(--sp-4);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-tile);
    background: var(--surface);
    opacity: .6;
    color: var(--ink-2);
    font: 500 var(--fs-hint)/1.3 var(--font-ui);
  }
  .ab-soon__i .k-icon { width: 22px; height: 22px; color: var(--ink-3); }
  .ab-calm__how { display: none; flex-basis: 100%; margin: 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.35 var(--font-ui); }

  /* ---------- образ маленькой картинкой: сетка 2 × 2, вещь целиком ---------- */
  .ab-thumb { flex: none; display: block; width: var(--ab-thumb); height: var(--ab-thumb); overflow: hidden; border-radius: var(--r-photo-s); background: var(--surface-2); }
  .ab-thumb .k-lcol {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    padding: 5px;
    gap: 2px;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .ab-thumb .k-lcol[data-n="1"] { grid-template-columns: 1fr; padding-inline: 5px; }
  .ab-thumb .k-lcol[data-n="3"] > :first-child { grid-row: span 2; }
  .ab-thumb .k-lcol__slot, .ab-thumb .k-lcol__slot--s { height: 100%; border-radius: 0; }
  .ab-thumb .k-lcol__slot > img { object-position: 50% 50%; }
  .ab-thumb--peek { width: var(--ab-peek-w); height: var(--ab-peek-h); }

  /* ---------- «Про мене» (m-aboutme) ---------- */
  .ab-me .k-hint { margin: var(--sp-1) var(--sp-1) var(--sp-3); }
  .ab-me .k-area { max-width: none; min-height: var(--ab-area-min); align-items: flex-start; padding-bottom: 56px; border-radius: var(--r-card-l); }
  .ab-me .k-area__input { min-height: calc(var(--ab-area-min) - 72px); line-height: var(--lh-body); }
  .ab-me .k-area__input:disabled { opacity: .55; }
  .ab-me .k-area > .k-ibtn {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: var(--ab-mic);
    height: var(--ab-mic);
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc-deep);
  }
  .ab-me .k-area > .k-ibtn[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
  .ab-me__chips { margin-top: var(--sp-1); }
  .ab-me__status { display: flex; align-items: center; gap: var(--sp-2); min-height: 24px; margin: var(--sp-5) var(--sp-1) 0; color: var(--olive-ink); font: 500 var(--fs-hint)/1.35 var(--font-ui); }
  .ab-me__status .k-icon { flex: none; width: 18px; height: 18px; }
  .ab-me__status[data-kind="wait"], .ab-me__status[data-kind="local"] { color: var(--ink-2); }
  .ab-me__status[data-kind="bad"] { color: var(--danger); }

  /* ---------- анкета (m-anketa) ---------- */
  .ab-ank { display: flex; flex-direction: column; }
  .ab-ank__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--sp-1); }
  .ab-ank__bar { height: 5px; border-radius: 3px; background: var(--surface-3); transition: background-color var(--dur-state) var(--ease-fade); }
  .ab-ank__bar.is-on { background: var(--acc); }
  .ab-ank__step { margin: 14px 0 0; color: var(--ink-2); font: 600 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-ank__q { margin-top: var(--sp-5); }
  .ab-ank__q:first-child { margin-top: 10px; }
  .ab-ank__lead { margin: 0 0 var(--sp-3); font: 600 var(--fs-display-m)/1.2 var(--font-display); }
  .ab-ank__qt { margin: 0 0 var(--sp-3); font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .ab-ank__sub { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); color: var(--ink-2); font: 400 var(--fs-hint)/1.35 var(--font-ui); }
  .ab-ank__hint { margin: 10px 2px 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.35 var(--font-ui); }
  .ab-ank__num { max-width: 200px; margin-inline: 0; }
  .ab-ank .k-area { max-width: none; }
  .ab-ank .k-option { justify-content: space-between; min-height: 56px; padding: 0 var(--sp-4); border-radius: var(--r-tile); font-size: var(--fs-body); text-align: left; }
  .ab-ank__skip { margin: auto 0 0; padding-top: var(--sp-6); text-align: center; color: var(--ink-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-ank__colors .k-chip { font-size: var(--fs-caption); }

  /* ---------- «Що тобі зайшло, а що ні» (m-votes) ---------- */
  .ab-votes .k-seg { margin: var(--sp-1) 0 var(--sp-4); }
  .ab-vrow { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 4px 10px 10px; border-radius: var(--r-card); }
  .ab-vrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .ab-vrow__t { overflow: hidden; font: 600 var(--fs-body-s)/1.3 var(--font-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ab-vrow__s { color: var(--ink-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-vrow .k-ibtn { flex: none; color: var(--ink-2); }
  .ab-empty { margin: var(--sp-4) var(--sp-1); }

  /* ---------- «Що ти носиш» (m-a-wear) ---------- */
  .ab-wear__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: var(--sp-1) 0 var(--sp-4);
    padding: var(--sp-1);
    border: 0;
    border-radius: var(--r-photo-s);
    background: none;
    color: var(--ink-2);
    text-align: left;
    font: 400 var(--fs-hint)/1.4 var(--font-ui);
  }
  .ab-wear__info .k-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
  .ab-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  /* QA: .k-card, чтобы перебить button.k-card { display: block } из styles.css (число и подпись шли одной строкой). */
  .k-card.ab-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: var(--ab-tile-h);
    padding: 10px var(--sp-4) 14px;
    text-align: left;
    font: inherit;
    color: inherit;
  }
  .ab-tile__n { font: 600 var(--ab-tile-n)/1.15 var(--font-ui); }
  .ab-tile__l { color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-tile__chev { position: absolute; right: var(--sp-4); top: var(--sp-4); width: 16px; height: 16px; color: var(--ink-3); }
  .ab-most { gap: var(--sp-2); }
  .ab-most__i {
    position: relative;
    flex: none;
    width: var(--ab-most-w);
    height: var(--ab-most-h);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--surface-2);
  }
  .ab-most__i > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
  .ab-most__i > .k-badge { position: absolute; left: var(--sp-2); top: var(--sp-2); }
  .ab-unworn__card { padding: var(--sp-3); border-radius: var(--r-card-l); }
  .ab-unworn__head { display: flex; gap: var(--sp-3); }
  .ab-unworn__ph { position: relative; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: var(--r-photo-s); background: var(--surface-2); }
  .ab-unworn__ph > img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
  .ab-unworn__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .ab-unworn__t { font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
  .ab-unworn__s { color: var(--ink-2); font: 400 var(--fs-caption)/1.35 var(--font-ui); }
  .ab-unworn__q { margin-top: 4px; font: 600 var(--fs-hint)/1.3 var(--font-ui); }
  .ab-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
  .ab-choice {
    min-height: var(--target);
    padding: 6px var(--sp-2);
    border: 0;
    border-radius: var(--r-btn);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    font: 600 var(--fs-hint)/1.25 var(--font-ui);
    text-align: center;
  }
  .ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
  .ab-gi { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
  .ab-gi__ph { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-photo-s); background: var(--surface-2); }
  .ab-gi__ph > img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
  .ab-gi__t { overflow: hidden; font: 500 var(--fs-caption)/1.3 var(--font-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ab-block { margin-top: var(--sp-6); }
  .ab-block > .k-hint { margin: var(--sp-1) var(--sp-1) var(--sp-3); }
  .ab-never { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
  .ab-never__f { margin: 0; font: 400 var(--fs-hint)/1.45 var(--font-ui); }
  .ab-never__h { margin: var(--sp-2) 0 0; color: var(--ink-2); font: 700 var(--fs-label)/1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; }
  .ab-chart { display: flex; align-items: flex-end; gap: 6px; height: var(--ab-chart-h); padding: var(--sp-3); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .ab-chart__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
  .ab-chart__bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 2px; width: 100%; }
  .ab-chart__bar { flex: 1 1 0; height: 100%; border-radius: 3px 3px 0 0; transform: scaleY(var(--v, 0)); transform-origin: 50% 100%; }
  .ab-chart__bar--added, .ab-chart__key--added { background: var(--oak-light); }
  .ab-chart__bar--worn, .ab-chart__key--worn { background: var(--acc); }
  .ab-chart__l { color: var(--ink-2); font: 500 var(--fs-label)/1 var(--font-ui); }
  .ab-chart__legend { display: flex; align-items: center; gap: 6px; margin: var(--sp-2) var(--sp-1) 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .ab-chart__key { display: inline-block; width: 10px; height: 10px; margin-left: var(--sp-2); border-radius: 2px; }
  .ab-chart__key:first-child { margin-left: 0; }
  .ab-era { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .ab-era__y { margin: 0 0 4px; font: 600 var(--fs-body)/1.3 var(--font-ui); }
  .ab-era__l { margin: 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.45 var(--font-ui); }

  /* ---------- «Налаштування» (m-a-settings, d2-settings) ---------- */
  .ab-set .k-caps:first-child { margin-top: var(--sp-2); }
  .ab-facts--types { padding-top: 0; }
  .ab-dt { padding-right: var(--sp-1); }
  .ab-dt__row { display: flex; align-items: center; gap: var(--sp-1); }
  .ab-dt__row + .ab-dt__row { box-shadow: 0 -1px 0 var(--line); }
  .ab-dt__row > .k-row { flex: 1 1 auto; min-width: 0; }
  .ab-dt__row > .k-ibtn { flex: none; color: var(--ink-2); }
  .ab-dt__row > .k-ibtn:disabled { opacity: .3; }
  .ab-city__res { min-height: 20px; margin: var(--sp-3) var(--sp-1) 0; color: var(--ink-2); font: 400 var(--fs-hint)/1.4 var(--font-ui); }
  .ab-city__res[data-kind="ok"] { color: var(--olive-ink); }
  .ab-city__res[data-kind="bad"] { color: var(--danger); }
  .ab-link { min-height: var(--target); padding: 0 var(--sp-1); border: 0; background: none; color: var(--acc); font: 600 var(--fs-hint)/1.2 var(--font-ui); text-align: left; }

  /* ---------- «Календар Google» (m-a-gcal) ---------- */
  .ab-gcal__status { padding: 0 var(--sp-4); }
  .ab-gcal__ok { display: flex; align-items: center; gap: 10px; padding: 14px 0; }
  .ab-gcal__okic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--olive-soft); color: var(--olive); }
  .ab-gcal__okic .k-icon { width: 18px; height: 18px; stroke-width: 2.6; }
  .ab-gcal__okt { display: block; color: var(--olive-ink); font: 600 var(--fs-section)/1.25 var(--font-ui); }
  .ab-gcal__ok--off .ab-gcal__okt { color: var(--ink); }
  .ab-gcal__oks { display: block; margin-top: 2px; color: var(--ink-2); font: 400 var(--fs-caption)/1.35 var(--font-ui); }
  .ab-gcal__cal {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--ink);
    text-align: left;
    font: inherit;
  }
  .ab-gcal__dot { flex: none; width: var(--ab-dot); height: var(--ab-dot); margin-left: 4px; border-radius: 50%; }
  .ab-gcal__dot--personal { background: var(--acc); }
  .ab-gcal__dot--work { background: var(--mus); }
  .ab-gcal__name { flex: 1 1 auto; font: 500 var(--fs-body)/1.3 var(--font-ui); }
  .ab-gcal__mode { color: var(--ink-2); font: 400 var(--fs-hint)/1.3 var(--font-ui); }
  .ab-gcal__add { color: var(--acc); font: 600 var(--fs-hint)/1.3 var(--font-ui); }
  .ab-gcal__cal--add .k-icon { width: 16px; height: 16px; color: var(--acc); }
  .ab-gcal__mask { margin-top: var(--sp-3); padding: 0 var(--sp-4); }
  .ab-gcal__mask .k-row__label { font-size: var(--fs-body); }
  .ab-gcal .k-hint { margin: var(--sp-2) var(--sp-1) 0; }
  .ab-gcal .k-groupwrap { margin-top: var(--sp-4); }
  .ab-gcal__change { margin-top: var(--sp-5); }
  .ab-gcal__off {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: var(--sp-2);
    border: 0;
    border-radius: var(--r-btn);
    background: none;
    color: var(--danger);
    font: 600 var(--fs-body)/1.2 var(--font-ui);
  }
  .ab-gcal__offhint { padding: 0 var(--sp-5); text-align: center; font-size: var(--fs-caption); }
  .ab-hidden__row { gap: var(--sp-3); }
  .ab-hidden__row > .k-btn { flex: none; }
  .ab-steps { margin: 0; padding-left: 22px; }
  .ab-steps > li { margin: 0 0 var(--sp-3); padding-left: 4px; font: 400 var(--fs-body-s)/1.45 var(--font-ui); }
  .ab-steps + .k-hint { margin-top: var(--sp-2); }

  /* ---------- «Моє» (m-moye) ---------- */
  .ab-moye__me { display: flex; align-items: center; gap: 14px; margin: var(--sp-1) 0 var(--sp-3); }
  .ab-moye__who { display: flex; flex-direction: column; align-items: flex-start; }
  .ab-moye__name { margin: 0; font: 600 var(--fs-title)/1.25 var(--font-ui); }
  .ab-moye__who .ab-link { padding: 0; }
  .ab-moye__rows > .k-row > .k-icon { width: 22px; height: 22px; }
  .ab-moye__rows > .k-row--danger .k-row__label { color: var(--danger); }
  .ab-moye__settings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target);
    margin-top: var(--sp-3);
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--acc);
    font: 600 var(--fs-body-s)/1.2 var(--font-ui);
  }
  .ab-moye__settings .k-icon { width: 16px; height: 16px; stroke-width: 2.4; }
  .ab-comp__link {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    overflow-wrap: anywhere;
    border-radius: var(--r-btn);
    background: var(--surface-2);
    font: 500 var(--fs-hint)/1.4 var(--font-ui);
    user-select: all;
    -webkit-user-select: all;
  }
  .ab-comp__code { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-5) 0 0; color: var(--ink-2); font: 400 var(--fs-hint)/1.4 var(--font-ui); }
  .ab-comp__code b { color: var(--ink); font-weight: 600; letter-spacing: .02em; user-select: all; -webkit-user-select: all; }
  .ab-comp__note { display: flex; gap: 10px; margin: var(--sp-4) 0 0; color: var(--ink-2); font: 400 var(--fs-caption)/1.4 var(--font-ui); }
  .ab-comp__note .k-icon { flex: none; width: 18px; height: 18px; }
}

/* ========================================================================== layouts */
@layer layouts {
  /* на компьютере: «Що нового» и первый запуск карточкой по центру над приглушённой шафой (d3-n-room) */
  @media (min-width: 1100px) {
    .fr {
      inset: 0;
      width: var(--fr-card-w);
      height: var(--fr-card-h);
      margin: auto;
      padding: 0;
      border-radius: var(--fr-card-r);
      background: var(--surface);
      box-shadow: var(--fr-shadow-card);
    }
    .fr::backdrop { background: var(--fr-scrim-desk); }
    .fr.is-cover { visibility: hidden; }
    .fr__top {
      position: absolute;
      z-index: 1;
      top: 38px;
      left: calc(var(--fr-card-pad) + var(--fr-card-ill-w) + var(--fr-card-gap));
      right: var(--fr-card-pad);
      height: var(--target);
      padding: 0;
    }
    .fr__body { position: absolute; inset: 0; }
    .fr-step {
      display: grid;
      grid-template-columns: var(--fr-card-ill-w) minmax(0, 1fr);
      column-gap: var(--fr-card-gap);
      align-items: start;
      padding: var(--fr-card-pad);
      overflow: hidden;
    }
    .fr-step__ill { width: var(--fr-card-ill-w); height: var(--fr-card-ill-h); max-height: none; aspect-ratio: auto; border-radius: var(--r-card-xl); }
    .fr-step__text { max-width: var(--fr-card-text); padding-top: var(--fr-card-top); }
    .fr-step__t { margin: 0; font-size: var(--fr-card-title); }
    .fr-step__d { margin-top: var(--sp-4); }
    .fr__foot {
      position: absolute;
      z-index: 1;
      left: calc(var(--fr-card-pad) + var(--fr-card-ill-w) + var(--fr-card-gap));
      bottom: 30px;
      width: var(--fr-card-text);
      padding: 0;
    }
    .fr__foot .k-btn--block { max-width: none; }

    /* «Про тебе»: поля 80, содержимое до 1280, как d-about (две колонки раскладывает пласт screens) */
    .k-pane[data-tab="review"].app { width: 100%; max-width: calc(var(--desk-max) + 160px); padding-inline: 80px; }
    .ab-about { padding: 20px var(--sp-6) var(--sp-5); gap: var(--sp-3); }
    .ab-about__t { font-size: var(--fs-section); }
    .ab-about__edit { font-size: var(--fs-body-s); }
    .ab-about__edit .k-icon { display: block; }
    .ab-about__text { -webkit-line-clamp: 14; color: var(--ink); font-size: var(--fs-body-s); }
    .ab-about__reads { display: block; }
    .ab-card { padding: 0 22px; }
    .ab-facts:not([hidden]) { display: flex; }
    .ab-peek:not([hidden]) { display: flex; }
    .ab-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ab-calm { padding: 22px var(--sp-6) var(--sp-5); }
    .ab-calm__how { display: block; }
    .ab-calm__t { font-size: var(--fs-section); }

    /* «Налаштування»: панель справа на месте правой колонки (d2-settings) */
    .k-sheet.ab-side {
      inset: 130px 80px auto auto;
      width: min(var(--ab-side-w), calc(100% - 160px));
      max-height: calc(100dvh - var(--desk-panel-top) - var(--desk-panel-bottom)); /* фаза 9: над меню */
      margin: 0;
      border-radius: var(--r-sheet);
    }
    .k-sheet.ab-side::backdrop { background: transparent; }
    .k-sheet.ab-side .k-sheet__grab { display: none; }
    .ab-side .ab-facts--types:not([hidden]) { display: flex; }
  }
}

/* ========================================================================== screens: только раскладка */
@layer screens {
  .ab { display: flex; flex-direction: column; }
  .ab__cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ab__col > .k-caps { margin-bottom: 0; }
  .ab__col > .k-groupwrap > .k-caps { margin-top: 14px; }
  .ab-wearbox { display: flex; flex-direction: column; }
  .ab-set__cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab-set__col { display: flex; flex-direction: column; min-width: 0; }
  .ab-unworn { display: flex; flex-direction: column; }
  @media (min-width: 1100px) {
    .ab__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ab-col-gap); }
    .ab-side .ab-set__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); }
  }
}