/* UI kit (Andre 2026-10-09, docs/ui-kit): one look for every menu page. Loaded last.
   - Cash is a stack of dollar bills everywhere (never a gold coin); diamonds are the premium currency beside it.
   - Computer screens: one 68 px top bar on every page but Home (js/ui/kit.js): back + title left, page tabs in the middle,
     Cash, Diamonds, Mail and Settings on the right. The page's own header is hidden behind it. Phones keep their layout. */
:root { --kTopH:68px; --kW:1440px; --kOl:#081631; }

/* ---------- currency icons ---------- */
.coin, #hud .coin { width:1.38em; border-radius:0; box-shadow:none; background:url("../assets/ui/cash.svg") center/contain no-repeat; }
.tGold .coin { width:44px; height:32px; margin:0 2px 0 -6px; }
#hGold .coin { width:40px; height:30px; margin-top:-15px; left:-18px; }
#hud.narrow #hGold .coin { width:32px; height:24px; margin-top:-12px; left:-14px; }
.dia { display:inline-block; width:1.15em; height:1em; flex:none; vertical-align:-.14em; background:url("../assets/ui/diamond.svg") center/contain no-repeat; }

/* ---------- the top bar (computers) ---------- */
html.lay-desk #uiTop.kTop { display:flex; align-items:center; gap:14px; height:var(--kTopH); min-height:var(--kTopH); padding:0 28px; box-sizing:border-box;
  background:linear-gradient(180deg,#1a4589,#0f2e63); border-bottom:3px solid var(--kOl); box-shadow:0 4px 12px rgba(0,0,0,.3); position:relative; z-index:6; }
html.lay-desk #ui.bare #uiTop.kTop { display:none; }
#uiTop.kTop .tPg { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:12px; }
#uiTop.kTop .pgBack { width:46px; height:46px; flex:none; border-radius:13px; border:3px solid var(--kOl); background:linear-gradient(180deg,#63afff,#2d72d6);
  display:grid; place-items:center; color:#fff; padding:0; box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--kOl); }
#uiTop.kTop .pgBack svg { width:24px; height:24px; }
#uiTop.kTop .pgBack:active { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 1px 0 var(--kOl); }
#uiTop.kTop .pgT { margin:0; font:400 30px/1 var(--fh,'Lilita One'),sans-serif; color:#fff; text-shadow:0 3px 0 var(--kOl); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#uiTop.kTop .kMid { flex:1 1 0; min-width:0; display:flex; justify-content:center; }
#uiTop.kTop .kAct { flex:none; display:flex; align-items:center; gap:8px; }
#uiTop.kTop .kAct:empty, #uiTop.kTop .kMid:empty { pointer-events:none; }
#uiTop.kTop .tRight { flex:none; display:flex; align-items:center; gap:10px; margin-left:0; }
.kMoney { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px 0 10px; border-radius:21px; background:#0a2149; border:3px solid var(--kOl);
  color:#fff; font:400 20px/1 var(--fh,'Lilita One'); white-space:nowrap; cursor:pointer; }
.kMoney .coin { font-size:22px; } .kMoney .dia { font-size:24px; }
.kMoney .kPlus { width:26px; height:26px; margin:0 -6px 0 2px; border-radius:8px; background:linear-gradient(180deg,#8ae36a,#3ea628); border:2px solid #0f3a08;
  display:grid; place-items:center; font:400 18px/1 var(--fh,'Lilita One'); }
.kMoney:active { transform:translateY(1px); }
#uiTop.kTop .tIcon { width:46px; height:46px; }
/* the page's tab row, when it lives in the bar (UI.kitTabs) */
.kSeg { display:flex; background:#0a2149; border:3px solid var(--kOl); border-radius:14px; padding:3px; gap:3px; max-width:100%; overflow:hidden; }
.kSeg button { padding:8px 20px; border:0; border-radius:10px; background:none; color:#9fb8e0; font:400 17px/1 var(--fh,'Lilita One'); white-space:nowrap; cursor:pointer; }
.kSeg button.on { background:linear-gradient(180deg,#ffd75a,#f7a91d); color:#3a2300; box-shadow:inset 0 2px 0 rgba(255,255,255,.5); }
.kSeg sup { font:900 11px var(--fb,Nunito); background:#ff4a3a; color:#fff; border-radius:8px; padding:1px 6px; margin-left:6px; vertical-align:2px; }
/* the page's own header is replaced by the bar */
html.lay-desk #ui.kit #uiView .pgHead { display:none !important; }
/* smaller computer windows: drop labels before anything overlaps */
@media (max-width:1180px) { html.lay-desk #uiTop.kTop { gap:10px; padding:0 16px; } html.lay-desk #uiTop.kTop .pgT { font-size:26px; } .kSeg button { padding:8px 12px; } }

/* ---------- kit building blocks for the redesigned pages ---------- */
.kPage { width:min(var(--kW), calc(100% - 48px)); margin:0 auto; height:100%; min-height:0; box-sizing:border-box; padding:24px 0; display:grid; gap:18px; }
.kPanel { background:rgba(7,22,56,.62); border:3px solid var(--kOl); border-radius:18px; box-shadow:inset 0 2px 0 rgba(130,185,255,.22); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.kPh { display:flex; align-items:center; gap:10px; padding:14px 18px 10px; font:400 21px/1 var(--fh,'Lilita One'); color:#fff; text-shadow:0 2px 0 var(--kOl); }
.kPh small { font:800 13px/1 var(--fb,Nunito); color:#9fb8e0; text-shadow:none; }
.kScroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; }
.kScroll::-webkit-scrollbar { width:8px; } .kScroll::-webkit-scrollbar-thumb { background:rgba(160,200,255,.4); border-radius:4px; } .kScroll::-webkit-scrollbar-track { background:transparent; }
.kBtn { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; border:3px solid #6a2400; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#ffa04a,#f05a1c 60%,#d8430e); font:400 24px/1 var(--fh,'Lilita One'); text-shadow:0 2px 0 #6a2400; box-shadow:inset 0 3px 0 rgba(255,230,190,.55),0 4px 0 #6a2400; }
.kBtn.blue { border-color:var(--kOl); background:linear-gradient(180deg,#5aa8ff,#2d6fd2); text-shadow:0 2px 0 var(--kOl); box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 4px 0 var(--kOl); }
.kBtn.red { border-color:#3a0606; background:linear-gradient(180deg,#ff6a5a,#d62a1c 60%,#a8180e); text-shadow:0 2px 0 #3a0606; box-shadow:inset 0 3px 0 rgba(255,210,200,.5),0 4px 0 #3a0606; }
.kBtn:active { transform:translateY(2px); }
.kBtn[disabled] { filter:grayscale(.7) brightness(.8); cursor:default; }
.kRow { display:grid; align-items:center; gap:10px; height:64px; padding:0 18px; border-bottom:1px solid rgba(160,200,255,.09); font:800 15px var(--fb,Nunito); }

/* ---------- Home (kit): big logo, icons top right, small DROP IN, plain menu, wealth on the player card ---------- */
.hub.kHome { grid-template-columns:minmax(0,1fr) clamp(320px, 27vw, 430px); }
.kHome .hbLogo .logoArt { width:clamp(220px, 21vw, 400px); }
.hub.kHome > .hbIcons { right:max(18px, calc((100% - 1800px) / 2)); top:16px; gap:16px; }
.kHome .hbIco { width:58px; height:58px; }
.kHome .hbIco img, .kHome .hbIco .art { width:40px; height:40px; margin:auto; }
.kHome .hbIcoL { position:absolute; left:50%; transform:translateX(-50%); bottom:-19px; font:900 11px/1 var(--fb); color:#e3eeff; white-space:nowrap; text-shadow:0 1px 0 var(--ol),0 0 3px var(--ol),0 0 3px var(--ol); pointer-events:none; }
.kHome .hbSide { padding-top:104px; gap:clamp(8px, 1.4vh, 12px); }
.kHome .hbGo { height:clamp(68px, 10.2vh, 92px); min-height:0; justify-content:center; padding:0 18px; border-radius:20px; border:3px solid #6a2400;
  background:linear-gradient(180deg,#ffa04a,#f05a1c 55%,#c63c0c); box-shadow:inset 0 3px 0 rgba(255,230,190,.55),0 5px 0 #6a2400; }
.kHome .hbGo .hgT { flex:none; align-items:center; }
.kHome .hbGo .hgT b { font-size:clamp(32px, 4.9vh, 44px); text-shadow:0 3px 0 #6a2400,0 -1px 0 #6a2400,2px 0 0 #6a2400,-2px 0 0 #6a2400; }
.kHome .hbMenu { gap:clamp(8px, 1.4vh, 12px); }
.kHome .hbM { min-height:0; height:clamp(48px, 6.9vh, 62px); padding:0 16px 0 10px; gap:14px; border-radius:16px; }
.kHome .hbM .hmI { width:46px; height:46px; }
.kHome .hbM .hmT { font-size:clamp(19px, 2.7vh, 24px); }
/* the player card: who you are on the left, how rich you are on the right */
.kHome .hbMe { gap:18px; max-width:min(100%, 820px); padding:14px 26px 14px 14px; border-radius:22px; background:linear-gradient(180deg,rgba(10,28,66,.92),rgba(6,18,46,.94)); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.kHome .hbAv { width:84px; height:84px; border-radius:18px; }
.kHome .hbWho { gap:6px; min-width:0; }
.kHome .hbWho > b { font-size:24px; max-width:340px; }
.kHome .hbWho { flex:0 1 auto; }
.kHome .hbXp { width:clamp(160px, 14vw, 230px); height:14px; }
.kHome .hbXpT { font:800 13px/1.1 var(--fb); color:#9fb8e0; white-space:nowrap; }
.kHome .hbGate { max-width:280px; }
.kHome .hbRank { width:58px; height:64px; font-size:26px; }
.kHome .hbDiv { width:3px; align-self:stretch; background:rgba(130,170,240,.25); border-radius:2px; flex:none; }
.kHome .hbRich { display:flex; flex-direction:column; gap:6px; min-width:0; }
.kHome .hbRich small { font:900 12px/1 var(--fb); letter-spacing:.14em; color:#9fd7a6; }
.kHome .hbCashBig { display:flex; align-items:center; gap:12px; font:400 clamp(36px, 6.4vh, 58px)/1 var(--fh); color:#9dff8f; text-shadow:0 4px 0 #0b3a12,0 0 18px rgba(120,255,120,.35); white-space:nowrap; font-variant-numeric:tabular-nums; }
.kHome .hbCashBig .coin { width:1.2em; height:.9em; vertical-align:0; }
.kHome .hbDia { display:flex; align-items:center; gap:8px; font:400 clamp(18px, 2.9vh, 26px)/1 var(--fh); color:#bfefff; text-shadow:0 2px 0 #083a66; cursor:pointer; align-self:flex-start; }
.kHome .hbDia .kPlus { width:28px; height:28px; border-radius:8px; background:linear-gradient(180deg,#8ae36a,#3ea628); border:2px solid #0f3a08; display:grid; place-items:center; font:400 20px/1 var(--fh); color:#fff; text-shadow:none; margin-left:6px; }
.kHome .hbCards:empty { display:none; }
/* phones and tall windows: the same pieces, one column, smaller wealth */
@media (max-width: 640px), (max-aspect-ratio: 3/4) {
  .hub.kHome { grid-template-columns:minmax(0,1fr); }
  .hub.kHome > .hbIcons { right:12px; top:12px; gap:10px; }
  .kHome .hbIco { width:42px; height:42px; } .kHome .hbIco img, .kHome .hbIco .art { width:30px; height:30px; }
  .kHome .hbIcoL { display:none; }
  .kHome .hbLogo .logoArt { width:clamp(120px, 34vw, 170px); }
  .kHome .hbSide { padding-top:0; }
  .kHome .hbGo { height:62px; } .kHome .hbGo .hgT b { font-size:32px; }
  .kHome .hbM { height:48px; } .kHome .hbM .hmI { width:34px; height:34px; } .kHome .hbM .hmT { font-size:18px; }
  .kHome .hbMe { flex-wrap:wrap; gap:10px; padding:10px 12px; }
  .kHome .hbAv { width:56px; height:56px; } .kHome .hbWho > b { font-size:20px; max-width:180px; }
  .kHome .hbRank { width:42px; height:48px; font-size:20px; }
  .kHome .hbDiv { display:none; }
  .kHome .hbRich { flex-basis:100%; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 14px; }
  .kHome .hbRich small { flex-basis:100%; }
  .kHome .hbCashBig { font-size:34px; }
  .kHome .hbDia { font-size:18px; }
}
@media (min-width: 641px) and (min-aspect-ratio: 3/4) { html.lay-desk .hub.kHome > .hbIcons { right:max(18px, calc((100% - 1800px) / 2)); } }
/* Crime Map: the insurance switch beside Start Heist / Drop In */
.cmGoBar .cmInsBar { flex:none; display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; border-radius:14px; background:#0a2149; border:3px solid var(--kOl); color:#fff; font:800 15px/1 var(--fb); white-space:nowrap; cursor:pointer; }
.cmGoBar .cmInsBar input { width:20px; height:20px; margin:0; accent-color:#3ea628; cursor:pointer; }
.cmGoBar .cmInsBar.dim { color:#9fb8e0; cursor:default; }
@media (max-width: 640px) { .cmGoBar { gap:8px; } .cmGoBar .cmGoInfo { display:none; } .cmGoBar .cmInsBar { height:52px; padding:0 10px; font-size:13px; white-space:normal; line-height:1.15; max-width:46%; } .cmGoBar .cmGo { flex:1 1 auto; min-width:0; white-space:nowrap; font-size:clamp(18px, 6vw, 24px); padding:0 10px; } }

/* ---------- Extracted / Wasted (kit end screens, option B): the moment on the left, one panel on the right ---------- */
#uiView > .screen.kRes { display:grid; grid-template-columns:minmax(0,1fr) minmax(520px, 44%); gap:40px; height:100%; min-height:0; box-sizing:border-box; padding:44px 56px 40px; margin:0; max-width:none; position:relative; overflow:hidden; color:#fff;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 16px,transparent 16px 32px),radial-gradient(ellipse at 28% 34%,#3a8ae0,#16438a 55%,#0a2350); }
#uiView > .screen.kRes.lose { background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 16px,transparent 16px 32px),radial-gradient(ellipse at 28% 34%,#5a2030,#2a1220 55%,#120810); }
#ui[data-scr="results"] #uiView { overflow:hidden; }
.kRes .krL { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.kRes .krH { margin:0; font:400 clamp(72px, 11vh, 108px)/1 var(--fh); letter-spacing:2px; color:#c9ff9e; text-shadow:0 5px 0 #0f3a08,0 0 30px rgba(140,255,90,.45); }
.kRes.lose .krH { color:#ff6a5a; text-shadow:0 5px 0 #3a0606,0 0 30px rgba(255,60,40,.45); }
.kRes .krSub { margin:12px 0 0; font:900 24px/1.3 var(--fb); color:#e3eeff; }
.kRes .krSub b { color:#ffd75a; } .kRes.lose .krSub { color:#ffd9d4; } .kRes.lose .krSub b { color:#ffb4a8; }
.kRes .krKiller { margin-top:22px; display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:18px; background:rgba(20,6,10,.78); border:3px solid #1a0608; max-width:680px; }
.kRes .krAv { width:66px; height:66px; flex:none; border-radius:16px; background:linear-gradient(180deg,#ff8a6a,#c43a2a); border:3px solid #1a0608; display:grid; place-items:center; font:400 30px/1 var(--fh); }
.kRes .krKw { display:flex; flex-direction:column; gap:4px; min-width:0; }
.kRes .krKw b { font:400 30px/1 var(--fh); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kRes .krKw small { font:900 15px/1.25 var(--fb); color:#d9a8ae; }
.kRes .krRev { margin-left:auto; flex:none; padding:10px 14px; border-radius:12px; background:linear-gradient(180deg,#ff6a5a,#c4281c); border:3px solid #3a0606; font:400 17px/1 var(--fh); text-shadow:0 2px 0 #3a0606; white-space:nowrap; }
.kRes .krStage { position:relative; flex:1; min-height:180px; }
.kRes .krStage .resRays { left:50%; top:50%; width:760px; height:760px; margin:-380px 0 0 -380px; }
.kRes .krPed { position:absolute; left:50%; bottom:9%; width:min(560px, 86%); height:18%; max-height:120px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#c9cdd4,#7d838c 60%,#3e434a); border:4px solid #20242a; box-shadow:0 18px 30px rgba(0,0,0,.45); }
.kRes .krPed::after { content:""; position:absolute; left:-4px; right:-4px; bottom:-22px; height:30px; border-radius:0 0 50% 50%/0 0 100% 100%; background:repeating-linear-gradient(90deg,#f5c21b 0 18px,#1b1b1b 18px 36px); z-index:-1; }
.kRes .resCar { left:50%; bottom:11%; width:min(640px, 96%); height:58%; transform:translateX(-50%); }
.kRes.lose .resCar { filter:grayscale(.8) brightness(.5) sepia(.5) hue-rotate(-20deg) saturate(1.5) drop-shadow(0 8px 6px rgba(0,0,0,.4)) !important; transform:translateX(-50%) rotate(-4deg); }
.kRes.lose .krPed { filter:brightness(.6); }
.kRes .krFire { position:absolute; left:50%; bottom:30%; width:220px; height:220px; margin-left:-110px; border-radius:50%; background:radial-gradient(circle,rgba(255,170,60,.8),rgba(255,80,20,.3) 45%,rgba(255,60,0,0) 70%); animation:krFlick 1.4s ease-in-out infinite; }
.kRes .krSmoke { position:absolute; left:46%; bottom:52%; width:260px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(70,60,60,.7),rgba(40,30,30,0) 70%); animation:krSmoke 5s ease-in-out infinite; pointer-events:none; }
.kRes .krSmoke.b { left:54%; bottom:64%; width:180px; height:160px; animation-delay:-2.5s; }
@keyframes krFlick { 50% { opacity:.65; transform:scale(.92); } }
@keyframes krSmoke { 0% { transform:translateY(10px) scale(.9); opacity:.75; } 100% { transform:translateY(-40px) scale(1.2); opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .kRes .krFire, .kRes .krSmoke { animation:none; } }
.kRes .krCar { font:400 30px/1 var(--fh); padding-left:18px; } .kRes .krCar small { font:900 17px var(--fb); color:#9fb8e0; } .kRes.lose .krCar small { color:#d9a8ae; }
/* the panel */
.kRes .krR { padding:26px 30px; gap:18px; }
.kRes.lose .krR { background:rgba(30,10,18,.74); border-color:#1a0608; box-shadow:inset 0 2px 0 rgba(255,140,140,.14); }
.kRes .krTop { display:flex; flex-direction:column; gap:18px; flex:none; }
.kRes .krLbl { font:900 13px/1 var(--fb); letter-spacing:.14em; color:#9dff8f; }
.kRes.lose .krLbl { color:#d9a8ae; }
.kRes .krCashN { display:flex; align-items:center; gap:2px; margin-top:8px; font:400 clamp(52px, 8vh, 78px)/1 var(--fh); color:#9dff8f; text-shadow:0 4px 0 #0b3a12,0 0 18px rgba(120,255,120,.3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.kRes .krCashN.neg { color:#ff8a7a; text-shadow:0 4px 0 #3a0606; } .kRes .krCashN.zero { color:#e3eeff; text-shadow:0 4px 0 rgba(0,0,0,.35); }
.kRes .krCashN .coin { width:1.1em; height:.82em; margin-right:14px; vertical-align:0; }
.kRes.lose .krCashN { font-size:clamp(40px, 6vh, 56px); }
.kRes .krXpT { display:flex; justify-content:space-between; font:900 14px/1 var(--fb); letter-spacing:.1em; color:#cfe0ff; }
.kRes .krXpT b { font:400 22px/1 var(--fh); letter-spacing:0; color:#fff; }
.kRes .krBar { display:block; height:18px; margin-top:10px; border-radius:9px; background:#0a1d40; border:2px solid var(--kOl); overflow:hidden; }
.kRes .krBar i { display:block; height:100%; background:linear-gradient(180deg,#8fe0ff,#2a9be0); transition:width .2s; }
.kRes .krSk { align-self:flex-start; padding:8px 14px; border-radius:12px; border:3px solid var(--kOl); background:#123571; color:#ffd75a; font:900 14px var(--fb); cursor:pointer; }
.kRes .krSk b { font:400 18px var(--fh); }
.kRes .krMid { display:flex; flex-direction:column; gap:18px; margin:0 -8px; padding:0 8px; }
.kRes .krStats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kRes .krStats > div { padding:14px 8px; border-radius:14px; background:rgba(5,16,40,.7); border:2px solid var(--kOl); text-align:center; }
.kRes .krStats b { display:block; font:400 30px/1 var(--fh); } .kRes .krStats small { font:900 12px var(--fb); letter-spacing:.08em; color:#8aa6d4; }
.kRes .krSh { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; font:400 23px/1 var(--fh); }
.kRes .krSh small { font:900 14px var(--fb); color:#9fb8e0; }
.kRes .krSh.r { color:#ff8a7a; } .kRes .krSh.g { color:#9dff8f; } .kRes .krSh.y { color:#ffd75a; }
.kRes .krAmt { margin-left:auto; font:400 28px/1 var(--fh); } .kRes .krAmt:not(.r):not(.g) { font:900 15px var(--fb); color:#d9a8ae; }
.kRes .krItems { display:flex; flex-wrap:wrap; gap:10px; }
.kRes .krItems > * { width:84px; height:84px; flex:none; }
.kRes .krItems [data-saved] { box-shadow:0 0 0 3px #3ea628; }
.kRes .krList { display:flex; flex-direction:column; gap:10px; }
.kRes .krLi { display:flex; align-items:center; justify-content:space-between; gap:14px; font:900 17px/1.3 var(--fb); }
.kRes .krLi > span { min-width:0; }
.kRes .krLi b { flex:none; font:400 22px/1 var(--fh); } .kRes .krLi b.g { color:#9dff8f; } .kRes .krLi b.y { color:#ffd75a; }
.kRes .krNote { color:#cfe0ff; font-weight:800; }
.kRes .krMore { flex:none; border:2px solid var(--kOl); background:#123571; color:#cfe0ff; border-radius:10px; padding:6px 10px; font:900 13px var(--fb); cursor:pointer; }
.kRes .kBtn.krSm { height:40px; padding:0 16px; font-size:17px; border-radius:12px; flex:none; }
.kRes .krBtns { flex:none; display:flex; flex-direction:column; gap:14px; }
.kRes .krGo { height:72px; font-size:32px; }
.kRes .krRow { display:grid; grid-template-columns:repeat(var(--n, 2), 1fr); gap:14px; }
.kRes .krRow .kBtn { height:58px; font-size:20px; }
.kRes .krRow .kBtn svg { width:22px; height:22px; }
/* phones and tall windows: the moment on top, the panel under it, the page scrolls */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  #ui[data-scr="results"] #uiView { overflow-y:auto; }
  #uiView > .screen.kRes { display:flex; flex-direction:column; height:auto; min-height:100%; gap:16px; padding:18px 14px 24px; }
  .kRes .krH { font-size:clamp(46px, 13vw, 72px); } .kRes .krSub { font-size:17px; }
  .kRes .krKiller { margin-top:12px; padding:10px; gap:10px; flex-wrap:wrap; } .kRes .krAv { width:48px; height:48px; font-size:22px; } .kRes .krKw b { font-size:22px; }
  .kRes .krRev { margin-left:0; font-size:14px; }
  .kRes .krStage { flex:none; height:clamp(170px, 30vh, 260px); }
  .kRes .krStage .resRays { width:420px; height:420px; margin:-210px 0 0 -210px; }
  .kRes .krCar { font-size:22px; padding-left:4px; } .kRes .krCar small { font-size:14px; }
  .kRes .krR { padding:16px; gap:14px; overflow:visible; }
  .kRes .krMid { overflow:visible; }
  .kRes .krCashN { font-size:44px; } .kRes.lose .krCashN { font-size:36px; }
  .kRes .krStats b { font-size:22px; } .kRes .krStats > div { padding:10px 4px; }
  .kRes .krItems > * { width:64px; height:64px; }
  .kRes .krGo { height:56px; font-size:26px; } .kRes .krRow { grid-template-columns:repeat(var(--n, 2), 1fr); gap:8px; } .kRes .krRow .kBtn { height:46px; font-size:15px; padding:0 6px; }
  /* the buttons stay on screen while the page scrolls */
  #uiView > .screen.kRes { overflow:visible; padding-bottom:0; }
  .kRes .krBtns { position:sticky; bottom:0; z-index:3; gap:8px; margin:0 -16px -16px; padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(180deg,rgba(7,22,56,.0),rgba(7,22,56,.96) 22%); }
  .kRes.lose .krBtns { background:linear-gradient(180deg,rgba(30,10,18,0),rgba(30,10,18,.97) 22%); }
}

/* ---------- Crime Map (kit): job list panel on the left (only the list scrolls), map + job card + launch bar on the right ---------- */
.cmList { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cmScr > .cmTabs { margin:0 0 12px; width:max-content; max-width:100%; }
.cmTabH { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:2px 2px 0; }
.cmTabH b { font:400 22px/1 var(--fh); text-shadow:var(--so2); } .cmTabH small { font:800 13px var(--fb); color:var(--mut); }
html.lay-desk #ui.kit .cmScr > .cmTabs { display:none; } /* the tabs are in the top bar */
html.lay-desk #ui.kit[data-scr="crimemap"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.cmScr { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; container:none;
  display:grid; grid-template-columns:minmax(440px, 600px) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"left right" "left go"; gap:16px 18px; }
html.lay-desk #ui.kit .cmScr .cmGrid { display:contents; }
html.lay-desk #ui.kit .cmScr .cmLeft { grid-area:left; min-height:0; gap:0; background:rgba(7,22,56,.62); border:3px solid var(--kOl); border-radius:18px; box-shadow:inset 0 2px 0 rgba(130,185,255,.22); overflow:hidden; }
html.lay-desk #ui.kit .cmScr .cmBar { flex:none; margin:0; padding:12px 14px 2px; border-bottom:2px solid rgba(160,200,255,.1); }
html.lay-desk #ui.kit .cmScr .cmList { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 14px 16px; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; }
html.lay-desk #ui.kit .cmScr .cmRight { grid-area:right; position:static; min-height:0; gap:14px; }
html.lay-desk #ui.kit .cmScr .cmMap { flex:1 1 0; min-height:180px; aspect-ratio:auto; border-radius:18px; }
html.lay-desk #ui.kit .cmScr .cmCard { flex:none; max-height:48%; overflow-y:auto; scrollbar-width:thin; border-radius:18px; }
html.lay-desk #ui.kit .cmScr .cmGoBar { grid-area:go; position:static; margin:0; border-radius:18px; padding:12px 14px; }
html.lay-desk #ui.kit .cmScr .cmGoBar .cmGo { min-width:260px; }
@media (max-width: 1280px) {
  html.lay-desk #ui.kit #uiView > .pgScr.cmScr { grid-template-columns:minmax(0,44fr) minmax(0,56fr); width:calc(100% - 32px); gap:14px; }
  html.lay-desk #ui.kit .cmScr .cmGoBar .cmGoInfo { display:none; }
  html.lay-desk #ui.kit .cmScr .cmGoBar .cmGo { min-width:0; flex:1 1 auto; }
}

/* ---------- Loadout (kit): Weapons/Gear/Supplies · the car · Driver + Skills, three panels, no page scroll on computers ---------- */
.kLo .kPanel { min-width:0; }
.kLo .loRig, .kLo .loMid { gap:0; }
.kLo .loRigIn { display:flex; flex-direction:column; gap:10px; padding:0 16px 16px; }
.kLo .loRigIn .kPh { padding:8px 0 0; }
.kLo .loSub .btn { margin-left:auto; }
.kLo .loCarH { justify-content:space-between; }
.kLo .loCarN { display:flex; flex-direction:column; gap:4px; min-width:0; } .kLo .loCarN b { font:400 26px/1 var(--fh); } .kLo .loCarN small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kLo .loCarH .loSw { display:flex; align-items:center; gap:6px; flex:none; } .kLo .loSwN { font:400 16px var(--fh); min-width:44px; text-align:center; }
.kLo .loStage { margin:0 16px; }
.kLo .loPlate { display:flex; justify-content:center; padding:10px 16px 0; background:none; border:0; box-shadow:none; }
.kLo .loStats { display:grid; grid-template-columns:72px 1fr 48px; gap:8px 12px; align-items:center; padding:12px 18px 4px; font:900 12px var(--fb); letter-spacing:.08em; color:#cfe0ff; }
.kLo .loBar { height:12px; border-radius:6px; background:#0a1d40; border:2px solid var(--kOl); overflow:hidden; }
.kLo .loBar i { display:block; height:100%; background:linear-gradient(180deg,#8fe0ff,#2a9be0); }
.kLo .loStats b { font:400 18px/1 var(--fh); letter-spacing:0; text-align:right; color:#fff; }
.kLo .loLinks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 16px 0; }
.kLo .loLinks .kBtn { height:46px; font-size:16px; padding:0 6px; white-space:nowrap; }
.kLo .kBtn svg { width:18px; height:18px; flex:none; }
.kLo .loRep { margin:10px 16px 16px; height:50px; font-size:20px; }
.kLo .loSide { display:flex; flex-direction:column; gap:18px; min-width:0; }
.kLo .loDrvIn { display:flex; align-items:center; gap:14px; padding:0 16px 16px; }
.kLo .loDrvImg { height:clamp(96px, 14vh, 130px); width:auto; flex:none; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.kLo .loDrvT { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.kLo .loDrvT b { font:400 26px/1 var(--fh); } .kLo .loDrvT small { font:800 13px/1.3 var(--fb); color:#9fb8e0; }
.kLo .loDrvT .kBtn { height:42px; padding:0 16px; font-size:16px; margin-top:4px; }
.kLo .loSkP { flex:1; }
.kLo .loSkP .loBr { padding:0 16px; }
.kLo .loSkNote { padding:0 16px; }
.kLo .loSkGo { margin-top:auto; padding:16px; } .kLo .loSkGo .kBtn { width:100%; height:54px; font-size:21px; }
html.lay-desk #ui.kit[data-scr="loadout"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .screen.lo3.kLo { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; container:none; }
html.lay-desk #ui.kit .kLo .loGrid { display:grid; grid-template-columns:minmax(0,470fr) minmax(0,570fr) minmax(0,400fr); gap:18px; height:100%; align-items:stretch; }
html.lay-desk #ui.kit .kLo .loRig { min-height:0; }
html.lay-desk #ui.kit .kLo .loMid { order:0; position:static; min-height:0; }
html.lay-desk #ui.kit .kLo .loStage { flex:1 1 0; height:auto; min-height:160px; aspect-ratio:auto; }
html.lay-desk #ui.kit .kLo .loSide { min-height:0; }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .screen.lo3.kLo { width:calc(100% - 32px); } html.lay-desk #ui.kit .kLo .loGrid { gap:12px; } .kLo .loLinks .kBtn { font-size:14px; } }

/* ---------- Black Market (kit): rows, one item per row; filters · rows (only they scroll) · the picked row's detail ---------- */
.kBm .bmPane.kPanel { padding:0; }
.kBm .bmFilt { padding:12px; gap:6px; }
.kBm .bmTools { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:2px solid var(--kOl); flex:none; }
.kBm .bmTt { margin:0; flex:1; font:400 21px var(--fh); text-shadow:0 2px 0 var(--kOl); }
.kBm .bmSearch { flex:1; min-width:0; height:42px; }
.kBm .bmSort { height:42px; width:auto; flex:none; }
.kBm .bmReload, .kBm .bmAll { height:42px; padding:0 12px; font-size:15px; flex:none; border-radius:12px; } .kBm .bmReload svg { width:18px; height:18px; }
.kBm .bmFeed, .kBm .bmStash { display:flex; flex-direction:column; min-height:0; }
.kBm .bmFeed { --cols:46px minmax(0,2fr) minmax(0,1.25fr) 96px 48px 92px 80px; }
.kBm .bmStash { --cols:30px 46px minmax(0,2fr) 56px minmax(0,1.2fr); }
.kBm .bmTh { flex:none; display:grid; grid-template-columns:var(--cols); gap:10px; align-items:center; height:36px; padding:0 16px; background:rgba(5,16,40,.6); font:900 11.5px var(--fb); letter-spacing:.06em; text-transform:uppercase; color:#8aa6d4; }
.kBm .bmTh:not(.sell) span:first-child { grid-column:span 2; } .kBm .bmTh.sell span:nth-child(2) { grid-column:span 2; }
.kBm .bmList { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; }
.kBm .bmList > .empty { margin:24px 16px; }
.kBm .bmRow { display:grid; grid-template-columns:var(--cols); gap:10px; align-items:center; min-height:64px; padding:6px 16px; border-bottom:1px solid rgba(160,200,255,.09); cursor:pointer; color:#fff; }
.kBm .bmRow:hover { background:rgba(255,255,255,.04); }
.kBm .bmRow.sel, .kBm .bmRow.on { background:linear-gradient(90deg,rgba(255,215,90,.18),rgba(255,215,90,.04)); box-shadow:inset 4px 0 0 #ffd75a; }
.kBm .bmRow.no { opacity:.55; cursor:default; }
.kBm .bmRow.bmHl { box-shadow:inset 4px 0 0 #8ff08a; }
.kBm .bmRi { width:46px; height:46px; border-radius:10px; background:#123571; border:2px solid var(--kOl); display:grid; place-items:center; overflow:hidden; }
.kBm .bmRi img, .kBm .bmRi .art, .kBm .bmRi .ia { width:38px; height:38px; object-fit:contain; font-size:26px; }
.kBm .bmRn { min-width:0; } .kBm .bmRn b { display:block; font:900 15px/1.2 var(--fb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kBm .bmRn small { font:800 12px var(--fb); color:#8aa6d4; }
.kBm .bmRar { position:static; display:inline-block; font:900 9.5px/1 var(--fb); font-style:normal; padding:3px 6px; border-radius:6px; margin-left:6px; vertical-align:2px; background:var(--rc, #3a5fa8); border:1px solid rgba(0,0,0,.3); }
.kBm .bmRs { display:flex; align-items:center; gap:8px; min-width:0; } .kBm .bmRs > span:last-child { min-width:0; } .kBm .bmRs b { display:block; font:900 13.5px/1.2 var(--fb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kBm .bmRs small { font:800 11px var(--fb); color:#8aa6d4; }
.kBm .bmRl, .kBm .bmRq { font:800 13px var(--fb); color:#9fb8e0; } .kBm .bmRq { color:#fff; font-size:14px; }
.kBm .bmRp { display:flex; align-items:center; gap:6px; font:400 19px/1 var(--fh); color:#bfffb4; white-space:nowrap; } .kBm .bmRp .coin { font-size:15px; }
.kBm .bmRo { display:flex; align-items:center; gap:8px; min-width:0; }
.kBm .bmRbw { display:flex; justify-content:flex-end; } .kBm .bmRb { height:38px; padding:0 14px; font-size:16px; border-radius:12px; }
.kBm .bmChk { position:static; inset:auto; transform:none; opacity:1; width:26px; height:26px; border-radius:8px; border:2px solid var(--kOl); background:#0a2149; display:grid; place-items:center; color:transparent; }
.kBm .bmRow.on .bmChk { background:linear-gradient(180deg,#8ae36a,#3ea628); color:#fff; } .kBm .bmRow.no .bmChk { color:#9fb8e0; } .kBm .bmChk svg { width:16px; height:16px; }
.kBm .bmFoot { margin:12px 16px 16px; }
/* the detail panel */
.kBm .bmDet { padding:18px; gap:14px; overflow-y:auto; }
.kBm .bmDBig { display:flex; align-items:center; gap:14px; }
.kBm .bmDArt { width:96px; height:96px; flex:none; border-radius:16px; background:#123571; border:3px solid var(--kOl); display:grid; place-items:center; }
.kBm .bmDArt img, .kBm .bmDArt .art, .kBm .bmDArt .ia { width:80px; height:80px; object-fit:contain; font-size:54px; }
.kBm .bmDBig b { display:block; font:400 24px/1.1 var(--fh); } .kBm .bmDBig small { font:800 13px var(--fb); color:#9fb8e0; }
.kBm .bmDesc { margin:0; font:700 13.5px/1.45 var(--fb); color:#cfe0ff; }
.kBm .bmKv { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font:800 14px var(--fb); } .kBm .bmKv span { color:#9fb8e0; } .kBm .bmKv b { text-align:right; } .kBm .bmKv .g { color:#bfffb4; }
.kBm .bmStep { display:flex; align-items:center; gap:10px; }
.kBm .bmStep .kBtn { width:46px; height:46px; padding:0; font-size:26px; border-radius:12px; } .kBm .bmStep b { min-width:60px; text-align:center; font:400 28px/1 var(--fh); }
.kBm .bmMax { margin-left:auto; border:2px solid var(--kOl); background:#123571; color:#cfe0ff; border-radius:10px; padding:8px 12px; font:900 13px var(--fb); cursor:pointer; }
.kBm .bmGo { height:58px; font-size:22px; } .kBm .bmMsg { height:46px; font-size:17px; }
.kBm .bmMore { margin:0; font:800 12.5px var(--fb); color:#9fb8e0; }
.bmDetS { display:flex; flex-direction:column; gap:14px; } /* phones: the detail as a sheet */
.bmDetS .bmDBig { display:flex; align-items:center; gap:12px; } .bmDetS .bmDArt { width:72px; height:72px; display:grid; place-items:center; } .bmDetS .bmDArt img { width:60px; height:60px; }
.bmDetS .bmKv { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; } .bmDetS .bmKv b { text-align:right; }
.bmDetS .bmStep { display:flex; align-items:center; gap:10px; } .bmDetS .bmStep .kBtn { width:46px; height:46px; padding:0; font-size:24px; } .bmDetS .bmStep b { min-width:50px; text-align:center; font:400 26px var(--fh); }
.bmDetS .bmGo { height:54px; font-size:20px; } .bmDetS .bmMsg { height:46px; }
/* computers: the page doesn't scroll */
html.lay-desk #ui.kit .kBm > .bmTabs { display:none; }
html.lay-desk #ui.kit[data-scr="blackmarket"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.kBm { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; container:none; }
html.lay-desk #ui.kit .kBm .bmCols { flex:1; min-height:0; margin:0; gap:18px; align-items:stretch; }
html.lay-desk #ui.kit .kBm .bmBuy { grid-template-columns:220px minmax(0,1fr) 360px; }
html.lay-desk #ui.kit .kBm .bmSell { grid-template-columns:minmax(0,1fr) 420px; }
html.lay-desk #ui.kit .kBm .bmOpts, html.lay-desk #ui.kit .kBm .bmFilt { position:static; overflow-y:auto; }
html.lay-desk #ui.kit .kBm .bmOpts { padding:16px; }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .pgScr.kBm { width:calc(100% - 32px); } html.lay-desk #ui.kit .kBm .bmBuy { grid-template-columns:180px minmax(0,1fr) 300px; gap:12px; } .kBm .bmFeed { --cols:40px minmax(0,2fr) minmax(0,1.2fr) 44px 84px 70px; } .kBm .bmFeed .bmRl, .kBm .bmFeed .bmTh span:nth-child(3) { display:none; } }
/* phones and narrow windows: filters on top, rows below (seller under the name), the detail opens as a sheet */
@media (max-width: 900px) {
  .kBm .bmDet { display:none; }
  .kBm .bmFeed { --cols:42px minmax(0,1fr) 82px 64px; }
  .kBm .bmFeed .bmTh span:nth-child(2), .kBm .bmFeed .bmTh span:nth-child(3), .kBm .bmFeed .bmTh span:nth-child(4) { display:none; }
  .kBm .bmFeed .bmRs, .kBm .bmFeed .bmRl, .kBm .bmFeed .bmRq { display:none; }
  .kBm .bmStash { --cols:28px 42px minmax(0,1fr) 40px minmax(0,.9fr); }
  .kBm .bmRow { padding:6px 10px; gap:8px; } .kBm .bmTh { padding:0 10px; gap:8px; }
  .kBm .bmTools { flex-wrap:wrap; padding:10px; } .kBm .bmSearch { flex-basis:100%; }
  .kBm .bmList { overflow:visible; }
}
.kBm .bmRow.on .bmChk svg, .kBm .bmRow.no .bmChk svg { opacity:1; }

/* ---------- Store (kit): one page, four tabs (Diamonds, Skins, Daily gifts, Earn Cash), no side sheet ---------- */
.stScr > .stTabs, .kSk > .stTabs { margin:0 0 12px; width:max-content; max-width:100%; overflow-x:auto; }
.stIn { display:flex; flex-direction:column; gap:22px; padding:22px; }
.stHead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stHead h3 { margin:0; font:400 30px/1.1 var(--fh); text-shadow:0 2px 0 var(--kOl); } .stHead p { margin:4px 0 0; font:800 14px var(--fb); color:#9fb8e0; }
.stHead .stBig { font-size:52px; } .stHead .stBal { margin-left:auto; cursor:default; }
.stPacks { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; }
.stPack { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px 14px; border-radius:18px; border:3px solid var(--kOl); background:linear-gradient(180deg,#2a6cc8,#1a4590); box-shadow:inset 0 2px 0 rgba(255,255,255,.25); text-align:center; color:#fff; }
.stPack.best { border-color:#ffd75a; box-shadow:0 0 0 3px rgba(255,215,90,.35), inset 0 2px 0 rgba(255,255,255,.25); }
.stPack.starter { background:linear-gradient(180deg,#7a3ae0,#4a1d9a); }
.stBest { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:4px 10px; border-radius:9px; background:linear-gradient(180deg,#ffd75a,#f7a91d); color:#3a2300; border:2px solid #6a4a00; font:900 11px/1 var(--fb); white-space:nowrap; }
.stGems { height:96px; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.stGems.stStart { align-items:center; font:400 22px/1.1 var(--fh); }
.stPack b { display:flex; align-items:center; gap:6px; font:400 26px/1 var(--fh); } .stPack small { font:800 12.5px var(--fb); color:#cfe0ff; }
.stPack .kBtn { width:100%; height:46px; font-size:18px; margin-top:auto; }
.stNote { margin:0; }
/* daily gifts as a full tab: the week as seven big cards */
.st-daily .dHead h3 { font-size:30px; } .st-daily .dHead p { font-size:15px; }
.st-daily .dGrid { grid-template-columns:repeat(7, minmax(0,1fr)); gap:14px; margin:0; }
.st-daily .dCell { min-height:clamp(170px, 26vh, 240px); padding:14px 8px; gap:8px; border-radius:18px; justify-content:space-between; }
.st-daily .dCell .dArt img, .st-daily .dCell .dArt .art { width:clamp(64px, 9vh, 96px); height:clamp(64px, 9vh, 96px); }
.st-daily .dCell.big { grid-column:auto; grid-row:auto; }
.st-daily .dDay { font-size:18px; } .st-daily .dRew { font-size:13.5px; line-height:1.3; }
.st-daily #dailyClaim { width:min(420px, 100%); align-self:center; height:66px; font-size:28px; }
.st-daily .dNext { align-self:center; font-size:16px; }
.st-free .dHead h3 { font-size:30px; } .st-free .shInfo { font-size:15px; } .st-free .btn { max-width:420px; }
/* Skins: the grid (big cards, four across, scrolling) and the try-on panel */
.kSk .skCols { display:flex; flex-direction:column; gap:14px; }
.kSk .skPR { padding:14px; gap:12px; }
.kSk .skPL #skCatsBox { padding:12px 12px 4px; flex:none; }
.kSk .skLIn { padding:6px 12px 14px; }
.kSk .skAbout { margin:0; }
html.lay-desk #ui.kit .stScr > .stTabs, html.lay-desk #ui.kit .kSk > .stTabs { display:none; }
html.lay-desk #ui.kit[data-scr="store"] #uiView, html.lay-desk #ui.kit[data-scr="skins"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.stScr, html.lay-desk #ui.kit #uiView > .screen.kSk { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; container:none; }
html.lay-desk #ui.kit .stBody { flex:1; min-height:0; display:flex; }
html.lay-desk #ui.kit .stPanel { flex:1; }
html.lay-desk #ui.kit .stIn { padding:26px 28px; }
html.lay-desk #ui.kit .kSk .skCols { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 440px; grid-template-rows:minmax(0,1fr); gap:18px; }
html.lay-desk #ui.kit .kSk .skPR { order:1; } html.lay-desk #ui.kit .kSk .skPL { order:0; }
html.lay-desk #ui.kit .kSk .skStage { flex:1 1 0; height:auto; min-height:220px; }
html.lay-desk #ui.kit .kSk .skGrid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; padding-top:4px; }
html.lay-desk #ui.kit .kSk .skCard b { font-size:16px; } html.lay-desk #ui.kit .kSk .skCard small { font-size:13px; }
html.lay-desk #ui.kit .kSk .skCard img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
@media (max-width: 1280px) { html.lay-desk #ui.kit .kSk .skCols { grid-template-columns:minmax(0,1fr) 360px; } html.lay-desk #ui.kit .kSk .skGrid { grid-template-columns:repeat(3, minmax(0,1fr)); } .stPacks { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .stPacks { grid-template-columns:repeat(2, minmax(0,1fr)); } .st-daily .dGrid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; } .st-daily .dCell { min-height:0; } .stHead .stBal { margin-left:0; } }
.kSk .skPL, .kSk .skPR { align-self:stretch; min-height:0; }
html.lay-desk #ui.kit #uiView > .screen.kSk { overflow:hidden; }

/* ---------- Stash (kit): category tabs, search + sort fixed, the grid scrolls in its panel; item card / car cargo on the right ---------- */
.kSt .stTabs2 { margin:0 0 12px; width:max-content; max-width:100%; overflow-x:auto; }
.kSt .stTabs2 button.dim { opacity:.55; }
.kSt .stCols { display:flex; flex-direction:column; gap:14px; }
.kSt .stTools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; flex:none; }
.kSt .stQ { flex:1 1 220px; min-width:0; height:42px; }
.kSt .stTools .stSort { margin:0; }
.kSt .stCap { display:flex; align-items:center; gap:10px; padding:0 14px 10px; font:900 13px var(--fb); color:#cfe0ff; flex:none; }
.kSt .stCap .bar { flex:1; margin:0; }
.kSt .stUp { height:34px; padding:0 12px; font-size:14px; border-radius:10px; }
.kSt .stGridW { padding:4px 14px 14px; }
.kSt .stR { padding:0; }
.kSt .stPane { margin:12px 14px 0; align-self:flex-start; flex:none; }
.kSt .stRIn { position:relative; padding:12px 16px 16px; }
.kSt .stCarH { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.kSt .stCarH b { display:flex; align-items:center; gap:8px; font:400 21px/1 var(--fh); } .kSt .stCarH b svg { width:22px; height:22px; }
.kSt .stCarH .kBtn { height:38px; padding:0 14px; font-size:15px; border-radius:12px; }
html.lay-desk #ui.kit .kSt .stTabs2 { display:none; }
html.lay-desk #ui.kit[data-scr="stash"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .screen.kSt { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
html.lay-desk #ui.kit .kSt #stashBody { flex:1; min-height:0; display:flex; flex-direction:column; }
html.lay-desk #ui.kit .kSt .stCols { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 400px; grid-template-rows:minmax(0,1fr); gap:18px; }
html.lay-desk #ui.kit .kSt .stL, html.lay-desk #ui.kit .kSt .stR { min-height:0; align-self:stretch; }
html.lay-desk #ui.kit .kSt #stashGrid { grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:12px; }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .screen.kSt { width:calc(100% - 32px); } html.lay-desk #ui.kit .kSt .stCols { grid-template-columns:minmax(0,1fr) 340px; gap:12px; } html.lay-desk #ui.kit .kSt #stashGrid { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); } }

/* ---------- Community (kit): career card | the board, each scrolling inside its panel; tabs in the top bar ---------- */
.kCo .coCareer, .kCo .coBody { background:rgba(7,22,56,.62); border:3px solid var(--kOl); border-radius:18px; box-shadow:inset 0 2px 0 rgba(130,185,255,.22); }
html.lay-desk #ui.kit .kCo .coTabs { display:none; }
html.lay-desk #ui.kit[data-scr="community"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.kCo { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; container:none; overflow:hidden; }
html.lay-desk #ui.kit .kCo .coGrid { flex:1; min-height:0; margin:0; display:grid; grid-template-columns:400px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:18px; align-items:stretch; }
html.lay-desk #ui.kit .kCo .coCareer { position:static; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; padding:16px; }
html.lay-desk #ui.kit .kCo .coMain { min-height:0; }
html.lay-desk #ui.kit .kCo .coBody { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; padding:14px; }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .pgScr.kCo { width:calc(100% - 32px); } html.lay-desk #ui.kit .kCo .coGrid { grid-template-columns:340px minmax(0,1fr); gap:12px; } }

/* ---------- Messages (kit): inbox rows | the open message; Chat: channels | the chat. Tabs in the top bar ---------- */
html.lay-desk #ui.kit .kMs .msgTabs { display:none; }
html.lay-desk #ui.kit[data-scr="messages"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.kMs { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; container:none; overflow:hidden; }
html.lay-desk #ui.kit .kMs #msgBody { flex:1; min-height:0; display:flex; flex-direction:column; }
html.lay-desk #ui.kit .kMs .msCols { flex:1; min-height:0; display:grid; grid-template-columns:520px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:18px; }
html.lay-desk #ui.kit .kMs .msChatCols { grid-template-columns:300px minmax(0,1fr); }
html.lay-desk #ui.kit .kMs .msL { display:flex; flex-direction:column; min-height:0; background:rgba(7,22,56,.62); border:3px solid var(--kOl); border-radius:18px; box-shadow:inset 0 2px 0 rgba(130,185,255,.22); overflow:hidden; }
html.lay-desk #ui.kit .kMs .msL > .empty { margin:24px 16px; }
html.lay-desk #ui.kit .kMs .msL .mailTop { flex:none; margin:0; padding:12px 16px; border-bottom:2px solid var(--kOl); }
html.lay-desk #ui.kit .kMs .msL .mailList { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; scrollbar-width:thin; scrollbar-color:rgba(160,200,255,.4) transparent; }
html.lay-desk #ui.kit .kMs .mail2 { min-height:72px; padding:10px 16px; border-bottom:1px solid rgba(160,200,255,.09); cursor:pointer; }
html.lay-desk #ui.kit .kMs .mail2.on { background:linear-gradient(90deg,rgba(255,215,90,.18),rgba(255,215,90,.04)); box-shadow:inset 4px 0 0 #ffd75a; }
.kMs .mail2.unread b::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:#ffd75a; margin-right:7px; vertical-align:2px; }
.kMs .msPrev { display:block; font:800 13px/1.3 var(--fb); color:#8aa6d4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kMs .msT { flex:none; font:800 12px var(--fb); color:#8aa6d4; margin:0 8px; }
.kMs .msR { padding:22px 26px; overflow-y:auto; }
.kMs .msRd { display:flex; flex-direction:column; gap:14px; }
.kMs .msRdH { display:flex; align-items:center; gap:14px; } .kMs .msRdH .mi { width:52px; height:52px; flex:none; border-radius:14px; background:#123571; border:2px solid var(--kOl); display:grid; place-items:center; } .kMs .msRdH .mi svg { width:26px; height:26px; }
.kMs .msRd h4 { margin:0; font:400 28px/1.1 var(--fh); } .kMs .msRd small { font:800 13px var(--fb); color:#9fb8e0; }
.kMs .msRd p { margin:0; font:800 15px/1.55 var(--fb); color:#dbe8ff; max-width:62ch; white-space:pre-wrap; }
.kMs .msRd .att { display:flex; flex-wrap:wrap; gap:8px; }
.kMs .msGo { height:52px; font-size:20px; max-width:320px; }
.kMs .msCh { padding:0 10px 12px; gap:6px; }
.kMs .msChan { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border-radius:12px; border:0; background:none; color:#cfe0ff; text-align:left; cursor:pointer; }
.kMs .msChan b { font:400 18px/1 var(--fh); } .kMs .msChan small { font:800 12px var(--fb); color:#8aa6d4; }
.kMs .msChan.on { background:linear-gradient(180deg,#ffd75a,#f7a91d); color:#3a2300; } .kMs .msChan.on small { color:#6a4a00; }
.kMs .msChan.soon { opacity:.5; cursor:default; }
.kMs .msChat { padding:0; }
.kMs .msChat > .empty { margin:auto; }
.kMs .msChat .chat { flex:1; min-height:0; height:auto; max-height:none; display:flex; flex-direction:column; margin:0; }
.kMs .msChat .chatLog { flex:1; min-height:0; height:auto; max-height:none; overflow-y:auto; padding:12px 18px; }
.kMs .msChat .chatIn { flex:none; padding:14px 16px; border-top:3px solid var(--kOl); }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .pgScr.kMs { width:calc(100% - 32px); } html.lay-desk #ui.kit .kMs .msCols { grid-template-columns:420px minmax(0,1fr); gap:12px; } html.lay-desk #ui.kit .kMs .msChatCols { grid-template-columns:240px minmax(0,1fr); } }

/* ---------- Settings (kit): sections on the left, the picked one fills the panel ---------- */
.kSe .seNav { display:none; }
.kSe .seOff { display:none !important; }
.kSe .seCols { display:block; }
.kSe .seMain.kPanel { background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; }
html.lay-desk #ui.kit[data-scr="settings"] #uiView { overflow:hidden; }
html.lay-desk #ui.kit #uiView > .pgScr.kSe { max-width:none; width:min(var(--kW), calc(100% - 48px)); height:100%; margin:0 auto; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; container:none; overflow:hidden; }
html.lay-desk #ui.kit .kSe .seCols { flex:1; min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:18px; }
html.lay-desk #ui.kit .kSe .seNav { display:flex; flex-direction:column; gap:6px; padding:12px; min-height:0; overflow-y:auto; }
html.lay-desk #ui.kit .kSe .seMain.kPanel { background:rgba(7,22,56,.62); border:3px solid var(--kOl); border-radius:18px; box-shadow:inset 0 2px 0 rgba(130,185,255,.22); overflow:hidden; min-height:0; }
html.lay-desk #ui.kit .kSe .seIn { padding:20px 24px 24px; display:flex; flex-direction:column; gap:12px; }
html.lay-desk #ui.kit .kSe .seIn > .sePane > .panel, html.lay-desk #ui.kit .kSe .seIn > .panel.sePane { background:none; border:0; box-shadow:none; padding:0; margin:0 0 10px; }
html.lay-desk #ui.kit .kSe .seBuild { display:none; }
.kSe .seN { display:flex; align-items:center; gap:12px; padding:13px 16px; border:0; border-radius:12px; background:none; color:#cfe0ff; font:400 19px/1 var(--fh); text-align:left; cursor:pointer; }
.kSe .seN span { width:26px; text-align:center; font-size:20px; }
.kSe .seN:hover { background:rgba(255,255,255,.05); }
.kSe .seN.on { background:linear-gradient(180deg,#ffd75a,#f7a91d); color:#3a2300; }
.kSe .seNb { margin-top:auto; padding:8px 12px; font:800 12px var(--fb); color:#8aa6d4; }
html.lay-desk #ui.kit .kSe .prefs .pSec { font:400 26px/1 var(--fh); text-transform:none; letter-spacing:0; color:#fff; margin:0 0 8px; padding:0; border:0; }
@media (max-width: 1280px) { html.lay-desk #ui.kit #uiView > .pgScr.kSe { width:calc(100% - 32px); } html.lay-desk #ui.kit .kSe .seCols { grid-template-columns:240px minmax(0,1fr); gap:12px; } }

/* ---------- Pop-up cards (kit, docs/ui-kit/cards): Banner for rank ups, Loot Spill for rewards ---------- */
#celebrate:has(.ceK) { background:radial-gradient(ellipse at 50% 42%,rgba(20,50,110,.45),rgba(4,10,28,.9) 70%), repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,215,90,.13) 0deg 7deg, transparent 7deg 20deg), rgba(4,10,28,.78); overflow-x:hidden; }
.ceK .ceRays { display:none; } /* the rays are the overlay background, so nothing hangs past the screen */
.ceK { width:min(100%, 1000px); gap:10px; }
.ceK .ceRays { top:42%; width:900px; height:900px; margin:-450px 0 0 -450px; opacity:.5; }
.ckKick { font:900 15px/1 var(--fb); letter-spacing:.18em; color:#ffd75a; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.ckTitle { margin:2px 0 0; font:400 clamp(48px, 7vh, 76px)/1 var(--fh); color:#fff; text-shadow:0 5px 0 #081631; }
.ckSub { margin:0; font:900 17px/1.35 var(--fb); color:#cfe0ff; }
.ckTiles { position:relative; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 200px)); justify-content:center; gap:20px; width:100%; margin:10px 0 4px; }
.ckTiles.n1 { --n:1; } .ckTiles.n2 { --n:2; } .ckTiles.n3 { --n:3; } .ckTiles.n4 { --n:4; } .ckTiles.n5 { --n:5; }
.ckT { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:clamp(160px, 22vh, 200px); padding:16px 10px 14px; border-radius:20px; border:3px solid #081631;
  background:linear-gradient(180deg,#2a6cc8,#1a4590); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.35); color:#fff; animation:ckIn .5s cubic-bezier(.2,1.5,.4,1) both; }
.ckT:nth-child(2) { animation-delay:.08s; } .ckT:nth-child(3) { animation-delay:.16s; } .ckT:nth-child(4) { animation-delay:.24s; } .ckT:nth-child(5) { animation-delay:.32s; }
@keyframes ckIn { from { opacity:0; transform:translateY(30px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .ckT { animation:none; } }
.ckT.g { background:linear-gradient(180deg,#5fd06f,#2a8f3a); border-color:#0f3a08; } .ckT.x { background:linear-gradient(180deg,#4f97f0,#2559b8); }
.ckT.y { background:linear-gradient(180deg,#ffd75a,#e8a21b); border-color:#5a3a00; color:#3a2300; } .ckT.y small { color:#5a3a00; }
.ckT.r2 { background:linear-gradient(180deg,#4f97f0,#2559b8); } .ckT.r3 { background:linear-gradient(180deg,#a86ae8,#6a2fb8); } .ckT.r4 { background:linear-gradient(180deg,#ffb43d,#d8740a); border-color:#5a3000; }
.ckA { width:clamp(64px, 9vh, 88px); height:clamp(64px, 9vh, 88px); display:grid; place-items:center; }
.ckA img, .ckA .art, .ckA .ckI { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.ckA .coin { width:100%; height:74%; font-size:inherit; }
.ckE { font-size:clamp(46px, 6.5vh, 62px); line-height:1; }
.ckT b { font:400 clamp(20px, 2.8vh, 26px)/1.1 var(--fh); text-shadow:0 2px 0 rgba(0,0,0,.3); max-width:100%; overflow-wrap:anywhere; }
.ckT.y b { text-shadow:none; }
.ckT small { font:900 11.5px/1.2 var(--fb); letter-spacing:.06em; color:#cfe0ff; }
.ckNew { position:absolute; top:-11px; right:12px; padding:4px 9px; border-radius:8px; background:#ff4a3a; color:#fff; border:2px solid #3a0606; font:900 11px/1 var(--fb); letter-spacing:.08em; }
.ckBtns { display:flex; gap:12px; justify-content:center; width:min(100%, 520px); margin-top:8px; }
.ckBtns .kBtn { flex:1; height:62px; font-size:26px; } .ckBtns .kBtn.blue { font-size:20px; }
/* Loot Spill: the chest on top, the tiles fanned under it, the week's streak */
.ceSpill .csArt { width:clamp(180px, 26vh, 260px); height:clamp(150px, 22vh, 220px); margin-bottom:18px; display:grid; place-items:center; animation:ceBob 2.2s ease-in-out infinite; }
.ceSpill .csArt img, .ceSpill .csArt .ceImg { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.ceSpill .ckTiles .ckT:nth-child(odd) { transform:rotate(-4deg); } .ceSpill .ckTiles .ckT:nth-child(even) { transform:translateY(-12px); } .ceSpill .ckTiles .ckT:last-child:nth-child(odd):not(:first-child) { transform:rotate(4deg); }
.ckDays { display:grid; grid-template-columns:repeat(7, 48px); gap:8px; justify-content:center; margin-top:6px; }
.ckDays span { height:42px; border-radius:12px; background:#0a1d40; border:2px solid #081631; display:grid; place-items:center; font:400 16px var(--fh); color:#7f9bc8; }
.ckDays span.got { background:linear-gradient(180deg,#5fd06f,#2a8f3a); color:#fff; border-color:#0f3a08; }
.ckDays span.now { background:linear-gradient(180deg,#ffd75a,#f7a91d); color:#3a2300; border-color:#6a4a00; box-shadow:0 0 0 3px rgba(255,215,90,.35); }
.ckBody { width:min(100%, 640px); }
/* Banner: a gold ribbon across the screen, the star breaking out of it, the new Rank big; unlocks as NEW tiles */
.ceBan .cbRib { position:relative; width:100%; height:clamp(120px, 16vh, 150px); display:flex; align-items:center; justify-content:center; gap:22px; margin:clamp(20px, 6vh, 60px) 0 14px; z-index:1; }
.ceBan .cbRib::before { content:""; position:absolute; top:0; bottom:0; left:-100vw; right:-100vw; z-index:-1; background:linear-gradient(180deg,#ffe07a,#f7a91d 60%,#d9860c); border-block:5px solid #5a3a00; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.ceBan .cbStar { width:clamp(170px, 26vh, 250px); height:clamp(170px, 26vh, 250px); flex:none; margin:-60px 0; display:grid; place-items:center; animation:ceBob 2.2s ease-in-out infinite; }
.ceBan .cbStar img, .ceBan .cbStar .ceImg { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
.ceBan .cbTxt { text-align:left; } .ceBan .cbTxt .ckKick { color:#7a4a00; text-shadow:none; }
.ceBan .cbBig { margin:4px 0 0; font:400 clamp(72px, 11vh, 110px)/1 var(--fh); color:#fff; text-shadow:0 6px 0 #7a4a00; white-space:nowrap; }
.ceBan .cbMore { margin:0; font:900 14px var(--fb); color:#ffd75a; }
.ceBan .cbNext { margin:2px 0 0; font:900 16px/1.35 var(--fb); color:#cfe0ff; }
@media (max-width: 640px) {
  .ckTiles { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; } .ckT { min-height:0; padding:12px 6px 10px; gap:5px; border-radius:16px; }
  .ckA { width:46px; height:46px; } .ckE { font-size:38px; } .ckT b { font-size:15px; } .ckT small { font-size:9.5px; } .ckNew { top:-9px; right:6px; font-size:9px; padding:3px 6px; }
  .ceSpill .csArt { width:150px; height:130px; } .ckTitle { font-size:40px; } .ckBtns .kBtn { height:54px; font-size:22px; }
  .ceSpill .ckTiles .ckT { transform:none !important; }
  .ckDays { grid-template-columns:repeat(7, 1fr); width:100%; }
  .ceBan .cbRib { gap:10px; } .ceBan .cbStar { width:120px; height:120px; margin:-30px 0; } .ceBan .cbBig { font-size:56px; }
}

/* ---------- Feedback (? next to the gear on every screen) and Support (js/ui/feedback.js, docs/ui-kit/help) ---------- */
.fbHq { position:relative; display:grid; place-items:center; padding:0; border-radius:50%; border:3px solid var(--kOl); cursor:pointer; color:#fff;
  background:radial-gradient(circle at 50% 30%,#5ab4ff,#1b5aa8 72%); box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.3);
  font:400 24px/1 var(--fh,'Lilita One'); text-shadow:0 2px 0 var(--kOl); }
.fbHq:active { transform:translateY(2px); }
.fbHq.busy { animation:fbBusy .8s ease-in-out infinite; }
@keyframes fbBusy { 50% { filter:brightness(1.35); } }
.fbHq .dot { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:radial-gradient(circle at 40% 30%,#ff8a70,#e8261c 70%); border:2px solid var(--kOl); font:900 11px/16px var(--fb,Nunito); text-shadow:none; }
#uiTop .fbHq.tIcon { width:44px; height:44px; flex:none; }
#uiTop.kTop .fbHq.tIcon { width:46px; height:46px; }
.hub .fbHq.hbIco { font-size:28px; }
.kHome .fbHq.hbIco { font-size:32px; }
.fbHq .hbIcoL { text-shadow:0 1px 0 var(--ol),0 0 3px var(--ol),0 0 3px var(--ol); font-family:var(--fb,Nunito); }
.fbCorner { position:absolute; right:14px; top:10px; width:40px; height:40px; font-size:22px; z-index:4; }
#hud #bHelp { position:absolute; right:15px; top:calc(18px + var(--st, 0px) + 50px); width:36px; height:36px; font-size:20px; z-index:8; pointer-events:auto; }
html.lay-mouse #hud > #bHelp { zoom:calc(var(--hk, 1) * var(--hudU, 1)); }
#hud.plane #bHelp { top:calc(18px + var(--st, 0px) + 50px); }
/* the form */
#fbOv { --fh:"Lilita One","Nunito","Arial Rounded MT Bold",system-ui,sans-serif; --fb:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --kOl:#081631; position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(4,10,28,.72); }
#fbOv.open { display:flex; }
.fbCard { width:min(660px, 100%); max-height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:22px 24px; border-radius:20px; border:3px solid var(--kOl);
  background:linear-gradient(180deg,#123a73,#0b2650); box-shadow:inset 0 2px 0 rgba(130,185,255,.25),0 24px 60px rgba(0,0,0,.55); color:#fff; font-family:var(--fb,Nunito); }
html.lay-desk .fbCard { zoom:var(--uiZ, 1); }
.fbH { display:flex; align-items:center; justify-content:space-between; gap:10px; } .fbH b { font:400 30px/1 var(--fh,'Lilita One'); text-shadow:0 2px 0 var(--kOl); }
.fbX { width:40px; height:40px; border-radius:12px; border:2px solid var(--kOl); background:#0a2149; color:#cfe0ff; font:900 18px var(--fb); cursor:pointer; }
.fbShot { display:grid; grid-template-columns:240px 1fr; gap:14px; align-items:center; }
.fbThumb { position:relative; height:140px; border-radius:14px; overflow:hidden; border:2px solid #2a4f8f; background:#081b40; display:grid; place-items:center; color:#6f8ab8; font:800 13px var(--fb); }
.fbThumb img { width:100%; height:100%; object-fit:cover; }
.fbThumb button { position:absolute; right:8px; top:8px; width:30px; height:30px; border-radius:50%; border:2px solid #fff; background:#081631; color:#fff; font:900 14px var(--fb); cursor:pointer; }
.fbShotT { display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .fbShotT b { font:400 20px/1.1 var(--fh,'Lilita One'); } .fbShotT small { font:800 13.5px/1.4 var(--fb); color:#9fb8e0; }
.fbShot.none { grid-template-columns:1fr; padding:14px 16px; border-radius:14px; border:2px dashed #2a4f8f; background:#0c2552; }
.fbShotB { display:flex; gap:10px; flex-wrap:wrap; }
.fbPick { height:40px; padding:0 14px; font-size:15px; border-radius:12px; cursor:pointer; }
.fbTx { width:100%; box-sizing:border-box; min-height:120px; resize:vertical; border-radius:14px; background:#081b40; border:2px solid #2a4f8f; padding:14px 16px; color:#e3eeff; font:800 16px/1.45 var(--fb); }
.fbTx:focus { outline:none; border-color:#ffd75a; }
.fbCtx { padding:10px 14px; border-radius:12px; background:rgba(5,16,40,.6); font:800 13px/1.35 var(--fb); color:#9fb8e0; }
.fbErr { font:900 14px var(--fb); color:#ff9a8a; } .fbErr:empty { display:none; }
.fbGo { height:60px; font-size:26px; }
.fbDone { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:12px 6px 4px; }
.fbDone .fbBig { font-size:56px; } .fbDone b { font:400 26px/1.1 var(--fh,'Lilita One'); } .fbDone p { margin:0; font:800 15px/1.5 var(--fb); color:#cfe0ff; max-width:44ch; }
.fbDone .kBtn { height:56px; padding:0 30px; font-size:22px; margin-top:6px; }
@media (max-width: 640px), (max-height: 520px) {
  #fbOv { padding:0; } .fbCard { width:100%; height:100%; max-height:none; border-radius:0; padding:16px; gap:12px; }
  .fbShot { grid-template-columns:1fr; } .fbThumb { height:150px; } .fbH b { font-size:24px; }
  .fbGo { margin-top:auto; }
}
/* Support conversations in Messages */
.fbMi { display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 50% 30%,#5ab4ff,#1b5aa8 72%); border:2px solid var(--kOl); font:400 18px/1 var(--fh,'Lilita One'); color:#fff; }
.fbMi.big { width:52px; height:52px; font-size:26px; flex:none; }
.fbSup .mail2 { cursor:pointer; }
.fbThread { display:flex; flex-direction:column; gap:12px; min-height:100%; }
.fbThH { display:flex; align-items:center; gap:14px; } .fbThH h4 { margin:0; font:400 26px/1.1 var(--fh,'Lilita One'); } .fbThH small { font:800 13px var(--fb); color:#9fb8e0; }
.fbMsgs { display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:52vh; padding-right:4px; }
.fbBub { max-width:80%; padding:12px 14px; border-radius:16px; font:800 15px/1.45 var(--fb); color:#fff; }
.fbBub small { display:block; font:900 11.5px var(--fb); opacity:.85; margin-bottom:4px; }
.fbBub.me { align-self:flex-end; background:#2d6fd2; border-bottom-right-radius:4px; }
.fbBub.them { align-self:flex-start; background:#123571; border:2px solid var(--kOl); border-bottom-left-radius:4px; } .fbBub.them small { color:#ffd75a; opacity:1; }
.fbBub img { display:block; width:min(260px, 100%); margin-top:8px; border-radius:10px; }
.fbReply { display:flex; gap:10px; align-items:stretch; margin-top:auto; } .fbReply .fbTx { min-height:52px; flex:1; } .fbReply .kBtn { width:120px; flex:none; font-size:22px; }
.fbOld .kBtn { height:46px; font-size:17px; width:100%; }
.pgHead .fbHq.pgHelpB { width:40px; height:40px; flex:none; font-size:22px; margin-left:auto; } .pgHead .pgR .fbHq.pgHelpB { margin-left:0; }
/* D2 (Andre 2026-10-10): the new Diamond store, behind ?store2=1. Packs and the Key as rows (the Market look); Featured has
   3 daily deals and the coming Bundles / 2x Income boost cards. */
.dRows { display:flex; flex-direction:column; border:3px solid var(--kOl); border-radius:16px; overflow:hidden; background:rgba(7,22,56,.55); }
.dr { display:grid; grid-template-columns:56px minmax(0,1fr) auto 180px; align-items:center; gap:14px; padding:10px 18px; min-height:72px; border-bottom:1px solid rgba(160,200,255,.12); color:#fff; }
.dr:last-child { border-bottom:0; }
.dr.hl { background:linear-gradient(90deg,rgba(255,215,90,.16),rgba(255,215,90,.03)); }
.drArt { display:flex; align-items:center; justify-content:center; font-size:38px; } .drArt .art { width:48px; height:48px; object-fit:contain; }
.drAmt { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font:400 28px/1 var(--fh); text-shadow:0 2px 0 var(--kOl); min-width:0; }
.drAmt.sm { font-size:22px; } .drAmt small { font:800 13px var(--fb); color:#9fb8e0; text-shadow:none; }
.drTags { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dr .kBtn { height:50px; font-size:20px; }
.dTag { display:inline-flex; align-items:center; padding:3px 9px; border-radius:9px; border:2.5px solid var(--kOl); font:400 13px/1 var(--fh); color:#fff; text-shadow:0 1px 0 var(--kOl); white-space:nowrap; }
.dTag.y { background:linear-gradient(180deg,#ffe066,#e8a81d); color:#3a2400; text-shadow:none; } .dTag.g { background:linear-gradient(180deg,#8ff56a,#3fbf2a); } .dTag.b { background:linear-gradient(180deg,#5aa8ff,#2d6fd2); }
.kBtn.dBtn { border-color:var(--kOl); background:linear-gradient(180deg,#c9f4ff,#3fb6e8); color:#06203a; text-shadow:none; box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 4px 0 var(--kOl); }
.dH5 { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:16px 0 8px; font:400 19px var(--fh); color:#ffd23f; text-shadow:0 2px 0 var(--kOl); } .dH5.top { margin-top:0; }
.dH5 small { font:800 13px var(--fb); color:#9fb8e0; text-shadow:none; }
.dDeals { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; padding-top:8px; }
.dCard { position:relative; display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:18px; border:3px solid var(--kOl); background:linear-gradient(180deg,#2a6cc8,#1a4590); box-shadow:inset 0 2px 0 rgba(255,255,255,.25); color:#fff; }
.dCard b { font:400 19px/1.15 var(--fh); text-shadow:0 2px 0 var(--kOl); } .dCard small { font:800 13px var(--fb); color:#d8e6ff; }
.dCard.got { filter:saturate(.5) brightness(.85); }
.dCard.pur { background:linear-gradient(180deg,#7a3ae0,#4a1d9a); } .dCard.gold { background:linear-gradient(180deg,#d98a14,#8a4a06); }
.dCard .dOff { position:absolute; top:-12px; right:12px; }
.dlArt { height:110px; border-radius:12px; background:rgba(8,20,45,.45); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dlArt .art { height:100%; width:auto; max-width:100%; object-fit:contain; }
.dBuy { display:flex; align-items:center; gap:10px; margin-top:auto; } .dBuy s { font:800 13px var(--fb); color:#bcd0f0; white-space:nowrap; }
.dBuy .kBtn { flex:1; height:48px; font-size:20px; } .dCard > .kBtn { height:46px; font-size:18px; margin-top:auto; }
.dGrid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:16px; }
.dr.dNeed { grid-template-columns:44px minmax(0,1fr) 120px; gap:6px 10px; padding:10px 12px; } .dr.dNeed .drAmt { font-size:24px; }
.dr.dNeed .drTags { grid-column:2 / -1; grid-row:2; justify-content:flex-start; } .dr.dNeed .kBtn { grid-row:1; grid-column:3; height:46px; font-size:18px; }
@media (max-width: 900px) {
  .dr { grid-template-columns:44px minmax(0,1fr) 112px; gap:10px; padding:10px 12px; } .dr .drTags { grid-column:2 / -1; grid-row:2; justify-content:flex-start; }
  .drAmt { font-size:22px; } .dr .kBtn { height:44px; font-size:17px; grid-row:1; grid-column:3; }
  .dDeals, .dGrid2 { grid-template-columns:minmax(0,1fr); } .dlArt { height:84px; }
}
.diaNote { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .diaNote .btn { align-self:stretch; }
.diaNoteT { align-self:stretch; display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:10px 14px; border-radius:12px; background:rgba(8,20,45,.45); font:800 13.5px var(--fb); color:#cfe0ff; text-align:left; }
.diaNoteT b { color:#fff; text-align:right; }
/* D3 (Andre 2026-10-10): Diamonds on rewards; the Achievements tab (behind ?dia3=1) */
.ckT.b { background:linear-gradient(180deg,#7fdcff,#2a9ad8); }
.dCell { position:relative; } .dDia { position:absolute; left:50%; transform:translateX(-50%); bottom:46px; display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:9px; border:2px solid var(--kOl); background:linear-gradient(180deg,#5aa8ff,#2d6fd2); font:400 13px/1 var(--fh); color:#fff; text-shadow:0 1px 0 var(--kOl); white-space:nowrap; }
.dCell.big .dDia { background:linear-gradient(180deg,#ffe066,#e8a81d); color:#3a2400; text-shadow:none; }
.achRows { margin-top:14px; } .dr.achR { grid-template-columns:56px minmax(0,1fr) minmax(120px,220px) 170px; }
.achT { display:flex; flex-direction:column; min-width:0; } .achT b { font:400 20px/1.1 var(--fh); text-shadow:0 2px 0 var(--kOl); } .achT small { font:800 13px var(--fb); color:#9fb8e0; }
.achBar { display:flex; flex-direction:column; gap:3px; } .achBar::before { content:""; display:block; height:12px; border-radius:6px; background:#0b1a33; }
.achBar { position:relative; } .achBar i { position:absolute; left:0; top:0; height:12px; border-radius:6px; background:linear-gradient(90deg,#8ff56a,#3fbf2a); }
.achBar small { font:800 12px var(--fb); color:#9fb8e0; }
.achDia { justify-self:end; font-size:16px; padding:6px 12px; } .dr.achR.done { opacity:.6; }
.kBtn.achClaim { border-color:#0d3a06; background:linear-gradient(180deg,#8ff56a,#3fbf2a); text-shadow:0 2px 0 #0d3a06; box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 4px 0 #0d3a06; }
@media (max-width: 900px) { .dr.achR { grid-template-columns:44px minmax(0,1fr) 112px; } .dr.achR .achBar { grid-column:2 / 3; grid-row:2; } .dr.achR .kBtn, .dr.achR .achDia { grid-row:1 / 3; grid-column:3; } }
/* Andre 2026-10-10: a gift is waiting. Home's Gifts icon gives a short bounce and a light sweep every 8 s instead of the calendar
   opening by itself. Gentle enough to ignore, noticeable enough to tap. */
.kHome .hbIco.hbPulse { overflow:visible; }
.kHome .hbIco.hbPulse { animation:hbPulse 8s ease-in-out 1.5s infinite; }
.kHome .hbIco.hbPulse::after { content:""; position:absolute; inset:3px; border-radius:50%; pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%) no-repeat; background-size:250% 100%; background-position:120% 0; animation:hbSheen 8s ease-in-out 1.5s infinite; }
@keyframes hbPulse { 0%, 82%, 100% { transform:scale(1); } 86% { transform:scale(1.14) rotate(-6deg); } 90% { transform:scale(1.08) rotate(5deg); } 94% { transform:scale(1.12) rotate(-3deg); } }
@keyframes hbSheen { 0%, 80% { background-position:120% 0; } 96%, 100% { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce) { .kHome .hbIco.hbPulse, .kHome .hbIco.hbPulse::after { animation:none; } }
.kHome .hbMe { min-width:0; }
.adCard .kBtn[disabled], .dCard .kBtn[disabled] { filter:none; border-color:var(--kOl); background:linear-gradient(180deg,#9aa9bd,#6c7d95); color:#1b2638; text-shadow:none; box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 var(--kOl); }
/* Andre 2026-10-10: tab rows shrink with the window, scroll sideways without a visible scrollbar when they still don't fit, and the
   picked tab's dark label has no outline (it looked smudged and too bold when small) */
.kSeg { overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; } .kSeg::-webkit-scrollbar { display:none; }
.kSeg button { flex:none; } .kSeg button.on, .kSeg.shTabs button.on { text-shadow:none; }
.stScr > .stTabs, .kSk > .stTabs, .kSt .stTabs2 { scrollbar-width:none; } .stScr > .stTabs::-webkit-scrollbar, .kSk > .stTabs::-webkit-scrollbar, .kSt .stTabs2::-webkit-scrollbar { display:none; }
@media (max-width:1560px) { #topTabs .kSeg button { padding:8px 14px; font-size:16px; } }
@media (max-width:1320px) { #topTabs .kSeg button { padding:7px 10px; font-size:15px; } }
@media (max-width:1120px) { #topTabs .kSeg button { padding:6px 8px; font-size:14px; } }
@media (max-width:760px) { .kSeg.shTabs button { flex:none; padding:8px 12px; font-size:15px; } }
/* Earn Cash: 12 watch-an-ad slots (placeholders until ads are on) */
.adGrid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin-top:14px; }
.adCard { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 10px; border-radius:16px; border:3px solid var(--kOl); background:linear-gradient(180deg,#2a6cc8,#1a4590); box-shadow:inset 0 2px 0 rgba(255,255,255,.25); color:#fff; text-align:center; }
.adNo { font:400 14px/1 var(--fh); color:#cfe0ff; }
.adArt { width:100%; aspect-ratio:16/9; max-width:100%; border-radius:10px; background:rgba(8,20,45,.55); display:grid; place-items:center; font-size:30px; color:#9fd7ff; }
.adPay { display:flex; align-items:center; gap:6px; font:400 22px/1 var(--fh); color:#9dff8f; text-shadow:0 2px 0 #0b3a12; } .adPay .coin { width:1.1em; height:.85em; }
.adCard small { font:800 12px var(--fb); color:#9fb8e0; }
.adCard .kBtn { width:100%; height:42px; font-size:16px; margin-top:auto; }
@media (max-width:1280px) { .adGrid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:760px) { .adGrid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .adPay { font-size:19px; } }
/* D4 (behind ?dia4=1): the 2x Income pill on the Hideout map, the boost sheet's day slots, the Diamond upgrades list */
#h2hud .h2boost { position:absolute; left:50%; top:78px; transform:translateX(-50%); pointer-events:auto; z-index:3; display:flex; align-items:center; gap:6px; height:42px; padding:0 16px; border-radius:14px; border:3px solid #5a3000; background:linear-gradient(180deg,#4a5c7a,#2c3a55); box-shadow:0 4px 0 #0b1a33; font:400 17px/1 var(--fh); color:#fff; text-shadow:0 2px 0 #0b1a33; white-space:nowrap; cursor:pointer; }
#h2hud .h2boost.on { background:linear-gradient(180deg,#ffd23f,#e8961d); color:#3a2300; text-shadow:none; }
#h2Root.desk #h2hud .h2boost { top:14px; } #h2Root.phone #h2hud .h2boost { top:auto; bottom:92px; font-size:15px; height:38px; }
.bsDays { display:flex; gap:8px; margin:6px 0 12px; } .bsDay { flex:1; text-align:center; padding:10px 6px; border-radius:12px; border:3px solid var(--kOl); background:rgba(8,20,45,.5); }
.bsDay b { display:block; font:400 17px/1.1 var(--fh); } .bsDay small { font:800 12px var(--fb); color:#cfe0ff; } .bsDay.on { background:linear-gradient(180deg,#8ff56a,#3fbf2a); } .bsDay.on small { color:#fff; }
.duList { display:flex; flex-direction:column; border:3px solid var(--kOl); border-radius:14px; overflow:hidden; background:rgba(7,22,56,.5); margin-bottom:12px; }
.duRow { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(160,200,255,.12); } .duRow:last-child { border-bottom:0; }
.duRow .grow { flex:1; min-width:0; display:flex; flex-direction:column; } .duRow b { font:400 17px/1.15 var(--fh); text-shadow:0 2px 0 var(--kOl); } .duRow small { font:800 12.5px var(--fb); color:#9fb8e0; }
.duIc { font-size:28px; width:40px; text-align:center; flex:none; } .duPic { width:40px; height:40px; border-radius:10px; object-fit:cover; flex:none; }
.duRow .diaBtn { flex:none; min-width:120px; } .duHave { flex:none; font:400 15px var(--fh); color:#8ff56a; } .duRow.have { opacity:.75; }
.duRow .hbMoney.diaBtn { flex:none; width:auto; min-width:120px; max-width:170px; height:44px; padding:0 14px; font-size:18px; }
/* D4: two crew seats side by side in a Businesses row; the boost pill stays out of the way while a panel is open */
.hbRow:has(.hbCrews) { grid-template-columns:96px minmax(0,1fr) auto 220px; }
.hbCrews { display:flex; gap:8px; } .hbCrews .hbCrew { background:none; border:0; padding:0; }
#h2hud:has(> #hbRoot:not([hidden]), > #hqRoot:not([hidden]), > #hcRoot:not([hidden]), > #crRoot:not([hidden]), > #csRoot:not([hidden])) .h2boost { display:none; }

/* Andre 2026-10-10: Hideout panels are solid (the map showing through made them hard to read), like the Store and other pages;
   crew you don't have yet are in full colour with their speed, a Hire button or "Not found yet", and open their card */
#h2hud .hbPanel, #h2hud .hbPanel.kPanel { background:linear-gradient(180deg,#123068,#0b1f4a); }
.crCard.miss { cursor:pointer; opacity:1; box-shadow:0 3px 0 var(--ol); border-style:dashed; }
.crCard.miss .crPic { filter:none; }
.crCard.hire { border-style:solid; }
.crCard .crBoost.dim { opacity:.8; }
.crNf { margin-top:4px; padding:3px 10px; border-radius:9px; border:2px solid #4a5f85; background:#1a2c50; font:400 13px/1.1 var(--fh); color:#bcd0ef; }
.crStats { width:100%; border-collapse:collapse; margin:10px 0 6px; font:800 13px var(--fb); color:#d8e6ff; font-variant-numeric:tabular-nums; }
.crStats th, .crStats td { padding:5px 6px; text-align:center; border-bottom:1px solid rgba(160,200,255,.15); }
.crStats th:first-child { text-align:left; color:#9fb8e0; font-weight:800; }
.crStats thead th { font:400 13px var(--fh); color:#9fb8e0; }
.crStats .cur { color:#8ff56a; background:rgba(143,245,106,.1); }

/* D5 (behind ?dia5=1): the extra gadget slot tile in Loadout; a locked business you can unlock with Diamonds */
.loTile.loGadX { border-style:dashed; border-color:#5fb8ff; } .loTile.loGadX .loMi { font:400 28px/1 var(--fh); color:#9fd7ff; } .loTile.loGadX b { display:flex; align-items:center; gap:3px; }
.h2li.lock.dun { opacity:1; filter:none; cursor:pointer; }
/* D5 in the raid: the Second Wind box and the Supply drop button */
.swBox { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(60,0,0,.5); pointer-events:auto; }
.swIn { width:min(520px, calc(100% - 32px)); box-sizing:border-box; padding:20px; border-radius:22px; border:3px solid var(--kOl); background:linear-gradient(180deg,#1f57a3,#163d77); box-shadow:0 8px 0 var(--kOl); display:flex; flex-direction:column; gap:10px; text-align:center; color:#fff; font:800 14px var(--fb); }
.swT { font:400 44px/1 var(--fh); color:#ff6a5a; text-shadow:0 3px 0 var(--kOl); } .swN { font:400 60px/1 var(--fh); color:#ffd23f; text-shadow:0 3px 0 var(--kOl); }
.swIn p { margin:0; color:#cfe0ff; } .swIn .swS { font-size:13px; } .swIn .diaBtn { height:56px; font-size:22px; }
.sdBtn { position:fixed; z-index:40; right:16px; bottom:230px; display:flex; align-items:center; gap:6px; height:44px; padding:0 14px; border-radius:14px; border:3px solid var(--kOl); background:linear-gradient(180deg,#c9f4ff,#3fb6e8); color:#06203a; font:400 17px/1 var(--fh); box-shadow:0 4px 0 var(--kOl); cursor:pointer; }
.swBox[hidden], .sdBtn[hidden] { display:none; } /* their display:flex would beat the hidden attribute: both showed on Home after a raid */
.sdBtn[disabled] { filter:grayscale(.6) brightness(.8); cursor:default; }
@media (max-width:760px) { .sdBtn { bottom:auto; top:120px; right:10px; height:40px; font-size:15px; } }

/* D6: Loadout presets bar; the Black Market restock button; the daily job swap */
.loPre { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 2px; padding-inline:20px; } .loPre small { font:400 14px var(--fh); color:#9fb8e0; margin-right:4px; }
.loPreB { flex:none; white-space:nowrap; height:36px; padding:0 12px; border-radius:11px; border:3px solid var(--kOl); background:linear-gradient(180deg,#5aa8ff,#2d6fd2); color:#fff; font:400 15px/1 var(--fh); text-shadow:0 1px 0 var(--kOl); cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.loPreB.add { background:linear-gradient(180deg,#5d7395,#3c4f6e); } .loPreB.dbuy { background:linear-gradient(180deg,#c9f4ff,#3fb6e8); color:#06203a; text-shadow:none; }
.kBtn.bmRestock { flex:none; height:auto; align-self:stretch; padding:0 12px; font-size:16px; gap:4px; white-space:nowrap; }
.jSwap { margin-top:6px; display:inline-flex; align-items:center; justify-content:center; gap:4px; }