:root {
  --bg: #e8efe6;
  --fg: #1a2e24;
  --surface: #f7faf5;
  --surface-2: #eef4eb;
  --border: #c5d4c4;
  --muted: #5d7264;
  --accent: #1f5c45;
  --accent-fg: #f4faf6;
  --gold: #9a742e;
  --danger: #9b2c2c;
  --success: #1b6b45;
  --warn: #8a5a12;
  --font-display: "Georgia", "Times New Roman", serif;
  --font-body: "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(196,154,74,.18), transparent 50%),
    linear-gradient(180deg, #eef4eb 0%, var(--bg) 45%, #dfe9dc 100%);
  min-height: 100vh;
}
.page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.topbar { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.5rem; }
.eyebrow { margin:0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.brand { font-family:var(--font-display); font-size:1.6rem; color:var(--fg); text-decoration:none; }
.nav { display:flex; gap:1rem; }
.nav a { color:var(--accent); text-decoration:none; font-weight:600; }
.hero h1, h1, h2 { font-family:var(--font-display); }
.lead, .muted { color:var(--muted); }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:1.25rem 0 1.5rem; }
.cards article, .panel, .record { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem 1.1rem; }
.panel h2 { margin-top:1.4rem; }
label { display:block; margin:.75rem 0; font-size:.85rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
input, textarea, select {
  display:block; width:100%; margin-top:.35rem; border:1px solid var(--border); border-radius:8px;
  padding:.7rem .8rem; font:inherit; color:var(--fg); background:#fff; text-transform:none; letter-spacing:normal; font-weight:400;
}
.grid-2, .grid-3, .grid-4 { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.row, .actions, .record-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.btn, button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:0; border-radius:8px; padding:.7rem 1rem; background:var(--accent); color:var(--accent-fg);
  font-weight:700; text-decoration:none; cursor:pointer;
}
.btn-secondary { background:var(--surface-2); color:var(--fg); border:1px solid var(--border); }
.btn-ghost { background:transparent; color:var(--fg); border:1px solid transparent; }
.btn-lg { padding:.9rem 1.2rem; font-size:1rem; }
.device-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.device-card { border:1px solid var(--border); border-radius:10px; padding:.8rem; background:var(--surface-2); }
.azimut-box { margin-top:1rem; padding:1rem; border-radius:10px; background:var(--surface-2); text-align:center; }
.azimut-value { font-family:var(--font-display); font-size:1.15rem; line-height:1.35; margin:.35rem 0; word-break:break-word; }
.prayer-box { margin-top:1.25rem; padding:1rem; border-radius:12px; border:1px solid var(--border); background:var(--surface); }
.prayer-box h2 { margin-top:0; }
.prayer-grid { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); margin-top:.75rem; }
.prayer-grid .block strong, .mini-prayer strong { font-family:var(--font-display); font-size:1.15rem; }
.mini-prayer { margin:.85rem 0; display:grid; gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }
.mini-prayer > div { background:var(--surface-2); border-radius:8px; padding:.55rem .65rem; }
.mini-prayer span { display:block; font-size:.68rem; text-transform:uppercase; color:var(--muted); }
.imsakiyah-details { margin-top:1rem; }
.imsakiyah-details summary { cursor:pointer; font-weight:700; color:var(--accent); }
.imsakiyah-controls { margin:.75rem 0; }
.imsakiyah-controls label { margin:0; }
.table-scroll { overflow-x:auto; }
.today-row { background:rgba(154,116,46,.12); font-weight:700; }
.cert-prayer { margin-bottom:1rem; }
.alert { padding:.75rem 1rem; border-radius:8px; }
.alert-success { background:#d7efe3; color:var(--success); }
.alert-error, .alert-error { background:#f8dede; color:var(--danger); }
.badge { display:inline-block; padding:.25rem .55rem; border-radius:6px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.badge-sepakat { background:#d7efe3; color:var(--success); }
.badge-perlu-cek { background:#f7e7c8; color:var(--warn); }
.badge-tidak-lengkap { background:var(--surface-2); color:var(--muted); }
table { width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.92rem; }
th, td { text-align:left; padding:.45rem .3rem; border-bottom:1px solid var(--border); }
.meta span { display:block; font-size:.7rem; text-transform:uppercase; color:var(--muted); }
.thumb, .photo-grid img { max-width:100%; max-height:180px; border-radius:8px; object-fit:cover; border:1px solid var(--border); }
.photo-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.certificate-wrap { max-width:820px; margin:0 auto; padding:1rem; }
.certificate { background:#fff; border:2px solid var(--accent); border-radius:12px; padding:1.5rem; }
.certificate h1 { margin:.3rem 0; text-align:center; }
.certificate header { text-align:center; border-bottom:1px solid var(--border); padding-bottom:1rem; margin-bottom:1rem; }
.cert-no { font-family:monospace; font-weight:700; color:var(--accent); }
.block { background:var(--surface-2); border-radius:8px; padding:.7rem .8rem; }
.block span { display:block; font-size:.7rem; text-transform:uppercase; color:var(--muted); }
.sign { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.5rem; text-align:center; }
.sign .line { border-bottom:1px solid #333; height:60px; margin-bottom:.6rem; }
.disclaimer { font-size:.7rem; color:var(--muted); text-align:center; margin-top:1.5rem; }
.empty { text-align:center; padding:2rem; background:var(--surface); border:1px dashed var(--border); border-radius:12px; }
@media (max-width:720px) {
  .grid-2, .grid-3, .grid-4, .sign { grid-template-columns:1fr; }
  .topbar { flex-direction:column; align-items:flex-start; }
}
@media print {
  body { background:#fff; }
  .no-print, .topbar, .nav { display:none !important; }
  .certificate { border-width:1.5pt; box-shadow:none; }
}