:root{
  --ink:#10233a; --paper:#f4f7f6; --surface:#ffffff; --line:#d7e0dd;
  --green:#0d7a5f; --green-deep:#075441; --gold:#f0b429; --muted:#56666c;
  --danger:#b3261e; --radius-s:8px; --radius-l:16px;
  --font:"Readex Pro",Tahoma,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e6eef0; --paper:#0e171c; --surface:#16232a; --line:#2a3a41;
    --green:#3fbf98; --green-deep:#7fdcbc; --muted:#9db0b6;}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.75}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}

/* header */
.site-head{background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{font-weight:700;font-size:24px;color:var(--ink);text-decoration:none;letter-spacing:-.5px}
.brand span{color:var(--green)}
.site-head nav a{color:var(--muted);text-decoration:none;font-size:15px;margin-inline-start:14px}
.site-head nav a:hover{color:var(--green)}

/* breadcrumb + titles */
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}
h1{font-size:clamp(26px,6vw,36px);line-height:1.3;margin:10px 0 6px;font-weight:700}
.lead{color:var(--muted);margin:0 0 20px;max-width:62ch}
h2{font-size:22px;margin:34px 0 8px}
h3{font-size:18px;margin:22px 0 6px}

/* tool box */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:20px}
.tabs{display:flex;gap:6px;background:var(--paper);padding:5px;border-radius:12px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:transparent;font:inherit;font-size:15px;padding:9px 8px;
  border-radius:9px;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(16,35,58,.15)}
.field{margin-bottom:14px}
.field label{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
input,select{width:100%;min-height:50px;font:inherit;font-size:18px;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);background:var(--surface);color:var(--ink)}
input:focus,select:focus{border-color:var(--green);outline:none}
input[type=number]{direction:ltr;text-align:right}
.btn{display:inline-block;border:0;background:var(--green);color:#fff;font:inherit;font-weight:600;
  font-size:17px;padding:12px 22px;border-radius:var(--radius-s);cursor:pointer;width:100%}
.btn:hover{background:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green);width:auto;font-size:15px;padding:8px 16px}

/* the result: the one bold element of the site */
.result{margin-top:18px;background:#10233a;color:#fff;border-radius:var(--radius-l);padding:20px 20px 18px;
  border-bottom:6px solid var(--gold)}
.result[hidden]{display:none}
.result .big{font-size:clamp(26px,7vw,40px);font-weight:700;line-height:1.35;margin:0}
.result .sub{color:#b8c7d3;margin:6px 0 0;font-size:16px}
.result dl:empty{display:none}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0;font-size:16px}
.result dt{color:#b8c7d3}
.result dd{margin:0;font-weight:600}
.result .actions{margin-top:14px}
.result .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.error{color:var(--danger);font-weight:600;margin-top:12px}

/* article */
.article{margin-top:10px}
.article p,.article li{max-width:68ch}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:15px}
.table-wrap{overflow-x:auto}
th,td{border:1px solid var(--line);padding:7px 10px;text-align:right}
th{background:var(--paper)}

/* home */
.today{margin:26px 0 8px}
.today .hijri{font-size:clamp(34px,10vw,58px);font-weight:700;line-height:1.15;margin:0;letter-spacing:-1px}
.today .greg{font-size:clamp(18px,4.5vw,24px);color:var(--muted);margin:6px 0 0}
.today .label{font-size:17px;font-weight:600;color:var(--green);margin:0 0 6px}
.today .day{display:inline-block;vertical-align:middle;background:var(--gold);color:#10233a;font-weight:700;font-size:15px;
  padding:0 12px;border-radius:999px;margin-inline-end:6px}
.group{margin-top:30px}
.group h2{font-size:18px;color:var(--muted);font-weight:600;margin:0 0 6px}
.links{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l)}
.links li+li{border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;text-decoration:none;color:var(--ink)}
.links a:hover{background:var(--paper)}
.links strong{font-weight:600}
.links span{color:var(--muted);font-size:14px;text-align:left}

.related{margin-top:36px}

footer{margin-top:56px;border-top:1px solid var(--line);padding:22px 0 40px;color:var(--muted);font-size:14px}
footer a{color:var(--muted);margin-inline-end:14px}

@media (max-width:520px){
  .site-head nav{display:none}
  .links span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.price-box{background:var(--paper);border-inline-start:4px solid var(--gold);border-radius:var(--radius-s);padding:10px 14px;font-size:15px;margin:0 0 16px}
.price-box:empty{display:none}

/* logo */
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{flex:none;display:block}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm small{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:1.5px;margin-top:3px;direction:ltr;text-align:right}

/* home tiles */
.search{margin:22px 0 4px}
.search input{border-radius:999px;padding-inline:20px;background:var(--surface)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-l);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--green);transform:translateY(-2px)}
.tile[hidden]{display:none}
.tile strong{font-size:16px;font-weight:600;line-height:1.4;margin-top:6px}
.tile small{font-size:13px;color:var(--muted);line-height:1.4}
.tile-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;--c:#0d7a5f;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent)}
.g-prices .tile-ico{--c:#b7791f}.g-date .tile-ico{--c:#0d7a5f}.g-money .tile-ico{--c:#1f6fb2}
.g-study .tile-ico{--c:#6b4fbb}.g-health .tile-ico{--c:#c2416b}.g-tools .tile-ico{--c:#4b5d67}
@media (prefers-color-scheme:dark){.g-prices .tile-ico{--c:#f0b429}.g-date .tile-ico{--c:#3fbf98}.g-money .tile-ico{--c:#6aaee8}
  .g-study .tile-ico{--c:#a895f0}.g-health .tile-ico{--c:#f08aaa}.g-tools .tile-ico{--c:#9db0b6}}
@media (max-width:400px){.tiles{grid-template-columns:1fr 1fr}.tile{padding:12px}}

/* misc controls */
.check{display:flex;align-items:center;gap:8px;font-size:15px;margin:4px 0 12px;cursor:pointer}
.check input{width:20px;height:20px;min-height:0;accent-color:var(--green)}
input[type=range]{padding:0;min-height:0;border:0;accent-color:var(--green)}
textarea{width:100%;font:inherit;font-size:17px;padding:12px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);resize:vertical}
textarea:focus{border-color:var(--green);outline:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.mini-q{font-weight:600;margin:0 0 8px}
.mini-a{font-size:24px;font-weight:700;margin:0;color:var(--green)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.stats div{background:var(--paper);border-radius:12px;padding:10px;text-align:center}
.stats dt{font-size:13px;color:var(--muted)}.stats dd{margin:0;font-size:24px;font-weight:700}
.result .zones{border-top:1px solid rgba(255,255,255,.15);padding-top:12px}
.clocks small.d{display:block;font-size:12px}
.clocks b.t{font-weight:700;color:var(--ink)}
.prayer-table td{font-size:18px;padding:10px 14px}
.prayer-table tr.next td{background:color-mix(in srgb,var(--gold) 25%,transparent);font-weight:700}
.qibla{display:flex;align-items:center;gap:14px;margin-top:16px}
.qibla svg{flex:none;transition:transform .4s}
.qr-wrap{display:flex;justify-content:center;margin:8px 0 14px}
.qr-wrap canvas{width:min(100%,280px);height:auto;border:1px solid var(--line);border-radius:12px;image-rendering:pixelated}
.pw{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;font-size:22px!important}
a.btn{text-align:center;text-decoration:none}
.clocks span{display:block!important;text-align:left}