/* Cangkang PWA Finansial Sehat -- tanpa gaya inline (selaras dengan CSP ketat di _headers) */
:root{
  --bg:#f8fafc; --text:#0f172a; --dim:#64748b; --card:#ffffff; --border:#e2e8f0;
  --primary:#15803d; --primary-soft:#dcfce7; --red:#ef4444;
}
:root[data-theme="dark"]{
  --bg:#000000; --text:#f1f5f9; --dim:#94a3b8; --card:#0d0d0d; --border:#262626; --primary-soft:#0f331d;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --text:#f1f5f9; --dim:#94a3b8; --card:#0d0d0d; --border:#262626; --primary-soft:#0f331d;
  }
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{
  margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior:none; -webkit-text-size-adjust:100%;
}

/* Aplikasi memenuhi layar; area aman (poni/indikator rumah) ditangani di sini,
   warnanya mengikuti tema aplikasi (terang/gelap). */
#shell{
  position:fixed; inset:0; background:var(--bg);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app{ display:block; width:100%; height:100%; border:0; background:var(--bg); }

.overlay{
  position:fixed; inset:0; z-index:20; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px;
  padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom));
}
#splash .logo{ border-radius:22px; box-shadow:0 12px 30px -10px rgba(21,128,61,.45); }
#splash .brand{ font-size:17px; font-weight:800; letter-spacing:-.2px; }
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--primary);
  animation:fsspin .8s linear infinite;
}
@keyframes fsspin{ to{ transform:rotate(360deg); } }

.card{
  width:100%; max-width:380px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:24px; padding:26px 22px 20px;
  box-shadow:0 24px 60px -24px rgba(15,23,42,.35);
}
.card .icon{ font-size:34px; line-height:1; margin-bottom:10px; }
.card h1{ font-size:17px; margin:0 0 8px; }
.card p{ font-size:13px; line-height:1.6; color:var(--dim); margin:0 0 18px; }
.actions{ display:flex; flex-direction:column; gap:8px; }

.btn{
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  padding:12px 16px; border-radius:100px; border:1.5px solid var(--border);
  background:transparent; color:var(--text);
}
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(21,128,61,.3); }
.btn.ghost{ border-color:transparent; color:var(--dim); }
.btn.small{ padding:8px 14px; font-size:12.5px; }
.btn:active{ transform:scale(.98); }

#installBar{
  position:fixed; left:12px; right:12px; z-index:30;
  top:calc(env(safe-area-inset-top) + 10px);
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--primary); border-radius:18px; padding:10px 10px 10px 14px;
  box-shadow:0 12px 30px -12px rgba(15,23,42,.4);
}
#installBar .txt{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:12px; color:var(--dim); line-height:1.4; }
#installBar .txt b{ font-size:13px; color:var(--text); }

.noscript{ padding:24px; text-align:center; }