:root{
  --bg:#070b14; --bg2:#0a1020; --panel:#0e1626; --panel2:#121c30; --line:#1e2a44; --line2:#2a3a5e;
  --txt:#e9eefb; --dim:#8b98b5; --dim2:#5f6c88;
  --gold:#d9b45b; --gold2:#f3d789; --goldD:#8a6d2a;
  --good:#2ee6a8; --bad:#ff5d6c; --warn:#ffb84d; --info:#5cb2ff;
  --acc:#d9b45b; --accG:rgba(217,180,91,.14);
  --r:14px; --sh:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(217,180,91,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(92,178,255,.05), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:'Tajawal', 'Segoe UI', Tahoma, 'Noto Kufi Arabic', sans-serif;
  overflow:hidden; font-size:15px;
}
.hide{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#233252;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; color:var(--txt); background:#0a1222; border:1px solid var(--line2); border-radius:10px; padding:9px 12px; font-size:14px; outline:none; transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,180,91,.15)}
input[type=range]{padding:0; accent-color:var(--gold)}
.goldTxt{background:linear-gradient(120deg,#f7e3a1,#d9b45b 45%,#f3d789 70%,#a8842f); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ====== BUTTONS ====== */
.btn{display:inline-flex; align-items:center; gap:7px; justify-content:center; padding:10px 18px; border-radius:11px; font-weight:700; font-size:14px;
  background:linear-gradient(135deg,#e8c877,#c79b3d); color:#241a05; box-shadow:0 4px 18px rgba(217,180,91,.25), inset 0 1px 0 rgba(255,255,255,.35); transition:.18s; position:relative; overflow:hidden}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(217,180,91,.4)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn.ghost{background:transparent; color:var(--txt); border:1px solid var(--line2); box-shadow:none}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold2)}
.btn.danger{background:linear-gradient(135deg,#ff7583,#d63a4c); color:#fff}
.btn.green{background:linear-gradient(135deg,#4defc0,#17b586); color:#03281d}
.btn.blue{background:linear-gradient(135deg,#7cc3ff,#2f86dd); color:#03203b}
.btn.sm{padding:6px 12px; font-size:12.5px; border-radius:9px}
.btn.xs{padding:4px 9px; font-size:11.5px; border-radius:8px}
.btn.big{padding:14px 26px; font-size:16px; border-radius:13px}
.shimmer::after{content:''; position:absolute; top:0; left:-80%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); animation:shim 3.2s infinite}
@keyframes shim{0%{left:-80%}55%{left:130%}100%{left:130%}}

/* ====== APP LAYOUT ====== */
#app{height:100vh; display:flex; flex-direction:column}
#topbar{height:66px; flex:0 0 66px; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,28,48,.9), rgba(10,16,32,.92)); backdrop-filter:blur(8px); z-index:40}
#brand{display:flex; align-items:center; gap:10px; min-width:0}
#coLogo{width:42px;height:42px; border-radius:12px; background:linear-gradient(135deg,var(--accG),rgba(255,255,255,.03)); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 42px}
#coName{font-weight:800; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px}
#coSub{font-size:11px; color:var(--dim); white-space:nowrap}
#kpis{display:flex; gap:8px; align-items:center; flex:1; overflow-x:auto; padding:4px 2px; scrollbar-width:none}
#kpis::-webkit-scrollbar{display:none}
.chip{display:flex; flex-direction:column; gap:1px; padding:6px 13px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid var(--line); min-width:max-content}
.chip b{font-size:14px; font-weight:800; letter-spacing:.2px}
.chip span{font-size:10px; color:var(--dim)}
.chip .up{color:var(--good)} .chip .dn{color:var(--bad)}
#weekBtn{white-space:nowrap}
.delta{font-size:11px; font-weight:800; margin-inline-start:5px; animation:fadeUp .5s}
@keyframes fadeUp{from{opacity:0; transform:translateY(4px)}to{opacity:1}}

#layout{flex:1; display:flex; min-height:0}
#side{width:216px; flex:0 0 216px; border-inline-start:1px solid var(--line); background:linear-gradient(180deg,rgba(14,22,38,.7),rgba(8,12,24,.7)); padding:12px 10px; overflow-y:auto; z-index:30}
.navBtn{width:100%; display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; color:var(--dim); font-weight:600; font-size:14px; margin-bottom:4px; border:1px solid transparent; transition:.15s; position:relative; text-align:right}
.navBtn:hover{color:var(--txt); background:rgba(255,255,255,.035)}
.navBtn.on{color:var(--gold2); background:var(--accG); border-color:rgba(217,180,91,.3)}
.navBtn .ic{font-size:17px; width:22px; text-align:center}
.badge{position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%); background:var(--bad); color:#fff; font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px}
.badge.gold{background:var(--gold); color:#241a05}
#main{flex:1; overflow-y:auto; padding:18px 20px 60px; min-width:0}
.pageTitle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.pageTitle h2{font-size:21px; font-weight:800; display:flex; align-items:center; gap:10px}
.pageTitle .sub{color:var(--dim); font-size:13px; margin-top:3px}

/* ====== TICKER ====== */
#ticker{position:fixed; bottom:0; right:0; left:0; height:36px; background:linear-gradient(90deg,#0b1220,#101a30,#0b1220); border-top:1px solid var(--line); display:flex; align-items:center; overflow:hidden; z-index:35}
#ticker .lbl{flex:0 0 auto; padding:0 14px; height:100%; display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,#2a2008,#3d2f0c); color:var(--gold2); font-weight:800; font-size:12px; border-inline-end:1px solid var(--goldD)}
#tickerTrack{white-space:nowrap; display:inline-block; padding-inline-start:100%; animation:tick 45s linear infinite; font-size:13px; color:var(--dim)}
#tickerTrack b{color:var(--txt)} #tickerTrack .g{color:var(--good)} #tickerTrack .r{color:var(--bad)} #tickerTrack .y{color:var(--warn)}
@keyframes tick{0%{transform:translateX(-8%)}100%{transform:translateX(110%)}}

/* ====== CARDS / GRID ====== */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r); padding:16px; position:relative; transition:.2s}
.card:hover{border-color:var(--line2)}
.card.goldB{border-color:rgba(217,180,91,.35); box-shadow:0 0 30px rgba(217,180,91,.06)}
.card h3{font-size:15px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.card h3 .ic{font-size:17px}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.mt{margin-top:14px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.stat{padding:13px 15px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line)}
.stat .v{font-size:19px; font-weight:800; margin-top:3px}
.stat .l{font-size:11.5px; color:var(--dim)}
.stat .s{font-size:11px; margin-top:3px; color:var(--dim2)}
.pos{color:var(--good)} .neg{color:var(--bad)} .wrn{color:var(--warn)} .inf{color:var(--info)} .gld{color:var(--gold2)}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--dim)}
.tag.g{color:var(--good); border-color:rgba(46,230,168,.35); background:rgba(46,230,168,.08)}
.tag.r{color:var(--bad); border-color:rgba(255,93,108,.35); background:rgba(255,93,108,.08)}
.tag.y{color:var(--warn); border-color:rgba(255,184,77,.35); background:rgba(255,184,77,.08)}
.tag.b{color:var(--info); border-color:rgba(92,178,255,.35); background:rgba(92,178,255,.08)}
.tag.gold{color:var(--gold2); border-color:rgba(217,180,91,.4); background:var(--accG)}
.bar{height:8px; border-radius:6px; background:#0a1222; overflow:hidden; border:1px solid var(--line)}
.bar>i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .5s}
.bar>i.g{background:linear-gradient(90deg,#17b586,#4defc0)}
.bar>i.r{background:linear-gradient(90deg,#d63a4c,#ff7583)}
.bar>i.b{background:linear-gradient(90deg,#2f86dd,#7cc3ff)}
.hint{font-size:12px; color:var(--dim); line-height:1.7}
.divider{height:1px; background:var(--line); margin:13px 0}
table{width:100%; border-collapse:collapse; font-size:13px}
th{color:var(--dim); font-weight:700; text-align:right; padding:8px 9px; border-bottom:1px solid var(--line); font-size:12px}
td{padding:9px; border-bottom:1px solid rgba(30,42,68,.5)}
tr:last-child td{border-bottom:none}
tr.me{background:var(--accG)}
.num{display:flex; align-items:center; gap:6px}
.num button{width:30px;height:30px; border-radius:8px; background:#16233c; border:1px solid var(--line2); font-weight:800; font-size:15px; color:var(--gold2)}
.num button:hover{background:#1d2e4e}
.num input{width:92px; text-align:center; padding:6px}

/* ====== INSIGHTS / NEWS ====== */
.insight{display:flex; gap:11px; padding:11px 13px; border-radius:12px; margin-bottom:9px; border:1px solid var(--line); background:rgba(255,255,255,.02); animation:fadeUp .4s}
.insight .ic{font-size:19px; flex:0 0 auto; margin-top:1px}
.insight .t{font-size:13.5px; line-height:1.65}
.insight .tip{font-size:11.5px; color:var(--dim); margin-top:4px; line-height:1.6}
.insight.s3{border-color:rgba(255,93,108,.5); background:rgba(255,93,108,.07); animation:pulse 2s infinite}
.insight.s2{border-color:rgba(255,184,77,.45); background:rgba(255,184,77,.06)}
.insight.s1{border-color:rgba(92,178,255,.35); background:rgba(92,178,255,.05)}
.insight.s0{border-color:rgba(46,230,168,.35); background:rgba(46,230,168,.05)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,93,108,.25)}50%{box-shadow:0 0 0 6px rgba(255,93,108,0)}}
.newsItem{display:flex; gap:9px; padding:9px 4px; border-bottom:1px dashed rgba(30,42,68,.6); font-size:13px; line-height:1.6}
.newsItem .w{color:var(--dim2); font-size:11px; flex:0 0 62px; padding-top:2px}
.newsItem:last-child{border-bottom:none}

/* ====== FACILITY / OFFER / TENDER CARDS ====== */
.facCard{border:1px solid var(--line); border-radius:13px; padding:14px; background:rgba(255,255,255,.02); transition:.2s}
.facCard:hover{border-color:var(--acc)}
.facCard .top{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.facCard .fic{width:40px;height:40px; border-radius:11px; background:var(--accG); display:flex; align-items:center; justify-content:center; font-size:20px}
.facCard .nm{font-weight:800; font-size:14px}
.facCard .meta{font-size:11.5px; color:var(--dim); margin-top:2px}
.offCard{border:1px solid var(--line2); border-radius:13px; padding:14px; background:linear-gradient(135deg,rgba(92,178,255,.05),transparent); margin-bottom:11px; animation:fadeUp .4s}
.offCard.gold{border-color:rgba(217,180,91,.45); background:linear-gradient(135deg,var(--accG),transparent)}
.gauge{width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; margin:auto;
  background:conic-gradient(var(--gc,var(--gold)) calc(var(--gv,50)*1%), #16233c 0)}
.gauge::before{content:''; position:absolute; inset:9px; border-radius:50%; background:var(--panel)}
.gauge b{position:relative; font-size:23px; font-weight:900}
.gauge span{position:absolute; bottom:24px; font-size:10px; color:var(--dim)}
.orb{width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9ad, var(--gold) 45%, #6b5320 90%); box-shadow:0 0 24px rgba(217,180,91,.5), inset 0 -6px 14px rgba(0,0,0,.35); animation:orb 4s ease-in-out infinite; display:flex; align-items:center; justify-content:center; font-size:23px}
@keyframes orb{0%,100%{transform:translateY(0); box-shadow:0 0 20px rgba(217,180,91,.4)}50%{transform:translateY(-5px); box-shadow:0 0 34px rgba(217,180,91,.7)}}

/* ====== MODAL / TOAST ====== */
#modalRoot{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px}
#modalRoot.on{display:flex}
#modalBack{position:absolute; inset:0; background:rgba(4,7,14,.75); backdrop-filter:blur(5px); animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#modalBox{position:relative; width:min(620px,96vw); max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,#141f38,#0d1526); border:1px solid var(--line2); border-radius:18px; padding:22px; box-shadow:var(--sh); animation:pop .3s}
#modalBox::before{content:''; position:absolute; top:0; right:8%; left:8%; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(8px)}to{opacity:1; transform:none}}
.mTitle{font-size:18px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:9px}
.mSub{color:var(--dim); font-size:13px; margin-bottom:15px; line-height:1.7}
#toastRoot{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:#16223c; border:1px solid var(--line2); border-radius:12px; padding:10px 18px; font-size:13.5px; font-weight:600; box-shadow:var(--sh); animation:toastIn .3s; display:flex; gap:8px; align-items:center; max-width:92vw}
.toast.g{border-color:rgba(46,230,168,.5)} .toast.r{border-color:rgba(255,93,108,.5)} .toast.y{border-color:rgba(255,184,77,.5)} .toast.gold{border-color:rgba(217,180,91,.6)}
@keyframes toastIn{from{opacity:0; transform:translateY(-12px)}to{opacity:1}}
.toast.out{opacity:0; transition:.4s}
/* toast الدردشة — شكل مميّز */
.toast.chatToast{background:linear-gradient(135deg,#1a2f4a,#122238); border:1px solid var(--info); border-inline-start:4px solid var(--info); align-items:flex-start; gap:11px; padding:12px 16px; max-width:min(360px,92vw); cursor:pointer; box-shadow:0 10px 34px rgba(92,178,255,.28); animation:chatPop .35s}
.toast.chatToast .ct-ic{font-size:20px; flex:0 0 auto; margin-top:1px}
.toast.chatToast .ct-name{color:var(--info); font-weight:800; font-size:12.5px; margin-bottom:2px}
.toast.chatToast .ct-txt{font-size:13px; font-weight:500; line-height:1.6; color:var(--txt); word-break:break-word}
@keyframes chatPop{from{opacity:0; transform:translateY(-14px) scale(.94)}to{opacity:1; transform:none}}

/* ====== INTRO / WIZARD ====== */
.screen{position:fixed; inset:0; z-index:90; background:radial-gradient(1000px 700px at 50% -20%, rgba(217,180,91,.1), transparent 55%), var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto}
.wizBox{width:min(880px,96vw); animation:pop .5s}
.logoBig{font-size:52px; font-weight:900; text-align:center; letter-spacing:1px; line-height:1.25}
.logoSub{text-align:center; color:var(--dim); font-size:15px; margin-top:8px; letter-spacing:3px}
.selGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:13px; margin-top:18px}
.selCard{border:1px solid var(--line); border-radius:15px; padding:17px; background:rgba(255,255,255,.02); cursor:pointer; transition:.18s; text-align:right}
.selCard:hover{border-color:var(--gold); transform:translateY(-2px)}
.selCard.on{border-color:var(--gold); background:var(--accG); box-shadow:0 0 26px rgba(217,180,91,.15)}
.selCard .sic{font-size:29px}
.selCard .snm{font-weight:800; font-size:15px; margin:8px 0 5px}
.selCard .sds{font-size:12px; color:var(--dim); line-height:1.7}
.emojiGrid{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.emojiGrid button{width:46px;height:46px; border-radius:12px; font-size:22px; background:rgba(255,255,255,.03); border:1px solid var(--line); transition:.15s}
.emojiGrid button:hover{border-color:var(--gold)}
.emojiGrid button.on{border-color:var(--gold); background:var(--accG); box-shadow:0 0 14px rgba(217,180,91,.3)}
.stepDots{display:flex; gap:7px; justify-content:center; margin:18px 0}
.stepDots i{width:26px; height:5px; border-radius:4px; background:#1c2a48; transition:.3s}
.stepDots i.on{background:var(--gold)}
canvas.ch{width:100%; height:150px; display:block}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--dim); margin-top:6px; flex-wrap:wrap}
.legend i{display:inline-block; width:10px;height:10px;border-radius:3px; margin-inline-end:5px; vertical-align:-1px}
.objItem{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; border:1px solid var(--line); margin-bottom:8px; font-size:13px; background:rgba(255,255,255,.02)}
.objItem.done{border-color:rgba(46,230,168,.4); background:rgba(46,230,168,.05); color:var(--dim)}
.objItem .rw{margin-inline-start:auto; font-size:11px; color:var(--gold2); white-space:nowrap}
.aiMsg{background:rgba(217,180,91,.05); border:1px solid rgba(217,180,91,.25); border-radius:13px; padding:15px; font-size:13.5px; line-height:1.9; margin-top:12px; animation:fadeUp .4s}
.aiMsg b{color:var(--gold2)}
.spin{display:inline-block; width:16px;height:16px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width: 880px){
  #layout{flex-direction:column-reverse}
  #side{width:100%; flex:0 0 58px; display:flex; gap:5px; overflow-x:auto; overflow-y:hidden; padding:8px; border-inline-start:none; border-top:1px solid var(--line)}
  .navBtn{width:auto; flex:0 0 auto; margin:0; padding:9px 12px; font-size:12.5px}
  .navBtn .lbl{display:none}
  .navBtn .ic{font-size:19px; width:auto}
  .badge{inset-inline-end:-2px; top:2px; transform:none}
  #main{padding:14px 12px 90px}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  #coSub{display:none} #coName{max-width:110px; font-size:14px}
  #ticker{bottom:58px}
  .logoBig{font-size:36px}
  .chip{padding:5px 10px}
  .chip b{font-size:12.5px}
}
@media (max-width: 560px){ .g3,.g4{grid-template-columns:1fr 1fr} .g2{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
/* ============ إضافات النسخة الجماعية (PHP) ============ */

/* صفحة الدخول */
.authWrap{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.authBox{width:min(430px,94vw); background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line2); border-radius:20px; padding:30px 26px; box-shadow:var(--sh); text-align:center}
.authBox input{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:11px 13px; margin-top:10px; font:inherit; font-size:14px}
.authBox input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--accG)}
.authTabs{display:flex; gap:8px; margin:18px 0 6px}
.authTabs .tabB{flex:1; padding:9px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; font:inherit; font-size:13.5px}
.authTabs .tabB.on{background:var(--accG); border-color:var(--gold); color:var(--gold2)}
.authErr{background:rgba(255,93,108,.12); border:1px solid rgba(255,93,108,.4); color:#ffb9c1; border-radius:10px; padding:9px 12px; margin-top:12px; font-size:13px}

/* عدّاد الأسبوع القادم */
#nextTick{display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,rgba(217,180,91,.16),rgba(217,180,91,.05)); border:1px solid var(--goldD); border-radius:12px; padding:7px 14px; white-space:nowrap}
#nextTick .t{font-variant-numeric:tabular-nums; font-weight:800; color:var(--gold2); font-size:15px; letter-spacing:.5px}
#nextTick .l{font-size:10px; color:var(--dim)}
#nextTick.soon .t{animation:pulseG 1s infinite}
#sndBtn{flex:0 0 auto; width:38px; height:38px; border-radius:11px; font-size:18px; background:rgba(255,255,255,.04); border:1px solid var(--line2); transition:.15s}
#sndBtn:hover{border-color:var(--gold); background:var(--accG)}
@keyframes pulseG{50%{opacity:.45}}

/* جداول */
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{color:var(--dim); font-weight:600; text-align:right; padding:8px 10px; border-bottom:1px solid var(--line); font-size:11.5px}
.tbl td{padding:9px 10px; border-bottom:1px solid rgba(30,42,68,.5); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.me td{background:var(--accG)}
.tbl tr.me td:first-child{border-right:3px solid var(--gold)}
.rank{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:8px; background:var(--panel2); border:1px solid var(--line); font-weight:800; font-size:12px}
.rank.r1{background:linear-gradient(135deg,#d9b45b,#8a6d2a); color:#111; border:none}
.rank.r2{background:linear-gradient(135deg,#cfd6e4,#8b98b5); color:#111; border:none}
.rank.r3{background:linear-gradient(135deg,#e0a370,#9a6a3d); color:#111; border:none}

/* الدردشة */
#chatBox{display:flex; flex-direction:column; height:340px}
#chatMsgs{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:4px 2px}
.chatM{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 11px; font-size:13px; max-width:92%}
.chatM .who{color:var(--gold2); font-weight:700; font-size:11.5px; margin-bottom:2px}
.chatM .when{color:var(--dim2); font-size:10px; margin-inline-start:6px; font-weight:400}
.chatM.mine{align-self:flex-start; background:linear-gradient(135deg,rgba(217,180,91,.14),rgba(217,180,91,.04)); border-color:var(--goldD)}
#chatForm{display:flex; gap:8px; margin-top:10px}
#chatForm input{flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px}
#chatForm input:focus{outline:none; border-color:var(--gold)}

/* حقول عامة داخل البطاقات والنوافذ */
.inp, select.inp{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px}
.inp:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--accG)}
.fld{margin-top:10px}
.fld label{display:block; font-size:11.5px; color:var(--dim); margin-bottom:5px}
input[type=range]{width:100%; accent-color:var(--gold)}

/* شارات حالة */
.pill{display:inline-block; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700; border:1px solid}
.pill.g{color:var(--good); border-color:rgba(46,230,168,.4); background:rgba(46,230,168,.08)}
.pill.r{color:var(--bad); border-color:rgba(255,93,108,.4); background:rgba(255,93,108,.08)}
.pill.y{color:var(--warn); border-color:rgba(255,184,77,.4); background:rgba(255,184,77,.08)}
.pill.b{color:var(--info); border-color:rgba(92,178,255,.4); background:rgba(92,178,255,.08)}

/* شريط تقدم صغير */
.mini{height:6px; background:var(--bg2); border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.mini>i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:99px}
.mini.g>i{background:linear-gradient(90deg,#18a97b,var(--good))}
.mini.r>i{background:linear-gradient(90deg,#c2404e,var(--bad))}

/* لوحة الإدارة */
.adminGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}

/* تلميح فوق العناصر */
[data-tip]{position:relative}
.skel{opacity:.45; pointer-events:none; filter:grayscale(.4)}
#pendBanner{position:sticky; top:0; z-index:5; margin-bottom:14px}

@media (max-width: 880px){
  #nextTick .l{display:none}
  #chatBox{height:300px}
}

/* ---------- المضاربة والجنون ---------- */
.swanBanner{margin:10px 0; padding:9px 12px; border-radius:10px; font-weight:800; font-size:13px; text-align:center}
.swanBanner.up{background:rgba(46,230,168,.13); color:var(--good); border:1px solid rgba(46,230,168,.35)}
.swanBanner.dn{background:rgba(255,93,108,.13); color:var(--bad); border:1px solid rgba(255,93,108,.35)}
.saboGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.saboCard{background:var(--card2,#141a2e); border:1px solid var(--line,#243049); border-radius:12px; padding:11px}
.moonGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.moonCard{background:linear-gradient(160deg,#1a1608,#12162a); border:1px solid var(--goldD); border-radius:14px; padding:13px}
.moonCard.done{opacity:.7; filter:grayscale(.3)}
.lockNote{padding:10px 12px; border-radius:10px; background:rgba(92,178,255,.1); border:1px solid rgba(92,178,255,.3); color:var(--info); font-size:12px; line-height:1.8}

/* ===== الخريطة العالمية ===== */
.worldMapWrap{position:relative; width:100%; aspect-ratio:2/1; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, #0e2440 0%, #0a1830 55%, #071020 100%);
  border:1px solid var(--line); margin-top:10px}
.worldMapWrap::before{content:''; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(circle, rgba(120,170,230,.5) 1px, transparent 1.4px); background-size:22px 22px}
.mapPin{position:absolute; transform:translate(-50%,-50%); cursor:default; text-align:center; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .15s}
.mapPin .pinFlag{font-size:22px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.mapPin .pinLbl{font-size:10px; font-weight:800; white-space:nowrap; background:rgba(6,14,26,.82);
  padding:2px 7px; border-radius:20px; border:1px solid var(--line)}
.mapPin.home .pinLbl{border-color:var(--gold); color:var(--gold)}
.mapPin.in{ }
.mapPin.in .pinFlag{filter:drop-shadow(0 0 8px var(--good))}
.mapPin.in .pinLbl{border-color:var(--good); color:var(--good)}
.mapPin.can{cursor:pointer}
.mapPin.can .pinFlag{animation:pinPulse 1.8s ease-in-out infinite}
.mapPin.can .pinLbl{border-color:var(--info); color:var(--info)}
.mapPin.can:hover{transform:translate(-50%,-50%) scale(1.12)}
.mapPin.lock{opacity:.5}
.mapPin.lock .pinLbl{color:var(--dim2)}
@keyframes pinPulse{0%,100%{filter:drop-shadow(0 0 3px var(--info))}50%{filter:drop-shadow(0 0 11px var(--info))}}
.mapLine{position:absolute; height:2px; transform-origin:left center; z-index:1; opacity:.4;
  background:linear-gradient(90deg, var(--gold), transparent)}