:root{--bg:#f6f4ee;--card:#fff;--ink:#1d2a2a;--ink2:#566565;--line:#e4e0d4;--pri:#0f3d3e;--pri2:#16595a;--gold:#c9a227;--tint:#eef3ef;--now:#fff6d9}
@media (prefers-color-scheme:dark){:root{--bg:#0f1716;--card:#16211f;--ink:#e8eeea;--ink2:#9fb0aa;--line:#26332f;--pri:#7cc4b8;--pri2:#9ad6cb;--tint:#1b2a27;--now:#2c2a17}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif}
a{color:var(--pri2);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.top{background:var(--pri);color:#fff}
@media (prefers-color-scheme:dark){.top{background:#0b2e2f}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.25rem}
.brand:hover{text-decoration:none}.brand small{display:block;font-size:.72rem;font-weight:400;opacity:.8;line-height:1}
.top nav{display:flex;gap:4px;flex-wrap:wrap}.top nav a{color:#fff;opacity:.9;padding:6px 10px;border-radius:8px;font-size:.92rem}
.top nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}.top nav .lang{border:1px solid rgba(255,255,255,.35)}
main{padding:18px 16px 40px}
h1{font-size:1.65rem;line-height:1.35;margin:.2em 0 .3em}h2{font-size:1.2rem;margin:0 0 .6em}h3{font-size:1.02rem;margin:1em 0 .2em}
.sec{margin:28px 0 12px}
.lead{color:var(--ink2);margin:0 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:0 0 16px}
.center{text-align:center}
.btn{display:inline-block;background:var(--gold);color:#1d1a0b;border:0;border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.btn.big{padding:14px 22px;font-size:1.05rem}
.hero{background:linear-gradient(135deg,#0f3d3e,#16595a);color:#fff;border-radius:20px;padding:28px 20px;text-align:center}
.hero h1{font-size:2rem}.hero p{opacity:.9;max-width:640px;margin:0 auto 18px}
.search{position:relative;max-width:520px;margin:14px auto 0}
.search input{width:100%;padding:13px 16px;border-radius:12px;border:0;font:inherit;font-size:1rem}
.qres{position:absolute;inset-inline:0;top:100%;background:var(--card);color:var(--ink);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:5;text-align:start;overflow:hidden}
.qres a{display:block;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink)}.qres small{color:var(--ink2)}
.grid{display:grid;gap:12px}
.cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ccard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink)}
.ccard:hover{border-color:var(--pri2);text-decoration:none}.ccard b{font-size:1.08rem}.ccard small{color:var(--ink2);margin-inline-start:6px}
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px;font-size:.78rem;color:var(--ink2);text-align:center}
.mini i{font-style:normal}.mini em{display:block;font-style:normal;color:var(--ink);font-weight:700;font-size:.92rem}
.countries{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.countries a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);display:flex;justify-content:space-between}
.countries small{color:var(--ink2)}
.crumbs{font-size:.86rem;color:var(--ink2);margin:0 0 8px;display:flex;gap:6px;flex-wrap:wrap}
.today h1{margin-top:0}
.next{background:var(--tint);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:1.05rem;min-height:1.6em}
.next b{color:var(--pri2);font-size:1.25rem}.next .cd{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem}
.times{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.times .tlabel{grid-column:1/-1;margin:0;color:var(--ink2);font-size:.9rem}
.t{border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center;background:var(--card)}
.t .n{display:block;color:var(--ink2);font-size:.92rem}.t .v{display:block;font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.t .v12{display:block;font-size:.78rem;color:var(--ink2)}
.t.t-sunrise{opacity:.75}
.t.is-next{background:var(--now);border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.extra{color:var(--ink2);font-size:.88rem;margin:10px 0 0}
.method{margin-top:14px;font-size:.9rem;color:var(--ink2)}.method select{font:inherit;margin-inline-start:8px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qib{text-align:center}.compass{width:140px;height:140px;color:var(--ink);display:block;margin:0 auto 8px}
.near{list-style:none;padding:0;margin:0;columns:2}.near li{padding:4px 0}.near small{color:var(--ink2)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.month{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.93rem}
.month th,.month td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.month th{background:var(--tint);font-weight:700}.month tr.today td{background:var(--now);font-weight:700}
.month .hj{color:var(--ink2);font-size:.85rem}.cities td:first-child{text-align:start}
.note{color:var(--ink2);font-size:.9rem}
.prose p{margin:.4em 0 .8em}
.foot{border-top:1px solid var(--line);color:var(--ink2);font-size:.88rem;padding:18px 0 28px}
@media (max-width:760px){
	h1{font-size:1.35rem}.hero h1{font-size:1.55rem}
	.times{grid-template-columns:repeat(3,1fr)}.t .v{font-size:1.35rem}
	.two{grid-template-columns:1fr}
	.mini{font-size:.72rem}
}