/* Hafalan Deka — token & dasar. Material 3 terang, referensi Google Fit. */
:root {
  --bg: #F7FAE7; --surface: #FFFEFA; --surface-2: #EDF1DF; --surface-3: #E5EBDF;
  --outline: #CCD7D8; --outline-soft: #DCE3D9; --outline-strong: #657A7B;
  --ink: #1D3033; --ink-2: #3C575C; --ink-3: #4E666A;
  --primary: #224E59; --primary-hover: #1B414B; --primary-press: #15353E; --on-primary: #FFFFFF;
  --primary-container: #E5EDAC; --on-primary-container: #224E59;
  --accent-container: #D2E16C; --on-accent-container: #224E59; --accent: #224E59;
  --avatar-container: #CDAED4; --on-avatar-container: #224E59;
  --green: #1E8E3E; --green-tint: #E6F4EA; --green-ink: #137333;
  --amber: #F9AB00; --amber-tint: #FEF7E0; --amber-ink: #A35200;
  --track: #CCD7D8; --danger: #B3261E; --danger-tint: #FCE8E6;
  --snackbar: #313033; --on-snackbar: #F4EFF4;
  --radius-m: 16px; --radius-l: 24px;
  --shadow-1: 0 1px 2px rgb(31 31 31 / .08), 0 1px 3px 1px rgb(31 31 31 / .05);
  --shadow-3: 0 4px 8px 3px rgb(31 31 31 / .10), 0 1px 3px rgb(31 31 31 / .14);
  --font: Roboto, "Roboto Flex", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --arab: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.05, .7, .1, 1);
  --appbar-h: 64px; --navbar-h: calc(56px + 1rem); --maxw: 480px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface-3); }
body {
  margin: 0; min-height: 100dvh; background: var(--surface-3); color: var(--ink);
  font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
#app { position: relative; max-width: var(--maxw); min-height: 100dvh; margin: 0 auto; background: var(--bg); }
@media (min-width: 481px) { #app { box-shadow: 0 0 0 1px var(--outline-soft); } }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; }
input { caret-color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 12px; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 99px; }
.num { font-variant-numeric: tabular-nums; }
.arab { font-family: var(--arab); direction: rtl; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { display: grid; place-items: center; min-height: 60dvh; margin: 0; padding: 24px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}