[x-cloak] { display: none !important; }

:root {
  --leaf-950: #022c22;
  --leaf-900: #064e3b;
  --leaf-700: #047857;
  --leaf-500: #10b981;
  --lime-400: #a3e635;
}

html { scrollbar-gutter: stable; }
body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(253, 249, 196, 0.85), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(187, 247, 208, 0.9), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(236, 252, 203, 0.7), transparent 70%),
    linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 45%, #f7fee7 100%);
  background-attachment: fixed;
}

/* ---------- dekorasi daun ---------- */
.decor-corner { position: fixed; width: min(42vw, 520px); height: min(42vw, 520px); opacity: 0.92; }
.decor-corner.right-0 { right: 0; }
.decor-corner.left-0 { left: 0; }
.decor-corner.top-0 { top: 0; }
.decor-corner.bottom-0 { bottom: 0; }
@media (max-width: 768px) { .decor-corner { width: 60vw; height: 60vw; opacity: 0.55; } }

.sway { transform-box: view-box; animation: sway 8s ease-in-out infinite alternate; }
.sway-slow { animation-duration: 11s; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

.falling-leaves { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.falling-leaf { position: absolute; top: -12vh; animation: leafFall linear infinite; opacity: 0.75; }
.falling-leaf-inner { animation: leafDrift ease-in-out infinite alternate; }
@keyframes leafFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(8vw, 120vh, 0) rotate(560deg); }
}
@keyframes leafDrift { from { transform: translateX(-36px) rotate(-25deg); } to { transform: translateX(36px) rotate(25deg); } }

/* ---------- kartu kaca ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 50px -20px rgba(6, 78, 59, 0.28), 0 4px 14px -6px rgba(6, 78, 59, 0.12);
}

.live-dot { position: relative; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 9999px; background: currentColor;
  color: #10b981; opacity: 0.35; animation: livePing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes livePing { 75%, 100% { transform: scale(2.2); opacity: 0; } }

.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.row-enter { animation: rowIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }

.bar-fill { transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
.bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%); animation: barShine 3.2s ease-in-out infinite;
}
@keyframes barShine { 60%, 100% { transform: translateX(100%); } }

.totp-ring circle.track { stroke: #d1fae5; }
.totp-ring circle.prog { transition: stroke-dashoffset 1s linear, stroke 0.3s; }

/* ---------- popup login baru ---------- */
.popup-backdrop {
  background: radial-gradient(circle at 50% 38%, rgba(6, 95, 70, 0.35), rgba(2, 44, 34, 0.7));
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  animation: fadeIn 0.45s ease both;
}
.popup-backdrop.is-leaving { animation: fadeOut 0.38s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

.popup-card { animation: popIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 50% 60%; perspective: 1000px; }
.popup-card.is-leaving { animation: popOut 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes popIn {
  0% { opacity: 0; transform: translateY(36px) scale(0.88) rotateX(10deg); filter: blur(12px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes popOut { to { opacity: 0; transform: translateY(-18px) scale(0.94); filter: blur(6px); } }

.popup-row { animation: rowUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rowUp { from { opacity: 0; transform: translateY(10px); } }

.popup-header { position: relative; overflow: hidden; }
.popup-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%); animation: sweep 1.6s 0.35s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
@keyframes sweep { to { transform: translateX(120%); } }

.radar { position: relative; }
.radar::before, .radar::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, 0.8);
  animation: radar 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.radar::after { animation-delay: 1.1s; }
@keyframes radar { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } }

.icon-pop { animation: iconPop 0.9s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes iconPop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }

.burst-leaf {
  position: absolute; left: 0; top: 0; width: 22px; height: 34px; margin: -17px 0 0 -11px;
  animation: burst 1.5s cubic-bezier(0.12, 0.8, 0.25, 1) both;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r)); opacity: 0; }
}

.queue-pill { animation: queueBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes queueBounce { from { transform: scale(0.4); opacity: 0; } }

.toast-in { animation: toastIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

.modal-panel { animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #a7f3d0; border-radius: 99px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .sway, .falling-leaf, .falling-leaf-inner, .bar-fill::after, .live-dot::after { animation: none !important; }
  .falling-leaves { display: none; }
}