/* ============================================================================
   styles.css · Компонентная библиотека Wolfshelf — СКОПИРОВАНА из канонического
   мокапа docs/mockups/cloud/F.html (CANONICAL BLOCK · component library) и
   экранных @@CSS блоков (S-02/03/05/07/08/18/24).
   Принцип V: разметка, имена классов и токены переиспользуются из мокапа вербатим.
   Адаптация под реальное приложение: рамка устройства `.phone` и фейковый `.statusbar`
   убраны; роль экрана играет `.screen` (full-viewport flex-column). Тематически значимые
   hex (= значение токена) затокенизированы (var(--primary)/var(--accent)), чтобы menhera
   пере-скинивался по data-style; декоративные/статусные/глянцевые hex оставлены вербатим.
   Menhera-скин (титлбар/сканлайны/пиксель-тень/нажатие) — внизу под :root[data-style="style2"].
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 15% 0%, #dceeff 0%, transparent 60%),
    radial-gradient(120% 90% at 100% 100%, #ffeaf3 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--f-display); }

/* ===================== АМБИЕНТ-ДЕКОР ФОНА (sky-deco / стикеры) ===================== */
.sky-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky-cloud { position: absolute; font-size: 46px; opacity: 0.5; filter: blur(0.3px); animation: drift 26s linear infinite; }
.sky-cloud:nth-child(1) { top: 8%; left: -10%; animation-duration: 30s; }
.sky-cloud:nth-child(2) { top: 22%; left: -15%; font-size: 32px; opacity: 0.4; animation-duration: 38s; animation-delay: -6s; }
.sky-cloud:nth-child(3) { top: 70%; left: -12%; font-size: 54px; opacity: 0.35; animation-duration: 44s; animation-delay: -12s; }
.sky-spark { position: absolute; font-size: 18px; opacity: 0.6; animation: twinkle 4s ease-in-out infinite; }
.sky-spark:nth-child(4) { top: 12%; right: 8%; }
.sky-spark:nth-child(5) { top: 60%; right: 14%; animation-delay: -1.5s; }
.sky-spark:nth-child(6) { bottom: 12%; left: 9%; animation-delay: -2.6s; }

/* ===================== КАРКАС ПРИЛОЖЕНИЯ (.screen вместо .phone) ===================== */
.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f2f9ff 0%, #fbfdff 60%, #fff4f9 100%);
}
@media (min-width: 768px) {
  .screen { max-width: 720px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .screen { max-width: var(--app-max); }
}

/* header */
.header {
  flex: 0 0 auto;
  padding: 6px var(--pad) 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.header h1 {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-23);
  color: var(--ink); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.header h1 .moon { font-size: 20px; }
.header .sub-h { font-size: var(--fs-11); color: var(--ink-muted); font-family: var(--f-body); }
.back {
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--plate); border: 1px solid var(--border-blue); border-radius: 50%;
  color: var(--on-primary); font-size: 18px; box-shadow: var(--glow-sm);
}
.sync {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-11); color: var(--ink-muted);
  background: var(--plate); padding: 5px 10px; border-radius: var(--r-pill);
  box-shadow: var(--glow-sm); white-space: nowrap;
}
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(115, 214, 168, 0.3); animation: pulse 2.4s ease-in-out infinite; }

/* controls / search / seg */
.controls { flex: 0 0 auto; padding: 6px var(--pad) 10px; display: flex; flex-direction: column; gap: 8px; }
.search {
  display: flex; align-items: center; gap: 8px; height: 46px;
  background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control);
  padding: 0 14px; box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.search .ico { font-size: 16px; color: var(--primary); }
.search input { border: 0; outline: 0; background: transparent; flex: 1; font-family: var(--f-body); font-size: var(--fs-15); color: var(--ink); }
.search input::placeholder { color: var(--ink-muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg {
  display: flex; background: rgba(127, 184, 242, 0.16); border-radius: var(--r-pill); padding: 3px; gap: 2px;
  box-shadow: inset 0 1px 3px rgba(127, 184, 242, 0.25); flex: 1; min-width: 0;
}
.seg button {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; background: transparent; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--ink-muted);
  padding: 0 4px; white-space: nowrap; transition: transform 0.18s ease;
}
.seg button.active { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); color: var(--on-primary); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

/* buttons / cta / counter / chip */
.btn {
  min-height: 44px; border: 0; cursor: pointer; padding: 0 14px; border-radius: var(--r-control);
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-13);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #ffffff, #eef6ff); color: var(--on-primary);
  border: 1.5px solid var(--border-blue); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn.accent { background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); border-color: rgba(255, 179, 209, 0.7); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--on-primary); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn.loading { opacity: 0.8; pointer-events: none; }
.btn .ld { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(14, 42, 71, 0.3); border-top-color: var(--on-primary); display: inline-block; }
.counter { margin-left: auto; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); background: var(--plate); padding: 8px 12px; border-radius: var(--r-pill); box-shadow: var(--glow-sm); white-space: nowrap; }
.counter b { color: var(--primary); }

/* generic scroll body */
.content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px var(--pad) 14px; display: flex; flex-direction: column; gap: 10px; }

/* ===================== КАРТОЧКА (sticker-card) ===================== */
.card {
  background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card);
  box-shadow: var(--glow); overflow: hidden;
  opacity: 0; transform: translateY(16px); animation: stickerIn 0.32s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes stickerIn { to { opacity: 1; transform: none; } }
.cover { position: relative; height: 96px; display: flex; align-items: flex-start; justify-content: space-between; padding: 8px; }
.cover .glyph { font-size: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)); }
.type-label { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); background: var(--plate); color: var(--plate-ink); padding: 3px 9px; border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.cover .pill { align-self: flex-end; margin-left: auto; }
.card-body { padding: 8px 10px 12px; }
.title-plate { background: var(--plate); border-radius: 12px; padding: 6px 9px; box-shadow: 0 2px 6px rgba(30, 43, 58, 0.08); margin: -26px 0 8px; position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.8); }
.title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--plate-ink); line-height: 1.2; }
.sub { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pill { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.pill.proc { background: rgba(127, 184, 242, 0.2); color: var(--on-primary); }
.pill.done { background: rgba(115, 214, 168, 0.25); color: #176a48; }
.pill.pause { background: rgba(255, 205, 107, 0.3); color: #8a5a00; }
.pill.wait { background: rgba(255, 143, 163, 0.25); color: var(--on-accent); }
.stars { color: var(--rating-star); font-size: var(--fs-13); letter-spacing: 1px; }
.stars .empty { color: rgba(127, 184, 242, 0.35); }
.badge { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-11); border: 1.5px solid var(--border-blue); color: var(--primary); padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.6); }
.progress { height: 8px; background: rgba(127, 184, 242, 0.18); border-radius: var(--r-pill); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-lite), var(--primary)); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.pct { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 3px; }

/* cover gradients — decorative, abstract (вербатим из мокапа, общие для обеих тем) */
.cv1 { background: linear-gradient(135deg, #1b3a2e, #3f6b4f); }
.cv2 { background: linear-gradient(135deg, #c9a14a, #7a4f1d); }
.cv3 { background: linear-gradient(135deg, #2b2540, #6b4ea0); }
.cv4 { background: linear-gradient(135deg, #2a2a2e, #5a4a4a); }
.cv5 { background: linear-gradient(135deg, #0e2a47, #3a6ea5); }
.cv6 { background: linear-gradient(135deg, #ff3b6b, #ffd23b); }
.cv7 { background: linear-gradient(135deg, #f6c45a, #e07a3a); }
.cv8 { background: linear-gradient(135deg, #3a1640, #c0392b); }
.cv9 { background: linear-gradient(135deg, #1f3a52, #9bb7c9); }

/* shelf views */
.shelf { position: relative; }
.shelf.view-vitrina { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.shelf.view-spisok { display: flex; flex-direction: column; gap: 8px; }
.shelf.view-spisok .card { display: flex; align-items: stretch; min-height: 56px; }
.shelf.view-spisok .cover { height: auto; width: 60px; flex: 0 0 60px; align-items: center; justify-content: center; padding: 0; }
.shelf.view-spisok .card-body { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.shelf.view-spisok .title-plate { margin: 0 0 4px; }
.more-hint { text-align: center; padding: 14px 0 6px; color: var(--ink-muted); font-family: var(--f-display); font-size: var(--fs-13); display: flex; align-items: center; justify-content: center; gap: 8px; }
.more-hint::before, .more-hint::after { content: ""; flex: 1; max-width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-blue), transparent); }
.shelf .card.stk-switch { animation: stk-in-right var(--mot-dur-2) var(--mot-ease-enter) both; }

/* ===================== ФОРМЫ ===================== */
.field { display: flex; flex-direction: column; gap: 5px; }
label { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-13); color: var(--on-primary); display: flex; align-items: center; gap: 4px; }
input, textarea, select {
  font-family: var(--f-body); font-size: var(--fs-15); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control);
  padding: 11px 13px; min-height: 44px; width: 100%; outline: 0;
  box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(127, 184, 242, 0.3); }
.field.err input, .field.err textarea, .field.err select { border-color: var(--err); box-shadow: 0 0 0 3px rgba(255, 143, 163, 0.3); }
.help { font-size: var(--fs-11); color: var(--ink-muted); }
.err-msg { font-size: var(--fs-11); color: var(--on-accent); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.req { color: var(--err); }
.section-h { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.panel { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 12px; box-shadow: var(--glow-sm); display: flex; flex-direction: column; gap: 10px; }
.panel .p-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.tg-label { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-13); color: var(--ink); }
.tg-sub { font-size: var(--fs-11); color: var(--ink-muted); }
.switch { width: 52px; height: 30px; border-radius: var(--r-pill); background: rgba(127, 184, 242, 0.25); border: 1.5px solid var(--border-blue); position: relative; cursor: pointer; flex: 0 0 auto; transition: background 0.2s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--glow-sm); transition: transform 0.2s ease; }
.switch.on { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); }
.switch.on::after { transform: translateX(22px); }
.chip { font-size: var(--fs-11); font-family: var(--f-display); font-weight: 600; background: rgba(127, 184, 242, 0.16); color: var(--on-primary); padding: 7px 12px; border-radius: var(--r-pill); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.chip.accent { background: rgba(255, 179, 209, 0.28); color: var(--on-accent); }
.cta {
  background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent);
  border: 0; border-radius: var(--r-pill); padding: 8px 14px; min-height: 44px; font-family: var(--f-display);
  font-weight: 700; font-size: var(--fs-13); cursor: pointer; box-shadow: var(--glow-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cta.ghost { background: transparent; color: var(--on-primary); border: 1.5px solid var(--border-blue); box-shadow: none; }
.cta.block { width: 100%; }
.cta:disabled { opacity: 0.6; cursor: progress; }
.save-row { display: flex; gap: 8px; margin-top: 2px; }
.save-row .cta, .save-row .btn { flex: 1; }

/* toast */
.toast { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); padding: 8px 14px; border-radius: var(--r-pill); box-shadow: var(--glow-sm); }
.toast.ok, .success-toast { background: rgba(115, 214, 168, 0.3); color: #176a48; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); padding: 8px 14px; border-radius: var(--r-pill); }

/* ===================== TAB BAR ===================== */
.tabbar {
  flex: 0 0 auto; height: 74px;
  background: linear-gradient(180deg, #ffffff, #eef6ff);
  border-top: 1.5px solid var(--border-blue);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px 6px; box-shadow: 0 -4px 16px rgba(127, 184, 242, 0.18);
}
.tab { background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--f-display); font-size: var(--fs-11); font-weight: 600; color: var(--ink-muted); }
.tab .ti { font-size: 20px; }
.tab.active { color: var(--primary); }
.tab.center, .tab.add { margin-top: -22px; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); box-shadow: var(--glow), inset 0 2px 0 rgba(255, 255, 255, 0.7); justify-content: center; gap: 0; }
.tab.center .ti, .tab.add .ti { font-size: 28px; }

/* ===================== OVERLAY / BOTTOM SHEET ===================== */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(14, 42, 71, 0.4); }
.overlay__panel { width: 100%; max-width: 480px; padding: var(--pad); background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: 0 -8px 30px rgba(14, 42, 71, 0.25); display: flex; flex-direction: column; gap: 10px; }
.overlay__title { margin: 0; font-family: var(--f-display); color: var(--ink); }
.overlay__close { align-self: flex-end; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink-muted); font-size: 1.25rem; cursor: pointer; }

/* offline banner */
.offline-banner { background: rgba(255, 205, 107, 0.3); color: #8a5a00; border-radius: 12px; padding: 8px 10px; font-size: var(--fs-11); font-weight: 700; font-family: var(--f-body); text-align: center; }

/* ====== Сквозной X (этап 11): недостающие классы системных состояний (канон X.html) ====== */
/* `.retry` — кнопка повтора при ошибке (использовалась в разметке без стиля — порт). Токены ведут
   обе темы (как `.btn`/`.cta`); пиксельная рамка style2 — в override ниже. */
.retry { background: var(--surface); border: 1.5px solid var(--border-blue); color: var(--on-primary); border-radius: var(--r-pill); padding: 8px 14px; min-height: 44px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); cursor: pointer; box-shadow: var(--glow-sm); }
/* центрирование тела состояния (пусто/ошибка) внутри `.state-thumb` */
.st-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
/* офлайн: «показываю сохранённое» (только-чтение) + индикатор «⟳ N в очереди» */
.cached-card { flex: 1; border: 1.5px dashed var(--border-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-muted); font-size: var(--fs-11); padding: 10px; }
.cached-card .mark { background: var(--ok); color: #0d4a30; font-weight: 700; border-radius: var(--r-pill); padding: 2px 8px; font-size: 10px; }

/* ===================== СОСТОЯНИЯ (skeleton / empty thumb) ===================== */
.state-thumb { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 14px; box-shadow: var(--glow); display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.empty-emoji { font-size: 38px; }
.empty-txt { font-size: var(--fs-11); color: var(--ink-muted); }
.skel { width: 100%; height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(127, 184, 242, 0.15), rgba(127, 184, 242, 0.3), rgba(127, 184, 242, 0.15)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; margin-bottom: 8px; }
.skel.cov { height: 46px; margin-bottom: 10px; }
.skel.w70 { width: 70%; } .skel.w45 { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===================== ЭКРАННЫЕ @@CSS (из cloud-мокапов) ===================== */
/* ── S-02/S-03 · auth ── */
.auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px var(--pad) 10px; }
.auth-logo { font-size: 46px; filter: drop-shadow(0 3px 8px rgba(127, 184, 242, 0.4)); }
.auth-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-23); color: var(--ink); }
.auth-sub { font-size: var(--fs-13); color: var(--ink-muted); max-width: 240px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 54px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--ink-muted); display: flex; align-items: center; justify-content: center; }
.pw-meter { display: flex; gap: 4px; margin-top: 2px; }
.pw-meter i { flex: 1; height: 5px; border-radius: var(--r-pill); background: rgba(127, 184, 242, 0.2); }
.pw-meter i.on { background: linear-gradient(90deg, var(--primary-lite), var(--primary)); }
.slug-prev { font-size: var(--fs-11); color: var(--ink-muted); }
.slug-prev b { color: var(--primary); font-family: var(--f-display); }
.alt-link { text-align: center; font-size: var(--fs-13); color: var(--ink-muted); margin-top: 2px; }
.alt-link button { background: transparent; border: 0; cursor: pointer; color: var(--primary); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); min-height: 44px; padding: 0 6px; }
.auth-form__error { margin: 0; padding: var(--pad); background: var(--surface); color: var(--err); border: 1px solid var(--err); border-radius: var(--r-control); }
@media (min-width: 768px) { .auth-head, .auth-form { max-width: 560px; margin-inline: auto; } }

/* ── S-07 · страница артефакта ── */
.layer-tag { font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: 0.4px; padding: 2px 8px; border-radius: var(--r-pill); text-transform: uppercase; }
.layer-tag.work { background: rgba(127, 184, 242, 0.2); color: var(--on-primary); }
.layer-tag.show { background: rgba(255, 179, 209, 0.28); color: var(--on-accent); }
.hero-cover { position: relative; height: 180px; border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--border-blue); box-shadow: var(--glow); display: flex; flex-direction: column; justify-content: space-between; padding: 12px; }
.hero-cover .glyph { font-size: 54px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)); }
.hero-cover .type-label { align-self: flex-start; }
.hero-cover.ph { background: var(--bg-1); border-style: dashed; }
.hero-plate { background: var(--plate); border-radius: 14px; padding: 8px 11px; box-shadow: 0 2px 6px rgba(30, 43, 58, 0.12); border: 1px solid rgba(255, 255, 255, 0.8); align-self: flex-start; }
.hero-plate .h-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--plate-ink); }
.hero-plate .h-sub { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.work-panel { display: flex; flex-direction: column; gap: 10px; }
.prog-row { display: flex; align-items: center; gap: 10px; }
.prog-row .progress { flex: 1; margin-top: 0; }
.plus1 { flex: 0 0 auto; min-width: 52px; min-height: 52px; border-radius: var(--r-pill); border: 1.5px solid var(--border-blue); background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); cursor: pointer; box-shadow: var(--glow-sm); transition: transform 0.15s ease; }
.plus1:active { transform: scale(0.9); }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rate-stars { font-size: 22px; letter-spacing: 3px; cursor: pointer; color: var(--rating-star); }
.rate-stars .empty { color: rgba(127, 184, 242, 0.35); }
@media (min-width: 1024px) { .work-panel, .hero-cover, .prog-row { max-width: 680px; margin-inline: auto; } }

/* ── S-08 · форма артефакта ── */
.add-form { display: flex; flex-direction: column; gap: 14px; }
.type-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.type-chips .chip { cursor: pointer; border: 1.5px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.type-chips .chip.sel { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); color: var(--on-primary); box-shadow: var(--glow-sm); }
.field-count { font-size: var(--fs-11); color: var(--ink-muted); text-align: center; }
/* progressive disclosure «Показать все поля» (аккордеон, канон S-08) */
.accordion { margin: 0; }
.acc-head {
  width: 100%; min-height: 44px; cursor: pointer;
  background: var(--surface); border: 1.5px dashed var(--border-blue); border-radius: var(--r-control);
  padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary);
  box-shadow: var(--glow-sm);
}
.acc-head .chev { transition: transform 0.25s ease; }
.accordion.open .acc-head .chev { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion.open .acc-body { max-height: 760px; }
.acc-inner { padding: 10px 2px 2px; }
.acc-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.acc-fields .field { gap: 5px; }
.cover-preview { max-height: 96px; border-radius: var(--r-control); margin-top: 6px; border: 1.5px solid var(--border-blue); }
@media (min-width: 768px) { .add-form { max-width: 560px; margin-inline: auto; } }

/* ── S-10 · таксономия (категории / типы / статусы) ── (канон docs/mockups/{cloud,menhera}/S-10.html) */
.tax-tabs { display: flex; background: rgba(127, 184, 242, 0.16); border-radius: var(--r-pill); padding: 3px; gap: 2px; box-shadow: inset 0 1px 3px rgba(127, 184, 242, 0.25); }
.tax-tabs button { flex: 1; min-height: 44px; border: 0; cursor: pointer; background: transparent; border-radius: var(--r-pill); font-family: var(--f-display); font-weight: 600; font-size: var(--fs-13); color: var(--ink-muted); }
.tax-tabs button.active { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); color: var(--on-primary); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.tax-hint { font-size: var(--fs-11); color: var(--ink-muted); line-height: 1.5; }
.p-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.p-main .p-emo { font-size: 20px; flex: 0 0 auto; }
.p-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.p-cnt { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-11); color: var(--primary); background: rgba(255, 255, 255, 0.6); border: 1.5px solid var(--border-blue); padding: 2px 8px; border-radius: var(--r-pill); flex: 0 0 auto; }
.p-handle { color: var(--ink-muted); font-size: 16px; cursor: grab; flex: 0 0 auto; }
.subs { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 28px; }
.p-sub-row { border-top: 1px dashed var(--border-blue); padding-top: 10px; }
@media (min-width: 768px) { .tax-tabs { max-width: 560px; margin-inline: auto; } }

/* ── S-05 · Моя полка (canvas-wrap / виды Куча,Мозайка / focus-mirror) ── (канон S-05.html) */
.canvas-wrap { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px var(--pad) 10px; position: relative; }
.canvas-label { font-size: var(--fs-11); color: var(--ink-muted); display: flex; align-items: center; gap: 6px; margin: 2px 2px 10px; font-family: var(--f-display); }
.canvas-label::before { content: "▦"; color: var(--primary); }
/* вид: Куча — наклоны/перекрытия (позиционирование задаёт экран инлайн-стилем) */
.shelf.view-kucha { display: block; position: relative; min-height: 520px; padding-top: 10px; }
.shelf.view-kucha .card { position: absolute; left: 50%; width: 206px; margin-left: -103px; transform-origin: center top; }
.shelf.view-kucha .cover { height: 84px; }
/* вид: Мозайка — плитки разного размера (классы .m-* задаются экраном) */
.shelf.view-mozaika { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 84px; gap: 8px; }
.shelf.view-mozaika .card { display: flex; flex-direction: column; }
.shelf.view-mozaika .cover { flex: 1; height: auto; }
.shelf.view-mozaika .card-body { padding: 6px 8px 8px; }
.shelf.view-mozaika .title-plate { margin: -20px 0 4px; padding: 4px 7px; }
.shelf.view-mozaika .title { font-size: var(--fs-13); }
.shelf.view-mozaika .sub, .shelf.view-mozaika .pct { display: none; }
.shelf.view-mozaika .meta-row .stars, .shelf.view-mozaika .meta-row .badge { display: none; }
.shelf.view-mozaika .m-big { grid-column: span 2; grid-row: span 3; }
.shelf.view-mozaika .m-big .cover { min-height: 120px; }
.shelf.view-mozaika .m-tall { grid-column: span 2; grid-row: span 2; }
.shelf.view-mozaika .m-wide { grid-column: span 2; grid-row: span 1; }
.shelf.view-mozaika .m-sm { grid-column: span 2; grid-row: span 1; }
.shelf.view-mozaika .m-sm .card-body, .shelf.view-mozaika .m-wide .card-body { padding: 5px 7px; }
/* focus-mirror (доступность canvas-полки, FR-012/SC-006) */
.fm-toggle { position: absolute; top: 46px; right: 14px; z-index: 30; min-height: 44px; cursor: pointer; background: var(--plate); border: 1px solid var(--border-blue); border-radius: var(--r-pill); padding: 6px 11px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); box-shadow: var(--glow-sm); }
.sr-tree { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-tree:focus-within { position: absolute; width: auto; height: auto; clip: auto; top: 46px; left: 14px; right: 14px; z-index: 31; background: var(--surface); border: 1.5px solid var(--primary); border-radius: 14px; padding: 10px; box-shadow: var(--glow); white-space: normal; }
.fm-overlay { position: absolute; inset: 0; z-index: 40; display: none; background: var(--plate); backdrop-filter: blur(4px); padding: 54px 16px 16px; overflow-y: auto; }
.fm-overlay.show { display: block; }
.fm-overlay h2 { font-family: var(--f-display); font-size: var(--fs-18); color: var(--ink); margin-bottom: 4px; }
.fm-overlay p { font-size: var(--fs-11); color: var(--ink-muted); margin-bottom: 10px; }
.fm-overlay ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fm-overlay [role="treeitem"] { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: 12px; padding: 10px 12px; font-size: var(--fs-13); color: var(--ink); box-shadow: var(--glow-sm); outline: none; }
.fm-overlay [role="treeitem"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(127, 184, 242, 0.35); }
.fm-close { position: absolute; top: 14px; right: 16px; z-index: 41; min-height: 44px; min-width: 44px; border: 0; cursor: pointer; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: 50%; font-size: 18px; color: var(--ink); box-shadow: var(--glow-sm); }

/* ── S-24 · настройки ── */
.slug-wrap { display: flex; align-items: center; gap: 0; }
.slug-wrap .pfx { font-family: var(--f-body); font-size: var(--fs-13); color: var(--ink-muted); background: rgba(127, 184, 242, 0.16); border: 1.5px solid var(--border-blue); border-right: 0; border-radius: var(--r-control) 0 0 var(--r-control); padding: 11px 10px; min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
.slug-wrap input { border-radius: 0 var(--r-control) var(--r-control) 0; }
.styleswitch { display: flex; gap: 6px; background: rgba(127, 184, 242, 0.16); border-radius: var(--r-pill); padding: 3px; }
.styleswitch button { flex: 1; min-height: 44px; border: 0; cursor: pointer; background: transparent; border-radius: var(--r-pill); font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--ink-muted); }
.styleswitch button.active { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); color: var(--on-primary); box-shadow: var(--glow-sm); }
.style-cap { font-size: var(--fs-11); color: var(--ink-muted); line-height: 1.5; }
@media (min-width: 768px) { .styleswitch, .slug-wrap { max-width: 560px; margin-inline: auto; } }

/* ── S-18 · публичный профиль ── */
.prof-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 4px 2px; }
.avatar { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; background: linear-gradient(135deg, var(--primary-lite), var(--accent-lite)); box-shadow: var(--glow); border: 3px solid var(--surface); }
.prof-plate { background: var(--plate); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--glow-sm); max-width: 300px; }
/* Текст на белой плашке `--plate` → `--plate-ink` (тёмный в ОБЕИХ темах, WCAG AA); muted через opacity,
   как `.poster .p-plate .sub`/`.why-plate` (фикс@25 DEFECT-001: в menhera `--ink`/`--primary`/`--ink-muted` светлые). */
.prof-plate .name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-23); color: var(--plate-ink); }
.prof-plate .uname { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-13); color: var(--plate-ink); opacity: 0.7; margin-top: 1px; }
.prof-plate .bio { font-family: var(--f-body); font-size: var(--fs-13); color: var(--plate-ink); opacity: 0.7; margin-top: 6px; line-height: 1.5; }
.agg { display: flex; gap: 8px; justify-content: center; }
.agg .a-tile { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 8px 16px; box-shadow: var(--glow-sm); text-align: center; }
.agg .a-tile .n { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--primary); }
.agg .a-tile .l { font-size: var(--fs-11); color: var(--ink-muted); }
.prof-actions { display: flex; gap: 8px; justify-content: center; }

/* ── S-06 · Сейчас в процессе (карточка незавершённого / «+1» / «зависший» / откат) ──
   (канон docs/mockups/{cloud,menhera}/S-06.html; .card/.cover/.progress/.pct/.plus1/.counter/.toast
   переиспользуются; «зависший»-акцент через токен --warn-ink; +1-pop — mot-plusone из motion.css) */
/* живой список «в процессе» — повторяет колоночную раскладку контейнера .content мокапа
   (в S-06.html список лежал прямо в .content; в приложении рамку .content держит Shell). */
.ip-list { display: flex; flex-direction: column; gap: 10px; }
.ip-card { display: flex; align-items: stretch; margin: 0; }
.ip-card .cover { height: auto; width: 64px; flex: 0 0 64px; align-items: center; justify-content: center; padding: 0; }
.ip-card .cover .glyph { font-size: 30px; }
.ip-card .card-body { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.ip-card .title-plate { margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; }
.ip-card .next { font-size: var(--fs-11); color: var(--ink-muted); }
.ip-card .stale { color: var(--warn-ink); font-weight: 700; }
.plus1.err-flash { background: var(--err); color: var(--on-accent); }
.inline-rollback { font-size: var(--fs-11); color: var(--on-accent); font-weight: 700; display: none; padding: 2px 0; }
.ip-card.rolled .inline-rollback { display: block; }
@media (min-width: 1024px) { .ip-card { max-width: 600px; margin-inline: auto; } }

/* ── S-27 · Что продолжить (доминирующая карточка-рекомендация / действия) ──
   (канон docs/mockups/{cloud,menhera}/S-27.html; `.hero-rec` = `.card` + крупная обложка;
   `.badge`/`.pill`/`.meta-row`/`.progress`/`.title-plate` переиспользуются. Объяснение `.why-plate`,
   альтернативы `.alt-row`/`.a-*` и `.layer-h` — полная версия S-27, этап 24.) */
.hero-rec .cover { height: 128px; }
.hero-rec .cover .glyph { font-size: 46px; }
.rec-actions { display: flex; gap: 8px; margin-top: 10px; }
.rec-actions .cta { flex: 1; }
/* S-27 (этап 24): объяснение рекомендации на плашке `--plate` (WCAG AA, FR-002/SC-002). */
.why-plate { background: var(--plate); border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 14px; padding: 8px 11px; margin-top: 8px; box-shadow: var(--glow-sm); display: flex; gap: 8px; align-items: flex-start; }
.why-plate .why-ico { font-size: 18px; flex: 0 0 auto; }
.why-plate .why-tx { font-size: var(--fs-13); color: var(--plate-ink); line-height: 1.5; }
.why-plate .why-tx b { color: var(--plate-ink); }
/* S-27 (этап 24, US2): «больше нет вариантов» после исчерпания «Другого варианта». */
.rec-note { font-size: var(--fs-13); color: var(--ink-muted); text-align: center; margin-top: 10px; opacity: 0.85; }
.alt-row { display: flex; gap: 8px; margin-top: 2px; }
.alt { flex: 1; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 9px 10px; box-shadow: var(--glow-sm); display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.alt .a-glyph { font-size: 22px; }
.alt .a-tx { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.alt .a-t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt .a-why { font-size: var(--fs-11); color: var(--ink-muted); }

/* ── S-11 · Связи (бейдж типа связи; дерево — focus-mirror .sr-tree этапа 07) ──
   (канон docs/mockups/{cloud,menhera}/S-11.html; `.canvas-wrap`/`.sr-tree`/`.fm-*` переиспускаются;
   bare-rgba бейджа → токен `--primary-lite`. Графовый холст `.graph`/`.gnode`/`.gline`/легенда `.rel-key`
   — полная версия S-11, этап 19.) */
.rel-badge { font-family: var(--f-display); font-weight: 600; font-size: 10px; color: var(--on-primary); background: var(--primary-lite); padding: 2px 7px; border-radius: var(--r-pill); }
/* Улучшенное дерево связей (вложенный список; узлы на токенах, обе темы) — этап 19. */
.rel-tree { list-style: none; margin: 4px 0 0; padding-left: 14px; display: flex; flex-direction: column; gap: 4px; }
.rel-tree .rel-tree { padding-left: 16px; margin-left: 4px; border-left: 1.5px solid var(--border-blue); }
.rel-tree li { font-size: var(--fs-13); color: var(--ink); }
/* Легенда графа связей (защита от цикла / бюджет кадра) — этап 19, US3. */
.rel-key { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: var(--fs-11); color: var(--ink-muted); margin-top: 8px; }
@media (min-width: 1024px) { .rel-key { max-width: 560px; margin-inline: auto; } }
/* Граф связей DOM-узлами (research D1: не литеральный canvas) — этап 19, US3.
   Пан/зум — CSS transform на `.graph` (только transform; FR-011); холст скроллится внутри `.canvas-wrap`. */
/* Вьюпорт графа: клиппирует трансформированный холст внутри себя (FR-012) — пан/зум не задевают легенду. */
.gviewport { position: relative; width: 358px; max-width: 100%; height: 430px; overflow: hidden; margin: 4px auto 0; touch-action: none; }
.graph { position: relative; width: 358px; height: 430px; cursor: grab; transform-origin: 0 0; }
.graph:active { cursor: grabbing; }
/* Легенда поверх трансформированного графа; кнопки зума — тач ≥44px. */
.rel-key { position: relative; z-index: 1; }
.rel-key .btn { min-width: 44px; }
.glines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gline { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; opacity: 0.55; }
.gline.dash { stroke-dasharray: 5 6; stroke: var(--accent); opacity: 0.7; }
.gnode { position: absolute; z-index: 2; width: 150px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); box-shadow: var(--glow); overflow: hidden; cursor: pointer; }
.gnode.anchor { width: 166px; border-color: var(--primary); box-shadow: var(--glow), 0 0 0 2px var(--primary-lite); cursor: default; }
.gnode .nb { padding: 6px 9px 9px; }

/* ── S-09 · Лист «＋ Добавить» (быстрое добавление / по ссылке / импорт) — этап 20 ──
   Канон docs/mockups/{cloud,menhera}/S-09.html; `.stk-sheet`/`.skel`/`.toast` уже есть. Токены, обе темы. */
.sheet-grip { width: 42px; height: 5px; border-radius: var(--r-pill); background: var(--primary-lite); margin: 2px auto 12px; }
.sheet-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.sheet-sub { font-size: var(--fs-11); color: var(--ink-muted); margin-bottom: 14px; }
.action-list { display: flex; flex-direction: column; gap: 10px; }
.action { display: flex; align-items: center; gap: 12px; min-height: 60px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); box-shadow: var(--glow-sm); padding: 12px 14px; cursor: pointer; text-align: left; width: 100%; font-family: var(--f-body); }
.action .a-ico { font-size: 24px; flex: 0 0 auto; }
.action .a-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.action .a-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--ink); }
.action .a-sub { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 1px; }
.action .a-chev { color: var(--primary); font-size: 18px; margin-left: auto; }
.action.primary { background: linear-gradient(180deg, var(--accent-lite), var(--accent)); border-color: var(--accent-lite); }
.action.primary .a-title { color: var(--on-accent); }
.a-added { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); color: var(--on-primary); background: var(--primary-lite); border-radius: var(--r-pill); padding: 2px 8px; }

/* ── S-26 · Экспорт данных (формат / генерация / скачивание) — этап 21 ──
   Канон docs/mockups/{cloud,menhera}/S-26.html; `.btn`/`.panel`/`.toggle`/`.switch`/`.progress`/`.skel`/
   `.cta`/`.badge`/`.state-thumb`/`.retry` уже есть. Токены, обе темы; bare-hex → color-mix(--ok). */
.priv-note { display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, var(--ok) 18%, transparent); border: 1.5px solid color-mix(in srgb, var(--ok) 50%, transparent); border-radius: var(--r-control); padding: 9px 11px; font-size: var(--fs-11); color: var(--ink); line-height: 1.55; font-weight: 700; }
.priv-note .pn-ico { font-size: 16px; flex: 0 0 auto; }
.fmt-row { display: flex; gap: 8px; }
.fmt-row .btn { flex: 1; }
.gen { display: flex; flex-direction: column; gap: 8px; }
.gen-head { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--on-primary); }
.gen-head .gp { margin-left: auto; font-size: var(--fs-11); color: var(--ink-muted); }
.dl-card { display: flex; align-items: center; gap: 12px; }
.dl-card .dl-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-lite), var(--primary)); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--glow-sm); }
.dl-card .dl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-card .dl-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.dl-card .dl-meta { font-size: var(--fs-11); color: var(--ink-muted); }
/* «Выгрузить всё» — инлайн-сброс выбора подборки (US3): текстовая кнопка-ссылка в priv-note. */
.linklike { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.acc-inner .chip { cursor: pointer; border: 1.5px solid transparent; margin: 0 6px 6px 0; }
.acc-inner .chip.accent { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (min-width: 768px) { .gen { max-width: 560px; margin-inline: auto; } }

/* ── S-16 · Итоги года (постер / ключевые цифры / герой года) — этап 22 ──
   Канон docs/mockups/{cloud,menhera}/S-16.html; `.preview-ribbon`/`.cover.cv*`/`.glyph`/`.section-h` уже есть.
   Витринный текст — на плашке `--plate`/`--plate-ink` (WCAG AA). Токены, обе темы. */
.poster { position: relative; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--glow); min-height: 170px; display: flex; align-items: flex-end; padding: 14px; }
.poster .sparkle { position: absolute; top: 10px; right: 12px; font-size: 24px; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--ink) 25%, transparent)); }
.poster .p-plate { position: relative; z-index: 2; background: var(--plate); border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 14px; padding: 10px 13px; box-shadow: var(--glow-sm); }
.poster .p-plate .y { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-29); color: var(--plate-ink); line-height: 1; }
/* Текст на плашке — производное от --plate-ink (тёмный в ОБЕИХ темах), НЕ --ink-muted (в menhera он
   для тёмных поверхностей → нечитаем на белой плашке). Приглушение через opacity → WCAG AA (FR-014). */
.poster .p-plate .y small { font-size: var(--fs-13); color: var(--plate-ink); opacity: 0.62; font-weight: 600; }
.poster .p-plate .sub { font-size: var(--fs-11); color: var(--plate-ink); opacity: 0.62; margin-top: 3px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 12px; box-shadow: var(--glow-sm); text-align: center; }
.stat-tile .n { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-23); color: var(--primary); line-height: 1; }
.stat-tile .l { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 4px; }
.hero-art { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 10px; box-shadow: var(--glow-sm); }
.hero-art .cover { height: auto; width: 64px; flex: 0 0 64px; border-radius: 14px; align-items: center; justify-content: center; }
.hero-art .cover .glyph { font-size: 30px; }
.hero-art .ha-body { flex: 1; min-width: 0; }
.hero-art .ha-body .k { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-accent); }
.hero-art .ha-body .t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--ink); margin-top: 1px; }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } .poster { min-height: 220px; } }

/* ── S-22 · Лента подписок (карточки публичных обновлений) — этап 23 ──
   Канон docs/mockups/{cloud,menhera}/S-22.html; `.card`/`.state-thumb`/`.skel`/`.badge`/`.empty-*` уже есть.
   Карточки/текст ленты — на плашке (WCAG AA). Токены, обе темы. */
.layer-h { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); color: var(--ink-muted); display: flex; align-items: center; gap: 6px; letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px; }
.layer-h::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--primary); }
.layer-h.work::before { background: var(--accent); }
.feed { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.feed .fcov { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: var(--glow-sm); background: linear-gradient(135deg, var(--primary-lite), var(--accent-lite)); }
.feed-body { flex: 1; min-width: 0; }
.feed .fmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feed .fuser { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--on-primary); }
.feed .ftime { font-size: var(--fs-11); color: var(--ink-muted); margin-left: auto; }
.feed .ftext { font-size: var(--fs-13); color: var(--ink); line-height: 1.5; margin-top: 3px; }
.feed .ftext b { font-family: var(--f-display); color: var(--plate-ink); }
.react-row { display: flex; gap: 8px; margin-top: 8px; }
.react { min-height: 44px; border: 1.5px solid var(--border-blue); background: var(--surface); border-radius: var(--r-pill); padding: 5px 12px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); cursor: pointer; box-shadow: var(--glow-sm); display: inline-flex; align-items: center; gap: 5px; }
.react.on { background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
/* menhera: `.fuser`/`.react` стоят на ТЁМНОЙ поверхности карточки → `--on-primary` (тёмный тон) нечитаем;
   на тёмном фоне нужен светлый `--ink` (WCAG AA, FR-015). cloud сохраняет `--on-primary` (светлая поверхность). */
:root[data-style="style2"] .feed .fuser, :root[data-style="style2"] .react { color: var(--ink); }
.feed .react { min-height: 44px; }
button.sync { min-height: 44px; cursor: pointer; }
@media (min-width: 1024px) { .card.feed { max-width: 600px; margin-inline: auto; } }

/* ── S-23 · Подписки / подписчики / блокировка — этап 23 ──
   Канон docs/mockups/{cloud,menhera}/S-23.html; `.panel`/`.section-h`/`.btn`/`.btn.ghost`/`.btn.accent`/
   `.confirm-bar`/`.toast`/`.state-thumb`/`.accordion`/`.toggle` уже есть. Токены, обе темы. */
.tabs2 { display: flex; background: color-mix(in srgb, var(--primary) 16%, transparent); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.tabs2 button { flex: 1; min-height: 44px; border: 0; cursor: pointer; background: transparent; border-radius: var(--r-pill); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink-muted); }
.tabs2 button.active { background: linear-gradient(180deg, var(--primary-lite), var(--primary)); color: var(--on-primary); box-shadow: var(--glow-sm); }
.person { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.person .pav { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--glow-sm); background: linear-gradient(135deg, var(--primary-lite), var(--accent-lite)); }
.person .pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person .pname { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.person .preact { font-size: var(--fs-11); color: var(--ink-muted); }
.person + .person { border-top: 1px solid var(--border-blue); padding-top: 10px; margin-top: 8px; }
.btn.sm { min-height: 44px; padding: 0 12px; font-size: var(--fs-11); }

/* ===================== ТАЧ-ЦЕЛИ ≥44px ===================== */
.screen :is(.alt-link button, .pw-toggle, .tab, .seg button) { min-height: 44px; }
.screen .toggle:has(.switch), .screen .p-row:has(.switch), .screen .row:has(.switch) { min-height: 44px; cursor: pointer; }

/* ============================================================================
   MENHERA PIXEL · СКИН (style2) — компонентные правила сверх токенов.
   Канон docs/mockups/menhera/F.html: CRT-сканлайны, пиксель-границы/тень, нажатие
   translate(2px,2px), приподнятый центральный таб. Структура/раскладка не меняются.
   ============================================================================ */
:root[data-style="style2"] body {
  background:
    radial-gradient(620px 460px at 14% 6%, rgba(255, 79, 163, 0.3), transparent 60%),
    radial-gradient(560px 520px at 88% 16%, rgba(63, 200, 255, 0.26), transparent 60%),
    radial-gradient(520px 520px at 76% 96%, rgba(160, 79, 255, 0.3), transparent 62%),
    linear-gradient(170deg, #2a1850, #1c1136);
  color: #fff;
}
:root[data-style="style2"] .screen { background: linear-gradient(170deg, #2a1850, #1c1136); }
:root[data-style="style2"] .screen::after {
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
/* карточка / панели — пиксельная граница + жёсткая тень */
:root[data-style="style2"] .card,
:root[data-style="style2"] .panel,
:root[data-style="style2"] .state-thumb,
:root[data-style="style2"] .hero-cover,
:root[data-style="style2"] .coll-card,
:root[data-style="style2"] .agg .a-tile {
  border: 2px solid var(--pix-border);
  box-shadow: var(--pix-shadow);
}
/* кнопки — пиксельный стиль и нажатие со сдвигом */
:root[data-style="style2"] .btn,
:root[data-style="style2"] .cta,
:root[data-style="style2"] .retry,
:root[data-style="style2"] .fmt,
:root[data-style="style2"] .react,
:root[data-style="style2"] .plus1 {
  border: 2px solid #fff; box-shadow: var(--glow-pink), 3px 3px 0 var(--pix-border);
  font-family: var(--f-display);
}
:root[data-style="style2"] .btn:active,
:root[data-style="style2"] .cta:active,
:root[data-style="style2"] .retry:active,
:root[data-style="style2"] .plus1:active { transform: translate(2px, 2px); box-shadow: var(--glow-pink), 1px 1px 0 var(--pix-border); }
:root[data-style="style2"] .btn.ghost, :root[data-style="style2"] .cta.ghost { background: var(--bg-1); color: #fff; }
/* таб-бар — пиксельный, центральная кнопка-кубик */
:root[data-style="style2"] .tabbar { background: #160c2c; border-top: 2px solid var(--primary); }
:root[data-style="style2"] .tab.center, :root[data-style="style2"] .tab.add { border-radius: var(--r-control); border: 2px solid #fff; box-shadow: var(--glow-pink), 3px 3px 0 var(--pix-border); }
/* инпуты — пиксельная граница */
:root[data-style="style2"] input, :root[data-style="style2"] textarea, :root[data-style="style2"] select { border: 2px solid var(--accent); }
/* подписи форм на тёмной поверхности — светлые (cloud --on-primary тёмный, читается лишь на свету) */
:root[data-style="style2"] label { color: var(--ink); }
/* плашки витрины остаются белыми (WCAG) — текст --plate-ink уже тёмный */

/* ============ S-19 · Публичная страница артефакта (этап 10) ============ */
/* Канон cloud/S-19.html; токены ведут обе темы. Обложка/название переиспускают .hero-cover/.title-plate
   (S-07), реакция/share — .btn/.cta, аккордеон — .accordion, отказ — .state-thumb/.err-body. Порт —
   недостающее: карточка публичных полей, плашка автора, центрирование отказа, счётчик реакций. */
.pub-fields { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 12px; box-shadow: var(--glow-sm); display: flex; flex-direction: column; gap: 10px; }
.author-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 8px 12px; box-shadow: var(--glow-sm); }
.author-row .av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: linear-gradient(135deg, var(--primary-lite), var(--accent-lite)); }
.author-row .au-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.author-row .au-sub { font-size: var(--fs-11); color: var(--primary); }
/* отказ доступа без утечки (КРИТ S-19): центрированный блок 🔒 в рамке state-thumb */
.err-body { align-items: center; }
/* счётчик реакций ♡ — публичное число рядом с кнопкой реакции (S-19, срез этапа 10) */
.react-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--accent); }
/* читаемая колонка на широком экране (FR-017) */
@media (min-width: 768px) { .pub-fields { max-width: 600px; margin-inline: auto; } }

/* ====== S-07 публикация (этап 10): preview-плашка + бар подтверждения ====== */
/* Канон cloud/S-07.html §PUBLISH (M13). `.seg`/`.toggle`/`.switch`/`.section-h` — уже есть. */
.preview-ribbon { display: flex; align-items: center; gap: 8px; background: rgba(127, 184, 242, .16); border: 1.5px dashed var(--border-blue); border-radius: var(--r-control); padding: 9px 12px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); }
.preview-ribbon .tag { background: var(--plate); border-radius: var(--r-pill); padding: 2px 9px; box-shadow: var(--glow-sm); margin-left: auto; }
.confirm-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 10px 12px; box-shadow: var(--glow-sm); }
.confirm-bar .ct { flex: 1; font-size: var(--fs-11); color: var(--ink-muted); }
.seg.vis button { font-size: var(--fs-11); }

/* ====== S-12 · Рецензии (этап 12): редактор + «Мои рецензии» ====== */
/* Канон cloud/S-12.html. Токены ведут обе темы; `.fmt` — пиксель-рамка style2 в override ниже.
   Переиспускаются `.section-h`/`.cta`/`.pill`/`.state-thumb`/`.skel.mot-skeleton`/`.empty-*`/`.cover`/`.glyph`. */
.rev-anchor { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 10px; box-shadow: var(--glow-sm); }
.rev-anchor .cover { height: auto; width: 48px; flex: 0 0 48px; border-radius: 12px; align-items: center; justify-content: center; padding: 0; }
.rev-anchor .cover .glyph { font-size: 24px; }
.rev-anchor .ra-meta { min-width: 0; }
.rev-anchor .ra-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.rev-anchor .ra-sub { font-size: var(--fs-11); color: var(--ink-muted); }
.rev-toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.fmt { min-width: 44px; min-height: 44px; border: 1.5px solid var(--border-blue); background: var(--surface); border-radius: var(--r-control); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--on-primary); cursor: pointer; box-shadow: var(--glow-sm); }
.rev-body { font-family: var(--f-body); font-size: var(--fs-15); line-height: 1.7; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 13px; box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, .9); }
.rev-body p { margin-bottom: 10px; }
.rev-body p:last-child { margin-bottom: 0; }
.autosave-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mine-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 8px 10px; box-shadow: var(--glow-sm); }
.mine-row .mr-t { font-family: var(--f-body); font-size: var(--fs-13); color: var(--ink); min-width: 0; flex: 1; }
/* читаемая колонка длинного текста рецензии (FR-017) */
@media (min-width: 1024px) { .rev-anchor, .rev-toolbar, .rev-body { max-width: var(--read-max); margin-inline: auto; } }

/* ====== S-13 · Подборки (этап 13): список/карточка/обложка ====== */
/* Канон cloud/S-13.html. Токены ведут обе темы; пиксель-рамка style2 — в override ниже.
   Переиспускаются `.counter`/`.accordion`/`.acc-*`/`.confirm-bar`/`.preview-ribbon`/`.success-toast`/
   `.vis`/`.section-h`/`.cta`/`.state-thumb`/`.skel.mot-skeleton`/`.empty-*` (этапы 10/11/12). */
.coll-grid { display: flex; flex-direction: column; gap: 12px; }
.coll-card { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); box-shadow: var(--glow); overflow: hidden; opacity: 0; transform: translateY(16px); animation: stickerIn .32s cubic-bezier(.2, .8, .25, 1) forwards; }
.coll-cover { height: 96px; position: relative; display: flex; align-items: flex-end; padding: 8px; }
.coll-cover .mini-stack { position: absolute; inset: 0; display: flex; gap: 0; }
.coll-cover .mini-stack > span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
.coll-name { position: relative; z-index: 2; background: var(--plate); border: 1px solid rgba(255, 255, 255, .8); border-radius: 12px; padding: 6px 10px; box-shadow: 0 2px 6px rgba(30, 43, 58, .12); }
.coll-name .t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--plate-ink); line-height: 1.15; }
.coll-name .s { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 1px; }
.coll-foot { display: flex; align-items: center; gap: 6px; padding: 10px; flex-wrap: wrap; }
.coll-foot .vis { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); background: rgba(127, 184, 242, .16); padding: 3px 9px; border-radius: var(--r-pill); }
.coll-foot .share { margin-left: auto; }
/* десктоп — карточная сетка элементов подборки auto-fill (FR-017) */
@media (min-width: 768px) { .coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }

/* ====== S-20 · Публичная подборка (этап 13): hero витрины ====== */
/* Канон cloud/S-20.html. `.coll-hero`/`.priv-note`/`.shelf.view-vitrina`/`.card`/`.cover` уже
   портированы (этап 10 S-19); добавляются `.ch-stack`/`.ch-plate` плашки геро. */
.coll-hero .ch-stack { position: absolute; inset: 0; display: flex; }
.coll-hero .ch-stack > span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 30px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22)); }
.coll-hero .ch-plate { position: relative; z-index: 2; background: var(--plate); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; padding: 9px 13px; box-shadow: 0 2px 8px rgba(30, 43, 58, .14); }
.coll-hero .ch-plate .t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--plate-ink); line-height: 1.1; }
.coll-hero .ch-plate .s { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }

/* ====== S-14 · История и таймлайн (этап 14): хронологическая лента ====== */
/* Канон cloud/S-14.html. Токены ведут обе темы. `.chip`/`.section-h`/`.state-thumb`/`.skel.mot-skeleton`/
   `.empty-*`/`.retry`/`.diary-*` (T021) переиспускаются. */
.tl-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-filter .chip { cursor: pointer; }
.tl { position: relative; padding-left: 30px; margin-top: 4px; }
.tl::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2.5px; background: linear-gradient(180deg, rgba(127, 184, 242, .5), rgba(255, 179, 209, .5)); border-radius: var(--r-pill); }
.tl-day { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-11); color: var(--ink-muted); margin: 12px 0 6px -30px; padding-left: 30px; }
.tl-item { position: relative; margin-bottom: 10px; opacity: 0; transform: translateY(12px); animation: stickerIn .3s cubic-bezier(.2, .8, .25, 1) forwards; }
.tl-item::before { content: ""; position: absolute; left: -24px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--primary); box-shadow: 0 0 0 3px rgba(127, 184, 242, .18); z-index: 1; }
.tl-item.done::before { border-color: var(--ok); }
.tl-item.rate::before { border-color: var(--accent); }
.tl-ev { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl-ev .ev-emo { font-size: 18px; flex: 0 0 auto; }
.tl-ev .ev-t { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.tl-ev .ev-s { font-size: var(--fs-11); color: var(--ink-muted); }
.tl-time { font-size: var(--fs-11); color: var(--ink-muted); flex: 0 0 auto; }
/* Витринный «годовой дневник» (US2, D7): плашка над обложкой, текст WCAG AA на --plate. */
.diary-card { position: relative; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--glow); border: 1.5px solid var(--border-blue); }
.diary-card .cover { height: 88px; }
.diary-plate { background: var(--plate); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 14px; padding: 8px 11px; margin: -30px 10px 10px; position: relative; z-index: 2; box-shadow: 0 2px 6px rgba(30, 43, 58, 0.1); }
.diary-plate .dp-t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--plate-ink); }
.diary-plate .dp-s { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }

/* ====== S-15 · Статистика (этап 15): ключевые числа + доходимость ====== */
/* Канон cloud/S-15.html §SCREEN-SPECIFIC. Токены ведут обе темы; пиксельный скин style2 — в override
   ниже. `.section-h`/`.state-thumb`/`.skel.mot-skeleton`/`.empty-*`/`.err-body`/`.retry` переиспускаются.
   Разбивки (`.bar-row`/`.bubbles`/период `.seg`) — US2 (T016). */
/* Ключевые числа (≤7, work) — карточки на плашке, текст не на декоре (WCAG AA) */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.kpi { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); padding: 10px 8px; box-shadow: var(--glow-sm); text-align: center; }
.kpi .kv { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-23); color: var(--primary); line-height: 1; }
.kpi .kl { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 4px; }
.kpi.acc .kv { color: var(--accent); }
/* Доходимость — кольцо (conic по --pct) + текст на плашке */
.rate-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 14px; box-shadow: var(--glow-sm); }
.rate-ring { --pct: 0; width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; position: relative; background: conic-gradient(var(--primary) calc(var(--pct) * 1%), color-mix(in srgb, var(--primary) 16%, transparent) 0); }
.rate-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.rate-ring .rr-txt { position: relative; z-index: 1; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--on-primary); }
.rate-meta .rm-t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); color: var(--ink); }
.rate-meta .rm-s { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }
/* Контейнер разбивок (US2 наполняет bar-row/bubbles) */
.stat-block { background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 14px; box-shadow: var(--glow-sm); display: flex; flex-direction: column; gap: 10px; }
/* Плотные данные на широком: kpi-сетка auto-fill, внутр. перенос (не H-скролл страницы, FR-002) */
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
/* Пиксельный скин style2: карточки kpi/доходимости/разбивок — жёсткая граница + тень */
:root[data-style="style2"] .kpi,
:root[data-style="style2"] .rate-card,
:root[data-style="style2"] .stat-block { border: 2px solid var(--pix-border); box-shadow: var(--pix-shadow); }

/* ====== S-15 · Статистика разбивки/активность (этап 15, US2) ====== */
/* Канон cloud/S-15.html §SCREEN-SPECIFIC (bar-row / bubbles). Цвета через токены (`--primary`/`--accent`/
   `*-lite`), радиусы `--r-pill` — обе темы адаптируются без отдельного style2-override. `.seg`/`.stat-block`/
   `.section-h`/`.help` — уже есть. Бары/пузырьки декоративны: точные числа на плашке/в подписи рядом (M9). */
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-lbl { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--ink); width: 74px; flex: 0 0 74px; text-align: right; }
.bar-track { flex: 1; height: 18px; background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary-lite), var(--primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.bar-fill.acc { background: linear-gradient(90deg, var(--accent-lite), var(--accent)); }
.bar-val { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-11); color: var(--ink-muted); width: 30px; flex: 0 0 30px; }
/* активность по годам — округлые столбики */
.bubbles { display: flex; align-items: flex-end; gap: 7px; height: 108px; padding-top: 6px; }
.bub { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-end; }
.bub .col { width: 100%; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--primary-lite), var(--primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.bub:nth-child(even) .col { background: linear-gradient(180deg, var(--accent-lite), var(--accent)); }
.bub .bm { font-family: var(--f-display); font-weight: 600; font-size: 10px; color: var(--ink-muted); }

/* ====== S-04 · Главная / Dashboard (этап 16): витрина + продолжить + быстрые действия ====== */
/* Канон cloud/S-04.html §@@CSS. Цвета/радиусы через токены (обе темы); пиксельный скин style2 — override
   ниже. `.layer-tag`/`.toast`/`.hero-plate`/`.card`/`.cover`/`.progress`/`.title-plate`/`.state-thumb`/
   `.skel`/`.cta`/`.retry`/`.section-h` — уже есть. Экран — контент главного таба Shell. */
/* витрина-шапка */
.hero { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--border-blue); box-shadow: var(--glow); padding: 16px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.hero .hi { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--plate-ink); }
.hero .mini-stat { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.hero .hero-emoji { font-size: 40px; margin-left: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
/* мини-статлеты (US3 наполняет всего/завершено) */
.statlets { display: flex; gap: 8px; }
.statlet { flex: 1; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-control); box-shadow: var(--glow-sm); padding: 10px; text-align: center; }
.statlet b { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--primary); display: block; }
.statlet span { font-size: var(--fs-11); color: var(--ink-muted); }
/* «Продолжить» — горизонтальная лента карточек */
.cont-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.cont-row .card { flex: 0 0 158px; scroll-snap-align: start; margin: 0; }
.continue-card .cover { height: 80px; }
.plus-btn { margin-left: auto; min-width: 44px; min-height: 44px; border-radius: var(--r-pill); border: 1.5px solid var(--border-blue); background: linear-gradient(180deg, var(--accent-lite), var(--accent)); color: var(--on-accent); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-13); cursor: pointer; box-shadow: var(--glow-sm); padding: 0 12px; }
/* быстрые действия */
.qa-row { display: flex; gap: 8px; }
.qa { flex: 1; min-height: 44px; border: 1.5px solid var(--border-blue); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border-radius: var(--r-control); box-shadow: var(--glow-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-11); color: var(--on-primary); }
.qa .qa-ico { font-size: 18px; }
/* тост «+1» — над таб-баром (позиционируется в .screen Shell) */
.toast-host { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(10px); z-index: 20; }
.toast-host.show { opacity: 1; transform: none; }
/* tablet+: лента «Продолжить» → сетка (внутр. перенос, не H-скролл) */
@media (min-width: 768px) { .cont-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); overflow: visible; } .cont-row .card { flex: auto; } }
/* пиксельный скин style2: витрина/статлеты/быстрые действия — жёсткая граница + тень */
:root[data-style="style2"] .hero,
:root[data-style="style2"] .statlet,
:root[data-style="style2"] .qa { border: 2px solid var(--pix-border); box-shadow: var(--pix-shadow); }
/* S-16 (этап 22): постер/ключевые цифры/герой — пиксельная граница+тень в style2 (как прочие карточки). */
:root[data-style="style2"] .poster,
:root[data-style="style2"] .stat-tile,
:root[data-style="style2"] .hero-art { border: 2px solid var(--pix-border); box-shadow: var(--pix-shadow); }

/* ====== S-17 · Расширенный поиск (этап 17): пояснение совпадения ====== */
/* Канон cloud/S-17.html §@@CSS. `.search`/`.filt-row`/`.chip`/`.counter`/`.shelf.view-spisok`/`.accordion`/
   `.state-thumb`/`.skel.mot-skeleton`/`.empty-*`/`.err-body`/`.retry` — уже есть. Порт: пояснение «почему
   найден» с подсветкой совпадения (`<mark>`) через токен `--warn`; длинный текст — комфортная ширина. */
.res-why { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 6px; line-height: 1.5; max-width: var(--read-max); }
.res-why mark { background: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--ink); border-radius: 5px; padding: 0 3px; font-weight: 700; }

/* ====== S-18 · Публичный профиль (этап 18): публичные подборки (coll-mini) ====== */
/* Канон cloud/S-18.html §@@CSS. Цвета через токены (обе темы). `.prof-head`/`.avatar`/`.prof-plate`/
   `.agg`/`.a-tile`/`.prof-actions`/`.cvN`/`.accordion`/`.chip`/`.state-thumb`/`.skel` — уже есть. */
.coll-row { display: flex; flex-direction: column; gap: 10px; }
.coll-mini { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border-blue); border-radius: var(--r-card); padding: 8px; box-shadow: var(--glow-sm); opacity: 0; transform: translateY(16px); animation: stickerIn 0.32s cubic-bezier(0.2, 0.8, 0.25, 1) forwards; }
.coll-mini .cm-cover { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.coll-mini .cm-body { flex: 1; min-width: 0; }
.coll-mini .cm-body .t { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-15); color: var(--ink); }
.coll-mini .cm-body .s { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
/* tablet+: подборки → сетка */
@media (min-width: 768px) { .coll-row { display: grid; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .coll-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
/* пиксельный скин style2: карточка подборки — жёсткая граница + тень */
:root[data-style="style2"] .coll-mini { border: 2px solid var(--pix-border); box-shadow: var(--pix-shadow); }