/* SIG FLOW — Premium DeepBlue · Golden Glitter
   Neon-morph + Clay + Glass + Liquid + Spatial */
:root{
  --bg0:#06194a; --bg1:#0b2f86; --bg2:#1a55cf; --bg3:#2f74ff;
  --gold:#f6c544; --gold2:#ffe7a0; --gold3:#c88a14; --ivory:#fff8e6;
  --text:#f5f8ff; --muted:#c3d2f7; --dim:#93a8dc;
  --in:#4ef2c2; --in2:#16b9a0; --out:#ffcf5a; --neg:#ff8fa8;
  --glass:rgba(255,255,255,.105); --glass2:rgba(255,255,255,.16); --gb:rgba(255,255,255,.24);
  --r:22px; --r-s:14px;
  --shadow:0 20px 50px -18px rgba(2,10,40,.75), 0 2px 0 rgba(255,255,255,.06) inset;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Prompt',system-ui,sans-serif; --num:'Outfit','Prompt',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);color:var(--text);background:#0b2f86;
  background:radial-gradient(120% 90% at 15% 0%,#2a6cf0 0%,#1446b8 32%,#0b2f86 62%,#06194a 100%);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px}

/* ---------- background: liquid blobs + glitter + spatial floor ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:62vmax;height:62vmax;border-radius:43% 57% 62% 38%/45% 39% 61% 55%;opacity:.55;will-change:transform}
.b1{left:-20vmax;top:-25vmax;background:radial-gradient(closest-side,rgba(98,160,255,.75),rgba(98,160,255,0));animation:blob 26s ease-in-out infinite}
.b2{right:-24vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(255,206,90,.42),rgba(255,206,90,0));animation:blob 32s ease-in-out -8s infinite reverse}
.b3{left:20vmax;bottom:-34vmax;background:radial-gradient(closest-side,rgba(64,220,255,.38),rgba(64,220,255,0));animation:blob 30s ease-in-out -4s infinite}
.b4{right:5vmax;bottom:-20vmax;width:40vmax;height:40vmax;background:radial-gradient(closest-side,rgba(255,236,170,.30),rgba(255,236,170,0));animation:blob 22s ease-in-out -12s infinite reverse}
@keyframes blob{0%,100%{transform:translate(0,0) rotate(0) scale(1)}33%{transform:translate(6vmax,4vmax) rotate(60deg) scale(1.08)}66%{transform:translate(-4vmax,6vmax) rotate(130deg) scale(.95)}}
.grid-floor{position:absolute;left:-50%;right:-50%;bottom:-10vh;height:55vh;transform:perspective(600px) rotateX(68deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(255,215,110,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,110,.13) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:floor 14s linear infinite;opacity:.7}
@keyframes floor{to{background-position:0 64px,0 0}}
#glitter{position:absolute;inset:0;width:100%;height:100%}

/* ---------- material primitives ---------- */
.glass{background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
  border:1px solid var(--gb);border-radius:var(--r);box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);position:relative}
.glass-in{background:rgba(6,25,74,.32);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);box-shadow:inset 0 2px 12px rgba(0,0,0,.25)}
.liquid::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.22),transparent 45%);
  opacity:.9;mix-blend-mode:soft-light;transition:opacity .3s}
.liquid::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(130deg,rgba(255,231,160,.85),rgba(255,255,255,.08) 30%,rgba(120,190,255,.35) 60%,rgba(255,214,110,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75}
.tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s var(--ease),box-shadow .4s;transform-style:preserve-3d}
.tilt:hover{box-shadow:0 30px 60px -20px rgba(2,10,40,.85),0 0 0 1px rgba(255,220,120,.35),0 0 32px -6px rgba(255,205,90,.35)}
.gold-text{background:linear-gradient(100deg,#fff6cf 0%,#ffd45c 22%,#e6a21d 40%,#fff3c0 52%,#f2b632 70%,#fff6cf 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;filter:drop-shadow(0 2px 10px rgba(255,200,80,.35))}
@keyframes shine{to{background-position:-220% 0}}

/* clay buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:16px;padding:10px 18px;font-weight:600;
  transition:transform .25s var(--spring),box-shadow .25s,filter .25s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.95)}
.clay{background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));color:var(--text);
  box-shadow:inset 2px 3px 6px rgba(255,255,255,.35),inset -3px -5px 10px rgba(0,0,0,.28),0 10px 22px -8px rgba(0,0,0,.55)}
.clay:hover{transform:translateY(-2px)}
.clay.gold{background:linear-gradient(160deg,#fff0b3,#f7c548 45%,#d69419);color:#3a2500;
  box-shadow:inset 2px 3px 6px rgba(255,255,255,.75),inset -3px -6px 10px rgba(140,80,0,.45),0 12px 26px -8px rgba(240,170,30,.65),0 0 22px -4px rgba(255,210,90,.6)}
.clay.gold:hover{filter:brightness(1.07);box-shadow:inset 2px 3px 6px rgba(255,255,255,.75),inset -3px -6px 10px rgba(140,80,0,.45),0 16px 34px -8px rgba(240,170,30,.8),0 0 36px -2px rgba(255,210,90,.8)}
.clay.mint{background:linear-gradient(160deg,#d6fff5,#4ef2c2 50%,#14a88f);color:#032b25;box-shadow:inset 2px 3px 6px rgba(255,255,255,.7),inset -3px -6px 10px rgba(0,80,70,.4),0 12px 26px -8px rgba(40,220,190,.6)}
.clay.danger{background:linear-gradient(160deg,#ffd3dc,#ff8fa8 50%,#d9416a);color:#3b0010}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.2)}
.btn.ghost:hover{color:var(--text);border-color:rgba(255,220,120,.6);box-shadow:0 0 16px -4px rgba(255,210,90,.6)}
.btn.big{width:100%;padding:15px 20px;font-size:17px;border-radius:18px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:12px}
.btn.icon{padding:8px;border-radius:12px;width:36px;height:36px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- 4D icons ---------- */
.i4d{--s:44px;--h:45;width:var(--s);height:var(--s);display:inline-grid;place-items:center;perspective:300px;flex:none;position:relative}
.i4d .cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:float4d 6s ease-in-out infinite;animation-delay:calc(var(--d,0)*-1.3s)}
.i4d .plate{position:absolute;inset:0;border-radius:30%;transform:translateZ(-8px);
  background:radial-gradient(120% 120% at 25% 15%,hsla(var(--h),95%,72%,.95),hsla(var(--h),85%,42%,.85) 55%,hsla(calc(var(--h) + 20),80%,24%,.95));
  box-shadow:inset 2px 3px 6px rgba(255,255,255,.55),inset -3px -5px 9px rgba(0,0,0,.35),0 8px 18px -6px hsla(var(--h),90%,50%,.7),0 0 18px -4px hsla(var(--h),95%,65%,.6)}
.i4d .plate::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;animation:sweep 4.5s ease-in-out infinite;animation-delay:calc(var(--d,0)*-.7s)}
.i4d svg{position:absolute;inset:22%;width:56%;height:56%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.i4d .sh{transform:translateZ(2px) translate(1.5px,2px);stroke:rgba(0,0,0,.35);stroke-width:2.6;filter:blur(1px)}
.i4d .fg{transform:translateZ(14px);stroke:#fffaf0;stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.i4d.gold .plate{background:radial-gradient(120% 120% at 25% 15%,#fff5c8,#f5c043 50%,#a96a07)}
.i4d.gold .fg{stroke:#4a2d00;filter:none}
.i4d:hover .cube,.hover-spin:hover .i4d .cube{animation:spin4d 1.1s var(--ease)}
@keyframes float4d{0%,100%{transform:rotateX(14deg) rotateY(-18deg) translateY(0)}50%{transform:rotateX(-10deg) rotateY(16deg) translateY(-3px)}}
@keyframes spin4d{from{transform:rotateY(0) scale(1)}50%{transform:rotateY(200deg) scale(1.12)}to{transform:rotateY(360deg) scale(1)}}
@keyframes sweep{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}
.ic{display:inline-grid;width:18px;height:18px}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- boot / login ---------- */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;z-index:50;background:radial-gradient(circle,#1446b8,#06194a);transition:opacity .5s,visibility .5s;font-size:22px;letter-spacing:4px}
.boot.done{opacity:0;visibility:hidden}
.boot-ring{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--gold);border-right-color:var(--gold2);animation:spin 1s linear infinite;box-shadow:0 0 30px rgba(255,200,80,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
.screen{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(440px,100%);padding:38px 30px 30px;text-align:center;animation:pop .9s var(--spring) both}
.brand-orb{display:grid;place-items:center;margin:-80px auto 6px;width:120px;height:120px}
.brand-orb .i4d{--s:104px}
.brand-title{margin:6px 0 2px;font-family:var(--num);font-size:44px;font-weight:800;letter-spacing:6px}
.brand-sub{margin:0 0 26px;color:var(--muted)}
.lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:10px;letter-spacing:.5px}
.otp{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.otp input{width:48px;height:60px;text-align:center;font-family:var(--num);font-size:26px;font-weight:700;border-radius:16px;border:1px solid rgba(255,255,255,.25);outline:0;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05));box-shadow:inset 2px 3px 6px rgba(255,255,255,.25),inset -3px -5px 10px rgba(0,0,0,.3);caret-color:var(--gold);transition:.25s var(--spring)}
.otp input:focus{border-color:var(--gold);transform:translateY(-3px) scale(1.05);box-shadow:inset 2px 3px 6px rgba(255,255,255,.25),0 0 0 3px rgba(255,210,90,.25),0 0 22px rgba(255,205,90,.55)}
.otp input.filled{color:var(--gold2);border-color:rgba(255,215,110,.6)}
.otp.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.login-err{min-height:22px;color:var(--neg);font-size:14px;margin:4px 0 12px}
.hint{color:var(--dim);font-size:12.5px;margin:16px 0 0}
@keyframes pop{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(18deg) scale(.92);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* ---------- layout ---------- */
#app{position:relative;z-index:2;display:grid;grid-template-columns:260px 1fr;min-height:100vh;gap:0}
.side{position:sticky;top:14px;margin:14px 0 14px 14px;height:calc(100vh - 28px);display:flex;flex-direction:column;padding:20px 14px;border-radius:26px}
.logo{display:flex;align-items:center;gap:12px;padding:0 8px 20px}
.logo b{display:block;font-family:var(--num);font-size:22px;letter-spacing:3px;font-weight:800}
.logo small{color:var(--muted);font-size:12px}
#nav{display:flex;flex-direction:column;gap:6px;flex:1}
.nv{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;color:var(--muted);cursor:pointer;border:1px solid transparent;background:none;text-align:left;transition:.3s var(--ease);font-weight:500}
.nv .i4d{--s:36px}
.nv:hover{color:var(--text);background:rgba(255,255,255,.07);transform:translateX(3px)}
.nv.on{color:#fff;background:linear-gradient(100deg,rgba(255,210,90,.22),rgba(255,255,255,.06));border-color:rgba(255,215,110,.45);box-shadow:0 0 22px -6px rgba(255,205,90,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.me{padding:12px;display:flex;gap:10px;align-items:center}
.me .av{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:700;color:#3a2500;background:linear-gradient(160deg,#fff0b3,#f7c548,#d69419);box-shadow:inset 1px 2px 4px rgba(255,255,255,.7),0 0 14px rgba(255,200,80,.5);flex:none}
.me .who{flex:1;min-width:0}
.me .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.me .who small{color:var(--muted);font-size:12px}
.main{min-width:0;padding:22px 26px 40px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.top h2{margin:0;font-size:28px;font-weight:700;letter-spacing:.3px}
.top p{margin:2px 0 0;color:var(--muted);font-size:14px}
.top-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:flex;padding:4px;gap:4px;border-radius:14px;background:rgba(6,25,74,.35);border:1px solid rgba(255,255,255,.14)}
.seg button{border:0;background:none;padding:6px 12px;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:500;transition:.25s}
.seg button.on{background:linear-gradient(160deg,#fff0b3,#f7c548 50%,#d69419);color:#3a2500;box-shadow:0 0 14px -2px rgba(255,205,90,.7)}
.tabbar{display:none}

/* ---------- view transitions & entry animations ---------- */
.view{position:relative}
.rv{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes rise{from{opacity:0;transform:perspective(1000px) translateY(26px) rotateX(10deg) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
::view-transition-old(root){animation:vtOut .35s var(--ease) both}
::view-transition-new(root){animation:vtIn .55s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:scale(1.015);filter:blur(6px)}}
.view.still .rv,.view.still .tbl tr.row,.view.still .au{animation:none}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:1.6fr 1fr}
.g2e{grid-template-columns:1fr 1fr}
.card{padding:18px 20px;overflow:hidden}
.card h3{margin:0 0 4px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px}
.card h3 .sp{flex:1}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.kpi{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.kpi .row{display:flex;align-items:center;justify-content:space-between}
.kpi .lab{color:var(--muted);font-size:13.5px}
.kpi .val{font-family:var(--num);font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.1;letter-spacing:.3px}
.kpi .val small{font-size:.55em;opacity:.8;margin-right:2px}
.kpi .foot{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.kpi.in .val{color:var(--in);text-shadow:0 0 18px rgba(78,242,194,.45)}
.kpi.out .val{color:var(--gold2);text-shadow:0 0 18px rgba(255,205,90,.45)}
.kpi.net .val{color:#fff;text-shadow:0 0 18px rgba(140,200,255,.6)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}
.pill.in{color:var(--in);border-color:rgba(78,242,194,.4);background:rgba(78,242,194,.1)}
.pill.out{color:var(--gold2);border-color:rgba(255,215,110,.4);background:rgba(255,205,90,.1)}
.mt{margin-top:16px}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--muted);font-family:var(--num);font-size:11px}
.chart .gridl{stroke:rgba(255,255,255,.1);stroke-dasharray:3 5}
.bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow 1s var(--spring) both;animation-delay:calc(var(--i)*55ms + .15s);cursor:pointer;transition:filter .2s}
.bar:hover{filter:brightness(1.25) drop-shadow(0 0 8px rgba(255,210,90,.9))}
@keyframes grow{from{transform:scaleY(0)}}
.line-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fade-in{animation:fi .8s ease .9s both}@keyframes fi{from{opacity:0}}
.dot-pulse{animation:dp 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes dp{50%{transform:scale(1.6);opacity:.5}}
.donut-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.donut{position:relative;width:clamp(150px,13vw,200px);aspect-ratio:1}
.donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.donut circle.seg{fill:none;stroke-width:22;stroke-linecap:butt;transition:stroke-width .3s,filter .3s;cursor:pointer;animation:dash 1.3s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
.donut circle.seg:hover,.donut circle.seg.hl{stroke-width:30;filter:drop-shadow(0 0 8px currentColor)}
@keyframes dash{from{stroke-dasharray:0 999}}
.donut .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut .ctr b{font-family:var(--num);font-size:22px}
.donut .ctr small{color:var(--muted);font-size:12px}
.legend{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;padding-right:4px}
.lg{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 8px;border-radius:10px;cursor:pointer;transition:background .2s}
.lg:hover,.lg.hl{background:rgba(255,255,255,.1)}
.lg i{width:10px;height:10px;border-radius:4px;flex:none;box-shadow:0 0 8px currentColor}
.lg span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg b{font-family:var(--num);font-weight:600}
.hbars{display:flex;flex-direction:column;gap:12px}
.hb{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.hb .i4d{--s:28px}
.hb .track{grid-column:2/4;height:9px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.hb .fill{height:100%;border-radius:9px;width:var(--w);background:linear-gradient(90deg,#c88a14,#ffd45c,#fff3c0);box-shadow:0 0 12px rgba(255,205,90,.7);animation:wfill 1.2s var(--ease) both;animation-delay:calc(var(--i)*80ms + .2s)}
.hb .fill.in{background:linear-gradient(90deg,#14a88f,#4ef2c2,#d6fff5);box-shadow:0 0 12px rgba(78,242,194,.7)}
@keyframes wfill{from{width:0}}
.tip{position:fixed;z-index:60;pointer-events:none;padding:8px 12px;border-radius:12px;font-size:13px;background:rgba(8,28,80,.88);border:1px solid rgba(255,215,110,.5);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 16px rgba(255,205,90,.3);backdrop-filter:blur(10px);transform:translate(-50%,calc(-100% - 12px));white-space:nowrap;transition:opacity .15s}

/* club cards */
.clubs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.club{padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:12px;min-height:190px}
.club .hd{display:flex;align-items:center;gap:12px}
.club .hd .i4d{--s:50px}
.club .hd b{font-size:16px;display:block;line-height:1.3}
.club .hd small{color:var(--muted);font-size:12.5px}
.club .amt{font-family:var(--num);font-size:24px;font-weight:700;color:var(--gold2);text-shadow:0 0 14px rgba(255,205,90,.4)}
.club .meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12.5px}
.ring{--p:0;--c:var(--gold);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.12) 0);mask:radial-gradient(circle,transparent 58%,#000 60%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);
  filter:drop-shadow(0 0 6px rgba(255,205,90,.5));transition:--p 1.2s var(--ease)}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ring-wrap{position:relative;width:54px;height:54px}
.ring-wrap span{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-family:var(--num);font-weight:600}
.spark{width:100%;height:42px}

/* list / table */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.field{display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-radius:14px;background:rgba(6,25,74,.35);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 2px 8px rgba(0,0,0,.25);transition:.25s}
.field:focus-within{border-color:rgba(255,215,110,.7);box-shadow:inset 0 2px 8px rgba(0,0,0,.25),0 0 0 3px rgba(255,210,90,.15),0 0 18px -4px rgba(255,205,90,.6)}
.field input,.field select{background:none;border:0;outline:0;height:100%;min-width:0;width:100%}
.field select option{background:#0b2f86;color:#fff}
.field.grow{flex:1 1 320px;min-width:220px}
.tbl{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14px}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:12.5px;padding:0 12px;cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:11px 12px;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(0,0,0,.12);vertical-align:middle}
.tbl td:first-child{border-radius:14px 0 0 14px;border-left:1px solid rgba(255,255,255,.1)}
.tbl td:last-child{border-radius:0 14px 14px 0}
.tbl tr.row{animation:rise .6s var(--ease) both;animation-delay:calc(min(var(--i),20)*25ms)}
.tbl tr.row:hover td{background:rgba(255,255,255,.13)}
.tbl tr.row.flash td{animation:flash 1.6s ease}
@keyframes flash{0%{background:rgba(255,215,110,.45)}100%{background:rgba(255,255,255,.07)}}
.tbl .t{max-width:440px}
.tbl .t b{font-weight:500;display:block}
.tbl .t small{color:var(--dim);font-size:12px}
.clubtag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 10px 3px 4px;border-radius:99px;background:hsla(var(--h),80%,60%,.18);border:1px solid hsla(var(--h),85%,70%,.35);white-space:nowrap}
.clubtag i{width:18px;height:18px;border-radius:7px;background:radial-gradient(circle at 30% 25%,hsl(var(--h),95%,75%),hsl(var(--h),80%,40%))}
.amt-in{color:var(--in);font-weight:600}.amt-out{color:var(--gold2);font-weight:600}
.acts{display:flex;gap:6px;justify-content:flex-end;opacity:.6;transition:.2s}
tr:hover .acts{opacity:1}
.more{text-align:center;margin-top:10px}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .i4d{--s:80px;margin-bottom:10px}

/* recent list */
.rl{display:flex;flex-direction:column;gap:8px}
.ri{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:.25s;cursor:pointer}
.ri:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.ri .i4d{--s:34px}
.ri .tx{flex:1;min-width:0}
.ri .tx b{display:block;font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri .tx small{color:var(--dim);font-size:12px}
.ri .a{font-family:var(--num);font-weight:600;white-space:nowrap}

/* heat table */
.heat-wrap{overflow:auto;border-radius:14px}
.heat{border-collapse:separate;border-spacing:3px;font-size:12.5px;min-width:900px;width:100%}
.heat th{color:var(--muted);font-weight:500;padding:6px;text-align:right;white-space:nowrap}
.heat th:first-child,.heat td:first-child{text-align:left;position:sticky;left:0;background:rgba(10,40,110,.92);z-index:1;border-radius:10px}
.heat td{padding:8px 6px;text-align:right;border-radius:10px;font-family:var(--num);background:rgba(255,205,90,calc(var(--a)*.75));color:var(--text);transition:transform .2s;animation:fi .6s ease both;animation-delay:calc(var(--i)*12ms)}
.heat td:hover{transform:scale(1.08);box-shadow:0 0 14px rgba(255,205,90,.7);position:relative;z-index:2}
.heat td.z{background:rgba(255,255,255,.04);color:var(--dim)}
.heat tr.tot td{background:rgba(255,255,255,.14);font-weight:700;color:var(--gold2)}
.heat td.tot{background:rgba(255,255,255,.14);font-weight:700;color:var(--gold2)}

/* club detail */
.hero{display:flex;gap:20px;align-items:center;padding:22px;flex-wrap:wrap}
.hero .i4d{--s:86px}
.hero h1{margin:0;font-size:28px}
.hero .stats{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.hero .stats div small{display:block;color:var(--muted);font-size:12.5px}
.hero .stats div b{font-family:var(--num);font-size:22px}
.back{margin-bottom:12px}

/* forms / modal */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:rgba(3,12,40,.55);backdrop-filter:blur(6px);animation:fi .3s ease both}
.sheet{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;animation:pop .6s var(--spring) both;background:linear-gradient(145deg,rgba(40,90,200,.82),rgba(10,40,120,.86));}
.modal.closing .sheet{animation:popOut .3s var(--ease) forwards}.modal.closing .modal-bg{animation:fo .3s forwards}
@keyframes popOut{to{opacity:0;transform:translateY(20px) scale(.95);filter:blur(6px)}}@keyframes fo{to{opacity:0}}
.sheet h3{margin:0 0 16px;font-size:20px;display:flex;align-items:center;gap:12px}
.sheet .x{position:absolute;top:14px;right:14px}
.frm{display:grid;gap:14px}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm label:not(.field){display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.frm .field input[type=date]{color-scheme:dark}
.frm .field{height:46px}
.frm textarea{width:100%;min-height:70px;resize:vertical;background:rgba(6,25,74,.35);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;outline:0}
.frm textarea:focus{border-color:rgba(255,215,110,.7)}
.typeSw{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;border-radius:18px;background:rgba(6,25,74,.4);border:1px solid rgba(255,255,255,.14)}
.typeSw button{border:0;border-radius:14px;padding:12px;font-weight:600;background:none;color:var(--muted);cursor:pointer;display:flex;gap:8px;justify-content:center;align-items:center;transition:.3s var(--spring)}
.typeSw button.on.out{background:linear-gradient(160deg,#fff0b3,#f7c548 50%,#d69419);color:#3a2500;box-shadow:0 0 18px -2px rgba(255,205,90,.7)}
.typeSw button.on.in{background:linear-gradient(160deg,#d6fff5,#4ef2c2 50%,#14a88f);color:#032b25;box-shadow:0 0 18px -2px rgba(78,242,194,.7)}
.amtBox .field{height:60px}
.amtBox input{font-family:var(--num);font-size:26px;font-weight:700}
.amtBox .prev{font-size:13px;color:var(--gold2);min-height:18px;margin-top:4px;font-family:var(--num)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);border-radius:99px;padding:5px 11px;font-size:12.5px;cursor:pointer;transition:.2s;color:var(--muted)}
.chip:hover,.chip.on{color:#fff;border-color:rgba(255,215,110,.6);background:rgba(255,205,90,.16);box-shadow:0 0 12px -3px rgba(255,205,90,.6)}
.frm .acts2{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

/* toast */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:center;padding:10px 16px;border-radius:16px;background:rgba(8,30,90,.9);border:1px solid rgba(255,215,110,.5);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 18px -4px rgba(255,205,90,.6);backdrop-filter:blur(12px);animation:tin .5s var(--spring) both;font-size:14px}
.toast.err{border-color:rgba(255,143,168,.6)}
.toast button{background:none;border:0;color:var(--gold2);font-weight:600;cursor:pointer}
@keyframes tin{from{opacity:0;transform:translateY(20px) scale(.9)}}

/* settings */
.set-row{display:grid;grid-template-columns:44px 1fr 120px 140px 90px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.set-row .i4d{--s:40px}
.set-row input[type=range]{width:100%;accent-color:var(--gold)}
.audit{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.au{display:grid;grid-template-columns:150px 120px 1fr;gap:10px;font-size:13px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05)}
.au small{color:var(--dim)}
.tag{display:inline-block;padding:1px 8px;border-radius:8px;font-size:12px;background:rgba(255,255,255,.12)}
.tag.create{background:rgba(78,242,194,.2);color:var(--in)}.tag.delete{background:rgba(255,143,168,.2);color:var(--neg)}.tag.update{background:rgba(255,205,90,.2);color:var(--gold2)}
.drop{border:2px dashed rgba(255,215,110,.45);border-radius:18px;padding:26px;text-align:center;color:var(--muted);cursor:pointer;transition:.25s}
.drop:hover,.drop.over{background:rgba(255,205,90,.08);border-color:var(--gold);color:#fff}

/* responsive */
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:1fr}}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:16px 16px 110px}
  .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:30;justify-content:space-around;padding:6px;border-radius:24px}
  .tabbar .nv{flex-direction:column;gap:2px;font-size:11px;padding:6px 4px;flex:1;align-items:center;text-align:center}
  .tabbar .nv .i4d{--s:30px}
  .tabbar .nv:hover{transform:none}
  .top h2{font-size:23px}
  #addBtn span:last-child{display:none}
  #addBtn{position:fixed;right:20px;bottom:96px;z-index:31;width:58px;height:58px;border-radius:20px;padding:0}
  #addBtn .ic{width:26px;height:26px}
  .g2e{grid-template-columns:1fr}
  .donut-wrap{grid-template-columns:1fr;justify-items:center}
  .legend{width:100%}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr.row{display:grid;grid-template-columns:1fr auto;padding:12px;margin-bottom:8px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
  .tbl td{background:none!important;border:0!important;padding:2px 0;border-radius:0!important}
  .tbl td.c-date{grid-column:1;color:var(--muted);font-size:12px}
  .tbl td.c-club{grid-column:2;text-align:right}
  .tbl td.t{grid-column:1/3;max-width:none}
  .tbl td.c-amt{grid-column:1;text-align:left;font-size:17px}
  .tbl td.c-act{grid-column:2}
  .tbl td.c-cat,.tbl td.c-by{display:none}
  .acts{opacity:1}
  .set-row{grid-template-columns:40px 1fr 90px;}
  .set-row .h-col,.set-row .b-col{grid-column:2/4}
  .au{grid-template-columns:1fr}
  .hero .stats{margin-left:0}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px;min-height:128px}
  .kpi .i4d{--s:36px}
  .otp{gap:7px}.otp input{width:42px;height:54px;font-size:22px}
  .frm .two{grid-template-columns:1fr}
  .brand-title{font-size:36px}
  .card h3 .pill{display:none}
  .card h3{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .bg,.side,.tabbar,#addBtn,.toolbar,.acts,.seg{display:none!important}
  body{background:#fff;color:#000}
  #app{display:block}.glass{background:#fff;border:1px solid #ccc;box-shadow:none;backdrop-filter:none}
  .heat td{color:#000}
}

/* =====================================================================
   v2 · Bright glass theme · single-page tab shell (iPad) · 4D carousel
   ===================================================================== */
:root{--muted:#e6eeff;--dim:#c6d6fb;--gb:rgba(255,255,255,.45);--text:#ffffff}
body{background:#2b63dc;background:radial-gradient(140% 110% at 15% -10%,#a9cbff 0%,#629aff 20%,#3471f0 42%,#2157d6 68%,#1846b4 100%);
  text-shadow:0 1px 1px rgba(10,35,110,.18)}
/* static backdrop = glass never has to re-blur every frame */
.blob{animation:none!important;opacity:.7}
.b2{opacity:.55}
.grid-floor{animation:none;opacity:.45}
#glitter{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none}

/* glass: crisp translucent panels; real blur only on a few fixed surfaces */
.glass{background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 55%,rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 40px -22px rgba(6,28,110,.6),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.appbar.glass,.tabbar.glass,.sheet.glass,.login-card.glass{backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
.liquid::before{mix-blend-mode:normal;opacity:.55}
.glass-in{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);box-shadow:inset 0 2px 8px rgba(10,40,130,.15)}
.field{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);box-shadow:inset 0 2px 6px rgba(10,40,130,.16)}
.field input::placeholder,.frm textarea::placeholder{color:rgba(235,242,255,.75)}
.field select option{background:#2a62db}
.frm textarea{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
.seg{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.tbl td{background:rgba(255,255,255,.15);border-top-color:rgba(255,255,255,.3)}
.tbl tr.row:hover td{background:rgba(255,255,255,.26)}
.ri{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.ri:hover{background:rgba(255,255,255,.24)}
.sheet{background:linear-gradient(150deg,rgba(105,160,255,.94),rgba(45,100,225,.95))}
.heat th:first-child,.heat td:first-child{background:rgba(45,100,225,.97)}
.heat td.z{background:rgba(255,255,255,.08)}
.boot{background:radial-gradient(circle,#6aa2ff,#2157d6)}
.kpi .val,.club .amt{text-shadow:0 1px 2px rgba(10,35,110,.35),0 0 16px rgba(255,205,90,.3)}
.kpi.out .val,.amt-out{color:#fff1b8}.kpi.in .val,.amt-in{color:#b9ffea}
.toast{background:rgba(35,90,215,.95)}
.tip{background:rgba(30,80,205,.95)}
.nv{color:#eef3ff}
.nv.on{background:linear-gradient(110deg,rgba(255,220,120,.42),rgba(255,255,255,.14));border-color:rgba(255,230,150,.75)}

/* cheaper motion: no blur filters inside keyframes */
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.view.enter{animation:viewIn .38s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}
.i4d .plate{overflow:hidden}
.i4d .plate::after{width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);background-size:auto;
  transform:translateX(-160%) skewX(-18deg);animation:sweep2 4.8s ease-in-out infinite;animation-delay:calc(var(--d,0)*-.7s)}
@keyframes sweep2{0%,62%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}

/* ---------- single-page shell ---------- */
html,body{height:100%}
body{overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
.side{display:none!important}
.appbar{flex:none;display:flex;align-items:center;gap:12px;margin:max(10px,env(safe-area-inset-top)) 12px 0;padding:8px 10px 8px 12px;border-radius:24px;z-index:20}
.appbar .logo{padding:0;gap:10px;flex:none}
.appbar .logo .i4d{--s:42px}
.appbar .logo b{font-size:19px}
.tabs{flex:1;display:flex;gap:4px;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs .nv{flex:none;padding:6px 14px 6px 6px;border-radius:16px;font-size:14.5px}
.tabs .nv .i4d{--s:34px}
.tabs .nv:hover{transform:translateY(-1px)}
.ab-r{flex:none;display:flex;align-items:center;gap:8px}
.appbar .me{padding:3px;gap:8px;background:none;border:0;box-shadow:none}
.appbar .me .who{max-width:140px}
.main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 18px 30px;scroll-behavior:auto}
.top{margin-bottom:14px;align-items:center}
.top h2{font-size:25px}
.tbl thead th{position:sticky;top:-14px;z-index:2}

@media (max-width:1240px){
  .tabs .nv{flex-direction:column;gap:1px;padding:5px 9px;font-size:11.5px}
  .tabs .nv .i4d{--s:30px}
  .appbar .logo .lt,.appbar .me .who{display:none}
  #addBtn span:last-child{display:none}
  #addBtn{padding:10px 12px}
}
/* iPad portrait & small tablets: keep tabs on top, not at the bottom */
@media (min-width:701px) and (max-width:900px){
  .tabbar{display:none!important}
  .main{padding:12px 14px 28px}
  #addBtn{position:static;width:auto;height:auto;border-radius:16px;padding:10px 12px}
  #addBtn .ic{width:18px;height:18px}
}
/* phones: tabs move to a bottom bar */
@media (max-width:700px){
  .tabs{display:none}
  .appbar{justify-content:space-between}
  .main{padding:12px 12px 112px}
  .tabbar .nv{font-size:10.5px;padding:5px 2px}
  .tabbar .nv .i4d{--s:28px}
}

/* touch devices (iPad/phones): fewer always-running 3D layers */
@media (pointer:coarse){
  .i4d .cube{animation:none;transform:rotateX(12deg) rotateY(-16deg)}
  .nv.on .i4d .cube,.spot .i4d .cube,.cchip.on .i4d .cube{animation:float4d 6s ease-in-out infinite}
  .tilt{transform:none}
}

/* lite mode (auto on slow devices, or toggled in settings) */
.lite #glitter{display:none}
.lite .i4d .cube,.lite .i4d .plate::after,.lite .bulb,.lite .gold-text{animation:none!important}
.lite .appbar.glass,.lite .tabbar.glass,.lite .sheet.glass,.lite .login-card.glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.lite .tabbar.glass,.lite .appbar.glass{background:rgba(55,110,230,.96)}
.lite .cb .rf,.lite .rv,.lite .tbl tr.row{animation:none}
.lite .cb .rf{display:none}

/* toggles / options */
.tgl{position:relative;display:inline-block;width:46px;height:26px;flex:none;cursor:pointer}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl span{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);transition:.25s}
.tgl span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:.3s var(--spring)}
.tgl input:checked+span{background:linear-gradient(160deg,#fff0b3,#f7c548 50%,#d69419);border-color:#ffe08a;box-shadow:0 0 12px rgba(255,205,90,.6)}
.tgl input:checked+span::after{transform:translateX(20px)}
.tgl input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.set-row{grid-template-columns:44px 1fr 120px 140px 160px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.opt .sub{margin:2px 0 0}

/* ---------- HOME · 4D carousel ---------- */
.home-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.home-main{min-width:0}
.home-side{display:grid;gap:16px}
@media (max-width:1100px){.home-wrap{grid-template-columns:1fr}.home-side{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.home-side{grid-template-columns:1fr}}
.stage{position:relative;overflow:hidden;border-radius:30px;height:420px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;contain:layout paint;
  background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.55),rgba(255,255,255,.08) 70%),radial-gradient(45% 30% at 50% 100%,rgba(255,214,110,.4),transparent 70%),linear-gradient(180deg,rgba(190,220,255,.35),rgba(255,255,255,.08))}
.stage.drag{cursor:grabbing}
.stage .abs{position:absolute;left:0;top:0}
.canopy{z-index:60;pointer-events:none;overflow:visible;filter:drop-shadow(0 10px 12px rgba(10,35,120,.3))}
.hub{z-index:57;border-radius:14px;overflow:hidden;border:2px solid rgba(255,232,165,.95);
  background:linear-gradient(90deg,rgba(150,190,255,.65),rgba(255,255,255,.92) 35%,rgba(205,225,255,.7) 55%,rgba(125,165,250,.65));box-shadow:0 0 28px rgba(255,255,255,.55),inset 0 0 16px rgba(255,255,255,.6)}
.hub i{position:absolute;top:0;bottom:0;left:0;width:200%;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 14px,rgba(255,255,255,.95) 18px,rgba(255,255,255,0) 24px 42px);will-change:transform}
.mist{z-index:55;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(238,246,255,.6),rgba(238,246,255,0))}
.deck{z-index:2;pointer-events:none}
.deck>div{position:absolute;inset:0;border-radius:50%}
.deck .rim{transform:translateY(var(--t));background:linear-gradient(90deg,#94600e,#f2bd45 18%,#fff3c4 50%,#f2bd45 82%,#94600e);box-shadow:0 18px 26px -10px rgba(10,35,120,.55)}
.deck .top{overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#fff,rgba(220,236,255,.92) 42%,rgba(160,198,255,.85) 78%,rgba(120,168,250,.9));box-shadow:inset 0 -8px 18px rgba(30,75,190,.35),inset 0 3px 6px #fff}
.deck .spin{position:absolute;border-radius:50%;will-change:transform;
  background:repeating-conic-gradient(rgba(245,190,60,.42) 0 6deg,rgba(255,255,255,0) 6deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 31.5%,#000 93%,transparent 94.5%);mask:radial-gradient(circle,transparent 30%,#000 31.5%,#000 93%,transparent 94.5%)}
.bulbs{z-index:61;pointer-events:none;width:100%;height:100%}
.bulb{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:radial-gradient(circle,#fff,#ffe08a 60%,#f5b82e);box-shadow:0 0 9px 3px rgba(255,214,110,.75);animation:twk 1.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twk{50%{opacity:.25}}
.riders{position:absolute;inset:0}
.cb{position:absolute;left:0;top:0;width:var(--iw);height:var(--ih);padding:0;border:0;background:none;transform-origin:50% 100%;will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;color:inherit}
.cb .rider{position:absolute;inset:0;will-change:transform}
.cb .bld{position:absolute;inset:0;display:block;filter:drop-shadow(0 6px 5px rgba(10,35,110,.3));transition:filter .3s}
.cb .bld svg,.cb .rf svg{display:block;width:100%;height:100%;overflow:visible}
.cb.hot .bld,.cb:focus-visible .bld{filter:drop-shadow(0 0 12px rgba(255,228,140,.95)) drop-shadow(0 6px 5px rgba(10,35,110,.3))}
.cb .pole{position:absolute;left:calc(48.5% - 3px);bottom:var(--pb);width:6px;height:100px;transform-origin:50% 100%;border-radius:3px;will-change:transform;
  background:linear-gradient(90deg,#9a650f,#fff3c4 45%,#e2a52a 70%,#8a5a0c)}
.cb .shine{position:absolute;left:18.75%;top:46.3%;width:57.5%;height:41%;border-radius:12%;overflow:hidden;pointer-events:none}
.cb .shine i{position:absolute;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));will-change:transform,opacity}
.cb .plt{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);font-size:var(--fs);font-weight:700;line-height:1.2;padding:.28em .8em;border-radius:99px;white-space:nowrap;text-shadow:none;
  color:#4a2d00;background:linear-gradient(160deg,#fff6cf,#f7c548 55%,#d99a1e);box-shadow:inset 1px 2px 3px rgba(255,255,255,.85),inset -2px -3px 5px rgba(150,90,0,.35),0 4px 10px rgba(10,35,110,.3)}
.cb .rf{position:absolute;left:0;top:100%;width:100%;height:100%;transform:scaleY(-1);opacity:.32;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 38%);mask-image:linear-gradient(to top,#000,transparent 38%)}
.cb .shd{position:absolute;left:6%;right:6%;bottom:-5%;height:13%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,35,120,.42),transparent)}
.cb.go .rider{animation:goIn .32s var(--ease) forwards}
@keyframes goIn{to{transform:translateY(-14%) scale(1.3);opacity:0}}
.cnav{position:absolute;top:50%;z-index:80;width:46px;height:46px;padding:0;border-radius:16px;margin-top:-23px}
.cnav.l{left:12px}.cnav.r{right:12px}
.cnav .ic{width:22px;height:22px}
.st-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:80;font-size:12px;color:#fff;padding:4px 12px;border-radius:99px;background:rgba(30,80,200,.5);white-space:nowrap;pointer-events:none}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
.cchip{display:flex;align-items:center;gap:8px;flex:none;padding:4px 12px 4px 4px;border-radius:99px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.14);cursor:pointer;color:#fff;font-size:13px;transition:background .25s,border-color .25s,box-shadow .25s}
.cchip .i4d{--s:28px}
.cchip.on{background:linear-gradient(100deg,rgba(255,215,110,.55),rgba(255,255,255,.18));border-color:rgba(255,230,150,.9);box-shadow:0 0 14px -2px rgba(255,210,90,.75)}
.spot{padding:16px 18px;min-height:250px}
.spot-in{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;animation:spotIn .4s var(--ease)}
.spot-in>.i4d{--s:58px}
.spot-in .btn{grid-column:1/-1}
.sp-t small{color:var(--muted);font-size:12px}
.sp-t h2{margin:0;font-size:22px;line-height:1.25}
.sp-t p{margin:0;color:var(--muted);font-size:13px}
.sp-s{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.sp-s div{padding:9px 11px;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28)}
.sp-s small{display:block;color:var(--muted);font-size:11.5px}
.sp-s b{font-family:var(--num);font-size:17px}
.sp-sp{grid-column:1/-1}
@keyframes spotIn{from{opacity:0;transform:translateY(8px)}}
.mini .mk{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-size:13.5px}
.mini .mk:last-child{border-bottom:0}
.mini .mk b{font-family:var(--num);font-size:17px}
@media (max-width:700px){.cnav{width:36px;height:36px;margin-top:-18px;border-radius:12px}.st-hint{font-size:10.5px}}
/* phones: a blurred header would trap the floating add button (backdrop-filter creates a containing block) */
@media (max-width:700px){.appbar.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(150deg,rgba(110,160,255,.92),rgba(55,110,230,.92))}}
@media print{html,body{height:auto;overflow:visible}#app{height:auto;display:block}.main{overflow:visible}.appbar,#glitter,.stage,.chiprow{display:none!important}}
#nav.tabs{flex-direction:row;gap:4px;flex:1}
.chiprow{scrollbar-width:none}.chiprow::-webkit-scrollbar{display:none}
@media (max-width:700px){#nav.tabs{display:none}}

/* =====================================================================
   v3 · Signature brand · Premium high-end luxury backdrop
   ===================================================================== */
:root{--brand:#dc1d47;--brand2:#ff5a7c;--serif:'Cormorant Garamond',Georgia,serif}
body{background:#1d47b8;background:
  radial-gradient(110% 70% at 50% -18%,rgba(165,202,255,.95) 0%,rgba(165,202,255,0) 58%),
  radial-gradient(70% 60% at 105% 105%,rgba(6,22,85,.6),transparent 62%),
  radial-gradient(60% 55% at -5% 105%,rgba(6,22,85,.5),transparent 60%),
  linear-gradient(170deg,#3b72ee 0%,#2759d6 34%,#1b45b4 68%,#11348f 100%)}
.grid-floor{display:none}
.blob.b1{background:radial-gradient(closest-side,rgba(130,185,255,.5),rgba(130,185,255,0))}
.blob.b2{background:radial-gradient(closest-side,rgba(255,214,120,.26),rgba(255,214,120,0))}
.lux-silk,.lux-deco,.lux-horizon,.lux-grain{position:absolute;pointer-events:none}
.lux-silk{inset:0;background:
  linear-gradient(112deg,transparent 20%,rgba(255,255,255,.09) 32%,transparent 44%),
  linear-gradient(112deg,transparent 52%,rgba(255,232,170,.08) 60%,transparent 68%),
  linear-gradient(112deg,transparent 74%,rgba(255,255,255,.05) 80%,transparent 86%)}
.lux-deco{inset:0;opacity:.085;background-size:104px 52px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='52' viewBox='0 0 104 52'%3E%3Cg fill='none' stroke='%23ffd77a' stroke-width='1'%3E%3Cpath d='M0 52a52 52 0 0 1 104 0M13 52a39 39 0 0 1 78 0M26 52a26 26 0 0 1 52 0M39 52a13 13 0 0 1 26 0'/%3E%3Cpath d='M-52 26a52 52 0 0 1 104 0M-39 26a39 39 0 0 1 78 0M-26 26a26 26 0 0 1 52 0M52 26a52 52 0 0 1 104 0M65 26a39 39 0 0 1 78 0M78 26a26 26 0 0 1 52 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 35%,#000 100%)}
.lux-horizon{left:-10%;right:-10%;bottom:-24vh;height:46vh;background:radial-gradient(50% 50% at 50% 50%,rgba(255,210,120,.3),rgba(255,210,120,0) 70%)}
.lux-grain{inset:0;opacity:.07;background-size:180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* transparent Signature S watermark */
.s-water{position:absolute;right:-7vmin;bottom:-16vmin;height:min(110vh,1150px);aspect-ratio:607/640;
  -webkit-mask:url(/brand/s-mark.png) center/contain no-repeat;mask:url(/brand/s-mark.png) center/contain no-repeat;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,226,150,.10) 45%,rgba(255,255,255,.02) 85%)}
.s-water.s2{right:auto;bottom:auto;left:-9vmin;top:-12vmin;height:min(42vh,420px);transform:rotate(-14deg);opacity:.55}

/* glass: champagne-gold hairlines, deeper luxury shadow */
.glass{box-shadow:0 26px 52px -28px rgba(4,18,80,.8),inset 0 1px 0 rgba(255,250,230,.75),inset 0 -1px 0 rgba(255,255,255,.14)}
.liquid::after{background:linear-gradient(135deg,rgba(255,238,180,.95),rgba(255,255,255,.2) 24%,rgba(255,255,255,.04) 52%,rgba(255,220,130,.5) 82%,rgba(255,244,205,.95));opacity:.9}
.appbar{position:relative}
.appbar::after{content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,222,140,.95),transparent)}
.top-l h2::after{content:"";display:block;width:46px;height:3px;border-radius:3px;margin-top:5px;background:linear-gradient(90deg,var(--brand),#f7c548 70%,#fff3c4)}
.main{scrollbar-width:thin;scrollbar-color:rgba(255,215,120,.65) transparent}
.main::-webkit-scrollbar{width:8px}.main::-webkit-scrollbar-thumb{background:linear-gradient(#ffe39a,#d49a22);border-radius:8px}
.sheet::before{content:"";position:absolute;right:-24px;bottom:-30px;width:190px;aspect-ratio:607/640;pointer-events:none;
  -webkit-mask:url(/brand/s-mark.png) center/contain no-repeat;mask:url(/brand/s-mark.png) center/contain no-repeat;background:rgba(255,255,255,.09)}

/* brand type */
.brand-title,.boot b{font-family:var(--serif);font-weight:700;letter-spacing:9px}
.brand-title{font-size:50px;margin-top:2px}
.appbar .logo b{font-family:var(--serif);font-size:23px;letter-spacing:3px;font-weight:700;line-height:1}
.appbar .logo small{display:block;font-size:11px;letter-spacing:.6px;margin-top:2px}

/* 2.5D clay brand tile (app bar) */
.brand-tile{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#fffdf6,#f3e5c3);
  box-shadow:inset 1px 2px 3px #fff,inset -2px -3px 6px rgba(160,110,20,.35),0 0 0 1.5px rgba(222,172,62,.95),0 8px 18px -6px rgba(5,20,80,.6),0 0 18px -4px rgba(255,210,110,.6);
  transition:transform .45s var(--spring)}
.brand-tile img{width:70%;height:auto;filter:drop-shadow(1px 2px 1px rgba(120,10,30,.28))}
.logo:hover .brand-tile{transform:perspective(300px) rotateY(20deg) rotateX(-6deg) scale(1.06)}

/* 4D extruded S: red enamel face on a gold body */
.s3d-wrap{perspective:700px;display:grid;justify-items:center}
.s3d-wrap::after{content:"";width:62%;height:12px;margin-top:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(5,20,80,.5),transparent)}
.s3d{position:relative;width:var(--sw,96px);aspect-ratio:607/640;transform-style:preserve-3d;animation:s3dSway 8s ease-in-out infinite}
.s3d span{position:absolute;inset:0;-webkit-mask:url(/brand/s-mark.png) center/contain no-repeat;mask:url(/brand/s-mark.png) center/contain no-repeat;
  background:linear-gradient(135deg,hsl(44,95%,calc(78% - var(--z,0) * 3.5%)),hsl(36,88%,calc(46% - var(--z,0) * 2.5%)));transform:translateZ(calc(var(--z,0) * -1.7px))}
.s3d .face{background:linear-gradient(140deg,#ff7591 0%,#e2204d 36%,#b3123a 72%,#ff5a7c 100%);transform:translateZ(1px)}
.s3d .glint{transform:translateZ(2px);overflow:hidden;background:none}
.s3d .glint i{position:absolute;top:-10%;bottom:-10%;left:0;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-140%) skewX(-15deg);animation:sGlint 4.6s ease-in-out infinite}
@keyframes sGlint{0%,55%{transform:translateX(-140%) skewX(-15deg)}100%{transform:translateX(320%) skewX(-15deg)}}
@keyframes s3dSway{0%,100%{transform:rotateY(-32deg) rotateX(7deg) translateY(0)}50%{transform:rotateY(32deg) rotateX(-5deg) translateY(-6px)}}
.brand-orb{width:auto;height:auto;margin:-96px auto 4px}
.brand-orb .s3d{--sw:108px}
.login-card{padding-top:30px}
.login-wm{display:block;width:min(250px,72%);height:auto;margin:22px auto 0;opacity:.92}
.boot{gap:10px}
.boot .s3d{--sw:88px}
.boot-wm{width:min(230px,60vw);height:auto;opacity:.9}

/* footer wordmark */
.brandfoot{display:flex;justify-content:center;margin-top:26px;padding:22px 0 4px;position:relative}
.brandfoot::before{content:"";position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,222,140,.8),transparent)}
.brandfoot img{width:min(210px,55vw);height:auto;opacity:.78}
.print-brand{display:none}

/* carousel brand: spinning gold medallion + S in the mirrored column */
.finial{z-index:62;perspective:240px;pointer-events:none}
.finial .coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:coinSpin 6s linear infinite}
.finial .cface{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#fffbe2,#f7c548 52%,#b47309);box-shadow:inset 0 0 0 2px #fff1b8,inset -3px -4px 6px rgba(120,70,0,.45),0 0 16px rgba(255,214,110,.85)}
.finial .cface::after{content:"";position:absolute;inset:19%;-webkit-mask:url(/brand/s-mark.png) center/contain no-repeat;mask:url(/brand/s-mark.png) center/contain no-repeat;background:linear-gradient(140deg,#ff6584,#dc1d47 50%,#a3102f)}
.finial .cface.back{transform:rotateY(180deg)}
@keyframes coinSpin{to{transform:rotateY(360deg)}}
.hub-s{position:absolute;left:18%;width:64%;height:auto;top:50%;transform:translateY(-50%);opacity:.92;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}

.lite .s3d,.lite .s3d .glint i,.lite .finial .coin{animation:none!important}
@media print{.print-brand{display:flex!important;align-items:center;gap:10px;font:700 16px var(--font);color:#000;margin-bottom:10px}.print-brand img{height:36px}.brandfoot,.bg{display:none!important}}
#login.screen{display:flex;flex-direction:column;align-items:center;height:100vh;height:100dvh;min-height:0;overflow-y:auto;padding:118px 16px 28px}#login .login-card{margin:auto 0}

/* =====================================================================
   v4 · Readability: deep sapphire panels clearly separated from the bright backdrop
   ===================================================================== */
:root{--muted:#d3defa;--dim:#aebfe8}
.glass{background:linear-gradient(155deg,rgba(22,52,138,.9),rgba(11,31,96,.93) 55%,rgba(15,41,116,.92));
  border:1px solid rgba(255,224,150,.42);
  box-shadow:0 22px 44px -22px rgba(2,10,50,.9),0 0 0 1px rgba(4,16,60,.35),inset 0 1px 0 rgba(255,255,255,.16)}
.liquid::before{opacity:.28}
.liquid::after{opacity:.7}
.appbar.glass,.tabbar.glass{background:linear-gradient(150deg,rgba(20,50,134,.9),rgba(10,30,94,.92))}
.sheet,.sheet.glass{background:linear-gradient(150deg,#173c9f,#0c2876)}
.login-card.glass{background:linear-gradient(155deg,rgba(24,56,146,.86),rgba(11,31,96,.9))}
.stage.glass{border-color:rgba(255,230,160,.7);box-shadow:0 26px 50px -24px rgba(2,10,50,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.field,.frm textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);box-shadow:inset 0 2px 6px rgba(0,0,0,.22)}
.seg{background:rgba(10,30,94,.78);border-color:rgba(255,224,150,.4);box-shadow:0 8px 18px -10px rgba(2,10,50,.8)}
.tbl td{background:rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.1);border-bottom-color:rgba(0,0,0,.2)}
.tbl tr.row:hover td{background:rgba(255,255,255,.13)}
.tbl th{color:var(--gold2)}
.ri{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.ri:hover{background:rgba(255,255,255,.13)}
.sp-s div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.heat th:first-child,.heat td:first-child{background:#132f86}
.heat td.z{background:rgba(255,255,255,.04)}
.cchip{background:rgba(11,31,96,.82);border-color:rgba(255,224,150,.38)}
.cchip.on{background:linear-gradient(100deg,rgba(255,206,90,.62),rgba(20,50,134,.9))}
/* headings that sit directly on the bright background */
.top h2{text-shadow:0 2px 10px rgba(4,18,80,.55)}
.top p{color:#fff;text-shadow:0 1px 6px rgba(4,18,80,.6)}
.back.btn.ghost{background:rgba(11,31,96,.8);color:#fff;border-color:rgba(255,224,150,.4)}
.kpi .lab,.card .sub{color:var(--muted)}
.lite .appbar.glass,.lite .tabbar.glass{background:#132f86}
.gs-hd{display:flex;gap:14px;align-items:center}.gs-hd .i4d{--s:52px}.gs-hd .sub{margin:2px 0 0}
.gs-st{margin:14px 0 8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.gs-st p{flex-basis:100%}
.gs-tabs{display:flex;gap:6px;flex-wrap:wrap}
a.btn{text-decoration:none}

/* v5 · performance + floating keypad */
.line-draw{--len:1000}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(290px,100%);margin:2px auto 16px;padding:12px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,224,150,.4);
  box-shadow:0 22px 34px -18px rgba(2,10,50,.85),inset 0 1px 0 rgba(255,255,255,.3);animation:padFloat 6s ease-in-out infinite;touch-action:manipulation}
@keyframes padFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.keypad button{height:54px;border:0;border-radius:18px;font:600 23px var(--num);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.08));
  box-shadow:inset 2px 3px 6px rgba(255,255,255,.38),inset -3px -5px 10px rgba(0,0,0,.3),0 8px 16px -8px rgba(0,0,0,.65);
  transition:transform .14s var(--spring),box-shadow .14s,background .14s}
.keypad button:hover{background:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,.12))}
.keypad button.down,.keypad button:active{transform:scale(.9) translateY(2px);box-shadow:inset 3px 4px 9px rgba(0,0,0,.38),inset -2px -2px 5px rgba(255,255,255,.2),0 0 18px rgba(255,214,110,.55)}
.keypad .fn{font:600 14px var(--font);color:var(--gold2)}
.keypad [data-k=back]{background:linear-gradient(160deg,#fff0b3,#f7c548 50%,#d69419);color:#3a2500;text-shadow:none}
.keypad button:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
.otp input.pop{animation:digitPop .32s var(--spring)}
@keyframes digitPop{0%{transform:scale(1.28)}}
@media (max-width:520px){.keypad{gap:8px;padding:10px}.keypad button{height:48px;font-size:21px}}
.lite .keypad{animation:none}
.brand-title{font-size:clamp(32px,10.5vw,50px);white-space:nowrap;letter-spacing:.16em}

/* v6 · keypad floats beside the login card (stacks as a bottom dock on phones) */
#login .login-wrap{display:flex;align-items:center;justify-content:center;gap:34px;width:100%;margin:auto 0}
#login .login-card{margin:0;flex:0 1 440px}
.keypad{position:relative;flex:none;width:250px;margin:0;padding:34px 16px 16px;gap:12px;border-radius:30px;
  background:linear-gradient(155deg,rgba(24,56,146,.9),rgba(11,31,96,.93));border:1px solid rgba(255,224,150,.5);
  box-shadow:0 30px 50px -24px rgba(2,10,50,.9),0 0 0 1px rgba(4,16,60,.3),inset 0 1px 0 rgba(255,255,255,.2),0 0 40px -12px rgba(255,205,90,.35)}
.keypad::before{content:"แตะเพื่อกรอกรหัส";position:absolute;top:11px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.4px;color:var(--gold2)}
.keypad button{height:58px}
@media (max-width:759px){
  #login.screen{padding-bottom:300px}
  .keypad{position:fixed;z-index:20;left:50%;bottom:max(12px,env(safe-area-inset-bottom));width:min(330px,calc(100% - 24px));
    padding:30px 12px 12px;gap:8px;animation:dockFloat 6s ease-in-out infinite}
  .keypad button{height:46px;font-size:21px}
}
@keyframes dockFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
.lite .keypad{animation:none}
@media (max-width:759px){.lite .keypad{transform:translateX(-50%)}}