/* ============================================================
   Prime Shop Unified Theme v15
   One visual system for USER + ADMIN panels.
   Palette: premium black / espresso brown / orange / warm gold.
   Brand/platform colors and semantic success/error colors are preserved.
   ============================================================ */
:root{
  --prime-bg:#080603;
  --prime-bg-2:#0d0905;
  --prime-surface:#120c07;
  --prime-surface-2:#191008;
  --prime-surface-3:#21130a;
  --prime-field:#0b0907;
  --prime-line:rgba(255,157,72,.24);
  --prime-line-soft:rgba(255,157,72,.12);
  --prime-line-strong:rgba(255,157,72,.46);
  --prime-orange:#ff7a1a;
  --prime-orange-2:#f25f0b;
  --prime-orange-soft:#ff9a4a;
  --prime-gold:#e9ad5b;
  --prime-cream:#fff0df;
  --prime-text:#f7efe7;
  --prime-text-2:#cbb9a8;
  --prime-muted:#89796c;
  --prime-shadow:0 14px 38px rgba(0,0,0,.42);
  --prime-glow:0 0 22px rgba(255,122,26,.16);

  /* Existing project variable aliases */
  --bg-deep:var(--prime-bg);
  --bg-primary:var(--prime-bg-2);
  --bg-secondary:var(--prime-surface);
  --bg-card:rgba(25,16,8,.88);
  --bg-card-hover:rgba(33,19,10,.94);
  --bg-glass:rgba(18,12,7,.82);
  --border:var(--prime-line-soft);
  --border-hover:var(--prime-line);
  --border-glow:var(--prime-line-strong);
  --text-primary:var(--prime-text);
  --text-secondary:var(--prime-text-2);
  --text-muted:var(--prime-muted);
  --accent-purple:var(--prime-orange);
  --accent-pink:var(--prime-gold);
  --accent-orange:var(--prime-orange-2);
  --gradient-hero:linear-gradient(135deg,#ff9148 0%,#ff7217 48%,#c84308 100%);
  --gradient-btn:linear-gradient(135deg,#ff9148 0%,#f1650d 55%,#cf4707 100%);
  --gradient-card:linear-gradient(145deg,rgba(255,122,26,.12),rgba(121,53,13,.06));
  --glow-purple:0 0 28px rgba(255,122,26,.28);
  --glow-pink:0 0 24px rgba(233,173,91,.20);
}

html,body{background:var(--prime-bg)!important;color:var(--prime-text)}
body{
  background-image:
    radial-gradient(circle at 82% 12%,rgba(255,122,26,.07),transparent 27%),
    radial-gradient(circle at 10% 58%,rgba(166,75,21,.055),transparent 32%)!important;
  background-attachment:fixed!important;
}

/* ----- shared header / chrome ----- */
.header,
.adm-topbar{
  background:rgba(12,8,5,.94)!important;
  border-color:var(--prime-line-soft)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.22)!important;
}
.logo-icon,.adm-brand-icon,.prime-brand-mark,.mobile-menu-btn.active{
  background:var(--gradient-btn)!important;
  box-shadow:var(--prime-glow)!important;
}
.mobile-menu-btn,.theme-toggle,.cart-btn,.btn-icon,.icon-btn{
  background:rgba(255,255,255,.035)!important;
  border-color:var(--prime-line-soft)!important;
  color:var(--prime-text-2)!important;
}
.balance-pill,.currency-switch>button,.top-btn{
  background:rgba(255,122,26,.10)!important;
  border-color:var(--prime-line)!important;
  color:var(--prime-cream)!important;
}
.currency-menu{
  background:var(--prime-surface-2)!important;
  border-color:var(--prime-line)!important;
}
.currency-menu a{color:var(--prime-text-2)!important}
.currency-menu a:hover,.currency-menu a.active{background:rgba(255,122,26,.16)!important;color:#fff!important}
.lang-switch a{background:rgba(255,255,255,.035)!important;border-color:var(--prime-line-soft)!important;color:var(--prime-text-2)!important}
.lang-switch a.active{background:rgba(255,122,26,.16)!important;border-color:var(--prime-line-strong)!important;color:#fff!important}

/* ----- shared cards / panels ----- */
.card,.sidebar-card,.hero,.cat-card,.feature-item,.gateway-card,.addfunds-card,
.xo-card,.plat-card,.oc-card,.oc-item,.support-card,.support-hero,
.account-ref-card,.account-ref-hero,.account-api-row,
.svc-table-wrap,.svc-group,.import-hero,.auth-card,.auth-shell,
.dash-card,.stat-box,.adm-server,.user-list,.table-scroll{
  background-color:var(--prime-surface)!important;
  border-color:var(--prime-line)!important;
  box-shadow:var(--prime-shadow)!important;
}
.card,.sidebar-card,.cat-card,.feature-item,.gateway-card,.addfunds-card,
.xo-card,.oc-card,.support-card,.account-ref-card,.dash-card,.stat-box,.adm-server{
  background-image:linear-gradient(160deg,rgba(255,122,26,.035),rgba(255,255,255,0) 45%)!important;
}

/* brown/orange section headers everywhere */
.account-ref-card-head,.support-card-title,.addfunds-head,.xo-card-head,
.svc-group-head,.adm-table thead th{
  background:linear-gradient(180deg,rgba(122,52,18,.96),rgba(74,31,13,.96))!important;
  color:var(--prime-text)!important;
  border-color:var(--prime-line)!important;
}
.account-ref-hero,.support-hero,.page-header{
  background:
    radial-gradient(circle at 88% 42%,rgba(214,93,26,.19),transparent 32%),
    linear-gradient(135deg,#1b1713,#15100c)!important;
  border-color:rgba(233,173,91,.48)!important;
}

/* ----- shared forms ----- */
.form-control,.xo-select,.xo-input,.account-input,.account-textarea,.account-select,
.amount-input,.svc-search-box,.support-form-body .form-control,
.top-search,.ao-search input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,select{
  background-color:var(--prime-field)!important;
  border-color:rgba(233,173,91,.30)!important;
  color:var(--prime-text)!important;
}
.form-control:focus,.xo-select:focus,.xo-input:focus,.account-input:focus,
textarea:focus,select:focus,input:focus{
  border-color:var(--prime-orange)!important;
  box-shadow:0 0 0 3px rgba(255,122,26,.11)!important;
  outline:none!important;
}
::placeholder{color:#74685f!important;opacity:1}
label,.form-group label,.xo-field label,.support-form-body label,.account-ref-card-body label{
  color:var(--prime-orange-soft)!important;
}

/* ----- buttons / tabs / active selections ----- */
.btn-primary,.xo-submit,.account-orange-btn,.support-submit,.auth-btn-primary,
button[type="submit"].btn-primary,.bn-center,.xo-new-order-btn{
  background:var(--gradient-btn)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 7px 22px rgba(230,88,8,.24)!important;
}
.btn-outline,.btn-ghost,.xo-tab,.svc-pager a,.xp-page-btn{
  background:rgba(255,255,255,.025)!important;
  border-color:var(--prime-line-soft)!important;
  color:var(--prime-text-2)!important;
}
.btn-outline:hover,.btn-ghost:hover,.xo-tab:hover,.xo-tab.active,.nav-link:hover,.nav-link.active{
  background:rgba(255,122,26,.12)!important;
  border-color:var(--prime-line-strong)!important;
  color:#fff!important;
}

/* ----- user new-order / service UI ----- */
.cat-trigger,.cat-picker,.svc-list,.svc-item,.xo-meta-item,.xo-charge,.xo-desc{
  background-color:var(--prime-field)!important;
  border-color:var(--prime-line-soft)!important;
}
.cat-picker,.svc-list{box-shadow:0 18px 38px rgba(0,0,0,.52)!important}
.cat-item:hover,.cat-item.active,.svc-item:hover,.svc-item.selected{
  background:linear-gradient(90deg,rgba(255,122,26,.18),rgba(255,122,26,.045))!important;
  border-color:var(--prime-line)!important;
}
.svc-item.selected{border-inline-start-color:var(--prime-orange)!important;border-inline-end-color:var(--prime-orange)!important}
.xo-charge{background:linear-gradient(135deg,rgba(255,122,26,.10),rgba(233,173,91,.055))!important;border-color:var(--prime-line)!important}
.xo-charge strong,.xo-meta-item strong,.srate,.svc-table .srate{color:#ffd0aa!important}
.svc-table th{background:#100a06!important;border-color:var(--prime-line-soft)!important}
.svc-table td{border-color:rgba(255,157,72,.07)!important}
.svc-table tr:hover td{background:rgba(255,122,26,.045)!important}

/* keep premium platform logos colorful; only frame follows theme */
.pu-badge,.plat-btn .plat-ico,.home-cat-icon{
  border-color:rgba(233,173,91,.56)!important;
}
.plat-btn.active .plat-ico{border-color:var(--prime-orange-soft)!important;box-shadow:0 0 0 2px rgba(255,122,26,.22),0 5px 15px rgba(255,122,26,.20)!important}

/* ----- support / tickets ----- */
.support-search,.support-ticket-item,.ticket-meta-strip span,.ticket-meta-strip a{
  background-color:var(--prime-field)!important;
  border-color:var(--prime-line)!important;
}
.support-ticket-item:hover{background:rgba(255,122,26,.055)!important}
.support-ticket-subject strong,.support-ticket-id strong{color:var(--prime-orange-soft)!important}
.ai-panel{background:var(--prime-surface)!important;border-color:var(--prime-line-strong)!important}
.ai-head{background:linear-gradient(135deg,rgba(255,122,26,.20),rgba(116,51,17,.14))!important;border-color:var(--prime-line-soft)!important}
.ai-bubble.bot,.ai-bubble.user{background:rgba(255,122,26,.09)!important;border-color:var(--prime-line-soft)!important}
.ai-input{border-color:var(--prime-line-soft)!important}
.ai-fab,.ai-input button{background:var(--gradient-btn)!important;box-shadow:var(--prime-glow)!important}

/* ----- profile/account ----- */
.account-ref-card{background:var(--prime-surface)!important}
.account-ref-card-body{background:linear-gradient(180deg,#120c07,#0f0a06)!important}
.account-api-row{background:var(--prime-field)!important}
.pass-eye,.account-copy-key,.account-ref-crumb b,.account-ref-crumb em{color:var(--prime-orange-soft)!important}
.account-copy-key{border-color:var(--prime-line)!important;background:rgba(255,122,26,.08)!important}

/* ----- wallet / payments ----- */
.gw-row,.gw-tile,.gateway-opt,.check-line{
  background-color:var(--prime-field)!important;
  border-color:var(--prime-line-soft)!important;
}
.gw-row.selected,.gateway-opt.selected,.gw-tile.selected{
  background:rgba(255,122,26,.095)!important;
  border-color:var(--prime-orange)!important;
  box-shadow:0 0 0 1px rgba(255,122,26,.12)!important;
}

/* ----- bottom nav / drawer ----- */
.bottom-nav{
  background:rgba(9,6,4,.96)!important;
  border-color:var(--prime-line-soft)!important;
  box-shadow:0 -8px 28px rgba(0,0,0,.26)!important;
}
.bottom-nav a{color:var(--prime-muted)!important}
.bottom-nav a.active{color:var(--prime-orange-soft)!important}
.bottom-nav .bn-center{border-color:#0b0704!important;background:var(--gradient-btn)!important}
.mobile-menu.prime-drawer{
  background:
    radial-gradient(circle at 20% 6%,rgba(255,122,26,.10),transparent 26%),
    linear-gradient(180deg,#17100b 0%,#120c08 42%,#0e0906 100%)!important;
  border-color:var(--prime-line)!important;
}
.prime-user-card{background:linear-gradient(160deg,rgba(90,50,23,.22),rgba(15,10,7,.78))!important;border-color:rgba(233,173,91,.48)!important}
.prime-menu-group-head:hover,.prime-menu-group.open>.prime-menu-group-head{background:rgba(255,122,26,.07)!important}
.prime-menu-head-icon,.prime-drawer-close,.prime-user-balance{background:var(--gradient-btn)!important}
.prime-menu-items{border-color:var(--prime-line-soft)!important}

/* ============================================================
   ADMIN: same exact surface + accent system as the user panel
   ============================================================ */
.admin-body{background:var(--prime-bg)!important;color:var(--prime-text)!important}
.adm-sidebar{
  background:linear-gradient(180deg,#17100b 0%,#100b07 100%)!important;
  border-color:var(--prime-line-soft)!important;
}
.adm-brand{border-color:var(--prime-line-soft)!important}
.adm-nav a{color:var(--prime-text-2)!important}
.adm-nav a:hover{background:rgba(255,122,26,.08)!important;color:#fff!important}
.adm-nav a.active{
  background:linear-gradient(135deg,rgba(255,122,26,.20),rgba(123,51,13,.12))!important;
  border-color:var(--prime-line)!important;
  color:#fff!important;
  box-shadow:0 5px 18px rgba(255,122,26,.10)!important;
}
.adm-main,.adm-content{background:transparent!important}
.adm-topbar{background:rgba(12,8,5,.95)!important}
.top-search,.icon-btn{background:rgba(255,255,255,.025)!important;border-color:var(--prime-line-soft)!important}
.top-user{background:rgba(255,122,26,.055)!important;border-color:var(--prime-line-soft)!important}
.dash-card,.stat-box,.adm-server,.ao-card,.ao-cell,.ao-menu{
  background:linear-gradient(160deg,rgba(255,122,26,.035),rgba(255,255,255,0) 48%),var(--prime-surface)!important;
  border-color:var(--prime-line-soft)!important;
  color:var(--prime-text)!important;
}
.ao-filter{background:var(--gradient-btn)!important;color:#fff!important}
.ao-search input,.ao-menu{background-color:var(--prime-field)!important;border-color:var(--prime-line)!important}
.ao-menu button,.ao-menu a{color:var(--prime-text-2)!important}
.ao-menu button:hover,.ao-menu a:hover{background:rgba(255,122,26,.08)!important;color:#fff!important}
.ao-oid button,.ao-more{background:rgba(255,122,26,.10)!important;color:var(--prime-orange-soft)!important}
.ao-av{background:var(--gradient-btn)!important}
.adm-table,.adm-table td,.adm-table th{border-color:rgba(255,157,72,.08)!important}
.adm-table tr:hover td{background:rgba(255,122,26,.035)!important}
.dc-link{color:var(--prime-orange-soft)!important}

/* admin login uses the same card and field theme */
.admin-login-body{
  background:
    radial-gradient(circle at 75% 20%,rgba(255,122,26,.09),transparent 30%),
    var(--prime-bg)!important;
}
.admin-login-body .auth-card{background:var(--prime-surface)!important;border:1px solid var(--prime-line)!important;box-shadow:var(--prime-shadow)!important}

/* ----- auth/register consistency ----- */
.auth-shell{background:rgba(18,12,7,.94)!important;border-color:var(--prime-line)!important}
.auth-side{
  background:
    radial-gradient(circle at 25% 18%,rgba(255,146,69,.13),transparent 40%),
    linear-gradient(155deg,rgba(112,47,15,.32),rgba(17,11,7,.92))!important;
}
.auth-side .badge,.auth-features .f i{background:rgba(255,122,26,.10)!important;border-color:var(--prime-line-soft)!important;color:var(--prime-orange-soft)!important}
.auth-side p.lead,.auth-features .f span,.auth-panel .sub{color:var(--prime-text-2)!important}

/* ----- scrollbar follows theme ----- */
*{scrollbar-color:rgba(255,122,26,.38) rgba(255,255,255,.025)}
*::-webkit-scrollbar-thumb{background:rgba(255,122,26,.35);border-radius:999px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}

/* Do not recolor platform/brand identity or semantic alerts/statuses. */


/* V16 mobile render performance */
@media (max-width:900px){
  .card,.xo-card,.oc-card,.profile-card,.sidebar-card,.support-card{content-visibility:auto;contain-intrinsic-size:180px}
  *{ -webkit-tap-highlight-color:transparent; }
}

/* ============================================================
   V17 — Android/mobile rendering performance
   Fixed backgrounds + backdrop blur are expensive during touch scrolling.
   Surfaces stay visually dark/premium, but use cheap opaque compositing.
   ============================================================ */
@media (max-width:900px), (pointer:coarse) {
  html { scroll-behavior:auto !important; }
  body { background-attachment:scroll !important; }

  .header,
  .bottom-nav,
  .mobile-menu.prime-drawer,
  .sidebar-card,
  .hero,
  .cat-card,
  .product-card,
  .feature-item,
  .gateway-card,
  .addfunds-card,
  .xo-card,
  .plat-card,
  .support-card,
  .support-hero,
  .account-ref-card,
  .account-ref-hero,
  .auth-card,
  .toast {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Keep the expensive float/glow/shine disabled on mobile,
     but preserve the lightweight premium star sparkle. */
  .pu-badge--premium {
    animation:none !important;
  }
  .pu-badge--premium::before {
    animation:none !important;
  }
  .pu-badge--premium::after {
    display:block !important;
    animation:pu-twinkle 2.25s ease-in-out infinite !important;
    will-change:transform,opacity;
  }

  .card,
  .product-card,
  .cat-card,
  .feature-item,
  .support-card,
  .account-ref-card,
  .oc-item {
    content-visibility:auto;
    contain-intrinsic-size:120px;
  }
}