/* ══════════════════════════════════════════════════════════════════════
   FX YEAR — Rekap 1 Tahun (#page-yearly), strip REKOR di kartu
   Salespeople, blok rekor di modal sales. Pasangan js/fx-year.js.
   Latar hitam pekat; kaca = isi putih tipis + kilau tepi (lihat glass.css).
   Hijau #30d158 = naik/aktif, emas #ffd426 = rekor, merah #ff453a = turun.
   Tanpa blur (aturan 2 glass.css), tanpa gap pada flex (iOS 14.0).
   ══════════════════════════════════════════════════════════════════════ */
#hxYear{
  --y-g:#30d158;--y-gold:#ffd426;--y-red:#ff453a;--y-mut:rgba(235,235,245,.55);--y-dim:rgba(235,235,245,.5);
  --y-ease:cubic-bezier(.22,1,.36,1);--y-spring:cubic-bezier(.34,1.45,.64,1);
  --y-fill:linear-gradient(165deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.028) 46%,rgba(255,255,255,.045) 100%);
  --y-card:inset 0 1px 0 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.075),inset 0 -14px 24px -18px rgba(255,255,255,.10),0 22px 44px -24px rgba(0,0,0,.9),0 3px 10px -2px rgba(0,0,0,.45);
  color:#f5f5f7;font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  padding-bottom:28px;
}
/* style.css memberi semua button min-height:42px — tinggi chip di sini eksplisit */
#hxYear button{min-height:0;font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hxy-ic{display:inline-block;width:12px;height:12px;vertical-align:-1px;font-style:normal}
.hxy-ic svg{display:block;width:100%;height:100%}

/* ── kepala ───────────────────────────────────────────────────────────── */
.hxy-head{display:grid;grid-template-columns:1fr auto;align-items:end;grid-column-gap:16px;margin:4px 0 18px}
.hxy-kick{grid-column:1/-1;grid-row:1;display:flex;align-items:center;font:700 10px/1 'Space Mono',monospace;letter-spacing:.24em;color:var(--y-g);margin-bottom:10px}
.hxy-kdot{width:7px;height:7px;border-radius:50%;background:var(--y-g);margin-right:9px;box-shadow:0 0 12px var(--y-g);animation:hxyBreath 2.4s ease-in-out 3}
.hxy-h1{grid-column:1;grid-row:2;margin:0;font-size:clamp(28px,4.6vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.02}
.hxy-who{display:flex;align-items:center;font-size:14px;letter-spacing:-.01em;color:var(--y-g);margin-bottom:6px}
.hxy-who .hx-mono{margin-right:6px}
.hxy-sub{grid-column:1;grid-row:3;margin:8px 0 0;font-size:12px;color:var(--y-mut);line-height:1.45}
.hxy-periods{grid-column:2;grid-row:2/4;display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);align-self:end;white-space:nowrap}
.hxy-seg{border:0;background:transparent;color:var(--y-mut);font-weight:700;font-size:12px;height:34px;padding:0 14px;border-radius:999px;cursor:pointer;transition:background-color .3s var(--y-ease),color .3s var(--y-ease),box-shadow .3s var(--y-ease)}
.hxy-seg.on{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -10px rgba(0,0,0,.9)}

/* ── angka besar ──────────────────────────────────────────────────────── */
.hxy-hero{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;grid-gap:12px;margin-bottom:14px}
.hxy-stat{position:relative;overflow:hidden;border-radius:22px;padding:16px 16px 14px;background:var(--y-fill);box-shadow:var(--y-card);min-width:0}
.hxy-sl{display:flex;align-items:center;font:700 9px/1.2 'Space Mono',monospace;letter-spacing:.16em;color:var(--y-mut);text-transform:uppercase}
.hxy-sl .hxy-ic{width:12px;height:12px;margin-right:6px;color:var(--y-gold)}
.hxy-sv{display:block;margin-top:10px;font-size:clamp(18px,2.2vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-ss{display:block;margin-top:6px;font-size:10.5px;color:var(--y-dim);line-height:1.35}
.hxy-stat-main .hxy-sv{font-size:clamp(24px,3vw,36px)}
.hxy-stat-main::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;background:radial-gradient(80% 100% at 20% 100%,rgba(48,209,88,.16),transparent 70%)}
.hxy-stat-ath{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,212,38,.28),0 18px 40px -22px rgba(255,212,38,.35),0 3px 10px -2px rgba(0,0,0,.45)}
.hxy-stat-ath .hxy-sv{color:var(--y-gold);text-shadow:0 0 22px rgba(255,212,38,.35)}
.hxy-up,.hxy-down{display:inline-flex;align-items:center;margin-right:12px}
.hxy-up{color:var(--y-g)}.hxy-down{color:var(--y-red)}
.hxy-up svg,.hxy-down svg{width:11px;height:11px;margin-right:4px}

/* ── kartu grafik ─────────────────────────────────────────────────────── */
.hxy-chartcard{position:relative;border-radius:28px;padding:18px 18px 14px;margin-bottom:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 48%,rgba(255,255,255,.055) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -40px 60px -50px rgba(48,209,88,.30),0 40px 80px -40px rgba(0,0,0,.95),0 6px 18px -4px rgba(0,0,0,.5)}
.hxy-lenses{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:0 18px 2px}
.hxy-lenses::-webkit-scrollbar{display:none}
.hxy-chip{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;padding:0 13px;margin-right:7px;border:0;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--y-mut);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background-color .3s var(--y-ease),color .3s var(--y-ease),box-shadow .3s var(--y-ease),transform .2s ease}
.hxy-chip .hx-mono{margin-right:6px}
.hxy-chip.on{color:#fff;background:rgba(48,209,88,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(48,209,88,.55),0 6px 18px -10px rgba(48,209,88,.6)}
.hxy-chip.is-sp{color:#0b0b0c;background:linear-gradient(180deg,#5ee584,#30d158);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -10px rgba(48,209,88,.8)}
.hxy-chip.is-sp .hxy-ic{width:12px;height:12px;margin-left:7px}
.hxy-chip:active{transform:scale(.96)}

.hxy-moments{display:flex;flex-wrap:wrap;align-items:center;margin-top:12px}
.hxy-mgrp{display:flex;flex-wrap:wrap;align-items:center;margin-right:14px}
.hxy-mlbl{font:700 8.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--y-dim);margin:4px 8px 4px 0}
.hxy-mchip{display:inline-flex;align-items:center;height:30px;padding:0 10px 0 8px;margin:3px 6px 3px 0;border:0;border-radius:999px;cursor:pointer;font-size:11.5px;font-weight:700}
.hxy-mchip .hxy-ic{width:11px;height:11px;margin-right:5px}
.hxy-mchip.rec{color:var(--y-gold);background:rgba(255,212,38,.10);box-shadow:inset 0 0 0 1px rgba(255,212,38,.35)}
.hxy-mchip.down{color:#ff6961;background:rgba(255,69,58,.10);box-shadow:inset 0 0 0 1px rgba(255,69,58,.35)}

/* grafik: tinggi tetap, 12 kolom. --padT = ruang label di atas batang,
   --foot = nama bulan + persen. .hxy-grid dan .hxy-track memakai batas yang sama. */
.hxy-chart{--padT:40px;--foot:36px;position:relative;height:300px;margin-top:10px;outline:none;-webkit-user-select:none;user-select:none}
.hxy-chart:focus-visible{box-shadow:0 0 0 2px rgba(48,209,88,.6);border-radius:14px}
.hxy-grid{position:absolute;left:0;right:0;top:var(--padT);bottom:var(--foot);pointer-events:none}
.hxy-gl{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.075)}
/* label sumbu di ATAS batang (z 4 > kolom 2 > garis rekor 3), dengan latar gelap */
.hxy-gl span{position:absolute;left:0;top:-14px;z-index:4;padding:1px 4px;border-radius:5px;background:rgba(0,0,0,.62);font:700 8.5px/1 'Space Mono',monospace;color:rgba(235,235,245,.5);letter-spacing:.04em}
.hxy-athsvg{position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:visible}
.hxy-ath-line{fill:none;stroke:var(--y-gold);stroke-width:1.6;stroke-dasharray:5 4;opacity:.85;stroke-linejoin:round}
.hxy-ath-glow{fill:none;stroke:rgba(255,212,38,.30);stroke-width:6;opacity:.6;stroke-linejoin:round;stroke-linecap:round}
.hxy-ath-dots circle{fill:var(--y-gold);stroke:#000;stroke-width:1.5;filter:drop-shadow(0 0 5px rgba(255,212,38,.9))}
.hxy-cols{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));z-index:2}
.hxy-col{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;padding:var(--padT) 0 0;margin:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:center}
.hxy-col:disabled{cursor:default}
.hxy-col::before{content:'';position:absolute;left:6%;right:6%;top:4px;bottom:0;border-radius:14px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.035) 40%,rgba(255,255,255,.075) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:opacity .35s var(--y-ease)}
.hxy-col.sel::before{opacity:1}
.hxy-col.st-record.sel::before{background:linear-gradient(180deg,rgba(255,212,38,0) 0%,rgba(255,212,38,.05) 45%,rgba(255,212,38,.11) 100%);box-shadow:inset 0 0 0 1px rgba(255,212,38,.16)}
.hxy-track{position:relative;flex:1 1 auto;min-height:0}
.hxy-bar{position:absolute;left:21%;right:21%;bottom:0;height:var(--h,0%);border-radius:8px 8px 3px 3px;overflow:hidden;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(94,229,132,.98) 0%,rgba(48,209,88,.62) 50%,rgba(48,209,88,.16) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(255,255,255,.14),0 12px 28px -12px rgba(48,209,88,.65);
  transition:height .8s var(--y-spring),filter .3s ease,box-shadow .4s ease,background .4s ease}
.hxy-shine{position:absolute;left:14%;top:2px;bottom:0;width:24%;border-radius:6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 70%)}
.hxy-ghost{position:absolute;left:21%;right:21%;bottom:0;height:var(--gp,0%);border-radius:8px 8px 3px 3px;opacity:0;pointer-events:none;
  border:1.5px dashed rgba(48,209,88,.6);border-bottom:0;background:linear-gradient(180deg,rgba(48,209,88,.10),rgba(48,209,88,0) 60%);
  transition:height .8s var(--y-spring),opacity .4s ease}
.hxy-col.is-cur .hxy-ghost{opacity:1}
.hxy-col.is-cur.st-record .hxy-ghost{border-color:rgba(255,212,38,.65);background:linear-gradient(180deg,rgba(255,212,38,.10),rgba(255,212,38,0) 60%)}
.hxy-tip{position:absolute;left:-8px;right:-8px;bottom:calc(var(--t,0%) + 5px);display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:bottom .8s var(--y-spring)}
.hxy-val{font-size:10.5px;font-weight:700;letter-spacing:-.03em;color:rgba(245,245,247,.82);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 3px #000,0 0 6px #000,0 0 10px rgba(0,0,0,.9)}
.hxy-crown{display:none;position:relative;width:15px;height:15px;margin-bottom:2px;color:var(--y-gold);filter:drop-shadow(0 0 6px rgba(255,212,38,.85))}
.hxy-crown svg{display:block;width:100%;height:100%}
.hxy-mon{display:block;height:20px;line-height:20px;font:700 9.5px/20px 'Space Mono',monospace;letter-spacing:.04em;color:var(--y-mut);text-transform:uppercase}
.hxy-dl{display:block;height:16px;font:700 8.5px/14px 'Space Mono',monospace;letter-spacing:-.02em;color:var(--y-dim);white-space:nowrap;overflow:hidden;text-overflow:clip}
.hxy-dl.pos{color:var(--y-g)}.hxy-dl.neg{color:#ff6961}

/* status kolom */
.st-record .hxy-bar{background:linear-gradient(180deg,#fff1a6 0%,#ffd426 22%,rgba(255,212,38,.55) 60%,rgba(255,212,38,.14) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.2),0 0 26px -4px rgba(255,212,38,.55),0 14px 30px -12px rgba(255,212,38,.7)}
.st-record .hxy-crown{display:block;animation:hxyFloat 3.2s ease-in-out 3}
.st-record .hxy-val{color:var(--y-gold)}
.st-down .hxy-bar{background:linear-gradient(180deg,#ff8a84 0%,rgba(255,69,58,.70) 30%,rgba(255,69,58,.30) 70%,rgba(255,69,58,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.12),0 12px 28px -14px rgba(255,69,58,.65)}
.st-down .hxy-val{color:#ff8a84}
.st-base .hxy-bar{background:linear-gradient(180deg,rgba(245,245,250,.92) 0%,rgba(235,235,245,.48) 50%,rgba(235,235,245,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.16),0 12px 28px -14px rgba(235,235,245,.35)}
.st-partial .hxy-bar{background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 3px,rgba(255,255,255,.06) 3px 7px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.st-partial .hxy-shine{display:none}
.st-partial .hxy-val,.st-partial .hxy-mon{color:var(--y-dim)}
.st-empty .hxy-track::after,.st-future .hxy-track::after{content:'';position:absolute;left:34%;right:34%;bottom:0;height:3px;border-radius:2px;background:rgba(255,255,255,.10)}
.st-future .hxy-track::after{background:transparent;border:1px dashed rgba(255,255,255,.16);height:14px;border-bottom:0;border-radius:6px 6px 0 0}
.st-empty .hxy-mon,.st-future .hxy-mon{color:rgba(235,235,245,.22)}
.st-empty .hxy-val{color:rgba(235,235,245,.2)}
.hxy-col.sel .hxy-bar{filter:brightness(1.12) saturate(1.08)}
.hxy-col.sel .hxy-mon{color:#fff}
.hxy-col.sel .hxy-val{color:#fff;font-size:11.5px}
.hxy-col.st-record.sel .hxy-val{color:var(--y-gold)}
.hxy-chart.is-scrub{cursor:grabbing}
.hxy-chart.is-scrub .hxy-col.sel .hxy-bar{filter:brightness(1.25) saturate(1.15)}

/* bulan berjalan: permukaan cair yang bergelombang + kilau yang berjalan */
.hxy-col.is-cur .hxy-bar::after{content:'';position:absolute;left:-30%;right:-30%;top:-5px;height:10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));animation:hxySurface 2.6s ease-in-out 3}
.hxy-col.is-cur .hxy-shine{animation:hxyRise 3.4s ease-in-out 3}
.hxy-col.is-cur .hxy-dl{color:var(--y-g);animation:hxyBreath 2.4s ease-in-out 3}

.hxy-legend{display:flex;flex-wrap:wrap;margin-top:10px;font:700 8.5px/1 'Space Mono',monospace;letter-spacing:.08em;color:var(--y-dim);text-transform:uppercase}
.hxy-legend span{display:inline-flex;align-items:center;margin:4px 14px 4px 0}
.hxy-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.hxy-lg-rec{background:var(--y-gold);box-shadow:0 0 8px rgba(255,212,38,.7)}
.hxy-lg-up{background:var(--y-g)}
.hxy-lg-down{background:var(--y-red)}
.hxy-lg-cur{border:1.5px dashed var(--y-g);background:transparent}
.hxy-lg-base{background:rgba(235,235,245,.75)}
.hxy-lg-ath{height:0!important;width:14px!important;border-top:1.6px dashed var(--y-gold);border-radius:0!important}

/* ── masuk (sekali per buka halaman) ──────────────────────────────────── */
#hxYear.hxy-in .hxy-head,#hxYear.hxy-in .hxy-stat,#hxYear.hxy-in .hxy-chartcard,#hxYear.hxy-in .hxy-detail,#hxYear.hxy-in .hxy-panel{animation:hxyUp .8s var(--y-ease) both}
#hxYear.hxy-in .hxy-stat:nth-child(2){animation-delay:.06s}
#hxYear.hxy-in .hxy-stat:nth-child(3){animation-delay:.12s}
#hxYear.hxy-in .hxy-stat:nth-child(4){animation-delay:.18s}
#hxYear.hxy-in .hxy-chartcard{animation-delay:.14s}
#hxYear.hxy-in .hxy-detail{animation-delay:.32s}
#hxYear.hxy-in .hxy-panel{animation-delay:.42s}
.hxy-chart.is-entrance .hxy-bar,.hxy-chart.is-entrance .hxy-ghost{animation:hxyGrow 1.05s var(--y-spring) both;animation-delay:calc(var(--i) * 65ms + .2s)}
.hxy-chart.is-entrance .hxy-tip{animation:hxyTip .6s var(--y-ease) both;animation-delay:calc(var(--i) * 65ms + .62s)}
.hxy-chart.is-entrance .st-record .hxy-crown{animation:hxyCrown .9s var(--y-spring) both,hxyFloat 3.2s ease-in-out 2.2s 3;animation-delay:calc(var(--i) * 65ms + .95s),2.2s}
.hxy-chart.is-entrance .hxy-dl,.hxy-chart.is-entrance .hxy-mon{animation:hxyFade .5s ease both;animation-delay:calc(var(--i) * 65ms + .4s)}
.hxy-chart.is-entrance .hxy-ath-dots circle{animation:hxyPop .55s var(--y-spring) both;animation-delay:calc(var(--i) * 90ms + 1.1s);transform-box:fill-box;transform-origin:center}
.hxy-spark{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.hxy-chart.is-entrance .st-record .hxy-spark::before,.hxy-chart.is-entrance .st-record .hxy-spark::after{content:'';position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(255,212,38,.9);opacity:0;animation:hxyRing .9s ease-out both;animation-delay:calc(var(--i) * 65ms + 1.05s)}
.hxy-chart.is-entrance .st-record .hxy-spark::after{border-style:dotted;border-width:3px;animation-delay:calc(var(--i) * 65ms + 1.2s)}

/* ── kartu detail bulan ───────────────────────────────────────────────── */
.hxy-detail{position:relative;border-radius:26px;padding:18px;margin-bottom:14px;background:var(--y-fill);box-shadow:var(--y-card)}
.hxy-detail.flip>*{animation:hxyUp .45s var(--y-ease) both}
.hxy-detail.flip>*:nth-child(2){animation-delay:.04s}.hxy-detail.flip>*:nth-child(3){animation-delay:.08s}.hxy-detail.flip>*:nth-child(4){animation-delay:.12s}.hxy-detail.flip>*:nth-child(5){animation-delay:.16s}
.hxy-dhead{display:flex;align-items:flex-start;justify-content:space-between}
.hxy-dmon{font-size:19px;font-weight:800;letter-spacing:-.03em}
.hxy-pills{display:flex;flex-wrap:wrap;margin-top:6px}
.hxy-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin:0 6px 4px 0;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.01em}
.hxy-pill .hxy-ic{width:11px;height:11px;margin-right:5px}
.hxy-p-gold{color:#1a1400;background:linear-gradient(180deg,#ffe066,#ffd426);box-shadow:0 0 16px -2px rgba(255,212,38,.6)}
.hxy-p-red{color:#ff8a84;background:rgba(255,69,58,.14);box-shadow:inset 0 0 0 1px rgba(255,69,58,.4)}
.hxy-p-green{color:var(--y-g);background:rgba(48,209,88,.12);box-shadow:inset 0 0 0 1px rgba(48,209,88,.4)}
.hxy-p-grey{color:var(--y-mut);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hxy-p-live{color:var(--y-g);background:rgba(48,209,88,.10);box-shadow:inset 0 0 0 1px rgba(48,209,88,.35)}
.hxy-ldot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--y-g);margin-right:6px;box-shadow:0 0 8px var(--y-g);animation:hxyBreath 1.6s ease-in-out 3}
.hxy-link{flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 10px 0 13px;border:0;border-radius:999px;cursor:pointer;font-size:11.5px;font-weight:700;color:#f5f5f7;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.09)}
.hxy-link .hxy-ic{width:12px;height:12px;margin-left:4px;opacity:.6}
.hxy-link:active{transform:scale(.97)}
.hxy-dval{margin:12px 0 14px;font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.hxy-dval.is-rec{color:var(--y-gold);text-shadow:0 0 28px rgba(255,212,38,.35)}
.hxy-cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:9px;margin-bottom:12px}
.hxy-cbox{border-radius:16px;padding:11px 12px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);min-width:0}
.hxy-cbox span{display:block;font:700 8.5px/1.2 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--y-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-cbox b{display:flex;align-items:center;margin-top:7px;font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-cbox b svg{width:12px;height:12px;margin-right:5px;flex:0 0 auto}
.hxy-cbox small{display:block;margin-top:4px;font-size:10.5px;color:var(--y-mut);line-height:1.3}
.hxy-cbox.hxy-bt-pos b{color:var(--y-g)}
.hxy-cbox.hxy-bt-neg b{color:#ff6961}
.hxy-cbox.hxy-bt-gold{background:rgba(255,212,38,.07);box-shadow:inset 0 0 0 1px rgba(255,212,38,.30)}
.hxy-cbox.hxy-bt-gold b{color:var(--y-gold)}
.hxy-cbox.hxy-bt-live{box-shadow:inset 0 0 0 1px rgba(48,209,88,.28)}
.hxy-dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:9px}
.hxy-dstats>div{min-width:0;padding:10px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hxy-dstats span{display:block;font:700 8.5px/1.2 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--y-dim)}
.hxy-dstats b{display:flex;align-items:center;margin-top:5px;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-dstats b .hx-mono{margin-right:5px}
.hxy-top{margin-top:14px}
.hxy-ptitle{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.hxy-ptitle small{display:block;margin-top:3px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--y-mut)}
.hxy-trow,.hxy-crow,.hxy-trw{display:grid;align-items:center;width:100%;margin:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);transition:background-color .25s ease}
.hxy-trow{grid-template-columns:30px minmax(0,1fr) auto 14px;padding:10px 4px;border-radius:12px}
.hxy-rk{font:700 12px/1 'Space Mono',monospace;color:var(--y-mut)}
.hxy-rk.r1{color:var(--y-gold)}
.hxy-tn,.hxy-cn{min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-tn small,.hxy-cn small{display:flex;align-items:center;margin-top:3px;font-size:10px;font-weight:500;color:var(--y-dim)}
.hxy-tn small .hx-mono,.hxy-cn small .hx-mono{margin-right:5px;transform:scale(.85);transform-origin:left center}
.hxy-tv{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;margin-left:8px}
.hxy-chev{width:12px;height:12px;opacity:.35;margin-left:4px}
@media (hover:hover){.hxy-trow:hover,.hxy-crow:hover,.hxy-trw:hover{background-color:rgba(255,255,255,.04)}}
.hxy-empty{padding:14px 2px;font-size:12px;color:var(--y-mut)}

/* ── panel bawah: kejar rekor + semua bulan ───────────────────────────── */
.hxy-split{display:grid;grid-template-columns:1.15fr 1fr;grid-gap:14px;align-items:start}
.hxy-panel{border-radius:26px;padding:18px;background:var(--y-fill);box-shadow:var(--y-card);min-width:0}
.hxy-crow{grid-template-columns:minmax(0,1fr) minmax(40px,.7fr) auto;grid-column-gap:12px;padding:10px 4px;border-radius:12px}
.hxy-crow.sel{background:rgba(48,209,88,.08);box-shadow:inset 0 0 0 1px rgba(48,209,88,.35)}
.hxy-cbar{position:relative;display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hxy-cbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(48,209,88,.45),#30d158);box-shadow:0 0 10px rgba(48,209,88,.45);transform-origin:0 50%;transition:width .8s var(--y-ease)}
.hxy-crow.is-rec .hxy-cbar i{background:linear-gradient(90deg,#ffb800,#ffd426,#fff1a6,#ffd426);background-size:200% 100%;box-shadow:0 0 12px rgba(255,212,38,.6);animation:hxyGoldFlow 2.6s linear 2}
.hxy-cv{text-align:right;min-width:84px}
.hxy-cv b{display:inline-flex;align-items:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.hxy-cv b svg{width:12px;height:12px;margin-right:4px}
.hxy-cv b.gold{color:var(--y-gold)}
.hxy-cv b.mut{color:var(--y-mut);font-size:12px}
.hxy-cv small{display:block;margin-top:3px;font-size:9.5px;color:var(--y-dim);white-space:nowrap}
.hxy-more{display:block;width:100%;margin-top:10px;height:38px;border:0;border-radius:12px;cursor:pointer;font-size:12px;font-weight:700;color:var(--y-mut);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#hxYear.hxy-in .hxy-cbar i{animation:hxyFill 1.1s var(--y-ease) both;animation-delay:.6s}
#hxYear.hxy-in .hxy-crow.is-rec .hxy-cbar i{animation:hxyFill 1.1s var(--y-ease) .6s both,hxyGoldFlow 2.6s linear 1.7s 2}

.hxy-trw{grid-template-columns:62px minmax(0,1fr) auto auto;grid-column-gap:10px;padding:9px 4px;border-radius:12px}
.hxy-trw.sel{background:rgba(255,255,255,.06)}
.hxy-tm{font-size:13px;font-weight:800}
.hxy-tm small{font-size:9.5px;font-weight:500;color:var(--y-dim)}
.hxy-tb{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.hxy-tb i{display:block;height:100%;border-radius:99px;background:rgba(48,209,88,.75)}
.hxy-trw.st-record .hxy-tb i{background:var(--y-gold);box-shadow:0 0 10px rgba(255,212,38,.6)}
.hxy-trw.st-down .hxy-tb i{background:rgba(255,69,58,.8)}
.hxy-trw.st-partial .hxy-tb i{background:rgba(255,255,255,.25)}
.hxy-tr{text-align:right;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hxy-tr small{display:block;font:700 9px/1.3 'Space Mono',monospace;color:var(--y-dim)}
.hxy-tr small.pos{color:var(--y-g)}.hxy-tr small.neg{color:#ff6961}
.hxy-tt{display:flex;flex-direction:column;align-items:flex-end;min-width:58px}
.hxy-tt em{display:inline-flex;align-items:center;font-style:normal;font-size:9.5px;font-weight:700;height:19px;padding:0 7px;border-radius:999px;margin:1px 0}
.hxy-tt em svg{width:10px;height:10px;margin-right:3px}
.hxy-tag-gold{color:#1a1400;background:var(--y-gold)}
.hxy-tag-red{color:#ff8a84;background:rgba(255,69,58,.14)}
.hxy-tag-green{color:var(--y-g);background:rgba(48,209,88,.12)}
.hxy-tag-live{color:var(--y-g);background:transparent;box-shadow:inset 0 0 0 1px rgba(48,209,88,.4)}
.hxy-tag-grey{color:var(--y-mut);background:rgba(255,255,255,.07)}
.hxy-foot{margin:16px 4px 0;font-size:10.5px;line-height:1.5;color:var(--y-dim)}

/* ── tombol di kepala Monthly Recap ───────────────────────────────────── */
.hxy-mbtn{position:relative;display:inline-flex;align-items:center;overflow:hidden;height:40px;margin:14px 0 0 8px;padding:0 14px 0 11px;border:0;border-radius:999px;cursor:pointer;
  font:700 13px/1 'Space Grotesk',system-ui,-apple-system,sans-serif;letter-spacing:.01em;color:#f5f5f7;
  background:linear-gradient(180deg,rgba(255,212,38,.16),rgba(255,212,38,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,212,38,.30),0 10px 24px -14px rgba(0,0,0,.9);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .14s ease;min-height:0}
.hxy-mbtn .ic{display:block;width:18px;height:18px;margin-right:8px;color:#ffd426}
.hxy-mbtn .ic svg,.hxy-mbtn .ch svg{display:block;width:100%;height:100%}
.hxy-mbtn .ch{display:block;width:14px;height:14px;margin-left:8px;opacity:.5}
.hxy-mbtn:active{transform:scale(.97)}

/* ══ STRIP REKOR — kartu Salespeople ═════════════════════════════════════ */
.hxy-ath{margin-top:10px;padding-top:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hxy-ath-top{display:flex;align-items:center;justify-content:space-between;min-width:0}
.hxy-ath-l{flex:0 0 auto;display:inline-flex;align-items:center;font:700 8px/1 'Space Mono',monospace;letter-spacing:.14em;color:#ffd426}
.hxy-ath-l svg{width:10px;height:10px;margin-right:4px}
.hxy-ath-v{min-width:0;margin-left:6px;font:700 11px/1.1 'Space Grotesk',system-ui,sans-serif;color:#f5f5f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.hxy-ath-bar{position:relative;height:5px;margin:7px 0 6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hxy-ath-bar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:#ffd426;box-shadow:0 0 6px #ffd426}
.hxy-ath-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(48,209,88,.45),#30d158);box-shadow:0 0 10px rgba(48,209,88,.5);transform-origin:0 50%}
.hxy-ath-sub{font:700 8.5px/1.3 'Space Mono',monospace;color:rgba(235,235,245,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxy-ath-sub b{color:#f5f5f7}
.hxy-ath.is-first .hxy-ath-v{color:rgba(235,235,245,.55)}
.hxy-ath.is-first .hxy-ath-sub{margin-top:6px}
.hxy-ath.is-rec .hxy-ath-v{color:#ffd426}
.hxy-ath.is-rec .hxy-ath-bar i,.hxy-mrec.is-rec .hxy-ath-bar i{background:linear-gradient(90deg,#ffb800,#ffd426,#fff1a6,#ffd426);background-size:200% 100%;box-shadow:0 0 12px rgba(255,212,38,.7);animation:hxyGoldFlow 2.6s linear 2}
.hxy-ath.is-rec .hxy-ath-sub{color:rgba(255,212,38,.75)}
.spc.hxy-rec-card{box-shadow:var(--lg-hi),inset 0 0 0 1px rgba(255,212,38,.38),var(--lg-glow),0 18px 40px -22px rgba(255,212,38,.45)!important}
#spGrid.hxy-cards-in .hxy-ath-bar i{animation:hxyFill 1.1s var(--y-ease,cubic-bezier(.22,1,.36,1)) .2s both}
#spGrid.hxy-cards-in .hxy-ath.is-rec .hxy-ath-bar i{animation:hxyFill 1.1s cubic-bezier(.22,1,.36,1) .2s both,hxyGoldFlow 2.6s linear 1.3s 2}

/* ══ BLOK REKOR — modal sales ════════════════════════════════════════════ */
.hxy-mrec{margin:12px 0 14px;padding:14px 14px 12px;border-radius:18px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07)}
.hxy-mrec.is-rec{background:linear-gradient(165deg,rgba(255,212,38,.12),rgba(255,212,38,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,212,38,.38),0 16px 36px -22px rgba(255,212,38,.5)}
.hxy-mr-top{display:flex;align-items:center;justify-content:space-between}
.hxy-mr-l{display:inline-flex;align-items:center;font:700 9px/1 'Space Mono',monospace;letter-spacing:.16em;color:#ffd426}
.hxy-mr-l .hxy-ic{width:12px;height:12px;margin-right:6px}
.hxy-mr-ath{font:700 9px/1 'Space Mono',monospace;color:rgba(235,235,245,.4);letter-spacing:.04em}
.hxy-mr-v{margin-top:9px;font:800 20px/1.1 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.03em;color:#f5f5f7}
.hxy-mrec.is-rec .hxy-mr-v{color:#ffd426}
.hxy-mr-s{margin-top:4px;font-size:11px;line-height:1.4;color:rgba(235,235,245,.55)}
.hxy-ath-bar.lg{height:7px;margin:10px 0 4px}
.hxy-mbars{display:flex;height:74px;margin-top:10px}
.hxy-mb{flex:1 1 0;display:flex;flex-direction:column;min-width:0;margin:0 2px}
.hxy-mb b{position:relative;flex:1 1 auto;display:block}
.hxy-mb i{position:absolute;left:16%;right:16%;bottom:0;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#5ee584,rgba(48,209,88,.3));animation:hxyGrow .8s cubic-bezier(.34,1.45,.64,1) both;transform-origin:50% 100%}
.hxy-mb.rec i{background:linear-gradient(180deg,#fff1a6,#ffd426 30%,rgba(255,212,38,.35));box-shadow:0 0 12px rgba(255,212,38,.55)}
.hxy-mb.dn i{background:linear-gradient(180deg,#ff8a84,rgba(255,69,58,.3))}
.hxy-mb.pa i{background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 3px,rgba(255,255,255,.08) 3px 6px)}
.hxy-mb.base i{background:linear-gradient(180deg,rgba(245,245,250,.9),rgba(235,235,245,.25))}
.hxy-mrec.is-live .hxy-mb i{animation:none}
.hxy-mb.cur i{box-shadow:0 0 0 1.5px rgba(48,209,88,.9),0 0 12px rgba(48,209,88,.5)}
.hxy-mb.ath b::after{content:'';position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#ffd426;box-shadow:0 0 8px #ffd426}
.hxy-mb em{display:block;margin-top:4px;font:700 7.5px/1 'Space Mono',monospace;color:rgba(235,235,245,.4);text-align:center;font-style:normal;text-transform:uppercase;overflow:hidden}
.hxy-mb:nth-child(1) i{animation-delay:.05s}.hxy-mb:nth-child(2) i{animation-delay:.09s}.hxy-mb:nth-child(3) i{animation-delay:.13s}.hxy-mb:nth-child(4) i{animation-delay:.17s}
.hxy-mb:nth-child(5) i{animation-delay:.21s}.hxy-mb:nth-child(6) i{animation-delay:.25s}.hxy-mb:nth-child(7) i{animation-delay:.29s}.hxy-mb:nth-child(8) i{animation-delay:.33s}
.hxy-mb:nth-child(9) i{animation-delay:.37s}.hxy-mb:nth-child(10) i{animation-delay:.41s}.hxy-mb:nth-child(11) i{animation-delay:.45s}.hxy-mb:nth-child(12) i{animation-delay:.49s}

/* ── keyframes ────────────────────────────────────────────────────────── */
@keyframes hxyGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hxyTip{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hxyFade{from{opacity:0}to{opacity:1}}
@keyframes hxyUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hxyCrown{0%{opacity:0;transform:scale(0) rotate(-35deg)}60%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes hxyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hxyRing{0%{opacity:.95;transform:scale(.2)}100%{opacity:0;transform:scale(1.9)}}
@keyframes hxyPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes hxyBreath{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes hxySurface{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(2px) scaleX(.85)}}
@keyframes hxyRise{0%{transform:translateY(100%);opacity:0}25%{opacity:1}100%{transform:translateY(-60%);opacity:0}}
@keyframes hxyFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hxyGoldFlow{from{background-position:200% 0}to{background-position:0 0}}

/* ── HP ───────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* HP: grafik dulu (pandangan elang), lalu detail bulan, lalu angka ringkas */
  #hxYear{display:flex;flex-direction:column}
  .hxy-head{order:1;margin-top:0}
  .hxy-chartcard{order:2}
  .hxy-detail{order:3}
  .hxy-hero{order:4}
  .hxy-split{order:5}
  .hxy-foot{order:6}
  .hxy-kick{grid-column:1;grid-row:1;margin-bottom:0;align-self:center}
  .hxy-periods{grid-column:2;grid-row:1;align-self:center;padding:3px}
  .hxy-seg{height:30px;padding:0 11px;font-size:11.5px}
  .hxy-h1{grid-column:1/-1;margin-top:14px}
  .hxy-sub{grid-column:1/-1;margin-top:6px}
  .hxy-hero{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:9px}
  .hxy-stat{padding:13px 12px 12px;border-radius:18px}
  .hxy-stat-main{grid-column:1/-1;padding:16px}
  .hxy-stat-main .hxy-sv{font-size:28px}
  .hxy-sv{font-size:16px;margin-top:8px}
  .hxy-sl{font-size:8px;letter-spacing:.12em}
  .hxy-ss{font-size:9.5px}
  .hxy-chartcard{padding:14px 12px 12px;border-radius:24px}
  .hxy-lenses{margin:0 -12px;padding:0 12px 2px}
  .hxy-chart{--padT:36px;height:262px}
  .hxy-val{font-size:9px;letter-spacing:-.04em}
  .hxy-col.sel .hxy-val{font-size:10px}
  .hxy-mon{font-size:8.5px}
  .hxy-dl{font-size:7.5px;letter-spacing:-.05em}
  .hxy-bar,.hxy-ghost{left:18%;right:18%}
  .hxy-crown{width:13px;height:13px}
  .hxy-gl span{font-size:7.5px}
  .hxy-detail,.hxy-panel{padding:16px 14px;border-radius:22px}
  .hxy-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hxy-cmp .hxy-cbox:first-child:nth-last-child(3),.hxy-cmp .hxy-cbox:first-child:nth-last-child(1){grid-column:1/-1}
  .hxy-dstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hxy-split{grid-template-columns:1fr}
  .hxy-crow{grid-template-columns:minmax(0,1fr) minmax(36px,.6fr) auto;grid-column-gap:10px}
  .hxy-cv{min-width:78px}
  .hxy-mbtn{margin-left:0}
}
@media (max-width:340px){
  .hxy-col.sel .hxy-val{font-size:9px;letter-spacing:-.06em}
}
@media (max-width:360px){
  .hxy-val{font-size:8px}
  .hxy-dl{font-size:7px}
  .hxy-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hxy-hero .hxy-stat:last-child{grid-column:1/-1}
}

/* nav desktop sempit (769–1279px): tab ini pakai label pendek "Yearly"
   supaya tab Admin tidak terdorong keluar layar */
@media (min-width:769px) and (max-width:1279px){
  /* !important: reference-dashboard.css memaksa .premium-nav-label{display:inline!important} */
  .nav-tab[data-page="yearly"] .premium-nav-label{display:none!important}
  .nav-tab[data-page="yearly"] .premium-mobile-label{display:inline!important}
  /* + kapsul sedikit lebih rapat di lebar ini (glass.css: 0 18px) → Admin tetap terlihat di 1024 */
  .nav-bar .nav-tab{padding:0 13px!important}
}

/* Kurangi Gerak */
@media (prefers-reduced-motion:reduce){
  #hxYear *,#hxYear *::before,#hxYear *::after,.hxy-ath *,.hxy-mrec *{animation:none!important;transition:none!important}
}