/* «Билетик» находки (общий для Mini App и лендинга; на сайт копируется скриптом site/_build.py).
   Все размеры в cqw — билет масштабируется как картинка при любой ширине (≈ 8px на 1cqw при ширине 800). Уровни: wow 🚀 · super 🔥 · good ⚡ · sale 🏷. */
.tk { container-type: inline-size; position: relative; width: 100%; display: block; text-align: left; filter: drop-shadow(0 6px 12px rgba(16, 28, 60, 0.28)); -webkit-tap-highlight-color: transparent; }
.tk__in { display: flex; flex-direction: column; aspect-ratio: 1.56 / 1; border-radius: 3.4cqw; overflow: hidden;
  -webkit-mask: radial-gradient(circle 2.5cqw at 0 82.5%, #0000 97%, #000) , radial-gradient(circle 2.5cqw at 100% 82.5%, #0000 97%, #000); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 2.5cqw at 0 82.5%, #0000 97%, #000), radial-gradient(circle 2.5cqw at 100% 82.5%, #0000 97%, #000); mask-composite: intersect; }
.tk__main { position: relative; flex: 1 1 82.5%; min-height: min-content; padding: 3.2cqw 3.6cqw 0; color: var(--tk-ink, #fff); background: var(--tk-bg); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto auto auto auto auto 1fr auto; column-gap: 2cqw; align-content: start; }
.tk__main > * { position: relative; z-index: 1; }
.tk__main > .tk__str, .tk__main > .tk__s, .tk__main > .tk__rocket { position: absolute; z-index: 0; }
.tk__str { top: 0; right: 15cqw; width: 26cqw; height: 3.4cqw; background: var(--tk-stripes); transform: skewX(-25deg); border-radius: 0 0 1cqw 1cqw; }
.tk__brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 1.6cqw; }
.tk__logo { width: 7cqw; height: 7cqw; color: currentColor; flex: none; display: block; }
.tk__logo svg { width: 100%; height: 100%; display: block; }
.tk__bn { font-weight: 800; font-size: max(11px, 2.9cqw); line-height: 1.05; letter-spacing: -0.01em; max-width: 8cqw; }
.tk__badge { grid-column: 1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 1cqw; padding: 0.8cqw 3cqw 0.8cqw 1.6cqw; border-radius: 99px; background: var(--tk-badge-bg); color: var(--tk-badge-ink); box-shadow: var(--tk-badge-ring, none); }
.tk__badge b { font-size: max(12px, 3.9cqw); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; }
.tk__bi { font-style: normal; font-size: max(14px, 4.6cqw); line-height: 1; display: inline-block; }
.tk__fox { position: absolute !important; top: 0.8cqw; right: 3.4cqw; width: 17cqw; height: 17cqw; object-fit: contain; z-index: 2; filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.25)); }
.tk__from { grid-column: 1 / -1; grid-row: 3; margin-top: 1.4cqw; font-size: max(11px, 3cqw); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.92; }
.tk__city { grid-column: 1; grid-row: 4; font-size: 10.6cqw; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; }
.tk__country { grid-column: 1; grid-row: 5; display: flex; align-items: center; gap: 1.4cqw; margin-top: 0.8cqw; font-size: max(11px, 2.9cqw); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.95; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tk__flag { font-size: 4.6cqw; line-height: 1; letter-spacing: 0; }
.tk__price { grid-column: 2; grid-row: 4 / 6; align-self: end; justify-self: end; max-width: 48cqw; display: grid; grid-template-columns: auto auto; grid-template-areas: "p d" ". b"; align-items: center; column-gap: 1.6cqw; text-align: right; }
.tk--ps .tk__price, .tk--pxs .tk__price { grid-template-areas: "p p" "d b"; justify-items: end; row-gap: 0.8cqw; }
.tk--ps .tk__price b, .tk--pxs .tk__price b { grid-column: 1 / -1; justify-self: end; }
.tk__price b { grid-area: p; font-size: 10.5cqw; font-weight: 900; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.tk--ps .tk__price b { font-size: 7.6cqw; } .tk--pxs .tk__price b { font-size: 5.6cqw; }
.tk__disc { grid-area: d; padding: 0.7cqw 2cqw; border-radius: 99px; background: var(--tk-disc-bg); color: var(--tk-disc-ink); font-size: max(12px, 4.4cqw); font-weight: 900; line-height: 1.15; white-space: nowrap; }
.tk__base { grid-area: b; justify-self: end; margin-top: 0.8cqw; font-size: max(10px, 2.6cqw); font-weight: 600; opacity: 0.95; white-space: nowrap; }
.tk__base s { font-weight: 800; text-decoration-color: #ff3b30; text-decoration-thickness: 0.3cqw; }
.tk__det { grid-column: 1 / -1; grid-row: 7; align-self: end; margin: 1.6cqw 0 2.6cqw; display: flex; align-items: center; min-height: 6.6cqw; padding: 0.6cqw 1.8cqw; border-radius: 2.6cqw; background: var(--tk-det-bg); box-shadow: inset 0 0 0 1px var(--tk-det-line); font-size: max(11px, 3cqw); font-weight: 600; white-space: nowrap; overflow: hidden; }
.tk__det > span { display: inline-flex; align-items: center; gap: 1.3cqw; padding: 0 2cqw; min-width: 0; }
.tk__det > span + span { border-left: 1px dashed var(--tk-det-line); }
.tk__det > span:first-child { padding-left: 0.6cqw; }
.tk__det svg { width: 3.8cqw; height: 3.8cqw; flex: none; }
.tk__dair { overflow: hidden; text-overflow: clip; }
.tk__bag { display: inline-flex; align-items: center; gap: 0.6cqw; position: relative; }
.tk__bag svg { width: 4.4cqw; height: 4.4cqw; }
.tk__bag b { font-size: max(11px, 3cqw); font-weight: 800; }
.tk__bag.is-no::after { content: ""; position: absolute; left: -0.4cqw; right: -0.4cqw; top: 50%; height: 0.35cqw; background: #ff3b30; transform: rotate(-40deg); border-radius: 1px; }
.tk__stub { flex: 1 1 17.5%; min-height: 0; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 2cqw; padding: 0 3.6cqw; background: var(--tk-stub-bg, #fff); color: var(--tk-stub-ink, #14245c); position: relative;
  background-image: linear-gradient(90deg, rgba(60, 80, 150, 0.45) 55%, transparent 0); background-size: 1.4cqw 0.3cqw; background-repeat: repeat-x; background-position: 0 0; }
.tk__sal { display: flex; align-items: center; min-width: 0; }
.tk__al { max-height: 5.8cqw; max-width: 100%; width: auto; object-fit: contain; display: block; }
.tk__an { font-weight: 800; font-size: max(11px, 3cqw); line-height: 1.1; }
.tk__sr { display: flex; align-items: center; gap: 1.8cqw; justify-self: center; color: #1f56e0; }
.tk__sr svg { width: 5.6cqw; height: 5.6cqw; transform: rotate(45deg); flex: none; }
.tk__sr span { color: var(--tk-stub-ink, #14245c); display: flex; flex-direction: column; line-height: 1.15; }
.tk__sr b { font-size: max(12px, 3.4cqw); font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.tk__sr small { font-size: max(10px, 2.9cqw); font-weight: 600; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.tk__sb { display: flex; align-items: center; justify-content: flex-end; gap: 1.2cqw; color: #14245c; min-width: 0; }
.tk__logo--s { width: 5.6cqw; height: 5.6cqw; }
.tk__sb .tk__bn { font-size: max(10px, 2.6cqw); }

/* уровни */
.tk--wow { --tk-bg: radial-gradient(60% 80% at 88% 8%, rgba(110, 90, 255, 0.4), transparent 60%), linear-gradient(140deg, #1d2d9a 0%, #151c6a 50%, #0a0f45 100%); --tk-ink: #fff; --tk-badge-bg: linear-gradient(180deg, #14123a, #07051c); --tk-badge-ink: #ffd35a; --tk-badge-ring: inset 0 0 0 0.35cqw #f2b93b;
  --tk-disc-bg: linear-gradient(180deg, #ffd84a, #ffb61e); --tk-disc-ink: #3a2400; --tk-det-bg: rgba(255, 255, 255, 0.1); --tk-det-line: rgba(255, 255, 255, 0.32); --tk-stripes: repeating-linear-gradient(90deg, #ffd24a 0 2.2cqw, #6f5df0 2.2cqw 4.4cqw); }
.tk--super { --tk-bg: radial-gradient(60% 80% at 90% 10%, var(--red-glow, rgba(224, 120, 74, 0.3)), transparent 60%), linear-gradient(140deg, var(--red-a, #c23c30) 0%, #a8332d 55%, var(--red-b, #8f2a27) 100%); --tk-ink: #fff; --tk-badge-bg: linear-gradient(180deg, var(--chip-y-a, #f6cf50), var(--chip-y-b, #e9b72f)); --tk-badge-ink: #2c1500; --tk-badge-ring: none;
  --tk-disc-bg: linear-gradient(180deg, var(--chip-y-a, #f6cf50), var(--chip-y-b, #e9b72f)); --tk-disc-ink: #3a1600; --tk-det-bg: rgba(255, 255, 255, 0.12); --tk-det-line: rgba(255, 255, 255, 0.36); --tk-stripes: repeating-linear-gradient(90deg, var(--stripe-y, #f2bb3a) 0 2.2cqw, var(--stripe-o, #e48a2e) 2.2cqw 4.4cqw); }
.tk--good { --tk-bg: radial-gradient(70% 70% at 90% 0%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(140deg, #eaf6ff 0%, #cde7fb 100%); --tk-ink: #0b1f4d; --tk-badge-bg: #c4dffa; --tk-badge-ink: #0b1f4d; --tk-badge-ring: none;
  --tk-disc-bg: #c4dffa; --tk-disc-ink: #0b1f4d; --tk-det-bg: rgba(255, 255, 255, 0.55); --tk-det-line: rgba(30, 80, 170, 0.4); --tk-stripes: repeating-linear-gradient(90deg, #2aa8e4 0 2.2cqw, #1b5fd0 2.2cqw 4.4cqw); }
.tk--sale { --tk-bg: radial-gradient(70% 70% at 90% 0%, rgba(255, 255, 255, 0.85), transparent 60%), linear-gradient(140deg, #efeafe 0%, #d6cdf8 100%); --tk-ink: #1a1250; --tk-badge-bg: #c9bdf6; --tk-badge-ink: #1a1250; --tk-badge-ring: none;
  --tk-disc-bg: #cabef7; --tk-disc-ink: #1a1250; --tk-det-bg: rgba(255, 255, 255, 0.55); --tk-det-line: rgba(90, 70, 190, 0.4); --tk-stripes: repeating-linear-gradient(90deg, #7b63e8 0 2.2cqw, #3d2fa0 2.2cqw 4.4cqw); }
:root[data-theme="dark"] .tk { --tk-stub-bg: #1a2226; --tk-stub-ink: #e8f0f2; }
:root[data-theme="dark"] .tk__sr { color: #6fa3ff; }
:root[data-theme="dark"] .tk__sb { color: #e8f0f2; }
:root[data-theme="dark"] .tk__al { background: #fff; border-radius: 1cqw; padding: 0.4cqw 1cqw; }

/* звёзды и ракета (только у верхнего уровня) */
.tk__s { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1.4cqw 0.3cqw rgba(255, 255, 255, 0.8); }
.tk--c2 .tk__city { font-size: 7.4cqw; } .tk--c3 .tk__city { font-size: 6cqw; } .tk--c4 .tk__city { font-size: 4.8cqw; }
.tk__s1 { left: 6cqw; top: 40%; } .tk__s2 { left: 44cqw; top: 8%; width: 0.9cqw; height: 0.9cqw; } .tk__s3 { left: 52%; top: 60%; width: 0.8cqw; height: 0.8cqw; } .tk__s4 { right: 4cqw; top: 46%; background: #ffe9a8; }
.tk__rocket { left: 43cqw; top: 1.6cqw; width: 18cqw; height: auto; overflow: visible; }
.tk--anim .tk__s { animation: tk-tw 2.6s ease-in-out infinite; }
.tk--anim .tk__s2 { animation-delay: 0.6s; } .tk--anim .tk__s3 { animation-delay: 1.2s; } .tk--anim .tk__s4 { animation-delay: 1.8s; }
.tk--anim .tk__rk { animation: tk-fly 5s ease-in-out infinite; transform-origin: 50% 50%; }
.tk--anim .tk__fl { animation: tk-flk 0.16s linear infinite alternate; transform-origin: 90% 50%; }
.tk--anim .tk__fl2 { animation: tk-flk 0.12s linear infinite alternate-reverse; transform-origin: 90% 50%; }
.tk--anim .tk__bi { animation: tk-bi 3.6s var(--ease-in-out, ease-in-out) infinite; }
@keyframes tk-tw { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes tk-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3cqw, -1.6cqw) rotate(2deg); } }
@keyframes tk-flk { from { transform: scale(1, 0.85); opacity: 0.85; } to { transform: scale(1.12, 1.1); opacity: 1; } }
@keyframes tk-bi { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-0.6cqw) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .tk--anim .tk__s, .tk--anim .tk__rk, .tk--anim .tk__fl, .tk--anim .tk__fl2, .tk--anim .tk__bi { animation: none !important; } }

/* обёртки */
a.tkw, button.tkw { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; color: inherit; transition: transform var(--dur, 0.26s) var(--ease, ease); }
@media (hover: hover) { a.tkw:hover, button.tkw:hover { transform: translateY(-3px); } }
.tkw:focus-visible { outline: 3px solid var(--accent, #0e6c84); outline-offset: 4px; border-radius: 18px; }
.tkw.is-open .tk { filter: drop-shadow(0 0 3px var(--accent, #0e6c84)) drop-shadow(0 6px 12px rgba(16, 28, 60, 0.28)); }

/* карточка в ленте: билет + строка «срок · пересадки · виза · купить» */
.dcard { position: relative; display: flex; flex-direction: column; gap: 8px; animation: tile-in var(--dur-slow) var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.dcard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.dcard__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dcard__buy { flex: none; white-space: nowrap; }
.dcard .tile__sel { position: absolute; top: 10px; left: 10px; z-index: 5; }
.dcard.is-sel .tkw .tk { filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 6px 12px rgba(16, 28, 60, 0.28)); }
.feed--tk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.feed--tk > *, .dcard, .dtk, .hot { min-width: 0; }
.tk, .tkw { max-width: 100%; }
@media (min-width: 640px) { .feed--tk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .shell--web .feed--tk { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } }

.dtk { position: relative; display: flex; flex-direction: column; gap: 10px; }
.dtk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px; }
.shell--web .hot .tkw, .shell--web .hot .hot__chart { max-width: 780px; }

/* узкие билеты (телефон): чуть выше, чтобы строка деталей не упиралась в корешок */
@container (max-width: 460px) {
  .tk__in { aspect-ratio: 1.46 / 1; }
  .tk__det { margin-bottom: 3.4cqw; }
  .tk__stub { flex-basis: 19%; }
}

/* пунктирный маршрут с самолётом между городом вылета и лисом (как на карточке бота) */
.tk__path { position: absolute !important; z-index: 1; left: 26cqw; top: 25cqw; width: 37cqw; height: auto; color: currentColor; pointer-events: none; opacity: 0.9; }
.tk__stub::before { content: ""; position: absolute; right: 21cqw; bottom: 0; width: 17cqw; height: 2.6cqw; background: var(--tk-stripes); transform: skewX(-25deg); border-radius: 1cqw 1cqw 0 0; opacity: 0.9; pointer-events: none; }
@container (max-width: 460px) { .tk__path { display: none; } }
.pill--dom { font-size: var(--fs-2xs); background: var(--card-2); color: var(--muted); }

/* v2 (как карточки бота): бренд один раз вверху, авиакомпания только в корешке, дата один раз, цена в валюте человека + USD мелко */
.tk__brand { margin-top: 1.6cqw; }
.tk__bt { font-size: max(11px, 3cqw); font-weight: 600; }
.tk__dbag { display: inline-flex; align-items: center; gap: 1.2cqw; }
.tk__usd { display: block; text-align: right; font-size: max(10px, 2.5cqw); font-weight: 600; opacity: 0.85; white-space: nowrap; }
.tk__stub { grid-template-columns: 1.1fr 1.3fr 0.6fr; }
.tk__sal { gap: 1.4cqw; }
.tk__an--n { color: var(--tk-stub-ink, #14245c); font-weight: 800; font-size: max(11px, 3cqw); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tk__an--n { display: none; }
.tk__ss { justify-self: end; font-size: max(11px, 3cqw); font-weight: 700; color: var(--tk-stub-ink, #14245c); white-space: nowrap; }
.tk__sr { justify-self: start; }
.tk__fox--em { top: 0.4cqw !important; right: 1.6cqw !important; width: 21cqw !important; height: 21cqw !important; border: 0; border-radius: 0; background: none; filter: drop-shadow(0 0.5cqw 0.9cqw rgba(0, 0, 0, 0.3)); }
.tk--wow .tk__rocket { left: 40cqw; }
.tk--stack .tk__price { grid-template-areas: "p p" "d b"; justify-items: end; row-gap: 0.8cqw; }
.tk--stack .tk__price b { grid-column: 1 / -1; justify-self: end; }
.tk--stack .tk__price { max-width: 56cqw; }
.tk--stack .tk__base { font-size: max(9px, 2.3cqw); }
.tk--stack .tk__disc { font-size: max(11px, 3.8cqw); }

/* билет — ссылка или кнопка: никаких подчёркиваний, подсветки нажатия и выделения текста в iOS Safari / Android Chrome */
a.tkw, a.tkw:link, a.tkw:visited, a.tkw:hover, a.tkw:active, a.tkw:focus, a.tkw:focus-visible,
button.tkw, button.tkw:hover, button.tkw:active, button.tkw:focus { text-decoration: none !important; color: inherit; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none; }
.tkw *, .tkw *:hover, .tkw *:active, .tkw *:focus { text-decoration: none !important; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.tkw .tk__base s, .tkw .tk__base s * { text-decoration: line-through !important; }       /* зачёркнутая обычная цена — единственное зачёркивание */
.tkw:focus-visible { outline: 3px solid var(--accent, #0e6c84) !important; outline-offset: 4px; }
.tkw img { -webkit-user-drag: none; pointer-events: none; }
html.lite .tk--anim .tk__s, html.lite .tk--anim .tk__rk, html.lite .tk--anim .tk__fl, html.lite .tk--anim .tk__fl2, html.lite .tk--anim .tk__bi { animation: none !important; }