/* Wird — deep night + gold/teal, calm & dignified. One stylesheet, no framework. */
:root {
  --bg: #0b1020;
  --bg2: #111733;
  --card: #151c33;
  --card2: #1b2342;
  --ink: #eef1f7;
  --muted: #8b97b5;
  --line: #25304f;
  --gold: #e7c47a;
  --gold2: #c9a14e;
  --teal: #5ec4a8;
  --danger: #ff6b6b;
  --safe: env(safe-area-inset-top);
  --safeb: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(130% 80% at 50% -10%, #16204a 0%, var(--bg) 55%);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
#app { min-height: 100%; }
.screen { padding: calc(18px + var(--safe)) 18px 96px; max-width: 560px; margin: 0 auto; }
h1 { font-size: 25px; margin: 0; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; }
.lead { color: #c7cee3; font-size: 17px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.link { color: var(--gold); text-decoration: underline; }

.hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hd .muted { margin: 2px 0 0; font-size: 13px; }
.back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink); margin-right: 4px; }
.pill { background: var(--card2); color: var(--ink); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.gold { background: linear-gradient(120deg, #3a2f14, #2a2310); color: var(--gold); border-color: #4a3c1c; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(120deg, var(--gold), var(--gold2)); color: #1a1405; font-weight: 700; padding: 14px 18px; border-radius: 14px; width: 100%; }
.btn:active { transform: scale(0.98); }
.btn.big { padding: 16px; font-size: 17px; margin-top: 8px; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; margin-top: 10px; }

/* onboarding */
.onboard { text-align: center; padding-top: calc(36px + var(--safe)); display: flex; flex-direction: column; min-height: 100vh; }
.ob-hero { color: var(--gold); display: grid; place-items: center; }
.onboard h1 { font-size: 34px; margin: 10px 0 2px; }
.bism { color: var(--gold); font-size: 20px; margin: 4px 0 14px; }
.ob-list { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.ob-list li { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; color: #c7cee3; }
.ob-list li svg { color: var(--gold); flex: 0 0 auto; }
.ob-list b { color: var(--ink); }
.onboard .btn.big { margin-top: auto; }

/* city picker */
.citylist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crow { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: left; color: var(--ink); font-weight: 600; }

/* prayers home */
.hijri { background: linear-gradient(120deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--gold); }
.next { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(120deg, #1a234a, #141a36); border: 1px solid #2b3a6b; border-radius: 16px; padding: 16px; margin: 12px 0; }
.next-l b { display: block; font-size: 18px; margin-top: 2px; }
.next-r { text-align: right; }
.next-r .nt { display: block; font-size: 22px; font-weight: 700; color: var(--gold); }
.next-r .cd { font-size: 12.5px; color: var(--muted); }
.prayers { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.prow { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow.sun { opacity: 0.7; }
.prow[data-log]:active { background: var(--card2); }
.pr-l b { font-size: 16px; }
.pr-l .ar { margin-left: 8px; color: var(--muted); font-size: 15px; }
.pr-r { display: flex; align-items: center; gap: 12px; }
.pt { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chk { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #1a1405; }
.chk.on { background: var(--teal); border-color: var(--teal); }
.suntag { font-size: 11px; color: var(--muted); }
.dayfoot { display: flex; gap: 10px; margin-top: 12px; }
.comp { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.comp b { color: var(--teal); }
.streak { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--gold); }
.prayers + p, .dayfoot + .fine { margin-top: 12px; }

/* qibla */
.compass-wrap { position: relative; width: 280px; height: 280px; margin: 24px auto 8px; display: grid; place-items: center; }
.compass { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); background: radial-gradient(circle, #141b36, #0d1430); transition: transform 0.1s linear; }
.ctick { position: absolute; color: var(--muted); font-size: 13px; font-weight: 700; left: 50%; transform: translateX(-50%); }
.ctick.n { top: 8px; color: var(--gold); } .ctick.s { bottom: 8px; }
.ctick.e { right: 10px; top: 50%; left: auto; transform: translateY(-50%); } .ctick.o { left: 10px; top: 50%; transform: translateY(-50%); }
.kaaba { position: absolute; top: 14px; left: 50%; margin-left: -17px; transform-origin: 17px 123px; }
.needle { position: relative; width: 40px; height: 80px; transition: transform 0.1s linear; transform-origin: 50% 50%; }
.needle.aligned path { fill: var(--gold) !important; }
.qdeg { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); font-size: 28px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.hint { text-align: center; color: #c7cee3; font-size: 15px; margin: 6px 0 16px; }
.compass-wrap + .hint { margin-top: 18px; }
.qibla .btn { max-width: 280px; margin: 0 auto; display: flex; }
.qibla .fine { text-align: center; max-width: 320px; margin: 14px auto 0; }

/* dhikr */
.tasbih { text-align: center; padding-top: 8px; }
.dh-ar { font-size: 40px; color: var(--gold); margin: 18px 0 6px; line-height: 1.4; }
.dh-tr { font-size: 18px; font-weight: 600; }
.dh-fr { font-size: 14px; margin-top: 2px; }
.counter { display: block; margin: 22px auto 8px; }
.cring { width: 230px; height: 230px; }
.cr-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.cr-fg { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.2s; }
.cnum { fill: var(--ink); text-anchor: middle; dominant-baseline: middle; font-size: 44px; font-weight: 700; }
.ctap { display: block; color: var(--muted); font-size: 13px; margin-top: -6px; }
.dh-meta { color: var(--muted); font-size: 13.5px; margin-top: 12px; }

/* more / settings */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 10px; width: 100%; text-align: left; }
.row b { display: block; } .row .muted { font-size: 12.5px; }
.row.link2 { color: var(--ink); }
.sel { background: var(--card2); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 9px 10px; font-size: 14px; max-width: 56%; }
.row input[type=checkbox] { width: 50px; height: 30px; appearance: none; -webkit-appearance: none; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; position: relative; transition: 0.2s; flex: 0 0 auto; }
.row input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #6b7488; transition: 0.2s; }
.row input[type=checkbox]:checked { background: linear-gradient(120deg, var(--gold), var(--gold2)); }
.row input[type=checkbox]:checked::after { left: 23px; background: #1a1405; }
.upsell { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(120deg, #1d2342, #181d34); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 4px; }
.upsell svg:first-child { color: var(--gold); flex: 0 0 auto; }
.upsell div { flex: 1; } .upsell b { display: block; } .upsell span { color: var(--muted); font-size: 13px; }
.about { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }

/* paywall */
.paywall { padding: calc(14px + var(--safe)) 18px 40px; max-width: 560px; margin: 0 auto; }
.pw-hero { text-align: center; color: var(--gold); margin: 8px 0 18px; }
.pw-hero h1 { color: var(--ink); margin: 8px 0 4px; }
.pw-feats { list-style: none; padding: 0; margin: 0 0 20px; }
.pw-feats li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; color: #c7cee3; }
.pw-feats svg { color: var(--teal); flex: 0 0 auto; }
.plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.plan { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; position: relative; }
.plan.best { border-color: var(--gold); } .plan.sel { border-color: var(--teal); background: var(--card2); }
.plan .tag { position: absolute; top: -10px; left: 16px; background: linear-gradient(120deg, var(--gold), var(--gold2)); color: #1a1405; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plan b { font-size: 16px; } .plan .price { font-size: 19px; font-weight: 700; }
.plan .price small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.restore { display: block; width: 100%; text-align: center; color: var(--muted); padding: 12px; margin-top: 4px; font-size: 14px; }
.empty { text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: 18px; padding: 28px 18px; color: var(--muted); }
.empty .btn { margin-top: 14px; }

/* tabs */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgba(11,16,32,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + var(--safeb)); z-index: 5; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; padding: 4px 0; }
.tab.on { color: var(--gold); }

@media (max-width: 360px) { .citylist { grid-template-columns: 1fr; } }