/* UI v2 — design tokens, glass bottom bar with animated pill, quick shortcuts, press states, shimmer, motion preferences. Loaded after style.css; RTL, dark + light. */
:root{
  --r-sm:12px;--r-md:16px;--r-lg:24px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --ease:cubic-bezier(.22,.8,.3,1);--spring:cubic-bezier(.3,1.35,.5,1);
  --sh-1:0 1px 2px rgba(11,14,17,.05),0 4px 14px rgba(11,14,17,.05);
  --sh-2:0 2px 4px rgba(11,14,17,.06),0 10px 28px rgba(11,14,17,.09);
  --sh-float:0 8px 30px rgba(11,14,17,.16),0 2px 8px rgba(11,14,17,.08);
  --glass:rgba(255,255,255,.66);--glass-solid:#fff;--glass-bd:rgba(255,255,255,.75);--glass-hi:rgba(255,255,255,.9);--glass-line:rgba(11,14,17,.08);
  --pill:color-mix(in srgb,var(--brand) 15%,transparent);--pill-bd:color-mix(in srgb,var(--brand) 38%,transparent);
}
:root[data-theme=dark]{
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35);--sh-2:0 2px 6px rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.45);--sh-float:0 10px 36px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4);
  --glass:rgba(24,30,37,.58);--glass-solid:#14181d;--glass-bd:rgba(255,255,255,.12);--glass-hi:rgba(255,255,255,.14);--glass-line:rgba(255,255,255,.07);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35);--sh-2:0 2px 6px rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.45);--sh-float:0 10px 36px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4);
  --glass:rgba(24,30,37,.58);--glass-solid:#14181d;--glass-bd:rgba(255,255,255,.12);--glass-hi:rgba(255,255,255,.14);--glass-line:rgba(255,255,255,.07)}}

/* ---- consistent surfaces: one radius, one shadow, one border ---- */
.card,.clk,.mcard,.dcard,.mk-card,.tile,.hcard,.note,.search{border-radius:var(--r);box-shadow:var(--sh-1)}
.btn,.chip,.seg button,.icon-btn{border-radius:var(--r-sm)}
.chip{border-radius:999px}
main{padding-top:12px}
.sect{letter-spacing:0}
.top{background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--glass-line)}

/* ---- press states + smooth transitions ---- */
.btn,.icon-btn,.chip,.p,.tile,.clk,.mcard,.qs a,.tabbar button,.seg button,.cpy{transition:transform .16s var(--ease),background-color .2s,border-color .2s,box-shadow .25s var(--ease),color .2s;-webkit-user-select:none;user-select:none}
.btn:active,.icon-btn:active,.chip:active,.p:active,.tile:active,.seg button:active,.cpy:active,.qs a:active{transform:scale(.965)}
.clk:active,.mcard:active{transform:scale(.985)}
@media(hover:hover){
  .tile:hover,.clk:hover,.mcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
  .qs a:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
}
.btn:focus-visible,.icon-btn:focus-visible,.qs a:focus-visible,.tabbar button:focus-visible,.tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- skeleton shimmer ---- */
.skeleton{background:linear-gradient(100deg,var(--card) 28%,color-mix(in srgb,var(--brand) 11%,var(--chip)) 50%,var(--card) 72%);background-size:240% 100%;animation:ui2sh 1.5s linear infinite;border:1px solid var(--line);box-shadow:var(--sh-1)}
@keyframes ui2sh{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---- quick shortcuts ---- */
.qs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:2px 0 12px}
.qs a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 7px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;min-width:0;position:relative}
.qs a i{font-style:normal;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;font-size:20px;line-height:1;background:linear-gradient(145deg,color-mix(in srgb,var(--brand2) 26%,var(--card)),color-mix(in srgb,var(--brand) 10%,var(--card)));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.qs a b{font-size:clamp(10px,2.8vw,11.5px);font-weight:700;line-height:1.3;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.qs a[aria-current=page]{border-color:var(--pill-bd);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 9%,var(--card)),var(--card))}
.qs a[aria-current=page] b{color:var(--brand)}
@media(min-width:620px){.qs{gap:10px}.qs a{flex-direction:row;justify-content:center;gap:9px;padding:10px 8px}.qs a b{font-size:13px}.qs a i{width:34px;height:34px}}

/* ---- glass bottom bar + animated pill ---- */
body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:0;right:0;margin-inline:auto;transform:none;bottom:calc(10px + min(env(safe-area-inset-bottom,0px),48px));width:min(520px,calc(100% - 20px));z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:2px;padding:6px;border-radius:26px;
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid var(--glass-bd);box-shadow:var(--sh-float),inset 0 1px 0 var(--glass-hi)}
.tabbar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 55%);opacity:.7}
.tabbar button{position:relative;z-index:1;flex:1 1 0;max-width:none;min-width:0;border-radius:20px;padding:7px 4px;background:transparent!important;border:0}
.tabbar button i{font-size:20px}
.tabbar button span{font-size:11.5px;line-height:1.35}
.tabbar button.on{color:var(--brand);background:transparent!important}
.tabbar button.tab-mini{flex:0 0 42px;width:42px;height:42px;max-width:42px;margin-inline-start:2px;background:transparent!important;border:0;border-radius:50%}
.tabbar button.tab-mini.on{border:0}
.tabbar .pill{position:absolute;top:0;left:0;z-index:0;width:var(--pw,0);height:var(--ph,0);transform:translate(var(--px,0),var(--py,0));border-radius:20px;background:var(--pill);border:1px solid var(--pill-bd);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;pointer-events:none}
.tabbar .pill.ready{opacity:1;transition:transform .42s var(--spring),width .3s var(--ease),height .3s var(--ease),border-radius .3s var(--ease),opacity .2s}
@media(hover:hover){.tabbar button:hover{background:transparent!important;color:var(--ink)}.tabbar button.on:hover{color:var(--brand)}}
@media(min-width:900px){.tabbar{width:480px;bottom:18px;transform:none;inset-inline:0}.tabbar button{flex-direction:row;justify-content:center;gap:8px;padding:9px 12px}}
/* no backdrop-filter support: a solid, readable bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tabbar,.top{background:var(--glass-solid)}}
.a2hs{bottom:calc(88px + env(safe-area-inset-bottom))}
.toast{bottom:calc(96px + env(safe-area-inset-bottom))}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion:reduce){
  .skeleton{animation:none}
  .tabbar .pill.ready,.btn,.icon-btn,.chip,.p,.tile,.clk,.mcard,.qs a,.tabbar button,.seg button,.cpy{transition:none!important}
  .btn:active,.icon-btn:active,.chip:active,.p:active,.tile:active,.qs a:active,.seg button:active,.cpy:active,.clk:active,.mcard:active{transform:none}
  .tile:hover,.clk:hover,.mcard:hover,.qs a:hover{transform:none}
}
@media print{.qs,.tabbar{display:none!important}}

/* ======== v3: smoked-glass header, square glass key-rate tiles, 4-item bar ======== */
.top{background:linear-gradient(180deg,rgba(14,18,24,.72),rgba(22,27,34,.58));backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 6px 24px rgba(0,0,0,.22);color:#f3f6f8}
:root[data-theme=light] .top,:root:not([data-theme=dark]) .top{background:linear-gradient(180deg,rgba(28,36,46,.93),rgba(38,46,58,.9))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .top{background:linear-gradient(180deg,rgba(14,18,24,.72),rgba(22,27,34,.58))}}
:root[data-theme=dark] .top{background:linear-gradient(180deg,rgba(14,18,24,.72),rgba(22,27,34,.58))}
.top .top-in{padding:9px 16px}
.top .logo{width:38px;height:38px;border-radius:11px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.top h1,.top h1 b,.top .bname,.top .bname b{color:#fff}.top h1 span,.top .bname span{color:#5eead4}
.top .icon-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;width:40px;height:40px;border-radius:13px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top{background:#1b222b}}

.hsum{position:relative;isolation:isolate}
.hsum::before{content:"";position:absolute;inset:34px -10px auto -10px;height:360px;z-index:-1;pointer-events:none;filter:blur(34px);opacity:.75;
  background:radial-gradient(38% 38% at 18% 30%,color-mix(in srgb,#3b82f6 38%,transparent),transparent 70%),radial-gradient(34% 34% at 82% 24%,color-mix(in srgb,var(--brand2) 40%,transparent),transparent 70%),radial-gradient(40% 40% at 30% 85%,color-mix(in srgb,#8b5cf6 32%,transparent),transparent 70%),radial-gradient(34% 34% at 85% 80%,color-mix(in srgb,#e8a317 34%,transparent),transparent 70%)}
.hcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media(min-width:760px){.hcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}}
.hcards .skeleton{aspect-ratio:1/1;height:auto;margin:0;border-radius:24px}
.htile{--g1:#0a9a80;--g2:#14c8a4;aspect-ratio:1/1;border-radius:24px;padding:12px 12px 10px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.3));backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--glass-bd);
  box-shadow:0 10px 30px rgba(11,14,17,.12),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .16s var(--ease),box-shadow .25s var(--ease)}
:root[data-theme=dark] .htile{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .htile{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14)}}
.htile::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--g1) 24%,transparent),transparent 62%);pointer-events:none}
.htile.tfree{--g1:#e8a317;--g2:#f6c85f}.htile.usd{--g1:#3b82f6;--g2:#7aa2ff}.htile.usdt{--g1:#0a9a80;--g2:#14c8a4}.htile.rub{--g1:#8b5cf6;--g2:#b197fc}
.htile>*{position:relative}
.htile:active{transform:scale(.97)}
@media(hover:hover){.htile:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(11,14,17,.18),inset 0 1px 0 rgba(255,255,255,.7)}}
.htile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ht-top{display:flex;align-items:center;gap:8px;min-width:0}
.htile .hi{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:19px;font-weight:800;background:color-mix(in srgb,var(--g1) 16%,transparent);color:var(--g1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1) 25%,transparent)}
:root[data-theme=dark] .htile .hi{color:var(--g2)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .htile .hi{color:var(--g2)}}
.ht-top b{font-size:13.5px;font-weight:700;line-height:1.35;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ht-mid{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.ht-n{font-size:clamp(21px,6.6vw,29px);font-weight:800;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;max-width:100%;white-space:nowrap}
.ht-u{font-size:11.5px;color:var(--muted);font-weight:600}
.ht-bot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.htile .chg{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent)}
.htile .chg.none{color:var(--muted)}
.htile .cpy.cpc{margin:0;flex:none;width:34px;height:34px;min-height:0;padding:0;border-radius:12px;justify-content:center;background:rgba(255,255,255,.35);border:1px solid var(--glass-bd)}
:root[data-theme=dark] .htile .cpy.cpc{background:rgba(255,255,255,.1)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .htile .cpy.cpc{background:rgba(255,255,255,.1)}}
.htile .cpy .cl{display:none}.htile .cpy .ci{font-size:15px}
.htile.locked{cursor:default}.htile.locked .gv{filter:blur(5px);opacity:.6}.htile.locked .glock{font-size:12px;font-weight:700;color:var(--muted)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.htile{background:var(--card)}}

/* detail sheet (opens from a tile) */
.hs-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,8,12,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .18s}
.hs-ov.on{opacity:1}
.hs-box{width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:26px 26px 0 0;background:var(--bg);border:1px solid var(--glass-bd);padding:12px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--sh-float);transform:translateY(24px);transition:transform .3s var(--ease)}
.hs-ov.on .hs-box{transform:none}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;position:sticky;top:-12px;background:var(--bg);padding:6px 0;z-index:1}
.hs-top b{font-size:16px}.hs-x{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--chip);font-size:16px}
.hs-body .hcard{margin-bottom:12px}
.hs-lock{overflow:hidden}
@media(min-width:700px){.hs-ov{align-items:center}.hs-box{border-radius:26px;max-height:84vh}}
@media (prefers-reduced-motion:reduce){.htile,.hs-ov,.hs-box{transition:none!important}.htile:active,.htile:hover{transform:none}}

/* per-card copy button (inside each rates card heading) */
.card h2 .cpy{margin-inline-start:auto}
.card.hero .lbl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card.hero .lbl .cpy{margin-inline-start:auto;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff}
.card h2 .cpy.done,.card .h2row>.cpy.done,.card.hero .lbl .cpy.done{background:var(--wa);border-color:var(--wa);color:#fff}

/* ---- key-rate tiles: identical size + identical inner layout whatever the name / price / lock state ---- */
.hcards{grid-auto-rows:auto;row-gap:12px;column-gap:12px}
@media(min-width:760px){.hcards{row-gap:14px;column-gap:14px}}
.htile{width:100%;height:auto;min-height:0;aspect-ratio:1/1;box-sizing:border-box;contain:layout paint;container-type:size;justify-content:flex-start;gap:0}
.htile .ht-top{flex:none;height:38px;align-items:center}
.htile .ht-top b{overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;font-size:13px;line-height:1.3;max-height:2.6em}
.htile .ht-mid{flex:1 1 0;min-height:0;justify-content:center;align-items:flex-start;gap:2px;overflow:hidden}
.htile .ht-n{font-size:clamp(17px,6.2vw,28px);font-size:clamp(17px,calc(84cqw / (var(--n,7) * .64)),28px);overflow:hidden;text-overflow:clip}
.htile .ht-u{line-height:1.2;white-space:nowrap}
.htile .ht-bot{flex:none;height:34px;min-width:0}
.htile .ht-bot .chg{white-space:nowrap;min-width:0;max-width:calc(100% - 42px);overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.htile.locked .ht-bot .glock{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* admin-only 5th bottom-bar item (management) */
.tabbar button[hidden]{display:none!important}
#nav-mgmt{position:relative}
#nav-mgmt .pbadge{top:2px;inset-inline-end:calc(50% - 22px)}

/* order page: receipt share */
.rcpt{margin-top:10px;display:grid;gap:8px}
.rcpt .rcpt-main{width:100%;justify-content:center;min-height:48px;font-size:15px;font-weight:800;border-radius:16px}
.rcpt .rcpt-row{display:flex;gap:8px;flex-wrap:wrap}
.rcpt .rcpt-row .btn{flex:1 1 140px;justify-content:center;text-align:center}
.contactbox .cnum{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;unicode-bidi:isolate}

/* ======== v4: ONE product from phone to desktop (tablet >=760, desktop >=1000). Phones (<760) are untouched. ======== */
:root{--page-max:1200px}
/* --- tablet+ : key-rate tiles = 4 across (2x2 on phones), proportional type --- */
@media(min-width:760px){
  .hcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .htile{border-radius:24px;padding:14px 14px 12px}
  .hsum::before{height:300px}
  .tile{min-height:104px}
  .ptiles{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
}
/* tablet: shortcut tiles keep the phone's icon-over-label look (a row layout is too cramped under ~960px) */
@media(min-width:620px) and (max-width:959px){
  .qs{gap:8px}
  .qs a{flex-direction:column;justify-content:flex-start;gap:5px;padding:9px 2px 7px}
  .qs a i{width:38px;height:38px}
  .qs a b{font-size:12px}
}
/* --- desktop --- */
@media(min-width:1000px){
  :root{--page-max:1200px}
  .top-in,main{max-width:var(--page-max)}
  main{padding:22px 28px 0}
  .top .top-in{padding:10px 28px}
  /* shortcut row = one glass strip of 6 equal tiles */
  .qs{gap:12px;margin:2px 0 16px}
  .qs a{padding:12px 10px;border-radius:20px;gap:11px}
  .qs a i{width:38px;height:38px;border-radius:13px;font-size:20px}
  .qs a b{font-size:14px}
  .toolbar{margin-bottom:6px}
  /* home hero: heading, 4 glass tiles, two big calls-to-action side by side */
  .hsum{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:stretch}
  .hsum>.sect,.hsum>.hcards,.hsum>#routeCalc{grid-column:1/-1}
  .hsum>.btn.mk-cta,.hsum>.btn.calc-cta{margin:16px 0 0;min-height:56px;font-size:16px;border-radius:18px}
  .hsum::before{height:380px;inset:30px -24px auto -24px}
  .hcards{gap:18px}
  .htile{aspect-ratio:1.12/1;padding:16px 18px 14px;border-radius:26px}
  .htile .ht-top{height:42px}
  .htile .hi{width:40px;height:40px;border-radius:14px;font-size:21px}
  .htile .ht-top b,.htile .ht-top b{font-size:15.5px}
  .htile .ht-n{font-size:clamp(20px,calc(84cqw / (var(--n,7) * .64)),40px)}
  .htile .ht-u{font-size:13px}
  .htile .chg{font-size:13.5px;padding:3px 10px}
  .htile .cpy.cpc{width:38px;height:38px;border-radius:13px}
  .htile .ht-bot{height:38px}
  /* "more sections" tile grid: 4 x 4, same card as the phone but roomier */
  .tiles{gap:16px}
  .tile{padding:16px 18px;min-height:112px;border-radius:20px;gap:4px}
  .tile i{font-size:30px}.tile b{font-size:15.5px}.tile small{font-size:12.5px}
  /* floating glass bar: same pill, wider for 5 items, labels beside icons */
  .tabbar{width:min(580px,calc(100% - 48px));bottom:20px;padding:7px;border-radius:28px}
  .tabbar button{padding:10px 14px}
  .tabbar button span{font-size:13.5px}
  body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  /* sticky page chrome keeps the same rhythm */
  .backbar{margin:0 0 14px}
  .subbar{margin:0 0 14px}
}
@media(min-width:1400px){.top-in,main{max-width:var(--page-max)}.cards{grid-template-columns:repeat(4,1fr)}}

/* ---- market view: one-page dashboard scaled up for tablet / desktop ---- */
@media(min-width:760px){
  #mkRoot{display:flex;flex-direction:column;gap:12px}
  #mkRoot .mk-row2,#mkRoot .mk-grid{gap:12px}
  #mkRoot .mk-card{padding:11px 14px;border-radius:18px;gap:5px}
  #mkRoot .mk-card.head{padding:13px 16px}
  #mkRoot .mk-h b{font-size:14px}
  #mkRoot .mk-card.sm .mk-h b{font-size:13.5px}
  #mkRoot .mk-n{font-size:26px}#mkRoot .mk-card.sm .mk-n{font-size:21px}
  #mkRoot .mk-bs{font-size:19px;gap:2px 12px}
  #mkRoot .mk-bs small,#mkRoot .mk-f,#mkRoot .mk-sub,#mkRoot .mk-chg{font-size:12px}
  #mkRoot .mk-ic{font-size:19px}
}
@media(min-width:1000px){
  #mkRoot{gap:14px}
  #mkRoot .mk-row2,#mkRoot .mk-grid{gap:14px}
  #mkRoot .mk-card{padding:14px 18px;border-radius:20px;gap:6px}
  #mkRoot .mk-card.head{padding:16px 20px}
  #mkRoot .mk-h b{font-size:15px}
  #mkRoot .mk-card.sm .mk-h b{font-size:14.5px}
  #mkRoot .mk-n{font-size:30px}#mkRoot .mk-card.sm .mk-n{font-size:24px}#mkRoot .mk-card.wide .mk-n{font-size:30px}
  #mkRoot .mk-bs{font-size:22px}
  #mkRoot .mk-bs small,#mkRoot .mk-f,#mkRoot .mk-sub,#mkRoot .mk-chg{font-size:12.5px}
  #mkRoot .mk-note{font-size:13px}
  #mkRoot .mk-ic{font-size:22px}
  #mkRoot .mk-top{margin-bottom:2px}
}

/* ---- calculator: list + keypad side by side, keypad no wider than the phone's ---- */
@media(min-width:900px){
  .conv{max-width:var(--page-max)}
  .cv-wrap{grid-template-columns:minmax(0,1fr) minmax(400px,480px);gap:20px}
}

/* ---- profile ("پنل من"): two-column dashboard, wallet card beside identity ---- */
@media(min-width:1000px){
  #meRoot>div:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  #meRoot>div:last-child>*{grid-column:1/-1;margin:0}
  #meRoot>div:last-child>.pv-who{grid-column:1;grid-row:1}
  #meRoot>div:last-child>#lvCard{grid-column:1;grid-row:2}
  #meRoot>div:last-child>#laiSlot{grid-column:2;grid-row:1/span 2;align-self:stretch}
  #meRoot>div:last-child>#laiSlot .lai-card{margin-top:0;height:100%}
  #meRoot .pwwarn{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px}
  #meRoot .pwwarn b{flex:1 1 100%}.pwwarn span{flex:1}
}

/* ---- member market / capabilities / admin: same page width + 3-4 col card grids ---- */
@media(min-width:1000px){
  .blist{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cards{gap:16px}
  .dcard{padding:16px 18px}
  .search{font-size:15.5px}
  .chips{gap:9px}
}

/* ===== v5 — hover never changes layout; desktop rate tiles are compact + minimal =====
   Hover/focus states change only box-shadow, opacity or colour (paint-only): no size/margin/padding/border-width/font-size/position change,
   no transform lift (so bounding boxes and neighbours stay put) and transitions are limited to box-shadow/opacity. Phones/tablets (no hover) are untouched. */
@media(hover:hover){
  .btn,.icon-btn,.chip,.p,.tile,.clk,.mcard,.qs a,.seg button,.cpy,.cv-row,.htile{transition:box-shadow .2s var(--ease),opacity .2s var(--ease)}
  .tile:hover,.clk:hover,.mcard:hover,.qs a:hover,.htile:hover,.btn:hover,.chip:hover,.p:hover,.cv-row:hover,.cpy:hover,.icon-btn:hover{transform:none}
  .tile:hover,.clk:hover,.mcard:hover,.qs a:hover,.cv-row:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 70%,transparent),var(--sh-2)}
}
@media(min-width:1000px){
  .hsum::before{height:300px}
  .hcards{gap:12px}
  .htile{aspect-ratio:auto;height:122px;padding:12px 14px 10px;border-radius:18px;backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}
  :root:root:root .htile{box-shadow:0 0 0 1px transparent,0 3px 12px rgba(11,14,17,.12),inset 0 1px 0 rgba(255,255,255,.3)}
  .htile::before{background:none}
  .htile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,color-mix(in srgb,var(--g1) 16%,transparent),transparent 72%);opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
  .htile>*{z-index:1}
  .htile .ht-top{height:30px}
  .htile .hi{width:28px;height:28px;border-radius:10px;font-size:15px;box-shadow:none}
  .htile .ht-top b{font-size:13.5px}
  .htile .ht-n{font-size:clamp(17px,calc(84cqw / (var(--n,7) * .64)),24px)}
  .htile .ht-u{font-size:11.5px}
  .htile .chg{font-size:12px;padding:1px 8px}
  .htile .cpy.cpc{width:28px;height:28px;border-radius:10px}
  .htile .ht-bot{height:28px}
  .htile:active{transform:none}
}
@media(min-width:1000px) and (hover:hover){
  :root:root:root .htile:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--g1) 65%,transparent),0 8px 22px color-mix(in srgb,var(--g1) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
  .htile:hover::after{opacity:1}
}
/* contrast: red change chip on the dark glass tile (AA >= 4.5:1 on the tinted chip background) */
:root[data-theme=dark] .htile .chg.down{color:#fca5a5}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .htile .chg.down{color:#fca5a5}}

/* v7 — bottom tab bar: always pinned to the viewport bottom. Own compositor layer on the bar only (no transformed/filtered/contained ancestors), so iOS Safari never scrolls it with the page. */
.tabbar{position:fixed;transform:translate3d(0,var(--nav-dy,0px),0);-webkit-transform:translate3d(0,var(--nav-dy,0px),0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* v8 navfix — Android Chrome/WebView/PWA: when the visible screen (visualViewport) reaches below the layout viewport (stale viewport after the keyboard / URL bar / edge-to-edge insets change), navfx.js sets --nav-dy so the bar follows the real screen bottom. 0 everywhere else (never lifts the bar above the keyboard). */

/* navfix2 (20261019d) — iOS home-screen app: the document never scrolls, <body> does (vvfix.js adds html.ios-shell + forwards scrollTo/scrollY/scroll events).
   Stops the iOS 26 WebKit drift where fixed/sticky bars are left mid-screen after the keyboard closes. Browsers other than iOS standalone are unchanged. */
html.ios-shell{height:100%;overflow:hidden;scroll-behavior:auto}
html.ios-shell body{height:100%;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}

/* ===== DESIGN 20261101b (anti-slop #11–#17, see /opt/moscow-app/DESIGN.md) =====
   Palette: brand green + neutrals + one red (down/error) + one amber (stale/warn). Blue accent, WhatsApp/Telegram colours folded into brand.
   Depth: flat surfaces with 1px borders; shadow only on floating layers (bottom bar, sheets, FAB); blur only on the top bar and bottom bar. */
:root{--accent:var(--brand);--good:var(--brand);--wa:var(--brand);--shadow:none;--sh-1:none;--sh-2:none}
:root[data-theme=dark]{--accent:var(--brand);--good:var(--brand);--wa:#0f8f76;--shadow:none;--sh-1:none;--sh-2:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--accent:var(--brand);--good:var(--brand);--wa:#0f8f76;--shadow:none;--sh-1:none;--sh-2:none}}
body *:not(.top):not(.tabbar){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.htile{background:var(--card)!important;box-shadow:none!important;border:1px solid var(--line)}
.tile,.card,.clk,.mcard,.dcard,.mk-card,.hcard,.note,.search{box-shadow:none!important}
@media(hover:hover){.tile:hover,.clk:hover,.mcard:hover,.qs a:hover,.cv-row:hover{box-shadow:none!important;border-color:var(--brand)}}
.btn.pri,.btn.wa,.calc-cta,.mk-cta{box-shadow:none!important}
/* home «بخش‌های بیشتر»: 4 primary tools large, the rest grouped as compact rows (#11), one line-icon set (#12) */
#tiles.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#tiles .tgrp{grid-column:1/-1;margin:14px 2px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
#tiles .tile i.tic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);font-size:20px;font-weight:800;font-family:Vazirmatn,system-ui,sans-serif;line-height:1}
#tiles .tile i.tic svg{width:22px;height:22px}
#tiles .tile i.tlogo2{background:none}#tiles .tile i.tlogo2 img{width:32px;height:32px;border-radius:9px;display:block}
#tiles .tile-pri{min-height:128px;padding:14px 16px;gap:4px;border-width:1px}
#tiles .tile-pri b{font-size:16px}
#tiles .tile-sec,#tiles #laiTile{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;min-height:0;padding:9px 12px;gap:0 12px;border-radius:14px}
#tiles .tile-sec>i,#tiles #laiTile>i{flex:0 0 auto;margin:0}
#tiles .tile-sec i.tic{width:34px;height:34px;border-radius:10px}#tiles .tile-sec i.tic svg{width:19px;height:19px}
#tiles .tile-sec b,#tiles #laiTile b{font-size:14px;flex:1 1 auto}
#tiles .tile-sec small,#tiles #laiTile small{flex:1 1 100%;padding-inline-start:46px;margin-top:-4px}
#tiles .tile-sec.tile-wide small,#tiles .tile-sec.tile-mbb small{padding-inline-start:0;margin-top:0}
#tiles .tile-sec .tlogo,#tiles .tile-sec .mbblogo,#tiles .tile-sec .tai{flex:0 0 auto}
#tiles .tile .tai img{box-shadow:0 0 0 1px var(--line)!important}
@media(min-width:620px){
  #tiles.tiles2{grid-template-columns:repeat(4,1fr)}
  #tiles .tile-pri{min-height:140px}
  #tiles .tile-sec,#tiles #laiTile{grid-column:span 2}
  #tiles .tile-sec.tile-wide{grid-column:span 2}
}
@media(prefers-reduced-motion:reduce){#tiles .tile{transition:none!important;transform:none!important}}
/* Telegram: keep the real Telegram mark, but cards/buttons use the brand palette (#13) */
.tgch-card{background:var(--card)!important;border-color:var(--line)!important}
.tgch-card:hover{box-shadow:none!important;border-color:var(--brand)!important}
.tgch-card svg{box-shadow:none!important}
.tgch-go{background:var(--brand)!important;color:#fff!important}
:root[data-theme=dark] .tgch-go{color:#05211e!important}
.tgch-foot{text-decoration-color:color-mix(in srgb,var(--brand) 60%,transparent)!important}
/* floating support button (#17): position/drag unchanged; the page always ends above the bottom bar + button */
@media(max-width:619px){body{padding-bottom:calc(132px + env(safe-area-inset-bottom))}}
/* ===== /DESIGN 20261101b ===== */