/* =====================================================================
   MALIK HEX · PREMIUM — "Chameleon"
   Inspired by colour-shift (flip-flop) car paint: a cyan → violet →
   magenta sheen used only where it matters (primary actions, active
   state, progress, brand). Everything else is smoked glass on asphalt.
   Load LAST on every page. Visual layer only: no markup changes needed.
   ===================================================================== */

html:root, html:root[data-theme] {
  /* Base */
  --asphalt:#04050A;
  --carbon:#0A0C14;
  --graphite:#10131E;
  --steel:#181C2B;
  --chrome:#252B3F;

  /* Paint */
  --flip-c:var(--acc-c1);           /* cyan face  */
  --flip-v:var(--acc-c2);           /* violet mid */
  --flip-m:var(--acc-c3);           /* magenta flank */
  --flip:linear-gradient(115deg,var(--acc-c1) 0%,var(--acc-c2) 50%,var(--acc-c3) 100%);
  --flip-soft:linear-gradient(115deg,rgba(var(--acc2-rgb),.16),rgba(var(--acc-rgb),.14) 50%,rgba(var(--acc3-rgb),.14));
  --flip-edge:linear-gradient(135deg,rgba(var(--acc2-rgb),.85),rgba(var(--acc-rgb),.35) 30%,rgba(255,255,255,.06) 55%,rgba(var(--acc3-rgb),.7));
  --chrome-text:linear-gradient(180deg,#FFFFFF 0%,#E3E7F2 45%,#9AA3BD 100%);

  /* Text */
  --ink:#F3F5FB; --ink-2:#C2C8DA; --ink-3:#8A92AC; --ink-4:#5D6580;
  --sub:var(--ink-2); --muted:var(--ink-3); --fg:var(--ink); --fg2:var(--ink-2); --fg3:var(--ink-3);

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

  /* Status */
  --ok:#3EE0A1; --bad:#FF6A86; --warn:#FFC461; --info:var(--acc-hi);
  --success:var(--ok); --danger:var(--bad); --running:var(--flip-v); --accent:var(--flip-v);
  --ok-bg:rgba(62,224,161,.09); --bad-bg:rgba(255,106,134,.09); --warn-bg:rgba(255,196,97,.08); --info-bg:rgba(var(--acc-rgb),.11);

  /* Re-map legacy tokens so older layers inherit the new look */
  --bg:var(--asphalt); --surface:var(--carbon); --surface2:var(--graphite); --sheet:#070810; --pop:#0E1019;
  --s0:var(--asphalt); --s1:var(--carbon); --s2:var(--graphite); --s3:var(--steel);
  --brass:var(--flip-v); --brass2:var(--acc-hi); --brass-ink:#0A0B12; --brass-bg:var(--info-bg);
  --neon:var(--flip-v); --neon-hot:var(--acc-hi); --neon-soft:var(--acc-hi);
  --icbg:var(--steel); --icring:var(--hair2); --tint:var(--graphite); --vbg:var(--steel); --edge:rgba(var(--acc-rgb),.5);
  --glow:rgba(var(--acc-rgb),.22); --glow-1:rgba(var(--acc-rgb),.12); --glow-2:rgba(var(--acc-rgb),.26); --glow-3:rgba(var(--acc-rgb),.45);
  --mesh1:rgba(var(--acc-rgb),.10); --mesh2:rgba(var(--acc2-rgb),.05); --mesh3:rgba(var(--acc3-rgb),.04);
  --hex-spectrum:var(--flip);
  --ring-bg:var(--steel);

  /* Surfaces */
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 40%,rgba(255,255,255,0)),var(--carbon);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 45%,rgba(255,255,255,0)),var(--graphite);
  --lift:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.6),0 22px 44px -26px rgba(0,0,0,.95);
  --lift-sm:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px -20px rgba(0,0,0,.9);

  /* Type */
  --display:'Unbounded','Manrope',system-ui,sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --disp:var(--display); --ui:var(--body);
  --num:'Manrope',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Radius hierarchy: shells > rows > controls > chips */
  --r-xl:26px; --r-lg:20px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

/* ---------- Canvas ---------------------------------------------------- */
html{background:var(--asphalt)!important}
body,body.hex-login-body{
  background:
    radial-gradient(120% 55% at 100% -8%,rgba(var(--acc-rgb),.16),transparent 60%),
    radial-gradient(80% 40% at -20% 10%,rgba(var(--acc2-rgb),.08),transparent 65%),
    radial-gradient(90% 45% at 50% 115%,rgba(var(--acc3-rgb),.07),transparent 70%),
    var(--asphalt)!important;
  background-attachment:fixed!important;
  color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'tnum' 0,'ss01' 1;
}
/* Fine paint-grain so dark areas don't band on OLED screens */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image: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 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important;
  background-size:160px 160px!important;
}
::selection{background:rgba(var(--acc-rgb),.45);color:#fff}
:focus-visible{outline:2px solid var(--flip-v)!important;outline-offset:3px}

.page{max-width:560px!important;padding-inline:18px!important;padding-top:calc(22px + env(safe-area-inset-top,0px))!important}

/* ---------- Brand / masthead ----------------------------------------- */
.hex-masthead,.blue-masthead{border-bottom:0!important;padding:0 0 16px!important;margin:0 0 6px!important}
.hex-masthead::after,.blue-masthead::after{
  height:1px!important;box-shadow:none!important;opacity:1!important;
  background:linear-gradient(90deg,rgba(var(--acc2-rgb),.6),rgba(var(--acc-rgb),.35) 35%,rgba(255,255,255,.04) 80%)!important}
.hex-signature strong,.blue-signature{
  font:600 17px/1 var(--display)!important;letter-spacing:.02em!important;color:var(--ink)!important}
.hex-signature strong em,.blue-signature em{
  font-style:normal;text-shadow:none!important;
  background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hex-signature small,.blue-signature small{
  margin-top:8px!important;font:500 11px/1.2 var(--body)!important;letter-spacing:.04em!important;color:var(--ink-3)!important;text-transform:none}

/* Hero headline: chrome lettering on a paint stripe */
.hex-hero{padding:18px 0 34px!important;margin:0 0 14px!important}
.hex-hero h1{
  font:600 clamp(30px,8.6vw,44px)/1.02 var(--display)!important;letter-spacing:-.035em!important;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-wrap:balance;padding-bottom:.06em}
.hex-hero h1 em{
  font-style:normal;text-shadow:none!important;color:transparent!important;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text}
.hex-hero-line{
  left:0!important;right:auto!important;width:min(64%,260px);bottom:18px!important;height:3px!important;border-radius:3px!important;
  background:var(--flip)!important;box-shadow:0 0 18px rgba(var(--acc-rgb),.55),0 0 2px rgba(var(--acc2-rgb),.8)!important}
.hex-hero-caption{font:500 10.5px/1 var(--body)!important;letter-spacing:.08em!important;color:var(--ink-4)!important;left:0!important}

/* ---------- Hero account card (the one showpiece container) ---------- */
.hex-profile-shell{
  padding:18px!important;border-radius:var(--r-xl)!important;border:1px solid transparent!important;
  background:linear-gradient(160deg,#0E1120,#07080F) padding-box,var(--flip-edge) border-box!important;
  box-shadow:0 30px 60px -30px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.4),0 18px 70px -40px rgba(var(--acc-rgb),.55)!important}
.hex-profile-shell::before{filter:grayscale(1) contrast(1.1) brightness(.5)!important;opacity:.55!important}
.hex-profile-shell::after{
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(var(--acc-rgb),.30),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(var(--acc2-rgb),.14),transparent 60%),
    linear-gradient(160deg,rgba(6,7,14,.88),rgba(6,7,14,.94))!important}

.hex-connected{gap:14px!important}
.hex-connected-dot{
  width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:15px!important;border:0!important;
  background:var(--flip)!important;color:#0A0B12!important;font:700 14px var(--display)!important;
  box-shadow:0 10px 26px -10px rgba(var(--acc-rgb),.8),inset 0 1px 0 rgba(255,255,255,.6)!important;position:relative}
.hex-connected-dot::before{content:'';position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--ok);border:3px solid #090A12}
.hex-connected small{font:600 11px/1.3 var(--body)!important;letter-spacing:.02em!important;color:var(--ink-3)!important}
.hex-connected b{font:600 15px/1.35 var(--body)!important;color:var(--ink)!important;margin-top:3px!important}
.hex-logout{
  border-radius:99px!important;padding:9px 14px!important;font:600 12px/1 var(--body)!important;
  background:rgba(255,255,255,.04)!important;border:1px solid var(--hair2)!important;color:var(--ink-2)!important}
.hex-logout:hover{border-color:rgba(255,106,134,.5)!important;color:var(--bad)!important}

.hex-account-nav{margin:6px 0 10px!important}
.hex-account-nav button{
  min-height:46px!important;border-radius:14px!important;font:600 13px/1 var(--body)!important;
  background:rgba(255,255,255,.035)!important;border:1px solid var(--hair2)!important;color:var(--ink)!important;
  display:flex;align-items:center;justify-content:center;gap:8px}
.hex-account-nav button::after{content:'';width:7px;height:7px;border-right:1.6px solid var(--ink-3);border-top:1.6px solid var(--ink-3);transform:rotate(45deg);margin-left:2px}
.hex-account-nav button:hover{background:rgba(var(--acc-rgb),.10)!important;border-color:rgba(var(--acc-rgb),.5)!important}

.hex-account-details summary{font:600 12.5px/1.6 var(--body)!important;color:var(--ink-3)!important;list-style:none;display:flex;align-items:center;gap:8px}
.hex-account-details summary::-webkit-details-marker{display:none}
.hex-account-details summary::before{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
.hex-account-details[open] summary::before{transform:rotate(45deg)}

/* Balance — the number gets the paint */
.bal,.hex-profile-shell .bal{
  margin:12px 0 0!important;padding:16px!important;border-radius:18px!important;
  background:rgba(255,255,255,.035)!important;border:1px solid var(--hair)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.bal .ic{background:var(--steel)!important;border:1px solid var(--hair2)!important;color:var(--flip-c)!important;border-radius:13px!important;box-shadow:none!important}
.bal .bt small{font:600 11.5px/1.2 var(--body)!important;color:var(--ink-3)!important;letter-spacing:.02em}
.bal .bt b{
  font:600 24px/1.2 var(--display)!important;letter-spacing:-.02em;margin-top:6px!important;
  background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-variant-numeric:tabular-nums}
.bal .bt b.err{background:none;color:var(--bad)!important;font:500 13px/1.4 var(--body)!important}
.bal-btn{background:var(--steel)!important;border:1px solid var(--hair2)!important;box-shadow:none!important;color:var(--ink)!important}

/* ---------- Section headings ----------------------------------------- */
.gh,.gh.gap{
  font:600 15px/1.2 var(--display)!important;letter-spacing:-.01em!important;color:var(--ink)!important;
  margin:30px 2px 14px!important;gap:10px!important}
.gh::before{width:18px!important;height:3px!important;border-radius:3px;background:var(--flip)!important;box-shadow:0 0 10px rgba(var(--acc-rgb),.6)!important}
.gh small{font:500 12px/1.2 var(--body)!important;color:var(--ink-3)!important}

/* ---------- Tool menu ------------------------------------------------- */
.hex-tool-list{gap:10px!important}
.hex-tool-list .svc-row,.svc-row,.blue-admin-row{
  min-height:80px!important;padding:16px 16px 16px 16px!important;gap:14px!important;
  border-radius:var(--r-lg)!important;border:1px solid var(--hair)!important;
  background:var(--glass)!important;box-shadow:var(--lift-sm)!important;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)!important}
.svc-row::before,.blue-admin-row::before{display:none!important}
.hex-tool-list .svc-row:active,.blue-admin-row:active{transform:scale(.985)!important}
@media(hover:hover){
  .hex-tool-list .svc-row:hover,.blue-admin-row:hover{
    border-color:rgba(var(--acc-rgb),.38)!important;
    background:linear-gradient(180deg,rgba(var(--acc-rgb),.08),rgba(255,255,255,.01) 60%),var(--carbon)!important;
    box-shadow:var(--lift-sm),0 0 0 1px rgba(var(--acc-rgb),.1),0 16px 40px -24px rgba(var(--acc-rgb),.6)!important}
}
.svc-row .tx b,.hex-tool-list .tx b,.blue-admin-row b{font:600 14px/1.3 var(--display)!important;letter-spacing:-.005em!important;color:var(--ink)!important}
.svc-row .tx small,.hex-tool-list .tx small,.blue-admin-row small{font:500 12.5px/1.45 var(--body)!important;color:var(--ink-3)!important;margin-top:5px!important}

.svc-row .ic,.hex-tool-list .svc-row .ic,.blue-menu-icon,.blue-admin-row .blue-menu-icon{
  width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:14px!important;
  background:linear-gradient(180deg,#1D2235,#121521)!important;border:1px solid var(--hair2)!important;
  color:var(--acc-hi)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px -8px rgba(0,0,0,.9)!important}
.svc-row .chev,.hex-tool-list .chev,.blue-chevron{color:var(--ink-4)!important;transition:transform .2s var(--ease),color .2s}
.svc-row:hover .chev{color:var(--ink-2)!important;transform:translateX(2px)}
.svc-row .pill,.hex-tool-list .pill{
  background:rgba(62,224,161,.12)!important;color:var(--ok)!important;border:1px solid rgba(62,224,161,.3);
  font:700 10.5px/1 var(--body)!important;padding:5px 9px!important;border-radius:99px!important}

/* Flagship tool: painted edge + paint chip icon */
.hex-tool-list .svc-row.main{
  border:1px solid transparent!important;
  background:linear-gradient(160deg,rgba(var(--acc-rgb),.14),rgba(var(--acc2-rgb),.03) 45%,transparent 70%) padding-box,
             linear-gradient(180deg,#0E1120,#0A0C14) padding-box,var(--flip-edge) border-box!important;
  box-shadow:var(--lift),0 20px 50px -30px rgba(var(--acc-rgb),.75)!important;min-height:92px!important}
.hex-tool-list .svc-row.main .ic{background:var(--flip)!important;color:#0A0B12!important;border:0!important;
  box-shadow:0 10px 24px -10px rgba(var(--acc-rgb),.9),inset 0 1px 0 rgba(255,255,255,.6)!important}
.hex-tool-list .svc-row.main .ic svg{stroke-width:2!important}
.hex-tool-list .svc-row.main .tx b{font-size:15.5px!important}
.hex-tool-list .svc-row.main .chev{color:var(--ink)!important}

/* Credit footer */
.hex-credit{border-top:1px solid var(--hair)!important;margin-top:34px!important;color:var(--ink-4)!important;font:500 12px/1.7 var(--body)!important}
.hex-credit strong{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important;letter-spacing:.04em!important}
.hex-credit span{letter-spacing:.06em!important;text-transform:none!important;font-size:11px!important}

/* ---------- Containers ----------------------------------------------- */
.grp,.quota,.sec,.blue-match-list,.blue-stat,.acc-list,.stats,.gate{
  border:1px solid var(--hair)!important;border-radius:var(--r-lg)!important;
  background:var(--glass)!important;box-shadow:var(--lift)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.grp>*+*{border-top-color:var(--hair)!important}
.acc-row{padding:16px 18px!important;font-size:14.5px!important}
.acc-row span{color:var(--ink-3)!important;font-weight:500}
.acc-row b{font-weight:600!important;color:var(--ink)!important}

/* ---------- Bottom sheet --------------------------------------------- */
.sheet-back{background:rgba(2,3,8,.72)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{
  max-width:600px!important;border-radius:30px 30px 0 0!important;border:1px solid transparent!important;border-bottom:0!important;
  background:
    radial-gradient(110% 260px at 50% -40px,rgba(var(--acc-rgb),.18),transparent 70%) padding-box,
    linear-gradient(180deg,#0B0D17,#06070D 260px) padding-box,
    linear-gradient(180deg,rgba(190,200,255,.22),rgba(190,200,255,.04) 120px,transparent) border-box!important;
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.9),0 -10px 60px -30px rgba(var(--acc-rgb),.5)!important}
.sheet-bar{background:none!important;height:58px!important}
.grab{width:44px!important;height:5px!important;background:rgba(255,255,255,.18)!important;box-shadow:none!important}
.back,.x{
  background:rgba(255,255,255,.05)!important;border:1px solid var(--hair2)!important;box-shadow:none!important;color:var(--ink)!important;top:12px!important;
  backdrop-filter:blur(10px)}
.back{font:600 13.5px/1 var(--body)!important;padding:0 14px 0 8px!important;height:36px!important}
.back svg{stroke:var(--ink-2)!important}
.x{width:36px!important;height:36px!important}
.sheet-scroll{padding:0 18px calc(40px + env(safe-area-inset-bottom,0px))!important}

/* Panel header */
.ph{padding:6px 2px 22px!important;margin-bottom:20px!important;border-bottom:1px solid var(--hair)!important}
.ph .ic{
  width:56px!important;height:56px!important;border-radius:18px!important;background:var(--flip)!important;color:#0A0B12!important;border:0!important;
  box-shadow:0 14px 34px -12px rgba(var(--acc-rgb),.85),inset 0 1px 0 rgba(255,255,255,.6)!important}
.ph .ic svg{stroke-width:1.9!important}
.ph h1,.design-heading h1{
  font:600 26px/1.1 var(--display)!important;letter-spacing:-.03em!important;color:var(--ink)!important;text-shadow:none!important}
.ph p{font:400 14px/1.6 var(--body)!important;color:var(--ink-2)!important;max-width:60ch}

/* ---------- Buttons --------------------------------------------------- */
.btn,.hex-primary,.gate button{
  position:relative;overflow:hidden;min-height:54px!important;height:auto;
  border:0!important;border-radius:16px!important;
  background:var(--flip)!important;background-size:135% 100%!important;background-position:0% 50%!important;
  color:#0A0B12!important;font:700 14.5px/1.2 var(--body)!important;letter-spacing:.01em!important;
  box-shadow:0 16px 34px -16px rgba(var(--acc-rgb),.9),0 4px 14px -6px rgba(var(--acc2-rgb),.4),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.15)!important;
  transition:background-position .5s var(--ease),transform .12s var(--ease),filter .2s,box-shadow .2s!important}
.btn:not(.quiet):not(.danger):not(.ghost):not(.secondary):not(.outline)::before,.hex-primary::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 50%)}
@media(hover:hover){.btn:hover,.hex-primary:hover{background-position:100% 50%!important;filter:none!important}}
.btn:active,.hex-primary:active{transform:scale(.982)!important}
.btn:disabled,.hex-primary:disabled{opacity:.42!important;filter:saturate(.6)!important;box-shadow:none!important}
.hex-primary{padding:0 20px!important}

.btn.quiet,.btn.ghost,.btn.secondary,.btn.outline,.btn.btn-glass,.mini{
  background:rgba(255,255,255,.04)!important;color:var(--ink)!important;
  border:1px solid var(--hair2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  font:600 14px/1.2 var(--body)!important;min-height:50px!important}
@media(hover:hover){.btn.quiet:hover,.btn.ghost:hover,.mini:hover{background:rgba(var(--acc-rgb),.10)!important;border-color:rgba(var(--acc-rgb),.45)!important}}
.mini{min-height:36px!important;border-radius:10px!important;font-size:12.5px!important}
.btn.danger,.mini.danger,.mini.bad{
  background:rgba(255,106,134,.08)!important;color:#FF8FA4!important;border:1px solid rgba(255,106,134,.32)!important;
  box-shadow:none!important;font:600 14px/1.2 var(--body)!important}
.btn.loading::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)!important}
.link,.vip-link{color:var(--acc-hi)!important;font-weight:700!important}
.link{background:rgba(255,255,255,.04)!important;box-shadow:none!important;border:1px solid var(--hair2)!important}

/* ---------- Messages -------------------------------------------------- */
.msg,.note-static{
  position:relative;gap:12px!important;padding:14px 16px 14px 14px!important;margin:0 0 16px!important;
  border-radius:16px!important;font:500 14px/1.5 var(--body)!important;
  border:1px solid var(--hair2)!important;
  background:linear-gradient(100deg,var(--tone-bg,rgba(var(--acc-rgb),.12)),rgba(255,255,255,.02) 70%),var(--carbon)!important;
  box-shadow:inset 3px 0 0 var(--tone,var(--flip-v)),0 16px 34px -24px rgba(0,0,0,1)!important;
  animation:pmsg .35s var(--ease) both}
@keyframes pmsg{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.msg-text,.note-static>span:last-child{color:var(--ink)!important}
.msg-icon,.note-static .msg-icon{
  width:24px!important;height:24px!important;margin-top:-1px!important;border-radius:8px!important;
  font:800 12px/1 var(--body)!important;color:#0A0B12!important;background:var(--tone,var(--flip-v))!important;
  box-shadow:0 0 16px -2px var(--tone,var(--flip-v))}
.msg.ok{--tone:var(--ok);--tone-bg:rgba(62,224,161,.13);border-color:rgba(62,224,161,.28)!important}
.msg.err{--tone:var(--bad);--tone-bg:rgba(255,106,134,.14);border-color:rgba(255,106,134,.3)!important}
.msg.warn,.note-static{--tone:var(--warn);--tone-bg:rgba(255,196,97,.12);border-color:rgba(255,196,97,.28)!important}
.msg.info{--tone:var(--flip-v);--tone-bg:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.32)!important}
.msg.info .msg-icon{background:none!important;border:2px solid var(--flip-v)!important;border-top-color:transparent!important;border-radius:50%!important;width:20px!important;height:20px!important;margin:1px 2px 0!important;box-shadow:none}

/* Admin toast */
.toast{
  border-radius:16px!important;padding:14px 16px!important;font:600 14px/1.45 var(--body)!important;color:var(--ink)!important;
  background:linear-gradient(100deg,var(--tone-bg,rgba(var(--acc-rgb),.16)),rgba(255,255,255,.02) 70%),#0E1019!important;
  border:1px solid var(--hair2)!important;
  box-shadow:inset 3px 0 0 var(--tone,var(--flip-v)),0 24px 50px -16px rgba(0,0,0,.95)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.toast.ok{--tone:var(--ok);--tone-bg:rgba(62,224,161,.14)}
.toast.err{--tone:var(--bad);--tone-bg:rgba(255,106,134,.15)}

/* Login / status lines */
.hex-login-message{color:var(--ink-3)!important;font:500 12.5px/1.6 var(--body)!important}

/* ---------- Confirm dialog ------------------------------------------- */
.cf-back{background:rgba(2,3,8,.78)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cf-box{
  max-width:340px!important;border-radius:26px!important;border:1px solid transparent!important;
  background:radial-gradient(120% 120px at 50% 0,rgba(var(--acc-rgb),.22),transparent 80%) padding-box,
             linear-gradient(180deg,#121524,#0B0D16) padding-box,
             linear-gradient(180deg,rgba(190,200,255,.28),rgba(190,200,255,.06)) border-box!important;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.95),0 0 60px -30px rgba(var(--acc-rgb),.6)!important}
.cf-title{font:600 20px/1.2 var(--display)!important;letter-spacing:-.02em!important;margin:26px 24px 10px!important}
.cf-text{color:var(--ink)!important;font:500 15px/1.5 var(--body)!important}
.cf-note{color:var(--ink-3)!important}
.cf-row{border-top:0!important;gap:10px;padding:0 16px 16px}
.cf-row button{height:50px!important;border-radius:14px!important;font:700 15px/1 var(--body)!important}
.cf-row button.cf-no,.cf-row button:first-child{background:rgba(255,255,255,.05)!important;border:1px solid var(--hair2)!important;color:var(--ink-2)!important}
.cf-row button+button{border-left:0!important;background:var(--flip)!important;color:#0A0B12!important;box-shadow:0 12px 26px -12px rgba(var(--acc-rgb),.9),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- Forms ----------------------------------------------------- */
.hex-form label,.field label,.hex-login-card .hex-form label{
  font:600 12px/1.4 var(--body)!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--ink-2)!important;gap:8px!important}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,
.hex-form input,.hex-form select,.hex-login-card .hex-form input{
  background:rgba(0,0,0,.35)!important;border:1px solid var(--hair2)!important;border-radius:14px!important;
  color:var(--ink)!important;font:500 16px/1.4 var(--body)!important;min-height:52px;padding:13px 15px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)!important;transition:border-color .2s,box-shadow .2s,background .2s}
.row-field input,.grp textarea,.pw input{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0;padding:0}
.grp textarea{padding:16px!important;font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace!important;color:var(--ink-2)!important;background:transparent!important}
input:focus,select:focus,textarea:focus{
  border-color:rgba(var(--acc-rgb),.75)!important;background:rgba(var(--acc-rgb),.06)!important;
  box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16)!important;outline:none}
.row-field:focus-within{background:rgba(var(--acc-rgb),.06)!important;box-shadow:inset 3px 0 0 var(--flip-v)!important}
.row-field:focus-within .fi{stroke:var(--acc-hi)!important}
input::placeholder,textarea::placeholder{color:var(--ink-4)!important}
select{appearance:none;-webkit-appearance:none;padding-right:40px!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
input[type=checkbox],input[type=radio]{accent-color:var(--flip-v)}
input[type=date]{color-scheme:dark}
.hint{color:var(--ink-3)!important;font:400 13px/1.6 var(--body)!important}
.hint code{background:var(--steel)!important;box-shadow:none!important;border:1px solid var(--hair2);color:var(--acc-hi)}
.hint strong{color:var(--warn)}

/* Stats day picker row */
#statsBody .grp input[type=date]{flex:1 1 130px;width:auto;min-height:44px!important;padding:8px 12px!important}
#statsBody .grp .btn.ghost{min-height:44px!important;height:44px!important}
.hex-login-hero .hex-hero-caption{bottom:-2px!important}

/* Live status logs */
.hex-status,.log{
  background:rgba(0,0,0,.4)!important;border:1px solid var(--hair)!important;border-left:0!important;border-radius:16px!important;
  box-shadow:inset 3px 0 0 var(--flip-v)!important;color:var(--ink-2)!important;
  font:500 12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace!important;padding:16px 16px 16px 18px!important}

/* ---------- VIP toggles ---------------------------------------------- */
.vip-btn{min-height:72px!important;padding:14px 84px 14px 16px!important;background:transparent!important;color:var(--ink)!important;transition:background .2s}
.vip-btn.selected{background:linear-gradient(90deg,rgba(var(--acc-rgb),.10),transparent 70%)!important;box-shadow:none!important}
.vip-btn .vb-icon{width:42px!important;height:42px!important;border-radius:13px!important;background:var(--steel)!important;border:1px solid var(--hair2)!important;color:var(--acc-hi)!important}
.vip-btn.selected .vb-icon{background:var(--flip)!important;color:#0A0B12!important;border-color:transparent!important}
.vip-btn .vb-title{font:600 14px/1.3 var(--display)!important;letter-spacing:-.005em}
.vip-btn .vb-desc{font:400 12.5px/1.45 var(--body)!important;color:var(--ink-3)!important;margin-top:3px}
.vip-btn::after{width:52px!important;height:30px!important;margin-top:-15px!important;border-radius:99px!important;background:var(--steel)!important;box-shadow:inset 0 0 0 1px var(--hair2)!important}
.vip-btn::before{width:24px!important;height:24px!important;margin-top:-12px!important;right:41px!important;background:#E7EAF4!important;box-shadow:0 2px 6px rgba(0,0,0,.5)!important}
.vip-btn.selected::after{background:var(--flip)!important;box-shadow:0 0 18px -4px rgba(var(--acc-rgb),.9)!important}
.vip-btn.selected::before{background:#fff!important}
.vip-bar{color:var(--ink-3)!important;font:600 13px/1 var(--body)!important}

/* ---------- Progress -------------------------------------------------- */
.ring{
  width:168px!important;height:168px!important;
  background:conic-gradient(from -90deg,var(--acc-c1),var(--acc-c2) calc(var(--pct)*.55%),var(--acc-c3) calc(var(--pct)*1%),var(--steel) 0)!important;
  box-shadow:0 0 60px -20px rgba(var(--acc-rgb),.6)}
.ring>div{width:146px!important;height:146px!important;background:radial-gradient(circle at 50% 30%,#10131F,#07080F)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ring b{font:600 34px/1 var(--display)!important;letter-spacing:-.04em;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.ring span{color:var(--ink-3)!important}
.job-badge{font:700 12px/1 var(--body)!important;padding:7px 14px!important;border:1px solid var(--hair2);background:rgba(255,255,255,.04)!important;box-shadow:none!important}
.job-badge.running{background:rgba(var(--acc-rgb),.12)!important;color:var(--acc-hi)!important;border-color:rgba(var(--acc-rgb),.4)}
.job-badge.completed,.job-badge.done{background:rgba(62,224,161,.1)!important;color:var(--ok)!important;border-color:rgba(62,224,161,.35)}
.job-badge.failed,.job-badge.cancelled,.job-badge.interrupted{background:rgba(255,106,134,.1)!important;color:var(--bad)!important;border-color:rgba(255,106,134,.35)}
.stats{gap:1px!important;background:var(--hair)!important;overflow:hidden}
.stat{background:var(--carbon)!important;padding:16px 18px!important}
.stat b{font:600 20px/1.15 var(--display)!important;letter-spacing:-.02em}
.stat span{color:var(--ink-3)!important;font-size:12.5px!important}
.quota b{background:var(--flip)!important;-webkit-background-clip:text!important;background-clip:text!important;font-family:var(--display)!important}
.quota .q-bar{background:var(--steel)!important}
.quota .q-bar i{background:var(--flip)!important;box-shadow:0 0 14px rgba(var(--acc-rgb),.7)!important}
progress,#hexCreateProgress,.design-live progress,.menu-live progress{
  -webkit-appearance:none;appearance:none;height:6px!important;border:0;border-radius:99px;overflow:hidden;background:var(--steel)!important;accent-color:var(--flip-v)}
progress::-webkit-progress-bar{background:var(--steel)!important;border-radius:99px}
progress::-webkit-progress-value{background:var(--flip)!important;border-radius:99px}
progress::-moz-progress-bar{background:var(--flip)!important;border-radius:99px}
.hex-live-banner{color:var(--acc-hi)!important;font:700 11px/1.5 var(--body)!important;letter-spacing:.06em!important}
.hex-live-banner i,.design-live i{background:var(--ok)!important;box-shadow:0 0 0 4px rgba(62,224,161,.15),0 0 12px var(--ok)!important;animation:plive 1.8s ease-in-out infinite}
@keyframes plive{50%{box-shadow:0 0 0 7px rgba(62,224,161,0),0 0 12px var(--ok)}}

.acc-list{padding:0 18px!important}
.acc-dot.run{background:var(--flip-v)!important;box-shadow:0 0 0 4px rgba(var(--acc-rgb),.2)!important}
.acc-email{font-weight:600!important}

/* ---------- Stats ----------------------------------------------------- */
.st-cards{gap:10px!important}
.st-card{background:var(--glass)!important;border:1px solid var(--hair)!important;border-radius:18px!important;box-shadow:var(--lift-sm)!important;padding:14px 10px!important}
.st-card small{font:600 11px/1.2 var(--body)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--ink-3)!important}
.st-card b{font:600 17px/1.1 var(--display)!important;letter-spacing:-.03em;color:var(--ink)!important}
.st-card:last-child b{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.st-chart{gap:5px!important;height:110px!important;padding:16px 14px 0!important}
.st-chart i{background:var(--steel)!important;border-radius:6px 6px 3px 3px!important}
.st-chart i.on{background:linear-gradient(180deg,var(--acc-c1),var(--acc-c2) 55%,var(--acc-c3))!important;box-shadow:0 0 14px -4px rgba(var(--acc-rgb),.8)}
.st-h{font:600 14px/1.2 var(--display)!important;letter-spacing:-.01em}
.st-h small{color:var(--ink-3)!important;font-family:var(--body)!important}
.st-row .who,.adm-row .who{font:600 13.5px/1.3 var(--body)!important}
.st-row .amt{font:700 14px/1 var(--body)!important;font-variant-numeric:tabular-nums}

/* ---------- Copy design studio --------------------------------------- */
.design-heading{border-bottom:1px solid var(--hair)!important}
.design-kicker{font:600 11px/1.3 var(--body)!important;letter-spacing:.04em!important;color:var(--ink-3)!important}
.design-heading h1 span{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important;font-size:17px!important;letter-spacing:-.01em}
.design-heading p{color:var(--ink-2)!important;font-size:13.5px!important}
.design-step h2{font:600 15px/1.3 var(--display)!important;letter-spacing:-.01em}
.design-step h2>span{background:var(--steel)!important;border:1px solid var(--hair2)!important;color:var(--acc-hi)!important;border-radius:10px!important;font:700 11px/1 var(--body)!important;padding:7px 8px!important}
.design-routes button,.design-modes button{
  background:var(--glass)!important;border:1px solid var(--hair)!important;border-radius:var(--r-lg)!important;box-shadow:var(--lift-sm)!important;
  transition:border-color .2s,background .2s,transform .15s!important}
.design-routes strong,.design-modes strong{font-family:var(--display)!important;font-weight:600!important;letter-spacing:-.01em}
.design-routes strong span{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.design-routes small{font:600 10.5px/1.2 var(--body)!important;letter-spacing:.04em!important;color:var(--ink-4)!important}
.design-routes em,.design-modes small{color:var(--ink-3)!important;font-size:12px!important}
.design-routes button[aria-pressed=true],.design-modes button[aria-pressed=true]{
  border:1px solid transparent!important;
  background:linear-gradient(160deg,rgba(var(--acc-rgb),.16),transparent 60%) padding-box,linear-gradient(180deg,#0F1222,#0A0C14) padding-box,var(--flip-edge) border-box!important;
  box-shadow:0 18px 40px -24px rgba(var(--acc-rgb),.8)!important}
.design-symbol{background:var(--steel)!important;border:1px solid var(--hair2)!important;color:var(--acc-hi)!important;border-radius:12px!important}
.design-modes button[aria-pressed=true] .design-symbol{background:var(--flip)!important;color:#0A0B12!important;border-color:transparent!important}
.design-live,.menu-live{background:var(--glass)!important;border:1px solid var(--hair)!important;border-radius:var(--r-lg)!important;box-shadow:var(--lift-sm)!important}
.design-live-top{color:var(--acc-hi)!important;font:700 11px/1 var(--body)!important;letter-spacing:.06em!important}
.blue-account-card{background:rgba(0,0,0,.25)!important;border:1px solid var(--hair2)!important;border-radius:18px!important}
.blue-account-card legend{color:var(--acc-hi)!important;font:700 11px/1 var(--body)!important;letter-spacing:.04em}
.blue-match-row span{color:var(--acc-hi)!important}

/* ---------- Login ----------------------------------------------------- */
.hex-login-card{
  width:min(100%,440px)!important;padding:28px 24px!important;border-radius:30px!important;border:1px solid transparent!important;
  background:radial-gradient(120% 200px at 100% 0,rgba(var(--acc-rgb),.18),transparent 70%) padding-box,
             linear-gradient(180deg,#0D0F1B,#08090F) padding-box,var(--flip-edge) border-box!important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1),0 20px 80px -50px rgba(var(--acc-rgb),.7)!important}
.hex-login-wordmark{font:600 16px/1 var(--display)!important;letter-spacing:.02em!important}
.hex-login-wordmark span,.hex-login-wordmark>span{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hex-login-wordmark small{font:500 11px/1.3 var(--body)!important;letter-spacing:.04em!important;color:var(--ink-3)!important;margin-top:8px!important}
.hex-login-hero{padding:22px 0 30px!important;margin:6px 0 10px!important}
.hex-login-hero h1{font-size:clamp(28px,8vw,38px)!important}
.hex-login-eyebrow{display:none}
.hex-login-card>h1,#hexAuthHeading{font:600 21px/1.2 var(--display)!important;letter-spacing:-.02em!important;margin:0 0 8px!important;color:var(--ink)!important}
.hex-login-intro{color:var(--ink-2)!important;font:400 14px/1.6 var(--body)!important}
.hex-auth-tabs{background:rgba(0,0,0,.35)!important;border:1px solid var(--hair2)!important;border-radius:16px!important;padding:5px!important}
.hex-auth-tabs button{border-radius:12px!important;font:600 14px/1 var(--body)!important;color:var(--ink-3)!important;transition:background .2s,color .2s}
.hex-auth-tabs button.on{background:linear-gradient(180deg,#232840,#181C2B)!important;color:var(--ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.9),0 0 0 1px rgba(var(--acc-rgb),.35)!important}
.hex-password-field button{color:var(--acc-hi)!important;font:600 12.5px/1 var(--body)!important}
.hex-saved-list{background:rgba(0,0,0,.3)!important;border:1px solid var(--hair2)!important;border-radius:18px!important}
.hex-saved-avatar{background:var(--flip)!important;color:#0A0B12!important;border:0!important;border-radius:13px!important;font:700 14px var(--display)!important}
.hex-saved-remove{border-color:var(--hair2)!important;border-radius:12px!important}
.hex-saved-remove:hover{color:var(--bad)!important;border-color:rgba(255,106,134,.4)!important}
.hex-login-credit{border-top-color:var(--hair)!important;color:var(--ink-4)!important}
.hex-login-credit strong{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hex-login-admin{border-radius:14px!important;border-color:var(--hair2)!important;color:var(--acc-hi)!important}

/* Gate */
.gate{padding:30px 26px!important;border-radius:28px!important}
.gate h1{font:600 24px/1.1 var(--display)!important;letter-spacing:-.02em;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate p{color:var(--ink-2)!important;font:400 14.5px/1.6 var(--body)!important}

/* ---------- Admin ----------------------------------------------------- */
.wrap{max-width:620px!important}
.top h1,.blue-intro h1{font:600 26px/1.1 var(--display)!important;letter-spacing:-.03em!important;text-shadow:none!important}
.blue-intro p,.top p{color:var(--ink-3)!important;font-size:13px!important}
.badge,.brand-mark,.hex-login-symbol,.blue-intro .blue-icon{
  background:var(--flip)!important;color:#0A0B12!important;border:0!important;border-radius:16px!important;
  box-shadow:0 12px 30px -12px rgba(var(--acc-rgb),.85),inset 0 1px 0 rgba(255,255,255,.6)!important}
.badge svg,.blue-icon svg{stroke:#0A0B12!important}
.blue-badge{background:rgba(var(--acc-rgb),.12)!important;border:1px solid rgba(var(--acc-rgb),.4)!important;color:var(--acc-hi)!important;border-radius:99px!important;font:700 10px/1 var(--body)!important;letter-spacing:.06em!important;padding:7px 11px!important}
.hex-kicker,.dashboard-copy .eyebrow{color:var(--ink-3)!important;font:600 11px/1.4 var(--body)!important;letter-spacing:.04em!important}
.sec{padding:20px!important}
.sec h2{font:600 15.5px/1.3 var(--display)!important;letter-spacing:-.01em}
.blue-stat{padding:16px!important}
.blue-stat span{font:600 11px/1.3 var(--body)!important;letter-spacing:.03em!important;text-transform:none!important;color:var(--ink-3)!important}
.blue-stat b{font:600 26px/1.3 var(--display)!important;letter-spacing:-.03em;color:var(--ink)!important}
.blue-stat:first-child b{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.tabs{background:rgba(8,9,16,.88)!important;border:1px solid var(--hair2)!important;border-radius:16px!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tabs button{color:var(--ink-3)!important;font:600 12.5px/1 var(--body)!important;border-radius:11px!important}
.tabs button.on{background:linear-gradient(180deg,#232840,#181C2B)!important;color:var(--ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(var(--acc-rgb),.35)!important}
.chips button,.seg button{background:rgba(255,255,255,.035)!important;border:1px solid var(--hair2)!important;color:var(--ink-2)!important;border-radius:14px!important;font-family:var(--body)!important}
.chips button.on,.seg button.on{background:rgba(var(--acc-rgb),.14)!important;color:#fff!important;border-color:rgba(var(--acc-rgb),.6)!important;box-shadow:0 0 0 1px rgba(var(--acc-rgb),.25),0 10px 24px -14px rgba(var(--acc-rgb),.8)!important}
.avatar{background:var(--steel)!important;color:var(--acc-hi)!important;box-shadow:0 0 0 1px var(--hair2)!important}
.row{border-bottom-color:var(--hair)!important}
.pill{border-radius:99px!important}
.pill.ok,.tag.ok,.good{color:var(--ok)!important}
.hex-admin-dock{background:rgba(6,7,13,.85)!important;border:1px solid var(--hair2);border-radius:20px!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hex-admin-dock a{background:var(--flip)!important;color:#0A0B12!important;border:0!important;font:700 14px/1.4 var(--body)!important;border-radius:14px!important;box-shadow:0 12px 26px -12px rgba(var(--acc-rgb),.9)!important}
.blue-footer{border-top-color:var(--hair)!important;color:var(--ink-4)!important;font:500 11px var(--body)!important;letter-spacing:.02em!important}
.hex-owner-credit{color:var(--ink-4)!important}
.hex-owner-credit strong{color:var(--acc-hi)!important}
input[type=file]{background:rgba(0,0,0,.3)!important;border:1px dashed var(--hair2)!important;border-radius:14px!important;color:var(--ink-3)!important}
input[type=file]::file-selector-button{background:var(--steel)!important;color:var(--ink)!important;border:1px solid var(--hair2)!important;border-radius:10px!important}

/* ---------- Job progress page ---------------------------------------- */
html:root[data-theme] body:has(> .panel){font-family:var(--body)}
.panel:has(.ring-wrap){
  border:1px solid transparent!important;border-radius:30px!important;color:var(--ink)!important;
  background:radial-gradient(120% 220px at 50% 0,rgba(var(--acc-rgb),.18),transparent 70%) padding-box,
             linear-gradient(180deg,#0D0F1B,#08090F) padding-box,var(--flip-edge) border-box!important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1),0 20px 80px -50px rgba(var(--acc-rgb),.7)!important}
.nav-back,.nav-close{background:rgba(255,255,255,.05)!important;border:1px solid var(--hair2)!important;color:var(--ink)!important}
.title{font-family:var(--display)!important;letter-spacing:-.02em;color:var(--ink)!important}
.title span{font-family:var(--body);color:var(--ink-3)!important}
.ring-fill{stroke:var(--flip-v)!important;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.6))}
.ring-track{stroke:var(--steel)!important}
.ring-inner{background:transparent!important}
.ring-pct{font-family:var(--display)!important;letter-spacing:-.04em;color:var(--ink)!important}
.ring-label{color:var(--ink-3)!important}
.status-badge{border-radius:99px!important;font-family:var(--body)!important;background:rgba(var(--acc-rgb),.12)!important;color:var(--acc-hi)!important;border:1px solid rgba(var(--acc-rgb),.4)!important}
.time-info{background:rgba(255,255,255,.04)!important;border:1px solid var(--hair2)!important;color:var(--ink-2)!important}
.time-info svg{color:var(--acc-hi)!important}
.stats-grid,.account-list{border:1px solid var(--hair)!important;background:var(--hair)!important;border-radius:20px!important;overflow:hidden}
.account-list{background:var(--carbon)!important}
.stat-cell{background:var(--carbon)!important;border-color:var(--hair)!important}
.stat-label{color:var(--ink-3)!important;text-transform:none!important;letter-spacing:.02em!important;font-family:var(--body)!important}
.stat-value{font-family:var(--display)!important;letter-spacing:-.02em;color:var(--ink)}
.stat-value.green{color:var(--ok)!important}.stat-value.red{color:var(--bad)!important}
.account-row{border-bottom-color:var(--hair)!important}
.account-row .acc-email{color:var(--ink)!important}
.account-row .acc-status{color:var(--acc-hi)}
.acc-dot{background:var(--flip-v)!important;box-shadow:0 0 0 4px rgba(var(--acc-rgb),.2)!important}
.acc-dot.done{background:var(--ok)!important;box-shadow:none!important}
.acc-dot.failed{background:var(--bad)!important;box-shadow:none!important}
.acc-mini-bar{background:var(--steel)!important}
.acc-mini-fill{background:var(--flip)!important}
.cancel-btn{background:rgba(255,106,134,.08)!important;color:#FF8FA4!important;border:1px solid rgba(255,106,134,.32)!important;border-radius:16px!important;font-family:var(--body)!important}
.hex-progress-brand strong{font-family:var(--display)!important;letter-spacing:.01em!important;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hex-progress-brand span{color:var(--ink-3)!important;letter-spacing:.04em!important}

/* ---------- Motion: one orchestrated entrance on the home page -------- */
@media (prefers-reduced-motion:no-preference){
  .hex-hero h1{animation:prise .8s var(--ease) both}
  .hex-hero-line{transform-origin:left;animation:pstripe 1s .25s var(--ease) both}
  .hex-profile-shell{animation:prise .7s .15s var(--ease) both}
  @keyframes prise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes pstripe{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
}
.hex-touch-wave{background:radial-gradient(circle,rgba(201,192,255,.28),rgba(var(--acc-rgb),.10) 45%,transparent 68%)!important}

/* ---------- Small screens -------------------------------------------- */
@media(max-width:360px){
  .page{padding-inline:12px!important}
  .hex-profile-shell{padding:14px!important}
  .svc-row .tx b,.hex-tool-list .tx b{font-size:13px!important}
  .ph h1{font-size:22px!important}
  .bal .bt b{font-size:21px!important}
}
@media(min-width:700px){
  .hex-tool-list .svc-row.main{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .msg,.hex-live-banner i,.design-live i{animation:none!important}
}