/* =========================================================
   PharaCoin — UI V10 (Glass Dashboard) — FIXED BG VERSION
   الخلفية qa.jpg تظهر على كل الصفحات
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --v10-bg:#07070a;
  --v10-glass:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  --v10-glass-solid:rgba(18,18,22,.72);
  --v10-border:rgba(255,255,255,.09);
  --v10-border-hi:rgba(255,255,255,.18);
  --v10-text:#f4f4f6;
  --v10-muted:rgba(255,255,255,.58);
  --v10-accent:#ff6a2b;
  --v10-accent-2:#ef4444;
  --v10-grad:linear-gradient(135deg,#ff7a2f 0%,#ef4444 100%);
  --v10-ok:#34d399;
  --v10-gold:#ffc65a;
  --v10-radius:18px;
  --v10-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  --v10-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
html[data-ui="v10"] body,
html[data-ui="v10"] button,
html[data-ui="v10"] input,
html[data-ui="v10"] select,
html[data-ui="v10"] textarea{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif !important;
}
html[data-ui="v10"] body{
  background-color:var(--v10-bg) !important;
  color:var(--v10-text);
  letter-spacing:-.005em;
}

/* ✅ الخلفية الموحدة لكل الصفحات — تحل مشكلة عدم ظهور qa.jpg */
html[data-ui="v10"] body::before{
  content:"" !important;
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:url('Object/qa.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#07070a !important;
  filter:brightness(0.75) saturate(1.05) contrast(1.05) !important;
}

/* ✅ لو الصفحة فيها .bg أو .page-bg نطبّق نفس الصورة بدون ما نقتلها */
html[data-ui="v10"] .bg,
html[data-ui="v10"] .page-bg{
  filter:brightness(0.85) saturate(1.05) contrast(1.05) !important;
  opacity:1 !important;
  background-image:url('Object/qa.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

html[data-ui="v10"] .particle{
  background:radial-gradient(circle,rgba(255,215,0,.85),transparent) !important;
}

html[data-ui="v10"] h1,
html[data-ui="v10"] h2,
html[data-ui="v10"] h3{letter-spacing:-.02em}
html[data-ui="v10"] p{color:var(--v10-muted)}

/* ---------- Glass surfaces ---------- */
html[data-ui="v10"] .v10-glass,
html[data-ui="v10"] .card,
html[data-ui="v10"] .box,
html[data-ui="v10"] .welcome-card,
html[data-ui="v10"] .info-card,
html[data-ui="v10"] .level-card,
html[data-ui="v10"] .event-card,
html[data-ui="v10"] .contest-card,
html[data-ui="v10"] .statue-card,
html[data-ui="v10"] .tool-card,
html[data-ui="v10"] .vip-card,
html[data-ui="v10"] .task-card,
html[data-ui="v10"] .offer-card,
html[data-ui="v10"] .stat-card,
html[data-ui="v10"] .reward-card,
html[data-ui="v10"] .request-card,
html[data-ui="v10"] .progress-card,
html[data-ui="v10"] .timer-card,
html[data-ui="v10"] .game-card,
html[data-ui="v10"] .mining-box,
html[data-ui="v10"] .balance-box,
html[data-ui="v10"] .data-box,
html[data-ui="v10"] .terms-box,
html[data-ui="v10"] .title-box,
html[data-ui="v10"] .register-box,
html[data-ui="v10"] .info-panel,
html[data-ui="v10"] .transaction-item,
html[data-ui="v10"] .leaderboard-item,
html[data-ui="v10"] .task-item,
html[data-ui="v10"] .detail-item,
html[data-ui="v10"] .clickable-card,
html[data-ui="v10"] .modal-box,
html[data-ui="v10"] .landing-modal,
html[data-ui="v10"] .game-container,
html[data-ui="v10"] .game-header{
  background:var(--v10-glass) !important;
  border:1px solid var(--v10-border) !important;
  border-radius:var(--v10-radius) !important;
  box-shadow:var(--v10-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  transition:transform .45s var(--v10-ease),border-color .3s,box-shadow .3s,background .3s;
}
html[data-ui="v10"] .modal-box,
html[data-ui="v10"] .landing-modal{background:var(--v10-glass-solid) !important}
html[data-ui="v10"] .modal-overlay,
html[data-ui="v10"] .overlay{background:rgba(5,5,8,.72) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* hover: lift */
@media (hover:hover){
  html[data-ui="v10"] .v10-lift:hover{
    transform:translateY(-5px);
    border-color:var(--v10-border-hi) !important;
    box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,106,43,.12),inset 0 1px 0 rgba(255,255,255,.1) !important;
  }
}
html[data-ui="v10"] .v10-glass::after,
html[data-ui="v10"] .v10-lift::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,138,60,.14),transparent 60%);
}
html[data-ui="v10"] .v10-lift:hover::after{opacity:1}

/* ---------- Top bar / header / dock ---------- */
html[data-ui="v10"] .top-bar,
html[data-ui="v10"] .header{
  background:rgba(12,12,16,.62) !important;
  border:0 !important;
  border-bottom:1px solid var(--v10-border) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 8px 30px rgba(0,0,0,.35) !important;
}
html[data-ui="v10"] .logo{
  background:var(--v10-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent !important;font-weight:900;
}
html[data-ui="v10"] .nav-links a{
  color:var(--v10-muted) !important;border-radius:12px !important;font-weight:600;
  transition:background .25s,color .25s;
}
html[data-ui="v10"] .nav-links a:hover{color:#fff !important;background:rgba(255,255,255,.07)}
html[data-ui="v10"] .nav-links a.active{
  color:#fff !important;background:rgba(255,255,255,.1) !important;
  box-shadow:inset 0 0 0 1px var(--v10-border-hi);
}
html[data-ui="v10"] .coin-display{
  background:rgba(255,255,255,.06) !important;border:1px solid var(--v10-border-hi) !important;
  color:var(--v10-gold) !important;border-radius:12px !important;font-weight:700;
  font-variant-numeric:tabular-nums;
}
html[data-ui="v10"] .news-ticker{
  background:rgba(12,12,16,.5) !important;border-bottom:1px solid var(--v10-border) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-ui="v10"] .bottom-nav{
  left:10px !important;right:10px !important;bottom:10px !important;
  border:1px solid var(--v10-border) !important;border-radius:22px !important;
  background:rgba(14,14,18,.66) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07) !important;
  max-width:560px;margin-inline:auto;
}
html[data-ui="v10"] .nav-item{
  color:var(--v10-muted) !important;border-radius:14px !important;
  transition:transform .35s var(--v10-ease),color .25s,background .25s;
}
html[data-ui="v10"] .nav-item:hover{color:#fff !important;transform:translateY(-3px)}
html[data-ui="v10"] .nav-item.active{
  color:#fff !important;background:rgba(255,255,255,.1) !important;
  box-shadow:inset 0 0 0 1px var(--v10-border-hi);
}
html[data-ui="v10"] .nav-item.active .nav-circle{background:var(--v10-grad) !important;box-shadow:0 6px 18px rgba(255,106,43,.45) !important;color:#fff !important}
html[data-ui="v10"] .nav-circle{border-color:var(--v10-border-hi) !important}

/* ---------- Buttons ---------- */
html[data-ui="v10"] .btn,
html[data-ui="v10"] .btn-primary,
html[data-ui="v10"] .quick-btn,
html[data-ui="v10"] .extra-btn,
html[data-ui="v10"] .contest-btn,
html[data-ui="v10"] .collect-btn,
html[data-ui="v10"] .next-btn,
html[data-ui="v10"] .task-btn,
html[data-ui="v10"] .subscribe-btn,
html[data-ui="v10"] .share-btn,
html[data-ui="v10"] .offer-btn,
html[data-ui="v10"] .go-btn,
html[data-ui="v10"] .cta-btn,
html[data-ui="v10"] .landing-btn,
html[data-ui="v10"] .game-btn,
html[data-ui="v10"] .contact-btn,
html[data-ui="v10"] .action-btn,
html[data-ui="v10"] .approve-btn,
html[data-ui="v10"] .proof-btn-primary,
html[data-ui="v10"] .modal-box button,
html[data-ui="v10"] button[type="submit"]{
  background:var(--v10-grad) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  font-weight:700 !important;
  text-shadow:none !important;
  box-shadow:0 8px 22px rgba(239,68,68,.32),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:transform .3s var(--v10-ease),filter .2s,box-shadow .3s !important;
}
@media (hover:hover){
  html[data-ui="v10"] .btn:hover,
  html[data-ui="v10"] .btn-primary:hover,
  html[data-ui="v10"] .quick-btn:hover,
  html[data-ui="v10"] .extra-btn:hover,
  html[data-ui="v10"] .contest-btn:hover,
  html[data-ui="v10"] .collect-btn:hover,
  html[data-ui="v10"] .next-btn:hover,
  html[data-ui="v10"] .task-btn:hover,
  html[data-ui="v10"] .subscribe-btn:hover,
  html[data-ui="v10"] .offer-btn:hover,
  html[data-ui="v10"] .cta-btn:hover,
  html[data-ui="v10"] .landing-btn:hover,
  html[data-ui="v10"] button[type="submit"]:hover{
    transform:translateY(-3px);filter:brightness(1.1);
    box-shadow:0 14px 32px rgba(239,68,68,.42),inset 0 1px 0 rgba(255,255,255,.3) !important;
  }
}
html[data-ui="v10"] .btn:active,
html[data-ui="v10"] .quick-btn:active,
html[data-ui="v10"] .extra-btn:active,
html[data-ui="v10"] .contest-btn:active,
html[data-ui="v10"] .collect-btn:active,
html[data-ui="v10"] button[type="submit"]:active{transform:scale(.97)}

html[data-ui="v10"] .btn-outline,
html[data-ui="v10"] .filter-btn,
html[data-ui="v10"] .tab-btn,
html[data-ui="v10"] .back,
html[data-ui="v10"] .proof-btn-secondary,
html[data-ui="v10"] .copy-card-btn,
html[data-ui="v10"] .torch-btn{
  background:rgba(255,255,255,.06) !important;
  color:var(--v10-text) !important;
  border:1px solid var(--v10-border-hi) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-ui="v10"] .btn-outline:hover,
html[data-ui="v10"] .filter-btn:hover,
html[data-ui="v10"] .tab-btn:hover,
html[data-ui="v10"] .back:hover{background:rgba(255,255,255,.12) !important}
html[data-ui="v10"] .filter-btn.active,
html[data-ui="v10"] .tab-btn.active{
  background:rgba(255,106,43,.16) !important;border-color:rgba(255,106,43,.55) !important;color:#fff !important;
}
html[data-ui="v10"] .reject-btn{
  background:rgba(239,68,68,.14) !important;color:#ff8a8a !important;
  border:1px solid rgba(239,68,68,.45) !important;border-radius:12px !important;box-shadow:none !important;
}
html[data-ui="v10"] .support-float{
  background:var(--v10-grad) !important;border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 12px 30px rgba(239,68,68,.45) !important;
}

/* ---------- Forms ---------- */
html[data-ui="v10"] input:not([type="checkbox"]):not([type="radio"]),
html[data-ui="v10"] select,
html[data-ui="v10"] textarea{
  background:rgba(255,255,255,.05) !important;
  color:var(--v10-text) !important;
  border:1px solid var(--v10-border) !important;
  border-radius:12px !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .25s,background .2s;
}
html[data-ui="v10"] input:focus,
html[data-ui="v10"] select:focus,
html[data-ui="v10"] textarea:focus{
  border-color:rgba(255,106,43,.7) !important;
  box-shadow:0 0 0 4px rgba(255,106,43,.14) !important;
  background:rgba(255,255,255,.08) !important;
  outline:none;
}
html[data-ui="v10"] ::placeholder{color:rgba(255,255,255,.35)}
html[data-ui="v10"] select option{background:#14141a;color:#fff}

/* ---------- Tables ---------- */
html[data-ui="v10"] table{
  background:rgba(255,255,255,.03) !important;border:1px solid var(--v10-border) !important;
  border-radius:var(--v10-radius) !important;overflow:hidden;
}
html[data-ui="v10"] th{
  background:rgba(255,255,255,.05) !important;color:var(--v10-muted) !important;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}
html[data-ui="v10"] td{border-bottom:1px solid rgba(255,255,255,.06) !important}
html[data-ui="v10"] tbody tr{transition:background .2s}
html[data-ui="v10"] tbody tr:hover{background:rgba(255,255,255,.04)}

/* ---------- Progress / badges ---------- */
html[data-ui="v10"] .progress-bar,
html[data-ui="v10"] .xp-bar,
html[data-ui="v10"] .tier-progress-container{
  background:rgba(255,255,255,.08) !important;border-radius:999px !important;overflow:hidden;
}
html[data-ui="v10"] .progress-fill,
html[data-ui="v10"] .xp-fill,
html[data-ui="v10"] .tier-progress-fill{
  background:var(--v10-grad) !important;border-radius:999px !important;
  box-shadow:0 0 14px rgba(255,106,43,.5);
}
html[data-ui="v10"] .live-badge,
html[data-ui="v10"] .event-badge,
html[data-ui="v10"] .owned-badge,
html[data-ui="v10"] .status-badge,
html[data-ui="v10"] .trust-badge,
html[data-ui="v10"] .ssl-badge,
html[data-ui="v10"] .proof-badge,
html[data-ui="v10"] .vs-badge{
  border-radius:999px !important;border:1px solid var(--v10-border-hi) !important;
  background:rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-weight:700;
}
html[data-ui="v10"] .status-pending{background:rgba(251,191,36,.12) !important;color:#fbbf24 !important;border-color:rgba(251,191,36,.4) !important}
html[data-ui="v10"] .status-approved,
html[data-ui="v10"] .status-success{background:rgba(52,211,153,.12) !important;color:var(--v10-ok) !important;border-color:rgba(52,211,153,.4) !important}
html[data-ui="v10"] .status-rejected{background:rgba(239,68,68,.12) !important;color:#ff8080 !important;border-color:rgba(239,68,68,.4) !important}
html[data-ui="v10"] .live-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--v10-ok);margin-right:6px;box-shadow:0 0 8px var(--v10-ok);animation:v10pulse 1.6s infinite}
@keyframes v10pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

html[data-ui="v10"] .info-value,
html[data-ui="v10"] .stat-value,
html[data-ui="v10"] .stat-number,
html[data-ui="v10"] .mining-value,
html[data-ui="v10"] .pending-amount{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html[data-ui="v10"] .info-label,
html[data-ui="v10"] .stat-label,
html[data-ui="v10"] .mining-label{color:var(--v10-muted) !important;font-weight:500}

html[data-ui="v10"] .toast{
  background:rgba(18,18,22,.8) !important;border:1px solid var(--v10-border-hi) !important;
  border-radius:14px !important;color:#fff !important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,.5) !important;
}

/* ---------- Entrance animation ---------- */
html[data-ui="v10"].v10-ready .v10-in{opacity:0;transform:translateY(18px) scale(.985)}
html[data-ui="v10"].v10-ready .v10-in.v10-show{
  opacity:1;transform:none;
  transition:opacity .7s var(--v10-ease),transform .7s var(--v10-ease);
  transition-delay:var(--v10-d,0ms);
}
html[data-ui="v10"] .v10-done{transition:transform .45s var(--v10-ease),border-color .3s,box-shadow .3s,background .3s !important;transition-delay:0ms !important}

/* scrollbar */
html[data-ui="v10"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-ui="v10"] ::-webkit-scrollbar-track{background:#08080b}
html[data-ui="v10"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px;border:2px solid #08080b}
html[data-ui="v10"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,106,43,.6)}

@media (max-width:700px){
  html[data-ui="v10"] .bottom-nav{left:6px !important;right:6px !important;bottom:6px !important}
}
@media (prefers-reduced-motion:reduce){
  html[data-ui="v10"].v10-ready .v10-in{opacity:1 !important;transform:none !important}
  html[data-ui="v10"] .v10-lift:hover{transform:none}
}

html[data-ui="v10"] button:not([class]),
html[data-ui="v10"] .btn-gold,
html[data-ui="v10"] .btn-upgrade,
html[data-ui="v10"] .predict-btn:not(.disabled),
html[data-ui="v10"] .channel-btn{
  background:var(--v10-grad) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;border-radius:12px !important;
  font-weight:700 !important;text-shadow:none !important;
  box-shadow:0 8px 22px rgba(239,68,68,.32),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:transform .3s var(--v10-ease),filter .2s,box-shadow .3s !important;
}
@media (hover:hover){
  html[data-ui="v10"] button:not([class]):hover,
  html[data-ui="v10"] .btn-gold:hover,
  html[data-ui="v10"] .btn-upgrade:hover{transform:translateY(-3px);filter:brightness(1.1)}
}
html[data-ui="v10"] button:not([class]):active{transform:scale(.97)}
html[data-ui="v10"] .landing-close{background:rgba(255,255,255,.08) !important;color:#fff !important;border:1px solid var(--v10-border-hi) !important;border-radius:12px !important}