:root {
  --night: #04170F;
  --field: #0B2E29;
  --text: #F2EEE3;
  --soft: #C7D3CC;
  --muted: #7F978E;
  --gold: #E3C58A;
  --line: rgba(227, 197, 138, .14);
  --arabic: 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--night); }
body::before { content: ''; position: fixed; top: 0; left: 50%; translate: -50% 0; width: min(100%, 520px); height: 100lvh; z-index: -2; background: radial-gradient(120% 70% at 50% 0%, #0F3B35 0%, #072420 60%, var(--night) 100%); }

body {
  margin: 0 auto;
  max-width: 520px;
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
h1, p { margin: 0; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); font-size: 14px; }

.sky { position: fixed; top: 0; left: 50%; translate: -50% 0; width: min(100%, 520px); height: 100lvh; z-index: -1; pointer-events: none; stroke: none; }
.sky path { stroke: var(--gold); stroke-width: 1; }

.view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 20px) 24px 0;
}
.view > .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }
#sholat { overflow-y: auto; padding-bottom: calc(env(safe-area-inset-bottom) + 88px); }

.head { display: flex; flex-direction: column; gap: 2px; }
.head .muted { color: var(--soft); }
.city { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.city > svg { width: 24px; height: 24px; flex: none; color: var(--gold); }
.city small { margin-left: auto; display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(227, 197, 138, .14); box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .45); color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 0; }

.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

.times { list-style: none; margin: auto 0; padding: 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.times li { display: flex; justify-content: space-between; align-items: center; min-height: 68px; padding: 10px 18px; border-radius: 16px; font-size: 20px; font-weight: 600; background: rgba(4, 23, 15, .45); }
.times time { font-size: 26px; font-variant-numeric: tabular-nums; }
.times small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--soft); }
.times .past { color: var(--muted); }
.times .past small { color: var(--muted); }
.times .current { background: linear-gradient(to left, rgba(227, 197, 138, .55) 0%, rgba(31, 107, 92, .75) 45%, rgba(11, 46, 41, .9) 100%); box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .5); }
.times .current small { color: #FFF3D6; }
.times .next { background: linear-gradient(to left, rgba(227, 197, 138, .22) 0%, rgba(31, 107, 92, .35) 45%, rgba(11, 46, 41, .7) 100%); }
.times .next small { color: var(--gold); }

.tabs {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  translate: -50% 0;
  width: min(472px, calc(100% - 48px));
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(4, 23, 15, .92);
  box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .25);
  backdrop-filter: blur(8px);
}
.tabs a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--soft); }
.tabs a[aria-current] { background: var(--gold); color: var(--night); }
.tabs svg { width: 18px; height: 18px; }

.bar { flex: none; display: flex; align-items: center; gap: 4px; margin: 0 -12px 12px; }
.bar h1 { flex: 1; font-size: 22px; }
.bar .big { font-size: 34px; letter-spacing: -.02em; padding-left: 12px; }
.back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; }
.back svg { width: 22px; height: 22px; }

.search { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 48px; border-radius: 14px; background: var(--field); margin-bottom: 8px; }
.search:focus-within { box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .6); }
.search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.search input { all: unset; flex: 1; font-size: 16px; }
.search input::placeholder { color: var(--muted); }

.list { list-style: none; margin: 0 -12px; padding: 0; }
.list a { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 6px 12px; border-radius: 12px; }
.list a:active, .list a:hover { background: var(--field); }
.list span { display: flex; flex-direction: column; flex: 1; }
.list small { font-size: 12px; color: var(--muted); }
.list .num { flex: none; width: 28px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.list .ar { flex: none; font: 20px var(--arabic); color: var(--gold); }
.list [aria-current] { color: var(--gold); }

.resume { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; background: var(--field); box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .4); font-size: 18px; font-weight: 600; }
.resume svg { width: 22px; height: 22px; color: var(--gold); }

#baca { padding-left: 0; padding-right: 0; }
#baca .scroll { padding-bottom: env(safe-area-inset-bottom); }
#baca .bar { margin: 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#baca .bar span { display: flex; flex-direction: column; flex: 1; font-size: 18px; font-weight: 700; }
#baca .bar small { font-size: 12px; font-weight: 400; color: var(--muted); }
#baca .bar .ar { font: 26px var(--arabic); color: var(--gold); padding-right: 12px; }
.bismillah { padding: 24px; text-align: center; font: 26px/2 var(--arabic); border-bottom: 1px solid var(--line); }
.ayah { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); }
.ayah.last { background: rgba(227, 197, 138, .08); }
.ayah header { display: flex; justify-content: space-between; align-items: center; }
.ayah .n { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(227, 197, 138, .6); }
.ayah.last .n { background: var(--gold); color: var(--night); font-weight: 700; }
.ayah button { all: unset; cursor: pointer; width: 44px; height: 44px; margin-right: -12px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ayah button svg { width: 20px; height: 20px; }
.ayah.last button { color: var(--gold); }
.ayah.last button svg { fill: currentColor; }
.ayah [lang=ar] { font: 28px/2.1 var(--arabic); text-align: right; }
.ayah .tr { font-size: 15px; line-height: 1.6; color: var(--soft); }
.pager { display: flex; gap: 12px; padding: 24px; }
.pager a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--field); font-weight: 600; }
.status { padding: 48px 24px; text-align: center; color: var(--muted); }
.status button { margin-top: 16px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--gold); color: var(--night); font: inherit; font-weight: 600; }