:root { --pu-blue:#0D1B3E; --pu-blue-light:#1F3270; --pu-yellow:#FDCE0A; --pu-orange:#FFDD3C; }
* { font-family:'Poppins',sans-serif; }
body {
  background:
    radial-gradient(ellipse at top left, rgba(13,27,62,.08), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(253,206,10,.06), transparent 50%),
    #F9FAFB;
  min-height:100vh;
}
.dark body, body.dark {
  background:
    radial-gradient(ellipse at top left, rgba(13,27,62,.25), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(253,206,10,.08), transparent 50%),
    #0f172a;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes slideIn { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes scaleIn { from{opacity:0;transform:scale(.9);} to{opacity:1;transform:scale(1);} }
@keyframes glow {
  from{box-shadow:0 0 10px rgba(253,206,10,.4),0 0 20px rgba(253,206,10,.2);}
  to{box-shadow:0 0 18px rgba(253,206,10,.8),0 0 35px rgba(253,206,10,.4);}
}
@keyframes shimmer { 0%{background-position:-1000px 0;} 100%{background-position:1000px 0;} }
@keyframes marqueeH { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes marqueeV { 0%{transform:translateY(0);} 100%{transform:translateY(-50%);} }
@keyframes pulseBorderRed {
  0%,100%{border-color:rgba(239,68,68,.4); box-shadow:0 0 0 0 rgba(239,68,68,.4);}
  50%{border-color:rgba(239,68,68,1); box-shadow:0 0 0 6px rgba(239,68,68,0);}
}
@keyframes pulseBorderYellow {
  0%,100%{border-color:rgba(253,206,10,.5); box-shadow:0 0 0 0 rgba(253,206,10,.4);}
  50%{border-color:rgba(253,206,10,1); box-shadow:0 0 0 6px rgba(253,206,10,0);}
}
@keyframes fkpiGlow {
  0%,100% { box-shadow:0 4px 16px rgba(13,27,62,.12), inset 0 0 0 1px rgba(253,206,10,.0); }
  50%     { box-shadow:0 8px 24px rgba(13,27,62,.18), inset 0 0 0 1px rgba(253,206,10,.35); }
}

.glass { background:rgba(255,255,255,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.4); }
.dark .glass { background:rgba(30,41,59,.6); border:1px solid rgba(51,65,85,.5); }
.glass-strong { background:rgba(255,255,255,.9); backdrop-filter:blur(24px); border:1px solid rgba(229,231,235,.8); }
.dark .glass-strong { background:rgba(30,41,59,.85); border:1px solid rgba(51,65,85,.6); }

.gradient-pu { background:linear-gradient(135deg,#0D1B3E 0%,#1F3270 50%,#FDCE0A 200%); }
.gradient-pu-soft { background:linear-gradient(135deg,rgba(13,27,62,.08) 0%,rgba(253,206,10,.05) 100%); }

.blink-dot { width:10px;height:10px;border-radius:50%;background:#EF4444;animation:blink 1.2s infinite;box-shadow:0 0 8px rgba(239,68,68,.7); }
.blink-dot-yellow { width:10px;height:10px;border-radius:50%;background:#FDCE0A;animation:blink 1.2s infinite;box-shadow:0 0 8px rgba(253,206,10,.7); }
.blink-dot-green { width:10px;height:10px;border-radius:50%;background:#10B981;animation:pulse 2.5s infinite;box-shadow:0 0 8px rgba(16,185,129,.7); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,.04); border-radius:8px; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#0D1B3E,#1F3270); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#FDCE0A; }
.dark ::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }

.pu-logo-svg { background:#0D1B3E; color:#FDCE0A; }
.grid-bg { background-image:linear-gradient(rgba(13,27,62,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,62,.05) 1px,transparent 1px); background-size:32px 32px; }
.dark .grid-bg { background-image:linear-gradient(rgba(253,206,10,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(253,206,10,.04) 1px,transparent 1px); }
.hex-pattern { background-image:radial-gradient(rgba(253,206,10,.08) 1px,transparent 1px); background-size:24px 24px; }

.pulse-border-red { animation:pulseBorderRed 1.8s infinite; }
.pulse-border-yellow { animation:pulseBorderYellow 2s infinite; }
.tab-active { background:linear-gradient(135deg,#0D1B3E 0%,#1F3270 100%); color:#FDCE0A !important; box-shadow:0 6px 16px rgba(13,27,62,.35); }
.dark .tab-active { background:linear-gradient(135deg,#FDCE0A 0%,#FFDD3C 100%); color:#0D1B3E !important; box-shadow:0 6px 18px rgba(253,206,10,.4); }

.toast { animation:slideIn .35s cubic-bezier(.22,1,.36,1); }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

.marquee-h { display:inline-flex; gap:48px; animation:marqueeH 35s linear infinite; white-space:nowrap; }
.marquee-h:hover { animation-play-state:paused; }
.marquee-v { animation:marqueeV 25s linear infinite; }
.marquee-v:hover { animation-play-state:paused; }

.fut-input { background:rgba(255,255,255,.6); border:1.5px solid rgba(13,27,62,.15); transition:all .2s ease; }
.fut-input:focus { background:rgba(255,255,255,.95); border-color:#1F3270; box-shadow:0 0 0 4px rgba(31,50,112,.12); outline:none; }
.dark .fut-input { background:rgba(15,23,42,.6); border-color:rgba(253,206,10,.2); color:#f1f5f9; }
.dark .fut-input:focus { background:rgba(15,23,42,.95); border-color:#FDCE0A; box-shadow:0 0 0 4px rgba(253,206,10,.15); }

.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; }
.badge-blue { background:rgba(13,27,62,.1); color:#0D1B3E; }
.dark .badge-blue { background:rgba(96,165,250,.2); color:#FDCE0A; }
.badge-yellow { background:rgba(253,206,10,.18); color:#92400E; }
.dark .badge-yellow { background:rgba(253,206,10,.18); color:#FDCE0A; }
.badge-green { background:rgba(16,185,129,.12); color:#047857; }
.badge-red { background:rgba(239,68,68,.12); color:#B91C1C; }
.badge-purple { background:rgba(168,85,247,.12); color:#7E22CE; }
.badge-slate { background:rgba(100,116,139,.12); color:#475569; }
.dark .badge-slate { background:rgba(148,163,184,.2); color:#CBD5E1; }

.login-bg {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(253,206,10,.15), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(31,50,112,.25), transparent 50%),
    linear-gradient(135deg,#050a1c 0%,#0D1B3E 50%,#1F3270 100%);
}

details summary::-webkit-details-marker { display:none; }
details > summary { list-style:none; cursor:pointer; }

/* === v3 NEW: futuristic KPI === */
.fkpi {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 100%);
  border:1px solid rgba(13,27,62,.12);
  border-radius:14px;
  padding:10px 12px;
  transition:all .25s ease;
  cursor:pointer;
}
.dark .fkpi {
  background:linear-gradient(135deg, rgba(30,41,59,.85) 0%, rgba(15,23,42,.7) 100%);
  border-color:rgba(253,206,10,.18);
}
.fkpi::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(253,206,10,.15), transparent 50%);
  pointer-events:none;
}
.fkpi:hover { transform:translateY(-2px); animation:fkpiGlow 1.6s ease-in-out infinite; }
.fkpi-num { font-family:'JetBrains Mono',monospace; font-weight:800; font-size:22px; line-height:1.05; }

/* === v3 NEW: popout card affordance === */
.popout { position:relative; cursor:pointer; transition:all .25s ease; }
.popout::after {
  content:"↗"; position:absolute; top:8px; right:10px;
  font-size:11px; color:#0D1B3E; opacity:0; transition:all .2s;
}
.dark .popout::after { color:#FDCE0A; }
.popout:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(13,27,62,.15); }
.popout:hover::after { opacity:.9; transform:translate(2px,-2px); }

/* === modal === */
.modal-backdrop { background:rgba(15,23,42,.55); backdrop-filter:blur(4px); }
.modal-card {
  background:#fff; border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
  max-height:92vh; overflow-y:auto;
  animation:scaleIn .25s ease-out;
}
.dark .modal-card { background:#1e293b; color:#f1f5f9; }

/* === table === */
.data-table { width:100%; font-size:12px; border-collapse:separate; border-spacing:0; }
.data-table thead { position:sticky; top:0; z-index:5; background:#0D1B3E; color:#FDCE0A; }
.dark .data-table thead { background:#050a1c; }
.data-table th { padding:8px 10px; text-align:left; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.data-table td { padding:8px 10px; border-top:1px solid rgba(148,163,184,.18); vertical-align:top; }
.dark .data-table td { border-top:1px solid rgba(51,65,85,.6); }
.data-table tbody tr:hover { background:rgba(253,206,10,.06); }
.dark .data-table tbody tr:hover { background:rgba(253,206,10,.08); }

.audit-meta { font-family:'JetBrains Mono',monospace; font-size:10px; color:#94A3B8; }
.dark .audit-meta { color:#64748B; }

/* multi-select chip */
.chip-pick {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:rgba(241,245,249,.7); border:1.5px solid transparent;
  font-size:11px; font-weight:600; cursor:pointer; transition:all .15s ease;
}
.chip-pick.on {
  background:rgba(13,27,62,.12); border-color:#0D1B3E; color:#0D1B3E;
}
.dark .chip-pick { background:rgba(51,65,85,.4); color:#CBD5E1; }
.dark .chip-pick.on { background:rgba(253,206,10,.18); border-color:#FDCE0A; color:#FDCE0A; }

/* compact KPI gradient variants */
.fkpi-blue::before { background:radial-gradient(circle at 80% 20%, rgba(13,27,62,.25), transparent 60%); }
.fkpi-yellow::before { background:radial-gradient(circle at 80% 20%, rgba(253,206,10,.3), transparent 60%); }
.fkpi-green::before { background:radial-gradient(circle at 80% 20%, rgba(16,185,129,.25), transparent 60%); }
.fkpi-red::before { background:radial-gradient(circle at 80% 20%, rgba(239,68,68,.22), transparent 60%); }
.fkpi-purple::before { background:radial-gradient(circle at 80% 20%, rgba(168,85,247,.22), transparent 60%); }
.fkpi-orange::before { background:radial-gradient(circle at 80% 20%, rgba(255,183,77,.25), transparent 60%); }

/* upb heatmap */
.heat-cell { width:32px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; font-family:'JetBrains Mono',monospace; border-radius:3px;
  cursor:pointer; transition:transform .12s; }
.heat-cell:hover { transform:scale(1.18); z-index:5; box-shadow:0 4px 10px rgba(0,0,0,.18); }

/* KPI number blink / pulse glow */
@keyframes kpiBlink {
  0%,100% { opacity:1; text-shadow:none; }
  50%     { opacity:.7; text-shadow:0 0 14px currentColor; }
}
.kpi-blink { animation: kpiBlink 2s ease-in-out infinite; }

/* === KPI Spotlight: confetti + podium === */
@keyframes confettiFall {
  0%   { transform:translateY(-8vh) rotate(0deg); opacity:1; }
  100% { transform:translateY(105vh) rotate(720deg); opacity:.55; }
}
.confetti-piece {
  position:absolute; top:-8vh; border-radius:2px;
  animation:confettiFall linear infinite;
}
@keyframes podiumUp {
  from { transform:translateY(36px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.podium-col { animation:podiumUp .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes trophyBounce {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-8px) scale(1.08); }
}
.trophy-bounce { animation:trophyBounce 1.6s ease-in-out infinite; display:inline-block; }
@keyframes crownGlow {
  0%,100% { filter:drop-shadow(0 0 3px rgba(253,206,10,.5)); transform:rotate(-4deg); }
  50%     { filter:drop-shadow(0 0 14px rgba(253,206,10,1)); transform:rotate(4deg); }
}
.crown-glow { animation:crownGlow 1.8s ease-in-out infinite; display:inline-block; }

/* === Arah strategis / semangat banner === */
@keyframes semangatShine {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
.semangat-shine {
  background:linear-gradient(110deg, #FDCE0A 40%, #fff 50%, #FDCE0A 60%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:semangatShine 4s linear infinite;
}

@media (max-width:640px){
  .data-table { font-size:11px; }
  .data-table th, .data-table td { padding:6px 8px; }
  .fkpi-num { font-size:18px; }
}