/* ============================================================
   420 SYNDICATE — app.css  (v3 — single stylesheet)
============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
:root{
  --bg:#181824;--s:rgba(255,255,255,.06);--s2:rgba(255,255,255,.10);
  --b:rgba(255,255,255,.10);--b2:rgba(255,255,255,.18);
  --a:#ff6b35;--a2:#ffd23f;--a3:#06d6a0;--a4:#e040fb;--a5:#29b6f6;
  --red:#ef5350;--gold:#ffc107;--t:#f0f0f0;--t2:#7a7a94;
  --nav:62px;--hdr:50px;--r:13px;--rs:9px;
}
html,body{height:100dvh;width:100vw;overflow:hidden;background:var(--bg);color:var(--t);font-family:'Barlow',sans-serif;}
body::before{content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse 60vw 45vh at 10% 5%,rgba(255,107,53,.11) 0%,transparent 70%),
             radial-gradient(ellipse 55vw 55vh at 90% 90%,rgba(6,214,160,.08) 0%,transparent 70%),
             radial-gradient(ellipse 45vw 60vh at 65% 15%,rgba(224,64,251,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;}

/* ── SHELL ── */


/* ── HEADER ── */
header{flex-shrink:0;height:var(--hdr);display:flex;align-items:center;padding:0 14px;gap:10px;
  background:rgba(20,20,32,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--b);z-index:50;}
.logo{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--a);flex-shrink:0;}
.hstats{flex:1;display:flex;gap:5px;overflow:hidden;}
.hs{display:flex;align-items:center;gap:3px;background:var(--s);border:1px solid var(--b);
  border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;}
.hs .v{color:var(--a2);}
.hright{display:flex;gap:6px;flex-shrink:0;}
.hbtn{width:32px;height:32px;border-radius:8px;background:var(--s);border:1px solid var(--b);
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;position:relative;}
.dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--a);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── PLAYER STRIP ── */
#player-strip{flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:7px 14px;background:rgba(16,16,28,.95);
  border-bottom:1px solid var(--b);backdrop-filter:blur(16px);z-index:40;}
.ps-av{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--a),var(--a4));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;border:1.5px solid var(--a2);position:relative;}
.ps-rank{position:absolute;bottom:-4px;right:-4px;background:var(--gold);color:#000;
  font-size:7px;font-weight:700;padding:1px 4px;border-radius:4px;
  font-family:'Barlow Condensed',sans-serif;}
.ps-info{flex:1;min-width:0;}
.ps-name{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;line-height:1;}
.ps-role{font-size:9px;color:var(--a);font-weight:600;}
.ps-stats{display:flex;gap:10px;flex-shrink:0;}
.ps-stat{text-align:center;}
.ps-val{font-family:'Bebas Neue',sans-serif;font-size:14px;line-height:1;color:var(--a2);}
.ps-lbl{font-size:8px;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;}

/* ── PAGE STACK ── */
#pages{flex:1;overflow:hidden;position:relative;height:0;}
.page{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;overflow:hidden;}
.page.active{display:flex;}
.subpage{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;overflow:hidden;background:var(--bg);z-index:20;}
.subpage.active{display:flex;}
.scr{flex:1;overflow-y:scroll;overflow-x:hidden;padding:12px 12px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.scr::-webkit-scrollbar{display:none;}

/* ── NAV ── */
nav{flex-shrink:0;height:var(--nav);display:flex;align-items:stretch;
  background:rgba(16,16,28,.97);border-top:1px solid var(--b);backdrop-filter:blur(20px);padding:0 4px;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;border-radius:10px;margin:4px 2px;transition:background .15s;}
.nav-item.active{background:rgba(255,107,53,.12);}
.nav-icon{font-size:20px;line-height:1;}
.nav-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);}
.nav-item.active .nav-label{color:var(--a);}

/* ── CARDS ── */
.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:8px;}
.ch{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;}
.ct{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.5px;}
.cb{padding:0 12px 12px;}



.g4{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}

/* ── BACK BTN ── */
.back-btn{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 14px;
  font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.5px;
  border-bottom:1px solid var(--b);background:rgba(16,16,28,.6);cursor:pointer;color:var(--t2);}
.back-btn::before{content:'‹';font-size:20px;line-height:1;color:var(--a);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:var(--rs);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.3px;cursor:pointer;transition:opacity .15s;}
.btn:active{opacity:.7;}
.btn-fw{width:100%;}
.btn-pr{background:linear-gradient(135deg,var(--a),#e05020);color:#fff;padding:10px 16px;}
.btn-gn{background:linear-gradient(135deg,var(--a3),#04a87c);color:#111;padding:10px 16px;}


.btn-sm{padding:5px 10px;font-size:11px;border-radius:6px;}
.btn-disabled{opacity:.4;cursor:not-allowed;}

/* ── PILLS ── */
.pill{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;}
.p-or{background:rgba(255,107,53,.15);color:var(--a);}
.p-ye{background:rgba(255,210,63,.15);color:var(--a2);}
.p-gr{background:rgba(6,214,160,.15);color:var(--a3);}
.p-bl{background:rgba(41,182,246,.15);color:var(--a5);}
.p-pu{background:rgba(224,64,251,.15);color:var(--a4);}
.p-re{background:rgba(239,83,80,.15);color:var(--red);}

/* ── PROGRESS ── */
.prog{display:flex;flex-direction:column;gap:4px;}
.prog-row{display:flex;justify-content:space-between;font-size:11px;color:var(--t2);}
.prog-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.pf{height:100%;border-radius:3px;transition:width .3s;}
.f-or{background:linear-gradient(90deg,var(--a),#ff9f35);}
.f-gr{background:linear-gradient(90deg,var(--a3),#35e8b5);}
.f-bl{background:linear-gradient(90deg,var(--a5),#65c9ff);}
.f-ye{background:linear-gradient(90deg,var(--a2),#ffe07a);}
.f-pu{background:linear-gradient(90deg,var(--a4),#ef7fff);}

/* ── TABS ── */
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px;}
.tab{flex:1;text-align:center;padding:5px 4px;border-radius:7px;font-size:10px;font-weight:700;
  letter-spacing:.3px;color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap;}
.tab.active{background:rgba(255,107,53,.2);color:var(--a);}

/* ── LIST ITEMS ── */
.list-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--b);}
.list-item:last-child{border-bottom:none;}
.li-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.li-name{font-size:12px;font-weight:600;line-height:1.3;}
.li-sub{font-size:10px;color:var(--t2);}
.li-right{margin-left:auto;text-align:right;flex-shrink:0;}
.li-val{font-family:'Bebas Neue',sans-serif;font-size:14px;}
.li-lbl{font-size:9px;color:var(--t2);}

/* ── STACK (vertical spacing) ── */
.stack>*+*{margin-top:8px;}

/* ── ACTION CARDS ── */
.acard{display:flex;align-items:center;gap:10px;background:var(--s);border:1px solid var(--b);
  border-radius:var(--r);padding:12px;cursor:pointer;transition:border-color .15s;}
.acard:active{border-color:var(--a);}
.acard-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:22px;flex-shrink:0;}
.acard-name{font-weight:700;font-size:13px;margin-bottom:2px;}
.acard-desc{font-size:10px;color:var(--t2);margin-bottom:5px;}
.acard-rewards{display:flex;gap:4px;flex-wrap:wrap;}
.acard-risk{margin-left:auto;flex-shrink:0;}
.acard.locked{opacity:.4;cursor:not-allowed;}
.acard.locked::after{content:'🔒';margin-left:auto;font-size:14px;}

/* ── NAV CARDS (HQ grid) ── */
.nav-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nc{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:12px;
  cursor:pointer;position:relative;display:flex;flex-direction:column;gap:4px;}
.nc-icon{font-size:24px;}
.nc-label{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.5px;}
.nc-desc{font-size:10px;color:var(--t2);}
.nc-arrow{position:absolute;top:12px;right:12px;font-size:18px;color:var(--t2);}
.nc-badge{margin-top:4px;}
.nc.or{border-color:rgba(255,107,53,.3);}
.nc.ye{border-color:rgba(255,210,63,.3);}
.nc.gr{border-color:rgba(6,214,160,.3);}
.nc.bl{border-color:rgba(41,182,246,.3);}
.nc.pu{border-color:rgba(224,64,251,.3);}
.nc.re{border-color:rgba(239,83,80,.3);}

/* ── STAT CARDS ── */
.stat-card{background:var(--s);border:1px solid var(--b);border-radius:var(--rs);
  padding:10px 12px;text-align:center;}
.stat-card .sv{font-family:'Bebas Neue',sans-serif;font-size:20px;line-height:1;}
.stat-card .sl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;}

/* ── INVENTORY ITEMS ── */
.inv-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.inv-item:last-child{border-bottom:none;}
.ii{width:36px;height:36px;background:rgba(255,255,255,.06);border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.iname{font-size:12px;font-weight:600;}
.itype{font-size:10px;color:var(--t2);}
.istat{text-align:right;flex-shrink:0;}
.isv{font-family:'Bebas Neue',sans-serif;font-size:14px;}
.isl{font-size:9px;color:var(--t2);}

/* ── MARKET ITEM ── */
.market-item{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:12px;}

/* ── MAP ── */
.map-wrap{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--b);}
.map-svg{width:100%;display:block;}
.territory{cursor:pointer;}
.territory rect{transition:opacity .15s;}
.territory:active rect{opacity:.7;}
.map-ov{position:absolute;bottom:8px;right:8px;background:rgba(10,12,20,.92);
  border:1px solid var(--b);border-radius:var(--rs);padding:8px 10px;min-width:120px;
  backdrop-filter:blur(10px);}
.ov-name{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.5px;}

/* ── AI CHIP ── */
.ai-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(224,64,251,.12);
  border:1px solid rgba(224,64,251,.3);border-radius:20px;padding:2px 8px;
  font-size:10px;color:var(--a4);font-weight:600;}

/* ── TOAST ── */
#toasts{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none;}
.toast{padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);
  animation:tshow .3s ease;white-space:nowrap;}
.toast.or{background:rgba(255,107,53,.85);color:#fff;}
.toast.gr{background:rgba(6,214,160,.85);color:#111;}
.toast.re{background:rgba(239,83,80,.85);color:#fff;}
.toast.ye{background:rgba(255,210,63,.85);color:#111;}
.toast.bl{background:rgba(41,182,246,.85);color:#111;}
.toast.pu{background:rgba(224,64,251,.85);color:#fff;}
@keyframes tshow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── BATTLE MODAL ── */

.modal.open{display:flex;}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);}
.modal-box{position:relative;width:100%;background:#1a1a2e;border-radius:20px 20px 0 0;
  padding:20px;max-height:80vh;overflow-y:auto;}


/* ── LOGIN SCREEN ── */


.login-logo{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:4px;
  color:var(--a);text-shadow:0 0 30px rgba(255,107,53,.5);margin-bottom:8px;}


.login-input{background:rgba(255,255,255,.07);border:1px solid var(--b);border-radius:var(--rs);
  padding:12px 14px;color:var(--t);font-family:'Barlow',sans-serif;font-size:14px;outline:none;width:100%;}
.login-input:focus{border-color:var(--a);}




/* ── JAIL BANNER ── */
#jail-banner{display:none;background:rgba(239,83,80,.15);border-bottom:1px solid rgba(239,83,80,.4);
  padding:8px 14px;text-align:center;font-size:11px;font-weight:700;color:var(--red);flex-shrink:0;}
#jail-banner.show{display:block;}

/* ── DRUG SEND DROPDOWN ── */
.drug-send{margin-top:8px;}
.drug-send select{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--b);
  border-radius:7px;padding:6px 10px;color:var(--t);font-family:'Barlow',sans-serif;font-size:11px;outline:none;}

/* ── LABS ── */
.lab-card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:12px;margin-bottom:8px;}
.lab-status{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;}
.ls-idle{background:rgba(120,120,150,.15);color:var(--t2);}
.ls-cooking{background:rgba(255,210,63,.15);color:var(--a2);}
.ls-done{background:rgba(6,214,160,.15);color:var(--a3);}
.ls-destroyed{background:rgba(239,83,80,.15);color:var(--red);}
.ls-repairing{background:rgba(41,182,246,.15);color:var(--a5);}

/* ── LOADING SPINNER ── */
.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--a);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SKELETON ── */
.skel{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;animation:skelanim 1.5s infinite;border-radius:6px;}
@keyframes skelanim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── MARKET COLOURS ── */
.mkt-green{color:var(--a3);}
.mkt-yellow{color:var(--a2);}
.mkt-red{color:var(--red);}

/* ── MISC ── */
.sep{height:1px;background:var(--b);margin:8px 0;}
.empty{text-align:center;padding:24px;color:var(--t2);font-size:12px;}

input, textarea, [contenteditable], select {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
/* Extra mobile kill — prevents long-press text selection everywhere else */
body { -webkit-touch-callout:none; }

/* ── LOGIN SCREEN ── */
#login-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;}
#login-screen.hidden{display:none;}
.login-sub{font-size:11px;color:var(--t2);letter-spacing:3px;text-transform:uppercase;margin-bottom:36px;}
.login-form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px;}
.login-err{font-size:12px;color:var(--red);text-align:center;min-height:16px;}
.login-toggle{font-size:12px;color:var(--t2);text-align:center;cursor:pointer;}
.login-toggle span{color:var(--a);}
/* ── SHELL ── */
#shell{display:none;flex-direction:column;height:100dvh;width:100vw;overflow:hidden;position:relative;z-index:1;}
#shell.active{display:flex;}
/* ── MAIN ── */
#main{flex:1;overflow-y:scroll;overflow-x:hidden;padding:12px 12px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:0;}
#main::-webkit-scrollbar{display:none;}
/* ── BACK ROW ── */



/* ── SPIN ── */
@keyframes spin-emoji{to{transform:rotate(360deg)}}
.spin{display:inline-block;animation:spin-emoji 1.5s linear infinite;}


/* ══════════════════════════════════════════════
   MISSING CLASSES — added from old inline styles
══════════════════════════════════════════════ */

/* ── NAV buttons (new names: .ni) ── */
.ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;border:none;background:transparent;transition:all .18s;position:relative;padding:0;}
.ni-icon{font-size:22px;line-height:1;transition:transform .2s;}
.ni-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--t2);transition:color .18s;}
.ni.active .ni-label{color:var(--a);}
.ni.active .ni-icon{transform:scale(1.12);}
.ni.active::after{content:'';position:absolute;top:0;left:18%;right:18%;height:2px;
  border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--a),var(--a2));}
.nbadge{position:absolute;top:7px;right:calc(50% - 20px);min-width:15px;height:15px;
  border-radius:8px;background:var(--red);font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:#fff;padding:0 3px;}

/* ── Buttons ── */
.btn-dn{background:linear-gradient(135deg,#ef5350,#c62828);color:#fff;}
.btn-gh{background:var(--s);color:var(--t);border:1px solid var(--b);}
.btn-bl{background:linear-gradient(135deg,var(--a5),#1565c0);color:#fff;}
.btn-ye{background:linear-gradient(135deg,var(--a2),#f57f17);color:#000;}

/* ── Input ── */
.inp{background:rgba(255,255,255,.07);border:1px solid var(--b);border-radius:var(--rs);
  padding:10px 12px;color:var(--t);font-family:'Barlow',sans-serif;font-size:13px;
  outline:none;width:100%;transition:border-color .18s;
  -webkit-user-select:text;user-select:text;}
.inp:focus{border-color:rgba(255,107,53,.5);}
.inp::placeholder{color:var(--t2);}

/* ── Grid ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* ── Stack ── */
.stack{display:flex;flex-direction:column;gap:8px;}

/* ── Stat box (sbox) ── */
.sbox{background:var(--s);border:1px solid var(--b);border-radius:var(--r);
  padding:10px 11px;position:relative;overflow:hidden;}
.sbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sbox.or::before{background:linear-gradient(90deg,var(--a),var(--a2));}
.sbox.gr::before{background:linear-gradient(90deg,var(--a3),#29f1c3);}
.sbox.bl::before{background:linear-gradient(90deg,var(--a5),#7c4dff);}
.sbox.pu::before{background:linear-gradient(90deg,var(--a4),#f48fb1);}
.sbox.ye::before{background:linear-gradient(90deg,var(--a2),var(--a));}
.sbox .si{font-size:18px;margin-bottom:4px;}
.sbox .sv{font-family:'Bebas Neue',sans-serif;font-size:20px;line-height:1;margin-bottom:2px;}
.sbox .sl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;font-weight:600;}

/* ── Mstat (profile/stats small boxes) ── */
.mstat{text-align:center;padding:8px 5px;background:var(--s);border:1px solid var(--b);border-radius:var(--rs);}
.mstat .mv{font-family:'Bebas Neue',sans-serif;font-size:18px;line-height:1;}
.mstat .ml{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;}

/* ── Modal ── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(7px);
  z-index:200;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-ov.open{opacity:1;pointer-events:all;}
.modal{background:#1a1a2e;border:1px solid var(--b);border-radius:20px 20px 0 0;
  padding:18px 17px 30px;width:100%;max-width:480px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.4,1);position:relative;overflow:hidden;}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--a),var(--a2));}
.modal-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 auto 14px;}
.modal-ov.open .modal{transform:translateY(0);}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;
  text-align:center;margin-bottom:12px;}
.modal-close{position:absolute;top:18px;right:14px;background:var(--s);border:1px solid var(--b);
  border-radius:7px;width:27px;height:27px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:12px;color:var(--t2);}

/* ── Battle modal ── */
.battle-vs{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;}
.blog{background:rgba(0,0,0,.3);border-radius:9px;padding:10px 12px;font-size:11px;
  line-height:1.8;margin-bottom:11px;max-height:80px;overflow-y:auto;}
.blog-rew{display:flex;justify-content:space-around;background:rgba(6,214,160,.08);
  border:1px solid rgba(6,214,160,.2);border-radius:9px;padding:9px;margin-bottom:12px;}

/* ── Chat ── */
.chat-rooms{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid var(--b);
  overflow-x:auto;flex-shrink:0;scrollbar-width:none;}
.chat-rooms::-webkit-scrollbar{display:none;}
.croom{display:flex;align-items:center;gap:5px;background:var(--s);border:1px solid var(--b);
  border-radius:20px;padding:5px 12px;white-space:nowrap;cursor:pointer;
  font-size:12px;font-weight:600;flex-shrink:0;transition:all .18s;}
.croom.active{background:rgba(255,107,53,.15);border-color:rgba(255,107,53,.4);color:var(--a);}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 12px;
  display:flex;flex-direction:column;gap:9px;scrollbar-width:none;}
.msgs::-webkit-scrollbar{display:none;}
.chat-inp{display:flex;gap:7px;padding:8px 12px;border-top:1px solid var(--b);flex-shrink:0;}

/* ── mb8 / mb12 ── */
.mb8{margin-bottom:8px;}
.mb12{margin-bottom:12px;}

/* ── Back row (inside #main, no negative margin needed) ── */
.back-row{display:flex;align-items:center;gap:8px;padding:0 0 14px;cursor:pointer;
  color:var(--t2);font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.back-row::before{content:'‹';font-size:22px;color:var(--a);line-height:1;}
.back-row:active{opacity:.7;}

/* ── Chat page layout — #main must not scroll when chat is active ── */
#main.chat-mode{padding:0;overflow:hidden;display:flex;flex-direction:column;}
#main.chat-mode .msgs{height:0;flex:1;}

/* ── Row helpers ── */
.row-sb{display:flex;align-items:center;justify-content:space-between;}
.row{display:flex;align-items:center;gap:8px;}
.mb4{margin-bottom:4px;}

/* ── SELECT — dark background everywhere, no white flash ── */
select {
  background:#1e1e30;
  color:var(--t);
  border:1px solid var(--b);
  border-radius:7px;
  padding:6px 8px;
  font-family:'Barlow',sans-serif;
  font-size:12px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
select option {
  background:#1e1e30;
  color:var(--t);
}
select:focus {
  border-color:rgba(255,107,53,.5);
}

/* ── Staff Cards (Dealers / Bodyguards / Spies) ─────────── */
.scard {
  background: var(--s);
  border: 1px solid var(--b);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 8px;
}
.scard-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.scard-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,107,53,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.scard-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--t); line-height: 1.2;
}
.scard-sub {
  font-size: 11px; color: var(--t2); margin-top: 2px;
}

/* Hire / Fire tab strip */
.scard-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--b);
  border-radius: 8px;
  overflow: hidden;
}
.scard-tab {
  flex: 1;
  padding: 7px 0;
  font-size: 12px; font-weight: 600;
  background: transparent;
  color: var(--t2);
  border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .5px;
  transition: background .15s, color .15s;
}
.scard-tab.active {
  background: rgba(255,107,53,.18);
  color: var(--a);
}
.scard-tab:not(:last-child) {
  border-right: 1px solid var(--b);
}

/* Qty slider widget */
.staff-slider-wrap { margin-bottom: 4px; }
.sq-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--b);
  background: rgba(255,255,255,.06);
  color: var(--t);
  font-size: 16px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sq-btn:active { background: rgba(255,107,53,.2); }

/* range input reset */
input[type=range] {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.12);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--a);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255,107,53,.5);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%; border: none;
  background: var(--a);
  cursor: pointer;
}