/* HayOrder - Main Stylesheet */

*{box-sizing:border-box;margin:0;padding:0}

html{
  height: 100%;
  height: 100dvh;
}

body{
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bs);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

html,body,button,input,textarea{font-family:var(--font-sans);font-size:13px}
:root{
  --g:#2d6a4f;--gm:#52b788;--gl:#d8f3dc;--gp:#f0faf5;
  --am:#e9c46a;--ad:#c77d22;
  --bl:#2563eb;--bll:#eff6ff;
  --rd:#e63946;--rl:#fcebeb;
  
  /* Light Mode (default) */
  --color-text-primary:#1c1c1e;
  --color-text-secondary:#636366;
  --color-background-primary:#f2f4f3;
  --color-background-secondary:#e8ede9;
  --color-border-tertiary:#d1d9d3;
  --color-border-secondary:#bec8c0;
  --border-radius-lg:10px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  
  --tx:var(--color-text-primary);--ts:var(--color-text-secondary);
  --bg:var(--color-background-primary);--bs:var(--color-background-secondary);
  --bd:var(--color-border-tertiary);--b2:var(--color-border-secondary)
}

/* Dark Mode */
:root[data-theme="dark"]{
  --color-text-primary:#f0f0f0;
  --color-text-secondary:#a0a0a0;
  --color-background-primary:#1a1a1a;
  --color-background-secondary:#2a2a2a;
  --color-border-tertiary:#404040;
  --color-border-secondary:#505050;
}

/* Auto Dark Mode (system preference) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-text-primary:#f0f0f0;
    --color-text-secondary:#a0a0a0;
    --color-background-primary:#1a1a1a;
    --color-background-secondary:#2a2a2a;
    --color-border-tertiary:#404040;
    --color-border-secondary:#505050;
  }
}
.phone{
  direction: rtl;
  width: 100%;
  max-width: 480px;
  background: var(--bs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  /* الارتفاع الصحيح لكل جهاز */
  height: 100vh;
  height: 100dvh; /* Android Chrome جديد */
  /* iPhone Safari */
  min-height: -webkit-fill-available;
  /* Safe areas للـ notch وHome indicator */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── SPLASH ── */
.splash{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#0d2419 0%,#1a3a2e 50%,#0f2d1f 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:99999;transition:opacity .6s ease;
}
.splash.out{opacity:0;pointer-events:none}
.spl-ring{
  width:90px;height:90px;border-radius:50%;
  border:1.5px solid rgba(233,196,106,.2);
  display:flex;align-items:center;justify-content:center;
  animation:sspin 10s linear infinite;
}
.spl-core{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#2d6a4f,#1a3a2e);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  border:2px solid rgba(233,196,106,.25);
  box-shadow:0 0 30px rgba(45,106,79,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes sspin{to{transform:rotate(360deg)}}
.spl-t{
  font-size:20px;font-weight:700;
  color:#fff;letter-spacing:-.3px;
}
.spl-v{font-size:10px;color:rgba(233,196,106,.5);font-weight:500;letter-spacing:1px}
.spl-dots{display:flex;gap:8px}
.ld{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.15);
  animation:ldp 1.4s ease-in-out infinite;
}
.ld:nth-child(2){animation-delay:.2s}.ld:nth-child(3){animation-delay:.4s}
@keyframes ldp{
  0%,100%{background:rgba(255,255,255,.15);transform:scale(1)}
  50%{background:#52b788;transform:scale(1.3)}
}
.spl-lbl{
  font-size:11px;color:rgba(255,255,255,.35);
  margin-bottom:14px;font-weight:500;letter-spacing:.5px;
}
.spl-bar{
  width:140px;height:2px;
  background:rgba(255,255,255,.07);
  border-radius:2px;overflow:hidden;
}
.spl-fill{
  height:100%;
  background:linear-gradient(90deg,#2d6a4f,#52b788,#e9c46a);
  width:0%;transition:width .7s ease;
  border-radius:2px;
}

/* ── WELCOME TOAST (top) ── */
.welcome-toast{
  position:absolute;
  top:-90px;
  left:10px;right:10px;
  z-index:95;
  background:linear-gradient(135deg,rgba(26,58,46,.97),rgba(45,106,79,.97));
  border-radius:16px;
  padding:0;
  border:1px solid rgba(82,183,136,.35);
  box-shadow:0 8px 28px rgba(0,0,0,.35),0 2px 8px rgba(45,106,79,.3);
  display:flex;
  flex-direction:column;
  transition:top .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  overflow:hidden;
}
.welcome-toast.show{top:10px}
.wt-ico{font-size:22px;flex-shrink:0}
.wt-info{flex:1}
.wt-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.wt-sub{font-size:10px;color:rgba(255,255,255,.6)}
.wt-prog{height:2.5px;background:linear-gradient(90deg,#52b788,#e9c46a);border-radius:0;margin-top:0;transition:width linear}

/* ── NOTIFICATION TOAST (floating — for all events) ── */
.notif-toast{
  position:absolute;
  top:-90px;
  left:12px;
  right:12px;
  z-index:9999;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:top .38s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid transparent;
  opacity:0;
}
.notif-toast.show{top:10px;opacity:1;pointer-events:auto}
.notif-toast.nt-g{background:rgba(22,101,52,.92);border-color:rgba(74,222,128,.35)}
.notif-toast.nt-b{background:rgba(29,78,216,.92);border-color:rgba(96,165,250,.35)}
.notif-toast.nt-a{background:rgba(133,77,14,.92);border-color:rgba(233,196,106,.35)}
.notif-toast.nt-r{background:rgba(153,27,27,.92);border-color:rgba(252,165,165,.35)}
.notif-toast.nt-w{background:rgba(113,63,18,.92);border-color:rgba(251,191,36,.35)}
.nt-ico{font-size:16px;flex-shrink:0}
.nt-txt{flex:1}
.nt-title{font-size:11px;font-weight:500;color:#fff;margin-bottom:1px}
.nt-sub{font-size:9px;color:rgba(255,255,255,.6)}
.nt-prog{height:2px;background:rgba(255,255,255,.35);border-radius:2px;margin-top:4px;transition:width linear}

/* ── ONBOARD ── */
.onboard{position:absolute;inset:0;background:var(--bg);z-index:97;display:none;flex-direction:column}
.ob-bar{height:3px;background:var(--bs);flex-shrink:0}
.ob-bar-fill{height:100%;background:linear-gradient(90deg,#2d6a4f,#52b788);transition:width .4s}
.ob-body{flex:1;position:relative;overflow:hidden}
.obs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:14px 18px 0;opacity:0;transform:translateX(28px);transition:opacity .3s,transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.obs.act{opacity:1;transform:none;pointer-events:all}
.obs.ol{opacity:0;transform:translateX(-28px)}
.sl-art{width:175px;height:158px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;flex-shrink:0}
.a0{background:linear-gradient(135deg,#1a3a2e,#2d6a4f,#52b788)}
.a1{background:linear-gradient(135deg,#1e3a5f,#1d4ed8,#60a5fa)}
.a2{background:linear-gradient(135deg,#1e3a5f,#0f766e,#2dd4bf)}
.a3{background:linear-gradient(135deg,#451a03,#c77d22,#e9c46a)}
.a4{background:linear-gradient(135deg,#1a2e22,#166534,#4ade80)}
.sl-em{font-size:48px;display:block;margin-bottom:6px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.sl-bdg{display:inline-flex;align-items:center;padding:3px 9px;border-radius:9px;background:rgba(255,255,255,.15);font-size:9px;color:rgba(255,255,255,.9);border:0.5px solid rgba(255,255,255,.2)}
.sl-title{font-size:17px;font-weight:500;color:var(--tx);margin-bottom:6px;line-height:1.3;text-align:center}
.sl-desc{font-size:11px;color:var(--ts);line-height:1.7;margin-bottom:8px;text-align:center}
.sl-pts{display:flex;flex-direction:column;gap:5px;width:100%;text-align:right}
.sl-pt{display:flex;align-items:flex-start;gap:7px;padding:6px 9px;border-radius:8px;background:var(--bs);border:0.5px solid var(--bd);font-size:11px}
.sl-pi{font-size:12px;flex-shrink:0;margin-top:1px}
.sl-pd{color:var(--ts);line-height:1.5}
.sl-pd b{color:var(--tx)}
.ob-foot{padding:10px 18px 14px;flex-shrink:0;background:var(--bg)}
.ob-dots{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.od{width:7px;height:7px;border-radius:50%;background:var(--bd);transition:all .25s}
.od.act{background:#2d6a4f;width:20px;border-radius:4px}
.ob-btns{display:flex;gap:7px}
.ob-skip{padding:9px;flex:1;border:0.5px solid var(--bd);border-radius:10px;background:transparent;font-size:12px;color:var(--ts);cursor:pointer}
.ob-next{padding:9px;flex:2;border:none;border-radius:10px;background:#2d6a4f;font-size:12px;font-weight:500;color:#fff;cursor:pointer}
.ob-next.last{background:#e9c46a;color:#6d4c2a}

/* ── MAIN APP ── */

/* ── ONBOARD ── */
.onboard{position:absolute;inset:0;background:var(--bg);z-index:97;display:none;flex-direction:column}
.ob-bar{height:3px;background:var(--bs);flex-shrink:0}
.ob-bar-fill{height:100%;background:linear-gradient(90deg,#2d6a4f,#52b788);transition:width .4s}
.ob-body{flex:1;position:relative;overflow:hidden}
.obs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:14px 18px 0;opacity:0;transform:translateX(28px);transition:opacity .3s,transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.obs.act{opacity:1;transform:none;pointer-events:all}
.obs.ol{opacity:0;transform:translateX(-28px)}
.sl-art{width:175px;height:158px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;flex-shrink:0}
.a0{background:linear-gradient(135deg,#1a3a2e,#2d6a4f,#52b788)}
.a1{background:linear-gradient(135deg,#1e3a5f,#1d4ed8,#60a5fa)}
.a2{background:linear-gradient(135deg,#1e3a5f,#0f766e,#2dd4bf)}
.a3{background:linear-gradient(135deg,#451a03,#c77d22,#e9c46a)}
.a4{background:linear-gradient(135deg,#1a2e22,#166534,#4ade80)}
.sl-em{font-size:48px;display:block;margin-bottom:6px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.sl-bdg{display:inline-flex;align-items:center;padding:3px 9px;border-radius:9px;background:rgba(255,255,255,.15);font-size:9px;color:rgba(255,255,255,.9);border:0.5px solid rgba(255,255,255,.2)}
.sl-title{font-size:17px;font-weight:500;color:var(--tx);margin-bottom:6px;line-height:1.3;text-align:center}
.sl-desc{font-size:11px;color:var(--ts);line-height:1.7;margin-bottom:8px;text-align:center}
.sl-pts{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;text-align:right;margin:auto 0}
.sl-pt{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:linear-gradient(135deg,var(--bs),var(--bg));border:0.5px solid var(--bd);font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.5);position:relative;overflow:hidden}
.sl-pt::before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:linear-gradient(180deg,#2d6a4f,#e9c46a)}
.sl-pi{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2d6a4f,#52b788);border-radius:14px;box-shadow:0 6px 14px rgba(45,106,79,.28),inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.sl-pi svg{width:28px;height:28px;display:block}
.sl-pi.ic-globe{background:linear-gradient(135deg,#1e3a5f,#1d4ed8)}
.sl-pi.ic-star{background:linear-gradient(135deg,#b45309,#e9c46a);color:#fff}
.sl-pi.ic-chart{background:linear-gradient(135deg,#0f766e,#2dd4bf)}
.sl-pi.ic-yellow{background:linear-gradient(135deg,#b45309,#fbbf24)}
.sl-pi.ic-blue{background:linear-gradient(135deg,#1e3a5f,#60a5fa)}
.sl-pi.ic-check{background:linear-gradient(135deg,#166534,#4ade80)}
.sl-pi.ic-lock{background:linear-gradient(135deg,#1f1f1f,#525252)}
.sl-pi.ic-hand{background:linear-gradient(135deg,#c77d22,#e9c46a)}
.sl-pi.ic-castle{background:linear-gradient(135deg,#451a03,#c77d22)}
.sl-pd{color:var(--tx);line-height:1.5;font-size:14px;font-weight:500;flex:1}
.sl-pd b{color:var(--tx);font-weight:700}
.ob-foot{padding:10px 18px 14px;flex-shrink:0;background:var(--bg)}
.ob-dots{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.od{width:7px;height:7px;border-radius:50%;background:var(--bd);transition:all .25s}
.od.act{background:#2d6a4f;width:20px;border-radius:4px}
.ob-btns{display:flex;gap:7px}
.ob-skip{padding:9px;flex:1;border:0.5px solid var(--bd);border-radius:10px;background:transparent;font-size:12px;color:var(--ts);cursor:pointer}
.ob-next{padding:9px;flex:2;border:none;border-radius:10px;background:#2d6a4f;font-size:12px;font-weight:500;color:#fff;cursor:pointer}
.ob-next.last{background:#e9c46a;color:#6d4c2a}

.app{flex:1;display:none;flex-direction:column;overflow:hidden}
.app.show{display:flex}
.anav{background:#2d6a4f;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0}
.anav-brand{display:flex;align-items:center;gap:6px;color:#e9c46a;font-size:13px;font-weight:500}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-av{width:24px;height:24px;border-radius:50%;background:#e9c46a;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:#6d4c2a}
.lbtn{background:rgba(255,255,255,.12);border:0.5px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;padding:2px 8px;font-size:9px;cursor:pointer}

/* Theme Toggle Button */
.theme-toggle{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:0.5px solid rgba(255,255,255,.2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
:root[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
}
.theme-toggle:hover{
  background:rgba(255,255,255,.2);
  transform:scale(1.05);
}
.theme-toggle:active{
  transform:scale(0.95);
}
.theme-icon{
  width:28px;
  height:28px;
  position:relative;
}
.theme-icon svg{
  width:28px;
  height:28px;
}
.sun-icon,
.moon-icon{
  /* Fast opacity transitions */
  transition:opacity 0.15s ease-in-out,
             transform 0.2s ease-in-out;
  transform-origin:center;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sun-icon{
  stroke:#fbbf24;
  opacity:0;
  transform:scale(0.3) rotate(-45deg);
  pointer-events:none;
}
.moon-icon{
  position:absolute;
  top:0;
  left:0;
  fill:#e0e7ff;
  stroke:#e0e7ff;
  opacity:1;
  transform:scale(1) rotate(0deg);
  pointer-events:all;
}

/* Dark Mode - الشمس تظهر */
:root[data-theme="dark"] .sun-icon{
  opacity:1;
  transform:scale(1) rotate(0deg);
  pointer-events:all;
}
:root[data-theme="dark"] .moon-icon{
  opacity:0;
  transform:scale(0.3) rotate(45deg);
  pointer-events:none;
}

/* Light Mode explicit - القمر يظهر */
:root[data-theme="light"] .sun-icon{
  opacity:0;
  transform:scale(0.3) rotate(-45deg);
  pointer-events:none;
}
:root[data-theme="light"] .moon-icon{
  opacity:1;
  transform:scale(1) rotate(0deg);
  pointer-events:all;
}

/* Language Button - تحسين التباين */
.lbtn{
  background:rgba(255,255,255,.12);
  border:0.5px solid rgba(255,255,255,.2);
  color:#fff;
  border-radius:6px;
  padding:2px 8px;
  font-size:9px;
  cursor:pointer;
  font-weight:500;
  transition:all 0.2s;
}
:root[data-theme="dark"] .lbtn{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  color:#f0f0f0;
}
.lbtn:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.35);
}

/* TRADE ROOM - CONFIRMATION STATES */
.tr-ready-section{background:var(--bs);border-radius:10px;padding:12px;margin-bottom:12px}
.tr-ready-title{font-size:11px;color:var(--ts);margin-bottom:8px;text-align:center}
.tr-ready-btn{width:100%;padding:10px;border-radius:8px;background:#2d6a4f;border:none;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}
.tr-ready-btn:hover{background:#1e4d38}
.tr-ready-btn:disabled{opacity:.5;cursor:not-allowed}
.tr-cancel-btn{width:100%;padding:10px;border-radius:8px;background:#e63946;border:none;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}
.tr-cancel-btn:hover{background:#c62e39}
.tr-cancel-btn:disabled{opacity:.5;cursor:not-allowed}
.tr-waiting{text-align:center;padding:12px;background:#fffbe6;border:0.5px solid #e9c46a;border-radius:8px;font-size:11px;color:#92400e}
.tr-info-locked{opacity:.3;pointer-events:none;user-select:none;filter:blur(3px)}

/* SUCCESS OVERLAY */
.success-overlay{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#1a3a2e;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
.success-overlay.show{opacity:1;pointer-events:all}
.success-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;max-width:320px;width:100%;padding:0 20px;text-align:center;
}
.success-check{
  width:80px;height:80px;border-radius:50%;
  background:#2d6a4f;border:3px solid #52b788;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin-bottom:18px;
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity:0;
}
@keyframes popIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1000}
.conf{position:absolute;top:-10px;width:7px;height:14px;border-radius:2px;animation:fall linear both}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(-20px);opacity:0}}
.success-title{
  font-size:22px;font-weight:500;color:#1a2e22;
  background:#4ade80;border-radius:10px;
  padding:8px 22px;margin-bottom:10px;
  animation:slideUp .4s .3s both;
  letter-spacing:.3px;
}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.success-subtitle{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:20px;animation:slideUp .4s .5s both;line-height:1.6}
.success-details{
  background:rgba(255,255,255,.07);border-radius:10px;
  padding:10px 16px;width:100%;margin-bottom:18px;
  animation:slideUp .4s .6s both;
}
.sd-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;border-bottom:0.5px solid rgba(255,255,255,.08)}
.sd-row:last-child{border-bottom:none}
.sd-label{color:rgba(255,255,255,.45)}
.sd-val{color:rgba(255,255,255,.85);font-family:monospace;font-size:10px}
.sd-val.green{color:#4ade80;font-family:var(--font-sans);font-size:11px;font-weight:500}
.success-close{
  background:rgba(255,255,255,.1);border:0.5px solid rgba(255,255,255,.2);
  color:#fff;border-radius:9px;padding:9px 28px;font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--font-sans);
  animation:slideUp .4s .8s both;
}
.success-close:hover{background:rgba(255,255,255,.18)}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf{position:absolute;top:-10px;width:7px;height:14px;border-radius:2px;animation:fall linear both}
@keyframes fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* REPORT OVERLAY */
.report-overlay{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#1a1a1a;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
.report-overlay.show{opacity:1;pointer-events:all}
.report-check{
  width:80px;height:80px;border-radius:50%;
  background:#e63946;border:3px solid #fca5a5;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin-bottom:18px;
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity:0;
}
.report-title{
  font-size:22px;font-weight:500;color:#fff;
  background:#e63946;border-radius:10px;
  padding:8px 22px;margin-bottom:10px;
  animation:slideUp .4s .3s both;
}
.report-subtitle{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:20px;animation:slideUp .4s .5s both;line-height:1.6}

/* PAGES */
.pages{flex:1;overflow:hidden;position:relative}
.page{position:absolute;inset:0;overflow-y:auto;padding-bottom:60px;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease,transform .15s ease;overscroll-behavior-y:contain}
.page.act{opacity:1;transform:none;pointer-events:auto;content-visibility:auto}
/* مخزوني يحتاج مساحة للزر المستطيل */
#pg-inv{padding-bottom:125px}
#pg-union{display:flex;flex-direction:column;padding-bottom:0;overflow:hidden}
/* ✅ إزالة 300ms tap delay على Mobile */
button,a,.tp,.ni,.fbt{touch-action:manipulation}
.page.act{opacity:1;transform:none;pointer-events:all}

/* PROFILE */
.prof-hdr{background:linear-gradient(135deg,#1a3a2e,#2d6a4f);padding:20px 14px 16px;position:relative;overflow:hidden;text-align:center}
.prof-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 110% -10%,rgba(233,196,106,.15),transparent 55%)}
.prof-av{width:62px;height:62px;border-radius:50%;background:#e9c46a;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#6d4c2a;margin:0 auto 8px;position:relative;z-index:1;border:3px solid rgba(255,255,255,.25);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.prof-nm{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;position:relative;z-index:1}
.prof-bdg{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.12);border:0.5px solid rgba(255,255,255,.2);border-radius:10px;padding:2px 9px;font-size:10px;color:rgba(255,255,255,.8);margin-bottom:9px;position:relative;z-index:1}
.prof-stars{display:flex;gap:2px;justify-content:center;margin-bottom:2px}
.prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 13px}
.pstat{background:var(--bs);border:1px solid var(--bd);border-radius:12px;padding:12px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.pstat .pn{font-size:22px;font-weight:700;color:#2d6a4f}
.pstat .pl{font-size:10px;color:var(--ts);margin-top:3px}
.prof-card{background:var(--bg);border:0.5px solid var(--bd);border-radius:var(--border-radius-lg);padding:9px 12px;margin:0 13px 9px}
.pcr{display:flex;justify-content:space-between;padding:5px 0;font-size:11px;border-bottom:0.5px solid var(--bd)}
.pcr:last-child{border-bottom:none}

/* MARKET */
.mkt-hdr{background:#2d6a4f;position:relative;overflow:hidden}
.mkt-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 110% -10%,rgba(233,196,106,.15),transparent 55%)}
.live-deal{background:rgba(255,255,255,.07);border:0.5px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 10px;margin:0 12px 8px;display:flex;align-items:center;gap:7px;overflow:hidden;position:relative}
.live-deal::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);animation:shimmer 3s infinite linear;pointer-events:none}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.live-deal::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);animation:shm 3s infinite linear}
@keyframes shm{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ld-pulse{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:plse 1.5s infinite}
@keyframes plse{0%,100%{opacity:1}50%{opacity:.3}}
.ld-txt{flex:1;font-size:10px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.ld-time{font-size:9px;color:rgba(255,255,255,.4);flex-shrink:0}
.hstats{display:flex;gap:7px;padding:0 12px 8px;align-items:center}
.sp{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:18px;font-size:10px;font-weight:500}
.sp-g{background:rgba(74,222,128,.15);border:0.5px solid rgba(74,222,128,.25);color:#d8f3dc}
.sp-b{background:rgba(96,165,250,.15);border:0.5px solid rgba(96,165,250,.25);color:#bfdbfe}
/* NOTIF BELL BUTTON in header */
.notif-bell-btn{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .2s;
}
.notif-bell-btn:hover{background:rgba(255,255,255,.18)}
.notif-bell-btn:active{transform:scale(.9)}
.notif-bell-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.bell-dot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:#e63946;border:2px solid #2d6a4f;
  display:none;
}
.bell-dot.show{display:block;animation:bellPulse 2s ease-in-out infinite}
@keyframes bellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-8deg)}}
.notif-bell-btn.has-notif svg{animation:bellRing 1s ease-in-out}
.sbar{background:var(--bg);border-bottom:0.5px solid var(--bd);padding:7px 12px;display:flex;flex-direction:column;gap:6px}
.sr{display:flex;gap:5px}
.sbox{flex:1;display:flex;align-items:center;gap:5px;background:var(--bs);border:0.5px solid var(--bd);border-radius:8px;padding:5px 8px}
.sbox input{flex:1;border:none;background:transparent;outline:none;font-size:11px;color:var(--tx)}
.fbt{display:flex;align-items:center;gap:3px;padding:5px 9px;border:0.5px solid var(--bd);border-radius:8px;background:var(--bg);font-size:11px;cursor:pointer;color:var(--ts);white-space:nowrap}
.fbt.on{border-color:#3b82f6;background:#eff6ff;color:#1e40af}
.tp-row{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tp-row::-webkit-scrollbar{display:none}
.tp{padding:5px 9px;border-radius:18px;font-size:9.5px;font-weight:600;border:1.5px solid var(--bd);background:var(--bg);cursor:pointer;color:var(--ts);transition:all .18s;white-space:nowrap;flex-shrink:0;touch-action:manipulation;line-height:1.2}
.tp:hover{border-color:#2d6a4f;color:#2d6a4f}
.tp.act{background:#2d6a4f;border-color:#2d6a4f;color:#fff;box-shadow:0 3px 10px rgba(45,106,79,.3)}

/* زر العملات */
.tp.tp-money{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:transparent;color:#fff}
.tp.tp-money.act{background:linear-gradient(135deg,#92400e,#d97706);box-shadow:0 3px 12px rgba(180,83,9,.4)}
.tp.tp-money:not(.act){opacity:.85}
.tp.tp-money:hover{opacity:1}

/* زر النادرة */
.tp.tp-rare{background:linear-gradient(135deg,#5b21b6,#a855f7);border-color:transparent;color:#fff}
.tp.tp-rare.act{background:linear-gradient(135deg,#4c1d95,#7c3aed);box-shadow:0 3px 12px rgba(124,58,237,.45)}
.tp.tp-rare:not(.act){opacity:.85}
.tp.tp-rare:hover{opacity:1}

/* ✨ animation عند اختيار النادرة */
@keyframes rarePulse{0%,100%{box-shadow:0 3px 12px rgba(124,58,237,.45)}50%{box-shadow:0 3px 20px rgba(168,85,247,.7)}}
.tp.tp-rare.act{animation:rarePulse 2s ease-in-out infinite}

/* بطاقة العملات */
.tcard.money-card{border-color:rgba(245,158,11,.4);background:linear-gradient(160deg,rgba(245,158,11,.06),transparent)}
:root[data-theme="dark"] .tcard.money-card{border-color:rgba(245,158,11,.35);background:rgba(180,83,9,.08)}
.money-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:rgba(180,83,9,.12);color:#b45309;font-size:9px;font-weight:700;border:1px solid rgba(180,83,9,.2)}

/* بطاقة النادرة */
.tcard.rare-card{border-color:rgba(139,92,246,.5);position:relative;overflow:hidden}

:root[data-theme="dark"] .tcard.rare-card{border-color:rgba(167,139,250,.45);background:rgba(76,29,149,.07)}
.rare-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:linear-gradient(135deg,rgba(91,33,182,.15),rgba(168,85,247,.12));color:#7c3aed;font-size:9px;font-weight:700;border:1px solid rgba(124,58,237,.25)}
.flt-drawer{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--bg);border-bottom:1px solid var(--bd)}
.flt-sec{padding:8px 12px 4px}
.flt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.flt-foot{display:flex;gap:8px;padding:8px 14px 12px;border-top:1px solid var(--bd);background:var(--bg)}
.flt-foot button{flex:1;padding:10px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;border:none}
.af-row{display:flex;gap:4px;flex-wrap:wrap;padding:5px 12px 0}
.af-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:18px;font-size:9px;font-weight:500;cursor:pointer}
.af-w{background:#fffbe6;border:0.5px solid #e9c46a;color:#92400e}
.af-o{background:#eff6ff;border:0.5px solid #3b82f6;color:#1e40af}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 12px}
.tcard{background:var(--bs);border-radius:11px;border:1.5px solid var(--bd);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .3s}
.tcard:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.08);border-color:#2d6a4f}
.tc-offer{border-color:rgba(82,183,136,.3)}
.tc-offer .tc-acc{background:linear-gradient(90deg,#2d6a4f,#52b788)}
.tc-request{border-color:rgba(96,165,250,.3)}
.tc-request .tc-acc{background:linear-gradient(90deg,#1d4ed8,#60a5fa)}
.tc-expiring{border-color:rgba(233,196,106,.6);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{border-color:rgba(233,196,106,.6)}50%{border-color:rgba(233,196,106,.3)}}
.tc-acc{height:2.5px}
.tc-tag-row{display:flex;justify-content:space-between;align-items:center;padding:5px 7px 2px}
.tc-tag{display:flex;align-items:center;gap:2px;font-size:9px;font-weight:500;padding:2px 5px;border-radius:7px}
.tc-time{white-space:nowrap;font-size:9px;color:var(--ts)}
.ttg{background:rgba(96,165,250,.12);color:#1e40af}
.ttb{background:rgba(82,183,136,.12);color:#166534}
.tc-main{padding:2px 7px 4px;text-align:center}
.tc-em{font-size:24px;display:block;margin-bottom:2px}
.tc-name{font-size:10px;font-weight:600;color:var(--tx);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-qty{font-size:9px;color:var(--ts);margin-bottom:3px}
.tc-ex{background:rgba(0,0,0,.06);border-radius:6px;padding:6px 8px;margin:0 6px 5px}
.tc-ex .xl{font-size:9px;color:var(--ts);margin-bottom:2px}
.tc-ex .xv{font-size:11px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:3px}
.tc-user-row{display:flex;align-items:center;gap:3px;padding:0 7px 4px}
.muav{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:500;flex-shrink:0}
.tc-un{font-size:9px;color:var(--tx);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strs{display:flex;gap:1px;flex-shrink:0}
.star{width:7px;height:7px}
.done-n{font-size:8px;color:var(--ts);background:var(--bs);border-radius:7px;padding:1px 3px;border:0.5px solid var(--bd)}
.tc-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 6px 6px}
.btn-acc{padding:5px 0;border-radius:7px;background:#2d6a4f;border:none;color:#fff;font-size:9px;font-weight:500;cursor:pointer;width:100%;transition:all .2s}
/* Dark mode - بطاقات السوق */
:root[data-theme="dark"] .tcard{background:#242424;border-color:#383838}
:root[data-theme="dark"] .tc-ex{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .tc-ex .xv{color:#f0f0f0}
:root[data-theme="dark"] .tc-name{color:#f0f0f0}
:root[data-theme="dark"] .tc-un{color:#c0c0c0}
/* Light mode - تليين الأبيض */
:root[data-theme="light"] .tcard{background:#f5f7f6;border-color:#d5ddd7}
:root[data-theme="light"] .tc-ex{background:rgba(0,0,0,.05)}
.btn-acc:hover{background:#1f4c3a;transform:translateY(-1px);box-shadow:0 4px 8px rgba(45,106,79,0.3)}
.btn-acc:hover{background:#1e4d38}
.btn-alt{padding:5px 0;border-radius:7px;background:#e63946;border:none;color:#fff;font-size:9px;font-weight:500;cursor:pointer;width:100%;transition:all .2s}
.btn-alt:hover{background:#c52a35;transform:translateY(-1px);box-shadow:0 4px 8px rgba(230,57,70,0.3)}
.btn-alt:hover{background:#c62e39}

/* INVENTORY */
.inv-hdr{background:#2d6a4f;padding:11px 13px 0;position:relative;overflow:hidden}
.inv-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 110% -10%,rgba(233,196,106,.15),transparent 55%)}
.inv-stats{display:flex;gap:6px;margin-bottom:8px;position:relative;z-index:1}
.inv-sc{flex:1;background:rgba(255,255,255,.12);border:0.5px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 7px;min-width:0;text-align:center}
.inv-sc .sn{font-size:20px;font-weight:700;color:#fff;display:block;line-height:1.1}
.inv-sc .sl{font-size:9.5px;color:rgba(255,255,255,.7);margin-top:3px;display:block;font-weight:500}
.inv-sc .sd{font-size:8px;font-weight:500;color:#4ade80;margin-top:2px}
.inv-sp{background:rgba(255,255,255,.07);border:0.5px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 10px;margin-bottom:8px;position:relative;z-index:1}
.isp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.isp-stars{display:flex;gap:2px}
.isp-rem{font-size:9px;color:#e9c46a;font-weight:500}
.isp-bar{height:4px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.isp-fill{height:100%;background:linear-gradient(90deg,#52b788,#e9c46a);border-radius:10px}
.inv-mode{display:flex;gap:3px;background:rgba(0,0,0,.15);border-radius:8px;padding:3px;position:relative;z-index:1}
.im{flex:1;padding:5px;border:none;border-radius:6px;background:transparent;font-size:10px;cursor:pointer;color:rgba(255,255,255,.5);font-weight:500;transition:all .2s}
.im.iw{background:#3b82f6;color:#fff}
.im.io{background:#e9c46a;color:#6d4c2a}
.inv-spc{height:8px}
.inv-body{padding:9px 12px;position:relative}
.inv-filter{background:var(--bs);padding:10px;border-radius:8px;margin-bottom:8px;border:1px solid var(--bd)}
.inv-filter-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:8px;background:var(--g);color:#fff;border-radius:6px;margin-bottom:8px;font-size:11px;font-weight:600}
.inv-filter-toggle:active{opacity:0.9}
.inv-filter-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.inv-filter-content.open{max-height:300px}
.inv-filter-label{font-size:10px;color:var(--ts);margin-bottom:5px;font-weight:500}
.inv-filter-row{display:flex;gap:6px;align-items:center}
.inv-filter-input{flex:1;padding:8px;border:1.5px solid var(--g);border-radius:6px;font-size:13px;text-align:center;font-weight:600;color:var(--g);background:var(--bg)}
.inv-filter-btn{padding:8px 14px;background:var(--g);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s}
.inv-filter-btn:active{transform:scale(0.95);opacity:0.9}
.inv-filter-clear{padding:8px 14px;background:var(--ts);color:#fff;border:none;border-radius:6px;font-size:11px;cursor:pointer}
.inv-filter-info{margin-top:6px;padding:6px;background:var(--gp);border-radius:5px;font-size:10px;color:var(--g);text-align:center;font-weight:500;border:1px solid var(--gl)}
.inv-filter-stats{display:flex;gap:8px;margin-top:6px;font-size:10px}
.inv-stat{flex:1;background:var(--bg);padding:6px;border-radius:5px;text-align:center;border:1px solid var(--bd)}
.inv-stat-num{font-size:15px;font-weight:700;color:var(--g);display:block}
.inv-stat-lbl{color:var(--ts);margin-top:2px}
.ii.filtered-out{opacity:0.25;filter:grayscale(100%);pointer-events:none;position:relative}
.ii.filtered-out::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;opacity:0.6}

/* زر إضافة عرض عائم - أصغر ومتناسق */
.fab-add-offer{
  position:absolute;
  right:-1px;
  top:calc(100% - 140px);
  width:38px;
  height:56px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(160deg,#2d6a4f,#52b788);
  border:none;
  border-left:2px solid rgba(82,183,136,.4);
  color:#fff;
  box-shadow:-3px 0 14px rgba(45,106,79,.4);
  cursor:grab;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  z-index:20;
  transition:box-shadow .2s;
  touch-action:none;
  user-select:none;
}
.fab-add-offer:active:not(.dragging){
  width:34px;
  opacity:.85;
  transition:width .1s,opacity .1s;
}
.fab-add-offer.dragging{
  cursor:grabbing;
  opacity:.92;
  transition:none;
  box-shadow:-5px 0 22px rgba(45,106,79,.6);
  width:42px;
}
.fab-add-offer svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  pointer-events:none;
}
.fab-add-offer .fab-plus-text{
  font-size:8px;
  font-weight:700;
  color:rgba(255,255,255,.75);
  letter-spacing:.3px;
  line-height:1;
  pointer-events:none;
}
.fab-add-offer.show{
  display:flex;
}
.fab-add-offer.tapped{
  animation: fabTap .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fabTap{
  0%  { transform:scale(1); }
  40% { transform:scale(.82) translateX(4px); }
  100%{ transform:scale(1); }
}

/* ══ QUICK OFFER - احترافي مع دعم الليل ══ */
/* ══════════════════════════════════════
   QUICK OFFER MODAL — تصميم احترافي
══════════════════════════════════════ */
#ov-quick-offer .modal{
  max-width:100%!important;width:100%;max-height:94vh;
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;padding:0!important;
  border-radius:28px 28px 0 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

/* ── Header ── */
.qo-header{
  flex-shrink:0;
  padding:0 16px 14px;
  background:var(--bg);
  position:relative;
}
.qo-handle{
  width:40px;height:4px;
  background:var(--bd);border-radius:2px;
  margin:10px auto 14px;
}
.qo-title{
  font-size:17px;font-weight:800;
  color:var(--tx);margin-bottom:2px;
  text-align:center;letter-spacing:-.3px;
}
.qo-sub{
  font-size:11px;color:var(--ts);
  margin-bottom:14px;text-align:center;
}

/* ── نوع العرض ── */
.qo-type-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;margin-bottom:14px;
}
.quick-type{
  height:58px;border:1.5px solid var(--bd);
  border-radius:16px;background:var(--bs);
  cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  position:relative;overflow:hidden;
}
.quick-type::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(45,106,79,.0),rgba(82,183,136,.0));
  transition:background .2s;
}
.quick-type.active{
  border-color:#2d6a4f;border-width:2px;
  background:rgba(45,106,79,.08);
  transform:scale(1.04);
  box-shadow:0 4px 16px rgba(45,106,79,.2);
}
.quick-type.active::after{
  background:linear-gradient(135deg,rgba(45,106,79,.06),rgba(82,183,136,.04));
}
:root[data-theme="dark"] .quick-type{background:#1e1e1e;border-color:#2e2e2e}
:root[data-theme="dark"] .quick-type.active{background:rgba(82,183,136,.12);border-color:#52b788;box-shadow:0 4px 16px rgba(82,183,136,.15)}
.quick-type:active{transform:scale(.93)}
.qt-ico{font-size:20px;line-height:1}
.qt-lbl{font-size:10px;font-weight:700;color:var(--tx);line-height:1}
:root[data-theme="dark"] .qt-lbl{color:#ccc}

/* ── بحث ── */
.quick-search-wrapper{position:relative}
.quick-search{
  width:100%;height:42px;
  padding:0 14px 0 38px;
  border:1.5px solid var(--bd);border-radius:14px;
  font-size:13px;background:var(--bs);color:var(--tx);
  transition:all .2s;box-sizing:border-box;
}
.quick-search:focus{
  outline:none;border-color:#2d6a4f;
  box-shadow:0 0 0 3px rgba(45,106,79,.12);
  background:var(--bg);
}
.quick-search-icon{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);font-size:15px;
  color:var(--ts);pointer-events:none;
}
:root[data-theme="dark"] .quick-search{background:#1e1e1e;border-color:#2e2e2e;color:#eee}

/* ── Body ── */
.qo-body{flex:1;overflow-y:auto;padding:14px 16px;min-height:0}
.qo-body::-webkit-scrollbar{width:3px}
.qo-body::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}

/* ── Section label ── */
.quick-section{margin-bottom:6px}
.quick-section-label{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--ts);
  text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:10px;
  padding:0 2px;
}
.qs-selected{
  font-size:12px;font-weight:700;
  color:#52b788;margin-right:auto;
  background:rgba(82,183,136,.1);
  padding:2px 8px;border-radius:6px;
}

/* ── Item Selector ── */
.quick-item-selector{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:8px;padding:12px;
  background:var(--bs);border-radius:16px;
  border:1px solid var(--bd);
  max-height:200px;overflow-y:auto;
  margin-bottom:12px;
}
:root[data-theme="dark"] .quick-item-selector{background:#1a1a1a;border-color:#2a2a2a}
.quick-item-selector::-webkit-scrollbar{width:3px}
.quick-item-selector::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}

.quick-item{
  height:74px;width:100%;
  border:1.5px solid var(--bd);border-radius:14px;
  background:var(--bg);cursor:pointer;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;padding:6px 4px;box-sizing:border-box;
}
:root[data-theme="dark"] .quick-item{background:#222;border-color:#333}
.quick-item:active{transform:scale(.88)}
.quick-item:hover{border-color:rgba(45,106,79,.4);background:rgba(45,106,79,.04)}
.quick-item.selected{
  border-color:#2d6a4f;border-width:2px;
  background:rgba(45,106,79,.1);
  transform:scale(1.04);
  box-shadow:0 4px 14px rgba(45,106,79,.2);
}
:root[data-theme="dark"] .quick-item.selected{
  background:rgba(82,183,136,.12);
  border-color:#52b788;
  box-shadow:0 4px 14px rgba(82,183,136,.15);
}
.quick-item.selected::after{
  content:"✓";
  position:absolute;top:4px;right:4px;
  width:16px;height:16px;
  background:linear-gradient(135deg,#2d6a4f,#52b788);
  color:#fff;border-radius:50%;
  font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(45,106,79,.3);
}
.qi-emoji{font-size:24px;line-height:1;flex-shrink:0}
.qi-name{
  font-size:9px;font-weight:700;
  color:var(--tx);text-align:center;line-height:1.2;
  width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:0 3px;
}
:root[data-theme="dark"] .qi-name{color:#ccc}

/* ── Qty Row ── */
.qo-qty-row{display:flex;gap:6px;align-items:center;margin:10px 0}
.qo-qty-row .quick-qty-input{flex:1;min-width:0}
.qo-qty-btns{display:flex;gap:5px;flex-shrink:0}
.qo-qty-btn{
  height:40px;min-width:38px;padding:0 10px;
  border-radius:12px;border:1.5px solid var(--bd);
  background:var(--bs);color:var(--tx);
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.qo-qty-btn:active{transform:scale(.88)}
.qo-qty-all{
  border-color:#2d6a4f!important;
  background:linear-gradient(135deg,#2d6a4f,#52b788)!important;
  color:#fff!important;box-shadow:0 3px 10px rgba(45,106,79,.3)!important;
}
:root[data-theme="dark"] .qo-qty-btn{background:#1e1e1e;border-color:#2e2e2e;color:#ddd}
.qo-qty-info{font-size:10px;color:var(--ts);min-height:14px;margin-bottom:2px;padding:0 2px}

.quick-qty-input{
  height:42px;padding:0 12px;
  border:1.5px solid var(--bd);border-radius:14px;
  font-size:15px;font-weight:800;
  background:var(--bs);color:var(--tx);
  direction:ltr;text-align:center;box-sizing:border-box;
  transition:all .2s;
}
.quick-qty-input:focus{
  outline:none;border-color:#2d6a4f;
  box-shadow:0 0 0 3px rgba(45,106,79,.12);
}
:root[data-theme="dark"] .quick-qty-input{background:#1e1e1e;border-color:#2e2e2e;color:#f0f0f0}

/* ── Buttons ── */
.qo-next-btn{
  width:100%;height:44px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#2d6a4f,#52b788);
  color:#fff;font-size:14px;font-weight:800;cursor:pointer;
  margin-top:10px;transition:all .2s;
  box-shadow:0 4px 16px rgba(45,106,79,.3);
  letter-spacing:.2px;
}
.qo-next-btn:active{opacity:.85;transform:scale(.98)}
.qo-back-btn{
  width:100%;height:40px;border-radius:12px;
  border:1.5px solid var(--bd);background:var(--bs);
  color:var(--tx);font-size:12px;font-weight:600;
  cursor:pointer;margin-bottom:12px;transition:all .15s;
}
.qo-back-btn:active{opacity:.8}
:root[data-theme="dark"] .qo-back-btn{background:#1e1e1e;border-color:#2e2e2e;color:#ccc}

/* ── Divider ── */
.quick-divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 0;color:var(--ts);font-size:11px;font-weight:700;
}
.quick-divider::before,.quick-divider::after{
  content:"";flex:1;height:1px;background:var(--bd);
}

/* ── Footer ── */
.quick-footer{
  flex-shrink:0;padding:12px 16px 16px;
  border-top:1px solid var(--bd);background:var(--bg);
}

.inv-srch{width:100%;padding:6px 9px;border:0.5px solid var(--bd);border-radius:8px;font-size:11px;background:var(--bg);color:var(--tx);outline:none;margin-bottom:7px}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:9px}
.ii{
  background:var(--bs);
  border-radius:14px;
  padding:9px 4px 7px;
  text-align:center;
  border:1.5px solid var(--bd);
  cursor:pointer;
  position:relative;
  transition:all .18s;
  user-select:none;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.ii:active{transform:scale(.91)}
.ii .ie{font-size:24px;display:block;margin-bottom:4px;line-height:1.1}
.ii .in{font-size:9.5px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;display:block;max-width:100%}
.ii .iq{font-size:9px;font-weight:700;color:#fff;background:#2d6a4f;border-radius:20px;padding:2px 8px;display:inline-block;margin-top:4px}
.ii.has{border-color:#52b788;background:linear-gradient(145deg,var(--bs),rgba(82,183,136,.1))}
:root[data-theme="dark"] .ii{background:#252525;border-color:#3a3a3a}
:root[data-theme="dark"] .ii.has{background:linear-gradient(145deg,#252525,rgba(82,183,136,.14));border-color:#52b788}
:root[data-theme="dark"] .ii .iq{background:#2d6a4f}
:root[data-theme="light"] .ii{background:#f7faf8;border-color:#dce8df}
:root[data-theme="light"] .ii.has{background:linear-gradient(145deg,#f0faf5,#e6f5ec);border-color:#52b788}
.sel-d{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;opacity:0}
.ii.sw .sel-d{background:#52b788;opacity:1}
.ii.so .sel-d{background:#3b82f6;opacity:1}
.ii.has{border-color:#52b788;background:var(--gp)}
.ii.sw{border-color:#52b788;background:#f0fdf4}
.ii.so{border-color:#3b82f6;background:#f0f7ff}

/* UNION */
.union-hdr{background:linear-gradient(135deg,#1a3a2e,#2d6a4f);padding:22px 16px 18px;position:relative;overflow:hidden;text-align:center}
.union-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 110% -10%,rgba(233,196,106,.15),transparent 55%)}
.uc-card{background:var(--bs);border:1px solid var(--bd);border-radius:18px;padding:14px;margin:10px 12px 8px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
:root[data-theme="dark"] .uc-card{background:#1e1e1e;border-color:#303030}
.uc-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.uc-img{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,#166534,#22c55e);flex-shrink:0;box-shadow:0 4px 10px rgba(34,197,94,.25)}
.uc-nm{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:3px;line-height:1.2}
.uc-tg{font-size:10px;color:var(--ts);line-height:1.3;margin-bottom:4px}
.uc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;width:100%}
.uc-stat{border-radius:12px;padding:12px;text-align:center;border:1px solid var(--bd);width:100%;box-sizing:border-box}
.uc-btns{display:flex;gap:8px}
.ucb{flex:1;padding:11px 6px;border-radius:14px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:all .18s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px}
.ucb:active{transform:scale(.93)}
.ucb-g{background:linear-gradient(135deg,#166534,#22c55e);color:#fff;border:none;box-shadow:0 4px 12px rgba(34,197,94,.3)}
.ucb-g:hover{box-shadow:0 6px 16px rgba(34,197,94,.4)}
.ucb-a{background:linear-gradient(135deg,#854d0e,#e9c46a);color:#fff;border:none;box-shadow:0 4px 12px rgba(233,196,106,.3)}
.ucb-a:hover{box-shadow:0 6px 16px rgba(233,196,106,.4)}
.ucb-r{background:linear-gradient(135deg,#7f1d1d,#ef4444);color:#fff;border:none;box-shadow:0 4px 12px rgba(239,68,68,.25)}
.ucb-r:hover{box-shadow:0 6px 16px rgba(239,68,68,.35)}
.ml-wrap{background:var(--bg);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.05)}
/* في وضع المحادثة، يملأ المساحة */
.ml-wrap.in-chat{border-radius:0;border:none;flex:1;display:flex;flex-direction:column;margin:0;box-shadow:none}

/* ── Chat Mode: الشاشة كاملة للمحادثة ── */
#pg-union.chat-mode{overflow:hidden!important}
#pg-union.chat-mode .union-hdr,
#pg-union.chat-mode .uc-card,
#pg-union.chat-mode .union-tabs{display:none!important}
#pg-union.chat-mode .ml-wrap{
  position:absolute;inset:0;
  margin:0!important;border-radius:0!important;
  border:none!important;box-shadow:none!important;
  display:flex;flex-direction:column;overflow:hidden;
  z-index:10;
}
#pg-union.chat-mode #ml-body{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}
#pg-union.chat-mode #ml-body > div{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}
.ml-hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--bd)}
.ml-hdr span{font-size:12px;font-weight:600;color:var(--tx)}
.ml-cnt{font-size:9px;color:var(--ts);background:var(--bs);padding:2px 7px;border-radius:9px;border:1px solid var(--bd)}
.mr{display:flex;align-items:center;gap:6px;padding:7px 11px;border-bottom:0.5px solid var(--bd)}
.mr:last-child{border-bottom:none}
.mr-rk{font-size:10px;width:16px;text-align:center;flex-shrink:0;color:var(--ts)}
.mr-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;flex-shrink:0;position:relative}
.mr-av.on::after{content:'';position:absolute;bottom:0;right:0;width:6px;height:6px;border-radius:50%;background:#4ade80;border:1.5px solid var(--bg)}
.mr-nm{flex:1;font-size:10px;font-weight:500;color:var(--tx)}
.mr-bdg{font-size:8px;padding:1px 5px;border-radius:6px;font-weight:500}
.mrb-l{background:#fff3cd;color:#854f0b;border:0.5px solid #e9c46a}
.mrb-o{background:#e6f1fb;color:#1e40af;border:0.5px solid #93c5fd}

/* INBOX PAGE */
.inbox-hdr{background:linear-gradient(135deg,#1a3a2e,#2d6a4f);padding:22px 16px 14px;position:relative;overflow:hidden}
.inbox-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 110% -10%,rgba(233,196,106,.18),transparent 55%)}
.inbox-tabs-row{display:flex;gap:4px;background:rgba(0,0,0,.2);border-radius:12px;padding:4px;margin:12px 16px 0}
.it{flex:1;padding:8px 4px;border-radius:9px;border:none;background:transparent;color:rgba(255,255,255,.55);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;font-family:var(--font-sans)}
.it.act{background:rgba(255,255,255,.15);color:#fff}
.inbox-spc{height:10px;background:linear-gradient(135deg,#1a3a2e,#2d6a4f)}
.inbox-body{padding:0}
.sec-lbl{font-size:11px;font-weight:500;color:var(--tx);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.sec-lbl::after{content:'';flex:1;height:0.5px;background:var(--bd)}
.my-offer-card{background:var(--bg);border:1.5px solid var(--bd);border-radius:var(--border-radius-lg);padding:10px;margin-bottom:7px;transition:border-color .3s}
.moc-expired{border-color:rgba(230,99,70,.4);background:rgba(252,235,235,.3)}
.moc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.moc-em{font-size:22px;flex-shrink:0}
.moc-nm{font-size:12px;font-weight:500;color:var(--tx)}
.moc-sub{font-size:10px;color:var(--ts)}
.moc-counts{display:flex;gap:5px}
.mc-d{font-size:10px;padding:3px 8px;border-radius:8px;font-weight:500;background:#d8f3dc;color:#166534}
.mc-a{font-size:10px;padding:3px 8px;border-radius:8px;font-weight:500;background:#e6f1fb;color:#1e40af}
:root[data-theme="dark"] .mc-d{background:rgba(82,183,136,.25);color:#86efac}
:root[data-theme="dark"] .mc-a{background:rgba(96,165,250,.25);color:#93c5fd}
.ri{border-radius:var(--border-radius-lg);padding:9px 10px;margin-bottom:6px;border:1.5px solid var(--bd);transition:all .2s;background:var(--bg)}
.ri.ri-d{border-color:rgba(82,183,136,.4);background:rgba(82,183,136,.08)}
.ri.ri-a{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06)}
:root[data-theme="dark"] .ri.ri-d{border-color:rgba(82,183,136,.5);background:rgba(82,183,136,.12)}
:root[data-theme="dark"] .ri.ri-a{border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.12)}
.ri.ri-history{opacity:.7;border-style:dashed;background:var(--bs)}
.ri-top{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.ri-type{font-size:9px;font-weight:500;padding:2px 6px;border-radius:7px}
.rit-d{background:#d8f3dc;color:#166534}
.rit-a{background:#e6f1fb;color:#1e40af}
:root[data-theme="dark"] .rit-d{background:rgba(82,183,136,.25);color:#86efac}
:root[data-theme="dark"] .rit-a{background:rgba(96,165,250,.25);color:#93c5fd}
.ri-user{display:flex;align-items:center;gap:4px;flex:1}
.ri-nm{font-size:10px;font-weight:500;color:var(--tx)}
.ri-time{font-size:9px;color:var(--ts)}
.ri-items{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.ri-item{display:flex;align-items:center;gap:3px;background:var(--bs);border-radius:6px;padding:3px 7px;font-size:10px;border:0.5px solid var(--bd)}
.ri-btns{display:flex;gap:5px}
.ri-ok{flex:1;padding:6px;border-radius:7px;background:#2d6a4f;border:none;color:#fff;font-size:10px;font-weight:500;cursor:pointer}
:root[data-theme="dark"] .ri-ok{background:#52b788}
.ri-no{flex:1;padding:6px;border-radius:7px;background:#fcebeb;border:0.5px solid #fca5a5;color:#991b1b;font-size:10px;font-weight:500;cursor:pointer}
:root[data-theme="dark"] .ri-no{background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.4);color:#fca5a5}
.sent-item{background:var(--bg);border:0.5px solid var(--bd);border-radius:var(--border-radius-lg);padding:8px 10px;margin-bottom:5px;transition:all .2s}
.sent-item.si-history{opacity:.7;border-style:dashed;background:var(--bs)}
.si-top{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.si-type{font-size:9px;font-weight:500;padding:2px 6px;border-radius:7px}
.sit-d{background:#d8f3dc;color:#166534}
.sit-a{background:#e6f1fb;color:#1e40af}
.si-pend{font-size:9px;color:var(--ts)}

/* SETTINGS */
.sg{background:var(--bg);border:0.5px solid var(--bd);border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:8px}
.sg-t{font-size:9px;font-weight:500;color:var(--ts);letter-spacing:.4px;padding:0 11px;margin:7px 0 4px;display:block}
.srow{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:0.5px solid var(--bd);cursor:pointer;transition:background .15s;gap:8px}
.srow:last-child{border-bottom:none}
.srow:hover{background:var(--bs)}
.srow-l{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.srow-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.srow-lbl{font-size:11px;color:var(--tx)}
.srow-sub{font-size:9px;color:var(--ts)}
.chev{width:12px;height:12px;stroke:var(--ts);fill:none;stroke-width:1.8}
.toggle{width:34px;height:19px;border-radius:10px;background:var(--bd);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:#2d6a4f}
.toggle::after{content:'';position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle.on::after{transform:translateX(-15px)}
.disc-box{background:var(--bg);border:0.5px solid var(--bd);border-radius:var(--border-radius-lg);padding:11px 12px;margin-bottom:8px}
.disc-logo{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:7px}
.disc-app{font-size:12px;font-weight:500;color:var(--tx)}
.disc-tag-el{font-size:9px;padding:1px 6px;border-radius:6px;background:var(--bs);color:var(--ts);border:0.5px solid var(--bd)}
.disc-txt{font-size:10px;color:var(--ts);line-height:1.6;margin-bottom:8px;text-align:center}
.disc-link{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 9px;border-radius:8px;background:var(--bs);border:0.5px solid var(--bd);text-decoration:none;transition:background .15s}
.disc-link:hover{background:var(--gp);border-color:#52b788}
.disc-link-lbl{font-size:10px;color:#2d6a4f;font-weight:500}
.disc-link-url{font-size:8px;color:var(--ts);margin-top:1px}
.ver-txt{font-size:10px;color:var(--ts);text-align:center;margin-bottom:10px}

/* BOTTOM NAV: Profile | Inventory | Market | Union | Settings */
.bnav{
  height:66px;background:var(--bg);
  border-top:1px solid var(--bd);
  display:flex;align-items:stretch;flex-shrink:0;
  position:relative;padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"] .bnav{background:#161616;border-color:#252525}
.phone.keyboard-open .bnav{display:none}
/* إزالة الخط القديم */
.nav-glow{display:none!important}
.ni{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;border:none;background:transparent;
  cursor:pointer;position:relative;
  transition:color .2s;color:var(--ts);
  padding:0;font-family:var(--font-sans);
}
/* خط تحت الزر المحدد */
.ni::after{
  content:'';
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:3px;border-radius:3px 3px 0 0;
  background:#2d6a4f;
  transition:width .25s cubic-bezier(.4,0,.2,1);
}
.ni.act{color:#2d6a4f}
.ni.act::after{width:24px}
:root[data-theme="dark"] .ni.act{color:#52b788}
:root[data-theme="dark"] .ni.act::after{background:#52b788}

.ni-ico{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.ni.act .ni-ico{transform:translateY(-1px) scale(1.05)}
.ni:active .ni-ico{transform:scale(.85)}

.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}

.ni-lbl{font-size:9.5px;font-weight:600;color:inherit;line-height:1;transition:all .2s}
.ni.act .ni-lbl{font-weight:700}

/* ── زر السوق المميز ── */
.ni.mkt{overflow:visible}
.ni.mkt::after{display:none}
.ni.mkt .ni-ico{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#2d6a4f,#52b788);
  box-shadow:0 4px 16px rgba(45,106,79,.4);
  margin-top:-22px;border:3px solid var(--bg);
}
.ni.mkt .icon{stroke:#fff;width:22px;height:22px}
.ni.mkt .ni-lbl{color:var(--ts);margin-top:4px}
.ni.mkt.act .ni-lbl{color:#2d6a4f}
:root[data-theme="dark"] .ni.mkt .ni-ico{border-color:#161616;box-shadow:0 4px 16px rgba(82,183,136,.3)}

@keyframes mktPop{
  0%{transform:scale(1) translateY(0) rotate(0deg)}
  30%{transform:scale(1.18) translateY(-6px) rotate(-5deg)}
  60%{transform:scale(.94) translateY(-2px) rotate(2deg)}
  100%{transform:scale(1) translateY(-3px) rotate(0deg)}
}
.ni.mkt.act .ni-ico{
  animation:mktPop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 7px 20px rgba(45,106,79,.55);
}
:root[data-theme="dark"] .ni.mkt.act .ni-ico{box-shadow:0 7px 20px rgba(82,183,136,.4)}
.ni.mkt:active .ni-ico{transform:scale(.86)!important;animation:none!important}

/* MODALS */
.ov{display:none;position:absolute;inset:0;background:rgba(0,0,0,.15);z-index:60;align-items:flex-end;justify-content:center;border-radius:28px}
.ov.open{display:flex}
.ov.center{align-items:center;padding:14px}
.modal{background:var(--bg);border-radius:18px 18px 0 0;width:100%;padding:13px;max-height:84%;overflow-y:auto;animation:sUp .27s cubic-bezier(.4,0,.2,1)}
.modal.cm{border-radius:14px;animation:pIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes sUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.mh{width:28px;height:3px;border-radius:2px;background:var(--bd);margin:0 auto 10px}
.modal h3{font-size:13px;font-weight:500;color:var(--tx);margin-bottom:9px}
.modal h3.c{text-align:center}
.mbtns{display:flex;gap:6px;margin-top:9px}
.mbtns button{flex:1;padding:8px;border-radius:8px;font-size:11px;font-weight:500;cursor:pointer;border:none;font-family:var(--font-sans)}
.mb-c{background:var(--bs);color:var(--ts)}
.mb-p{background:#2d6a4f;color:#fff}
.mb-d{background:#e63946;color:#fff}
.mb-a{background:#e9c46a;color:#6d4c2a}
.fg{margin-bottom:8px}
.fg label{font-size:10px;color:var(--ts);display:block;margin-bottom:3px}
.fg input,.fg textarea{width:100%;padding:7px 8px;border:0.5px solid var(--bd);border-radius:8px;font-size:11px;background:var(--bg);color:var(--tx);outline:none}
.fg textarea{resize:none;height:55px}
.spick{display:flex;gap:6px;justify-content:center;margin:9px 0}
.sp-star{font-size:26px;cursor:pointer;filter:grayscale(1) opacity(.35);transition:transform .15s}
.sp-star.on{filter:none;transform:scale(1.08)}
.fb-types{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.fb-type{padding:7px;border-radius:8px;border:1.5px solid var(--bd);cursor:pointer;text-align:center;transition:all .15s;background:var(--bg)}
.fb-type.sel{border-color:#2d6a4f;background:var(--gp)}
.ft-e{font-size:16px;display:block;margin-bottom:3px}
.ft-l{font-size:9px;font-weight:500;color:var(--ts)}
.fb-type.sel .ft-l{color:#2d6a4f}
.del-warn-box{background:#fff5f5;border:1.5px solid #fca5a5;border-radius:10px;padding:12px;margin-bottom:10px;text-align:center}
.dw-ico{font-size:30px;display:block;margin-bottom:6px}
.dw-t{font-size:12px;font-weight:500;color:#991b1b;margin-bottom:4px}
.dw-s{font-size:10px;color:#b91c1c;line-height:1.5}
.del-list{list-style:none;margin:6px 0;text-align:right}
.del-list li{font-size:10px;color:#b91c1c;padding:2px 0;display:flex;align-items:center;gap:4px}
.del-list li::before{content:'✕';font-size:9px}
.inv-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:200px;overflow-y:auto;margin-bottom:7px}
.ip-item{padding:8px 4px;text-align:center;border-radius:10px;cursor:pointer;border:1.5px solid var(--bd);background:var(--bs);transition:all .15s;touch-action:manipulation}
.ip-item:active{transform:scale(.94)}
.ip-item.sel{border-color:#52b788;background:rgba(82,183,136,.15);box-shadow:0 0 0 1.5px #52b788}
.ip-item .ie{font-size:22px;display:block;margin-bottom:3px}
.ip-item .in{font-size:9px;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-item .iq{font-size:9px;color:var(--ts);margin-top:1px}
.del-screen{display:none;position:absolute;inset:0;background:var(--bg);z-index:200;flex-direction:column;align-items:center;justify-content:center;border-radius:28px;padding:20px;text-align:center}
.del-screen.show{display:flex}

/* ═══════════════════════════════════════════════════════════════ */
/* 👥 TEAM MANAGEMENT SYSTEM - STYLES */
/* ═══════════════════════════════════════════════════════════════ */

/* Team Members List */
.team-members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.team-member {
  background: white;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.team-member:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.team-member.me {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
  border: 2px solid #52b788;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #52b788 0%, #2d6a4f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-name {
  font-size: 16px;
  font-weight: 600;
  color: #2d6a4f;
}

.member-role {
  font-size: 13px;
  color: #666;
}

.member-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  transform: scale(1.1);
}

.action-btn:active {
  transform: scale(0.95);
}

.chat-btn {
  background: linear-gradient(135deg, #4285f4 0%, #357ae8 100%);
}

.kick-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5555 100%);
}

.promote-btn {
  background: linear-gradient(135deg, #ffd93d 0%, #f6c23e 100%);
}

.demote-btn {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

/* Chat Container */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
}

.chat-header {
  background: linear-gradient(135deg, #1a3a2e, #2d6a4f);
  color: white;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.chat-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.back-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 6px 12px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s;
  flex-shrink: 0;
}
.back-btn:active { background: rgba(255,255,255,.25); }

.chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bs);
  overscroll-behavior: contain;
}

.chat-message {
  max-width: 76%;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--bd);
  animation: messageSlide .25s ease;
}

@keyframes messageSlide {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}

.chat-message.own {
  align-self: flex-end;
  background: linear-gradient(135deg, #2d6a4f, #52b788);
  color: white;
  border-color: transparent;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}

.user-name {
  font-size: 11px;
  font-weight: 700;
  color: #52b788;
}

.chat-message.own .user-name {
  color: rgba(255,255,255,.85);
}

.message-time {
  font-size: 10px;
  color: var(--ts);
  flex-shrink: 0;
}

.chat-message.own .message-time {
  color: rgba(255,255,255,.65);
}

.message-content {
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--tx);
}

.chat-message.own .message-content {
  color: #fff;
}

.chat-input-container {
  padding: 10px 12px;
  background: var(--bg);
  border-top: 1px solid var(--bd);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 22px;
  font-size: 13px;
  background: var(--bs);
  color: var(--tx);
  outline: none;
  transition: border-color .2s;
}
.chat-input:focus { border-color: #2d6a4f; }
:root[data-theme="dark"] .chat-input { background: #252525; color: #e0e0e0; border-color: #3a3a3a; }
:root[data-theme="dark"] .chat-input:focus { border-color: #52b788; }

.send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2d6a4f, #52b788);
  color: white;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
  box-shadow: 0 3px 10px rgba(45,106,79,.35);
}
.send-btn:active { transform: scale(.9); }

/* ── Team Panels ── */
#team-chat-panel, #team-manage-panel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

#team-chat-panel.show, #team-manage-panel.show {
  display: flex;
}

#team-chat-panel .chat-container {
  width: 100%;
  height: 88vh;
  border-radius: 20px 20px 0 0;
  margin: 0;
}

.team-panel-content {
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
:root[data-theme="dark"] .team-panel-content { background: #161616; }

/* ── Leave btn ── */
.leave-team-btn {
  background: linear-gradient(135deg, #991b1b, #ef4444);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: opacity .2s;
}
.leave-team-btn:active { opacity: .8; }
}

/* ══════════════════════════════════
   FLUID DESIGN - مرن على كل الشاشات
══════════════════════════════════ */

/* Base font size - أساس كل الحجوم */
:root {
  --f-xs:  clamp(8px,  1.8vw, 10px);
  --f-sm:  clamp(9px,  2.2vw, 11px);
  --f-md:  clamp(11px, 2.8vw, 13px);
  --f-lg:  clamp(13px, 3.2vw, 16px);
  --f-xl:  clamp(16px, 4vw,   20px);
  --f-2xl: clamp(20px, 5vw,   26px);

  --sp-xs: clamp(3px,  0.8vw, 5px);
  --sp-sm: clamp(5px,  1.4vw, 8px);
  --sp-md: clamp(8px,  2vw,   12px);
  --sp-lg: clamp(12px, 3vw,   18px);
}

/* Top Nav */
.anav { height: clamp(42px, 10vw, 52px); }
.anav-brand { font-size: var(--f-md); }

/* Bottom Nav */
.bnav { height: clamp(62px, 15vw, 70px); }
.ni-lbl { font-size: var(--f-xs); }
.icon { width: 20px; height: 20px; }

/* Market Cards */
.cards-grid {
  gap: clamp(5px, 1.5vw, 8px);
  padding: clamp(6px, 2vw, 10px) clamp(8px, 3vw, 14px);
}
.tc-em  { font-size: clamp(20px, 5.5vw, 28px); }
.tc-name { font-size: clamp(9px, 2.3vw, 11px); }
.tc-qty  { font-size: clamp(8px, 2vw,   10px); }

/* Inventory Cards */
.ii .ie { font-size: clamp(18px, 5vw, 24px); }
.ii .in { font-size: clamp(8px, 2.2vw, 10px); }
.ii .iq { font-size: clamp(7px, 1.9vw, 9px); }

/* Inventory Header */
.inv-sc .sn { font-size: clamp(16px, 4.5vw, 22px); }
.inv-sc .sl { font-size: clamp(8px,  2vw,   10px); }

/* Profile Stats */
.pstat .pn { font-size: clamp(18px, 4.5vw, 24px); }
.pstat .pl { font-size: clamp(9px,  2.2vw, 11px); }

/* User row في البطاقات */
.tc-un { font-size: clamp(8px, 2vw, 10px); }
.done-n { font-size: clamp(7px, 1.8vw, 9px); }

/* iPhone صغير (SE, mini - 375px وأقل) */
@media (max-width: 375px) {
  .phone { max-width: 100%; font-size: 12px; }
  .tc-name { font-size: 9px; }
  .tc-em { font-size: 20px; }
  .ii .ie { font-size: 18px; }
  .ii .in { font-size: 8px; }
}

/* iPhone عادي + Android (376-480px) يملأ الشاشة */
@media (max-width: 480px) {
  .phone { max-width: 100%; }
}

/* iPad وشاشات أكبر */
@media (min-width: 481px) {
  body {
    background: var(--bs);
    align-items: center;
    justify-content: center;
  }

  .phone {
    max-width: 390px;
    height: 844px; /* iPhone 14 size */
    min-height: unset;
    border-radius: 44px;
    border: 8px solid #222;
    box-shadow:
      0 0 0 1px #444,
      0 40px 100px rgba(0,0,0,.8),
      inset 0 0 0 1px #333;
    overflow: hidden;
  }

  /* حبة بريق على الجانب */
  .phone::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background: #222;
    border-radius: 3px;
    z-index: 1000;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-container {
    height: 400px;
  }
  
  .chat-message {
    max-width: 85%;
  }
  
  .member-actions {
    flex-wrap: wrap;
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
/* Custom Card Overlay */
.cco {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s;
}
.cco.show {
  opacity: 1;
}
.ccb {
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  text-align: center;
}
.cci {
  font-size: 48px;
  margin-bottom: 12px;
}
.cct {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.ccb2 {
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ccb2:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════
   📢 ADMOB ADS
   ═══════════════════════════════════════════════════ */

/* Banner Ad Container */
.banner-ad-container {
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--bd);
  display: none;            /* مخفي حتى تُضاف إعلانات حقيقية (يحرّر مساحة المحتوى) */
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 0;
  max-height: 90px;
  overflow: hidden;
}
/* عند تفعيل إعلان حقيقي، أضف class="active" للحاوية */
.banner-ad-container.active {
  display: flex;
  min-height: 60px;
}

.banner-ad-container.hidden {
  display: none;
}

/* Interstitial Ad Overlay */
.interstitial-ad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.interstitial-ad-overlay.show {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.interstitial-ad-content {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.interstitial-ad-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.2s;
}

.interstitial-ad-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.interstitial-ad-timer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Ad Placeholder (when ad not loaded) */
.ad-placeholder {
  background: linear-gradient(90deg, var(--bs) 0%, var(--bg) 50%, var(--bs) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ts);
  font-size: 11px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

  .inv-card, .trade-card { contain: layout style; }
  .page { pointer-events: none; }
  .page.act { pointer-events: auto; }
  .market-grid { contain: layout; }

#min-trades::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#2d6a4f;cursor:pointer;box-shadow:0 2px 6px rgba(45,106,79,.4)}#min-trades::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#2d6a4f;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(45,106,79,.4)}

/* ── UNION ── */
.union-hdr{background:linear-gradient(135deg,#1a3a2e,#2d6a4f);padding:16px 14px 12px;position:relative;overflow:hidden;text-align:center;flex-shrink:0}
.uc-card{background:var(--bs);border:1px solid var(--bd);border-radius:16px;padding:14px;margin:10px 12px 8px;box-shadow:0 2px 8px rgba(0,0,0,.06);flex-shrink:0}
.uc-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.uc-img{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2d6a4f,#52b788);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.uc-nm{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:3px;line-height:1.2}
.uc-tg{font-size:10px;color:var(--ts);line-height:1.3;margin-bottom:4px}
.uc-stat{border-radius:12px;padding:12px;text-align:center;border:1px solid var(--bd);width:100%;box-sizing:border-box}
.uc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;width:100%}
.uc-btns{display:flex;gap:8px}
.ucb{flex:1;padding:10px 6px;border-radius:12px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:all .18s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ucb-g{background:linear-gradient(135deg,#166534,#22c55e);color:#fff;border:none;box-shadow:0 4px 12px rgba(34,197,94,.3)}
.ucb-a{background:linear-gradient(135deg,#854d0e,#e9c46a);color:#fff;border:none;box-shadow:0 4px 12px rgba(233,196,106,.3)}
.ucb-r{background:linear-gradient(135deg,#7f1d1d,#ef4444);color:#fff;border:none;box-shadow:0 4px 12px rgba(239,68,68,.25)}
.ml-wrap{background:var(--bg);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* manage panel member rows */
#team-members-list .member-row{transition:background .15s}
#team-members-list .member-row:active{background:var(--bs)}

/* ── Manage Panel Members List ── */
#team-members-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* ── Friend chat panel ── */
#friend-chat-panel {
  position: absolute;
  inset: 0;
  z-index: 250;
}

/* ═══════════════════════════════════════════════════
   صفحة الاتحاد — تخطيط نظيف (حل نهائي موحّد)
   ═══════════════════════════════════════════════════ */
#pg-union{
  display:flex;
  flex-direction:column;
  position:absolute;
  inset:0;              /* يملأ .phone بالكامل */
  height:auto;
  overflow:hidden;
  padding-bottom:0;
}
/* العناصر الثابتة (لا تتمدد ولا تنكمش) */
#pg-union .union-hdr,
#pg-union .uc-card,
#pg-union .union-tabs,
#pg-union > div[style*="gap:6px"]{
  flex:0 0 auto;
}
/* قائمة الأعضاء — تأخذ كل المساحة المتبقية وتمرّر */
#pg-union .ml-wrap{
  flex:1 1 auto;
  min-height:180px;     /* حد أدنى يمنع الانكماش المفرط */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  margin:0 12px 9px;
}
#pg-union #ml-body{
  min-height:100%;
}
/* وضع المحادثة: ملء الشاشة كاملة */
#pg-union.chat-mode .ml-wrap{
  min-height:0;
}