/* Дизайн — из Claude Design «Platform Demo v4» (тёмная) и v3 (светлая). */
:root, :root[data-theme="dark"] {
  --bg: #07090E; --fg: #EEF1F7; --mut: rgba(238,241,247,0.56); --mut2: rgba(238,241,247,0.4);
  --acc: #2E5BFF; --acc2: #8AA6FF; --acc-grad: linear-gradient(135deg,#2E5BFF,#6A8BFF);
  --acc-soft: rgba(46,91,255,0.16); --acc-soft2: rgba(46,91,255,0.12);
  --card: rgba(17,20,28,0.78); --card-solid: #11141C; --pop: rgba(24,28,38,0.96);
  --line: rgba(255,255,255,0.07); --line2: rgba(255,255,255,0.12); --line3: rgba(255,255,255,0.22);
  --field: rgba(255,255,255,0.03); --side: rgba(11,14,20,0.72); --hover: rgba(46,91,255,0.12);
  --chip: rgba(255,255,255,0.03); --chip-bd: rgba(255,255,255,0.09);
  --glow1: rgba(46,91,255,0.20); --glow2: rgba(140,120,255,0.10); --glow3: rgba(0,180,255,0.06);
  --shadow: 0 20px 50px -18px rgba(20,30,60,0.35); --ok: #3DDC97; --warn: #FFB547; --bad: #FF6B6B;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F3F5FA; --fg: #0E1320; --mut: #5B6478; --mut2: #8B93A7;
  --acc-soft: rgba(46,91,255,0.1); --acc-soft2: rgba(46,91,255,0.06); --acc2: #2E5BFF;
  --card: rgba(255,255,255,0.62); --card-solid: #FFFFFF; --pop: rgba(255,255,255,0.96);
  --line: rgba(20,30,60,0.08); --line2: rgba(20,30,60,0.14); --line3: rgba(20,30,60,0.22);
  --field: rgba(255,255,255,0.7); --side: rgba(255,255,255,0.55); --hover: rgba(46,91,255,0.08);
  --chip: rgba(255,255,255,0.6); --chip-bd: rgba(20,30,60,0.1);
  --glow1: rgba(46,91,255,0.22); --glow2: rgba(140,120,255,0.18); --glow3: rgba(0,180,255,0.12);
  --shadow: 0 20px 50px -18px rgba(30,50,120,0.18); --ok: #12A66A; --warn: #C27A00; --bad: #D93A3A;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 'Golos Text', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--mut2); }
button { cursor: pointer; }
.glow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.glow i { position: absolute; border-radius: 50%; filter: blur(30px); }
.glow i:nth-child(1) { width: 820px; height: 820px; right: -220px; top: -320px; background: radial-gradient(circle, var(--glow1), transparent 65%); }
.glow i:nth-child(2) { width: 900px; height: 900px; left: 60px; bottom: -500px; background: radial-gradient(circle, var(--glow2), transparent 65%); }
.glow i:nth-child(3) { width: 600px; height: 600px; left: 46%; top: 26%; background: radial-gradient(circle, var(--glow3), transparent 65%); }

/* каркас */
.app { height: 100vh; display: flex; position: relative; }
.side { width: 232px; flex: none; border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  background: var(--side); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); position: relative; z-index: 1; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.logo { width: 32px; height: 32px; background: var(--acc-grad); color: var(--on-acc, #fff); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 7px; flex: none; }
.brand b { font-size: 14px; display: block; }
.cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; text-align: left; position: relative; text-decoration: none; }
.nav:hover { background: var(--hover); }
.nav.on { background: var(--acc-soft); font-weight: 600; }
.nav.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--acc); }
.nav svg { flex: none; }
.nav span { flex: 1; }
.nav em { font-style: normal; font-size: 11px; color: var(--mut2); }
.navsep { margin: 14px 10px 6px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--line); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.av.acc { background: var(--acc-soft); color: var(--acc2); }
main { flex: 1; min-width: 0; overflow: auto; position: relative; z-index: 1; }
.page { padding: 32px 40px 60px; display: flex; flex-direction: column; gap: 22px; max-width: 1400px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head h1 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; margin: 4px 0 0; }
.sub { font-size: 13px; color: var(--mut); }
.mut { color: var(--mut); } .mut2 { color: var(--mut2); }

/* карточки и сетки */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.card.tight { padding: 16px 18px; gap: 10px; }
.card.acc { border: 1.5px solid var(--acc); }
.card h3 { margin: 0; font-size: 15px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 10px; }
.stat b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; display: block; }
.big { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--acc2); }
.seats { display: flex; gap: 4px; } .seats i { flex: 1; height: 4px; border-radius: 2px; background: var(--chip-bd); } .seats i.on { background: var(--acc); }

/* поля */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span { font-size: 12px; color: var(--mut); }
.fld.q > span { font-size: 15px; font-weight: 600; color: var(--fg); }
.hint { font-size: 12.5px; font-style: italic; color: var(--mut); }
.in, .ta, .sel { border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px; font-size: 14px; background: var(--field); outline: 0; width: 100%; }
.in, .sel { height: 42px; }
.ta { min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.in:focus, .ta:focus, .sel:focus { border-color: var(--acc); }
.sel option { background: var(--card-solid); color: var(--fg); }

/* кнопки, чипы, метки */
.btn { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--acc); color: var(--on-acc, #fff); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--fg); font-weight: 500; }
.btn.ghost:hover { border-color: var(--fg); filter: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.light { background: rgba(255,255,255,0.92); color: #0E1320; border-radius: 18px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.chip { padding: 8px 14px; border: 1.5px solid var(--chip-bd); background: var(--chip); border-radius: 20px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--mut); }
.chip.on { border-color: var(--acc); background: var(--acc-soft); color: var(--fg); }
.chip.solid.on { background: var(--acc); color: var(--on-acc, #fff); }
.tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: var(--acc-soft); color: var(--acc2); white-space: nowrap; display: inline-block; }
.tag.solid { background: var(--acc); color: var(--on-acc, #fff); }
.tag.plain { background: transparent; border: 1px solid var(--line2); color: var(--mut); font-weight: 500; }
.tag.ok { background: rgba(61,220,151,.14); color: var(--ok); }
.tag.warn { background: rgba(255,181,71,.14); color: var(--warn); }
.tag.bad { background: rgba(255,107,107,.14); color: var(--bad); }
.badge-up { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--acc); color: var(--on-acc, #fff); }

/* таблица клиентов */
.table { display: flex; flex-direction: column; }
.tr { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 1.2fr 1fr 24px; gap: 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); text-decoration: none; }
.tr.h { border-top: 0; padding-top: 4px; padding-bottom: 8px; }
a.tr:hover { background: var(--hover); }
.bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--acc); border-radius: 2px; }
.bar.lg { height: 8px; border-radius: 4px; } .bar.lg i { border-radius: 4px; }

/* вкладки */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { padding: 10px 14px; border: 0; background: transparent; font-size: 13.5px; color: var(--mut); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--acc); }

/* списки задач */
/* Чеклист: микровзаимодействие «обратная связь» по motion-craft/interfeis.md —
   замах на нажатии, пружинный поп 380 мс, обводка галочки рисуется, зачёркивание тянется линией,
   кольцо расходится один раз. Анимации только у .just (класс ставится в момент клика),
   поэтому при загрузке страницы уже отмеченные пункты не дёргаются. */
.task { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.task .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line3); flex: none; display: flex; align-items: center; justify-content: center; background: transparent; padding: 0; margin-top: 1px; position: relative;
  transition: background-color .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1), transform .15s cubic-bezier(.22,1,.36,1); }
.task .box:hover { border-color: var(--acc2); }
.task .box:active { transform: scale(.92); }
.task.done .box { background: var(--acc); border-color: var(--acc); }
.task .t { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; transition: background-size .32s cubic-bezier(.65,0,.35,1), color .32s ease; }
.task.done .t { color: var(--mut2); background-size: 100% 1.5px; }
.task.just.done .box { animation: chk-pop .38s cubic-bezier(.22,1,.36,1); }
.task.just.done .box svg path { stroke-dasharray: 12; stroke-dashoffset: 12; animation: chk-draw .26s .1s cubic-bezier(.22,1,.36,1) forwards; }
.task.just.done .box::after { content: ""; position: absolute; inset: -2px; border-radius: 7px; border: 1.5px solid var(--acc); animation: chk-ring .5s cubic-bezier(.22,1,.36,1) forwards; pointer-events: none; }
.task.just:not(.done) .box { animation: chk-undo .22s cubic-bezier(.22,1,.36,1); }
@keyframes chk-pop { 0% { transform: scale(.72); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes chk-draw { to { stroke-dashoffset: 0; } }
@keyframes chk-ring { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes chk-undo { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .task .box, .task .t { transition: none; }
  .task.just .box, .task.just .box svg path, .task.just .box::after { animation: none !important; stroke-dashoffset: 0; }
}
.task .t { flex: 1; }
.task .x { opacity: 0; border: 0; background: transparent; color: var(--mut2); padding: 0 4px; }
.task:hover .x { opacity: 1; }

/* инсайты */
.ins { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; position: relative; }
.ins q { font-size: 12.5px; color: var(--mut); font-style: italic; quotes: "«" "»"; }
.ins .x { position: absolute; right: 6px; top: 6px; opacity: 0; border: 0; background: transparent; color: var(--mut2); }
.ins:hover .x { opacity: 1; }

/* стратсессия */
.sess { display: flex; align-items: flex-start; }
.sess-main { flex: 1; min-width: 0; padding: 32px 40px 110px; position: relative; display: flex; flex-direction: column; gap: 22px; }
.sess-side { width: 300px; flex: none; position: sticky; top: 0; padding: 32px 28px 32px 0; display: flex; flex-direction: column; gap: 14px; }
.tip { position: absolute; top: 28px; right: 40px; width: 320px; z-index: 3; background: var(--pop); border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; }
.sess-title { display: flex; flex-direction: column; gap: 6px; padding-right: 360px; min-height: 150px; }
.sess-title h1 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; margin: 0; }
.reg { display: flex; flex-direction: column; }
.reg button { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 10px; border: 0; background: transparent; text-align: left; font-size: 13px; color: var(--mut); position: relative; border-radius: 6px; }
.reg button.past, .reg button.on { color: var(--fg); }
.reg button.on { background: var(--chip); font-weight: 600; }
.reg button.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--acc); }
.reg small { font-size: 11px; color: var(--mut2); font-weight: 400; }
.sess-foot { position: fixed; left: 232px; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 14px 40px; border-top: 1px solid var(--line); background: var(--side); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.slider { display: grid; grid-template-columns: 54px 1fr 22px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--mut); }
.slider input { width: 100%; accent-color: var(--acc2); }
.slider input.a { accent-color: var(--mut2); }
.slider b { font-size: 14px; color: var(--fg); text-align: right; }
.res { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.road { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.road.here { border: 1.5px solid var(--acc); background: var(--acc-soft2); }
.road .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line3); color: var(--mut); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.road.here .n { border-color: var(--acc); color: var(--acc2); }
.road.done .n { background: var(--acc); border-color: var(--acc); color: var(--on-acc, #fff); }
.road .t { font-size: 14px; font-weight: 600; }
.road small { font-size: 11.5px; color: var(--mut); } .road small b { color: var(--fg); }
.road button { border: 0; background: transparent; padding: 0; }

/* канбан */
.kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kcol { display: flex; flex-direction: column; gap: 10px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

/* чат */
.chatwrap { display: flex; flex-direction: column; height: 100vh; }
.chatlog { flex: 1; overflow-y: auto; padding: 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; max-width: 880px; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble { padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.msg.me .bubble { background: var(--acc); color: var(--on-acc, #fff); border-color: var(--acc); }
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 4px 0 8px; padding-left: 20px; } .bubble h1, .bubble h2, .bubble h3, .bubble h4 { font-size: 15px; margin: 10px 0 6px; }
.bubble code { font-size: 12.5px; background: var(--line); padding: 1px 4px; border-radius: 4px; }
.chatin { padding: 14px 40px 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; background: var(--side); backdrop-filter: blur(24px); }
.dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mut); margin-right: 4px; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }

/* документ */
.md { font-size: 14.5px; line-height: 1.65; }
.md h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 12px; } .md h2 { font-size: 18px; margin: 22px 0 8px; } .md h3 { font-size: 15px; margin: 16px 0 6px; }
.md p { margin: 0 0 10px; } .md ul, .md ol { margin: 0 0 10px; padding-left: 22px; } .md li { margin: 2px 0; }
.md table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 13.5px; } .md td, .md th { border: 1px solid var(--line2); padding: 6px 10px; text-align: left; }
.md blockquote { margin: 0 0 10px; padding: 6px 14px; border-left: 2px solid var(--line3); color: var(--mut); }

/* модалка, тост */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal .card { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--card-solid); }
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow); padding: 12px 18px; border-radius: 12px; font-size: 13.5px; }
.empty { padding: 30px; text-align: center; color: var(--mut); font-size: 13.5px; border: 1px dashed var(--line2); border-radius: 12px; }
.spark { display: block; }

/* вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 20px; }
.login .card { width: 380px; }
.err { color: var(--bad); font-size: 13px; }

/* кабинет клиента */
.cab { max-width: 1000px; margin: 0 auto; padding: 28px 24px 60px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.hero { background: var(--acc-grad); color: var(--on-acc, #fff); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }

.mtop { display: none; }
@media (max-width: 900px) {
  .mtop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--side); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: sticky; top: 0; z-index: 20; }
  .app { height: calc(100vh - 53px); }
  .side { display: none; }
  .side.open { display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; width: 260px; background: var(--card-solid); box-shadow: var(--shadow); }
  .head h1 { font-size: 26px; } .tabs { margin: 0 -16px; padding: 0 16px; }
  .tip { order: -1; } .sess-main > .tip { position: static; }
  .row.between.wrap, .head > .row { flex-wrap: wrap; }
  [data-form="task"] { flex-wrap: wrap; } [data-form="task"] .in:first-child { flex: 1 1 100%; }
  .scl { flex-direction: column; align-items: stretch; } .scl > .col { width: 100% !important; }
  .zone { grid-template-columns: 1fr auto !important; gap: 8px 12px !important; } .zone > .bar { grid-column: 1 / -1; grid-row: 2; }
  .road { grid-template-columns: 30px 1fr; } .road > .badge-up { grid-column: 2; justify-self: start; }
  .sess-foot { flex-wrap: nowrap; gap: 8px; } .sess-foot .sf-st, .sess-foot .sf-del { display: none; }
  .sess-foot .btn { flex: 1; justify-content: center; padding: 0 10px; font-size: 12.5px; }
  .sess-main { padding-bottom: 90px; } .card { padding: 18px 16px; }
  .tr { padding: 12px 10px; } .page { padding: 20px 16px 60px; } .grid2, .grid3, .grid4, .kan { grid-template-columns: 1fr; }
  .sess { flex-direction: column; } .sess-side { width: 100%; position: static; padding: 0 16px 20px; } .sess-main { padding: 20px 16px 110px; }
  .tip { position: static; width: auto; } .sess-title { padding-right: 0; min-height: 0; } .sess-foot { left: 0; padding: 12px 16px; flex-wrap: wrap; }
  .tr { grid-template-columns: 1fr auto; } .tr > :nth-child(n+3):not(:last-child) { display: none; }
  .chatlog, .chatin { padding-left: 16px; padding-right: 16px; }
}
@media print {
  .side, .sess-foot, .tip, .glow, .noprint { display: none !important; }
  body { background: #fff; color: #0E1320; } main { overflow: visible; }
  .card { background: #fff; border-color: #ddd; backdrop-filter: none; break-inside: avoid; }
}
a.card, a.stat, a.tr, a.row, a.kcard { text-decoration: none; color: inherit; }

.task .box svg path, .road .n svg path { stroke: var(--on-acc, #fff); }

/* ── движение интерфейса (motion-craft / interfeis.md) ──
   150–500 мс, торможение на входе, каскад 40 мс не длиннее 8 шагов,
   замах на нажатии, вторичное отстаёт. Вход экрана — только при смене экрана (.enter),
   перерисовка после действия не дёргает страницу. Всё гасится prefers-reduced-motion. */
:root { --e-out: cubic-bezier(.22,1,.36,1); --e-soft: cubic-bezier(.16,1,.3,1); --e-io: cubic-bezier(.65,0,.35,1); }
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-toast { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ui-here { 0%, 100% { box-shadow: 0 0 0 0 var(--acc-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }

.enter .page > *, .enter .sess-main > *, .enter .sess-side > *, .enter .cab > *, .enter .of > section {
  animation: ui-rise .34s var(--e-out) both; }
.enter .page > :nth-child(2), .enter .sess-main > :nth-child(2), .enter .cab > :nth-child(2) { animation-delay: .03s; }
.enter .page > :nth-child(3), .enter .sess-main > :nth-child(3), .enter .cab > :nth-child(3) { animation-delay: .06s; }
.enter .page > :nth-child(4), .enter .sess-main > :nth-child(4), .enter .cab > :nth-child(4) { animation-delay: .09s; }
.enter .page > :nth-child(5), .enter .sess-main > :nth-child(5), .enter .cab > :nth-child(5) { animation-delay: .12s; }
.enter .page > :nth-child(6), .enter .cab > :nth-child(6) { animation-delay: .15s; }
.enter .page > :nth-child(n+7), .enter .cab > :nth-child(n+7) { animation-delay: .18s; }
.enter .sess-side > * { animation-delay: .1s; }
/* строки таблиц и списков внутри карточек — вторичные, отстают */
.enter .table .tr { animation: ui-fade .36s var(--e-out) both; }
.enter .table .tr:nth-child(2) { animation-delay: .14s; } .enter .table .tr:nth-child(3) { animation-delay: .18s; }
.enter .table .tr:nth-child(4) { animation-delay: .22s; } .enter .table .tr:nth-child(5) { animation-delay: .26s; }
.enter .table .tr:nth-child(n+6) { animation-delay: .3s; }
/* полоски прогресса растут слева */
.enter .bar i, .enter .seats i.on { transform-origin: left center; animation: ui-grow .7s var(--e-out) both .18s; }
.enter .spark polyline { stroke-dasharray: 200; stroke-dashoffset: 200; animation: spark-draw .9s var(--e-out) forwards .2s; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* кнопки: ховер 150 мс, замах на нажатии */
.btn, .chip, .nav, .tab, .kcard, a.tr, .reg button { transition: background-color .15s var(--e-out), border-color .15s var(--e-out), color .15s var(--e-out), transform .15s var(--e-out), box-shadow .2s var(--e-out), filter .15s; }
.btn:active, .chip:active { transform: scale(.96); }
.btn:not(.ghost):not(.light):hover { box-shadow: 0 8px 24px -10px var(--acc); }
/* карточки-ссылки чуть поднимаются */
a.card:hover, a.stat:hover, .kcard:hover { transform: translateY(-2px); border-color: var(--line2); }
.card { transition: border-color .2s var(--e-out), transform .2s var(--e-out); }
/* вкладка: подчёркивание выезжает из центра */
.tab { position: relative; border-bottom-color: transparent !important; }
.tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--acc); transform: scaleX(0); transition: transform .25s var(--e-out); }
.tab.on::after { transform: scaleX(1); }
.tab:hover::after { transform: scaleX(.35); } .tab.on:hover::after { transform: scaleX(1); }
/* пункт меню: полоска вырастает */
.nav.on::before { animation: nav-bar .3s var(--e-out) both; transform-origin: center; }
@keyframes nav-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* модалка, тост, сообщения */
.modal { animation: ui-fade .2s var(--e-out) both; }
.modal .card { animation: ui-pop .32s var(--e-soft) both; }
.toast { animation: ui-toast .28s var(--e-out) both; }
.msg { animation: ui-pop .3s var(--e-out) both; }
/* «ты здесь» в дорожной карте дышит — статус, а не украшение */
.road.here { animation: ui-here 2.4s ease-in-out infinite; }
/* поля: фокус проявляется мягко */
.in, .ta, .sel { transition: border-color .15s var(--e-out), box-shadow .2s var(--e-out); }
.in:focus, .ta:focus, .sel:focus { box-shadow: 0 0 0 3px var(--acc-soft); }
/* поиск: выпадающий список */
#sres { animation: ui-pop .22s var(--e-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* демо-тур: карточка внизу по центру, стекло, въезд снизу */
#tour { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 45; width: min(560px, calc(100vw - 32px)); }
.tour-card { background: var(--pop); border: 1px solid var(--line2); border-radius: 16px; padding: 18px 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(46,91,255,.15);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; gap: 10px; }
.tour-card.show { animation: ui-pop .34s var(--e-soft) both; }
.tour-card .bar i { width: 100%; transform-origin: left center; transform: scaleX(var(--b)); animation: tour-bar .45s var(--e-out) both; }
@keyframes tour-bar { from { transform: scaleX(var(--a)); } to { transform: scaleX(var(--b)); } }
.tour-t { font-size: 19px; letter-spacing: -.02em; }
.tour-x { font-size: 14px; line-height: 1.5; color: var(--mut); }
.tour-card .x { border: 0; background: none; color: var(--mut2); }
.tour-btn { background: var(--acc-grad); }
.sess-foot ~ #tour, body:has(.sess-foot) #tour { bottom: 84px; }

/* ── предсказуемый интерактив (ux.js) ─────────────────────────────────
   Отметка видна строкой целиком: подсветка пробегает по строке и гаснет за 600 мс.
   Строка остаётся на месте до ухода с экрана, отмена в тосте. */
.task { border-radius: 8px; transition: background-color .6s var(--e-out); }
.task.just.done { animation: row-wash .7s var(--e-out); }
@keyframes row-wash { 0% { background: color-mix(in srgb, var(--acc) 22%, transparent); } 100% { background: transparent; } }
.task.just.done .box { animation: chk-pop .42s var(--e-out); }
@keyframes chk-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* тост с кнопкой действия */
.toast { display: none; align-items: center; gap: 14px; }
.toast.go { animation: ui-toast .28s var(--e-out) both; }
.toast-act { border: 0; background: none; color: var(--acc2); font: inherit; font-weight: 600; padding: 4px 6px; margin: -4px -6px -4px 0; border-radius: 6px; cursor: pointer; }
.toast-act:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); }
/* «Сохранено»: выезжает справа снизу и уходит сама */
#saved { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--pop); border: 1px solid var(--line2); color: var(--good, #3ecf8e); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: opacity .2s var(--e-out), transform .25s var(--e-out); pointer-events: none; }
#saved.go { opacity: 1; transform: none; }
#saved svg path { stroke-dasharray: 12; stroke-dashoffset: 12; }
#saved.go svg path { animation: chk-draw .3s .08s var(--e-out) forwards; }
/* новое в списке: вспыхивает и гаснет */
[data-item].fresh { animation: fresh-in .9s var(--e-out); }
@keyframes fresh-in { 0% { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--acc) 26%, transparent); } 30% { opacity: 1; transform: none; } 100% { background: transparent; } }
/* долгая кнопка: крутилка и секунды */
.btn.busy { cursor: progress; opacity: 1 !important; gap: 8px; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 1.8px solid currentColor; border-right-color: transparent; display: inline-block; flex: none; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-right-color: currentColor; opacity: .5; } }

/* тост уходит быстрее, чем приходит */
.toast.out { animation: ui-toast-out .19s cubic-bezier(.4,0,1,1) both; }
@keyframes ui-toast-out { to { opacity: 0; transform: translate(-50%, 8px) scale(.98); } }
/* «печатает»: точки прыгают волной, шаг 240 мс */
.dots i { animation: dot-wave 1.2s var(--e-io) infinite; }
.dots i:nth-child(2) { animation-delay: .24s; } .dots i:nth-child(3) { animation-delay: .48s; }
@keyframes dot-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
/* уменьшенное движение: перемещения нет, смысловой сигнал «вот новое / вот отмечено» остаётся цветом */
@media (prefers-reduced-motion: reduce) {
  [data-item].fresh { animation: fresh-rm .9s both !important; }
  .task.just.done { animation: row-wash .7s both !important; }
  @keyframes fresh-rm { 0% { background: color-mix(in srgb, var(--acc) 26%, transparent); } 100% { background: transparent; } }
}
/* галочка → через 200 мс тянется зачёркивание → ещё через 80 мс гаснет текст */
.task.done .t { transition-delay: .2s, .28s; }
/* зачёркивание по каждой строке, а не одной линией посередине блока */
.task .t { background: none !important; }
.task .tt { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .32s cubic-bezier(.65,0,.35,1); }
.task.done .tt { background-size: 100% 1.5px; transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .task .tt { transition: none; } }
.toast { max-width: calc(100vw - 32px); } .toast > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── телефон как приложение ───────────────────────────────────────────
   Нижняя панель на 5 разделов, отступы под «чёлку» и полоску iPhone, ничего не шире экрана,
   поля 16px (iOS не приближает страницу при вводе), чекбоксы и кнопки под палец. */
.mnav { display: none; }
.grid2 > *, .grid3 > *, .grid4 > *, .page > *, .col > *, .card > * { min-width: 0; }
@media (max-width: 900px) {
  .mtop { padding-top: calc(10px + env(safe-area-inset-top)); }
  .app { height: auto; min-height: calc(100dvh - 53px); }
  main { overflow: visible; }
  .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--side); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--line); }
  .mnav a, .mnav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: none; color: var(--mut); text-decoration: none; font-size: 10.5px; border-radius: 10px; }
  .mnav a.on { color: var(--acc2); } .mnav a.on svg { transform: translateY(-1px); }
  .mnav a:active, .mnav button:active { background: var(--hover); transform: scale(.96); }
  .side.open { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); padding-top: calc(20px + env(safe-area-inset-top)); }
  .in, .ta, .sel { font-size: 16px; } .in, .sel { height: 44px; }
  .btn { min-height: 40px; } .btn.sm { min-height: 34px; }
  .task { padding: 10px 0; } .task .box { width: 22px; height: 22px; border-radius: 6px; }
  .task .box::before { content: ""; position: absolute; inset: -10px; }
  .task .x { opacity: .5; padding: 6px; }
  /* шапка клиента: кнопки лентой, а не столбиком */
  .head > .row.wrap { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .head > .row.wrap::-webkit-scrollbar { display: none; } .head > .row.wrap > * { flex: none; }
  .tabs { overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; }
  /* строки платежей, контактов, встреч переносятся, а не уезжают за экран */
  .row[data-item] { flex-wrap: wrap; row-gap: 8px; }
  .row[data-item] > .sel, .row[data-item] > b { width: auto !important; }
  .row[data-item] > span[style*="flex"] { flex: 1 1 60% !important; }
  .card .row.between > .row { flex-wrap: wrap; }
  .stat b { font-size: 28px; }
}
@media (max-width: 900px) {
  .grid2:has(> .stat), .grid3:has(> .stat), .grid4:has(> .stat) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card.stat { padding: 14px; gap: 6px; } .card.stat .sub { font-size: 12px; line-height: 1.35; }
  .head h1 { font-size: 24px; }
}
@media (max-width: 900px) { .ov > .col:last-child { order: -1; } }
/* «Мой рост» в кабинете: на телефоне нужны все 4 колонки, особенно «Сейчас» */
@media (max-width: 900px) {
  .tr.tr4 { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 8px; padding: 12px 8px; font-size: 13px; }
  .tr.tr4 > * { display: block !important; min-width: 0; overflow-wrap: anywhere; }
}