/* Market24.kz, прототип v2: площадка курсов валют. Дизайн-система - из prototype/index.html (docs/design-system.md).
   Светлый сайт, панели с линией 1px, без теней; зелёный - только лучший курс и «Открыто», --accent - интерфейс.
   С 19.10.2026 по правкам клиента: без топбара, меню, курса Нацбанка и блоков под списком; логотип M24 - файл клиента как есть.
   С 26.10.2026: интерфейс синий, из логотипа M24 (--accent, белый текст 5,6:1); --brand - бирюзовый логотип Exchange Market у их пунктов. */

/* ================= ТОКЕНЫ ================= */
:root{
  --page:#FFFFFF; --surface:#FFFFFF; --soft:#F2F4F6; --subtle:#F7F8FA; --band:#F3F5F7;
  --ink:#1B1F24; --ink-2:#3A4149; --muted:#5F6772; --line:#E2E6EA; --line-2:#CDD3D9;
  --good:#1A7F4B; --good-soft:#E8F4ED; --bad:#B23A2B; --warn-soft:#FFF5DC; --warn-ink:#6E4A00; --focus:#2A5BD7;
  --thumb:#7D8590; --brand:#5EB29A; --accent:#0060E0; --accent-hover:#004FBA; --accent-soft:#E8F0FD; --wa:#1FA855;
  --f-head:"Onest","Tenge","Onest Fallback",Arial,sans-serif;
  --f-body:"Tenge",Roboto,"Roboto Fallback",Arial,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --head-h:72px; --tab-h:60px; --gap:88px; --wrap:1400px;
  color-scheme:light;
}

/* ================= БАЗА ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--page);color:var(--ink);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:600;line-height:1.15;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
::selection{background:var(--accent-soft);color:var(--ink)}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:24px}
/* ссылка «к списку» для клавиатуры: спрятана выше экрана на свою высоту - длинный казахский текст на 320 не выглядывает */
.skip{position:absolute;left:16px;right:16px;top:0;z-index:100;width:max-content;max-width:calc(100% - 32px);padding:10px 16px;background:var(--ink);color:#FFFFFF;border-radius:var(--r-sm);text-decoration:none;font-weight:500;transform:translateY(-110%)}
.skip:focus{top:8px;transform:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* Font Awesome подставляет <svg> вместо <i> после отрисовки: место под иконку - квадрат 1em заранее */
/* иконки Font Awesome Free из встроенного спрайта (tools/icons.py): рисуются сразу со страницей, без внешнего скрипта */
.ico{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em;fill:currentColor;overflow:visible}
.ico-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* пока скрипт не нарисовал страницу (в теме её отдаёт сервер), под шапкой ничего не видно: содержимое появляется целиком, без прыжков и мигания */
.is-pending main,.is-pending .adm__aside,.is-pending .footer,.is-pending .savebar,.is-pending button.city-chip,.is-pending [data-city-name],.is-pending [data-city-in],.is-pending [data-city-loc],.is-pending .point-switch{visibility:hidden}
/* в демо главная сохранена уже отрисованной; время, «N мин назад» и «Открыто / Закрыто» считаются при открытии - устаревшие не показываем */
/* первая отрисовка без плавных переходов: элементы, которые скрипт создаёт и сразу переключает, не «проявляются» на глазах */
.is-booting *,.is-booting *::before,.is-booting *::after{transition:none !important}
.is-snap #clock,.is-snap .time,.is-snap [data-status],.is-snap .qscroll__thumb{visibility:hidden}
/* положение «крутилок» в HTML не сохраняется: в снимке --sel - номер выбранной валюты, барабан сразу стоит на ней (сборка tools/build_demo_v2.py) */
.is-snap .wheel > .wheel__item:first-child{margin-top:calc(var(--sel, 0) * -1 * var(--wi))}

/* флаги - файлы circle-flags (MIT), как <img> */
.flag{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(27,31,36,.08)}
.flag--sm{width:16px;height:16px}
.flag--lg{width:28px;height:28px}

/* ссылка-действие */
.link{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink);font-weight:500;text-align:left;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer}
.link:hover{text-decoration-color:currentColor}
.link > i,.link > svg{flex:none;color:var(--muted)}
.link .wa-ico{color:var(--wa)}
.wa-ico{color:var(--wa)}
.link__gis{flex:none;width:20px;height:20px;background:url("../2gis/2gis-app-icon-72.png") center/contain no-repeat}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-sm);font:500 16px/1.2 var(--f-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn--accent{background:var(--accent);color:#FFFFFF}
.btn--accent:hover{background:var(--accent-hover)}
.btn--line{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn--sm{min-height:40px;padding:0 14px;font-size:15px;gap:8px}
.btn--block{width:100%}
/* неактивная кнопка - нейтральная, но читаемая (без прозрачности) */
.btn[disabled],.btn[aria-disabled="true"]{background:var(--soft);border-color:var(--soft);color:var(--muted);pointer-events:none}

/* плашки у пунктов: текст в мягкой заливке, без точек */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--soft);color:var(--accent);font-size:13px;font-weight:500;white-space:nowrap}
.badge--gold{background:#FFF1C9;color:#6E4A00}
.badge--demo{background:var(--soft);color:var(--muted)}
.st--open{color:var(--good);font-weight:500}
.st--closed{color:var(--bad);font-weight:500}

/* язык: Рус / Қаз - в шапке справа */
.lang{display:flex;flex:none;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.lang a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 9px 0 7px;border-radius:7px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}
/* флаг языка: Россия - русский, Казахстан - казахский (circle-flags, как флаги валют) */
.lang__flag{flex:none;width:18px;height:18px;border-radius:50%}
.lang a:not([aria-current]) .lang__flag{opacity:.75;transition:opacity .15s}
.lang a:hover .lang__flag{opacity:1}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--soft);color:var(--ink)}

/* ================= ШАПКА ================= */
.header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink);text-decoration:none}
.brand__logo{flex:none;width:55px;height:44px;background:url("../logo/market24-logo.png") center/contain no-repeat}
.brand__text{display:grid;gap:3px}
.brand__name{font:600 19px/1 var(--f-head);letter-spacing:-.01em;white-space:nowrap}
.brand__tld{color:var(--muted);font-weight:500}
.brand__sub{font-size:12px;line-height:1.2;color:var(--muted)}
.header__actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex:1 1 auto}
.city-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap}
.city-chip:hover{border-color:var(--ink)}
.city-chip i,.city-chip svg{color:var(--accent)}

/* ================= ЗАГОЛОВОК ГОРОДА ================= */
.hero{padding-block:40px 28px}
.hero__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px}
.hero__title{font-size:clamp(28px,3vw,40px)}
.hero__city{display:inline;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--accent);text-decoration:underline dashed;text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
.hero__city:hover{color:var(--accent-hover)}
.hero__clock{color:var(--muted);font-size:15px}

/* ================= РАСКЛАДКА СПИСКА ================= */
.market{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:start;padding-bottom:var(--gap)}
.market__main{display:grid;gap:16px;min-width:0}
.aside{position:sticky;top:calc(var(--head-h) + 16px);display:grid;gap:16px}

/* таблица пунктов */
.xt-wrap{position:relative}
.xt{width:100%;border-collapse:separate;border-spacing:0}
.xt thead .c-point-cell{width:270px}
.xt thead .c-contact-cell{width:140px}
/* шапка таблицы остаётся вверху при прокрутке: валюты и сортировка всегда под рукой */
.xt thead{position:sticky;top:var(--head-h);z-index:5}
.xt thead .c-time-cell{width:80px}
/* шапка в две строки: валюта над парой «покупка / продажа», у каждой из них своя колонка - цифры стоят ровно под подписью */
.xt thead th{padding:12px 12px 10px;background:var(--subtle);text-align:left;vertical-align:bottom;font-weight:400;font-size:13px;color:var(--muted)}
.xt thead th[rowspan],.xt .xt__sub th{border-bottom:1px solid var(--line)}
.xt thead th.c-cur{padding:8px 2px 4px;text-align:center}
.xt .c-cur,.xt .c-buy,.xt .c-contact-cell,.xt .c-time-cell{border-left:1px solid var(--line)}
/* пара «покупка / продажа» читается как одно целое: покупка прижата вправо, продажа влево - к середине валюты,
   внутри пары 12px, а свободное место уходит к краям валюты, где её отделяет линия */
.xt .xt__sub th{padding:0 6px 10px;white-space:nowrap;font-size:13px;color:var(--ink-2)}
.xt .xt__sub .c-buy,.xt tbody .c-buy{padding-left:14px;padding-right:15px;text-align:right}
.xt .xt__sub .c-sell,.xt tbody .c-sell{padding-left:15px;padding-right:14px;text-align:left}
/* между покупкой и продажей - длинное тире, как на kurs.kz (решение melen 20.10; в текстах сайта по-прежнему короткое).
   Ставится, только когда у пункта есть оба курса; для экранного диктора не читается */
.xt tbody td.c-sell.has-pair{position:relative}
.xt tbody td.c-sell.has-pair::before{content:"—";content:"—" / "";position:absolute;left:0;top:14px;transform:translateX(-50%);font:400 18px/1.25 var(--f-body);color:var(--muted)}
.xt__sub .xt__h-sort{margin:0;padding:2px 0}
.xt tbody .c-val{white-space:nowrap}
/* заголовки-сортировки: пунктир - «можно нажать», активная - синяя со сплошной линией; начертание не меняется, чтобы колонки не дёргались */
.xt__h-sort{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;margin:-4px -6px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer;
  text-decoration:underline dotted;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px}
.xt__h-sort:hover{color:var(--ink);text-decoration-color:currentColor}
.xt__h-sort[aria-pressed="true"]{color:var(--accent);text-decoration-style:solid;text-decoration-color:currentColor}
.cw{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;gap:2px}
.xt tbody th,.xt tbody td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400}
.xt tbody tr:first-child th,.xt tbody tr:first-child td{border-top:0}
.xt tbody tr:hover > *{background:var(--subtle)}
.v{font:400 18px/1.25 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.v.is-best{color:var(--good);font-weight:600}
.v.is-none{font-size:14px;font-weight:400;color:var(--muted)}

/* ячейка пункта */
.pt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px}
.pt > :not(.pt__logo){grid-column:2}
.pt__logo{grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font:600 17px/1 var(--f-head);color:var(--ink-2);overflow:hidden}
.pt__logo--brand{background:var(--brand) url("../logo/exchange-market-logo-144.png") center/cover no-repeat;border-radius:10px}
.pt__name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:600 17px/1.25 var(--f-head)}
.pt__name a{color:var(--ink);text-decoration:none}
.pt__name a:hover{text-decoration:underline;text-underline-offset:4px}
.pt__addr{font-size:14px;color:var(--ink-2)}
.pt__addr i,.pt__addr svg{color:var(--muted);margin-right:4px}
.pt__status{font-size:13px;color:var(--muted)}
.pt__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pt__note{font-size:13px;color:var(--muted)}
.pt__flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pt__flags:not(.is-open) .is-extra{display:none}
.pt__flags .more{align-self:center;min-height:24px;margin-left:2px;padding:0 4px;border:0;border-radius:6px;background:none;color:var(--ink-2);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pt__flags .more:hover{color:var(--ink)}
.contact{display:grid;gap:6px;justify-items:start;font-size:15px}
.pt__phones{display:none;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.pt__phones a{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.pt__phones a:hover{text-decoration:underline;text-underline-offset:4px}
.contact a.phone{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.contact a.phone:hover{text-decoration:underline;text-underline-offset:4px}
.time{font:500 15px/1.3 var(--f-body);font-variant-numeric:tabular-nums}
.time small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.time--stale small{color:var(--warn-ink)}

/* реклама (правка клиента 29.10): картинка, текст, телефоны и соцсети из раздела администратора «Реклама» (assets/js/ad.js).
   Вид зависит от ширины места: узкая колонка справа (компьютер) - картинка над текстом; шире (под списком на телефоне
   и планшете, предпросмотр у администратора) - картинка слева, текст справа; горизонтальная картинка для телефона - во всю ширину */
.aside,.ad-box{container-type:inline-size}
.market--noad{grid-template-columns:minmax(0,1fr)}
.ad{display:grid;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.ad__tag{font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ad__pic{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--subtle)}
.ad__pic img{display:block;width:100%;height:auto}
.ad__pic--empty{display:grid;place-content:center;gap:6px;aspect-ratio:240 / 400;border:1px dashed var(--line-2);color:var(--muted);text-align:center;font-size:14px}
.ad__pic--empty b{font:600 15px/1.2 var(--f-head);color:var(--ink-2)}
.ad__body{display:grid;gap:10px;min-width:0}
.ad__text{font-size:14px;line-height:1.45;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.ad__tels{display:grid;justify-items:start;gap:2px}
.ad__tel{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.ad__tel svg{flex:none;color:var(--muted);font-size:13px}
.ad__tel:hover{color:var(--accent)}
.ad__socs{display:flex;flex-wrap:wrap;gap:8px}
.ad__soc{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);font-size:18px;transition:border-color .15s,color .15s}
.ad__soc:hover{border-color:var(--accent);color:var(--accent)}
@container (min-width:320px){
  .ad{grid-template-columns:minmax(0,min(200px,42%)) minmax(0,1fr);align-items:start;gap:12px 16px}
  .ad__tag{grid-column:1 / -1}
  .ad--wide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1199px){
  @container (min-width:320px){ .ad--m{grid-template-columns:minmax(0,1fr)} }
}

/* строки пунктов (телефон, планшет), как на obmen24: слева пункт, справа курс выбранной валюты и время */
.xr-list{display:none}
/* строка открывает страницу пункта по нажатию в любом месте (растянутая ссылка названия); телефон, WhatsApp и «+N» - поверх неё */
.xr{--xr-rate:132px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--xr-rate);border-top:1px solid var(--line);transition:background-color .15s}
.xr:hover{background:var(--subtle)}
.xr__name a::after{content:"";position:absolute;inset:0}
.xr__tel a,.xr__rate .more{position:relative;z-index:1}
.xr:first-child{border-top:0}
.xr__pt{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;min-width:0;padding:12px 12px 12px 14px;border-right:1px solid var(--line)}
.xr__name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font:600 16px/1.25 var(--f-head)}
.xr__name .badge{height:20px;padding:0 7px;font-size:12px}
.xr__name a{color:var(--ink);text-decoration:none}
.xr__name a:hover{text-decoration:underline;text-underline-offset:4px}
.xr__addr{display:flex;gap:6px;align-items:baseline;min-width:0;font-size:14px;color:var(--ink-2)}
.xr__addr > i,.xr__addr > svg{flex:none;color:var(--muted)}
.xr__addr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr__note{font-size:13px;line-height:1.35;color:var(--ink-2)}
.xr__tel{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-size:15px}
.xr__tel a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.xr__tel a > i,.xr__tel a > svg{color:var(--muted);font-size:13px}
.xr__tel .xr__wa{justify-content:center;width:36px;font-size:20px}
.xr__tel .xr__wa > i,.xr__tel .xr__wa > svg{font-size:20px;color:var(--wa)}
.xr__st{font-size:13px;color:var(--muted)}
.xr__rate{display:grid;align-content:start;justify-items:center;gap:6px;min-width:0;padding:12px 6px;text-align:center}
.xr__pair{display:flex;align-items:baseline;gap:6px}
.xr__pair .v{font-size:17px}
.xr__dash{color:var(--muted)}
.xr__dash::before{content:"—";content:"—" / ""}
.xr__rate .pt__flags{justify-content:center;gap:3px;margin-top:0}
.xr__rate .pt__flags .flag{width:14px;height:14px}

/* «крутилка» валют: барабан как у будильника iPhone - флаг, код и полное название валюты.
   --wh - высота барабана, --wi - высота строки; первая и последняя строки встают по центру за счёт отступов */
.curbar{display:none}
.wheel{--wh:132px;--wi:44px;position:relative;height:var(--wh);overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;
  padding-block:calc((var(--wh) - var(--wi)) / 2);margin:0;list-style:none;padding-inline:0;perspective:420px;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.wheel::-webkit-scrollbar{display:none}
/* мышь и тачпад: у края списка колёсико прокручивает страницу (палец на телефоне по-прежнему не утаскивает страницу) */
@media (hover:hover) and (pointer:fine){.wheel{overscroll-behavior:auto}}
/* поворот - у внутреннего элемента, а строка его обрезает: иначе 3D-трансформ меняет прокручиваемую область,
   браузер заново доводит прокрутку до строки, и барабан зацикливается */
.wheel__item{height:var(--wi);overflow:hidden;scroll-snap-align:center;cursor:pointer}
.wheel__in{display:flex;align-items:center;gap:10px;height:100%;padding:0 12px;color:var(--ink);transform-origin:center center -40px;will-change:transform,opacity}
/* начальный вид до скрипта (снимок главной в демо) совпадает с тем, что потом рисует paint(): без смены яркости при загрузке */
.wheel__in{opacity:.2}
.wheel__item[aria-selected="true"] > .wheel__in{opacity:1}
.wheel__item[aria-selected="true"] + .wheel__item > .wheel__in,.wheel__item:has(+ [aria-selected="true"]) > .wheel__in{opacity:.66}
.wheel__item[aria-selected="true"] + .wheel__item + .wheel__item > .wheel__in,.wheel__item:has(+ .wheel__item + [aria-selected="true"]) > .wheel__in{opacity:.32}
@media (prefers-reduced-motion:no-preference){
  .wheel:not(.wheel--col) .wheel__item:has(+ [aria-selected="true"]) > .wheel__in{transform:rotateX(16deg)}
  .wheel:not(.wheel--col) .wheel__item[aria-selected="true"] + .wheel__item > .wheel__in{transform:rotateX(-16deg)}
  .wheel:not(.wheel--col) .wheel__item:has(+ .wheel__item + [aria-selected="true"]) > .wheel__in{transform:rotateX(32deg)}
  .wheel:not(.wheel--col) .wheel__item[aria-selected="true"] + .wheel__item + .wheel__item > .wheel__in{transform:rotateX(-32deg)}
}
.wheel__txt{display:flex;align-items:center;gap:10px;min-width:0}
.wheel__txt b{flex:none;font:600 17px/1 var(--f-head)}
/* полное название валюты целиком (просьба клиента): длинное переносится на вторую строку, без многоточия */
.wheel__txt small{min-width:0;font-size:15px;line-height:1.15;color:var(--ink-2);-webkit-hyphens:auto;hyphens:auto}
.wheel-frame{position:relative;min-width:0;isolation:isolate}
.wheel-frame::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--wi,44px);margin-top:calc(var(--wi,44px) / -2);border-radius:var(--r-sm);background:var(--soft);z-index:-1}
.wheel:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
/* в шапке таблицы: ниже строки, название под кодом */
.wheel--col{--wh:120px;--wi:48px}
.wheel--col .wheel__in{justify-content:center;gap:6px;padding:0 4px;text-align:left}
.wheel--col .wheel__txt{display:grid;gap:2px}
.wheel--col .wheel__txt b{font-size:15px}
.wheel--col .wheel__txt small{font-size:12px;line-height:1.1;color:var(--muted)}
.wheel--col .flag{width:18px;height:18px}
.cw .wheel-frame{--wi:48px}
/* сортировка стрелками, как на kurs.kz: слева - по покупке, справа - по продаже; повторное нажатие - в обратную сторону */
.sorter{display:grid;place-items:center;align-content:center;gap:2px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;cursor:pointer;transition:color .15s,background-color .15s}
.sorter:hover{color:var(--ink);background:var(--soft)}
.sorter[aria-pressed="true"]{color:var(--accent)}
.sorter__ico{display:grid;place-items:center;height:20px;font-size:20px;line-height:1}
.sorter--caret{width:20px;height:40px}
.sorter__lbl{font-size:12px;font-weight:500}

/* быстрый выбор валюты над списком (правка клиента 20.10): нажатие ставит валюту в первую колонку.
   Компьютер - один ряд над таблицей, телефон и планшет - сетка 5 x 2 над «крутилкой» */
/* одна рамка (правка клиента 26.10): панель валют сверху, под ней «крутилки» и список; overflow:clip не мешает липкой шапке */
.rates{overflow:clip}
.quickbar{display:grid;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
/* все валюты города в ленте, которая листается вбок; видно 9,5 кнопки - половинка и затухание у края показывают, что есть ещё */
.quick{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 9 * 8px) / 9.5);gap:8px;margin:-3px;padding:3px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:3px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick.is-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.quick.is-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.quick.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.quick.is-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
/* бегунок под лентой, как на скриншоте клиента: стрелки по краям, ползунок тянется мышью и пальцем, нажатие по дорожке - переход */
.qscroll{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:6px}
.qscroll__btn{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:var(--ink-2);font-size:16px;cursor:pointer;transition:color .15s,background-color .15s}
.qscroll__btn:hover:not(:disabled){background:var(--soft);color:var(--ink)}
.qscroll__btn:disabled{color:var(--line-2);cursor:default}
.qscroll__track{position:relative;height:8px;border-radius:4px;background:var(--soft);cursor:pointer;touch-action:none}
.qscroll__thumb{position:absolute;left:0;top:0;height:100%;min-width:32px;border-radius:4px;background:var(--thumb);cursor:grab;touch-action:none;transition:background-color .15s}
.qscroll__thumb::before{content:"";position:absolute;inset:-10px 0}
.qscroll__thumb:hover,.qscroll__thumb.is-drag{background:var(--ink-2)}
.qscroll__thumb.is-drag{cursor:grabbing}
.quick__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:44px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:600 15px/1 var(--f-head);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.quick__btn{scroll-snap-align:start}
.quick__btn .flag{flex:none;width:20px;height:20px;pointer-events:none}
.quick__btn:hover{border-color:var(--line-2);background:var(--subtle)}
.quick__btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
/* стрелка ▾ на выбранной валюте «крутилки»: открывает список всех валют, как на kurs.kz */
.wheel__open{position:absolute;top:50%;right:4px;z-index:1;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--muted);font-size:12px;cursor:pointer;transition:color .15s,background-color .15s}
.wheel__open:hover{color:var(--ink);background:var(--line)}
.wheel__open svg,.wheel__open i{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.wheel__open[aria-expanded="true"]{color:var(--accent)}
.wheel__open[aria-expanded="true"] svg,.wheel__open[aria-expanded="true"] i{transform:rotate(180deg)}
.cw .wheel__open{right:0;width:22px}
.cw .wheel__in{padding-right:24px}
/* выпадающий список валют: флаг, код, полное название; длинный список прокручивается внутри */
.curmenu{position:absolute;z-index:45;display:grid;align-content:start;padding:6px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md)}
.curmenu__item{display:grid;grid-template-columns:22px 40px minmax(0,1fr);align-items:center;gap:10px;min-height:42px;padding:6px 10px;border:0;border-radius:8px;
  background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.curmenu__item b{font:600 15px/1 var(--f-head)}
.curmenu__item span{font-size:14px;line-height:1.25;color:var(--ink-2)}
.curmenu__item:hover{background:var(--subtle)}
.curmenu__item[aria-selected="true"]{background:var(--accent-soft)}
.curmenu__item[aria-selected="true"] b{color:var(--accent)}
.curmenu__item:focus-visible{outline-offset:-2px}
/* пункт без обновлений больше суток: страница открывается по ссылке, в списке города его нет */
.notice.notice--warn{background:var(--warn-soft);color:var(--warn-ink)}
.notice.notice--warn i,.notice.notice--warn svg{color:var(--warn-ink)}
.board__hidden{margin:14px 22px}


/* галерея пункта: листается стрелками, пальцем и клавишами, по нажатию - на весь экран */
.gal{position:relative}
/* место под шапку пункта и галерею занято заранее: пока скрипт их не нарисовал, страница не прыгает (в теме их отдаёт сервер) */
.gal:empty{aspect-ratio:4 / 3;border-radius:var(--r-md);background:var(--soft)}
.ph:empty{min-height:150px}
.gal__track{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-md);background:var(--soft)}
.gal__track::-webkit-scrollbar{display:none}
.gal__track:focus-visible{outline-offset:2px}
.gal__slide{position:relative;flex:0 0 100%;aspect-ratio:4 / 3;padding:0;border:0;background:none;scroll-snap-align:start;cursor:zoom-in}
.gal__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal__slide:focus-visible{outline-offset:-3px}
.gal__nav{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;cursor:pointer;transition:opacity .2s,background-color .15s}
.gal__nav:hover{background:#FFFFFF}
.gal__nav:disabled{opacity:0;pointer-events:none}
.gal__nav--prev{left:8px}
.gal__nav--next{right:8px}
.gal__count{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(27,31,36,.74);color:#FFFFFF;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;pointer-events:none}
.gal__empty{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:4 / 3;padding:20px;border-radius:var(--r-md);background:var(--soft);color:var(--muted);text-align:center;font-size:14px}
.gal__empty i,.gal__empty svg{font-size:22px;margin-bottom:2px}
.gal__empty span{font-weight:500;color:var(--ink-2)}
.gal__empty small{font-size:13px}

/* просмотр фото на весь экран: светлый, как сайт; нажатие на фото или лупа - увеличение вдвое, увеличенное двигается */
.lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--surface);color:var(--ink)}
.lb[open]{display:flex;flex-direction:column;animation:em-fade-in .2s ease}
.lb.is-closing{animation:em-fade-out .15s ease forwards}
.lb::backdrop{background:var(--surface)}
.lb__bar{flex:none;display:flex;align-items:center;gap:6px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line)}
.lb__title{flex:1;min-width:0;font:600 17px/1.3 var(--f-head)}
.lb__count{padding-right:6px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.lb__btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font-size:18px;cursor:pointer}
.lb__btn:hover{background:var(--soft);color:var(--ink)}
.lb__btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.lb__stage{position:relative;flex:1;min-height:0;display:flex;overflow:auto;padding:16px;background:var(--subtle);touch-action:pan-y pinch-zoom}
.lb__stage img{display:block;margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;cursor:zoom-in}
.lb.is-zoom .lb__stage{padding:0;touch-action:auto}
.lb.is-zoom .lb__stage img{max-width:none;max-height:none;border-radius:0;cursor:zoom-out}
.lb__nav{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:15px;cursor:pointer}
.lb__nav:disabled,.lb.is-zoom .lb__nav{display:none}
.lb__nav--prev{left:16px}
.lb__nav--next{right:16px}

/* купюры (правки клиента 26.10 и 29.10): колонка «Купюры» на странице пункта, просмотр - галерея изображений валюты
   с подписью над изображением, справочник всех валют на странице «Купюры валют» */
.tbl .tbl__notes{width:1%;padding-left:12px;padding-right:12px;text-align:center}
/* купюры ещё не загружены ни для одной валюты пункта - колонки нет (появится, когда администратор загрузит изображения) */
.tbl:not(:has(.notes-btn)) .tbl__notes{display:none}
.notes-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font:500 13px/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s}
.notes-btn:hover{border-color:var(--accent);color:var(--accent)}
.notes-btn > svg{flex:none;font-size:13px}
.notes{width:min(760px,calc(100vw - 32px));max-height:min(820px,calc(100vh - 32px))}
.notes__title{display:flex;align-items:center;gap:10px;min-width:0}
.notes__title .flag{flex:none;width:26px;height:26px}
.notes__body{display:grid;gap:16px;min-height:0;padding:4px 22px 22px;overflow:auto;overscroll-behavior:contain}
.ngal{display:grid;gap:20px}
.ngal__item{display:grid;gap:8px;margin:0}
.ngal__cap{font:600 15px/1.3 var(--f-head);color:var(--ink);overflow-wrap:anywhere}
.ngal__img{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--subtle);overflow:hidden;cursor:zoom-in;transition:border-color .15s}
.ngal__img:hover{border-color:var(--line-2)}
.ngal__img img{display:block;width:100%;height:auto}
.notes__hint{font-size:13px;color:var(--muted)}
.notes-page{padding-bottom:var(--gap)}
.notes-page__title{margin-top:14px;font-size:clamp(28px,3vw,40px)}
.notes-page__lead{margin-top:10px;max-width:44em;color:var(--ink-2)}
/* сетка валют: линии между ячейками - верх и лево у каждой, крайние прячутся под рамку панели */
.nref{margin-top:28px;overflow:hidden}
.nref__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:-1px 0 0 -1px}
.nref__item{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:0 10px;min-height:64px;padding:12px 18px;
  border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.nref__item:hover{background:var(--subtle)}
.nref__item:focus-visible{outline-offset:-2px}
.nref__item .flag{width:28px;height:28px}
.nref__item b{font:600 16px/1.2 var(--f-head)}
.nref__name{min-width:0;color:var(--ink-2);font-size:15px;line-height:1.25}
.nref__n{font-size:13px;color:var(--muted);white-space:nowrap}

/* пусто */
.empty{display:grid;justify-items:start;gap:12px;padding:28px}
.empty h2{font-size:22px}
.empty__acts{display:flex;flex-wrap:wrap;gap:10px}

/* ================= ОКНО ВЫБОРА ГОРОДА ================= */
.dlg{width:min(860px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 48px));padding:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
.dlg[open]{display:flex;flex-direction:column}
.dlg::backdrop{background:rgba(27,31,36,.32)}
/* окно городов: появляется с подъёмом, закрывается быстрее */
.dlg[open]{animation:em-dlg-in .34s cubic-bezier(.16,1,.3,1)}
.dlg[open]::backdrop{animation:em-fade-in .26s ease}
.dlg.is-closing{animation:em-dlg-out .17s cubic-bezier(.4,0,1,1) forwards}
.dlg.is-closing::backdrop{animation:em-fade-out .17s ease forwards}
@keyframes em-dlg-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes em-dlg-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes em-fade-in{from{opacity:0}}
@keyframes em-fade-out{to{opacity:0}}
.dlg__head{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 10px}
.dlg__title{font-size:22px}
.dlg__close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:18px;cursor:pointer}
.dlg__close:hover{background:var(--soft);color:var(--ink)}
.letters{flex:none;display:flex;flex-wrap:wrap;gap:2px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
.letters button{min-width:34px;height:34px;padding:0 8px;border:0;border-radius:8px;background:none;font:500 15px/1 var(--f-body);color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.letters button:hover{background:var(--soft)}
.letters button[aria-pressed="true"]{background:var(--accent);color:#FFFFFF}
.letters button.is-centers{padding:0 12px}
.cities{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:2px 16px;padding:14px 18px 20px;overflow:auto}
.city{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:16px;transition:background-color .15s}
.city:hover{background:var(--soft)}
.city small{font-size:13px;color:var(--muted);white-space:nowrap}
.city[aria-current="true"]{font-weight:500;color:var(--accent)}

/* ================= БЛОКИ ================= */
.section{padding-bottom:var(--gap)}
.section__title{font-size:clamp(22px,2vw,28px)}
.steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);counter-increment:step}
.steps li::before{content:counter(step);grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);font:600 16px/1 var(--f-head)}
.steps b{font:600 17px/1.3 var(--f-head)}
.steps span{color:var(--muted);font-size:15px}

/* ================= ПОДВАЛ ================= */
.footer{padding-block:64px 32px;background:var(--surface);border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.footer__about{margin-top:14px;max-width:24em;font-size:14px;color:var(--muted)}
.footer__title{margin-bottom:12px;font:600 15px/1.2 var(--f-head)}
.footer__list{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:15px}
.footer__list a{color:var(--ink);text-decoration:none}
.footer__list a:hover{text-decoration:underline;text-underline-offset:4px}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer__bottom a{color:var(--muted)}

/* ================= МОБИЛЬНОЕ: нижняя навигация, «наверх», затемнение ================= */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:49;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--line)}
.tabbar__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:480px;margin:0 auto}
.tabbar__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:var(--tab-h);padding:0 1px;border:0;background:none;color:var(--muted);font:500 12px/1.15 var(--f-body);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabbar__item:hover{color:var(--ink)}
.tabbar__item[aria-current]{color:var(--accent)}
.tabbar__item[aria-current]::before{content:"";position:absolute;top:-1px;left:50%;width:28px;height:2px;margin-left:-14px;background:var(--accent)}
.tabbar__item:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}
.tabbar__ico{display:grid;place-items:center;width:24px;height:22px;font-size:19px}
.tabbar__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.totop{position:fixed;right:24px;bottom:24px;z-index:44;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.3,1),color .15s,visibility 0s linear .25s}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.3,1),color .15s,visibility 0s}
.totop:hover{color:var(--accent)}
.totop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.totop__track{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
.totop__bar{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.totop > .ico{position:relative}

/* ================= СТРАНИЦА ПУНКТА ================= */
.crumbs{padding-top:22px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.ph{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding-block:18px 28px}
.ph__logo{grid-row:1 / span 3;width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:var(--soft);font:600 26px/1 var(--f-head);color:var(--ink-2)}
.ph__logo--brand{background:var(--brand) url("../logo/exchange-market-logo-144.png") center/cover no-repeat}
.ph__title{font-size:clamp(26px,2.8vw,36px)}
.ph__addr{color:var(--ink-2)}
.ph__badges{margin:0}
.ph__meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:15px}
.ph__acts{grid-row:1 / span 3;grid-column:3;display:grid;gap:8px;justify-items:stretch}
.pp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;padding-bottom:var(--gap)}
.board{padding:0;overflow:hidden}
.board__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.board__title{font-size:22px}
.board__upd{font-size:14px;color:var(--muted)}
.board__scroll{position:relative;overflow-x:auto;overflow-y:hidden}
.board__more{margin:14px 22px 0}
.board__note{padding:12px 22px 18px;font-size:13px;color:var(--muted)}
.board__lic{margin-top:-10px;padding:0 22px 18px;font-size:13px;color:var(--ink-2)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:10px 22px;background:var(--subtle);border-bottom:1px solid var(--line);text-align:right;font-size:13px;font-weight:400;color:var(--muted)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:10px 22px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.tbl tbody tr:first-child td{border-top:0}
.tbl tbody tr:hover td{background:var(--subtle)}
.tbl td .v{font-size:17px}
.tbl .tbl__num{width:1%;padding-left:28px;white-space:nowrap}
.cur-cell{display:flex;align-items:center;gap:12px}
.cur-cell b{display:inline-block;min-width:40px;font:600 15px/1.2 var(--f-head)}
.cur-cell > span{color:var(--muted);font-size:15px}
.info{display:grid;gap:16px}
.info__box{padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px}
.info__box h2{font-size:18px}
.info__text{font-size:14px;color:var(--muted)}
.info__list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--ink-2)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:15px}
.hours dt{color:var(--muted)}
.hours dd{margin:0;font-variant-numeric:tabular-nums}
.hours .is-today{font-weight:500;color:var(--ink)}
/* фото входа и карта: в узкой колонке друг под другом, в широкой рядом */
.map{position:relative;display:grid;place-items:center;min-height:200px;border-radius:var(--r-md);background:var(--soft);color:var(--muted);text-align:center;padding:20px;font-size:14px}
.share{display:flex;gap:8px;align-items:center}
.share input{flex:1 1 0;width:0;min-width:0;height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--subtle);font-size:14px;color:var(--ink-2)}

/* ================= ВХОД И РЕГИСТРАЦИЯ ================= */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-block:48px var(--gap)}
.auth__card{padding:28px;display:grid;gap:18px}
.auth__title{font-size:clamp(24px,2.4vw,30px)}
.auth__lead{color:var(--ink-2)}
.auth__aside{display:grid;gap:14px;padding-top:8px}
.auth__aside h2{font-size:20px}
.form{display:grid;gap:14px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.field__label{font-size:14px;color:var(--ink-2);font-weight:500}
.field__hint{font-size:13px;color:var(--muted)}
.input,.select,.textarea{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:16px}
.textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6772' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--bad)}
.check input[aria-invalid="true"]{outline:2px solid var(--bad);outline-offset:2px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);outline:2px solid var(--focus);outline-offset:1px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.form__alt{font-size:15px;color:var(--muted)}
.fieldset{display:grid;gap:14px;min-width:0;margin:4px 0 0;padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r-md)}
.fieldset__title{padding:0 6px;margin-left:-6px;font:600 16px/1.2 var(--f-head);color:var(--ink)}
.file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;cursor:pointer}
.file__btn{pointer-events:none}
.file:hover .file__btn{border-color:var(--ink)}
.file input:focus-visible + .file__btn{outline:2px solid var(--focus);outline-offset:2px}
.file input[aria-invalid="true"] + .file__btn{border-color:var(--bad);color:var(--bad)}
.file__name{min-width:0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.auth__free{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)}
.auth__free i,.auth__free svg{color:var(--good)}
.form__alt a{color:var(--accent);font-weight:500}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--soft);color:var(--ink-2);border-radius:var(--r-sm);font-size:14px}
.notice i,.notice svg{flex:none;margin-top:3px;color:var(--accent)}
.seg{display:grid;grid-template-columns:1fr 1fr;height:48px;padding:4px;background:var(--soft);border-radius:var(--r-sm)}
.seg button{border:0;border-radius:7px;background:transparent;color:var(--ink-2);font-weight:500;font-size:15px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}

.pass{position:relative}
.pass .input{padding-right:52px}
.pass__toggle{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.pass__toggle:hover{background:var(--soft);color:var(--ink)}
.form__line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
.form__link{padding:0;border:0;background:none;color:var(--accent);font-weight:500;font-size:15px;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.form__link:hover{text-decoration-color:currentColor}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--ink-2)}
.ticks li::before{content:"";width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%230060E0' stroke-width='1.8'/%3E%3C/svg%3E") center/12px 10px no-repeat}
.done{display:grid;justify-items:start;gap:12px;outline:none}
.done h2{font-size:24px}
.done p{color:var(--ink-2)}
.done__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--good-soft);color:var(--good);font-size:20px}

@media (prefers-reduced-motion:reduce){
  .totop,.sorter{transition:none !important}
  .dlg[open]{animation:em-fade-in .15s ease}
  .dlg.is-closing{animation:em-fade-out .1s ease forwards}
}

/* ================= АДАПТИВ ================= */
/* колонка «Телефон» в таблице - с 1360 (ноутбук клиента 1366 - колонка есть, как на его макете),
   на меньших ширинах телефоны под адресом пункта; до 1440 колонка пункта уже - место крутилкам валют */
@media (max-width:1439px){
  .xt thead .c-point-cell{width:240px}
}
/* 1024-1199: баннер уходит под список, колонке пункта можно дать больше места - плашки и статус в одну строку */
@media (min-width:1024px) and (max-width:1199px){
  .xt thead .c-point-cell{width:300px}
}
@media (max-width:1359px){
  .xt .c-contact-cell{display:none}
  .pt__phones{display:flex}
}
@media (max-width:1199px){
  .market{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .pp{grid-template-columns:minmax(0,1fr)}
  /* блоки пункта под курсами: ссылка и услуги - во всю ширину, режим и контакты - рядом, «Как добраться» - во всю ширину */
  .info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info > [aria-labelledby="shareTitle"],.info > #extraBox,.info > [aria-labelledby="mapTitle"]{grid-column:1 / -1}
}
@media (max-width:1024px){
  /* планшет и телефон: в переключателе языка только флаги, название - для экранного диктора и в подсказке */
  .lang a{padding:0 7px}
  .lang__txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lang__flag{width:20px;height:20px}
  :root{--gap:68px}
  html{scroll-padding-bottom:calc(var(--tab-h) + 16px)}
  body{padding-bottom:var(--tab-h)}
  .tabbar{display:block}
  .totop{right:16px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 16px)}
  .auth{grid-template-columns:minmax(0,1fr);gap:28px}
}
/* планшет: крутилка не растягивается на всю ширину, стрелки стоят рядом с ней; колонка курса шире */
@media (min-width:641px) and (max-width:959px){
  .curbar{grid-template-columns:minmax(72px,1fr) minmax(0,460px) minmax(72px,1fr)}
  .curbar .sorter--buy{justify-self:end;width:72px}
  .curbar .sorter--sell{justify-self:start;width:72px}
  .xr{--xr-rate:196px}
  .xr__pair .v{font-size:19px}
}
/* таблица -> крутилка сверху и строки пунктов */
@media (max-width:959px){
  .nref__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-bottom:12px}
  .xt-wrap{display:none}
  .xr-list{display:block;overflow:hidden}
  .curbar{position:sticky;top:var(--head-h);z-index:20;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:4px;
    padding:6px 4px;background:var(--surface);border-bottom:1px solid var(--line)}
  .curbar .sorter{align-self:stretch}
  .curbar .wheel__in{justify-content:flex-start;padding:0 40px 0 14px}
  .curbar .wheel__open{right:6px}
  .quick{grid-auto-columns:calc((100% - 6 * 8px) / 7.5)}
  .ph{grid-template-columns:64px minmax(0,1fr)}
  .ph:empty{min-height:200px}
  .ph__logo{width:64px;height:64px}
  .ph__acts{grid-row:auto;grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
}
@media (max-width:860px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > :first-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .cities{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--head-h:62px;--gap:52px}
  .wrap{padding-inline:16px}
  .header__inner{gap:10px}
  .header__actions{gap:6px}
  .brand{flex:0 1 auto;min-width:0;gap:8px}
  .brand__logo{width:44px;height:35px}
  .brand__text{min-width:0}
  .brand__name{font-size:17px}
  .brand__sub{font-size:12px}
  .header__login,.header__reg,.city-chip span{display:none}
  .lang a{min-height:30px;padding:0 6px}
  .city-chip{width:42px;padding:0;justify-content:center}
  .hero{padding-block:24px 8px}
  .wheel{--wh:124px}
  /* на телефоне ссылка «отправить клиенту» - после контактов и маршрута: посетителю важнее режим и телефоны */
  .info{grid-template-columns:minmax(0,1fr)}
  .info > [aria-labelledby="shareTitle"]{order:5}
  .fieldset{padding:14px 12px 16px}
  .curbar{grid-template-columns:58px minmax(0,1fr) 58px}
  .ph:empty{min-height:250px}
  .quickbar{padding:12px 12px 8px}
  .quick{grid-template-rows:repeat(2,44px);grid-auto-columns:calc((100% - 4 * 6px) / 4.5);gap:6px}
  .footer__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .auth{padding-block:24px var(--gap)}
  .auth__card{padding:20px}
  .tbl th,.tbl td{padding:10px 10px}
  .tbl th:first-child,.tbl td:first-child{padding-left:14px}
  .tbl th:last-child,.tbl td:last-child{padding-right:14px}
  .tbl .tbl__num{padding-left:8px}
  .tbl td:first-child{white-space:normal}
  .cur-cell{gap:8px}
  .cur-cell b{min-width:36px}
  .cur-cell > span{font-size:13px;line-height:1.25}
  /* страница пункта на телефоне: флаг, код и «Купюры» в строку, полное название под ними - таблица помещается в 320 px */
  .tbl .cur-cell{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 8px;align-items:center}
  .tbl .cur-cell .flag{grid-row:1 / span 2}
  .tbl .cur-cell > span{-webkit-hyphens:auto;hyphens:auto}
  .tbl .tbl__notes{padding-left:4px;padding-right:4px}
  .notes-btn{width:36px;height:36px;padding:0;justify-content:center}
  .notes-btn span{display:none}
  .nref__grid{grid-template-columns:minmax(0,1fr)}
  .nref__item{padding:12px 16px}
  .notes__body{padding:4px 16px 16px}
  .lb__bar{padding-left:16px}
  .lb__nav{display:none}
  .dlg__head{padding:16px 16px 8px}
  .letters{padding:0 12px 10px}
  .cities{padding:10px 10px 16px;gap:0 8px}
  .city{flex-direction:column;align-items:flex-start;gap:0}
}
@media (max-width:374px){
  /* страница пункта: четыре колонки (валюта, купюры, покупка, продажа) на самом узком экране */
  .tbl th,.tbl td{padding-left:6px;padding-right:6px}
  .tbl th{font-size:12px}
  .brand__sub{display:none}
  .tabbar__item{font-size:11px}
  .cities{grid-template-columns:minmax(0,1fr)}
  .curbar{grid-template-columns:52px minmax(0,1fr) 52px}
  .curbar .wheel__in{padding:0 34px 0 10px;gap:8px}
  .curbar .wheel__open{right:2px}
  .quick{grid-auto-columns:calc((100% - 3 * 6px) / 3.5)}
  .quick__btn{gap:5px;padding:0 4px;font-size:14px}
  .quick__btn .flag{width:18px;height:18px}
  /* узкий телефон: название под кодом, чтобы длинные («Азербайджанский манат») помещались целиком */
  .curbar .wheel__txt{display:grid;gap:1px}
  .curbar .wheel__txt b{font-size:15px}
  .curbar .wheel__txt small{font-size:12px;line-height:1.1}
  .xr{--xr-rate:112px}
  .xr__pt{padding:10px 8px 10px 12px}
  /* узкий телефон: номер и WhatsApp в одну строку - без значка трубки, номер чуть мельче */
  .xr__tel{font-size:13.5px}
  .xr__tel a:first-child > i,.xr__tel a:first-child > svg{display:none}
  .xr__tel .xr__wa{width:30px}
  .xr__st{font-size:12.5px}
  .xr__pair{gap:4px}
  .xr__pair .v{font-size:16px}
}