/* =====================================================================
   MALIK HEX · LIQUID GLASS
   Final design layer. Load AFTER premium.css on every page.
   Frosted, translucent surfaces with a light-catching rim, floating over
   a soft living colour field. Visual layer only: no logic changes.
   ===================================================================== */

html:root, html:root[data-theme] {
  /* Accent */
  --acc-rgb:124,134,255; --acc2-rgb:150,160,255; --acc3-rgb:108,104,240;
  --acc-c1:#9BA4FF; --acc-c2:#7C86FF; --acc-c3:#6563F0;
  --acc:#7C86FF; --acc-hi:#C3C8FF;
  --flip:linear-gradient(180deg,#959EFF 0%,#6E70F6 100%);
  --flip-soft:linear-gradient(135deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.05));
  --flip-edge:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.1) 30%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.3));
  --flip-c:var(--acc-c1); --flip-v:var(--acc); --flip-m:var(--acc-c3);
  --gold:#F1D28E; --gold-rgb:241,210,142;

  /* Base */
  --asphalt:#04050B; --carbon:#0B0D16; --graphite:#11141F; --steel:#191D2B; --chrome:#262B3B;
  --bg:var(--asphalt); --surface:transparent; --surface2:rgba(255,255,255,.04); --sheet:transparent; --pop:#121522;

  /* Glass recipe */
  --g-bg:linear-gradient(165deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 42%,rgba(255,255,255,.065) 100%);
  --g-bg-strong:linear-gradient(165deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,.09) 100%);
  --g-blur:blur(24px) saturate(185%);
  --g-blur-lite:blur(16px) saturate(170%);
  --g-shadow:inset 0 1px 1px rgba(255,255,255,.16),inset 0 -14px 28px -18px rgba(255,255,255,.10),0 22px 44px -22px rgba(0,0,0,.7),0 2px 8px -3px rgba(0,0,0,.35);
  --g-rim:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 20%,rgba(255,255,255,.03) 48%,rgba(255,255,255,.08) 76%,rgba(255,255,255,.34) 100%);
  --glass:var(--g-bg); --glass-hi:var(--g-bg-strong);
  --lift:var(--g-shadow); --lift-sm:var(--g-shadow);

  /* Text */
  --ink:#F5F6FA; --ink-2:#C9CDD8; --ink-3:#979DAE; --ink-4:#6B7184;
  --sub:var(--ink-2); --muted:var(--ink-3);

  /* Lines */
  --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.15); --line:var(--hair); --line-2:var(--hair2); --border:var(--hair);

  /* Status */
  --ok:#4ADE9A; --bad:#FF8089; --warn:#F7C25E; --info:var(--acc-hi);
  --ok-rgb:74,222,154; --bad-rgb:255,128,137; --warn-rgb:247,194,94;
  --ok-bg:rgba(var(--ok-rgb),.1); --bad-bg:rgba(var(--bad-rgb),.1); --warn-bg:rgba(var(--warn-rgb),.1); --info-bg:rgba(var(--acc-rgb),.1);

  /* Type */
  --display:'Plus Jakarta Sans','Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --body:'Plus Jakarta Sans','Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --disp:var(--display); --ui:var(--body);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --r-xl:26px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.3,1.4,.5,1);
  --gutter:16px;

  /* Icons (masks) */
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.6v.1'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 10.5v7'/%3E%3Cpath d='M12 6.4v.1'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.2-7.5 9.5-4.3-1.3-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* =====================================================================
   1. Living background
   ===================================================================== */
html{background:var(--asphalt)!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip!important}
body,body.hex-login-body{
  font-family:var(--body)!important;color:var(--ink)!important;letter-spacing:-.004em;
  background:transparent!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{
  content:''!important;position:fixed!important;inset:-12%!important;z-index:-2!important;pointer-events:none;opacity:1!important;
  background:
    radial-gradient(38% 30% at 18% 12%,rgba(96,92,246,.62),transparent 70%),
    radial-gradient(34% 28% at 88% 22%,rgba(168,85,247,.42),transparent 70%),
    radial-gradient(40% 30% at 12% 70%,rgba(34,211,238,.26),transparent 70%),
    radial-gradient(36% 30% at 86% 82%,rgba(236,72,153,.24),transparent 70%),
    radial-gradient(30% 22% at 55% 50%,rgba(241,210,142,.08),transparent 70%),
    var(--asphalt)!important;
  background-size:auto!important;
  animation:lgDrift 38s ease-in-out infinite alternate;will-change:transform}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,
    linear-gradient(180deg,rgba(4,5,11,0) 0%,rgba(4,5,11,.35) 100%)}
@keyframes lgDrift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(3%,-2%,0) scale(1.06) rotate(4deg)}
  100%{transform:translate3d(-3%,3%,0) scale(1.03) rotate(-3deg)}}
::selection{background:rgba(var(--acc-rgb),.45);color:#fff}
:focus-visible{outline:2px solid rgba(var(--acc-rgb),.9)!important;outline-offset:2px!important}
b,strong{font-weight:700}

.page,.wrap{
  padding-left:max(var(--gutter),env(safe-area-inset-left))!important;
  padding-right:max(var(--gutter),env(safe-area-inset-right))!important;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;
  max-width:560px!important;margin-inline:auto!important}
@media (min-width:720px){.page,.wrap{max-width:780px!important}}

/* =====================================================================
   2. The glass material
   ===================================================================== */
.hex-profile-shell,.hex-tool-list .svc-row,.blue-admin-row,.hex-login-card,.sec,.blue-stat,.gate,.grp,.bal,
.quota,.stats,.acc-list,.blue-match-list,.blue-account-card,.st-card,.design-live,.menu-live,.stats-grid,.account-list,
.hex-saved-list,.hex-auth-tabs,.tabs,.cf-box{
  position:relative;isolation:isolate;
  background:var(--g-bg)!important;
  -webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:var(--g-shadow)!important}
/* Light-catching rim (the signature edge of liquid glass) */
.hex-profile-shell::before,.hex-tool-list .svc-row::before,.blue-admin-row::before,.hex-login-card::before,.sec::before,
.blue-stat::before,.gate::before,.grp::before,.bal::before,.stats::before,.acc-list::before,.stats-grid::before,.account-list::before,
.hex-saved-list::before,.st-card::before,.menu-live::before,.design-live::before,.quota::before{
  content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:2!important;
  width:auto!important;height:auto!important;top:0!important;bottom:0!important;left:0!important;right:0!important;
  border-radius:inherit!important;padding:1px!important;pointer-events:none!important;opacity:1!important;
  background:var(--g-rim)!important;box-shadow:none!important;transform:none!important;filter:none!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hex-profile-shell::after,.hex-login-card::after,.sec::after,.gate::after{display:none!important}

/* =====================================================================
   3. Masthead + hero
   ===================================================================== */
.hex-masthead,.blue-masthead{
  position:sticky!important;top:calc(8px + env(safe-area-inset-top,0px));z-index:30;
  margin:calc(10px + env(safe-area-inset-top,0px)) 0 0!important;padding:12px 16px!important;border-radius:999px!important;
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  -webkit-backdrop-filter:blur(22px) saturate(190%)!important;backdrop-filter:blur(22px) saturate(190%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),0 14px 32px -18px rgba(0,0,0,.8)!important}
.hex-masthead::after,.blue-masthead::after{display:none!important}
.hex-signature,.blue-signature{display:flex!important;white-space:nowrap;min-width:0;align-items:baseline;justify-content:space-between;gap:10px;width:100%}
.hex-signature strong,.blue-signature,.hex-login-wordmark{
  font:800 16px/1.1 var(--display)!important;letter-spacing:-.01em!important;color:var(--ink)!important;
  -webkit-text-fill-color:currentColor!important;background:none!important}
.hex-signature strong em,.blue-signature em,.hex-login-wordmark span,.hex-login-wordmark>span{
  font-style:normal!important;color:var(--acc-hi)!important;-webkit-text-fill-color:var(--acc-hi)!important;background:none!important}
.hex-signature small,.blue-signature small,.hex-login-wordmark small{
  font:600 9.5px/1.4 var(--body)!important;letter-spacing:.14em!important;color:var(--ink-3)!important;margin:0!important}

.hex-hero{position:relative;display:block!important;padding:30px 4px 24px!important;margin:0!important}
.hex-hero h1,.hex-login-hero h1{
  font:800 clamp(32px,9vw,44px)/1.02 var(--display)!important;letter-spacing:-.04em!important;
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important;
  text-shadow:0 2px 30px rgba(var(--acc-rgb),.35)!important}
.hex-hero h1 em,.hex-login-hero h1 em{
  font-style:normal!important;background:linear-gradient(100deg,#C9CEFF 0%,#9EA6FF 45%,#E2B9FF 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.hex-hero-line{position:static!important;display:block!important;width:44px!important;height:4px!important;border-radius:4px!important;margin:16px 0 0!important;
  background:linear-gradient(90deg,#C3C8FF,#7C86FF)!important;box-shadow:0 0 16px rgba(var(--acc-rgb),.8)!important}
.hex-hero-caption{display:none!important}

/* =====================================================================
   4. Account card
   ===================================================================== */
.hex-profile-shell{padding:16px!important;border-radius:var(--r-xl)!important;overflow:visible!important;
  background:radial-gradient(130% 110% at 0% 0%,rgba(var(--acc-rgb),.16),transparent 60%),var(--g-bg-strong)!important}
.hex-connected{gap:12px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;align-items:center!important}
.hex-connected::before{display:none!important}
.hex-connected>div{min-width:0;flex:1}
.hex-connected-dot{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:16px!important;border:0!important;
  background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;color:#fff!important;font:800 14px/1 var(--display)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -6px 12px -6px rgba(0,0,0,.3),0 10px 22px -10px rgba(var(--acc-rgb),.9)!important}
.hex-connected-dot::before{background:var(--ok)!important;border:3px solid #1A1C2C!important;box-shadow:0 0 8px rgba(var(--ok-rgb),.8)!important}
.hex-connected small{font:700 9.5px/1.3 var(--body)!important;letter-spacing:.12em!important;color:var(--ink-3)!important}
.hex-connected b{display:block;font:700 15px/1.3 var(--body)!important;color:var(--ink)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px!important}
.hex-logout{min-height:36px!important;padding:0 14px!important;border-radius:999px!important;flex-shrink:0;
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:var(--ink)!important;
  font:600 12.5px/1 var(--body)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}
@media(hover:hover){.hex-logout:hover{color:var(--bad)!important;background:rgba(var(--bad-rgb),.12)!important}}
.hex-account-nav{margin-top:14px!important}
.hex-account-nav button{min-height:46px!important;border-radius:15px!important;
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;color:var(--ink)!important;
  font:600 13.5px/1 var(--body)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important}
.hex-account-details{margin:2px 0 4px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hex-account-details summary{font:600 13px/1.3 var(--body)!important;color:var(--ink-3)!important;min-height:44px!important;padding:12px 2px!important}

/* Balance: champagne glass */
.bal,.hex-profile-shell .bal{
  display:flex!important;margin-top:4px!important;padding:16px!important;border-radius:20px!important;gap:14px!important;align-items:center!important;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.16),rgba(var(--gold-rgb),.03) 65%),rgba(255,255,255,.03)!important;
  border:1px solid rgba(var(--gold-rgb),.14)!important}
.bal::before{background:linear-gradient(150deg,rgba(var(--gold-rgb),.7),rgba(var(--gold-rgb),.08) 30%,rgba(255,255,255,0) 55%,rgba(var(--gold-rgb),.3))!important}
.bal .ic{width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:15px!important;display:grid!important;place-items:center!important;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.35),rgba(var(--gold-rgb),.1))!important;border:1px solid rgba(var(--gold-rgb),.35)!important;
  color:var(--gold)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.35)!important}
.bal .ic svg{stroke:var(--gold)!important}
.bal .bt small{font:700 10px/1.3 var(--body)!important;letter-spacing:.12em!important;text-transform:uppercase;color:rgba(var(--gold-rgb),.8)!important}
.bal .bt b{display:block;margin-top:3px;font:800 25px/1.15 var(--display)!important;letter-spacing:-.025em!important;color:var(--gold)!important;
  -webkit-text-fill-color:var(--gold)!important;background:none!important;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(var(--gold-rgb),.35)}
.bal .bt b.err{font:600 13.5px/1.4 var(--body)!important;color:var(--bad)!important;-webkit-text-fill-color:var(--bad)!important;text-shadow:none;letter-spacing:0!important}

/* =====================================================================
   5. Section heading + tool rows (original list layout, in glass)
   ===================================================================== */
.gh,.gh.gap{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:12px;
  margin:30px 4px 14px!important;padding:0!important;font:800 19px/1.2 var(--display)!important;letter-spacing:-.025em!important;color:var(--ink)!important}
.gh::before{display:none!important}
.gh small{font:600 12px/1.2 var(--body)!important;color:var(--ink-3)!important;letter-spacing:0!important;text-transform:none!important}

.hex-tool-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
  padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hex-tool-list .svc-row{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;
  width:100%!important;min-height:78px!important;height:auto!important;margin:0!important;padding:14px 46px 14px 14px!important;text-align:left!important;
  border-radius:var(--r-lg)!important;border-top:1px solid rgba(255,255,255,.07)!important;cursor:pointer;
  -webkit-backdrop-filter:var(--g-blur-lite)!important;backdrop-filter:var(--g-blur-lite)!important;
  transition:transform .35s var(--spring),background .25s,box-shadow .25s!important}
.hex-tool-list .svc-row.hidden{display:none!important}
.hex-tool-list .svc-row.wide{grid-column:auto!important}
.hex-tool-list .svc-row .ic{
  width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:15px!important;margin:0!important;
  display:grid!important;place-items:center!important;color:#E4E7FF!important;font:800 16px/1 var(--display)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -8px 14px -10px rgba(var(--acc-rgb),.6),0 8px 18px -12px rgba(0,0,0,.8)!important}
.hex-tool-list .svc-row .ic svg{width:22px!important;height:22px!important;stroke:currentColor!important;fill:none;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
.hex-tool-list .svc-row .tx{display:block!important;flex:1;min-width:0;margin:0!important}
.hex-tool-list .svc-row .tx b{display:block;font:700 15px/1.25 var(--display)!important;letter-spacing:-.015em!important;color:var(--ink)!important}
.hex-tool-list .svc-row .tx small{display:block!important;margin-top:4px!important;font:500 12.5px/1.42 var(--body)!important;color:var(--ink-3)!important}
.hex-tool-list .svc-row .chev{display:none!important}
.hex-tool-list .svc-row::after{
  content:'';position:absolute;top:50%;right:16px;width:18px;height:18px;margin-top:-9px;background:var(--ink-3);
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;transition:transform .3s var(--spring),background .2s}
.hex-tool-list .svc-row .pill{position:static!important;margin:0 4px 0 0!important;flex-shrink:0;
  background:rgba(var(--ok-rgb),.14)!important;color:var(--ok)!important;border:1px solid rgba(var(--ok-rgb),.32)!important;
  font:700 10.5px/1 var(--body)!important;padding:6px 9px!important;border-radius:999px!important}
.hex-tool-list .svc-row .pill:empty{display:none!important}
.hex-tool-list .svc-row:active{transform:scale(.97)!important;background:var(--g-bg-strong)!important}
@media(hover:hover){
  .hex-tool-list .svc-row:hover{background:var(--g-bg-strong)!important;transform:translateY(-1px)}
  .hex-tool-list .svc-row:hover::after{background:var(--ink);transform:translateX(3px)}
}
/* Flagship row */
.hex-tool-list .svc-row.main{grid-column:1/-1!important;min-height:92px!important;padding:16px 52px 16px 16px!important;
  background:radial-gradient(120% 160% at 0% 0%,rgba(var(--acc-rgb),.42),rgba(var(--acc-rgb),.08) 55%,transparent 80%),var(--g-bg-strong)!important}
.hex-tool-list .svc-row.main .ic{width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:18px!important;color:#fff!important;
  background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;border:0!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -8px 14px -8px rgba(0,0,0,.3),0 14px 28px -12px rgba(var(--acc-rgb),1)!important}
.hex-tool-list .svc-row.main .ic svg{width:25px!important;height:25px!important;stroke-width:2!important}
.hex-tool-list .svc-row.main .tx b{font-size:17px!important}
.hex-tool-list .svc-row.main .tx small{color:var(--ink-2)!important}
.hex-tool-list .svc-row.main::after{background:var(--ink)}

@media (min-width:720px){
  .hex-tool-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .hex-tool-list:not(:has(#farmTile.hidden)) .svc-row.wide:not(.main){grid-column:1/-1!important}
}

.hex-credit{margin-top:36px!important;padding-top:20px!important;border-top:1px solid var(--hair)!important;text-align:center;
  font:500 12px/1.7 var(--body)!important;color:var(--ink-3)!important}
.hex-credit strong{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important;font-weight:700!important}

/* =====================================================================
   6. Service sheet (full-screen glass)
   ===================================================================== */
.sheet-back{background:rgba(3,4,10,.35)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}
.sheet{
  background:linear-gradient(180deg,rgba(14,16,28,.62),rgba(8,9,16,.74))!important;
  -webkit-backdrop-filter:blur(40px) saturate(180%)!important;backdrop-filter:blur(40px) saturate(180%)!important;
  border:0!important;box-shadow:none!important}
.sheet-bar{height:62px!important;background:none!important}
.grab{width:40px!important;height:5px!important;border-radius:5px!important;background:rgba(255,255,255,.22)!important}
.back,.x{
  top:12px!important;min-height:38px;color:var(--ink)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%)!important;backdrop-filter:blur(18px) saturate(180%)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 8px 18px -10px rgba(0,0,0,.8)!important}
.back{height:38px!important;border-radius:999px!important;font:600 13.5px/1 var(--body)!important;padding:0 14px 0 9px!important}
.back svg{stroke:var(--ink)!important}
.x{width:38px!important;height:38px!important;border-radius:50%!important}
.sheet-scroll{padding:2px max(16px,env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom,0px))!important}

.ph{padding:4px 2px 20px!important;margin-bottom:18px!important;border-bottom:1px solid var(--hair)!important}
.ph .ic{width:54px!important;height:54px!important;border-radius:18px!important;color:#fff!important;border:0!important;
  background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -8px 14px -8px rgba(0,0,0,.3),0 14px 28px -12px rgba(var(--acc-rgb),1)!important}
.ph .ic svg{stroke:#fff!important}
.ph h1,.design-heading h1{font:800 27px/1.12 var(--display)!important;letter-spacing:-.035em!important;color:var(--ink)!important}
.ph p{font:400 14px/1.6 var(--body)!important;color:var(--ink-2)!important;margin-top:8px}
.grp{border-radius:20px!important;overflow:visible!important}
.acc-row,.kv{border-color:var(--hair)!important}
.acc-row span,.kv span{color:var(--ink-3)!important}
.acc-row b,.kv b{color:var(--ink)!important;font-weight:600!important;overflow-wrap:anywhere}

/* =====================================================================
   7. Buttons
   ===================================================================== */
.btn,.hex-primary,.gate button{
  position:relative;overflow:hidden;min-height:54px!important;border-radius:18px!important;border:0!important;
  background:linear-gradient(180deg,rgba(160,168,255,.96) 0%,rgba(104,104,244,.96) 100%)!important;background-size:100% 100%!important;
  color:#fff!important;font:700 15.5px/1.2 var(--body)!important;letter-spacing:-.005em!important;text-shadow:0 1px 1px rgba(30,20,120,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -10px 18px -10px rgba(40,30,160,.55),
    0 16px 32px -14px rgba(var(--acc-rgb),.95),0 2px 6px -2px rgba(0,0,0,.4)!important;
  transition:transform .35s var(--spring),filter .2s,box-shadow .2s!important}
.btn:not(.quiet):not(.danger):not(.ghost):not(.secondary):not(.outline)::before,.hex-primary::before{
  content:''!important;position:absolute!important;inset:1px 8% auto 8%!important;height:48%!important;
  border-radius:16px 16px 40% 40% / 16px 16px 100% 100%!important;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0))!important;opacity:.75!important}
@media(hover:hover){.btn:not(.quiet):not(.ghost):not(.danger):hover,.hex-primary:hover{filter:brightness(1.07) saturate(1.1)!important}}
.btn:active,.hex-primary:active{transform:scale(.965)!important}
.btn:disabled,.hex-primary:disabled{opacity:.45!important;filter:saturate(.5)!important}
.btn .btn-label,.btn .btn-loading-text{color:inherit!important}
.btn.quiet,.btn.ghost,.btn.secondary,.btn.outline,.btn.btn-glass,.mini{
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;color:var(--ink)!important;text-shadow:none;
  border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%)!important;backdrop-filter:blur(18px) saturate(180%)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 10px 22px -16px rgba(0,0,0,.8)!important;font:600 15px/1.2 var(--body)!important}
.mini{min-height:36px!important;border-radius:12px!important;font-size:12.5px!important;padding:0 12px!important}
.btn.danger,.mini.danger,.mini.bad,.cancel-btn{
  background:linear-gradient(165deg,rgba(var(--bad-rgb),.18),rgba(var(--bad-rgb),.07))!important;color:#FFB1B7!important;text-shadow:none;
  border:1px solid rgba(var(--bad-rgb),.32)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.18)!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
.link,.vip-link{color:var(--acc-hi)!important;font-weight:600!important}
.panel .btn + .btn{margin-top:10px!important}
.panel .btn + .hint,.background-hint{margin:12px 2px 0!important;color:var(--ink-3)!important;font:400 13px/1.55 var(--body)!important}

/* =====================================================================
   8. Messages, status, toast, confirm
   ===================================================================== */
@keyframes lgIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.msg,.note-static{
  --tone:var(--acc-hi);--tone-rgb:var(--acc-rgb);
  position:relative;align-items:flex-start!important;gap:12px!important;
  padding:14px 16px 14px 14px!important;margin:0 0 16px!important;border-radius:18px!important;
  background:linear-gradient(120deg,rgba(var(--tone-rgb),.2),rgba(var(--tone-rgb),.06) 60%,rgba(255,255,255,.04))!important;
  -webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;
  border:1px solid rgba(var(--tone-rgb),.32)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 16px 32px -20px rgba(0,0,0,.85)!important;
  font:500 14px/1.5 var(--body)!important;color:var(--ink)!important;overflow-wrap:anywhere}
.msg.err,.msg.info,.msg.ok,.msg.warn{animation:lgIn .35s var(--spring) both!important}
.msg.ok{--tone:var(--ok);--tone-rgb:var(--ok-rgb)}
.msg.err{--tone:var(--bad);--tone-rgb:var(--bad-rgb)}
.msg.warn,.note-static{--tone:var(--warn);--tone-rgb:var(--warn-rgb)}
.msg-text,.note-static>span:last-child,.note-static strong{color:var(--ink)!important;font-weight:500!important}
.msg-icon,.note-static .msg-icon{
  position:relative;flex:0 0 26px!important;width:26px!important;height:26px!important;margin-top:-2px!important;border-radius:50%!important;
  background:linear-gradient(180deg,rgba(var(--tone-rgb),.55),rgba(var(--tone-rgb),.25))!important;border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 4px 12px -4px rgba(var(--tone-rgb),.8)!important;
  font-size:0!important;color:transparent!important;animation:none!important}
.msg-icon::before{content:'';position:absolute;inset:5px;background:#fff;-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.msg.ok .msg-icon::before{-webkit-mask-image:var(--i-check);mask-image:var(--i-check)}
.msg.err .msg-icon::before{-webkit-mask-image:var(--i-x);mask-image:var(--i-x)}
.msg.warn .msg-icon::before,.note-static .msg-icon::before{-webkit-mask-image:var(--i-warn);mask-image:var(--i-warn)}
.msg.info .msg-icon{background:none!important;border:2px solid rgba(var(--acc-rgb),.3)!important;border-top-color:var(--acc-hi)!important;box-shadow:none!important;
  animation:spin .8s linear infinite!important;width:20px!important;height:20px!important;flex-basis:20px!important;margin:1px 3px 0!important}
.msg.info .msg-icon::before{display:none}
.note-static{display:flex!important}
.note-static:not(:has(.msg-icon))::before{content:'';flex:0 0 26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,rgba(var(--warn-rgb),.55),rgba(var(--warn-rgb),.25));box-shadow:inset 0 1px 1px rgba(255,255,255,.45)}
.note-static:not(:has(.msg-icon))::after{content:'';position:absolute;left:19px;top:19px;width:16px;height:16px;background:#fff;-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat}

.hint{color:var(--ink-3)!important;font:400 13px/1.6 var(--body)!important}
.hint b,.hint strong{color:var(--ink)!important;font-weight:600!important}

.hex-status,.log,#slotsStatus:not(:empty){
  position:relative;padding:38px 16px 16px!important;margin:16px 0!important;border-radius:18px!important;
  background:rgba(2,3,8,.55)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
  border:1px solid rgba(255,255,255,.1)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.08),inset 0 8px 24px -16px rgba(0,0,0,.9)!important;
  font:500 12.5px/1.75 var(--mono)!important;color:var(--ink-2)!important;white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow:auto}
.hex-status::before,.log::before,#slotsStatus:not(:empty)::before{
  content:'STATUS';position:absolute;top:13px;left:16px;font:700 10px/1 var(--body);letter-spacing:.14em;color:var(--ink-3)}
.hex-status::after,.log::after,#slotsStatus:not(:empty)::after{
  content:'';position:absolute;top:13px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2),0 0 10px var(--acc)}
.menu-live p{white-space:pre-wrap;overflow-wrap:anywhere}

.toast{
  --tone:var(--acc-hi);--tone-rgb:var(--acc-rgb);
  left:max(16px,env(safe-area-inset-left))!important;right:max(16px,env(safe-area-inset-right))!important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;max-width:440px!important;margin:0 auto!important;
  display:flex!important;align-items:center;min-height:58px;padding:14px 18px 14px 56px!important;border-radius:22px!important;
  background:linear-gradient(120deg,rgba(var(--tone-rgb),.24),rgba(var(--tone-rgb),.07) 60%,rgba(255,255,255,.06)),rgba(20,22,34,.55)!important;
  -webkit-backdrop-filter:blur(26px) saturate(190%)!important;backdrop-filter:blur(26px) saturate(190%)!important;
  border:1px solid rgba(255,255,255,.16)!important;color:var(--ink)!important;font:600 14px/1.45 var(--body)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 26px 50px -18px rgba(0,0,0,.9)!important;
  transform:translateY(20px) scale(.96);transition:transform .45s var(--spring),opacity .25s!important}
.toast.show{transform:none!important}
.toast::before{content:'';position:absolute;left:16px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:linear-gradient(180deg,rgba(var(--tone-rgb),.6),rgba(var(--tone-rgb),.28));box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 4px 12px -4px rgba(var(--tone-rgb),.8)}
.toast::after{content:'';position:absolute;left:22px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;
  -webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.toast.ok{--tone:var(--ok);--tone-rgb:var(--ok-rgb)}
.toast.ok::after{-webkit-mask-image:var(--i-check);mask-image:var(--i-check)}
.toast.err{--tone:var(--bad);--tone-rgb:var(--bad-rgb)}
.toast.err::after{-webkit-mask-image:var(--i-x);mask-image:var(--i-x)}

.cf-back{background:rgba(3,4,10,.4)!important;-webkit-backdrop-filter:blur(14px) saturate(140%)!important;backdrop-filter:blur(14px) saturate(140%)!important;
  padding:20px!important;align-items:flex-end!important;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
@media(min-width:520px){.cf-back{align-items:center!important}}
.cf-box{max-width:380px!important;border-radius:30px!important;text-align:left!important;padding:24px 22px 20px!important;overflow:visible!important;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.06) 50%,rgba(255,255,255,.09)),rgba(22,24,40,.5)!important;
  -webkit-backdrop-filter:blur(34px) saturate(190%)!important;backdrop-filter:blur(34px) saturate(190%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 40px 80px -24px rgba(0,0,0,.95)!important;animation:lgIn .4s var(--spring) both!important}
.cf-box::before{content:'';display:block;width:48px;height:48px;border-radius:16px;margin-bottom:16px;
  background:linear-gradient(180deg,#A3AAFF,#6668F2);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 12px 26px -10px rgba(var(--acc-rgb),1)}
.cf-box::after{content:'';position:absolute;top:36px;left:34px;width:24px;height:24px;background:#fff;
  -webkit-mask:var(--i-shield) center/contain no-repeat;mask:var(--i-shield) center/contain no-repeat}
.cf-title{font:800 21px/1.25 var(--display)!important;letter-spacing:-.025em!important;margin:0 0 8px!important;color:var(--ink)!important}
.cf-text{font:500 14.5px/1.55 var(--body)!important;color:var(--ink-2)!important;margin:0 0 12px!important}
.cf-note:empty{display:none}
.cf-note{margin:0 0 20px!important;padding:10px 12px!important;border-radius:14px!important;
  background:rgba(var(--warn-rgb),.12)!important;border:1px solid rgba(var(--warn-rgb),.28)!important;color:#F8DCA2!important;font:500 12.5px/1.5 var(--body)!important}
.cf-row{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;padding:0!important;border:0!important}
.cf-row button{height:52px!important;border-radius:18px!important;font:700 15px/1 var(--body)!important;transition:transform .35s var(--spring)!important}
.cf-row button:active{transform:scale(.96)}
.cf-row button:focus:not(:focus-visible){outline:none!important}
.cf-row button.cf-no,.cf-row button:first-child{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;color:var(--ink)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.22)!important}
.cf-row button+button{background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 14px 28px -12px rgba(var(--acc-rgb),1)!important}

/* =====================================================================
   9. Forms
   ===================================================================== */
.hex-form label,.field label,.hex-login-card .hex-form label{font:600 12.5px/1.4 var(--body)!important;color:var(--ink-2)!important;letter-spacing:0!important}
.hex-form input:not([type=checkbox]):not([type=radio]),.hex-form select,.hex-login-card .hex-form input:not([type=checkbox]),.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,
.sec input:not([type=checkbox]):not([type=radio]):not([type=file]),.sec select,.sec textarea,.grp textarea{
  font:500 16px/1.3 var(--body)!important;min-height:50px;border-radius:15px!important;color:var(--ink)!important;
  background:rgba(0,0,0,.22)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06)!important;
  transition:border-color .18s,box-shadow .18s,background .18s!important}
.row-field input,.pw input{font-size:16px!important}
input:focus,select:focus,textarea:focus{border-color:rgba(var(--acc-rgb),.75)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 0 4px rgba(var(--acc-rgb),.2)!important;outline:none!important}
.row-field:focus-within{background:rgba(var(--acc-rgb),.06)!important}
.row-field:focus-within .fi{stroke:var(--acc-hi)!important}
input::placeholder,textarea::placeholder{color:var(--ink-4)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)!important}

.tabs,.hex-auth-tabs{border-radius:16px!important;padding:4px!important;gap:4px}
.hex-auth-tabs{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr}
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;flex:1 0 auto}
.blue-admin-home #tabs{display:none!important}
.tabs::before,.hex-auth-tabs::before{display:none!important}
.tabs button,.hex-auth-tabs button{border-radius:12px!important;min-height:40px;color:var(--ink-3)!important;font:600 13.5px/1 var(--body)!important;
  background:none!important;border:0!important;box-shadow:none!important;transition:background .25s,color .2s}
.tabs button.on,.hex-auth-tabs button.on{color:var(--ink)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.08))!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 6px 14px -6px rgba(0,0,0,.6)!important}
.chips button.on,.seg button.on{background:rgba(var(--acc-rgb),.2)!important;border-color:rgba(var(--acc-rgb),.5)!important;color:var(--ink)!important}

.vip-btn{border-radius:0!important;background:none!important}
.vip-btn+.vip-btn{border-top:1px solid var(--hair)!important}
.vip-btn.selected{background:linear-gradient(90deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),0))!important}
.vip-btn .vb-icon{border-radius:13px!important;color:#E4E7FF!important;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.12)!important}
.vip-btn .vb-title{font:700 14.5px/1.3 var(--display)!important;color:var(--ink)!important}
.vip-btn .vb-desc{color:var(--ink-3)!important;font:500 12.5px/1.5 var(--body)!important}
.vip-btn.selected::after{background:linear-gradient(180deg,#A3AAFF,#6668F2)!important}

/* =====================================================================
   10. Stats, admin, job page
   ===================================================================== */
.stat b,.stat-value,.st-card b,.blue-stat b{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.025em!important;font-variant-numeric:tabular-nums}
.stat span,.stat-label,.st-card small,.blue-stat span{font:600 11px/1.3 var(--body)!important;color:var(--ink-3)!important;letter-spacing:.04em!important}
.job-badge,.status-badge,.blue-badge{font:700 11px/1 var(--body)!important;letter-spacing:.06em!important;border-radius:999px!important;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;border:1px solid rgba(255,255,255,.16)!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.job-badge.completed,.job-badge.done{background:rgba(var(--ok-rgb),.16)!important;color:var(--ok)!important;border-color:rgba(var(--ok-rgb),.35)!important}
.job-badge.failed,.job-badge.cancelled,.job-badge.interrupted{background:rgba(var(--bad-rgb),.14)!important;color:var(--bad)!important;border-color:rgba(var(--bad-rgb),.35)!important}
progress::-webkit-progress-value{background:linear-gradient(90deg,#C3C8FF,#7C86FF)!important}
progress::-moz-progress-bar{background:linear-gradient(90deg,#C3C8FF,#7C86FF)!important}

.blue-stats{gap:10px!important}
.blue-stat{padding:16px!important;min-height:94px;border-radius:22px!important}
.blue-stat b{display:block;margin-top:8px;font-size:28px!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important}
.blue-stat:first-child b{color:var(--acc-hi)!important;-webkit-text-fill-color:var(--acc-hi)!important}
.blue-admin-menu{gap:10px!important}
.blue-admin-row{min-height:78px!important;border-radius:var(--r-lg)!important;-webkit-backdrop-filter:var(--g-blur-lite)!important;backdrop-filter:var(--g-blur-lite)!important;
  transition:transform .35s var(--spring),background .25s!important}
.blue-admin-row:active{transform:scale(.97)}
.blue-admin-row b{font:700 15px/1.3 var(--display)!important;color:var(--ink)!important}
.blue-admin-row small{font:500 12.5px/1.45 var(--body)!important;color:var(--ink-3)!important}
.blue-menu-icon{border-radius:15px!important;color:#E4E7FF!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -8px 14px -10px rgba(var(--acc-rgb),.6)!important}
.blue-chevron{color:var(--ink-3)!important}
@media(hover:hover){.blue-admin-row:hover{background:var(--g-bg-strong)!important}}
.top h1,.blue-intro h1{font:800 30px/1.1 var(--display)!important;letter-spacing:-.035em!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important}
.blue-intro .blue-icon,.badge{background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 12px 26px -10px rgba(var(--acc-rgb),1)!important}
.sec{padding:20px!important;border-radius:var(--r-xl)!important}
.sec h2{font:800 17px/1.3 var(--display)!important;letter-spacing:-.02em!important;color:var(--ink)!important}
.blue-footer{color:var(--ink-3)!important}

.ring-fill{stroke:var(--acc-hi)!important;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.8))}
.ring-track{stroke:rgba(255,255,255,.1)!important}
.ring-pct{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.03em}
.title{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.025em}
.stat-value.green{color:var(--ok)!important}
.acc-dot.done{background:var(--ok)!important}
.acc-dot.failed{background:var(--bad)!important}
.acc-mini-fill{background:linear-gradient(90deg,#C3C8FF,#7C86FF)!important}
.hex-progress-brand strong{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important;font-family:var(--display)!important;font-weight:800!important}
html:root[data-theme] body:has(> .panel){background:transparent!important}
.panel:has(.ring-wrap){background:var(--g-bg)!important;-webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;
  border:1px solid rgba(255,255,255,.12)!important;box-shadow:var(--g-shadow)!important}

/* =====================================================================
   11. Login — locked to one screen, no page scroll
   ===================================================================== */
html:has(body.hex-login-body){height:100%;overflow:hidden;overscroll-behavior:none}
body.hex-login-body{
  position:fixed!important;inset:0!important;margin:0!important;overflow:hidden!important;overscroll-behavior:none;
  height:var(--tg-viewport-height,100dvh)!important;min-height:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left))!important;
  box-sizing:border-box!important}
.hex-login-card{
  width:min(100%,410px)!important;max-width:100%!important;max-height:100%!important;margin:0!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:clamp(18px,3.2vh,28px) clamp(18px,5vw,24px)!important;border-radius:32px!important;
  background:radial-gradient(130% 70% at 0% 0%,rgba(var(--acc-rgb),.2),transparent 60%),var(--g-bg-strong)!important;
  -webkit-backdrop-filter:blur(34px) saturate(190%)!important;backdrop-filter:blur(34px) saturate(190%)!important}
.hex-login-card::-webkit-scrollbar{display:none}
.hex-login-card>*{flex-shrink:0}
.hex-login-wordmark{display:flex!important;align-items:baseline;gap:6px;flex-wrap:wrap}
.hex-login-wordmark small{display:block!important;width:100%;margin-top:6px!important}
.hex-login-hero{padding:clamp(10px,2.6vh,22px) 0 clamp(8px,2vh,18px)!important;margin:0!important;display:block!important}
.hex-login-hero h1{font-size:clamp(26px,min(8.4vw,4.8vh),38px)!important}
.hex-login-hero .hex-hero-line{margin-top:clamp(10px,1.6vh,16px)!important}
.hex-login-eyebrow{display:none!important}
.hex-login-card>h1,#hexAuthHeading{font:800 clamp(19px,2.8vh,22px)/1.2 var(--display)!important;letter-spacing:-.025em!important;margin:clamp(6px,1.4vh,12px) 0 6px!important;color:var(--ink)!important}
.hex-login-intro{color:var(--ink-2)!important;font:400 13.5px/1.5 var(--body)!important;margin:0!important}
.hex-auth-tabs{margin:clamp(12px,2.2vh,20px) 0 clamp(10px,1.8vh,16px)!important}
.hex-auth-panel{min-height:0}
.hex-auth-panel[hidden]{display:none!important}
.hex-login-card .hex-form{display:flex!important;flex-direction:column;gap:clamp(8px,1.5vh,14px)!important;margin:0!important}
.hex-login-card .hex-form label{display:flex!important;flex-direction:column;gap:6px;margin:0!important}
.hex-login-card .hex-form input:not([type=checkbox]){min-height:clamp(44px,6.2vh,52px)!important;padding:0 14px!important;width:100%}
.hex-login-card .hex-form label.hex-remember{flex-direction:row!important;align-items:center!important;gap:10px!important;font:600 13.5px/1.3 var(--body)!important;color:var(--ink-2)!important;cursor:pointer}
.hex-remember input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 22px;width:22px!important;height:22px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:7px!important;
  background:rgba(0,0,0,.25)!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)!important;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.hex-remember input[type=checkbox]:checked{background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;border-color:transparent!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 4px 10px -4px rgba(var(--acc-rgb),1)!important}
.hex-remember input[type=checkbox]:checked::after{content:'';width:14px;height:14px;background:#fff;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.hex-password-field{position:relative;display:block!important}
.hex-password-field input{padding-right:70px!important}
.hex-password-field button{position:absolute!important;right:6px;top:50%;transform:translateY(-50%);height:34px;padding:0 12px!important;border-radius:11px!important;
  color:var(--ink)!important;font:600 12.5px/1 var(--body)!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2)!important}
.hex-remember{flex-direction:row!important;align-items:center;gap:10px!important;color:var(--ink-2)!important;font-weight:600!important}
.hex-remember input{width:20px;height:20px;margin:0}
.hex-login-card .hex-primary{min-height:clamp(48px,6.6vh,56px)!important;width:100%;display:flex!important;align-items:center;justify-content:center;gap:8px;margin-top:2px}
.hex-saved-list{border-radius:20px!important;overflow:hidden;max-height:min(42vh,320px);overflow-y:auto!important;scrollbar-width:none;padding:0!important}
.hex-saved-list::-webkit-scrollbar{display:none}
.hex-saved-row{border-color:var(--hair)!important;background:none!important}
.hex-saved-avatar{background:linear-gradient(180deg,#A3AAFF,#6668F2)!important;color:#fff!important;border-radius:13px!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 8px 16px -8px rgba(var(--acc-rgb),1)!important}
.hex-saved-remove{border-radius:12px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;color:var(--ink-2)!important}
.hex-saved-empty{color:var(--ink-3)!important;padding:16px!important}
.hex-login-message{margin:clamp(8px,1.6vh,14px) 0 0!important;padding:0 2px!important;min-height:0!important;text-align:center;
  font:500 12.5px/1.5 var(--body)!important;color:var(--ink-3)!important;background:none!important;border:0!important;box-shadow:none!important}
.hex-login-message:empty{display:none}
.hex-login-credit{margin-top:clamp(10px,2vh,18px)!important;padding-top:clamp(10px,1.8vh,16px)!important;border-top:1px solid var(--hair)!important;
  text-align:center;color:var(--ink-3)!important;font:500 11px/1.5 var(--body)!important}
.hex-login-credit strong,.hex-owner-credit strong{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important}
@media (max-height:780px){ .hex-login-intro{display:none!important} }
@media (max-height:700px){ .hex-login-hero .hex-hero-line{display:none!important} .hex-login-hero{padding-bottom:4px!important} }
@media (max-height:600px){ .hex-login-hero{display:none!important} .hex-login-credit{display:none!important} }

/* Gate */
.gate{border-radius:28px!important;padding:26px 22px!important}
.gate h1{font:800 24px/1.2 var(--display)!important;letter-spacing:-.025em!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;background:none!important}
.gate p{color:var(--ink-2)!important}

/* =====================================================================
   12. Small screens + motion
   ===================================================================== */
@media (max-width:360px){
  :root{--gutter:12px}
  .hex-profile-shell{padding:14px!important}
  .hex-hero{padding-top:22px!important}
  .hex-tool-list .svc-row{padding:12px 40px 12px 12px!important;gap:12px!important}
  .hex-tool-list .svc-row .ic{width:42px!important;height:42px!important;flex-basis:42px!important}
  .hex-connected small{letter-spacing:.06em!important}
  .ph h1{font-size:24px!important}
}
@media (prefers-reduced-transparency:reduce){
  .hex-profile-shell,.hex-tool-list .svc-row,.blue-admin-row,.hex-login-card,.sec,.blue-stat,.gate,.grp,.cf-box,.sheet,.toast{background:#14172A!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.blue-masthead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px}
.blue-badge{flex-shrink:0;white-space:nowrap}
@media (max-width:440px){ .blue-masthead .blue-signature small{display:none!important} }
@media (max-width:340px){ .hex-signature small{display:none!important} }

.blue-masthead{position:relative!important;top:auto!important}
.blue-signature{display:block!important;overflow:hidden;text-overflow:ellipsis}