:root{
  --bg:#0b1417;
  --card:#111b21;
  --ink:#e2e8f0;
  --primary:#22d3ee;
  --ok:#10b981;
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.card{background:var(--card)}
.ring-focus:focus{outline:2px solid var(--primary); outline-offset: 2px}
.money{font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* Animasi masuk halus */
.fade-in{animation:fade .28s ease-out}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Collapse anim panel rincian history */
.collapse {
  overflow: hidden;
  transition: grid-template-rows .25s ease, opacity .25s ease;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}
.collapse.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.collapse > div { min-height: 0; }

/* Progress bar di bawah tombol */
#calcBarWrap{display:none}
#calcBar{
  width:0%; height:8px; border-radius:9999px;
  background: linear-gradient(90deg, var(--primary), #7dd3fc);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: width 5s linear;
}

/* Toast notif autosave */
#toast{
  position: fixed; bottom: 20px; right: 20px; z-index:60;
  display:none; min-width: 220px;
}