/* One Aero Go — Mini App. Дизайн F (макеты, правила и токены — в папке one_aero_design).
 * ВСЕ цвета и шрифты — в :root. Градиент — только блок цены, шапка Pro (и курса) и кнопка «＋». Эмодзи в интерфейсе нет. */

/* Шрифты — со своего сервера (static/fonts, из Google Fonts, лицензия SIL OFL): переменные, кириллица и латиница */
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/Geologica-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(fonts/Geologica-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alumni Sans'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/AlumniSans-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Alumni Sans'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/AlumniSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* B612 Mono — шрифт кабин Airbus (SIL Open Font License, fonts/b612/OFL.txt) — только для экрана MCDU */
@font-face { font-family: 'B612 Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/b612/B612Mono-Regular.ttf) format('truetype'); }
@font-face { font-family: 'B612 Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/b612/B612Mono-Bold.ttf) format('truetype'); }

:root {
  /* фон и поверхности */
  --bg: #1C1640;
  --surface: #2A2258;
  --raised: #362C6E;
  --line: rgba(255, 255, 255, .08);
  /* действия и выбор */
  --accent: #6B4BA8;
  --accent-text: #FFFFFF;
  --icon: #CDBFFF;
  /* текст */
  --text: #FFFFFF;
  --muted: #B3ABDB;
  --faint: #8A82B5;
  --soft: #C9C2EA;
  /* талон */
  --paper: #F6F0E4;
  --ink: #1A1630;
  --ink-muted: #6A6488;
  --paper-line: #D8CFBC;  --paper-track: #E3DCCB;  --new-dot: #C987A8;  /* талон профиля и точка «есть новое» */
  --ink-soft: #4A4566;
  /* MCDU (ввод полёта «как в кабине A320», mcdu.js): корпус, клавиши, экран и цвета экрана как у настоящего */
  --mcdu-body: #8E9DB1;   --mcdu-body-lo: #73839A; --mcdu-edge: #56647A;  --mcdu-slot: #24282D;
  --mcdu-key: #1C1F23;    --mcdu-key-hi: #33373C;  --mcdu-key-text: #F1F2F3; --mcdu-screen: #050706; --mcdu-tick: #E9EDF2;
  --mcdu-white: #F2F2F2;  --mcdu-cyan: #3FD6F2;   --mcdu-green: #3EE07A;  --mcdu-amber: #FFB020;
  /* статусы */
  --ok: #8FE0C6;    --ok-bg: rgba(95, 201, 168, .14);   --ok-text: #CFF5E9;
  --warn: #F2B66D;  --warn-bg: rgba(242, 182, 109, .12); --warn-text: #FFE2BD;
  --bad: #F2A0AA;   --bad-bg: rgba(242, 160, 170, .12);  --bad-text: #FFD5DB;
  /* багажная лента: цвета чемоданов по призам, лента */
  --bag-none: #6A6380;  --bag-plus: #9FB4F5;  --bag-sale: #6B4BA8;  --bag-gift: #C987A8;  --bag-free: #5FC9A8;
  --belt: #15112F;  --belt-slat: #221C45;  --tag: #F6F0E4;  --tag-ink: #1A1630;
  /* статусы заказа: принят — голубой, в работе — фиолетовый, готово — зелёный (ok) */
  --st-acc: #9FB4F5;  --st-acc-bg: rgba(159, 180, 245, .14);  --st-work: #CDBFFF;  --st-work-bg: rgba(205, 191, 255, .14);
  --paper-acc: #2F4C8F;  --paper-acc-bg: #DDE6FA;  --paper-work: #5A3FA0;  --paper-work-bg: #EAE2FA;
  /* градиенты */
  --gradient: linear-gradient(135deg, #2B2459 0%, #6B4BA8 55%, #C987A8 100%);
  --plus: linear-gradient(135deg, #6B4BA8 0%, #C987A8 100%);
  --bar: linear-gradient(90deg, #6B4BA8, #B49BF0);
  --col: linear-gradient(180deg, #B49BF0, #6B4BA8);
  /* карта */
  --map-space: #0F0B24;
  --fdr: #F2B66D;  --fdr-bg: #15112F;  /* «чёрный ящик» — на самом деле оранжевый */
  --map-visited: #33295F;  --map-visited-line: #8D78D6;  /* страны, где вы были: непрозрачная заливка и граница на глобусе */
  /* соседние страны — разными тёмными оттенками, чтобы не сливались (первый — --map-visited) */
  --map-visited-2: #2B3766;  --map-visited-3: #44285A;  --map-visited-4: #233F5C;  --map-visited-5: #3B3468;  --map-visited-6: #4A2F4F;
  /* шрифты: у обоих есть кириллица */
  --font-ui: 'Geologica', -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'Alumni Sans', 'Arial Narrow', sans-serif;
  /* скругления */
  --r-sheet: 24px; --r-card: 20px; --r-field: 16px; --r-tile: 14px; --r-pill: 999px;
  --tab-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* стекло: нижняя плашка (tabbar_A) и верх карты (maptop_C) */
  --glass: rgba(28, 22, 64, .55);
  --map-glass: rgba(28, 22, 64, .45);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(10, 6, 30, .45);
  --glass-blur: blur(18px) saturate(150%);
  --tab-on-bg: rgba(255, 255, 255, .09);
  --seg-on-bg: rgba(107, 75, 168, .62);
  --shadow: 0 10px 30px rgba(10, 6, 30, .45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font: 400 15px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--icon); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.nw { white-space: nowrap; }
h1 { margin: 8px 8px 14px; font-weight: 300; font-size: 32px; line-height: 1.1; letter-spacing: -.025em; }
h1 .cnt { font-weight: 400; font-size: 18px; color: var(--faint); margin-left: 6px; letter-spacing: 0; }
h2 { margin: 26px 8px 10px; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.lbl { display: block; margin: 26px 4px 10px; font-weight: 500; font-size: 14px; color: var(--muted); }
.lbl small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--faint); }
.lbl small.in { display: inline; margin-left: 4px; }
.note { margin: 10px 4px 0; font-size: 13px; line-height: 1.45; color: var(--faint); }
.note a { color: var(--icon); }
.note.center, .center { text-align: center; }

/* иконки */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.s { width: 16px; height: 16px; }
.box-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--raised); color: var(--icon);
  display: inline-flex; align-items: center; justify-content: center; }
.box-ic.lg { width: 40px; height: 40px; }
.box-ic.amber { background: rgba(242, 182, 109, .16); color: var(--warn); }
.box-ic.green { background: var(--ok-bg); color: var(--ok); }

/* ---------- карта */
#map-wrap { position: fixed; inset: 0; background: var(--map-space); }
#map-wrap.off { visibility: hidden; pointer-events: none; }  /* размер сохраняется — так MapLibre не падает */
#map { position: absolute; inset: 0; }
.glass { background: rgba(42, 34, 88, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .07); }
/* верх карты, вариант C (one_aero_tabbar/maptop_C.html): вкладки «Карта · Полёты · Статистика» + строка цифр */
#map-seg { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; height: 52px; padding: 5px;
  display: flex; gap: 2px; border-radius: var(--r-pill); background: var(--map-glass); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#map-seg button { flex: 1; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--soft); cursor: pointer;
  font: 600 14px var(--font-ui); }
#map-seg button.on { background: var(--seg-on-bg); color: #fff; }
/* пасхалка «турбулентность»: карта качается, сверху табличка «Пристегните ремни» */
#map-wrap.shake #map { animation: turb 2s ease-in-out; }
@keyframes turb {
  0%, 100% { transform: none; } 6% { transform: translate(-10px, 5px) rotate(-.9deg); } 13% { transform: translate(9px, -6px) rotate(.8deg); }
  21% { transform: translate(-8px, -4px) rotate(-.7deg); } 30% { transform: translate(7px, 5px) rotate(.6deg); }
  40% { transform: translate(-6px, 3px) rotate(-.4deg); } 52% { transform: translate(5px, -3px) rotate(.3deg); }
  65% { transform: translate(-3px, 2px); } 78% { transform: translate(2px, -2px); } 90% { transform: translate(-1px, 1px); }
}
/* Pro: «Проиграть историю» — табло с датой и маршрутом над картой */
#play-board { position: absolute; left: 12px; right: 68px; top: 122px; z-index: 4; display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-radius: 16px; }
#play-board b { font: 700 22px/1 var(--font-data); color: #fff; text-transform: uppercase; }
#play-board span { font: 700 22px/1 var(--font-data); color: var(--icon); }
#play-board em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--faint); }
#seatbelt { position: absolute; left: 50%; top: 122px; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 16px; color: var(--warn-text); white-space: nowrap; }
#seatbelt .ic { color: var(--warn); }
#seatbelt span { font-size: 13px; color: var(--soft); }
#seatbelt b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
#summary { position: absolute; left: 12px; right: 12px; top: 70px; z-index: 2; height: 40px; padding: 0 20px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; line-height: 40px; white-space: nowrap;
  border-radius: var(--r-pill); background: var(--map-glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff; }
#summary b { font: 700 22px var(--font-data); }
#summary span span { font: 11.5px var(--font-ui); color: var(--soft); }
#map-controls { position: absolute; right: 12px; top: 122px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
/* инструменты карты: одна кнопка, остальные выезжают под ней с подписями слева */
#map-tools { display: flex; flex-direction: column; gap: 8px; }
#map-tools .round { position: relative; opacity: 0; transform: translateY(-14px) scale(.9); pointer-events: none;
  transition: opacity .18s ease, transform .22s ease; }
#map-controls.open #map-tools .round { opacity: 1; transform: none; pointer-events: auto; }
#map-controls.open #map-tools .round:nth-child(2) { transition-delay: .03s; }
#map-controls.open #map-tools .round:nth-child(3) { transition-delay: .06s; }
#map-controls.open #map-tools .round:nth-child(4) { transition-delay: .09s; }
#map-controls.open #map-tools .round:nth-child(5) { transition-delay: .12s; }
#map-controls.open #map-tools .round:nth-child(6) { transition-delay: .15s; }
#map-controls.open #map-tools .round:nth-child(7) { transition-delay: .18s; }
#map-controls.open #map-tools .round:nth-child(8) { transition-delay: .21s; }
/* слева сверху: выбранный год и легенда цвета линий */
#map-chips { position: absolute; left: 12px; top: 122px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: calc(100% - 90px); pointer-events: none; }
.mchip { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--map-glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: #fff; font: 500 12px var(--font-ui); }
button.mchip { cursor: pointer; font-weight: 600; }
.mchip .ic { width: 14px; height: 14px; color: var(--icon); }
.mchip.legend { flex-wrap: wrap; color: var(--soft); gap: 4px 10px; }
.mchip.legend span { display: inline-flex; align-items: center; gap: 5px; }
.mchip.legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.mchip.legend i.lg-grad { width: 70px; }
.mchip.legend i.lg-over { width: 30px; background: linear-gradient(90deg, rgba(205, 191, 255, .3), #CDBFFF); }
/* выбор в карточке карты: год, цвет линий */
.pick-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; max-height: 300px; overflow-y: auto; }
.pick-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--glass-line);
  border-radius: 14px; background: transparent; color: #fff; text-align: left; cursor: pointer; font: 500 15px var(--font-ui); }
.pick-row span { font-size: 12.5px; color: var(--faint); font-weight: 400; }
.pick-row.on { background: var(--seg-on-bg); border-color: rgba(205, 191, 255, .28); }
#map-tools .tip { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: var(--r-pill);
  font: 500 12.5px var(--font-ui); color: var(--text); white-space: nowrap; pointer-events: none; }
/* включённая подсветка — мягко, как выбранная вкладка верха карты (maptop_C), а не яркой заливкой */
#btn-countries.on, #btn-regions.on { background: var(--seg-on-bg); color: #fff; border-color: rgba(205, 191, 255, .28); }
@media (prefers-reduced-motion: reduce) { #map-tools .round { transition: none; } }
.round { width: 44px; height: 44px; padding: 0; border-radius: 14px; color: var(--text); display: flex; align-items: center;
  justify-content: center; cursor: pointer; }
#map-card { position: absolute; left: 12px; right: 12px; z-index: 3;
  bottom: calc(var(--tab-h) + 28px + var(--safe-bottom)); padding: 14px 16px 12px; border-radius: 24px;
  background: rgba(36, 29, 77, .94); animation: rise .3s ease-out; }
#map-card.empty-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 16px; }
#map-card.empty-card .btn { width: auto; }
.rc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rc-codes { font: 700 30px/1 var(--font-data); }
.rc-codes i { font-style: normal; color: var(--faint); margin: 0 6px; }
.rc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 6px; }
.rc-title { font-weight: 600; font-size: 16px; }
.x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 16px; background: var(--raised); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.x .ic { width: 16px; height: 16px; }
.rc-sub { margin-top: 4px; font-size: 13.5px; color: var(--soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.rc-list { list-style: none; margin: 10px 0 12px; padding: 0; max-height: 132px; overflow-y: auto; }
.rc-list li { border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13.5px; }
.rc-list li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; color: inherit; text-decoration: none; }
.rc-list li a > span:nth-child(2) { margin-left: auto; color: var(--muted); text-align: right; }
.rc-list li a .ch { flex: none; width: 16px; height: 16px; color: var(--faint); }
.rc-list li b { font: 600 18px/1 var(--font-data); margin-right: 4px; }
.err-link { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: calc(var(--tab-h) + 20px + var(--safe-bottom)); }

/* ---------- страницы */
#page { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(var(--tab-h) + 40px + var(--safe-bottom)); }
#page.flush { padding-left: 0; padding-right: 0; padding-top: 0; }
#page.no-tabs { padding-bottom: 40px; }
.has-fallback #page { padding-bottom: calc(var(--tab-h) + 104px + var(--safe-bottom)); }  /* своя кнопка вне Telegram */
.card { background: var(--surface); border-radius: 22px; padding: 16px; }
.card + .card { margin-top: 12px; }
.card h3 { margin: 0; font-weight: 600; font-size: 16px; }
.card > p { margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); }
.mt { margin-top: 12px; }

/* кнопки */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 24px; background: var(--accent); color: var(--accent-text); font: 600 15px var(--font-ui);
  cursor: pointer; text-decoration: none; text-align: center; }
.btn .ic { width: 18px; height: 18px; }
.btn.sec, .btn.soft { background: var(--raised); color: var(--icon); font-weight: 500; }
.btn.del, .btn.danger { background: var(--bad-bg); color: var(--bad); font-weight: 500; }
.btn.ghost { background: none; color: var(--faint); font-weight: 400; }
.btn.dis, .btn:disabled { background: var(--surface); color: #6E679A; cursor: default; }
.btn.sm, .btn.small { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 18px; width: auto; }
.btn.sm .ic, .btn.small .ic { width: 16px; height: 16px; }
.btn.auto { width: auto; }
.btn + .btn, .btn + .note + .btn { margin-top: 10px; }
.btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btns .btn + .btn { margin-top: 0; }
.link { color: var(--icon); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--icon); font: 500 14px var(--font-ui); cursor: pointer; text-decoration: none; flex: none; }
.pill-btn .ic { width: 16px; height: 16px; }

/* поля */
.err { margin: 8px 4px 0; font-size: 13.5px; color: var(--bad); }
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 23px;
  background: var(--surface); color: var(--faint); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: 400 15px var(--font-ui); }
.search input::placeholder { color: var(--faint); }
input.search { width: 100%; border: 0; outline: none; color: var(--text); margin-bottom: 10px; font: 400 15px var(--font-ui); }
input.search::placeholder { color: var(--faint); }
/* выпадающий список (админ: «Проверить праздник») */
select.sel { width: 100%; height: 46px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 14px; outline: none;
  background: var(--surface); color: var(--text); font: 400 15px var(--font-ui); }

/* карточка-форма со строками (в ролике, комментарий, промокод) */
.form-card { background: var(--surface); border-radius: 22px; overflow: hidden; }
.form-card + .form-card { margin-top: 12px; }
/* «Мой рейс на канале»: обложка ролика, «Смотреть» и «Поделиться» (карточка готового заказа) */
.vid-card { background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.vid-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--raised); cursor: pointer; }
.vid-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-cover .play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(28, 22, 64, .72); color: #fff; }
.vid-tx { padding: 14px 16px 0; }
.vid-tx b { display: block; font-weight: 600; font-size: 16px; }
.vid-tx span { font-size: 13.5px; color: var(--muted); }
.vid-act { display: flex; gap: 10px; padding: 14px 16px 16px; }
.vid-act .btn { flex: 1; margin: 0; }
/* счётчик бесплатных заказов у промокода */
.free-card { display: block; width: 100%; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.free-card .dots { display: flex; gap: 5px; margin-top: 8px; }
.free-card .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--raised); }
.free-card .dots i.on { background: var(--icon); }
.row-in { display: block; padding: 12px 16px; position: relative; }
.row-in > span { display: block; font-size: 12.5px; color: var(--muted); }
.row-in input, .row-in textarea { display: block; width: 100%; border: 0; padding: 2px 0 0; background: none; outline: none;
  color: var(--text); font: 400 17px var(--font-ui); resize: none; }
.row-in input::placeholder, .row-in textarea::placeholder { color: var(--faint); font-size: 15px; }
.sw { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; position: relative; cursor: pointer; }
.sw .tx { flex: 1; }
.form-card > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.form-card .ban { margin: 0 16px 12px; }
.form-card .ban::before { display: none; }
.tog { width: 50px; height: 30px; flex: none; border: 0; padding: 0; border-radius: 15px; position: relative; background: var(--raised); cursor: pointer; }
.tog::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--muted); transition: transform .18s; }
.tog.on { background: var(--accent); }
.tog.on::after { transform: translateX(20px); background: #fff; }

/* выбор */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  background: var(--surface); border-radius: var(--r-pill); }
.seg button { min-height: 42px; border: 0; border-radius: var(--r-pill); background: none; color: #D9D3F2;
  font: 500 14.5px/1.2 var(--font-ui); cursor: pointer; padding: 6px 8px; }
.seg button small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); }
.seg button.on { background: var(--accent); color: #fff; }
.seg button.on small { color: #E4DFF5; }
.seg.nav button { min-height: 40px; font-size: 14px; }
.seg.nav button.on { background: var(--raised); }
.seg button i.cnt { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
  height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.diary-seg + h1 { margin-top: 18px; }
/* «Карта · Полёты · Статистика» над списком и статистикой — как верх карты (maptop_C) */
.seg.diary-seg { height: 52px; padding: 5px; gap: 2px; border-radius: var(--r-pill); background: var(--map-glass); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow); }
.seg.diary-seg button { min-height: 0; border-radius: var(--r-pill); color: var(--soft); font: 600 14px var(--font-ui); }
.seg.diary-seg button.on { background: var(--seg-on-bg); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--surface); color: var(--text);
  font: 400 15px var(--font-ui); cursor: pointer; }
.chip.on { background: var(--accent); font-weight: 500; }
.chip.off { color: var(--faint); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }  /* SALE у Free — «с Pro» */
.chip.sm { height: 34px; padding: 0 14px; font-size: 14px; background: var(--raised); }
.chip.sm.on { background: var(--accent); }

/* метки */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-weight: 600;
  font-size: 11.5px; line-height: 1.5; background: var(--raised); color: var(--icon); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.wait { background: rgba(242, 182, 109, .14); color: #F7CB93; }
.tag.no { background: rgba(242, 160, 170, .14); color: var(--bad); }
.tag.acc { background: var(--st-acc-bg); color: var(--st-acc); }
.tag.work { background: var(--st-work-bg); color: var(--st-work); }
.tag .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600;
  background: var(--raised); color: var(--icon); margin-left: 4px; vertical-align: 1px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }

/* плашки */
.ban { display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; font-size: 13.5px; margin: 12px 0 0; background: var(--surface); color: var(--soft); text-decoration: none; }
.ban .ic { margin-top: 1px; color: var(--icon); }
.ban > span { flex: 1; min-width: 0; }
.ban.warn { background: var(--warn-bg); color: var(--warn-text); } .ban.warn .ic { color: var(--warn); }
.ban.bad { background: var(--bad-bg); color: var(--bad-text); } .ban.bad .ic { color: var(--bad); }
.ban.ok { background: rgba(95, 201, 168, .12); color: var(--ok-text); } .ban.ok .ic { color: var(--ok); }
.ban a { color: inherit; }
.ban b { color: #fff; font-weight: 600; }
#maint-banner { margin: 0 0 12px; }
.flush > #maint-banner { margin: 10px 12px 0; }

/* пустые состояния, замок */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 20px;
  border-radius: 24px; background: var(--surface); margin: 12px 0; }
.em { width: 64px; height: 64px; border-radius: 20px; background: var(--raised); color: var(--icon);
  display: flex; align-items: center; justify-content: center; }
.em .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.empty b { font-weight: 600; font-size: 17px; }
.empty > span { font-size: 14px; color: var(--muted); max-width: 290px; }
.empty .btn { margin-top: 6px; width: auto; padding: 0 22px; }
.lock { position: relative; border-radius: 24px; overflow: hidden; margin-top: 12px; }
.lock .bl { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.lock .ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 16px; background: rgba(28, 22, 64, .35); }
.lock .ov .em { width: 52px; height: 52px; border-radius: 26px; background: var(--accent); color: #fff; }
.lock .ov .em .ic { width: 22px; height: 22px; }
.lock .ov b { font-weight: 600; font-size: 16px; max-width: 270px; }
.lock .ov .btn { width: auto; }

/* списки */
.grp { background: var(--surface); border-radius: 22px; overflow: hidden; }
.li { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 16px; color: inherit; text-decoration: none;
  position: relative; cursor: pointer; }
.li + .li::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--line); }
.li > .ic:first-child { color: var(--icon); }
.li .tx { flex: 1; min-width: 0; }
.li .tx .sub { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.li .r { font-size: 13.5px; color: var(--faint); }
.li .ch { color: var(--faint); width: 18px; height: 18px; }
/* строки «Откуда / Куда», поля формы полёта */
.it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; min-height: 60px; }
.grp > * + *::before, .two > .it + .it::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.grp > * + * { position: relative; }
.two > .it + .it::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 1px; height: auto; }
.it .tx { flex: 1; min-width: 0; }
.it .tx > span:first-child { display: block; font-size: 12px; color: var(--muted); }
.it .tx b { font: 600 30px/1 var(--font-data); margin-right: 8px; }
.it .tx em { font-style: normal; font-size: 14px; }
.it .tx .ph { font-size: 16px; color: var(--faint); }
.it .tx .val { font-size: 17px; }
.it .tx small { display: block; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it > .ic { color: var(--faint); }
.it.stop .tx b { font-size: 24px; }
.it input.data { display: block; width: 100%; border: 0; background: none; outline: none; padding: 0; color: var(--text);
  font: 600 28px/1.05 var(--font-data); text-transform: uppercase; }
.it input.data::placeholder { color: var(--faint); font: 400 16px var(--font-ui); text-transform: none; }
.it input.overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; color-scheme: dark; }
.clr { width: 28px; height: 28px; flex: none; border: 0; border-radius: 14px; background: var(--raised); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.clr .ic { width: 14px; height: 14px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two .it .tx b { font-size: 28px; }
.chips-in { display: flex; gap: 6px; padding: 0 16px 14px; }
.grp > .chips-in::before { display: none; }

/* ---------- посадочный талон */
.pass { background: var(--paper); color: var(--ink); border-radius: 16px; margin-top: 16px; }
.pass .top { padding: 16px 18px 10px; }
.pass .br { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pass .br b { font: 600 20px/1 var(--font-data); }
.pass .br .num { font: 500 14px var(--font-ui); }
.pass .br > span { font-size: 12px; color: var(--ink-muted); text-align: right; }
.codes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; }
.codes b { font: 700 66px/.9 var(--font-data); letter-spacing: .01em; }
.codes b.ph { color: #CFC7DC; }
.codes .ln { display: flex; align-items: center; gap: 6px; }
.codes .ln i { flex: 1; height: 0; border-top: 2px dotted #B4ACC8; }
.codes .ln em { font: 600 15px/1 var(--font-data); font-style: normal; color: var(--ink-muted); }
.codes .ln svg { width: 20px; height: 20px; fill: var(--ink); flex: none; }
.pass .cities { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.pass .cities span:last-child { text-align: right; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-top: 16px; }
.fields div { min-width: 0; }
.fields div span { display: block; font-size: 11px; color: var(--ink-muted); }
.fields div b { display: block; font: 600 23px/1.05 var(--font-data); overflow-wrap: anywhere; }
.fields div b.ph { color: #B9B1CB; }
.fields .w2 { grid-column: span 2; }
.fields .w3 { grid-column: span 3; }
.perf { position: relative; height: 24px; }
.perf::before { content: ""; position: absolute; left: 16px; right: 16px; top: 11px; border-top: 2px dashed #C9C1D6; }
.perf i { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.perf i:first-child { left: -12px; }
.perf i:last-child { right: -12px; }
.stub { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 18px 16px; }
.stub span { display: block; font-size: 11px; color: var(--ink-muted); }
.stub b { display: block; font: 700 52px/.95 var(--font-data); }
.stub b.word { font-size: 34px; }
.stub .r { text-align: right; font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.stub .r s { color: var(--ink-muted); }
.ver { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #DDEFE7;
  color: #1F6B52; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ver .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.st-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #E6E0F2; color: #4A3D86; white-space: nowrap; }
.st-tag.ok { background: #DDEFE7; color: #1F6B52; }
.st-tag.wait { background: #F7E8D2; color: #8A5A16; }
.st-tag.no { background: #F7DDE0; color: #9B2F3D; }
.st-tag.acc { background: var(--paper-acc-bg); color: var(--paper-acc); }
.st-tag.work { background: var(--paper-work-bg); color: var(--paper-work); }

/* ---------- заказ */
.intro { margin: 14px 4px 0; font-size: 14.5px; color: var(--muted); }
.acs { display: flex; flex-direction: column; gap: 8px; }
.ac { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px;
  border: 1.5px solid transparent; border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.ac svg { display: block; height: auto; max-width: 100%; color: #4F4590; }
.ac .tx { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.ac .tx b { font: 600 28px/1 var(--font-data); }
.ac .tx span { font-size: 13px; color: var(--muted); }
.ac .tx em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--icon); background: var(--raised); border-radius: 999px; padding: 2px 8px; }
.ac.on { border-color: var(--accent); background: rgba(107, 75, 168, .22); }
.ac.on svg, .ac.on .tx b { color: var(--icon); }
.ac.later { cursor: not-allowed; background: transparent; border: 1.5px dashed rgba(255, 255, 255, .12); }
.ac.later svg { color: #3A3170; }
.ac.later .tx b { color: var(--faint); }
.skies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.sk { background: none; border: 0; padding: 0; color: #D9D3F2; font: 400 13px var(--font-ui); text-align: left; cursor: pointer; }
.sk i { display: block; height: 60px; border-radius: 14px; margin-bottom: 6px; overflow: hidden; background: var(--surface); }
.sk i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk.on { color: #fff; font-weight: 500; }
.sk.on i { outline: 2px solid #fff; outline-offset: 2px; }
.lv { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
a.lv { color: inherit; text-decoration: none; }
a.lv > .ic { color: var(--muted); }
.course-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.box-ic.num { font: 700 18px/1 var(--font-data); }
.lv .tx { flex: 1; min-width: 0; }
.lv .tx b { display: block; font-weight: 600; font-size: 15px; }
.lv .tx span { font-size: 13px; color: var(--muted); }
.stops-box { margin-top: 12px; }
.stops-box .chips { margin-top: 10px; }
.stops-box .btn { margin-top: 10px; }
.price-box { margin-top: 26px; padding: 16px 18px; border-radius: 22px; background: var(--gradient); }
.price-box .small { font-size: 13px; color: #EDE7FA; }
.price-box .v { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.price-box .v s { font: 600 26px/1 var(--font-data); color: rgba(255, 255, 255, .6); }
.price-box .v b { font: 700 50px/1 var(--font-data); }
.price-box .v b.word { font-size: 38px; }
.price-box a { color: #fff; }
.price-box .bad-line { margin-top: 4px; font-size: 13px; color: var(--bad-text); }
.price-box .btn { margin-top: 12px; }
.gua { display: flex; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--surface); font-size: 13.5px; color: var(--soft); }
.gua .ic { color: var(--ok); margin-top: 1px; }
.page-gap { height: 12px; }

/* оплата */
.sub-hd { margin: -8px 8px 16px; font-size: 14px; color: var(--muted); }
.pay-card { background: var(--surface); border-radius: 24px; padding: 18px 16px 16px; }
.sum { display: flex; align-items: baseline; justify-content: space-between; }
.sum span { font-size: 14px; color: var(--muted); }
.sum b { font: 700 44px/1 var(--font-data); }
ol.steps { list-style: none; counter-reset: st; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ol.steps li { counter-increment: st; display: flex; gap: 12px; font-size: 14.5px; color: #E4DFF5; }
ol.steps li::before { content: counter(st); flex: none; width: 26px; height: 26px; border-radius: 13px; background: var(--raised);
  color: var(--icon); font: 600 15px/26px var(--font-data); text-align: center; }
ol.steps b { color: #fff; font-weight: 600; }
.code-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 16px; padding: 14px 16px;
  border: 2px dashed var(--accent); border-radius: 18px; background: #1F1A47; color: #fff; cursor: pointer; text-align: left; }
.code-btn b { font: 700 40px/1 var(--font-data); letter-spacing: .06em; overflow-wrap: anywhere; }
.code-btn.sm b { font-size: 30px; }
.code-btn.off { opacity: .5; }  /* SALE у Free: виден, но не работает без Pro */
.code-btn > span { display: flex; align-items: center; gap: 6px; font: 500 14px var(--font-ui); color: var(--icon); flex: none; }
.code-btn > span .ic { width: 17px; height: 17px; }
.code-btn + .btn { margin-top: 12px; }
.pay-card .note { text-align: center; margin: 12px 0 0; }
.help { display: block; margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- главная */
.sky { position: relative; height: 300px; background-repeat: no-repeat; background-size: cover; }
.sky::before { content: ""; position: absolute; inset: 0; }
.sky h1 { position: absolute; left: 20px; right: 20px; top: 22px; margin: 0; font-size: 34px; text-shadow: 0 1px 14px rgba(28, 22, 64, .45); }
.sky h1 span { display: block; }
/* праздник: строка под приветствием (внизу «неба») и фото дня вместо неба */
.sky .hday { position: absolute; left: 20px; right: 20px; bottom: 26px; margin: 0; font-size: 14px; color: var(--soft);
  text-shadow: 0 1px 10px rgba(28, 22, 64, .6); }
.sky .hday b { display: block; font-weight: 600; font-size: 17px; color: #fff; margin-bottom: 2px; }
.sky .hday span { display: block; }
.sky .hday em { display: block; font-style: normal; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); margin-bottom: 2px; }
.sky .hday a { display: inline-block; margin-top: 6px; color: #fff; font-weight: 500; }
.sky.holiday { background-size: cover; background-position: center; }
.sky.holiday::before { background: linear-gradient(180deg, #1C1640 0, rgba(28,22,64,.55) 70px, rgba(28,22,64,.1) 38%, rgba(28,22,64,.55) 72%, #1C1640 100%); }
.sky .hcredit { position: absolute; right: 12px; top: 8px; font-size: 10px; color: rgba(255, 255, 255, .55); }
.sky.morning { background-image: url(img/sky-morning.jpg); background-position: center 10%; }
.sky.morning::before { background: linear-gradient(180deg, #1C1640 0, rgba(28,22,64,.74) 56px, rgba(28,22,64,.44) 140px, rgba(28,22,64,.12) 50%, rgba(28,22,64,0) 62%, #1C1640 100%); }
.sky.day { background-image: url(img/sky-day.jpg); background-position: center 12%; }
.sky.day::before { background: linear-gradient(180deg, #1C1640 0, rgba(28,22,64,.7) 56px, rgba(28,22,64,.38) 140px, rgba(28,22,64,.1) 50%, rgba(28,22,64,0) 62%, #1C1640 100%); }
.sky.evening { background-image: url(img/sky-evening.jpg); background-position: center 19%; }
.sky.evening::before { background: linear-gradient(180deg, #1C1640 0, rgba(28,22,64,.62) 56px, rgba(28,22,64,.3) 130px, rgba(28,22,64,.05) 50%, rgba(28,22,64,0) 62%, #1C1640 100%); }
.sky.night { background: #05050A url(img/sky-night-wing.jpg) center 38% / cover no-repeat; }
.sky.night::before { background: linear-gradient(180deg, #1C1640 0, rgba(28,22,64,.3) 56px, rgba(28,22,64,0) 120px, rgba(28,22,64,0) 76%, #1C1640 100%); }
.sky.evening h1, .sky.night h1 { text-shadow: 0 1px 14px rgba(28, 22, 64, .35); }
.home-order { padding: 0 20px; margin-top: -6px; position: relative; }
.home-order h2 { margin: 0; font-weight: 600; font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.home-order p { margin: 6px 0 16px; color: var(--soft); }
.act { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act .btn { width: auto; font-size: 16px; padding: 0 22px; }
.act .pr { text-align: right; line-height: 1.35; font-size: 13px; color: var(--muted); }
.act .pr b { display: block; font-weight: 600; font-size: 16px; color: #fff; }
.blocks { padding: 24px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.blocks .ban { margin: 0; }
.diary { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: var(--surface); color: #fff; text-decoration: none; }
.diary .head { display: flex; align-items: center; gap: 10px; }
.diary .head b { flex: 1; font-weight: 600; font-size: 17px; }
.diary .head > .ic { color: var(--muted); }
.mini-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-tiles > div { padding: 10px 12px 9px; border-radius: 14px; background: var(--raised); min-width: 0; }
.mini-tiles b { display: block; font: 600 30px/1 var(--font-data); white-space: nowrap; }
.mini-tiles span { display: block; margin-top: 3px; font-size: 12px; color: var(--soft); }
.last { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.last b { font-weight: 500; color: #fff; }
.diary .hint { font-size: 13.5px; color: var(--muted); }
.hrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); color: #fff; text-decoration: none; }
.hrow .grow { flex: 1; min-width: 0; }
.hrow .grow b { display: block; font-weight: 600; font-size: 15px; }
.hrow .grow span { font-size: 13px; color: var(--muted); }
.hrow > .ic { color: var(--muted); }
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hcard { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px; background: var(--surface); color: #fff;
  text-decoration: none; min-height: 108px; }
.hcard .box-ic { margin-bottom: 6px; }
.hcard b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.hcard > span:last-child { font-size: 13px; color: var(--muted); }

/* ---------- полёты */
.list-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; }
.list-hd h1 { margin: 0 8px; font-size: 30px; }
.list-hd .pill-btn .ic.lk { width: 14px; height: 14px; color: var(--faint); }
.list-hd .hd-pills { display: flex; gap: 6px; flex: none; }
/* сканер посадочного талона: камера во весь экран, рамка-подсказка, внизу подсказка и «Фото из галереи» */
.scanner { position: fixed; inset: 0; z-index: 60; background: var(--map-space); }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner .sc-frame { position: absolute; left: 8%; right: 8%; top: 30%; height: 28%; border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(15, 11, 36, .45); pointer-events: none; }
.scanner.no-cam .sc-frame, .scanner.no-cam video { display: none; }
.scanner .sc-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(12px + env(safe-area-inset-top)) 14px 0;
  display: flex; justify-content: space-between; align-items: center; }
.scanner .sc-tools { display: flex; gap: 8px; }
.scanner .sc-tool { min-width: 42px; height: 42px; padding: 0 10px; border: 0; border-radius: 21px; background: rgba(15, 11, 36, .6);
  color: #fff; display: grid; place-items: center; font: 600 15px var(--font-ui); cursor: pointer; }
.scanner .sc-tool.on { background: var(--accent); }
.scanner .sc-x { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(15, 11, 36, .6); color: #fff;
  display: grid; place-items: center; cursor: pointer; }
.scanner .sc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.scanner .sc-hint { margin: 0; max-width: 320px; color: #fff; font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.scanner.no-cam .sc-bottom { top: 0; justify-content: center; }
.scanner #sc-photo { width: auto; padding: 0 22px; }
/* «Читаем код…» — пока распознаётся фото талона */
.scan-busy { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(15, 11, 36, .62); }
.scan-busy > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 28px; border-radius: 20px; background: var(--surface); text-align: center; }
.scan-busy small { color: var(--muted); }
.scan-busy .spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--raised); border-top-color: var(--icon); animation: scan-spin .8s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
.list-hd .hd-pills .pill-btn { padding: 0 12px; }
.year { margin: 18px 12px 8px; font: 600 22px/1 var(--font-data); color: var(--faint); }
.fl-list { display: flex; flex-direction: column; gap: 8px; }
.fl { display: flex; align-items: stretch; border-radius: 18px; background: var(--surface); overflow: hidden; color: #fff; text-decoration: none; cursor: pointer; }
.fl .date { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--raised); color: var(--soft); font-size: 12px; line-height: 1.1; padding: 8px 0; }
.fl .date b { display: block; font: 600 26px/1 var(--font-data); color: #fff; }
.fl .date b.code { font-size: 17px; letter-spacing: .02em; }  /* номер заказа — случайный код из 5 знаков */
.fl .main { flex: 1; min-width: 0; padding: 10px 14px; border-left: 2px dashed var(--bg); }
.fl .l1, .fl .l3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fl .l1 { align-items: baseline; }
.fl .route { font: 600 22px/1.1 var(--font-data); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl .route i { font-style: normal; color: var(--faint); margin: 0 4px; }
/* будущий рейс: в списке — рамка вместо заливки, в карточке — крупный отсчёт */
.fl.future { border: 1.5px dashed var(--faint); }  /* не .plan: так называется карточка тарифа, её стили сюда наложились бы */
#plan-list:not(:empty) + .search { margin-top: 18px; }  /* поиск под плашками «В планах» — не вплотную */
/* вылет уже был: под строкой рейса — кнопки «Да» и «Перенесли» */
.fl.future.ask { flex-direction: column; cursor: default; }
.fl.future.ask .fl-row { display: flex; align-items: stretch; color: inherit; text-decoration: none; }
.fl.future.ask .btns { padding: 10px; }
.fl.future .sub b { color: var(--text); font-weight: 600; }
.plan-box .cd-big { margin: 2px 0 12px; color: var(--muted); }
.plan-box .cd-big b { display: block; font: 600 30px/1.15 var(--font-data); color: var(--text); }
.plan-box .btns { display: flex; gap: 8px; margin-top: 12px; }
.plan-box .btns .btn { flex: 1; }
.plan-note { display: flex; gap: 8px; align-items: flex-start; }
.fl .km { font-size: 13px; color: var(--soft); white-space: nowrap; }
.fl .sub { display: block; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid, .plan-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--raised);
  color: var(--icon); font-size: 11.5px; font-weight: 600; }
.vid .ic { width: 13px; height: 13px; stroke-width: 2; }
.limit-bar { display: block; margin-bottom: 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--warn-bg); color: var(--warn-text); text-decoration: none; font-size: 13.5px; }
.limit-bar .h { display: flex; justify-content: space-between; gap: 10px; }
.limit-bar b { color: #fff; font-weight: 600; }
.limit-bar .tr { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255, 226, 189, .18); overflow: hidden; }
.limit-bar .tr i { display: block; height: 100%; border-radius: 3px; background: var(--warn); }
.nothing { padding: 20px; text-align: center; color: var(--faint); }
/* пасхалка «чёрный ящик» (#fdr): лента бортового самописца */
.fdr { padding: 14px 16px; border-radius: 22px; background: var(--fdr-bg); border: 2px solid var(--fdr); }
.fdr-hd { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--fdr);
  font: 700 13px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .12em; }
.fdr-row { display: grid; grid-template-columns: 58px 1fr; gap: 2px 12px; padding: 10px 0; border-top: 1px dashed var(--line); }
.fdr-k { grid-row: span 2; color: var(--fdr); font: 700 14px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.fdr-v { font: 700 22px/1.1 var(--font-data); color: var(--text); }
.fdr-t { font-size: 13px; line-height: 1.4; color: var(--muted); }
/* «Что нового» (#news) */
.news-list { margin: 0; padding-left: 18px; color: var(--soft); font-size: 14px; line-height: 1.5; }
.news-list li + li { margin-top: 8px; }
.dot-new { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
/* фильтры «Моих полётов»: год, авиакомпания, самолёт, «с видео» */
.fl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fl-filters select, .ff-chip { -webkit-appearance: none; appearance: none; max-width: 100%; padding: 8px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font: 500 13px var(--font-ui); cursor: pointer; }
.fl-filters select { padding-right: 28px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px; background-position: right 15px center, right 10px center; background-repeat: no-repeat; }
.fl-filters select.on, .ff-chip.on { background-color: var(--accent); color: var(--accent-text); }
.ff-chip { display: inline-flex; align-items: center; gap: 6px; }
.ff-chip .ic { width: 15px; height: 15px; }
.fl-found { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 4px 0; font-size: 13.5px; color: var(--muted); }
.fl-found b { color: var(--text); }
.fl-found button { border: 0; background: none; color: var(--icon); font: 500 13.5px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nothing.moon { color: var(--muted); line-height: 1.5; }
.nothing.moon > b:first-child { display: block; margin-bottom: 4px; font: 700 30px/1.1 var(--font-data); color: var(--text); }

/* карточка полёта */
.cta { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 20px; background: var(--surface); }
.cta .tx { flex: 1; min-width: 0; }
.cta .tx b { display: block; font-weight: 600; font-size: 15px; }
.cta .tx span { font-size: 13px; color: var(--muted); }
.cta .btn { width: auto; min-height: 40px; padding: 0 16px; font-size: 14px; flex: none; border-radius: 20px; }
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.acts button, .acts a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 0; border-radius: 16px;
  background: var(--surface); color: #fff; font: 400 12px var(--font-ui); cursor: pointer; text-decoration: none; }
.acts .ic { width: 22px; height: 22px; color: var(--icon); }
.acts.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.acts.five button, .acts.five a { font-size: 11px; }
.acts .del, .acts .del .ic { color: var(--bad); }

/* превью маршрута в форме полёта */
.prev { margin-top: 12px; border-radius: 22px; background: var(--surface); overflow: hidden; }
.prev .mini-map { display: block; width: 100%; height: 170px; background: #0E0E0E; }
.prev .inf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.prev .inf b { font: 600 26px/1 var(--font-data); white-space: nowrap; }
.prev .inf span { flex: 1; font-size: 13.5px; color: var(--muted); }
.prev .more { padding: 0 16px 12px; font-size: 13px; color: var(--muted); }
.prev .more .ban { margin-top: 8px; }

/* ---------- статистика */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 14px 16px; border-radius: 20px; background: var(--surface); min-width: 0; }
.tile b { display: block; font: 600 38px/1 var(--font-data); white-space: nowrap; }
.tile b .u { display: inline; margin: 0 0 0 2px; font: 500 26px var(--font-ui); color: inherit; }
.tile span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.35; }
.scard { margin-top: 12px; padding: 16px; border-radius: 22px; background: var(--surface); }
.scard h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-weight: 600; font-size: 17px; }
.scard h2 span { font-weight: 400; font-size: 13px; color: var(--faint); }
.cchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* «Где вы были»: две плитки и раскрывающиеся списки стран и регионов */
.tiles.two { grid-template-columns: 1fr 1fr; }
.tile b small { font: 400 15px var(--font-ui); color: var(--faint); }
.plist { margin-top: 10px; border-top: 1px solid var(--line); }
.plist summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px 4px; list-style: none;
  cursor: pointer; font-weight: 600; font-size: 15px; color: var(--soft); }
.plist summary::-webkit-details-marker { display: none; }
.plist summary .ch { transform: rotate(90deg); transition: transform .2s; color: var(--faint); }
.plist[open] summary .ch { transform: rotate(-90deg); }
.prow { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--text); text-decoration: none; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow .l { flex: 1; min-width: 0; }
.prow .l b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow small { display: block; font-size: 12.5px; color: var(--faint); }
.prow .r { text-align: right; font: 700 20px/1 var(--font-data); }
.prow .r small { font: 400 11.5px var(--font-ui); margin-top: 2px; }
.prow .ch { color: var(--faint); }
.cchips span, .cchips a { padding: 6px 12px; border-radius: 999px; background: var(--raised); font-size: 14px; color: var(--text); text-decoration: none; }
.srow-link { display: block; color: inherit; text-decoration: none; }
.bar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 6px 0; }
.bar .n1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.bar .n1 b { font: 600 18px/1 var(--font-data); margin-right: 6px; }
.bar .n1 em { font-style: normal; color: var(--faint); font-size: 12.5px; }
.bar .trk { height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.bar .trk i { display: block; height: 100%; border-radius: 4px; background: var(--bar); }
.bar .v { text-align: right; font: 600 18px/1 var(--font-data); color: var(--soft); }
.bar.unk .n1 { color: var(--faint); }  /* «Не указано» — последней строкой и приглушённо */
.bar.unk .trk i { background: var(--faint); opacity: .45; }
.bar.unk .v { color: var(--faint); }
.cols { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 8px; }
.cols div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 11.5px; color: var(--faint); }
.cols b { font: 600 16px/1 var(--font-data); color: #fff; }
.cols i { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: var(--col); min-height: 4px; }
.cols.m { gap: 4px; }
.cols.w { height: 110px; }
.scard h2.mt { margin-top: 16px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.srow:first-child, h2 + .srow { border-top: 0; }
.srow .l { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 14px; flex: none; }
.srow .l .ic { color: var(--icon); width: 18px; height: 18px; }
.srow .r { text-align: right; font-size: 14px; min-width: 0; }
.srow .r b { font: 600 20px/1 var(--font-data); margin-right: 6px; }
.srow .r span { display: block; font-size: 12.5px; color: var(--faint); }
.pro-hd { display: flex; align-items: center; gap: 10px; margin: 28px 8px 12px; }
.pro-hd h2 { margin: 0; font-size: 22px; }

/* ---------- профиль */
.who { display: flex; align-items: center; gap: 14px; padding: 10px 8px 18px; }
.ava { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--raised); color: var(--icon);
  display: flex; align-items: center; justify-content: center; font: 600 30px/1 var(--font-data); }
.who h1 { margin: 0; font-size: 30px; }
.who .nick { display: block; font-size: 13.5px; color: var(--faint); }
.plan { padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid rgba(205, 191, 255, .18); }
.plan .h { display: flex; align-items: center; gap: 12px; }
.plan h2 { margin: 0; font-size: 20px; }
.plan p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.plan .btn { margin-top: 14px; }
.plan .tr { height: 6px; margin-top: 14px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.plan .tr i { display: block; height: 100%; border-radius: 3px; background: var(--icon); }
/* профиль, вариант 3 (one_aero_tabbar/profile_3.html): талон, плитки, список, подвал */
.pf { display: flex; flex-direction: column; gap: 12px; }
.pf h1 { margin: 0 4px; }
.pf-card { position: relative; border-radius: 22px; background: var(--paper); color: var(--ink); overflow: hidden; }
.pf-card .top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; }
.pf-card .ava { width: 46px; height: 46px; background: var(--accent); color: #fff; font: 600 20px/1 var(--font-ui); }
.pf-card .name { flex: 1; min-width: 0; }
.pf-card .name b { display: block; font-weight: 600; font-size: 19px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card .name span { display: block; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card .plan-pill { padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--ink); font: 700 16px/1 var(--font-data); letter-spacing: 1px; }
.pf-card .pf-perf { height: 0; margin: 0 14px; border-top: 2px dashed var(--paper-line); }
.pf-card .pf-perf::before, .pf-card .pf-perf::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); margin-top: -12px; }
.pf-card .pf-perf::before { left: -11px; }
.pf-card .pf-perf::after { right: -11px; }
.pf-card .count { padding: 12px 16px 16px; }
.pf-card .count .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-card .count .row span { font-size: 12.5px; color: var(--ink-muted); }
.pf-card .count .row b { font: 700 28px/1 var(--font-data); white-space: nowrap; }
.pf-card .count .row b i { font-style: normal; color: var(--ink-muted); }
.pf-card .tr { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--paper-track); overflow: hidden; }
.pf-card .tr i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-tiles a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 20px;
  background: var(--surface); color: #fff; text-decoration: none; font-size: 13px; line-height: 1.3; text-align: center; }
.pf-tiles a .ic { width: 24px; height: 24px; color: var(--icon); }
.pf-tiles a small { display: block; font-size: 12px; color: var(--faint); white-space: nowrap; }
.pf .pf-links { gap: 8px; padding-right: 12px; }
.pf .pf-links .tx { flex: 1; }
.pf .pf-chip { padding: 7px 12px; border-radius: 999px; background: var(--raised); color: var(--icon); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.pf .li.tall { min-height: 58px; }
.pf h1 { font: 300 28px/1.1 var(--font-ui); }
.pf > .btn { border-radius: 16px; }
.pf-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 4px 8px 0; font-size: 12.5px; color: #6E679A; }
.pf-foot a { color: var(--faint); text-decoration: none; }
.pf-foot .dot-new { width: 6px; height: 6px; margin: 0 0 0 2px; background: var(--new-dot); }
.pf-foot .vers { flex-basis: 100%; margin: 0; }
.txt.mb { margin-bottom: 12px; }
.inv { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--faint); flex-wrap: wrap; }
.inv b { font: 600 20px/1 var(--font-data); color: #fff; margin-right: 4px; }
.txt { padding: 4px 16px; border-radius: 22px; background: var(--surface); }
.txt p { margin: 0; padding: 12px 0; font-size: 14px; color: var(--soft); border-top: 1px solid rgba(255, 255, 255, .07); }
.txt p:first-child { border-top: 0; }
.txt b { color: #fff; font-weight: 600; }
.txt.doc { padding: 16px; font-size: 14px; color: var(--soft); line-height: 1.55; }
.txt.doc b { color: #fff; }
.vers { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: #6E679A; }

/* Pro и курс: шапка с градиентом */
.pro-hero { margin-top: 8px; padding: 20px 20px 18px; border-radius: 26px; background: var(--gradient); }
.pro-hero .tag { background: rgba(28, 22, 64, .45); color: #fff; font-size: 12.5px; padding: 4px 10px; }
.pro-hero .tag .ic { width: 14px; height: 14px; }
.pro-hero h1 { margin: 12px 0 4px; font-size: 34px; line-height: 1.05; }
.pro-hero p { margin: 0; color: #F0E8FA; font-size: 14.5px; }
.pro-hero .pr { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.pro-hero .pr s { font: 600 28px/1 var(--font-data); color: rgba(255, 255, 255, .6); }
.pro-hero .pr b { font: 700 58px/1 var(--font-data); }
.pro-hero small { display: block; margin-top: 4px; font-size: 13px; color: #F0E8FA; }
.pro-hero a { color: #fff; }
.usage { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: var(--warn-bg); color: var(--warn-text); }
.usage .h { display: flex; justify-content: space-between; font-size: 14px; }
.usage .h b { font: 600 20px/1 var(--font-data); color: #fff; }
.usage .tr { height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255, 226, 189, .18); overflow: hidden; }
.usage .tr i { display: block; height: 100%; border-radius: 3px; background: var(--warn); }
.perks { margin: 0; padding: 4px 16px; border-radius: 22px; background: var(--surface); list-style: none; }
.perks li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.perks li:first-child { border-top: 0; }
.perks b { display: block; font-weight: 600; font-size: 15px; }
.perks li > span:last-child > span { font-size: 13px; color: var(--muted); }
.tbl { border-radius: 22px; background: var(--surface); overflow: hidden; }
.tr4 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; align-items: baseline; }
.tr4 > :not(:first-child) { text-align: right; }
.tr4.hd { border-top: 0; background: var(--raised); font-size: 12.5px; color: var(--muted); padding: 10px 16px; }
.tr4 b { font: 600 20px/1 var(--font-data); }
.tr4 s { color: var(--faint); }
.tr4 .pro { color: var(--icon); }
.promo-list .code-btn { margin-top: 0; }
.promo-list .code-btn + .note { margin: 6px 4px 12px; }

/* поддержка */
.tk { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; cursor: pointer; }
.tk .tx { flex: 1; min-width: 0; }
.tk .tx b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk .tx span { font-size: 13px; color: var(--muted); }
.tk > .ic { color: var(--faint); }
.thread { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; background: var(--surface); font-size: 14.5px; }
.msg.user { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 6px; }
.msg.admin { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg .when { font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
.msg .ph-note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.msg .ph-note .ic { width: 15px; height: 15px; }
.ref-line { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; font-size: 13.5px; color: var(--muted); }
.ref-line .ic { color: var(--icon); width: 16px; height: 16px; }

/* приветствие (мягкое согласие) */
.welcome { padding-top: 24px; }
.welcome .logo { display: block; width: 96px; height: 96px; border-radius: 50%; margin: 0 auto; }
.welcome h1 { text-align: center; margin-top: 18px; }
.welcome .intro { text-align: center; margin-top: -4px; }
.welcome .perks { margin-top: 18px; }
.welcome .note { text-align: center; margin-top: 16px; }
.welcome .txt.doc { margin-top: 12px; }

/* ---------- выбор из списка */
#picker { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; animation: rise .2s ease-out; }
.picker-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 0; }
.picker-close { width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
#picker-title { margin: 0; font-weight: 300; font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
.picker-search { display: flex; align-items: center; gap: 10px; margin: 14px 12px 0; padding: 0 8px 0 16px; height: 50px; border-radius: 25px;
  background: var(--surface); border: 1.5px solid var(--accent); color: var(--icon); }
#picker-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: 400 17px var(--font-ui); }
#picker-input::placeholder { color: var(--faint); font-size: 15px; }
#picker-input::-webkit-search-cancel-button { display: none; }
#picker-clear { width: 34px; height: 34px; border: 0; border-radius: 17px; background: var(--raised); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
#picker-clear .ic { width: 15px; height: 15px; }
#picker-hint { margin: 10px 24px 0; font-size: 13px; color: var(--faint); }
#picker-list { flex: 1; overflow-y: auto; padding: 0 12px 24px; }
#picker-list .lbl { margin: 20px 12px 8px; }
#picker-list .err { margin: 16px 12px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; position: relative; cursor: pointer; min-height: 56px; }
.opt + .opt::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px; background: var(--line); }
.opt.nocode + .opt::before, .opt + .opt.nocode::before { left: 16px; }
.opt .code { width: 46px; flex: none; font: 600 26px/1 var(--font-data); color: var(--icon); }
.opt .t { flex: 1; min-width: 0; }
.opt .t b { display: block; font-weight: 500; font-size: 15.5px; }
.opt .t b mark { background: none; color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.opt .t small { display: block; font-size: 13px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt > .ic { color: var(--icon); }

/* ---------- нижняя панель вкладок (плавающая) */
/* вариант A (one_aero_tabbar/tabbar_A.html): стеклянная капсула с 4 вкладками + отдельная круглая «+» справа */
#tabbar-wrap { position: fixed; left: 16px; right: 16px; bottom: calc(16px + var(--safe-bottom)); z-index: 10;
  display: flex; align-items: center; gap: 10px; }
#tabbar { flex: 1; min-width: 0; height: var(--tab-h); padding: 5px; display: flex; gap: 2px;
  border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#tabbar a { flex: 1; min-width: 0; border-radius: var(--r-pill); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--soft); text-decoration: none; font: 600 11px var(--font-ui); }
#tabbar a svg { width: 23px; height: 23px; }
#tabbar a.active { background: var(--tab-on-bg); color: var(--icon); }
#tab-add { flex: none; width: var(--tab-h); height: var(--tab-h); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff; text-decoration: none; }
#tab-add i { width: 46px; height: 46px; border-radius: 50%; background: var(--plus); display: flex; align-items: center; justify-content: center; }
#tab-add svg { width: 24px; height: 24px; }
#tab-add.active i { box-shadow: 0 0 0 3px rgba(205, 191, 255, .3); }
@media (min-width: 430px) { #tabbar-wrap { left: 50%; right: auto; width: 358px; transform: translateX(-50%); } }

#fallback-main { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + 28px + var(--safe-bottom)); z-index: 11;
  height: 50px; border: 0; border-radius: 14px; font: 600 16px system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--accent); color: #fff; box-shadow: var(--shadow); cursor: pointer; }
#fallback-main:disabled { opacity: .6; }
#toast { position: fixed; left: 14px; right: 14px; top: 14px; z-index: 30; display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--bg); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow);
  animation: rise .25s ease-out; font-weight: 600; font-size: 14.5px; }
#toast .ic { color: var(--accent); }
#toast span { flex: 1; min-width: 0; }
#toast .t-act { flex: none; border: 0; border-radius: 10px; padding: 7px 12px; background: var(--accent); color: #fff;
  font: 600 14px var(--font-ui); cursor: pointer; }

/* ---------- загрузка: перекидное табло */
#loader { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 26px; align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted); text-align: center; padding: 24px 24px 80px; transition: opacity .35s; }
#loader.off { opacity: 0; pointer-events: none; }
.board { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.board .brow { display: flex; gap: 4px; }
.tl { width: 36px; height: 54px; border-radius: 5px; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #372D6E 0, #372D6E 50%, #2D255E 50%, #2D255E 100%); font: 600 42px/1 var(--font-data);
  color: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #130F2E; }
.tl.sp { background: #241D4D; }
#loader-text { max-width: 300px; font-size: 15px; color: var(--soft); }
#loader-text:empty { display: none; }
#loader-retry { width: auto; min-width: 180px; padding: 0 28px; }
.board, .sky { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- пасхалка: табло со случайным рейсом (долгое нажатие на табло загрузки или «небо» на главной) */
#egg { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg); text-align: center; animation: egg-in .25s ease-out; }
#egg .tl { width: 30px; height: 46px; font-size: 34px; }
.egg-note { margin: 8px 0 0; font-size: 15px; color: var(--soft); }
.egg-hint { margin: 0; font-size: 13px; color: var(--faint); }
@keyframes egg-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- админка (старые классы — в новых цветах) */
.section { background: var(--surface); border-radius: 22px; padding: 4px 16px; margin-bottom: 12px; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .label { color: var(--muted); min-width: 110px; }
.row .value { flex: 1; text-align: right; }
.field { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.field:last-child { border-bottom: 0; }
.field .icon { width: 24px; text-align: center; color: var(--icon); }
.field .text { flex: 1; min-width: 0; }
.field .text small { display: block; color: var(--muted); font-size: 12px; }
.field .ph, .ph { color: var(--faint); }
.field input { border: 0; background: transparent; outline: none; width: 100%; text-align: right; padding: 0; color: var(--text); }
.field .text + input { width: 42%; flex: none; }
.check { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.flight { display: flex; gap: 12px; background: var(--surface); border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.flight .main { flex: 1; min-width: 0; }
.flight .route { font: 600 20px/1.1 var(--font-data); }
.flight .sub { color: var(--muted); font-size: 13px; }
.flight .km { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
#editor-map { height: 52vh; border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.wp { width: 18px; height: 18px; border-radius: 50%; background: var(--icon); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); cursor: grab; }
.ap { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--bg); }
.maplibregl-popup-content { background: var(--surface); color: var(--text); border-radius: 16px; padding: 12px 14px; font-family: var(--font-ui); }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }

/* ---------- багажная лента (services/wheel.py, #wheel): чемоданы с бирками едут под стрелку */
.belt { position: relative; height: 158px; margin: 10px -4px 4px; border-radius: 18px; overflow: hidden; background: var(--belt);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 10px 18px rgba(0, 0, 0, .45), inset 0 -10px 18px rgba(0, 0, 0, .45); }
.belt-mark { position: absolute; left: 50%; top: 0; bottom: 0; z-index: 2; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .15) 30%, rgba(255, 255, 255, .15) 70%, #fff); }
.belt-mark::before, .belt-mark::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; }
.belt-mark::before { top: 0; border-top: 14px solid #fff; } .belt-mark::after { bottom: 0; border-bottom: 14px solid #fff; }
/* лента — пластины движутся вместе с чемоданами */
.belt-strip { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 0 6px;
  background: repeating-linear-gradient(90deg, var(--belt-slat) 0 50px, var(--belt) 50px 52px);
  transition: transform 5s cubic-bezier(.08, .6, .1, 1); will-change: transform; }
.bag { position: relative; flex: none; width: 92px; height: 74px; margin-top: 16px; border-radius: 12px; background: var(--bag);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .18), 0 6px 10px rgba(0, 0, 0, .35); }
.bag .bh { position: absolute; left: 50%; top: -14px; width: 34px; height: 16px; transform: translateX(-50%);
  border: 4px solid var(--bag); border-bottom: 0; border-radius: 10px 10px 0 0; filter: brightness(.8); }  /* ручка */
.bag .tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); max-width: 84px; padding: 4px 7px;
  border-radius: 5px; background: var(--tag); color: var(--tag-ink); font: 700 11px/1.15 var(--font-ui); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.bag.win { outline: 3px solid #fff; outline-offset: 3px; }
.wheel-win { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--surface); text-align: center; }
.wheel-win b { display: block; font: 700 28px/1.1 var(--font-data); color: #fff; }
.wheel-win span { display: block; margin: 4px 0 10px; color: var(--muted); }
.wheel-win.ok b { color: var(--ok); }
.wdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.wheel-cta { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface);
  color: #fff; text-decoration: none; }
.wheel-cta .tx { flex: 1; min-width: 0; } .wheel-cta .tx b { display: block; } .wheel-cta .tx span { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .belt-strip { transition: none; } }

/* ---------- карточка аэропорта (#airport/КОД): ссылки из полёта, сводка METAR */
.ap-links { display: grid; gap: 8px; margin-top: 12px; }
.metar-raw { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-tile); background: var(--raised); color: var(--soft);
  font: 400 12.5px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; word-break: break-word; }

/* ---------- квиз дня (services/quiz.py, #quiz) */
.quiz-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; }
.quiz-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--raised); }
.quiz-dots i.now { background: var(--icon); }
.quiz-dots i.ok { background: var(--ok); }
.quiz-dots i.bad { background: var(--bad); }
.quiz-q .quiz-n { font-size: 13px; color: var(--faint); }
.quiz-q h2 { margin: 4px 0 14px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.quiz-photo { margin: 0 0 14px; }
.quiz-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-tile); background: var(--raised); }
.quiz-photo figcaption { margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--raised);
  color: var(--text); font: 500 15px/1.3 var(--font-ui); text-align: left; cursor: pointer; }
.quiz-opt:disabled { cursor: default; opacity: .6; }
.quiz-opt.ok { opacity: 1; border-color: var(--ok); background: var(--ok-bg); color: var(--ok-text); }
.quiz-opt.bad { opacity: 1; border-color: var(--bad); background: var(--bad-bg); color: var(--bad-text); }
.quiz-note { margin: 14px 2px 0; font-size: 14px; line-height: 1.45; color: var(--soft); }
.quiz-note.ok b { color: var(--ok); } .quiz-note.bad b { color: var(--bad); }
.quiz-done { padding: 18px 16px; border-radius: 22px; background: var(--surface); text-align: center; }
.quiz-done b { display: block; font: 700 40px/1 var(--font-data); }
.quiz-done span { display: block; margin-top: 6px; color: var(--muted); }
.quiz-sum { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.quiz-sum:first-of-type { border-top: 0; }
.quiz-sum b { display: block; font-weight: 500; color: var(--text); }
.quiz-sum > .ic { flex: none; margin-top: 2px; }
.quiz-sum.ok > .ic { color: var(--ok); } .quiz-sum.bad > .ic { color: var(--bad); }

/* ---------- MCDU: ввод полёта «как в кабине A320» (mcdu.js). Экран — 14 строк × 24 знака, шрифт B612 Mono */
.mcdu-hint { margin: 0 4px 12px; }
/* корпус светлый серо-голубой, как у настоящего; по углам — винты */
.mcdu { position: relative; margin: 0 0 24px; padding: 10px 10px 16px; border-radius: 14px; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; background: linear-gradient(170deg, var(--mcdu-body), var(--mcdu-body-lo));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 var(--mcdu-edge); }
.mcdu::before, .mcdu::after { content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4F6F8, #9AA4AF); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.mcdu::before { left: 9px; } .mcdu::after { right: 9px; }
.mc-ann { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }  /* окошки сигнальных ламп сверху */
.mc-ann i { width: 30px; height: 8px; border-radius: 3px; background: var(--mcdu-slot); box-shadow: inset 0 1px 2px #000; }
.mc-mid { display: grid; grid-template-columns: 24px 1fr 24px; gap: 6px; font-family: 'B612 Mono', monospace; }
.mc-scr, .mc-lsk { display: grid; grid-template-rows: repeat(14, 1.24em); padding: 7px 0; }
.mc-scr { padding: 7px 7px; border-radius: 8px; background: var(--mcdu-screen); line-height: 1.24em;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 18px rgba(0, 0, 0, .9), 0 0 0 4px var(--mcdu-slot), 0 0 0 5px var(--mcdu-edge);
  overflow: hidden; transition: filter .15s; }
.mc-lsk button { position: relative; align-self: center; height: 72%; border: 0; border-radius: 3px; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--mcdu-key-hi), var(--mcdu-key)); box-shadow: 0 2px 0 var(--mcdu-edge); }
.mc-lsk button::after { content: ""; position: absolute; top: 50%; width: 6px; height: 1.5px; background: var(--mcdu-tick); }  /* чёрточка к строке */
.mc-lsk.l button::after { right: -7px; } .mc-lsk.r button::after { left: -7px; }
.mc-lsk button:active, .mc-k:active { transform: translateY(1px); box-shadow: none; }
.mc-lsk button:nth-child(1) { grid-row: 3; } .mc-lsk button:nth-child(2) { grid-row: 5; } .mc-lsk button:nth-child(3) { grid-row: 7; }
.mc-lsk button:nth-child(4) { grid-row: 9; } .mc-lsk button:nth-child(5) { grid-row: 11; } .mc-lsk button:nth-child(6) { grid-row: 13; }
.mc-t { position: relative; text-align: center; }
.mc-pg { position: absolute; right: 0; top: 0; font-size: .72em; }
.mc-l, .mc-d { display: flex; justify-content: space-between; align-items: flex-end; white-space: pre; min-width: 0; }
.mc-l { font-size: .72em; line-height: 1.6; }
.mc-sp { white-space: pre; }
.mc-scr .w { color: var(--mcdu-white); } .mc-scr .c { color: var(--mcdu-cyan); }
.mc-scr .g { color: var(--mcdu-green); } .mc-scr .a { color: var(--mcdu-amber); }
/* функциональные клавиши: 2 ряда по 6 + BRT / DIM справа */
.mc-fn { display: grid; grid-template-columns: repeat(6, 1fr) .8fr; gap: 5px; margin-top: 14px; }
/* низ как в кабине: слева AIRPORT, стрелки 2×2 и круглые цифры, справа буквы — начинаются на уровне AIRPORT */
.mc-low { display: grid; grid-template-columns: 3fr 5fr; gap: 12px; margin-top: 8px; align-items: stretch; }
.mc-left { display: grid; gap: 6px; }
.mc-apt, .mc-slew { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.mc-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
/* буквы — на всю высоту левой части: A–E на уровне AIRPORT, ряд Z…CLR вровень с нижним рядом цифр (как в кабине) */
.mc-abc { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5px; align-content: space-between; }
.mc-k { min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; color: var(--mcdu-key-text);
  font: 700 15px 'B612 Mono', monospace; background: linear-gradient(180deg, var(--mcdu-key-hi), var(--mcdu-key));
  box-shadow: 0 2px 0 var(--mcdu-edge), 0 3px 4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.mc-num .mc-k { border-radius: 50%; aspect-ratio: 1; height: auto; max-width: 38px; justify-self: center; width: 100%; }
.mc-k.sm { font-size: 10px; }
.mc-k.cmp { box-shadow: 0 2px 0 var(--mcdu-edge), 0 3px 4px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .55); }  /* N E S W в рамке */
.mc-k i { display: block; font-style: normal; font-size: 8px; line-height: 1; }  /* △ под OVFY */
.mc-k.fn { height: 32px; font: 700 8.5px/1.1 'B612 Mono', monospace; letter-spacing: .02em; }
.mc-k.fn.bd { font-size: 9px; }
.mc-k.fn.ar { font-size: 15px; }

@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }