/* Dome Loyalty — style C1 "like the site": white background, 8px radius, green #4c6550, Manrope, outline icons */
/* Manrope from our own server (OFL, public/client/fonts/OFL-Manrope.txt): no third-party hosts before the first paint,
   and the installed app has its font without a network. Variable weight 200–800; the subsets are Google's. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/client/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/client/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/client/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/client/fonts/manrope-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}
:root{
  --green:#4c6550;--green-hover:#3f5443;--tint:#4c65501a;--ink:#1f2622;--muted:#6b736d;--gray:#9e9e9e;--line:#e5e5e5;--field:#f2f2f2;
  --red:#ff6565;--violet:#a56ffd;--r:8px;--font:'Manrope','Inter KK',system-ui,-apple-system,sans-serif;--tab-h:83px;--passz:1;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* a class with its own display (.wait, .next) must not win over the attribute */
html{-webkit-text-size-adjust:100%}
/* The text follows the phone's text size (iOS «Размер текста»): the root takes the system body size and everything
   below is in rem of it. 17 px is the iOS default, so at the default setting nothing changes. Only on iPhone and iPad
   (-webkit-touch-callout exists there): Safari on a Mac supports -apple-system-body too, but its body is 13 px. */
html{font-size:17px}
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){html{font:-apple-system-body}}
html,body{margin:0;background:#edebe6}
@media (max-width:480px){html,body{background:#fff}} /* on a phone the page is the screen: no cream at the rubber-band edges */
body{font-family:var(--font);color:var(--ink);font-size:.8824rem;line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:var(--green)}
h1{font-size:1.5294rem;line-height:1.2;font-weight:500;margin:0}
h2{font-size:1.0588rem;font-weight:500;margin:0}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:.8235rem}
.center{text-align:center}
.page{max-width:480px;margin:0 auto;min-height:100dvh;background:#fff;position:relative;display:flex;flex-direction:column}
@media (min-width:481px){.page{box-shadow:0 0 0 1px var(--line)}}
.main{flex:1;padding:env(safe-area-inset-top) 16px calc(var(--tab-h) + 28px)}
.main.noTabs{padding-bottom:36px}

/* buttons, fields */
.btn{text-align:center;text-wrap:balance;min-height:50px;border-radius:var(--r);border:1px solid transparent;background:var(--green);color:#fff;font:600 .9412rem/1.15 var(--font);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;width:100%;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn:active{background:var(--green-hover)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.ghost{background:#fff;color:var(--green);border-color:var(--line)}
.btn.ghost:active{background:var(--field)}
.btn.sm{min-height:44px;font-size:.8824rem;width:auto}
.btn svg{width:20px;height:20px}
.link{background:none;border:0;padding:12px 0;margin:-12px 0;font:500 .8235rem var(--font);color:var(--green);cursor:pointer;text-decoration:none}
.field{display:block;margin-bottom:14px}
.field input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:0 14px;font:500 1rem var(--font);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--tint)}
.field input::placeholder{color:#767676;font-weight:400}
/* "+7" stays in front of the phone field; the customer types only the ten digits after it */
.phone{position:relative;display:block}
.phone b{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;font:500 1rem var(--font);color:var(--ink);pointer-events:none}
.field .phone input{padding-left:40px}
.hint{font-size:.8235rem;color:var(--muted);margin-top:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.8235rem;color:var(--muted);margin:14px 0 18px;line-height:1.4}
.check input{width:20px;height:20px;margin:0;accent-color:var(--green);flex:none}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--field);border-radius:var(--r);padding:3px;gap:3px}
.seg button{height:42px;border:0;border-radius:6px;background:transparent;font:600 .8235rem var(--font);color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg.lang{grid-template-columns:1fr 1fr 1fr;width:168px}
.seg.lang button{height:34px;font-size:.7647rem}
.otp{display:flex;gap:10px}
.otp input{width:100%;min-height:62px;text-align:center;font:600 1.6471rem var(--font);letter-spacing:.45em;text-indent:.45em;border:1px solid var(--line);border-radius:var(--r);outline:none;-webkit-appearance:none;appearance:none;color:var(--ink)}
.otp input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--tint)}
.steps{display:flex;gap:6px;align-items:center;margin:6px 0 22px}
.steps span{flex:none;font-size:.7647rem;color:var(--muted);margin-left:6px;white-space:nowrap}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--green)}
.topbar{height:56px;display:flex;align-items:center;gap:10px}
.topbar .sp{flex:1}
/* «Рус / Қаз» at the right of the top bar; out of the flow, so the logo stays centred */
.topbar{position:relative}
.lang{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;background:var(--field);border-radius:10px;padding:3px;gap:2px}
.lang button{height:32px;min-width:44px;padding:0 10px;border:0;border-radius:7px;background:transparent;font:600 .8235rem var(--font);color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.row .lang{position:static;transform:none;margin-left:auto;flex:none}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;position:relative;padding:0}
.iconbtn svg{width:22px;height:22px}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}
.logo{height:34px;width:auto}
.benefits{display:flex;flex-direction:column;gap:12px;margin:20px 0 22px}
.benefit{display:flex;gap:12px;align-items:center}
.benefit .ic{width:44px;height:44px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--green);flex:none}
.benefit .ic svg{width:22px;height:22px}
.benefit b{display:block;font-weight:600;font-size:.8824rem}
.benefit span{font-size:.7647rem;color:var(--muted)}
.banner{display:flex;gap:12px;align-items:flex-start;background:var(--tint);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;font-size:.8235rem;line-height:1.4}
.banner svg{color:var(--green);flex:none;width:22px;height:22px}
.banner b{font-weight:600}
.banner.bad svg{color:var(--err)}
.step.blocked > :not(#foundBanner){display:none} /* a blocked plastic card: the store sorts it out, the form would lead nowhere */
.done-ic{width:72px;height:72px;border-radius:50%;background:var(--tint);color:var(--green);display:grid;place-items:center;margin:20px auto 14px}
.done-ic svg{width:36px;height:36px}
.step{display:none}
.step.on{display:block;animation:step-in .18s ease-out}
.step.on.back{animation-name:step-back}
@keyframes step-in{from{opacity:0;transform:translateX(14px)}}
@keyframes step-back{from{opacity:0;transform:translateX(-14px)}}
h1[tabindex]:focus{outline:none}
.view{display:none}
.view.on{display:block}

/* card on the cabinet home screen */
.wcard{--bg:#4c6550;--fg:#f6f3ee;--label:#d9c3a5;--chipbg:rgba(255,255,255,.18);border-radius:var(--r);padding:16px;color:var(--fg);background-color:var(--bg);background-size:48px 28px;min-height:168px;display:flex;flex-direction:column;gap:4px}
.wc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.wc-top img{height:24px;width:auto}
.wc-chip{font-size:.6471rem;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--chipbg);display:inline-flex;gap:5px;align-items:center}
.wc-chip svg{width:12px;height:12px}
.wc-bal .label{display:block;font-size:.7059rem;text-transform:uppercase;letter-spacing:.07em;color:var(--label);font-weight:600}
.wc-bal .num{display:block;font-size:2.3529rem;font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.wc-pend{font-size:.7647rem;opacity:.85}
.wc-bot{display:flex;justify-content:space-between;gap:12px;font-size:.7059rem;opacity:.8;margin-top:auto;padding-top:10px}
.wc-bot span:last-child{flex:none;white-space:nowrap}
.wcard.light{box-shadow:inset 0 0 0 1px rgba(31,38,34,.1)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.actions .btn{padding:0 12px}
.lvl{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.lvl-row{display:flex;justify-content:space-between;font-size:.7647rem;margin-bottom:8px}
.lvl-row b{font-size:.8824rem;font-weight:600}
.lvl-sub{margin-top:8px;font-size:.7647rem;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--line)}
.bar i{display:block;height:100%;border-radius:3px;background:var(--green)}

/* Apple Wallet pass (front) */
.pass{--bg:#4c6550;--fg:#f6f3ee;--label:#d9c3a5;width:340px;max-width:100%;flex:none;background:var(--bg);color:var(--fg);border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.2);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;zoom:var(--passz)}
.pass-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;min-height:58px}
.pass-top.line{border-bottom:2px solid var(--green)}
.pass-logo img{height:36px;width:auto}
.pass .label{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--label);font-weight:600;line-height:1.25}
.pass .value{display:block;font-size:17px;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}
.pass-hf{text-align:right}
.pass-strip{height:112px;position:relative;display:flex;align-items:flex-end;padding:10px 14px;background-size:cover;background-position:center;background-repeat:repeat}
.pass-primary{position:relative;min-width:0}
.pass-primary .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* one line with «…», as the pass draws a long name */
#donePass{width:100%;display:flex;justify-content:center} /* a definite width, so the pass's max-width:100% holds at 320 px */
.pass-strip .value{font-size:21px;font-weight:500}
.pass-fields{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:12px 14px 2px}
.pass-fields .pf:nth-child(2){text-align:center}
.pass-fields .pf:nth-child(3){text-align:right}
.pass-fields .value{font-size:16px}
.pass-fields .sub{display:block;font-size:11px;opacity:.72;margin-top:1px}
.pass-barcode{margin:14px 14px 16px;background:#fff;border-radius:8px;padding:12px 12px 8px;display:flex;flex-direction:column;align-items:center}
.pass-barcode svg{width:100%;max-width:230px;height:52px}
.pass-barcode .alt{font-size:12px;color:#000;margin-top:6px;letter-spacing:.1em;font-family:ui-monospace,'SF Mono',Menlo,monospace}
/* pass back */
.passback{width:340px;max-width:100%;flex:none;background:#f2f2f7;border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;color:#000;box-shadow:0 12px 32px rgba(0,0,0,.14);zoom:var(--passz)}
.pb-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-size:15px}
.pb-top b{font-weight:600}
.pb-top span{color:#007aff}
.pb-group{background:#fff;margin:8px 16px 14px;border-radius:12px;overflow:hidden}
.pb-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:15px;border-bottom:1px solid #e5e5ea}
.pb-row:last-child{border-bottom:0}
.swt{width:46px;height:28px;border-radius:14px;background:#34c759;position:relative;flex:none}
.swt::after{content:'';position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.pb-field{padding:10px 14px;border-bottom:1px solid #e5e5ea;font-size:14px;line-height:1.4}
.pb-field:last-child{border-bottom:0}
.pb-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6b736d;margin-bottom:2px}
.pb-field .lnk{color:#007aff}
.pb-remove{margin:0 16px 18px;background:#fff;border-radius:12px;padding:12px;text-align:center;color:#ff3b30;font-size:15px}

/* design picker: pass carousel */
.designs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:6px 16px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.designs::-webkit-scrollbar{display:none}
.design{scroll-snap-align:center;flex:none;width:300px;position:relative;border-radius:16px;padding:6px;border:2px solid transparent;cursor:pointer}
.design.on{border-color:var(--green)}
.design .pass{zoom:.84;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.design .dname{text-align:center;font-weight:600;margin-top:8px;font-size:.8235rem;color:var(--muted)}
.design.on .dname{color:var(--green)}
.design .dname svg{width:16px;height:16px;display:none;vertical-align:-3px;margin-right:5px}
.design.on .dname svg{display:inline-block}
.dots{display:flex;justify-content:center;gap:6px;margin:2px 0 16px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--green)}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 16px}
.swatch{display:block;width:100%;border-radius:10px;border:2px solid transparent;background:none;padding:4px;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.swatch.on{border-color:var(--green)}
.sw-card{height:64px;border-radius:8px;background-size:48px 28px;display:flex;align-items:flex-end;padding:8px;color:var(--fg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.sw-card img{height:14px;width:auto}
.sw-name{display:block;font-size:.7059rem;text-align:center;margin-top:6px;font-weight:600}

/* Wallet badges */
.wbadge{min-height:54px;border-radius:9px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;width:100%;border:1px solid #000;cursor:pointer;font-family:var(--font)}
.wbadge svg{width:28px;height:28px}
.wbadge .t{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.wbadge .t small{font-size:.5882rem;font-weight:500;opacity:.85}
.wbadge .t b{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.wbadge.g{background:#fff;color:#1f1f1f;border-color:#747775}
/* while a request is on its way: the Wallet buttons (dome.js), the registration buttons and the code check (register) */
.btn[aria-busy],.link[aria-busy],.wbadge[aria-busy],[data-wallet][aria-busy]{pointer-events:none;opacity:1}
.wait{display:flex;align-items:center;gap:8px;margin-top:14px}
.btn[aria-busy]::after,.link[aria-busy]::after,.wbadge[aria-busy]::after,[data-wallet][aria-busy]::after,.wait::before{content:'';flex:none;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* lists */
.sec-t{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 10px}
.sec-t a{font-size:.7647rem;font-weight:500;color:var(--green);text-decoration:none}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;font:inherit;cursor:pointer}
.row.static{cursor:default}
.ric{width:40px;height:40px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--green);flex:none}
.ric svg{width:20px;height:20px}
.ric.sw{background:var(--green);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.rt{flex:1;display:flex;flex-direction:column;min-width:0}
.rt b{font-weight:600;font-size:.8824rem}
.rt span{font-size:.7647rem;color:var(--muted)}
.amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;display:flex;flex-direction:column;align-items:flex-end;color:var(--green);font-size:.8824rem}
.amt span{font-size:.6471rem;color:var(--muted);font-weight:500}
.amt.pend{color:var(--muted)}
.amt.spend{color:var(--ink)}
.chev{color:var(--gray);width:20px;height:20px;flex:none}
.group-t{font-size:.7059rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 2px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:6px 16px 8px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:.7647rem;font-weight:500;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);font-family:var(--font)}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 0 6px}
.summary div{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.summary b{display:block;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.summary span{font-size:.6471rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.promos-h{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.promos-h::-webkit-scrollbar{display:none}
.promos-h .promo{flex:none;width:200px}
.promo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;cursor:pointer;text-decoration:none;color:inherit;display:block;margin-bottom:12px;padding:0;width:100%;text-align:left;font:inherit}
.promos-h .promo{margin-bottom:0}
.pimg{height:96px;background-size:cover;background-position:center;position:relative}
.promo.big .pimg{height:170px}
.pt{padding:10px 12px 12px}
.pt b{display:block;font-weight:600;font-size:.8824rem}
.pt span{display:block;margin-top:2px;font-size:.7647rem;color:var(--muted);white-space:pre-line}
.badge{display:inline-block;background:var(--red);color:#fff;font-size:.6471rem;font-weight:600;padding:3px 7px;border-radius:4px;line-height:1.3}
.badge.new{background:var(--green)}
.badge.gift{background:var(--violet)}
.pimg .badge{position:absolute;left:8px;top:8px}
.store{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}
.store b{font-size:.8824rem;font-weight:600}
.store .sa{font-size:.7647rem;color:var(--muted);margin:4px 0 10px;line-height:1.4}
.store .sbtn{display:flex;gap:8px}
.store .sbtn a{flex:1;height:40px;border-radius:var(--r);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font-size:.8235rem;font-weight:600;color:var(--green);text-decoration:none}
.store .sbtn svg{width:18px;height:18px}
details.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:600;cursor:pointer;gap:10px}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:20px;height:20px;color:var(--gray);transition:transform .15s;flex:none}
.acc[open] summary svg{transform:rotate(90deg)}
.acc p{margin:0 0 14px;font-size:.8235rem;color:var(--muted);line-height:1.45}
.profile{display:flex;gap:14px;align-items:center;padding:14px 0 6px}
button.profile{background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.1765rem;flex:none}
.profile b{display:block;font-size:1rem;font-weight:600}
.profile span{font-size:.7647rem;color:var(--muted)}
.toggle{width:46px;height:28px;border-radius:14px;background:var(--green);position:relative;flex:none;border:0;cursor:pointer;padding:0}
.toggle::after{content:'';position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.off{background:var(--line)}
.toggle.off::after{right:auto;left:2px}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
.greet{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0 14px}
.greet .hi{font-size:.8824rem;color:var(--muted)}
.greet .name{font-size:1.6471rem;line-height:1.15;font-weight:500}

/* tab bar */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;min-height:max(58px,calc(49px + env(safe-area-inset-bottom)));padding:9px 8px env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:flex-start;background:#fff;border-top:1px solid var(--line);z-index:20}
.tab{width:72px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.7059rem;font-weight:500;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.tab.on{color:var(--green)}
.tab svg{width:26px;height:26px}

/* bottom sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(31,38,34,.45);z-index:40;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.open{display:flex}
.sheet{width:100%;max-width:480px;background:#fff;border-radius:16px 16px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));max-height:92dvh;overflow:auto;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 14px}
.sheet h2{font-size:1.1765rem;margin-bottom:6px}
.sheet .pimg{height:170px;border-radius:var(--r);margin:4px 0 14px}
.qrbig{border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;align-items:center;margin:16px 0}
.qrbig svg{width:min(80vw,320px);height:96px}
.qrbig .num{font:500 .8824rem ui-monospace,Menlo,monospace;letter-spacing:.12em;margin-top:10px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:20px;font-size:.8235rem;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;width:max-content;max-width:92vw;text-align:center}
.toast.show{opacity:1}
.stack{display:flex;flex-direction:column;gap:10px}

/* registration page */
:root{--err:#cf3a3a}
.check + .check{margin-top:-6px}
.err{margin:12px 0 0;font-size:.8235rem;font-weight:500;color:var(--err)}
.field + .err{margin:-6px 0 14px}
.field input[aria-invalid="true"]{border-color:var(--err)}
.demo{margin-top:22px;padding:10px 12px;background:var(--field);border-radius:var(--r)}

/* program rules: the bottom sheet on a native <dialog> (focus trap, Esc and backdrop come with it) */
dialog.sheet{padding:0;border:0;margin:auto auto 0;color:var(--ink);overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(31,38,34,.45)}
body:has(dialog[open]){overflow:hidden}
.sheet-in{padding:8px 16px calc(24px + env(safe-area-inset-bottom))}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sheet-h h2{margin:0}
.rules-t{width:100%;border-collapse:collapse;font-size:.7647rem;margin:0 0 14px}
.rules-t th{padding:0 8px 8px 0;font-size:.6471rem;font-weight:600;line-height:1.25;letter-spacing:.04em;text-align:left;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.rules-t td{padding:9px 8px 9px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.rules-t td:first-child{font-weight:600}
.rules-t th:last-child,.rules-t td:last-child{padding-right:0}
/* 320 px: the centred logo met the language switch and the rules table ran past the sheet (wider in Kazakh) */
@media (max-width:359px){
  .topbar .logo{height:28px}
  .lang button{min-width:40px;padding:0 8px}
  .rules-t{font-size:.7059rem}
  .rules-t th,.rules-t td{padding-right:4px}
  .rules-t th{letter-spacing:0;font-size:.5882rem}
}
.rules-l{margin:0 0 18px;padding-left:18px;font-size:.8235rem;line-height:1.45;color:var(--muted)}
.rules-l li{margin-bottom:6px}

/* cabinet: balance notes, switch states, instruction steps, full-screen barcode sheet */
.notes{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.note{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--field);font-size:.8235rem;line-height:1.35}
.note svg{width:20px;height:20px;color:var(--green);flex:none}
.note b{font-weight:600;font-variant-numeric:tabular-nums}
.empty .btn{margin-top:16px}
.toggle:disabled{opacity:.45;cursor:default}
.toggle[aria-busy=true]{opacity:.6}
.sheet .err{margin:0 0 12px}
.steps-l{list-style:none;margin:8px 0 18px;padding:0;display:flex;flex-direction:column;gap:14px}
.steps-l li{display:flex;gap:12px;align-items:center;font-size:.8824rem;line-height:1.35}
.steps-l .n{width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--green);display:grid;place-items:center;font-size:.8235rem;font-weight:600;flex:none}
.steps-l svg{width:20px;height:20px;margin:0 2px;vertical-align:-5px;color:var(--green)}
dialog.sheet.full{height:100dvh;max-height:none;margin:0 auto;border-radius:0}
dialog.sheet.full .grab{display:none}
dialog.sheet.full .sheet-in{min-height:100dvh;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
dialog.sheet.full .qrwrap{margin:auto 0}
dialog.sheet.full .qrbig{width:fit-content;margin:0 auto 12px}
dialog.sheet.full .qrbig svg{width:min(84vw,360px);height:120px}
dialog.sheet.full .qrbig .num{font-size:1.0588rem}
.qrbig .num{text-align:center}
/* quick taps (the switch, the tabs) must not turn into a double-tap zoom; pinch zoom stays */
.btn,.row,.tab,.chip,.toggle,.swatch,.iconbtn{touch-action:manipulation}

/* A18: "step 2" on the done screen, the install sheet (like VK Video's), the tip on the cabinet home, the first-open screen */
.next{border:1.5px solid var(--green);border-radius:12px;padding:16px;margin-top:20px}
.next .k{font-size:.7059rem;letter-spacing:.07em;text-transform:uppercase;color:var(--green);font-weight:700}
.next h2{font-size:1.1765rem;font-weight:600;margin:4px 0 12px;line-height:1.25}
.plus{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.plus div{display:flex;gap:10px;align-items:center;font-size:.8824rem}
.plus svg{width:22px;height:22px;color:var(--green);flex:none}
.later{display:block;margin:14px auto 0;color:var(--muted);font-size:.8824rem}
.btn.soft{background:var(--field);color:var(--ink)}
.btn.soft:active{background:var(--line)}
.btn.big{min-height:56px;font-size:1rem}
.sheet-in.a2hs{position:relative;padding-top:0}
.a2hs .x{position:absolute;top:12px;right:12px;z-index:1;background:rgba(255,255,255,.92)}
.a2hs-ill{position:relative;height:170px;margin:0 -16px;background:linear-gradient(#fff,#eef0f3);overflow:hidden;border-radius:16px 16px 0 0}
.a2hs-ill .fr{position:absolute;left:14%;right:14%;top:-14px;height:178px;border:5px solid #707075;border-top:0;border-radius:0 0 44px 44px}
.a2hs-ill .bar{position:absolute;left:calc(14% + 18px);bottom:58px;display:flex;gap:8px;opacity:.75}
.a2hs-ill .bar i{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.a2hs-ill .bar span{width:118px;height:34px;border-radius:17px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);font:13px -apple-system,system-ui,sans-serif;color:#555;display:flex;align-items:center;justify-content:center}
.a2hs-ill .key{position:absolute;right:9%;bottom:31px;width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.16);display:grid;place-items:center;font:700 26px -apple-system,system-ui,sans-serif;letter-spacing:2px;color:#000}
.a2hs-ill .key svg{width:34px;height:34px;color:#0a84ff}
.a2hs-ill .key::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--green);animation:a2hs-pulse 1.6s ease-out 3}
/* Safari before 26 has Share in the middle of its bottom bar */
.a2hs-ill.old .key{right:auto;left:50%;margin-left:-44px}
.a2hs-ill.old .bar{display:none}
.a2hs-ill img{position:absolute;left:50%;top:34px;width:100px;height:100px;margin-left:-50px;border-radius:24px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
@keyframes a2hs-pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.a2hs-ill .key::after,.sheet,.sk,.step.on{animation:none}}
.a2hs h2{font-size:1.2941rem;font-weight:600;text-align:center;margin:16px 8px 8px;line-height:1.25}
.a2hs p{font-size:.9412rem;color:var(--muted);text-align:center;margin:0 4px 18px;line-height:1.45}
.a2hs p b{color:var(--ink);font-weight:600}
.a2hs p svg{width:18px;height:18px;vertical-align:-3px;color:var(--ink)}
.tipcard{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--green);border-radius:12px;padding:14px;margin:16px 0 4px}
.tipcard>img{width:44px;height:44px;border-radius:10px;flex:none}
.tipcard>svg{width:26px;height:26px;margin:2px 4px;color:var(--green);flex:none}
.tipcard b{display:block;font-size:.9412rem;font-weight:600;margin-bottom:2px}
.tipcard span{font-size:.8235rem;line-height:1.4}
.tipcard .acts{display:flex;gap:16px;align-items:center;margin-top:12px}
.tipcard .acts .btn{width:auto;min-height:44px;font-size:.8824rem}
.tipcard .acts .link{color:var(--muted)}
.welcome{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:0 8px}
.welcome .logo{margin:0 auto 32px}
.welcome .bell{width:88px;height:88px;border-radius:50%;background:var(--tint);color:var(--green);display:grid;place-items:center;margin:0 auto 18px}
.welcome .bell svg{width:44px;height:44px}
.welcome h2{font-size:1.5294rem;font-weight:500;margin:0 0 10px}
.welcome p{color:var(--muted);font-size:.9412rem;margin:0 0 26px}
.welcome .legal{font-size:.7059rem;line-height:1.4;margin:10px 0 0}

/* ---------- review of 10 October: for the eyes and fingers of a customer of 45+ ---------- */
/* every tap answers, every focus is visible */
a,button,label,.design{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.row:not(.static):active,.chip:active,.tab:active,.promo:active,.profile:active,.iconbtn:active{background:var(--field)}
.design:active{transform:scale(.98)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.field input:focus-visible,.otp input:focus-visible{outline:none}
/* the consent row that the tap on «Получить карту» complained about */
.check.bad{color:var(--err)}
.check.bad input{outline:2px solid var(--err);outline-offset:2px;border-radius:4px}
/* the first paint of the cabinet: the shape of the screen while /cabinet/me answers */
.skel{padding:10px 0}
.sk{background:linear-gradient(90deg,#ececea 25%,#f5f5f3 50%,#ececea 75%);background-size:400% 100%;animation:sk 1.3s linear infinite;border-radius:var(--r)}
.sk.hi{width:38%;height:15px}.sk.name{width:55%;height:28px;margin:6px 0 14px}.sk.card{height:168px}.sk2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.sk.b{height:50px}.sk.level{height:72px}.sk.r{height:44px;margin-top:12px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
/* a long name without spaces must not widen the page */
.profile>div{min-width:0}.profile b,.greet .name,.wc-bot span,.pt b,.pt span,.qrwrap p{overflow-wrap:anywhere}
/* 320 px: the barcode frame stays inside the sheet (the rules table: the max-width:359px block above) */
.qrbig,.qrbig svg{max-width:100%}
/* the drawn Safari bar: a long address is cut, not spilled */
.a2hs-ill .bar span{display:block;line-height:34px;text-align:center;padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Manrope has no Ә Ғ Қ Ң Ұ: Kazakh pages are set in Inter (OFL, the font of the pass strip), and on Russian pages
   these letters come from a 2 KB subset of it instead of the system font */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/client/fonts/inter-400.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/client/fonts/inter-600.woff) format('woff')}
@font-face{font-family:'Inter KK';font-weight:400;font-display:swap;src:url(/client/fonts/inter-kk-400.woff) format('woff');unicode-range:U+0492-0493,U+049A-049B,U+04A2-04A3,U+04AE-04B1,U+04D8-04D9}
@font-face{font-family:'Inter KK';font-weight:600;font-display:swap;src:url(/client/fonts/inter-kk-600.woff) format('woff');unicode-range:U+0492-0493,U+049A-049B,U+04A2-04A3,U+04AE-04B1,U+04D8-04D9}
html[lang=kk]{--font:'Inter',system-ui,-apple-system,sans-serif}
.sheet-in .btn+.btn{margin-top:10px} /* two buttons under each other in a sheet, like «Выйти» and «Закрыть» */