/* Vai Content — стили по дизайн-системе (design-system/tokens.css, components.md). Только светлая тема. */
:root {
  --primary: #D23F0E; --primary-pressed: #B8360C; --brand: #F26A3A; --brand-deep: #B1340A;
  --secondary: #1E5BD8; --secondary-pressed: #1747B0;
  --text: #15171E; --text-2: #5B6270; --text-3: #6B7280; --text-4: #8A909C; --disabled: #A0A6B1; --ink: #1F2430;
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #F8F8FA; --divider: #F0F1F4; --border: #E3E5EA;
  --segment-bg: #E9EAEE; --skeleton: #ECEDF0;
  --tint-warm: #FFF3EC; --tint-warm-2: #FFE9DD; --tint-warm-3: #FFE3D6; --tint-blue: #EAF0FF;
  --tint-green: #EAF7EF; --tint-green-2: #E3F6EC; --tint-red: #FDF1EF;
  --success: #157347; --success-2: #2FA866; --success-dot: #1E9E5A; --border-green: #D7EEDF; --border-red: #FBE4E1;
  --overlay: rgba(21, 23, 30, .35);
  --font-display: "Manrope", "Inter", system-ui, sans-serif; --font-text: "Inter", system-ui, sans-serif;
  --r-card: 16px; --r-button: 14px; --r-button-sm: 12px; --r-inner: 12px; --r-sheet: 24px; --r-illustration: 28px;
  --shadow-card: 0 2px 14px rgba(20, 24, 48, .06); --shadow-bubble: 0 1px 4px rgba(20, 24, 48, .08);
  --shadow-segment: 0 1px 3px rgba(20, 24, 48, .12); --shadow-knob: 0 1px 3px rgba(0, 0, 0, .2);
  --tabbar-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px); --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-pop: cubic-bezier(.3, 1.6, .5, 1); --ease-sheet: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-text);
  font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
a { color: var(--secondary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { opacity: .4; pointer-events: none; }
.h { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 26px; line-height: 30px; font-weight: 800; }
h2 { font-size: 17px; line-height: 22px; font-weight: 700; }
.hidden { display: none !important; }
.sub { font-size: 13px; line-height: 18px; color: var(--text-2); font-weight: 500; }
.muted { color: var(--text-3); } .small { font-size: 12px; line-height: 16px; }
.label { font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.app { padding: 12px var(--gutter) calc(var(--tabbar-h) + var(--safe-b) + 20px); max-width: 640px; margin: 0 auto; min-height: 100vh; }
.app.full { padding-bottom: 20px; }
.screen { animation: fade .3s ease both; display: flex; flex-direction: column; gap: 12px; }
.head { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 2px; }
.head.row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; gap: 10px; padding: 16px 8px; }

/* ---- карточки ---- */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  animation: up .35s var(--ease) both; }
.list > .card:nth-child(2) { animation-delay: 70ms } .list > .card:nth-child(3) { animation-delay: 140ms } .list > .card:nth-child(4) { animation-delay: 210ms } .list > .card:nth-child(5) { animation-delay: 280ms }
.list { display: flex; flex-direction: column; gap: 12px; }
.card.compact { padding: 14px 16px; gap: 8px; }
.card.compact .open-part { display: flex; flex-direction: column; gap: 8px; animation: up .3s ease both; }
.card .title { font-size: 17px; line-height: 22px; font-weight: 700; font-family: var(--font-display); }
.card.compact .title { font-size: 15px; line-height: 20px; }
.card .ttl-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card .sum { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.card .marks { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text); }
.card .insight { background: var(--tint-warm); border-radius: var(--r-inner); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; }
.card .src { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 16px; color: var(--text-3); gap: 8px; }
.card .src a { color: var(--text-3); }
.card .also { font-size: 12px; line-height: 16px; color: var(--text-3); margin: -4px 0 0; }
.card .img { width: calc(100% + 32px); margin: -16px -16px 0; height: 170px; object-fit: cover; border-radius: var(--r-card) var(--r-card) 0 0; display: block; background: var(--tint-warm-2); }
.badge { background: var(--tint-blue); color: var(--secondary); font-weight: 600; font-size: 11px; line-height: 14px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .f1 { flex: 1; } .row > .f14 { flex: 1.4; }
.hidden-row { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 12px 16px; font-size: 13px; color: var(--text-3); gap: 8px; animation: up .3s ease both; }
.card.gone { animation: fade .2s ease reverse both; }

/* ---- кнопки ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r-button); height: 48px; padding: 0 16px;
  font-size: 15px; font-weight: 600; background: var(--bg); color: var(--text); white-space: nowrap; text-decoration: none; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.dark { background: var(--text); color: #fff; }
.btn.blue { background: var(--secondary); color: #fff; }
.btn.sec { background: var(--bg); color: var(--text); font-weight: 500; font-size: 14px; height: 44px; }
.btn.ter { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-weight: 500; font-size: 14px; height: 44px; }
.btn.ter.on { background: var(--tint-warm); }
.btn.ter.ok { background: var(--tint-green); border-color: var(--border-green); }
.btn.lg { height: 52px; font-size: 16px; width: 100%; }
.btn.wide { width: 100%; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn.link { background: transparent; color: var(--secondary); font-weight: 600; font-size: 14px; height: 44px; }
.btn.text { background: transparent; color: var(--secondary); font-weight: 600; font-size: 13px; height: 32px; padding: 0 6px; }
.btn.danger { background: var(--tint-red); color: var(--brand-deep); }
.btn.icon { width: 44px; height: 44px; padding: 0; font-size: 18px; border-radius: var(--r-button); border: 1.5px solid var(--border); background: var(--surface); flex: none; }
.btn.like { background: var(--tint-green); border-color: var(--border-green); }
.btn.like.on { background: #CDEFDB; border-color: var(--success-2); }
.btn.dislike { background: var(--tint-red); border-color: var(--border-red); }
.btn.dislike.on { background: #F9D7D1; border-color: #E8907F; }
.pop { animation: pop .35s var(--ease-pop) both; }

/* ---- лента ---- */
.search { display: flex; align-items: center; gap: 10px; height: 44px; background: var(--surface); border-radius: var(--r-button); padding: 0 14px; border: 1.5px solid var(--border); }
.search.empty { border-color: var(--primary); }
.search svg { flex: none; color: var(--text-3); }
.search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; color: var(--text); min-width: 0; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .clear { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--border); color: var(--text); font-size: 14px; line-height: 1; padding: 0; flex: none; }
.chips-wrap { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
/* отступы по краям — пустыми элементами: padding внутри прокручиваемой строки Safari съедает */
.chips::before, .chips::after { content: ""; flex: 0 0 calc(var(--gutter) - 8px); }
.chips-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, rgba(244,245,247,0), var(--bg)); pointer-events: none; }
.chip { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text); }
.chip.on { background: var(--text); color: #fff; border-color: var(--text); }
.chip-sep { flex: none; width: 1px; height: 24px; background: var(--border); align-self: center; }
.seg { display: inline-flex; background: var(--segment-bg); border-radius: 10px; padding: 3px; }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; background: transparent; color: var(--text-2); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-segment); }
.seg.big { border-radius: 13px; width: 100%; }
.seg.big button { flex: 1; height: 38px; border-radius: 10px; font-size: 14px; }
.sk { background: linear-gradient(90deg, var(--skeleton) 25%, #F7F7F9 50%, var(--skeleton) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; height: 14px; }

/* ---- пост ---- */
.status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-dot); flex: none; }
.dot.grey { background: var(--disabled); }
.bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.bubble { width: min(318px, 100%); background: var(--surface); border-radius: 16px 16px 16px 4px; box-shadow: var(--shadow-bubble); overflow: hidden; display: flex; flex-direction: column; }
.bubble img, .bubble video, .card video.img { width: 100%; display: block; max-height: 340px; object-fit: cover; background: #000; }
.card video.img { width: calc(100% + 32px); max-height: 220px; }
.bubble .ph { height: 150px; background: var(--tint-warm-2); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--brand-deep); font-size: 12px; font-weight: 600; border: 1.5px dashed #F2A989; border-bottom: 0; border-radius: 16px 16px 0 0; }
.bubble .txt { padding: 10px 12px 8px; font-size: 14.5px; line-height: 20px; white-space: pre-wrap; word-wrap: break-word; }
.bubble .txt a { color: var(--secondary); }
.bubble .meta { display: flex; justify-content: space-between; padding: 0 12px 8px; font-size: 11px; color: var(--text-4); }
.fix-box { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--r-button); padding: 12px 14px; border: 1.5px solid var(--border); animation: up .3s ease both; }
.fix-box input, .fix-box textarea { border: 0; outline: 0; font: inherit; font-size: 15px; padding: 0; color: var(--text); background: transparent; resize: none; width: 100%; }
.writing { align-items: center; padding: 24px 20px 20px; gap: 14px; text-align: center; }
.writing .skl { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.dots span { display: inline-block; animation: dotp 1.2s infinite; } .dots span:nth-child(2) { animation-delay: .2s } .dots span:nth-child(3) { animation-delay: .4s }
.src-card { opacity: .72; gap: 6px; padding: 14px 16px; }
.done-sheet { position: fixed; inset: 0; background: var(--surface); z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 32px; text-align: center; animation: fade .35s ease both; }

/* ---- слоты ---- */
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot { height: 52px; border-radius: var(--r-button); font-size: 16px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.slot small { font-size: 10px; font-weight: 500; min-height: 12px; }
.slot.off { background: var(--bg); color: var(--disabled); border-color: var(--bg); pointer-events: none; }
.slot.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hours button { height: 46px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; }
.hours button.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- списки, настройки ---- */
.card.plain { padding: 0; gap: 0; }
.lrow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--divider); color: var(--text); text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; font: inherit; }
.lrow:last-child { border-bottom: 0; }
.lrow .lbl { flex: 1; font-size: 15px; font-weight: 500; line-height: 20px; min-width: 0; }
.lrow .lsub { font-size: 12px; line-height: 16px; color: var(--text-3); font-weight: 400; margin-top: 2px; }
.lrow .chev { color: var(--disabled); flex: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; flex: none; }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.av0 { background: var(--tint-warm-2); color: var(--brand-deep); } .av1 { background: var(--tint-blue); color: var(--secondary); } .av2 { background: var(--tint-green-2); color: var(--success); }
.tchip { height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--text); color: #fff; font-size: 13px; font-weight: 600; }
.step { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); font-size: 18px; color: var(--text); line-height: 1; padding: 0; }
.step.round { border-radius: 999px; }
.sw { width: 50px; height: 30px; border-radius: 999px; border: 0; padding: 3px; display: flex; align-items: center; background: #D5D8DF; flex: none; }
.sw .knob { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob); transition: transform .25s var(--ease-sheet); }
.sw.on { background: var(--primary); } .sw.on .knob { transform: translateX(20px); }
.st { flex: none; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.st.new { background: var(--tint-blue); color: var(--secondary); } .st.contact { background: var(--tint-warm); color: var(--brand-deep); } .st.work { background: var(--tint-green-2); color: var(--success); } .st.no { background: var(--tint-red); color: var(--brand-deep); }
.tchip-time { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--text); }
.tchip-time.soon { background: var(--tint-warm); color: var(--brand-deep); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: var(--r-button); background: var(--surface); border: 1.5px solid var(--surface); width: 100%; font: inherit; color: var(--text); }
.radio-card.grey { background: var(--surface-2); border-color: var(--surface-2); }
.radio-card.on { border-color: var(--primary); }
.radio { width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; border: 2px solid #CBD0D8; background: #fff; }
.radio i { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.radio-card.on .radio { border-color: var(--primary); } .radio-card.on .radio i { background: var(--primary); }
.rt { font-size: 15px; font-weight: 600; line-height: 20px; } .rd { display: block; font-size: 12px; color: var(--text-3); line-height: 16px; margin-top: 2px; }
.linkbox { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--r-inner); padding: 10px 12px; }
.linkbox span { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 18px; word-break: break-all; }
.info-row { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: var(--r-button); padding: 12px 14px; font-size: 14px; line-height: 19px; }
.info-row svg { flex: none; color: var(--secondary); }
.tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--tint-warm); font-size: 13px; font-weight: 600; color: var(--brand-deep); }

/* ---- онбординг ---- */
.onb { min-height: 100vh; display: flex; flex-direction: column; padding: 12px 24px 0; margin: -12px calc(-1 * var(--gutter)) -20px; background: var(--surface); }
.onb-top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.dots-nav { display: flex; gap: 6px; } .dots-nav i { width: 6px; height: 6px; border-radius: 3px; background: var(--border); } .dots-nav i.on { width: 20px; background: var(--primary); }
.illus { position: relative; height: 300px; margin-top: 20px; border-radius: var(--r-illustration); background: var(--tint-warm); overflow: hidden; }
.illus.blue { background: var(--tint-blue); }
.illus svg { position: absolute; left: 50%; bottom: 18px; width: 240px; height: 240px; margin-left: -120px; }
.illus.short { height: 230px; } .illus.short svg { width: 200px; height: 200px; margin-left: -100px; bottom: 10px; }
.onb h1 { font-size: 30px; line-height: 34px; margin-top: 28px; }
.onb p { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--text-2); }
.onb .bottom { margin-top: auto; padding-top: 24px; padding-bottom: calc(40px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.t1 { animation: up .4s var(--ease) 1.3s both } .t2 { animation: up .4s var(--ease) 1.45s both } .t3 { animation: up .4s var(--ease) 1.6s both }
.t1s { animation: up .4s var(--ease) .9s both } .t2s { animation: up .4s var(--ease) 1.05s both }
.scheme { background: var(--bg); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; }
.scheme .box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--border); font-size: 14px; line-height: 18px; font-weight: 500; animation: up .35s var(--ease) both; overflow-wrap: anywhere; min-width: 0; }
.onb h1, .onb p, .card, .lrow .lbl, .bubble .txt, .linkbox span { overflow-wrap: anywhere; min-width: 0; }
.scheme .box svg { color: var(--secondary); flex: none; }
.scheme .box.hot { border-color: var(--primary); background: var(--tint-warm); }
.scheme .arr { display: flex; justify-content: center; color: var(--disabled); height: 16px; align-items: center; }
.scheme .box:nth-of-type(2) { animation-delay: .1s } .scheme .box:nth-of-type(3) { animation-delay: .2s } .scheme .box:nth-of-type(4) { animation-delay: .3s }
.check-sq { width: 22px; height: 22px; border-radius: 6px; background: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---- гусь ---- */
.goose { display: block; }
.goose .eye { transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
.goose .wave { transform-box: fill-box; transform-origin: 0% 100%; animation: wave 1.4s ease-in-out infinite; }
.goose .sway { transform-origin: 50% 90%; animation: sway 1.6s ease-in-out infinite; }
.goose .nod { transform-box: fill-box; transform-origin: 50% 90%; animation: nod .6s cubic-bezier(.3,1.2,.4,1) .15s both; }
.goose .nod-idle { transform-box: fill-box; transform-origin: 50% 90%; animation: nodidle 2.6s ease-in-out infinite; }
.goose .check { transform-box: fill-box; transform-origin: center; animation: popin .4s var(--ease-pop) .5s both; }
.goose .shrug { transform-box: fill-box; transform-origin: 50% 100%; animation: shrug 3s ease-in-out infinite; }
.goose .q { transform-box: fill-box; transform-origin: 50% 100%; animation: qq 3s ease-in-out infinite; }
.goose .breath { transform-origin: 50% 100%; animation: breath 3s ease-in-out infinite; }
.goose .z { font-family: var(--font-display); font-weight: 800; fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: zz 3s ease-in-out infinite; }
.goose .z2 { animation-delay: 1s } .goose .z3 { animation-delay: 2s }
.goose.enter { transform-origin: 50% 100%; animation: enter 1.7s cubic-bezier(.3,.9,.3,1) both; }
.goose.enter-l { transform-origin: 50% 100%; animation: enterl 1.6s cubic-bezier(.3,.9,.3,1) both; }
.goose.hop-r { transform-origin: 50% 100%; animation: hopr .9s cubic-bezier(.3,.9,.3,1) .2s both; }
.goose.hop-l { transform-origin: 50% 100%; animation: hopl .9s cubic-bezier(.3,.9,.3,1) .2s both; }
.goose.enter .wave, .goose.enter-l .wave { animation-delay: 1.7s; }

/* ---- таб-бар, шторка, тост ---- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 8px var(--safe-b); background: var(--surface); border-top: 1px solid var(--divider); display: flex; z-index: 20; }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); font-size: 11px; font-weight: 500; color: var(--text-3); transition: color .25s; }
.tabs a.on { color: var(--primary); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: 90vw; animation: fade .2s ease; }
.toast.err { background: var(--brand-deep); }
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-back { position: absolute; inset: 0; background: var(--overlay); animation: fade .25s ease both; }
.sheet-body { position: relative; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 12px 20px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; max-height: 88vh; overflow-y: auto; animation: sheet .3s var(--ease-sheet) both; }
.sheet-body .handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); align-self: center; }
.sheet-body .sh-head { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-body .sh-head .h { font-size: 20px; }
.loader { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 30px 8px 40px; flex: 1; }
.empty .goose { width: 180px; height: 180px; }
.empty h2 { font-size: 22px; line-height: 26px; font-weight: 800; }
.empty p { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--text-2); max-width: 340px; }
.empty .acts { display: flex; flex-direction: column; gap: 8px; width: 100%; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes sheet { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.35) translateY(-5px) } 70% { transform: scale(.95) } 100% { transform: scale(1) } }
@keyframes dotp { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes wave { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-14deg) } }
@keyframes sway { 0%, 100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
@keyframes nod { 0% { transform: rotate(0) } 35% { transform: rotate(12deg) } 65% { transform: rotate(-3deg) } 100% { transform: rotate(0) } }
@keyframes nodidle { 0%, 70%, 100% { transform: rotate(0) } 80% { transform: rotate(10deg) } 92% { transform: rotate(-2deg) } }
@keyframes popin { from { transform: scale(0) } to { transform: scale(1) } }
@keyframes shrug { 0%, 60%, 100% { transform: translateY(0) } 72% { transform: translateY(-4px) } 86% { transform: translateY(0) } }
@keyframes qq { 0%, 60%, 100% { transform: rotate(0) } 72% { transform: rotate(12deg) } 86% { transform: rotate(-6deg) } }
@keyframes breath { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.03) } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px) scale(.8) } 30% { opacity: 1 } 100% { opacity: 0; transform: translate(8px, -14px) scale(1.1) } }
@keyframes enter { 0%, 28% { transform: translate(240px, 120px) rotate(-28deg) } 34% { transform: translate(226px, 112px) rotate(-22deg) } 40% { transform: translate(240px, 120px) rotate(-28deg) } 58% { transform: translate(110px, -50px) rotate(-8deg) } 74% { transform: translate(0, 0) rotate(0) } 84% { transform: translate(0, -16px) scaleY(1.04) } 92% { transform: translate(0, 0) scaleY(.96) } 100% { transform: translate(0, 0) } }
@keyframes enterl { 0%, 30% { transform: translate(-220px, 110px) rotate(26deg) } 36% { transform: translate(-206px, 102px) rotate(20deg) } 42% { transform: translate(-220px, 110px) rotate(26deg) } 60% { transform: translate(-100px, -50px) rotate(8deg) } 76% { transform: translate(0, 0) rotate(0) } 86% { transform: translate(0, -14px) scaleY(1.04) } 93% { transform: translate(0, 0) scaleY(.96) } 100% { transform: translate(0, 0) } }
@keyframes hopr { 0% { transform: translate(240px, 40px) rotate(-10deg) } 60% { transform: translate(0, -20px) rotate(0) } 80% { transform: translate(0, 0) scaleY(.96) } 100% { transform: translate(0, 0) } }
@keyframes hopl { 0% { transform: translate(-240px, 40px) rotate(10deg) } 60% { transform: translate(0, -20px) rotate(0) } 80% { transform: translate(0, 0) scaleY(.96) } 100% { transform: translate(0, 0) } }
@media (prefers-reduced-motion: reduce) { .goose.enter, .goose.enter-l, .goose.hop-r, .goose.hop-l, .t1, .t2, .t3, .t1s, .t2s, .card, .screen { animation-duration: 1ms !important; animation-delay: 0ms !important; } }

/* просмотр картинки на весь экран */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; animation: fade .2s ease; touch-action: pinch-zoom; }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; }

.vwrap { position: relative; }
.vbadge { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; pointer-events: none; }
.card .vwrap { width: calc(100% + 32px); margin: -16px -16px 0; }
.card .vwrap video.img { width: 100%; margin: 0; }