/* FitAI — оформление приложения. Цвета, шрифты и формы — из макета дизайнера (docs/design.md, 16.10.2026).
   Схема: светло-серая страница (--bg), на ней тёмные карточки (--card) с белым текстом (--text);
   текст прямо на странице — тёмный (--ink). Лайм (--accent) — кнопки и акценты на тёмном. */
:root {
  --bg: #E6E6E6; --card: #1F292E; --line: #394246; --panel: #1F292E;
  --text: #FFFFFF; --muted: #949B9E; --faint: #949B9E;
  --ink: #1F292E; --ink-muted: #61686B;
  --accent: #AAE500; --accent-2: #84B200; --accent-text: #1F292E; --err: #FF2929;
  --nav-h: 64px; --top-h: 64px;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); }
body { line-height: 1.45; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
a { color: var(--accent); }

/* --- общий каркас --- */
.app { max-width: 640px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.top { height: var(--top-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.top h1 { flex: 1; margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex: none; padding: 0; }
.round.solid { background: var(--card); color: var(--accent); border: 0; font-weight: 600; font-size: 15px; }
.dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }

nav.tabs { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line); background: var(--panel); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
nav.tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  color: var(--faint); text-decoration: none; font-size: 11px; }
nav.tabs a.active { color: var(--accent); font-weight: 600; }

/* --- карточки, формы, кнопки --- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.muted { color: var(--muted); font-size: 14px; }
.btn { height: 50px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 16px; cursor: pointer; width: 100%; padding: 0 16px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.btn:disabled { opacity: .6; cursor: default; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; font-size: 14px; }
label.f { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.in { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 14px; font-size: 16px; }
textarea.in { height: auto; min-height: 72px; padding: 10px 14px; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.msg { margin-top: 10px; font-size: 14px; min-height: 1em; }
.msg.err { color: var(--err); } .msg.ok { color: var(--accent); }
.code-in { font-size: 26px; letter-spacing: 10px; text-align: center; }

/* --- чат --- */
.dialogs { display: flex; gap: 8px; align-items: center; padding: 0 16px 8px; }
.dialogs select { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); padding: 0 10px; }
.dialogs button { height: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.log { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  overflow-wrap: anywhere; font-size: 15px; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-color: transparent; white-space: pre-wrap; }
.bubble.err { color: var(--err); }
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin: 0; }
.bubble ul, .bubble ol { margin: 0 0 8px; padding-left: 20px; }
.sources { margin-top: 8px; font-size: 12px; color: var(--faint); }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.welcome { display: flex; flex-direction: column; gap: 12px; }
.video { border-radius: 16px; overflow: hidden; background: #000; }
.video video { width: 100%; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 20px; padding: 9px 14px; cursor: pointer; font-size: 14px; text-align: left; }
.composer { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 8px 16px 10px; }
.composer textarea { flex: 1; min-height: 48px; max-height: 160px; border-radius: 24px; border: 1px solid var(--line);
  background: var(--card); padding: 12px 18px; resize: none; font-size: 16px; line-height: 22px;
  overflow-y: hidden; scrollbar-width: thin; }
.send { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.send:disabled { opacity: .5; }
.foot { padding: 0 18px 6px; font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 8px; }

/* --- выезжающая панель (профиль, уведомления) --- */
.sheet { position: fixed; inset: 0; background: var(--bg); z-index: 10; display: flex; flex-direction: column; }
.sheet .inner { max-width: 640px; width: 100%; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.auth { max-width: 460px; margin: 0 auto; padding: 32px 16px; width: 100%; }
.logo { font-size: 28px; font-weight: 800; margin: 0 0 20px; }
.logo span { color: var(--accent); }
@media (max-width: 380px) { .row2 { grid-template-columns: 1fr; } }

/* --- тренировки --- */
.program-card { margin: 0 16px 10px; padding: 12px 14px; }
.program-card .btn { height: 44px; font-size: 15px; }
.pc-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.pc-title { font-size: 17px; font-weight: 700; margin: 2px 0; }
.del-set { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 0 0 4px; font-size: 15px; }
.save-program { margin-top: 10px; height: 44px; border-radius: 12px; border: 0; background: var(--accent);
  color: var(--accent-text); font-weight: 700; padding: 0 16px; cursor: pointer; }
.note-ok { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--line); border-left: 3px solid var(--accent); color: var(--text); font-size: 14px; }
.ex { display: flex; flex-direction: column; gap: 10px; }
.ex-name { font-size: 17px; font-weight: 600; }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist th, .hist td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.hist th { color: var(--faint); font-weight: 500; }
.hist td:first-child, .hist th:first-child { text-align: left; color: var(--faint); }
.hist .now { color: var(--accent); font-weight: 600; }
.today-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.set-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--line); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.set-chip button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }
.ex-log { display: flex; gap: 8px; }
.ex-log input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 12px; font-size: 16px; }
.ex-log button { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; padding: 0 14px; cursor: pointer; }
.timer { margin: 0 16px 8px; }
.timer-modes, .timer-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.timer-presets { margin-top: 10px; }
.chip.active { border-color: var(--accent); color: var(--accent); }
.timer-display { font-size: 48px; font-weight: 700; text-align: center; margin-top: 10px; font-variant-numeric: tabular-nums; }
.timer-display.done { color: var(--accent); }
.prog-workout { margin-bottom: 12px; }
.prog-workout h3 { margin: 0 0 8px; font-size: 16px; }
.prog-workout ol { margin: 0; padding-left: 20px; }
.prog-workout li { margin-bottom: 6px; }
.next-tag { font-size: 12px; color: var(--accent); font-weight: 600; margin-left: 6px; }
#ws-which { font-weight: 600; }

/* --- мои заметки --- */
.menu-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer; color: var(--text); }
.journal { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.j-day { font-size: 13px; font-weight: 700; color: var(--faint); margin: 14px 0 0; text-transform: uppercase; letter-spacing: .5px; }
.j-note { padding: 12px 14px; }
.j-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.j-meta { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--faint); }
.j-meta .link { font-size: 13px; }
.j-note textarea { margin-top: 2px; }

/* --- дневник питания: трекер КБЖУ --- */
.tracker { margin-top: 12px; cursor: pointer; }
.tr-top { display: flex; align-items: center; gap: 16px; }
.tr-ring { position: relative; width: 116px; height: 116px; flex: none; }
.tr-ring svg { transform: rotate(-90deg); }
.tr-ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr-ring .c b { font-size: 22px; } .tr-ring .c span { font-size: 11px; text-align: center; line-height: 13px; max-width: 76px; color: var(--muted); }
.tr-nums { display: grid; grid-template-columns: auto auto; gap: 4px 12px; font-size: 14px; }
.tr-nums span { color: var(--muted); } .tr-nums b.over { color: var(--err); }
.tr-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.tr-bar .t { font-size: 13px; color: var(--muted); } .tr-bar .v { font-size: 13px; margin-top: 2px; }
.tr-bar .track { height: 8px; border-radius: 4px; background: var(--line); margin-top: 4px; overflow: hidden; }
.tr-bar .fill { height: 100%; border-radius: 4px; background: var(--accent); }
.tr-bar .fill.over { background: var(--err); }
.dy-item { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 15px; }
.dy-item .nm { flex: 1; min-width: 0; }
.dy-item input { width: 74px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  padding: 0 8px; font-size: 15px; color: var(--text); }
.dy-item .kc { width: 70px; text-align: right; color: var(--muted); font-size: 14px; }
.nc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nc-today { margin-top: 8px; cursor: pointer; font-size: 14px; }
.nc-today .track { height: 6px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.nc-today .fill { height: 100%; background: var(--accent); } .nc-today .fill.over { background: var(--err); }
.dy-head { display: flex; gap: 8px; font-size: 12px; color: var(--faint); margin-top: 6px; }
.dy-head .nm { flex: 1; } .dy-head .g { width: 96px; } .dy-head .k100 { width: 92px; } .dy-head .kc { width: 70px; text-align: right; }
.dy-head .x { width: 19px; }
.dy-item .k100 { width: 92px; display: flex; align-items: center; gap: 4px; }
.dy-item .k100 input { width: 66px; } .dy-item .k100 input.custom { border-color: var(--accent); }
.dy-item .g { width: 96px; display: flex; align-items: center; gap: 4px; }
@media (max-width: 480px) { .dy-item { flex-wrap: wrap; } .dy-item .nm { flex-basis: 100%; } .dy-head { display: none; } }
#delete-dialog-top.armed { border-color: var(--err); color: var(--err); }

/* подбор программы */
.pick-form .check { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: 15px; }
.pick-form .check input { width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; font-size: 14px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.pk-week { margin: 16px 2px 10px; }
.prog-workout.cardio h3 { color: var(--muted); }
.pk-save { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
/* кардио-день */
.cardio-text { margin: 0 0 12px; line-height: 1.45; }
.cardio-log { flex-wrap: wrap; }
.cardio-log select { flex: 1 1 100%; height: 44px; }
.cardio-log .cardio-other { flex: 1 1 100%; }
.cardio-list { list-style: none; padding: 0; margin: 12px 0 0; }
.cardio-list li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.cardio-hist { margin-top: 10px; }
.cardio-hist { margin-top: 12px; }
.hist.cardio-hist td:last-child, .hist.cardio-hist th:last-child { text-align: left; }
a.round { color: inherit; text-decoration: none; }
.round.active { border-color: var(--accent); color: var(--accent); }
/* редактор программы и каталог упражнений */
.pc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.edit-foot { padding: 10px 16px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.edit-confirm { margin-bottom: 10px; }
.ed-ex { border-bottom: 1px solid var(--line); padding: 10px 0; }
.ed-ex:last-of-type { border-bottom: 0; }
.ed-ex.ss { border-left: 3px solid var(--accent); padding-left: 10px; }
.ss-tag { font-size: 12px; color: var(--accent); font-weight: 600; }
.ed-name { font-weight: 600; background: none; border: 0; color: inherit; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.ed-nums { display: flex; gap: 8px; margin: 8px 0; }
.ed-nums label { flex: 1; font-size: 12px; color: var(--faint); }
.ed-nums input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); padding: 0 10px; font-size: 16px; color: inherit; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-btns button { height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; padding: 0 10px; cursor: pointer; font-size: 13px; }
.ed-btns button.danger { color: #ff7a7a; }
.ed-add { margin-top: 10px; width: 100%; }
.pk-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.pk-row { display: flex; gap: 10px; align-items: center; }
.pk-row .grow { flex: 1; min-width: 0; }
.pk-row button.pick { height: 36px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); padding: 0 12px; font-weight: 600; cursor: pointer; }
.author-tag { font-size: 11px; color: var(--accent); font-weight: 600; display: block; }
.howto { margin-top: 8px; font-size: 14px; line-height: 1.45; }
.howto video { width: 100%; border-radius: 12px; margin: 6px 0; background: #000; }
.howto ol, .howto ul { margin: 6px 0; padding-left: 20px; }
.ed-btns button.danger.armed { background: #ff7a7a; color: #1a0d0d; border-color: #ff7a7a; }
.my-ex { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.del-set.armed, .link.armed { color: var(--err); font-weight: 600; }
.ed-title { display: block; font-size: 13px; color: var(--muted); }
.ed-title .in { margin-top: 4px; font-weight: 600; }
.link.danger-link { color: #ff7a7a; margin-top: 10px; }
/* карточка программы: четыре действия плитками */
.pc-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pc-tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 58px; padding: 8px 4px; border-radius: 12px; border: 0; background: var(--line);
  color: var(--text); font-size: 12px; line-height: 1.15; text-align: center; cursor: pointer; }
.pc-tools button svg { color: var(--accent); }
.pc-tools button:active { background: #2E373C; }
/* архив программ */
.ar-item { width: 100%; text-align: left; display: block; cursor: pointer; color: inherit; margin-bottom: 10px; }
.ar-item .t { font-weight: 700; font-size: 16px; }
.ar-item .m { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ar-last { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.ar-last b { color: var(--accent); font-weight: 600; }
#archive-sheet .top { gap: 10px; }
#archive-sheet .top h1 { flex: 1; }
/* «Поделиться» */
.share-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; border: 0;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px; cursor: pointer; margin-left: auto; margin-right: 8px; white-space: nowrap; }
#program-sheet .top h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-intro { margin-bottom: 12px; }
.share-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 40; width: min(92%, 420px); text-align: center;
  background: var(--accent); color: var(--accent-text); padding: 12px 16px; border-radius: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.pk-hint { font-size: 13px; margin-bottom: 8px; text-align: center; }
.ed-new { margin-top: 4px; }
.ed-new .btn { font-size: 14px; }
.cardio-plan { margin: 6px 0 12px; padding-left: 20px; }
.cardio-plan li { margin-bottom: 4px; }
.btn.armed-save { height: auto; min-height: 50px; padding: 8px 12px; line-height: 1.3; }
/* цвет подходов */
.c-green { background: rgba(70, 190, 100, .28) !important; }
.c-yellow { background: rgba(240, 200, 40, .30) !important; }
.c-red { background: rgba(240, 70, 70, .32) !important; }
.c-blue { background: rgba(70, 140, 250, .30) !important; }
.hist td.c-green, .hist td.c-yellow, .hist td.c-red, .hist td.c-blue, li.c-green, li.c-yellow, li.c-red, li.c-blue { border-radius: 8px; }
.tap { cursor: pointer; }
.color-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.color-panel .swatches { display: flex; gap: 10px; }
.color-panel .sw { width: 42px; height: 42px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; color: var(--muted); font-size: 16px; }
.color-panel .sw.c-green { background: #46be64 !important; } .color-panel .sw.c-yellow { background: #f0c828 !important; }
.color-panel .sw.c-red { background: #f04646 !important; } .color-panel .sw.c-blue { background: #468cfa !important; }
.color-panel .sw.none { background: transparent; border-color: var(--line); }
.color-panel .sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.color-panel .scope { display: flex; flex-direction: column; gap: 6px; }
.color-panel .scope .btn { height: 42px; font-size: 14px; }
.hist td.c-green, .hist td.c-yellow, .hist td.c-red, .hist td.c-blue { color: var(--text); }
.ar-set { padding: 1px 5px; border-radius: 6px; color: var(--text) !important; }
.color-hint { font-size: 13px; line-height: 1.4; color: var(--muted); }
.set-menu { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; height: 22px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.set-menu:active { background: rgba(255,255,255,.06); }
.col-pill { padding: 1px 6px; border-radius: 6px; }
.panel-sep { border-top: 1px solid var(--line); margin: 2px 0; }
/* вкладка «Видео» */
#video-scroll { padding: 12px 16px 24px; }
.vf-title { font-size: 12px; color: var(--muted); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.vf .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vf .link { margin-top: 10px; }
.vf-count { margin: 14px 0 10px; font-size: 13px; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vcard { display: block; width: 100%; text-align: left; background: var(--card); border: 0; border-radius: 20px; padding: 0 0 12px; overflow: hidden; color: inherit; cursor: pointer; }
.vpic { position: relative; aspect-ratio: 16 / 9; background: var(--line); }
.vpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpic.noposter { background: linear-gradient(135deg, #394246, #1F292E); }
.vdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.vtitle { font-weight: 600; font-size: 15px; line-height: 1.3; margin: 10px 12px 4px; }
.vmeta { font-size: 12px; color: var(--muted); margin: 0 12px; }
#video-player { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; }
/* видео: ровные карточки — заголовок максимум 2 строки, метки 1 строка */
.vcard { display: flex; flex-direction: column; }
.vtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.vmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfav { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.7); color: var(--accent); font-size: 14px; padding: 2px 7px; border-radius: 8px; }
.vseg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 6px; }
.vseg button { flex: 1; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.vseg button.on { background: var(--accent); color: var(--accent-text); }
#video-fav.on { border-color: var(--accent); color: var(--accent); }

/* «Знания» — ответы Александра */
#faq-scroll { display: flex; flex-direction: column; gap: 10px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#faq-scroll > * { flex-shrink: 0; }
#faq-search { height: 46px; color: var(--text); }
.faq-chips .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.faq-sec { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin: 14px 2px 2px; }
.faq-item { padding: 0; }
.faq-item summary { padding: 14px 16px; cursor: pointer; font-weight: 600; line-height: 1.35; list-style: none; position: relative; padding-right: 40px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 12px; font-size: 20px; color: var(--muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-a { padding: 0 16px 14px; white-space: pre-line; line-height: 1.5; }
.faq-admin { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.faq-edit .faq-admin { padding: 8px 0 0; }
.faq-admin button { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); padding: 0 12px; cursor: pointer; }
.faq-admin button.armed { border-color: var(--err); color: var(--err); }
.faq-admin .faq-save { background: var(--accent); color: var(--accent-text); border: 0; font-weight: 700; }
.faq-edit textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 10px 12px; font-size: 15px; line-height: 1.45; margin: 4px 0 10px; resize: vertical; font-family: inherit; }
.faq-add { height: 42px; }
.faq-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* чат: готовый ответ Александра */
.faq-head { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.faq-more { display: block; margin-top: 10px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); padding: 0 12px; cursor: pointer; font-size: 14px; }

/* --- фото прогресса (профиль) --- */
.ph-card { padding: 14px; }
.ph-title { font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.ph-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.ph-col { min-width: 0; }
.ph-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tile.empty { border-style: dashed; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; flex-direction: column; gap: 6px; }
.ph-tile .ph-date { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  padding: 2px 7px; border-radius: 8px; }
.ph-edit { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 10px; border: 0;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ph-cap { text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
.ph-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ph-strip::-webkit-scrollbar { display: none; }
.ph-strip .ph-tile { flex: 0 0 calc((100% - 8px) / 2); scroll-snap-align: start; }
.ph-strip .ph-tile.empty { flex-basis: 100%; aspect-ratio: auto; height: 100%; min-height: 120px; }
.ph-right { display: flex; flex-direction: column; }
.ph-right .ph-strip { flex: 1; }
.ph-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; min-height: 6px; }
.ph-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); }
.ph-dots span.on { background: var(--accent); }
.ph-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 12px; align-items: center; }
.ph-nav { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.ph-nav .round { width: 40px; height: 40px; }
.ph-btns .btn { height: 44px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; white-space: nowrap; }
.ph-btns .btn svg { flex: none; }
.ph-btns .round:disabled { opacity: .35; cursor: default; }
.ph-layer { z-index: 20; }
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-grid .ph-tile .ph-date.before { background: var(--accent); color: var(--accent-text); }
.ph-viewer { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; flex-direction: column; }
.ph-v-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; color: #fff; font-weight: 600; }
.ph-v-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ph-v-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-v-btns { display: flex; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }
.ph-v-btns .btn { height: 44px; flex: 1; }
.ph-v-btns .round:disabled { opacity: .35; }
.ph-del.armed { border-color: var(--err); color: var(--err); }
@media (max-width: 440px) { .ph-add svg { display: none; } }
@media (max-width: 350px) { .ph-btns .btn svg { display: none; } }
.ph-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.ph-share .muted { display: block; font-size: 13px; margin-top: 2px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 15px; margin: 0;
  background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px;
  background: #fff; transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); background: var(--accent-text); }
.switch:disabled { opacity: .6; }

/* ===================================================================================
   НОВЫЙ ДИЗАЙН (макет дизайнера, docs/design.md). Пока только страница-пример — профиль
   (класс .dz на панели). После одобрения владельца переносим на всё приложение.
   =================================================================================== */
@font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap; }
/* Заголовки — mr_NorwesterG (Norwester с кириллицей, лицензия SIL OFL). Начертание одно — жирное по рисунку. */
@font-face { font-family: "DZ Head"; src: url("/fonts/mr_NorwesterG.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap; }

.dz {
  --dz-lime: #AAE500; --dz-lime-2: #84B200; --dz-black: #1F292E; --dz-w100: #FFFFFF; --dz-w90: #E6E6E6;
  --dz-w60: #949B9E; --dz-w40: #61686B; --dz-w25: #394246; --dz-danger: #FF2929;
  --dz-head: "DZ Head", "Arial Narrow", sans-serif;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--dz-w90); color: var(--dz-black);
}
.dz .dz-h { font-family: var(--dz-head); font-weight: 400; text-transform: uppercase; letter-spacing: .2px; line-height: 1.1; }
/* шапка: лаймовый блок со скруглёнными нижними углами */
.dz .top { background: var(--dz-lime); color: var(--dz-black); border-radius: 0 0 24px 24px; height: auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px 18px; }
.dz .top h1 { font-family: var(--dz-head); font-weight: 400; font-size: 32px; line-height: 1.1; text-transform: uppercase; }
.dz .top .round { background: var(--dz-black); border: 0; color: var(--dz-w100); }
.dz .scroll { padding: 14px 16px 24px; }
.dz .muted { color: var(--dz-w40); }
.dz > .inner > .scroll > p.muted { color: var(--dz-w40); font-size: 14px; }
/* карточки: тёмные, скругление 20 */
.dz .card { background: var(--dz-black); border: 0; border-radius: 20px; color: var(--dz-w100); padding: 16px; }
.dz .card .muted { color: var(--dz-w60); }
/* поля внутри карточек */
.dz label.f { color: var(--dz-w60); font-weight: 500; font-size: 12px; margin: 12px 0 6px; }
.dz .in { background: var(--dz-w25); border: 0; border-radius: 12px; color: var(--dz-w100); height: 46px; font-size: 15px; }
.dz .in::placeholder { color: var(--dz-w60); }
.dz .in:focus { outline: 2px solid var(--dz-lime); outline-offset: 0; }
.dz select.in { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: var(--dz-w25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949B9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* кнопки: основная — лайм, второстепенная — тёмная */
.dz .btn { border-radius: 12px; height: 46px; background: var(--dz-lime); color: var(--dz-black); font-weight: 600; }
.dz .btn:active { background: var(--dz-lime-2); }
.dz .btn.ghost { background: var(--dz-w25); color: var(--dz-w100); border: 0; font-weight: 500; }
.dz > .inner > .scroll > .btn.ghost { background: var(--dz-black); }
.dz .card .round { background: var(--dz-w25); border: 0; color: var(--dz-w100); border-radius: 12px; }
.dz .msg.ok { color: var(--dz-lime); } .dz .msg.err { color: #FF6B6B; }
.dz > .inner > .scroll > p a { color: var(--dz-w40) !important; }
/* фото прогресса */
.dz .ph-title { font-family: var(--dz-head); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: .2px; }
.dz .ph-tile { background: var(--dz-w25); border: 0; border-radius: 14px; }
.dz .ph-tile.empty { border: 1px dashed var(--dz-w40); background: transparent; color: var(--dz-w60); }
.dz .ph-cap { color: var(--dz-w100); font-size: 13px; }
.dz .ph-dots span { background: var(--dz-w40); }
.dz .ph-dots span.on { background: var(--dz-lime); }
.dz .ph-btns .btn.ghost { background: var(--dz-lime); color: var(--dz-black); font-weight: 600; }
.dz .ph-nav .round { width: 40px; height: 44px; }
.dz .ph-share { border-top-color: var(--dz-w25); }
.dz .switch { background: var(--dz-w40); }
.dz .switch:checked { background: var(--dz-lime); }
.dz .switch:checked::after { background: var(--dz-black); }
/* «Мои заметки» — строка-карточка с заголовком */
.dz .menu-row b { font-family: var(--dz-head); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .2px; }
.dz .menu-row svg { color: var(--dz-lime); }

/* ===================================================================================
   НОВЫЙ ДИЗАЙН — ВСЁ ПРИЛОЖЕНИЕ (одобрено владельцем 16.10.2026).
   Тёмные контейнеры: .card, .bubble, нижнее меню, просмотр фото. Всё, что лежит прямо на
   светлой странице, — тёмным текстом (--ink / --ink-muted).
   =================================================================================== */
a { color: var(--ink); }
.card a, .bubble a { color: var(--accent); }
.card, .bubble { color: var(--text); }
.muted, .foot, .vf-title, .j-day, .j-meta, .color-hint { color: var(--ink-muted); }
.card .muted, .bubble .muted, .card .j-meta, .card .color-hint, .card .vf-title { color: var(--muted); }
.link { color: var(--ink-muted); }
.card .link, .bubble .link { color: var(--muted); }
.dz label.f { color: var(--ink-muted); }
.dz .card label.f { color: var(--muted); }
.dz .top h1 { font-size: 28px; }
.round { background: var(--card); border: 0; color: var(--text); }
.round.active { color: var(--accent); }
/* нижнее меню */
nav.tabs { background: var(--card); border-top: 0; border-radius: 20px 20px 0 0; }
nav.tabs a { color: var(--muted); }
nav.tabs a.active { color: var(--accent); }
/* чат */
.bubble { background: var(--card); border: 0; border-radius: 18px; }
.bubble.err { color: #FF6B6B; }
.composer textarea { background: var(--card); border: 0; color: var(--text); }
.composer textarea::placeholder { color: var(--muted); }
.dialogs select, .dialogs button { background: var(--card); border: 0; color: var(--text); }
/* чипы: тёмные на странице, на тёмном — серые; выбранный — лайм */
.chip { background: var(--card); border: 0; color: var(--text); }
.card .chip, .bubble .chip { background: var(--line); }
.chip.on, .chip.active, .faq-chips .chip.on { background: var(--accent); color: var(--accent-text); border: 0; }
/* поля ввода внутри карточек и списков */
.ex-log input, .dy-item input, .ed-nums input, .faq-edit textarea { background: var(--line); border: 0; color: var(--text); }
.ex-log button, .ed-btns button, .faq-admin button, .faq-more, .set-menu { border-color: var(--line); }
.dy-item .k100 input.custom { outline: 1px solid var(--accent); }
/* тренировки */
.program-card { margin: 0 16px 10px; }
.color-panel .sw.on { border-color: var(--accent); }
/* видео */
.vcard { color: var(--text); }
.vmeta { color: var(--muted); }
.vseg { background: var(--card); border: 0; }
/* «Знания» */
.faq-sec { color: var(--ink); font-family: var(--dz-head); font-weight: 400; font-size: 20px; letter-spacing: .2px; margin: 16px 2px 4px; }
#faq-search { color: var(--text); }
/* заголовки разделов и листов, если они набраны как h2/h3 внутри страницы */
.prog-workout h3 { font-weight: 700; }
/* кнопки в две колонки и в карточке программы — помещаются в одну строку */
.row2 .btn, .program-card .btn, .ws-banner .btn { font-size: 14px; padding: 0 8px; line-height: 1.15; }
/* длинные названия в шапке листов (тренировка, программа) — мельче */
/* в листах (открываются поверх) названия бывают длинными — 22 px; профиль — крупнее */
.dz .sheet .top h1, #workout-title { font-size: 22px !important; }
.dz #profile-sheet .top h1 { font-size: 28px !important; }
/* вход: логотип заголовочным шрифтом, «AI» — тёмный лайм (читается на светлом) */
.logo { font-family: var(--dz-head); font-weight: 400; font-size: 34px; letter-spacing: .5px; }
.logo span { color: var(--accent-2); }
/* отступ между лаймовой шапкой и тем, что под ней; карточки «Знаний» — раздельно */
.dz .top { margin-bottom: 12px; }
.dz .sheet .top + .scroll, .dz .view > .scroll:first-child { padding-top: 2px; }
#faq-list { display: flex; flex-direction: column; gap: 10px; }
.dz .faq-item { padding: 0; }
/* архив рабочих весов: лучшие результаты плитками */
.wr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.wr { background: var(--line); border-radius: 12px; padding: 8px 10px; }
.wr b { display: block; font-size: 18px; color: var(--accent); }
.wr span { display: block; font-size: 13px; color: var(--text); white-space: nowrap; }
.wr i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
#archive-body .vseg { margin-bottom: 12px; }
#archive-body .ar-item .ar-last { margin-top: 6px; }
/* разминка вверху тренировки */
.dz .warm { padding: 0; }
.warm-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; }
.warm-head b { display: block; font-family: var(--dz-head); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .2px; }
.warm-head .muted { display: block; font-size: 13px; margin-top: 2px; }
.warm-arrow { color: var(--accent); font-size: 18px; }
.warm-body { padding: 0 16px 16px; }
.warm-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.warm-video { background: none; border: 0; padding: 0; color: var(--text); text-align: left; cursor: pointer; }
.warm-video .vpic { border-radius: 12px; overflow: hidden; }
.warm-vtitle { font-size: 13px; margin-top: 6px; line-height: 1.3; }
.warm-text { white-space: pre-line; line-height: 1.5; font-size: 14px; margin-top: 12px; }
/* «?» у подходов и подсказка */
.plan-q { display: flex; align-items: center; gap: 8px; }
.q-btn { width: 22px; height: 22px; border-radius: 11px; border: 0; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 13px; line-height: 22px; padding: 0; cursor: pointer; flex: none; }
.sr-hint { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--line); border-left: 3px solid var(--accent);
  font-size: 14px; line-height: 1.45; }
.sr-hint .link { margin-top: 8px; }
/* таймер мягко светится, пока клиент его ни разу не открыл */
#timer-toggle.glow { animation: dz-glow 1.8s ease-in-out infinite; }
@keyframes dz-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(170, 229, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(170, 229, 0, .55), 0 0 16px 4px rgba(170, 229, 0, .45); } }
@media (prefers-reduced-motion: reduce) { #timer-toggle.glow { animation: none; box-shadow: 0 0 0 3px var(--accent); } }

/* ---------- тарифы и документы ---------- */
.prem-btn { height: 44px; padding: 0 14px; border-radius: 22px; border: 0; background: var(--card); color: var(--accent);
  font: 600 14px "Inter Tight", system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.plan-card { margin-bottom: 12px; }
.plan-card.prem { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan-title { font-family: var(--dz-head); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.plan-price { color: var(--accent); font-weight: 600; font-size: 18px; margin: 2px 0 8px; }
.plan-card ul { margin: 0 0 14px; padding-left: 20px; } .plan-card li { margin: 4px 0; }
.plan-card li.no { color: var(--muted); text-decoration: line-through; }
.plan-card .btn { width: 100%; }
.legal-links { text-align: center; margin-top: 18px; font-size: 13px; line-height: 1.9; }
.legal-doc { color: var(--ink); font-size: 14px; line-height: 1.55; }
.legal-doc > h1 { display: none; }
.legal-doc h2 { font-size: 16px; margin: 18px 0 6px; }
.legal-doc .ed { color: var(--ink-muted); margin-top: 0; }
.dz #doc-title { font-size: 20px; white-space: normal; overflow: visible; text-overflow: clip; }
.prem-btn { display: inline-flex; align-items: center; gap: 6px; }
/* узкий экран: только значок короны, чтобы не обрезать название раздела */
@media (max-width: 420px) { .prem-btn { width: 44px; padding: 0; justify-content: center; } .prem-btn span { display: none; } }
@media (max-width: 380px) { .dz #app > .top { gap: 6px; } .dz #app > .top h1 { font-size: 24px; } }

/* ---------- гостевой режим ---------- */
.auth-reason { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--line); color: var(--text); font-size: 14px; }
.guest-card { margin-bottom: 12px; }
.guest-card .guest-title { font-family: var(--dz-head); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.guest-card p { margin: 6px 0 12px; }
.guest-card .btn { width: 100%; }

/* ---------- первый вход: заставка и анкета ---------- */
.wl { position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink); overflow-y: auto;
  font-family: "Inter Tight", system-ui, sans-serif; }
.wl section { min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; }
/* заставка — тёмная, с лаймовым акцентом */
.wl-splash { background: var(--card); color: #fff; max-width: none !important; }
.wl-splash > * { max-width: 520px; width: 100%; margin-left: auto; margin-right: auto; }
.wl-logo { font: 400 30px "DZ Head", "Arial Narrow", sans-serif; letter-spacing: .5px; }
.wl-logo span { color: var(--accent); }
.wl-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.wl-kicker { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.wl-h { font: 400 46px/1.02 "DZ Head", "Arial Narrow", sans-serif; text-transform: uppercase; margin: 12px 0 22px; }
.wl-h span { color: var(--accent); display: block; }
.wl-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wl-points li { position: relative; padding-left: 30px; color: #DDE1E2; font-size: 16px; line-height: 1.35; }
.wl-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F292E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.wl-foot { display: grid; gap: 14px; }
.wl .btn.wl-go { height: 56px; border-radius: 16px; font-size: 17px; font-weight: 700; width: 100%;
  background: var(--accent); color: var(--card); border: 0; }
.wl .btn.wl-go:active { background: var(--accent-2); }
.wl-login { color: #B9BFC1; font-size: 15px; justify-self: center; }
.wl-login b { color: #fff; }
/* анкета — светлая, вопрос крупно */
.wl-bar { display: flex; align-items: center; gap: 14px; }
.wl-bar .round { flex: none; background: var(--card); color: #fff; border: 0; }
.wl-progress { flex: 1; display: flex; gap: 6px; }
.wl-progress i { flex: 1; height: 6px; border-radius: 3px; background: #C9CDCE; transition: background .25s; }
.wl-progress i.on { background: var(--accent-2); }
.wl-steps { flex: 1; padding-top: 34px; }
.wl-step { display: none; animation: wlIn .28s ease-out; }
.wl-step.on { display: block; }
@keyframes wlIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.wl-q { font: 400 36px/1.05 "DZ Head", "Arial Narrow", sans-serif; text-transform: uppercase; margin: 0; color: var(--ink); }
.wl-sub { color: var(--ink-muted); font-size: 15px; margin: 10px 0 26px; line-height: 1.4; }
.wl-opts { display: grid; gap: 12px; }
.wl-opts.wl-row { grid-template-columns: 1fr 1fr; }
.wl-opt { text-align: left; background: var(--card); color: #fff; border: 2px solid transparent; border-radius: 18px;
  padding: 18px 18px; font: 600 18px "Inter Tight", system-ui, sans-serif; cursor: pointer; transition: transform .1s, border-color .15s; }
.wl-opt small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 4px; }
.wl-opt:active { transform: scale(.98); }
.wl-opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wl-opt.sel::after { content: "✓"; float: right; color: var(--accent); }
.wl-row .wl-opt { text-align: center; }
.wl-row .wl-opt.sel::after { float: none; margin-left: 8px; }
.wl-num { display: flex; align-items: baseline; gap: 10px; background: var(--card); border-radius: 20px; padding: 14px 22px; }
.wl-num input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff;
  font: 400 56px "DZ Head", "Arial Narrow", sans-serif; letter-spacing: 1px; }
.wl-num input::placeholder { color: #4E585C; }
.wl-num span { color: var(--muted); font-size: 20px; font-weight: 600; }
.wl .in.wl-lim { margin-top: 12px; min-height: 96px; background: var(--card); color: #fff; border: 0; border-radius: 16px; }
.wl-consent { margin-top: 22px; font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.wl-consent a { color: var(--ink); }
.wl-next { padding-top: 16px; }
.wl-next .msg { min-height: 0; margin-bottom: 8px; }
/* «Подробности» в карточке питания — заметная, но второстепенная */
.nc-details { display: block; width: 100%; margin-top: 10px; height: 40px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px dashed var(--muted); color: var(--text); font: 500 14px "Inter Tight", system-ui, sans-serif; }
.nc-details[aria-expanded="true"] { border-style: solid; border-color: var(--accent); color: var(--accent); }
/* Б/Ж/У продукта в дневнике — строка под продуктом */
.dy-item .dy-mx { flex-basis: 100%; order: 10; margin-top: -2px; }
.dy-mx-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--muted); font: 13px "Inter Tight", system-ui, sans-serif;
  cursor: pointer; }
.dy-mx-btn span { color: var(--accent); font-size: 14px; }
.dy-mx-btn:active { border-color: var(--accent); }
.dy-mx-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.dy-mx-form label { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.dy-mx-form input { width: 64px !important; }
.dy-mx-form .btn { height: 36px; padding: 0 14px; width: auto; }
.dy-mx-note { flex-basis: 100%; font-size: 12px; }
.dy-item { flex-wrap: wrap; }
/* «+ Добавить продукт» в приём */
.dy-addto { margin: 8px 0 4px; }
.dy-add-btn { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--accent); background: transparent;
  color: var(--accent); font: 500 14px "Inter Tight", system-ui, sans-serif; cursor: pointer; }
.dy-add-form textarea { height: auto; padding: 10px 14px; }
.wl-legal { text-align: center; font-size: 13px; color: #8E979A; }
.wl-legal a { color: #B9BFC1; }
.wl-seller { text-align: center; font-size: 11px; line-height: 1.5; color: #6F787B; }

/* ---------- компактные карточки разделов (21.10.2026): переписке — больше места ---------- */
.program-card { padding: 10px 12px; margin-bottom: 8px; }
.program-card .pc-label { font-size: 11px; letter-spacing: .8px; }
.program-card .pc-title { font-size: 15px; line-height: 1.25; margin: 1px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.program-card .pc-sub { font-size: 13px; line-height: 1.3; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-head { display: flex; align-items: flex-start; gap: 8px; }
.pc-text { flex: 1; min-width: 0; }
.pc-more { flex: none; width: 36px; height: 32px; border-radius: 10px; border: 0; background: var(--line); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer; }
.pc-more[aria-expanded="true"] { color: var(--accent); }
.pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pc-row.nc-three { grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; }
.program-card .pc-actions .btn { height: 40px; font-size: 14px; padding: 0 6px; line-height: 1.1; width: 100%; }
.program-card .pc-tools { margin-top: 8px; }
.program-card .pc-tools button { padding: 6px 4px; font-size: 12px; }
.program-card .nc-today { margin-top: 4px; font-size: 13px; }
.program-card .nc-today .track { height: 4px; margin-top: 4px; }
.program-card .nc-details { height: 30px; margin-top: 6px; font-size: 13px; border: 0; color: var(--muted); }
.program-card .nc-details[aria-expanded="true"] { color: var(--accent); }
/* строка диалогов, поле вопроса, нижнее меню — ниже */
.dialogs { padding: 0 16px 6px; gap: 6px; }
.dialogs select, .dialogs button { height: 34px; font-size: 14px; border-radius: 10px; }
.composer { padding: 6px 16px 6px; }
.composer textarea { min-height: 44px; }
.composer .send { width: 44px; height: 44px; }
.foot { padding: 0 18px 4px; font-size: 11px; }
nav.tabs a { padding: 5px 0 4px; gap: 2px; font-size: 11px; }
/* пока пишут вопрос — у карточки остаётся только заголовок */
.composing .program-card .pc-actions, .composing .program-card .pc-tools, .composing .program-card .pc-sub,
.composing .program-card .nc-details, .composing #nc-more, .composing #nc-today, .composing .pc-more,
.composing #open-archive-2, .composing #pc-finished { display: none !important; }
.composing .program-card { padding: 8px 12px; }