@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --green:#0F7A55; --dark-green:#0A5C3E; --deep-teal:#083F30;
  --gold:#D4A820; --gold-bg:#FBF3DC;
  --bg:#F4F9F6; --card:#FFFFFF; --ink:#142019; --muted:#5C7568;
  --border:#DCEAE2; --danger:#D64545; --danger-bg:#FCEAEA;
  --blue:#3B6FD6; --blue-bg:#EAF0FC;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);
}
.mono{ font-family:'IBM Plex Mono',monospace; }

/* ── APP HEADER/BODY (shared between in-frame emulator & standalone pages) ── */
.app-header{
  padding-top:38px; padding-bottom:14px; padding-left:16px; padding-right:16px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  color:#fff;
}
.app-header .back-btn{
  width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
  flex-shrink:0; border:none; color:#fff; text-decoration:none;
}
.app-header .app-title{ font-size:16px; font-weight:800; }
.app-header .app-sub{ font-size:10.5px; opacity:0.8; font-weight:500; }
.app-body{ flex:1; overflow-y:auto; padding:14px 16px 18px; }
.app-body::-webkit-scrollbar{ width:0; }

.demo-banner{
  background:var(--gold-bg); color:#8A6A0E; font-size:11px; font-weight:600;
  text-align:center; padding:8px 14px; line-height:1.5; flex-shrink:0;
}

.hdr-kasir{ background:linear-gradient(135deg,#F5C842,#E0A82E); }
.hdr-keuangan{ background:linear-gradient(135deg,#3B6FD6,#2A4FA8); }
.hdr-surat{ background:linear-gradient(135deg,#E0559E,#B03C78); }
.hdr-warga{ background:linear-gradient(135deg,#1A9E72,#0F7A55); }
.hdr-wisata{ background:linear-gradient(135deg,#8B5CF6,#6D3FD1); }
.hdr-kabar{ background:linear-gradient(135deg,#E0553F,#B83E2C); }

/* ── shared UI bits ── */
.stat-row{ display:flex; gap:10px; margin-bottom:14px; }
.stat-card{
  flex:1; background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:12px 14px;
}
.stat-card .n{ font-size:19px; font-weight:800; }
.stat-card .l{ font-size:10.5px; color:var(--muted); margin-top:2px; font-weight:600; }

.section-title{ font-size:12.5px; font-weight:700; color:var(--ink); margin:16px 0 8px; text-transform:uppercase; letter-spacing:0.4px; }
.section-title:first-child{ margin-top:0; }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:13px 14px; margin-bottom:9px;
}
.card-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card-title{ font-size:13.5px; font-weight:700; }
.card-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.card-amt{ font-size:14px; font-weight:700; }
.amt-in{ color:var(--green); }
.amt-out{ color:var(--danger); }

.btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:12px; padding:12px; font-size:13.5px; font-weight:700;
  cursor:pointer; width:100%; font-family:inherit;
}
.btn-primary{ background:var(--green); color:#fff; }
.btn-gold{ background:var(--gold); color:#3A2E00; }
.btn-outline{ background:transparent; border:1.5px solid var(--border); color:var(--ink); }
.btn-sm{ padding:8px 12px; font-size:12px; width:auto; border-radius:9px; }

.field{ margin-bottom:10px; }
.field label{ font-size:11.5px; font-weight:700; color:var(--muted); display:block; margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--border); border-radius:10px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink);
}
.field textarea{ resize:none; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); }

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; }
.badge-green{ background:#E0F5EA; color:var(--green); }
.badge-gold{ background:var(--gold-bg); color:#9C7A0E; }
.badge-blue{ background:var(--blue-bg); color:var(--blue); }
.badge-red{ background:var(--danger-bg); color:var(--danger); }

.empty{ text-align:center; padding:30px 10px; color:var(--muted); font-size:12.5px; }
.empty .em{ font-size:30px; margin-bottom:8px; }

.qty-stepper{ display:flex; align-items:center; gap:10px; }
.qty-btn{ width:28px; height:28px; border-radius:8px; border:1.5px solid var(--border); background:#fff; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.qty-val{ font-size:14px; font-weight:700; min-width:20px; text-align:center; }

.letter-preview{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px;
  font-size:11px; line-height:1.7; color:var(--ink); font-family:'IBM Plex Mono',monospace;
}
.letter-preview .lh{ text-align:center; font-weight:700; margin-bottom:2px; }
.letter-preview .divider{ border-top:1px solid var(--ink); margin:8px 0; }

.toast{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:24px;
  font-size:12.5px; font-weight:600; opacity:0; transition:all .3s; z-index:50;
  white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.free-tag{ font-size:9.5px; color:var(--muted); }

/* ── STANDALONE APP PAGE (mobile/tablet: opened full-screen in its own tab) ── */
.standalone-app{ position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.standalone-app .app-header{ padding-top:max(20px, env(safe-area-inset-top)); }