:root{
  /* Palet mirip PNG */
  --bg:#ffffff; --fg:#101828; --muted:#667085;
  --card:#ffffff; --line:#e5e7eb;
  --brand:#10b981;        /* BELI / aksen */
  --brand-600:#059669;
  --danger:#ef4444;       /* JUAL */
  --danger-600:#dc2626;
  --good:#16a34a; --warn:#f59e0b;

  --hero-from:#28d17c;    /* kartu hijau */
  --hero-to:#0fb06c;
  --chip:#f3f4f6;

  --radius:16px;
  --tabbar-h:64px;        /* tinggi bar bawah */
  --fab-size:62px;        /* ukuran tombol tengah menonjol */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
}
a{color:inherit;text-decoration:none}

/* ===== App layout ===== */
.app{min-height:100vh;display:flex;flex-direction:column}
@supports (height:100dvh){.app{min-height:100dvh}}
.view{position:relative;flex:1;display:flex;flex-direction:column}

/* ===== Header ===== */
.header{
  padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px
}
.header .title{font-weight:800;font-size:18px;letter-spacing:.2px;flex:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-size:16px;cursor:pointer
}

/* ===== Container & Cards ===== */
.container{
  padding:14px;display:flex;flex-direction:column;gap:12px;
  padding-bottom:16px; /* default tanpa tabbar */
}
.has-tabbar .container{
  /* tambah ruang supaya FAB tidak menutupi konten */
  padding-bottom:calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom));
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;font-size:12px;background:var(--chip)}
.small{font-size:11px;color:var(--muted)}
.muted{color:var(--muted)}
.h1{font-size:22px;font-weight:800}
.h2{font-size:18px;font-weight:700}
.center{text-align:center}

/* ===== Grid util ===== */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Grid fitur responsif & center */
.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));
  gap:12px; justify-items:center; align-items:start;
}

/* ===== Hero hijau ===== */
.hero{background:linear-gradient(135deg,var(--hero-from),var(--hero-to));color:#fff;border:0;position:relative}
.hero .pill{display:inline-block;background:#ffffff20;border:1px solid #ffffff40;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:#111;cursor:pointer;font-weight:600;text-align:center;user-select:none
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.brand{background:var(--brand);border-color:transparent;color:#fff}
.btn.brand:active{background:var(--brand-600)}
.btn.danger{background:var(--danger);border-color:transparent;color:#fff}
.btn.danger:active{background:var(--danger-600)}
.btn.ghost{background:#fff;color:#111}

/* ===== Feature grid (ikon) ===== */
.feature{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;text-align:center}
.feature .ico{
  width:46px;height:46px;border-radius:12px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;background:#fff;font-size:18px;cursor: pointer;
}

/* ===== Bottom Tabbar (hanya di Home) ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:var(--tabbar-h);
  background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr 80px 1fr 1fr; /* sisakan kolom tengah utk FAB */
  padding-bottom:max(0px, env(safe-area-inset-bottom));
  align-items:center;
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--muted);font-size:12px;height:100%;cursor: pointer;
}
.tabbar a.active{color:#111;font-weight:700}
.tabbar .ico{display:block;font-size:18px}
.tabbar .tab-spacer{pointer-events:none} /* kolom kosong untuk FAB */

/* Tombol tengah menonjol (FAB) */
.tab-fab{
  position:fixed; /* relatif ke viewport */
  left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) - (var(--fab-size)/2)); /* nongol di atas bar */
  width:var(--fab-size); height:var(--fab-size);
  border-radius:999px; background:var(--brand); color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:6px solid #fff;               /* ring putih seperti contoh */
  box-shadow:0 12px 28px rgba(16,185,129,.35), 0 0 0 10px rgba(16,185,129,.18);
  z-index:31; cursor:pointer;
}
.tab-fab .ico{font-size:22px;line-height:1}
.tab-fab .lbl{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-18px;font-size:12px;color:var(--muted);white-space:nowrap
}

/* ===== Transisi halaman ===== */
.page{animation:slideIn .18s ease}
@keyframes slideIn{from{transform:translateX(8px);opacity:0}to{transform:none;opacity:1}}
.page-leave{animation:slideOut .14s ease}
@keyframes slideOut{from{opacity:1}to{transform:translateX(-6px);opacity:0}}

/* ===== Toast ===== */
.toast-wrap{position:fixed;left:0;right:0;bottom:18px;display:flex;justify-content:center;z-index:1000;pointer-events:none}
.has-tabbar .toast-wrap{bottom:calc(var(--tabbar-h) + 8px)}
.toast{pointer-events:auto;max-width:92%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#111;box-shadow:0 10px 28px #0008}
.toast.ok{border-color:#16a34a}.toast.warn{border-color:#f59e0b}.toast.err{border-color:#ef4444}

/* ===== Inputs ===== */
.inp{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#111;appearance:none}
.inp:focus{outline:none;border-color:#059669}
.inp.err{border-color:#ef4444}
select.inp{background-image:none}

/* ===== Canvas helper ===== */
canvas{display:block;width:100%}
/* ===== Hadiah — App Look ===== */
.had-hero{
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
  color:#fff;
  border:none;
  box-shadow: 0 10px 26px rgba(34,197,94,.22);
}
.had-info{
  background:#f1fbf3;
  border:1px solid #d6f2dc;
}
.had-main{ overflow:hidden }

.had-progress{ margin:10px 0 4px }
.had-progress .bar{
  height:8px; background:#eef2f6; border-radius:999px; overflow:hidden;
}
.had-progress .bar span{
  display:block; height:8px; width:0%;
  background:linear-gradient(90deg, #0ea5e9, #22c55e);
  transition: width .35s ease;
}
.had-progress .cap{ margin-top:6px; font-size:12px; color:#64748b }

.had-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
@media (min-width:480px){ .had-grid{ grid-template-columns:repeat(4,1fr) } }

.had-day{
  border:1px solid var(--line);
  border-radius:16px; padding:12px;
  background:#fff;
  box-shadow: 0 8px 16px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.had-day .d-top{ display:flex; justify-content:space-between; align-items:center }
.had-day .d-badge{
  font-size:12px; font-weight:700; color:#0f172a;
  background:#eef2f6; border-radius:999px; padding:2px 8px;
}
.had-day .d-ico{ font-size:18px; line-height:1 }
.had-day .d-gram{ font-weight:700; margin-top:8px }
.had-day .d-name{ font-size:12px; color:#64748b }

.had-day.today{
  border-color:#93e7a2;
  box-shadow: 0 10px 20px rgba(34,197,94,.18);
  position: relative;
}
.had-day.today::after{
  content:'';
  position:absolute; inset:-1px;
  border-radius:16px; pointer-events:none;
  box-shadow: 0 0 0 2px rgba(34,197,94,.25) inset;
}
.had-day.done{
  background: linear-gradient(180deg, #ecfdf5, #ffffff 60%);
  border-color:#34d399;
}
.had-day.locked{ opacity:.75 }

.had-cta{
  width:100%; margin-top:12px; height:46px; border-radius:14px;
  font-weight:800; letter-spacing:.5px;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
}
.had-cta:disabled{
  opacity:.85; filter: grayscale(.25);
  background:#7de2b1 !important; color:#063;
  box-shadow:none;
}

.had-vlist .row{
  align-items:center;
}
.had-vlist .code{
  font-weight:800; letter-spacing:.5px;
}
.had-vlist .pill{
  background:#eef2f6; color:#0f172a; border-radius:999px; font-size:12px; padding:2px 8px; margin-left:6px;
}
.had-vlist .amt{ font-weight:800 }

#rv_info.ok{ color:#065f46 }
#rv_info.err{ color:#7f1d1d }
#rv_list .row{ align-items:center }
#rv_list .code{ font-weight:800; letter-spacing:.5px }
#rv_list .pill{ background:#eef2f6; border-radius:999px; padding:2px 8px; font-size:12px; margin-left:6px }
#rv_list .amt{ font-weight:800 }

/* === FIX HERO CARD LAYOUT (tetap 1 baris & angka rapi) === */
.card.hero .row-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.card.hero .row-top .big-gram{
  font-size:20px; font-weight:700; color:#fff; white-space:nowrap;
}
.card.hero .row-top .big-gram .unit{ font-weight:400; margin-left:4px; }
.card.hero .row-top .est{
  margin-left:auto; color:#ffffffb3; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:48vw; text-align:right; font-variant-numeric:tabular-nums;
}
.card.hero .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.15); border:1px solid #ffffff30; color:#fff;
}
.card.hero .pill b{ font-variant-numeric:tabular-nums; }

/* ===== HERO v2 ===== */
.card.hero.hero-v2{
  --g1:#12c27c; --g2:#0fb06c; --g3:#0fb8a4;
  background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));
  color:#fff; border:0; border-radius:16px;
  padding:14px 16px 16px; box-shadow:0 10px 26px rgba(18,194,124,.22);
  display:grid; gap:10px;
}

/* baris atas: judul kiri, estimasi kanan (tidak wrap) */
.hero-v2 .hero-head{ display:flex; align-items:baseline; gap:8px; }
.hero-v2 .hero-title{ font-weight:800; font-size:16px; }
.hero-v2 .hero-est{
  margin-left:auto; color:#eafcf6; opacity:.9;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:48%;
}

/* angka gram utama */
.hero-v2 .hero-main{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.hero-v2 .hero-gram{ font-size:clamp(22px,6.2vw,30px); font-weight:800; letter-spacing:.2px; }
.hero-v2 .unit{ opacity:.95; }

/* info grid 2×2; turun jadi 1 kolom di layar sangat kecil */
.hero-v2 .hero-grid{ display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:340px){ .hero-v2 .hero-grid{ grid-template-columns:1fr; } }

/* chip semi-glass */
.hero-v2 .hero-chip{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px; padding:8px 10px;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.hero-v2 .chip-label{ font-size:11px; opacity:.92; }
.hero-v2 .chip-value{ font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* catatan */
.hero-v2 .hero-note{ color:#eafcf6; opacity:.85; margin-top:2px; }
/* ===== Global Loader Overlay ===== */
.loader-overlay{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(1.2) blur(3px);
}
.loader{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 16px; border-radius:14px; background:#fff;
  border:1px solid var(--line); box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.loader-ring{
  width:34px; height:34px; border-radius:50%;
  border:3px solid #e5e7eb; border-top-color: var(--brand);
  animation:spin .75s linear infinite;
}
.loader-text{ font-size:12px; color:#111; font-weight:600; letter-spacing:.3px }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }

/* === Desktop: tampilkan aplikasi seperti layar HP di tengah === */
@media (min-width: 720px) {
  :root{
    /* Ganti sesuai selera: 390px (iPhone 12/13), 414px, 428px, 420px, dst */
    --phone-w: 720px;
  }

  /* Background halaman dibedakan agar “device card” terlihat */
  body{
    background: #f5f7fb;
  }

  /* Batasi lebar aplikasi & center */
  .app{
    width: var(--phone-w);
    margin: 12px auto;
    min-height: 100dvh; /* tetap setinggi viewport */
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(2,6,23,.12);
    overflow: hidden; /* rapikan sudut sticky/scroll */
    background: var(--bg);
  }

  /* Toast: ikuti lebar “device” (tidak full layar desktop) */
  .toast-wrap{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--phone-w);
  }
}
@media (min-width: 720px){
  .app{
    width: var(--phone-w, 420px);
    height: 100dvh;
    overflow: auto;         /* .app yang scroll */
    margin: 12px auto;
  }
  .header-brand{ position: sticky; top: 0; }
}
/* ===== App-like: non-zoom highlight & selection off ===== */
html, body {
  /* matikan seleksi teks & long-press callout */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* hilangkan tap highlight biru/abu di mobile */
* { -webkit-tap-highlight-color: transparent; }

/* tetap boleh seleksi/ketik di input/textarea/contenteditable */
input, textarea, [contenteditable="true"], .selectable {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* kurangi peluang double-tap zoom di Chrome/Android */
html, body, #app { touch-action: manipulation; }