/* HK Ads Desk - Boost Control (boostpanel.js): 3D glass. Every surface is a pane of frosted glass over a soft aurora;
   tiles lean toward the pointer (--rx/--ry) and catch a sheen where it is (--mx/--my). Motion stops for reduced motion. */
.bp-root{--g-bg:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 46%,rgba(255,255,255,.035));
  --g-line:rgba(255,255,255,.12);--g-top:rgba(255,255,255,.22);--g-blur:blur(22px) saturate(160%);
  --g-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 24px 48px -26px rgba(0,0,0,.9),0 2px 6px -2px rgba(0,0,0,.5);
  --orange:#d97757;position:relative;isolation:isolate}
.bp-aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bp-aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.33;animation:bp-drift 26s ease-in-out infinite alternate}
.bp-aura i:nth-child(1){width:520px;height:520px;left:-120px;top:60px;background:radial-gradient(circle,#d97757,transparent 65%)}
.bp-aura i:nth-child(2){width:600px;height:600px;right:-160px;top:-120px;background:radial-gradient(circle,#4c8dff,transparent 65%);animation-duration:32s}
.bp-aura i:nth-child(3){width:460px;height:460px;left:38%;bottom:-200px;background:radial-gradient(circle,#3ecf8e,transparent 65%);opacity:.2;animation-duration:38s}
@keyframes bp-drift{to{transform:translate3d(60px,40px,0) scale(1.12)}}

.bp-card{background:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-radius:18px;box-shadow:var(--g-shadow),0 0 0 1px var(--g-line);position:relative}
.bp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(160deg,var(--g-top),transparent 38%,transparent 70%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.bp-head h1{font-size:34px;font-weight:500;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,#b9c2d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.bp-kicker{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;
  padding:4px 10px;border-radius:99px;background:rgba(217,119,87,.1);box-shadow:0 0 0 1px rgba(217,119,87,.25) inset}

/* the four glass tiles */
.bp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px;perspective:1000px}
.bp-tile{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:20px;display:flex;flex-direction:column;gap:2px;min-height:132px;
  background:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow),0 0 0 1px var(--g-line);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.bp-tile:hover{box-shadow:var(--g-shadow),0 0 0 1px rgba(255,255,255,.2),0 30px 60px -30px var(--tone-glow,rgba(0,0,0,.9))}
.bp-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bp-tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.26),transparent 32%) border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.bp-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.14),transparent 60%)}
.bp-tile:hover .bp-sheen{opacity:1}
.bp-gl{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;transform:translateZ(30px);
  background:linear-gradient(160deg,var(--tone-a),var(--tone-b));box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 18px -8px var(--tone-glow)}
.bp-gl .ic{width:18px;height:18px;color:#fff}
.bp-tl{font-size:12.5px;color:var(--soft);transform:translateZ(18px)}
.bp-tile b{font-size:40px;font-weight:300;letter-spacing:-.05em;line-height:1.05;color:var(--tone-c);transform:translateZ(26px);text-shadow:0 0 28px var(--tone-glow)}
.bp-tile small{font-size:12px;color:var(--muted);transform:translateZ(12px)}
.bp-tile.warn{--tone-a:#f6c56a;--tone-b:#d98a22;--tone-c:#f6c56a;--tone-glow:rgba(240,180,76,.45)}
.bp-tile.ice{--tone-a:#9fd4f5;--tone-b:#4c8dff;--tone-c:#a9d8f0;--tone-glow:rgba(124,196,234,.45)}
.bp-tile.good{--tone-a:#64e3a8;--tone-b:#1f9d66;--tone-c:#5be0a2;--tone-glow:rgba(62,207,142,.45)}
.bp-tile.bad{--tone-a:#ff8a7a;--tone-b:#e0443c;--tone-c:#ff7b70;--tone-glow:rgba(255,95,87,.5)}
.bp-tile.idle{--tone-a:#8a93a3;--tone-b:#4b5260;--tone-c:var(--soft);--tone-glow:rgba(120,130,150,.3)}

/* the two big switches */
.bp-switches{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.bp-sw{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:16px;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--text);
  background:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow),0 0 0 1px var(--g-line);transition:box-shadow .25s,transform .2s}
.bp-sw:hover{transform:translateY(-1px)}
.bp-sw.on{box-shadow:var(--g-shadow),0 0 0 1px rgba(62,207,142,.35),0 12px 30px -16px rgba(62,207,142,.6)}
.bp-sw i{flex:none;width:46px;height:26px;border-radius:99px;position:relative;transition:background .25s;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(255,255,255,.05));box-shadow:0 1px 3px rgba(0,0,0,.6) inset,0 0 0 1px rgba(255,255,255,.08)}
.bp-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;transition:transform .3s cubic-bezier(.3,1.4,.5,1),background .25s;
  background:radial-gradient(circle at 35% 30%,#fff,#c9ced8 60%,#9aa1ad);box-shadow:0 2px 6px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.6) inset}
.bp-sw.on i{background:linear-gradient(180deg,#1f9d66,#3ecf8e);box-shadow:0 0 14px rgba(62,207,142,.55),0 1px 2px rgba(0,0,0,.4) inset}
.bp-sw.on i::after{transform:translateX(20px)}
.bp-sw span{display:flex;flex-direction:column;line-height:1.3}
.bp-sw small{color:var(--muted);font-size:12px}
.bp-sw.sm{padding:4px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* the glass tab bar with a sliding pill */
.bp-bar{gap:12px;align-items:center}
.bp-seg{position:relative;display:inline-flex;padding:4px;border-radius:14px;background:rgba(255,255,255,.035);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:0 1px 2px rgba(0,0,0,.5) inset,0 0 0 1px var(--g-line);overflow-x:auto;max-width:100%;scrollbar-width:none}
.bp-seg button{position:relative;z-index:1;border:0;background:none;color:var(--soft);font:inherit;font-size:13px;font-weight:500;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:color .2s}
.bp-seg button.on{color:#fff}
.bp-seg button b{margin-left:7px;font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted);padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.06)}
.bp-seg button.on b{color:#fff;background:rgba(217,119,87,.35)}
.bp-seg-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:10px;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.bp-bar input[type=search]{border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--g-line)}

/* Reel cards */
.bp-root .group.bp-card{margin-bottom:14px;overflow:hidden}
.bp-root .group.bp-card .group-h{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.bp-reel{border-radius:14px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),background .2s}
.bp-reel:hover{background:rgba(255,255,255,.035)}
.bp-reel .th{border-radius:10px;box-shadow:0 10px 20px -10px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.bp-list .bp-reel{margin-bottom:10px;padding:12px}
.bp-auto{display:inline-block;font-size:11px;font-weight:600;color:var(--good);background:var(--goodbg);padding:1px 7px;border-radius:5px;box-shadow:0 0 10px rgba(62,207,142,.25)}
.bp-err{color:var(--bad);font-size:12.5px;margin-top:3px}
.bp-words{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.bp-root .btn.primary{background:linear-gradient(180deg,#fff,#d8dde6);color:#0b0c0f;box-shadow:0 1px 0 #fff inset,0 6px 16px -8px rgba(255,255,255,.5)}
.btn.bp-live{background:linear-gradient(180deg,#ec8c6b,#d06a49);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px -8px rgba(217,119,87,.8)}
.btn.bp-live:hover{filter:brightness(1.08)}
.bp-root .tablewrap.bp-card{padding:4px 6px;overflow:auto}
.bp-root .tbl th{background:transparent}
tr.bp-past td{background:rgba(62,207,142,.05)}

/* the boost dialog and rules */
.bp-one{margin:10px 0 14px;padding:10px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--hair2)}
.bp-form{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.bp-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);flex:1 1 110px;min-width:0}
.bp-form input{width:100%;box-sizing:border-box}
.bp-dft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 16px;margin-bottom:10px}
.bp-dft label{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:13px}
.bp-rules input[type=number]{padding:6px 9px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid var(--hair2);color:var(--text);font:inherit;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.4) inset}
.bp-save{display:flex;justify-content:flex-end;margin-top:14px}

@media (max-width:900px){.bp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.bp-words{max-width:60vw}.bp-sw{flex:1 1 100%}.bp-tile{min-height:116px;padding:14px}.bp-tile b{font-size:32px}.bp-head h1{font-size:28px}.bp-aura i{filter:blur(70px)}}
@media (prefers-reduced-motion:reduce){.bp-aura i{animation:none}.bp-tile,.bp-reel{transform:none!important}}
