/* Tokens are the app's own (src/styles.css, «Глубокая вода»); --brand is the agency's colour from the data. */
:root {
  --bg: #eef2f5; --surface: #ffffff; --surface-2: #f7f9fb; --ink: #0e2a3a; --ink-2: #5b6b76; --ink-3: #8a98a3; --line: #dce3e8;
  --brand: #1f7a8c; --brand-ink: #ffffff; --sos: #d64545; --success: #2e8b57; --warning: #b07a14;
  --t-flight: #2f6fb3; --t-transfer: #8c6a3d; --t-checkin: #6b5bb3; --t-checkout: #6b5bb3; --t-excursion: #2e8b57; --t-meal: #b5485f; --t-meeting: #3a6e8f; --t-free_time: #8a98a3; --t-note: #8a98a3;
  --brand-soft: color-mix(in oklab, var(--brand) 12%, var(--surface)); --sos-soft: color-mix(in oklab, var(--sos) 12%, var(--surface));
  --success-soft: color-mix(in oklab, var(--success) 12%, var(--surface)); --warning-soft: color-mix(in oklab, var(--warning) 16%, var(--surface));
  --coral: #f2542d; --night: #14213d;
  font-family: "Golos Text", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #dfe6eb; color: var(--ink); font-size: 15px; line-height: 1.4; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* ---------- gallery ---------- */
.gallery-head { max-width: 1280px; margin: 0 auto; padding: 32px 24px 8px; }
.gallery-head h1 { font-size: 26px; }
.gallery-head p { color: var(--ink-2); margin-top: 6px; max-width: 70ch; }
.switch { display: inline-flex; margin-top: 16px; background: #cfd9e0; border-radius: 10px; padding: 3px; }
.switch a { padding: 6px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.switch a.on { background: #fff; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 20px; max-width: 1280px; margin: 0 auto; padding: 20px 24px 60px; }
.shot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shot a { font-weight: 600; text-decoration: none; }
.shot small { color: var(--ink-2); text-align: center; }
.shot iframe { width: 300px; height: 620px; border: 0; border-radius: 28px; box-shadow: 0 10px 30px rgba(14, 42, 58, 0.18); background: var(--bg); }

/* ---------- phone ---------- */
body.screen { display: flex; justify-content: center; min-height: 100vh; }
.phone { position: relative; width: 100%; max-width: 480px; min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.tg-bar { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; }
.tg-bar .x { color: #3390ec; font-weight: 500; }
.tg-bar .dots { margin-left: auto; color: var(--ink-3); letter-spacing: 2px; }
body.tg .tg-bar { display: flex; }
body.tg { --bg: #efeff4; }
main { flex: 1; padding-bottom: 96px; }
.head { background: var(--brand); color: var(--brand-ink); padding: 18px 16px 16px; }
.head .agency { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.9; }
.head .agency .dot { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.22); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.head h1 { font-size: 20px; margin-top: 10px; line-height: 1.25; }
.head .meta { margin-top: 4px; font-size: 14px; opacity: 0.9; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 8px; min-height: 52px; }
.bar h1 { font-size: 17px; flex: 1; padding: 0 6px; }
.bar .back { width: 40px; height: 40px; border-radius: 50%; font-size: 22px; }
.sos-pill { background: var(--sos); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--sos) 20%, transparent); }
.days { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; background: var(--bg); scrollbar-width: none; }
.day { flex: 0 0 auto; min-width: 54px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.day b { display: block; font-size: 16px; }
.day span { font-size: 11px; color: var(--ink-2); text-transform: uppercase; }
.day.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.day.on span { color: inherit; opacity: 0.85; }
.wrap { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.card h3 { font-size: 15px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.item { display: flex; gap: 12px; }
.item .time { width: 44px; flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 2px; }
.item .ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.item .ic svg, .ico svg { width: 18px; height: 18px; }
.item h3 { font-size: 15px; line-height: 1.3; }
.chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: color-mix(in oklab, var(--brand) 60%, var(--ink)); font-size: 13px; font-weight: 500; }
.chip.ok { background: var(--success-soft); color: var(--success); }
.chip.warn { background: var(--warning-soft); color: var(--warning); }
.chip.gray { background: var(--surface-2); color: var(--ink-2); }
.note { background: var(--warning-soft); border-color: transparent; }
.offer { border-color: color-mix(in oklab, var(--brand) 35%, var(--surface)); background: var(--brand-soft); }
.offer .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600; background: var(--brand); color: var(--brand-ink); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn.danger { background: var(--sos); color: #fff; }
.btn.block { width: 100%; }
.btns { display: flex; gap: 8px; margin-top: 12px; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 56px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line); z-index: 6; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--ink-3); text-decoration: none; }
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar svg { width: 22px; height: 22px; }
.fab { position: fixed; bottom: 72px; right: max(16px, calc(50% - 224px)); width: 56px; height: 56px; border-radius: 50%; background: var(--sos); color: #fff; font-weight: 700; z-index: 7; box-shadow: 0 0 0 6px color-mix(in oklab, var(--sos) 20%, transparent); display: grid; place-items: center; text-decoration: none; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 10px; font-size: 14px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 500; text-align: right; }
.sheet-bg { position: fixed; inset: 0; background: rgba(14, 42, 58, 0.45); z-index: 8; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: var(--surface); border-radius: 20px 20px 0 0; padding: 10px 16px 20px; z-index: 9; box-shadow: 0 -8px 32px rgba(14, 42, 58, 0.12); }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.reasons button { border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; font-weight: 500; background: var(--surface); }
.reasons button.on { border-color: var(--sos); background: var(--sos-soft); }
textarea, .input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; background: var(--surface); color: var(--ink); resize: none; }
.stars { display: flex; gap: 6px; font-size: 30px; color: #e3a008; }
.stars.sm { font-size: 18px; gap: 2px; }
.stars .off { color: var(--line); }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: 0 0 auto; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.toggle.on { background: var(--brand); } .toggle.on::after { left: 21px; }
.check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-size: 14px; }
.check.on { background: var(--brand); border-color: var(--brand); }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.bubble.me { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.place { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.composer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); z-index: 6; }
.mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: -0.03em; color: var(--night); }
.mark i { font-style: normal; font-weight: 600; }
.sec { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 16px 16px 8px; }