:root{--ink:#10232d;--muted:#6c7f87;--line:#dce7e7;--teal:#0a7d75;--teal-dark:#075a57;--gold:#d9a441;--cream:#f7f3e9;--surface:#fff;--shadow:0 24px 70px rgba(22,71,77,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#edf8f6;color:var(--ink);font-family:"DM Sans",sans-serif}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 5% 30%,#fff 0 12%,transparent 30%),radial-gradient(circle at 90% 10%,#d7f2ee 0,transparent 28%);z-index:-1}.page-shell{max-width:1240px;margin:24px auto;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:28px;overflow:hidden;backdrop-filter:blur(12px)}.topbar{height:88px;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid rgba(16,35,45,.08);background:rgba(255,255,255,.84)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--teal);color:#fff;font:700 25px "Space Grotesk",sans-serif;box-shadow:0 8px 24px #0a7d7540}.brand strong,.brand small{display:block}.brand strong{font:700 18px "Space Grotesk",sans-serif}.brand small{font-size:11px;color:var(--muted);letter-spacing:.06em}.topbar nav{display:flex;gap:34px;margin:auto}.topbar nav a{font-weight:600;font-size:14px;text-decoration:none;color:#50666f}.topbar nav a:hover{color:var(--teal)}.api-live{font-size:12px;font-weight:700;padding:9px 13px;border:1px solid #cfe8df;border-radius:99px;background:#effaf5;color:#24755b}.api-live i{display:inline-block;width:7px;height:7px;background:#36a675;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #36a67520}.hero{position:relative;min-height:405px;padding:34px 42px;overflow:hidden;background:linear-gradient(115deg,#f8fbf8 10%,#f7f1e5 65%,#e9f3ee);border-bottom:1px solid var(--line)}.hero-art{position:absolute;inset:0 0 0 auto;width:76%;height:100%;object-fit:cover;object-position:right center;opacity:.29;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent,#000 34%)}.search-row{position:relative;z-index:2;display:flex;gap:10px;max-width:620px}.search-box{height:52px;flex:1;display:flex;align-items:center;background:#fff;border:1px solid #d7e1df;border-radius:15px;padding:5px 6px 5px 16px;box-shadow:0 8px 30px rgba(23,58,61,.06)}.search-box svg,.locate svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8}.search-box svg{color:var(--teal);margin-right:10px}.search-box input{min-width:0;flex:1;border:0;outline:0;font:600 15px "DM Sans";color:var(--ink)}button{font:700 13px "DM Sans";cursor:pointer}.search-box button{height:40px;border:0;border-radius:11px;padding:0 18px;color:#fff;background:var(--teal)}.search-box button:hover{background:var(--teal-dark)}.locate{width:52px;border:1px solid #d7e1df;border-radius:15px;background:#fff;color:var(--teal);display:grid;place-items:center}.hero-copy{position:relative;z-index:1;margin-top:47px}.eyebrow,.section-kicker{font-weight:800;letter-spacing:.13em;font-size:11px;color:var(--teal)}h1,h2{font-family:"Space Grotesk",sans-serif;margin:0}h1{font-size:56px;letter-spacing:-.045em}.location-meta{color:var(--muted);font-weight:600;margin:4px 0 28px}.next-wrap{display:grid;grid-template-columns:auto auto;align-items:end;width:max-content;column-gap:12px}.next-wrap span{grid-column:1/3;color:var(--muted);font-size:12px}.next-wrap strong{text-transform:capitalize;font:700 27px "Space Grotesk",sans-serif}.next-wrap b{font-size:14px;color:var(--teal);padding-bottom:4px}.qibla-card{position:absolute;z-index:1;right:42px;bottom:42px;display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:20px;box-shadow:0 16px 45px #233e3e18;backdrop-filter:blur(10px)}.compass{position:relative;width:62px;height:62px;border:1px solid #d6dfda;border-radius:50%;display:grid;place-items:center;background:#f8f4e9}.compass:before,.compass:after{content:"";position:absolute;background:#ccd8d3}.compass:before{width:1px;height:48px}.compass:after{width:48px;height:1px}.compass i{position:absolute;z-index:2;color:var(--gold);font-style:normal;transform:translateY(-16px);transform-origin:50% 47px}.compass b{z-index:1;font:700 12px "Space Grotesk",sans-serif}.qibla-card small,.qibla-card span{display:block;color:var(--muted);font-size:10px}.qibla-card strong{display:block;font:700 21px "Space Grotesk",sans-serif}.prayers{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.prayers article{position:relative;background:rgba(255,255,255,.95);padding:24px 20px 22px;min-height:166px;transition:.2s}.prayers article:hover{transform:translateY(-3px);z-index:2;box-shadow:0 12px 30px #193c3d1c}.prayers article.active{background:var(--teal);color:#fff}.prayer-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf6f3;color:var(--teal);font-size:19px;margin-bottom:14px}.active .prayer-icon{background:#ffffff20;color:#fff}.prayers small,.prayers strong,.prayers em{display:block}.prayers small{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800;color:var(--muted)}.prayers strong{font:700 28px "Space Grotesk",sans-serif;margin:3px 0}.prayers em{font-style:normal;font-size:11px;color:#8a9a9f}.active small,.active em{color:#cde8e4}.lower-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:24px;background:#f5faf8}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 10px 35px #294f4d0a}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel h2,.api-panel h2{font-size:22px;letter-spacing:-.03em}.night-chip{padding:7px 11px;background:#f7f2e6;color:#8f6b2f;font-weight:700;font-size:11px;border-radius:20px}.night-line{height:5px;background:linear-gradient(90deg,#284f5f,var(--gold),#284f5f);border-radius:5px;margin:32px 7% 13px;display:flex;justify-content:space-between}.night-line i{display:block;width:13px;height:13px;border:3px solid #fff;background:var(--gold);box-shadow:0 0 0 1px #d2ba85;border-radius:50%;transform:translateY(-4px)}.night-times{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.night-times small{color:var(--muted);font-size:10px}.night-times strong{display:block;font:700 17px "Space Grotesk",sans-serif}.settings-panel label{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:17px}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}select{width:100%;margin-top:6px;height:42px;padding:0 35px 0 12px;border:1px solid var(--line);border-radius:11px;background:#fbfdfc;color:var(--ink);font:600 12px "DM Sans"}.api-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;padding:48px 55px;background:#102f38;color:#fff}.api-panel p{color:#a9c0c4;line-height:1.6;max-width:480px}.api-panel .section-kicker{color:#7ec7bb}.code{background:#0b2229;border:1px solid #34505a;border-radius:15px;overflow:hidden}.code>div{padding:12px 15px;border-bottom:1px solid #29444c}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.red{background:#e47069}.gold{background:#d9aa52}.green{background:#5fb38c}.code button{float:right;border:0;background:transparent;color:#8eb0b5}.code code{display:block;padding:22px;line-height:2;color:#89b3ac;white-space:normal;font-size:12px}.code code b{color:#f0d698}footer{display:flex;justify-content:space-between;padding:22px 34px;background:#fff;color:#85979d;font-size:11px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);padding:11px 18px;background:#102f38;color:#fff;border-radius:50px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){body{background:#fff}.page-shell{margin:0;border-radius:0}.topbar{padding:0 18px;height:72px}.topbar nav{display:none}.hero{padding:24px 20px 180px}.hero-art{width:100%;opacity:.19}h1{font-size:42px}.search-box button{padding:0 12px}.qibla-card{left:20px;right:auto;bottom:28px}.prayers{grid-template-columns:repeat(3,1fr)}.prayers article{min-height:145px;padding:18px 14px}.lower-grid{grid-template-columns:1fr;padding:16px}.api-panel{grid-template-columns:1fr;padding:35px 24px;gap:20px}footer{display:block;line-height:2}.settings-row{grid-template-columns:1fr}}@media(max-width:430px){.prayers{grid-template-columns:repeat(2,1fr)}.hero{min-height:530px}.locate{display:none}.next-wrap strong{font-size:23px}}
.search-box .clear-search{display:grid;place-items:center;width:30px;height:36px;padding:0;border-radius:9px;background:transparent;color:#82949a}.search-box .clear-search:hover{background:#edf5f3;color:var(--teal-dark)}.search-box .clear-search svg{width:16px;margin:0;stroke:currentColor;stroke-width:2.2}.search-box .clear-search[hidden]{display:none}
.set-default{position:relative;z-index:2;margin-top:10px;padding:9px 13px;border:1px solid #b9d9d4;border-radius:10px;background:rgba(255,255,255,.88);color:var(--teal-dark)}.set-default:hover{background:#e8f6f3}.set-default[hidden]{display:none}[data-theme=dark] .set-default{border-color:#32655f;background:rgba(21,42,50,.9);color:#7bd1c7}[data-theme=dark] .set-default:hover{background:#1c3b42}
[data-theme=dark]{--ink:#e4eef1;--muted:#8fa5ad;--line:#2a4249;--teal:#3db5a8;--teal-dark:#2d9a8f;--gold:#e4b04f;--cream:#1a2f38;--surface:#152a32;--shadow:0 24px 70px rgba(0,0,0,.38);--page-bg:#0d1f26;--shell-bg:rgba(16,35,45,.88);--shell-border:rgba(42,66,73,.7);--topbar-bg:rgba(16,35,45,.92);--topbar-border:rgba(255,255,255,.06);--nav-link:#9bb0b8;--hero-bg:linear-gradient(115deg,#122830 10%,#1a2a32 65%,#152a30);--input-bg:#1c3640;--input-border:rgba(61,181,168,.24);--search-text:#f2f7f8;--search-placeholder:#7f98a0;--panel-bg:#152a32;--lower-bg:#101f26;--footer-bg:#152a32;--footer-text:#7a9199;--prayer-bg:rgba(21,42,50,.95);--prayer-hover-shadow:0 12px 30px rgba(0,0,0,.35);--prayer-em:#7a9199;--qibla-bg:rgba(21,42,50,.88);--qibla-border:#2f4a52;--compass-bg:#1e3540;--compass-line:#3a5560;--api-live-bg:#14352f;--api-live-border:#2a5a50;--api-live-text:#6ec9a8;--night-chip-bg:#2a3a28;--night-chip-text:#d4b06a;--night-dot-border:#152a32;--select-bg:#122830;color-scheme:dark}
[data-theme=dark] body{background:var(--page-bg);color:var(--ink)}
[data-theme=dark] body:before{background:radial-gradient(circle at 5% 30%,#1a3540 0 12%,transparent 30%),radial-gradient(circle at 90% 10%,#143038 0,transparent 28%)}
[data-theme=dark] .page-shell{background:var(--shell-bg);border-color:var(--shell-border)}
[data-theme=dark] .topbar{background:var(--topbar-bg);border-bottom-color:var(--topbar-border)}
[data-theme=dark] .topbar nav a{color:var(--nav-link)}
[data-theme=dark] .api-live{background:var(--api-live-bg);border-color:var(--api-live-border);color:var(--api-live-text)}
[data-theme=dark] .hero{background:var(--hero-bg);border-bottom-color:var(--line)}
[data-theme=dark] .hero-art{opacity:.22;mix-blend-mode:screen}
[data-theme=dark] .search-box{background:rgba(28,54,64,.94);border-color:var(--input-border);box-shadow:0 10px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)}
[data-theme=dark] .search-box input{background:transparent;color:var(--search-text);caret-color:var(--search-text)}
[data-theme=dark] .search-box input::placeholder{color:var(--search-placeholder)}
[data-theme=dark] .search-box input:-webkit-autofill,[data-theme=dark] .search-box input:-webkit-autofill:hover,[data-theme=dark] .search-box input:-webkit-autofill:focus{-webkit-text-fill-color:var(--search-text);-webkit-box-shadow:0 0 0 1000px #1c3640 inset;caret-color:var(--search-text);transition:background-color 5000s ease-in-out 0s}
[data-theme=dark] .search-box svg{color:var(--teal)}
[data-theme=dark] .search-box .clear-search{color:#8fa8b0}
[data-theme=dark] .search-box .clear-search:hover{background:rgba(61,181,168,.14);color:var(--teal)}
[data-theme=dark] .search-box button#search{box-shadow:0 4px 14px rgba(61,181,168,.28)}
[data-theme=dark] .locate{background:rgba(28,54,64,.94);border-color:var(--input-border);box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme=dark] .qibla-card{background:var(--qibla-bg);border-color:var(--qibla-border);box-shadow:0 16px 45px rgba(0,0,0,.35)}
[data-theme=dark] .compass{background:var(--compass-bg);border-color:var(--input-border)}
[data-theme=dark] .compass:before,[data-theme=dark] .compass:after{background:var(--compass-line)}
[data-theme=dark] .prayers article{background:var(--prayer-bg)}
[data-theme=dark] .prayers article:hover{box-shadow:var(--prayer-hover-shadow)}
[data-theme=dark] .prayer-icon{background:#1e3540}
[data-theme=dark] .prayers em{color:var(--prayer-em)}
[data-theme=dark] .lower-grid{background:var(--lower-bg)}
[data-theme=dark] .panel{background:var(--panel-bg);box-shadow:0 10px 35px rgba(0,0,0,.2)}
[data-theme=dark] .night-chip{background:var(--night-chip-bg);color:var(--night-chip-text)}
[data-theme=dark] .night-line i{border-color:var(--night-dot-border)}
[data-theme=dark] select{background:var(--select-bg);color:var(--ink);border-color:var(--line)}
[data-theme=dark] footer{background:var(--footer-bg);color:var(--footer-text)}
[data-theme=dark] .docs-link{color:#7ec7bb}
@media(max-width:800px){[data-theme=dark] body{background:var(--page-bg)}}

/* Keep controls reachable at narrow widths and when translated text expands. */
:root { --muted: #526971; }
[data-theme=dark] { --muted: #8fa5ad; --footer-text: #8fa5ad; --prayer-em: #8fa5ad; }
html { color-scheme: light; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 12px 16px; background: var(--surface); color: var(--ink); border: 2px solid var(--teal); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.topbar { gap: 20px; }
.topbar nav { gap: 24px; }
.topbar nav a { padding: 12px 0; }
.brand, .topbar-actions, .locate { flex-shrink: 0; }
.api-live { white-space: nowrap; }
.search-row, .search-box, .panel, .api-panel > *, .settings-row > * { min-width: 0; }
.search-box > svg { flex-shrink: 0; }
.search-box input { width: 100%; font: 400 16px "JetBrains Mono", monospace; background: transparent; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-box:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; }
.search-box button { flex-shrink: 0; }
.search-box .clear-search { width: 40px; min-height: 40px; }
.locate { min-height: 52px; }
.ui-status { position: relative; z-index: 2; margin: 10px 0 0; max-width: 620px; min-height: 1.5em; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ui-status:empty { min-height: 0; margin: 0; }
.hero-copy { max-width: calc(100% - 260px); }
h1, .location-meta { overflow-wrap: anywhere; }
.next-wrap { width: fit-content; max-width: 100%; grid-template-columns: minmax(0, auto) minmax(0, auto); }
.next-wrap strong, .next-wrap b { overflow-wrap: anywhere; }
.prayers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.prayers small, .prayers em { overflow-wrap: anywhere; }
.prayers em { color: #526971; }
.prayers article.active small, .prayers article.active em { color: #fff; }
.prayer-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel-head { gap: 12px; }
.night-chip { flex-shrink: 0; }
.night-times { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.night-times small { display: block; overflow-wrap: anywhere; }
select { font: 400 12px "JetBrains Mono", monospace; min-height: 44px; max-width: 100%; }
.code code { font-family: "JetBrains Mono", monospace; overflow-wrap: anywhere; }
.code button { min-height: 32px; }
.code > div { min-height: 56px; }
.docs-link { color: #9cddd1; }
footer { gap: 16px; color: #526971; }
.toast { z-index: 20; max-width: calc(100vw - 32px); width: max-content; overflow-wrap: anywhere; text-align: center; }
button:disabled { cursor: wait; opacity: .65; }
[data-theme=dark] .prayers article.active { background: #08796f; color: #fff; }
[data-theme=dark] .prayers article.active small, [data-theme=dark] .prayers article.active em { color: #fff; }
[data-theme=dark] .search-box button#search { color: #0d1f26; }
@media (max-width: 1100px) {
  .topbar { height: auto; min-height: 88px; padding: 16px 24px; flex-wrap: wrap; gap: 12px 20px; }
  .topbar-actions { margin-left: auto; }
  .topbar nav { display: flex; order: 3; width: 100%; justify-content: center; flex-wrap: wrap; margin: 0; gap: 8px 24px; }
}
@media (max-width: 800px) {
  .topbar { padding: 12px 18px; }
  .hero-copy { max-width: 100%; }
  .prayers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .search-row { align-items: flex-start; }
  .search-box { display: grid; grid-template-columns: 20px minmax(0, 1fr) 40px; gap: 4px; height: auto; padding: 6px 8px; }
  .search-box > svg { margin-right: 0; }
  .search-box input { min-height: 40px; }
  .search-box #search { grid-column: 1 / -1; min-height: 44px; width: 100%; white-space: normal; }
  .locate { display: grid; width: 44px; min-height: 54px; }
  .panel { padding: 20px; }
  .next-wrap { grid-template-columns: 1fr; gap: 4px; }
  .next-wrap span { grid-column: 1; }
}
@media (max-width: 430px) {
  .prayers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand { gap: 8px; }
  .brand small { max-width: 110px; letter-spacing: 0; }
  .topbar { column-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .prayers article:hover { transform: none; }
}
.qibla-card .compass { display: grid; place-items: center; flex-shrink: 0; }
.api-live[data-status="error"] { color: #9b2d27; background: #fff1ef; border-color: #deb4af; }
.api-live[data-status="error"] i { background: #b23c32; box-shadow: none; }
.api-live[data-status="loading"] i { background: #8b7340; box-shadow: none; }
[data-theme=dark] .api-live[data-status="error"] { color: #ffc2bb; background: #402825; border-color: #73504a; }
@media (max-width: 800px) {
  footer > span { display: block; }
  footer > span + span { margin-top: 6px; }
}