/* HK Ads Desk - GLASS (Harsh, 30 Oct 2026: "jahan jahan laga sakte ho laga do, premium look aana chahiye ... mujhe pasand hai
   glass effect"). Loaded LAST: it only restyles surfaces that already exist, never the layout.
   Rules: real blur (backdrop-filter) only on the big single surfaces (top bar, tab bar, menus, dialogs, the side panel, toasts,
   table frames, groups); the many small cards (client cards, attention cards, Reel rows) get the glass look from gradients and
   light edges alone, so long lists stay smooth on a phone. Each page tints the aurora behind it (body[data-page]).
   The Setup room and the Money power house keep their own 3D scenes: only their frames, buttons and panels change. */
:root{
  --gl-fill:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.018) 46%,rgba(255,255,255,.03));
  --gl-fill-strong:linear-gradient(160deg,rgba(30,34,42,.88),rgba(14,16,21,.86));
  --gl-line:rgba(255,255,255,.11);
  --gl-blur:blur(22px) saturate(165%);
  --gl-edge:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35);
  --gl-drop:0 22px 46px -26px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.45);
  --gl-a:#4c8dff;--gl-b:#d97757;--gl-c:#3ecf8e;
}

/* ---- the aurora behind every page (one fixed layer, painted once) */
body::before{content:"";position:fixed;inset:-10vh -10vw;z-index:-1;pointer-events:none;
  background:radial-gradient(42vw 38vw at 8% 18%,color-mix(in srgb,var(--gl-b) 22%,transparent),transparent 70%),
             radial-gradient(48vw 42vw at 96% 0%,color-mix(in srgb,var(--gl-a) 24%,transparent),transparent 70%),
             radial-gradient(40vw 36vw at 55% 108%,color-mix(in srgb,var(--gl-c) 14%,transparent),transparent 70%);
  filter:saturate(120%);animation:gl-breathe 30s ease-in-out infinite alternate}
@keyframes gl-breathe{to{transform:translate3d(2vw,1.5vh,0) scale(1.06)}}
body[data-page=money]{--gl-a:#2fbf7a;--gl-b:#3ecf8e;--gl-c:#a9d8f0}
body[data-page=critical]{--gl-a:#ff5f57;--gl-b:#d97757;--gl-c:#f0b44c}
body[data-page=boost]{--gl-a:#4c8dff;--gl-b:#7cc4ea;--gl-c:#3ecf8e}
body[data-page=clients]{--gl-a:#7c6cff;--gl-b:#4c8dff;--gl-c:#3ecf8e}
body[data-page=scripts]{--gl-a:#b07cff;--gl-b:#d97757;--gl-c:#4c8dff}
body[data-page=inspector],body[data-page=system]{--gl-a:#3ecf8e;--gl-b:#4c8dff;--gl-c:#a9d8f0}
body[data-page=room]{--gl-a:#4c8dff;--gl-b:#d97757;--gl-c:#a9d8f0}
body[data-page=bcontrol]::before{display:none}            /* Boost Control draws its own moving aurora */

/* ---- top bar: frosted, with a light seam */
.top{background:linear-gradient(180deg,rgba(14,16,20,.62),rgba(10,11,14,.5));-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-bottom:0;
  box-shadow:0 1px 0 rgba(255,255,255,.07),0 12px 30px -20px rgba(0,0,0,.9)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gl-a) 55%,transparent) 30%,color-mix(in srgb,var(--gl-b) 55%,transparent) 70%,transparent)}
.nav button.on{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.8)}
.searchbox input,.page input[type=search],.page input[type=text],.page input[type=number],.page select,.page textarea{background:rgba(255,255,255,.045);box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 1px var(--gl-line)}
.me,.insp-chip,.live{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- buttons */
.btn{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px var(--gl-line),0 6px 14px -10px rgba(0,0,0,.9)}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.btn.primary{background:linear-gradient(180deg,#ffffff,#d6dbe4);color:#0b0c0f;box-shadow:inset 0 1px 0 #fff,0 8px 20px -10px rgba(255,255,255,.45)}
.btn.danger{background:linear-gradient(180deg,rgba(255,95,87,.28),rgba(255,95,87,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,95,87,.4)}
.btn.ghost{background:rgba(255,255,255,.03)}
.chip{background:rgba(255,255,255,.025)}
.chip.on{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.12),0 8px 18px -10px rgba(0,0,0,.9)}
.seg{background:rgba(255,255,255,.035);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1px var(--gl-line)}

/* ---- the big glass surfaces (real blur) */
.card,.bstats,.tbl-wrap,.group,.empty,.studio>*{background:var(--gl-fill);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-edge),0 0 0 1px var(--gl-line),var(--gl-drop)}
.card,.bstats,.tbl-wrap{border-radius:18px}
.group{border-radius:16px}
.group+.group{margin-top:10px}
.group-h{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.tbl th{background:rgba(16,18,23,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover td{background:rgba(255,255,255,.03)}
.bstats .stat b,.stat b{text-shadow:0 0 26px currentColor}
.banner{-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(240,180,76,.28)}

/* ---- the many small cards: glass by light alone (no blur) */
.att-card,.cgrid .ccard,.reel{background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.015) 55%,rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--gl-line),0 18px 36px -24px rgba(0,0,0,.95)}
.att-card,.cgrid .ccard{border-radius:18px}
.reel{border-radius:12px}
.att-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--fx-x,30%) var(--fx-y,0%),rgba(255,255,255,.09),transparent 60%);opacity:.8}
.hud-card{background:linear-gradient(160deg,rgba(28,32,40,.66),rgba(10,12,16,.55));-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1),0 24px 46px -24px #000,0 0 40px -22px var(--hc,transparent)}
.hud-card b{text-shadow:0 0 24px color-mix(in srgb,var(--hc,#fff) 60%,transparent)}
.hud-card.fx-hover,.att-card.fx-hover,.cgrid .ccard.fx-hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.18),0 30px 60px -28px #000,0 0 46px -20px color-mix(in srgb,var(--hc,var(--gl-a)) 70%,transparent)}
.cgrid .ccard{--em-cut:rgba(18,20,25,.9)}
.reel .th{border-radius:9px;box-shadow:0 8px 18px -10px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}

/* ---- floating layers: menus, dialogs, the client panel, toasts */
.menu{background:var(--gl-fill-strong);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.12),0 30px 70px -24px #000}
.dialog-wrap,.overlay{background:rgba(4,5,8,.42);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
.dialog{background:var(--gl-fill-strong);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.12),0 50px 100px -30px #000}
.panel{background:linear-gradient(180deg,rgba(18,20,26,.84),rgba(9,10,13,.86));-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:-1px 0 0 rgba(255,255,255,.12),-50px 0 100px -30px #000}
.toast{background:var(--gl-fill-strong);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.12),0 24px 50px -18px #000}

/* ---- phone: a floating glass tab bar */
@media (max-width:820px){
  .tabbar{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px;border-radius:22px;border-top:0;
    background:linear-gradient(180deg,rgba(26,29,36,.72),rgba(12,13,17,.78));-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1),0 20px 40px -14px #000}
  .tabbar button{border-radius:16px}
  .page{padding-bottom:124px}
  body::before{animation:none}
  .card,.bstats,.tbl-wrap,.group,.empty{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(32,36,44,.78),rgba(14,16,21,.82))}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.bstats,.tbl-wrap,.group,.menu,.dialog,.panel,.toast,.top,.tabbar{background:#121418}
}