/* ============================================================
   TIPING BDV — gaya aplikasi
   Palet: tinta laut dalam + kuningan; netral condong biru-hijau.
   Terang & gelap dua-duanya dirancang, mengikuti tema HP.
   ============================================================ */

:root {
  --ink:#08262B; --ink-soft:#10393F;
  --paper:#EDF1F0; --card:#FFFFFF; --card-sunk:#F4F7F6;
  --line:rgba(8,38,43,.13); --line-soft:rgba(8,38,43,.07);
  --text:#0B2126; --text-2:#4E666D; --text-3:#7C9199;
  --brass:#B8842A; --brass-lift:#D9A63F; --brass-wash:rgba(184,132,42,.10);
  --good:#10704D; --good-wash:rgba(16,112,77,.11);
  --bad:#A8322F;  --bad-wash:rgba(168,50,47,.10);
  --warn:#8A5300; --warn-wash:rgba(197,124,12,.14);
  --shadow:0 1px 2px rgba(8,38,43,.06), 0 8px 24px rgba(8,38,43,.07);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#061A1E; --card:#0F2E34; --card-sunk:#0A242A;
    --line:rgba(196,226,224,.16); --line-soft:rgba(196,226,224,.08);
    --text:#E4EEEC; --text-2:#9DB6BB; --text-3:#6E8B92;
    --brass:#E0AC4B; --brass-lift:#F0C368; --brass-wash:rgba(224,172,75,.14);
    --good:#46B98A; --good-wash:rgba(70,185,138,.15);
    --bad:#EE7B72;  --bad-wash:rgba(238,123,114,.15);
    --warn:#E4A94C; --warn-wash:rgba(228,169,76,.16);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --paper:#061A1E; --card:#0F2E34; --card-sunk:#0A242A;
  --line:rgba(196,226,224,.16); --line-soft:rgba(196,226,224,.08);
  --text:#E4EEEC; --text-2:#9DB6BB; --text-3:#6E8B92;
  --brass:#E0AC4B; --brass-lift:#F0C368; --brass-wash:rgba(224,172,75,.14);
  --good:#46B98A; --good-wash:rgba(70,185,138,.15);
  --bad:#EE7B72;  --bad-wash:rgba(238,123,114,.15);
  --warn:#E4A94C; --warn-wash:rgba(228,169,76,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --paper:#EDF1F0; --card:#FFFFFF; --card-sunk:#F4F7F6;
  --line:rgba(8,38,43,.13); --line-soft:rgba(8,38,43,.07);
  --text:#0B2126; --text-2:#4E666D; --text-3:#7C9199;
  --brass:#B8842A; --brass-lift:#D9A63F; --brass-wash:rgba(184,132,42,.10);
  --good:#10704D; --good-wash:rgba(16,112,77,.11);
  --bad:#A8322F;  --bad-wash:rgba(168,50,47,.10);
  --warn:#8A5300; --warn-wash:rgba(197,124,12,.14);
  --shadow:0 1px 2px rgba(8,38,43,.06), 0 8px 24px rgba(8,38,43,.07);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { height:100%; }

body {
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.app { min-height:100%; display:flex; flex-direction:column; }

.view { display:none; flex:1 1 auto; }
.view.on { display:block; animation:fade .2s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

.pad {
  padding:calc(env(safe-area-inset-top, 0px) + 22px) 18px calc(var(--safe-b) + 96px);
  max-width:560px;
  margin:0 auto;
}

/* ---------------- masuk ---------------- */

.login {
  min-height:100vh;
  min-height:100dvh;
  background:linear-gradient(168deg, var(--ink) 0%, var(--ink-soft) 62%, #1A4C50 100%);
  color:#EAF2F1;
  padding:calc(env(safe-area-inset-top, 0px) + 52px) 26px calc(var(--safe-b) + 26px);
  display:flex;
  flex-direction:column;
  max-width:480px;
  margin:0 auto;
}
.brandmark {
  width:56px; height:56px; border-radius:16px;
  background:var(--brass-lift); color:var(--ink);
  display:grid; place-items:center; margin-bottom:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.login h1 { font-family:var(--serif); font-size:31px; line-height:1.15; margin:0 0 4px; letter-spacing:-.015em; }
.login .sub { color:rgba(234,242,241,.6); font-size:14.5px; margin:0 0 30px; }
.login label {
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(234,242,241,.55); margin-bottom:7px; font-weight:600;
}
.login input {
  width:100%; background:rgba(255,255,255,.07);
  border:1.5px solid rgba(234,242,241,.2); border-radius:var(--r-md);
  padding:14px; color:#FFF; font:inherit; font-size:16px; margin-bottom:18px;
}
.login input::placeholder { color:rgba(234,242,241,.35); }
.login input:focus { border-color:var(--brass-lift); outline:none; }
.login .hint {
  margin-top:auto; padding-top:28px;
  font-size:12.5px; color:rgba(234,242,241,.45);
  text-align:center; line-height:1.6;
}

/* ---------------- tombol ---------------- */

.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:var(--brass); color:#14262A;
  border:none; border-radius:var(--r-md); padding:15px 16px;
  font:inherit; font-weight:700; font-size:16px; cursor:pointer;
  transition:filter .15s, transform .1s;
}
.btn:hover { filter:brightness(1.07); }
.btn:active { transform:scale(.988); }
.btn[disabled] { opacity:.55; cursor:progress; }
.btn.ghost { background:transparent; color:var(--text-2); border:1.5px solid var(--line); font-weight:600; }
.btn.ghost:hover { border-color:var(--brass); color:var(--text); }
.btn.danger { background:var(--bad-wash); color:var(--bad); font-weight:600; }
.btn.mt, .mt { margin-top:16px; }

.linkbtn {
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--brass);
}

/* ---------------- kepala halaman ---------------- */

.topline { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.hello { font-family:var(--serif); font-size:26px; margin:0; letter-spacing:-.01em; font-weight:600; }
.today { color:var(--text-3); font-size:13px; margin:2px 0 0; }
.avatar {
  width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:var(--brass-lift);
  display:grid; place-items:center; font-weight:700; font-size:16px;
  flex:0 0 auto; border:none; cursor:pointer; font-family:inherit;
}
.avatar.ghost { background:var(--card-sunk); color:var(--text-2); font-size:19px; }
.rolechip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px;
  background:var(--brass-wash); color:var(--brass); margin-top:7px;
}

/* ---------------- spanduk ---------------- */

.banner {
  display:flex; gap:11px; align-items:flex-start;
  border-radius:var(--r-md); padding:12px 14px;
  font-size:13.5px; margin-bottom:16px; line-height:1.45;
}
.banner.ok  { background:var(--good-wash); color:var(--good); }
.banner.due { background:var(--bad-wash);  color:var(--bad); }
.banner.off { background:var(--warn-wash); color:var(--warn); }
.banner[hidden] { display:none; }

.alert { background:var(--bad-wash); color:var(--bad); border-radius:var(--r-sm); padding:11px 13px; font-size:13.5px; margin-bottom:14px; line-height:1.45; }
.alert.ok { background:var(--good-wash); color:var(--good); }
.login .alert { background:rgba(238,123,114,.18); color:#FFD9D5; }

/* ---------------- angka ---------------- */

.figures { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fig {
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:13px 14px 14px; box-shadow:var(--shadow);
}
.fig.wide { grid-column:1 / -1; }
.fig .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:5px; }
.fig .v { font-family:var(--serif); font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.fig .v.money { color:var(--brass); }
.fig .sub { font-size:12px; color:var(--text-3); margin-top:4px; }

.section-h { display:flex; justify-content:space-between; align-items:baseline; margin:24px 0 10px; }
.section-h h2 { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin:0; font-weight:700; }
.section-h[hidden] { display:none; }

/* ---------------- daftar ---------------- */

.list { display:grid; gap:8px; }

.row {
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:11px; align-items:center;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:11px 13px; box-shadow:var(--shadow); text-align:left; width:100%;
  font:inherit; color:var(--text);
}
.row .ico { font-size:20px; text-align:center; }
.row .t { font-size:14.5px; font-weight:600; }
.row .m { font-size:12.5px; color:var(--text-3); margin-top:1px; }
.row .amt { text-align:right; font-variant-numeric:tabular-nums; font-size:14.5px; font-weight:600; }
.row .amt small { display:block; font-weight:500; font-size:11px; margin-top:2px; }

.pill { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:2px 7px; border-radius:99px; }
.pill.lunas { background:var(--good-wash); color:var(--good); }
.pill.belum { background:var(--bad-wash);  color:var(--bad); }
.pill.antre { background:var(--warn-wash); color:var(--warn); }

.empty, .foot-note { font-size:12.5px; color:var(--text-3); text-align:center; margin-top:14px; line-height:1.55; }

/* ---------------- pilih layanan ---------------- */

.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.svc {
  background:var(--card); border:1.5px solid var(--line-soft); border-radius:var(--r-md);
  padding:16px 6px 12px; text-align:center; cursor:pointer;
  font:inherit; color:var(--text); box-shadow:var(--shadow);
  transition:border-color .15s, transform .1s;
}
.svc:hover { border-color:var(--brass); }
.svc:active { transform:scale(.97); }
.svc .e { font-size:24px; display:block; margin-bottom:5px; }
.svc .n { font-size:11.5px; font-weight:600; line-height:1.25; display:block; }

/* ---------------- formulir ---------------- */

.field { margin-bottom:14px; }
.field > label {
  display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); font-weight:700; margin-bottom:6px;
}
.field .req { color:var(--bad); }
.field .req[hidden] { display:none; }
.field input, .field select, .field textarea {
  width:100%; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:12px; font:inherit; font-size:16px;
  color:var(--text); font-family:inherit;
}
.field select { appearance:none; }
.field input:focus, .field select:focus { border-color:var(--brass); outline:none; }
.field .tip { font-size:12px; color:var(--text-3); margin:5px 0 0; line-height:1.4; }
.field .tip.auto { color:var(--good); }
.field.locked input { background:var(--card-sunk); color:var(--text-2); }
.field[hidden] { display:none; }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.harga-tip { font-size:12px; color:var(--text-3); margin:-6px 0 14px; line-height:1.4; }
.harga-tip.auto { color:var(--good); }
.harga-tip.manual { color:var(--warn); }

.seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg button {
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 8px; font:inherit; font-size:14px; font-weight:600;
  color:var(--text-2); cursor:pointer;
}
.seg button[aria-pressed="true"] { border-color:currentColor; }
.seg button.y[aria-pressed="true"] { background:var(--good-wash); color:var(--good); }
.seg button.n[aria-pressed="true"] { background:var(--bad-wash);  color:var(--bad); }

.total-card {
  background:var(--ink); border-radius:var(--r-md); padding:15px 16px;
  color:#E8F1EF; margin:18px 0 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.total-card .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(232,241,239,.55); font-weight:600; }
.total-card .v { font-family:var(--serif); font-size:27px; line-height:1.1; color:var(--brass-lift); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.total-card .side { text-align:right; font-size:12px; color:rgba(232,241,239,.6); }
.total-card .side b { display:block; color:#E8F1EF; font-size:15px; font-weight:600; }

/* ---------------- berhasil ---------------- */

.done { padding:14vh 26px 40px; text-align:center; max-width:480px; margin:0 auto; }
.done .mark {
  width:78px; height:78px; border-radius:50%;
  background:var(--good-wash); color:var(--good);
  display:grid; place-items:center; font-size:38px; margin:0 auto 22px;
  animation:pop .3s cubic-bezier(.2,1.5,.5,1) both;
}
@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.done h1 { font-family:var(--serif); font-size:27px; margin:0 0 8px; font-weight:600; }
.done p { color:var(--text-2); font-size:14.5px; margin:0; }
.done .where {
  font-family:var(--mono); font-size:12.5px; background:var(--card-sunk);
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:9px 12px; display:inline-block; margin:16px 0 28px; color:var(--text-2);
}
.done .btns { display:grid; gap:9px; }

/* ---------------- akun ---------------- */

.card {
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:15px; box-shadow:var(--shadow);
}
.perm { display:grid; gap:8px; }
.perm div { display:grid; grid-template-columns:18px 1fr; gap:9px; font-size:13.5px; color:var(--text-2); align-items:start; }
.perm .y { color:var(--good); font-weight:700; }
.perm .n { color:var(--bad); font-weight:700; }

/* ---------------- navigasi bawah ---------------- */

.tabbar {
  position:sticky; bottom:0; z-index:5;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--card); border-top:1px solid var(--line);
  padding:7px 4px calc(var(--safe-b) + 10px);
  max-width:560px; margin:0 auto; width:100%;
}
.tabbar[hidden] { display:none; }
.tabbar button {
  background:none; border:none; cursor:pointer;
  display:grid; gap:3px; justify-items:center; padding:5px 2px;
  font:inherit; color:var(--text-3);
}
.tabbar button .ti { font-size:19px; line-height:1; }
.tabbar button .tl { font-size:10.5px; font-weight:600; }
.tabbar button[aria-current="true"] { color:var(--brass); }