:root { color-scheme: dark; --ink:#fffaf0; --muted:#a8c8c5; --line:rgba(85,214,198,.20); --accent:#e9bd63; --turquoise:#20b8ad; --lapis:#075a79; --panel:#08242d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"DM Sans",sans-serif; color:var(--ink); background:radial-gradient(circle at 78% 0%,#0b6470 0,transparent 28%),radial-gradient(circle at 0% 85%,#0a5068 0,transparent 34%),#031921; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-size:84px 84px; background-image:url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2355d6c6' stroke-width='.7'%3E%3Cpath d='M42 2 53 22 82 42 53 62 42 82 31 62 2 42 31 22Z'/%3E%3Cpath d='m42 16 9 17 17 9-17 9-9 17-9-17-17-9 17-9Z'/%3E%3Ccircle cx='42' cy='42' r='9'/%3E%3C/g%3E%3C/svg%3E"); }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; padding:16px 0 56px; position:relative; }
nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.brand { display:flex; gap:0; align-items:center; color:white; text-decoration:none; font:800 17px/1 "Manrope"; letter-spacing:-.045em; }
.brand span { color:var(--accent); }
.brand > span:last-child { display:flex; align-items:baseline; gap:9px; }
.brand small { color:var(--accent); font:600 13px "Vazirmatn"; letter-spacing:0; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--accent); border-radius:50% 50% 12px 12px; color:var(--accent); font:600 21px "Vazirmatn"; letter-spacing:0; box-shadow:inset 0 0 0 3px rgba(233,189,99,.08); }
.unit-switch { display:flex; padding:4px; border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:99px; backdrop-filter:blur(10px); }
.unit { border:0; color:var(--muted); background:transparent; border-radius:99px; width:43px; height:34px; font:600 14px inherit; cursor:pointer; }
.unit.active { color:#08242d; background:var(--accent); }
.masthead { margin:0 auto 12px; text-align:center; }
.masthead-rule { display:flex; width:230px; align-items:center; gap:12px; margin:auto; color:var(--accent); }
.masthead-rule::before,.masthead-rule::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }
.masthead-rule::after { transform:scaleX(-1); }
.masthead-rule span { font-size:11px; }
.bismillah { margin:5px 0 0; color:var(--ink); font:500 17px "Vazirmatn"; }
.masthead-subtitle { display:none; }
.search-wrap { max-width:800px; margin:0 auto 16px; }
.location-prompt { margin:0 0 7px 4px; color:var(--accent); font:700 12px "Manrope"; letter-spacing:.1em; text-transform:uppercase; }
.search { display:grid; grid-template-columns:24px 1fr auto auto; gap:14px; align-items:center; padding:8px 9px 8px 20px; border:1px solid var(--line); border-radius:5px 5px 18px 18px; background:rgba(8,36,45,.88); box-shadow:0 20px 70px rgba(0,0,0,.24),inset 0 3px 0 rgba(32,184,173,.13); }
.search svg { width:22px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.search input { width:100%; border:0; outline:0; color:white; background:transparent; font:500 16px inherit; }
.search button { border:0; padding:14px 20px; color:#08242d; background:linear-gradient(135deg,#f2d184,var(--accent)); border-radius:4px 4px 12px 12px; font:700 14px inherit; cursor:pointer; transition:.2s; }
.search button:hover { transform:translateY(-1px); box-shadow:0 8px 25px rgba(201,255,98,.18); }
.search button span { margin-left:8px; }
.search .device-location { padding:12px 13px; color:var(--accent); background:transparent; border:1px solid rgba(233,189,99,.32); border-radius:4px 4px 12px 12px; font-size:12px; white-space:nowrap; }
.search .device-location:hover { color:#08242d; background:var(--accent); box-shadow:none; }
.search .device-location:disabled { cursor:wait; opacity:.65; transform:none; }
.suggestions { position:absolute; z-index:5; width:min(800px,calc(100vw - 40px)); margin-top:5px; overflow:hidden; border:1px solid var(--line); border-radius:4px 4px 16px 16px; background:#08242d; box-shadow:0 18px 44px rgba(0,0,0,.35); }
.suggestion { display:flex; width:100%; align-items:center; gap:12px; padding:12px 17px; color:var(--ink); border:0; border-bottom:1px solid rgba(85,214,198,.13); background:transparent; text-align:left; cursor:pointer; }
.suggestion:last-child { border-bottom:0; }
.suggestion:hover,.suggestion.active { background:rgba(233,189,99,.12); }
.suggestion strong { font:600 14px "Manrope"; }
.suggestion span { color:var(--muted); font-size:12px; }
.error { min-height:20px; margin:8px 4px 0; color:#ff9e9e; font-size:13px; }
.weather { opacity:1; transform:none; transition:.35s; }
.weather.loading { opacity:.3; transform:translateY(8px); pointer-events:none; }
.hero-card { position:relative; height:500px; overflow:hidden; border:1px solid rgba(233,189,99,.4); border-radius:150px 150px 26px 26px; background:#10323b; box-shadow:0 30px 80px rgba(0,0,0,.3),0 0 0 5px rgba(32,184,173,.07); }
.hero-card > img { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s,transform 8s; transform:scale(1.02); }
.hero-card > img.loaded { opacity:1; transform:scale(1.08); }
.image-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,12,22,.24),rgba(5,12,22,.1) 35%,rgba(5,12,22,.92)),linear-gradient(90deg,rgba(5,12,22,.4),transparent 55%); }
.hero-top,.hero-content { position:absolute; left:38px; right:38px; display:flex; justify-content:space-between; }
.hero-top { top:34px; align-items:center; color:rgba(255,255,255,.8); font-size:13px; }
.live-pill { padding:8px 12px; background:rgba(3,10,18,.45); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); border-radius:99px; }
.live-pill i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; box-shadow:0 0 0 4px rgba(233,189,99,.15); }
.hero-content { bottom:38px; align-items:flex-end; }
.eyebrow { margin:0 0 8px; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font:700 12px "Manrope"; }
h1 { margin:0; font:800 clamp(48px,7vw,88px)/.95 "Manrope"; letter-spacing:-.065em; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.condition { margin:14px 0 0; font-size:18px; color:rgba(255,255,255,.8); }
.temperature { display:flex; align-items:flex-start; font:700 clamp(70px,10vw,126px)/.75 "Manrope"; letter-spacing:-.08em; }
.temperature sup { margin:4px 0 0 10px; font-size:20px; letter-spacing:0; color:var(--accent); }
.photo-credit { position:absolute; right:16px; bottom:10px; margin:0; max-width:44%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:rgba(255,255,255,.48); font-size:10px; }
.details-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:14px 0 52px; }
.detail-card { display:flex; align-items:center; gap:15px; min-height:112px; padding:22px; border:1px solid var(--line); border-radius:4px 4px 20px 20px; background:linear-gradient(145deg,rgba(10,54,62,.96),rgba(5,31,40,.96)); box-shadow:inset 0 3px 0 rgba(32,184,173,.08); }
.detail-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border:1px solid rgba(233,189,99,.22); border-radius:50% 50% 10px 10px; color:var(--accent); background:rgba(233,189,99,.08); font-size:22px; }
.detail-card p { margin:0 0 7px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.detail-card strong { font:700 20px "Manrope"; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.prayer-section { margin:0 0 20px; }
.prayer-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.prayer-heading > div:first-child > p { margin:0 0 8px; color:var(--accent); font:700 11px "Manrope"; letter-spacing:.16em; }
.prayer-actions { display:flex; align-items:center; gap:12px; }
.monthly-link { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 17px; color:#08242d; border:1px solid #f6dc99; border-radius:5px 5px 15px 15px; background:linear-gradient(135deg,#f6d889,var(--accent)); box-shadow:0 8px 24px rgba(233,189,99,.18); font:700 13px "Manrope"; text-decoration:none; transition:.2s; }
.monthly-link:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(233,189,99,.3); }
.monthly-link span { font-size:18px; }
.method-badge { display:flex; align-items:center; gap:11px; padding:10px 14px; border:1px solid rgba(233,189,99,.25); border-radius:4px 4px 14px 14px; background:rgba(8,36,45,.72); }
.method-badge > span { display:grid; place-items:center; width:32px; height:32px; color:var(--accent); border-radius:50%; background:rgba(201,255,98,.09); }
.method-badge small,.method-badge strong { display:block; }
.method-badge small { margin-bottom:3px; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.method-badge strong { font-size:11px; }
.prayer-panel { display:grid; grid-template-columns:180px 1fr; overflow:hidden; border:1px solid rgba(233,189,99,.3); border-radius:6px 6px 24px 24px; background:linear-gradient(120deg,rgba(8,62,67,.94),rgba(5,33,43,.9)); box-shadow:inset 0 4px 0 rgba(32,184,173,.14); }
.prayer-date { display:flex; flex-direction:column; justify-content:center; padding:18px 22px; border-right:1px solid var(--line); }
.prayer-date span { color:var(--accent); font:700 15px "Manrope"; }
.prayer-date small { margin-top:7px; color:var(--muted); }
.prayer-times { display:grid; grid-template-columns:repeat(6,1fr); }
.prayer-item { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:84px; padding:14px 12px; text-align:center; border-right:1px solid var(--line); }
.prayer-item:last-child { border:0; }
.prayer-item span { margin-bottom:6px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.prayer-item strong { font:700 19px "Manrope"; }
.prayer-item.next { background:rgba(233,189,99,.11); }
.prayer-item.next::before { content:"NEXT"; position:absolute; top:9px; left:50%; transform:translateX(-50%); color:var(--accent); font:700 8px "Manrope"; letter-spacing:.14em; }
.prayer-item.next strong { color:var(--accent); }
.section-heading p { margin:0 0 8px; color:var(--accent); font:700 11px "Manrope"; letter-spacing:.16em; }
h2 { margin:0; font:700 30px "Manrope"; letter-spacing:-.035em; }
.section-heading > span { color:var(--muted); font-size:13px; }
.forecast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.forecast-card { display:grid; grid-template-columns:1fr auto; gap:24px; padding:24px; border:1px solid var(--line); border-radius:4px 4px 22px 22px; background:linear-gradient(145deg,rgba(8,54,62,.84),rgba(5,29,39,.88)); box-shadow:inset 0 3px 0 rgba(32,184,173,.1); }
.forecast-card .day { margin:0 0 4px; font:700 17px "Manrope"; }
.forecast-card .date,.forecast-card .forecast-condition { margin:0; color:var(--muted); font-size:13px; }
.forecast-card .forecast-condition { margin-top:20px; }
.forecast-temp { text-align:right; }
.forecast-temp strong { display:block; font:700 26px "Manrope"; }
.forecast-temp span { color:var(--muted); font-size:14px; }
.rain { margin-top:20px; color:#95d7ff; font-size:12px; }
.loader { display:none; position:fixed; inset:0; z-index:10; place-content:center; text-align:center; background:rgba(7,17,31,.38); backdrop-filter:blur(5px); }
.loader.visible { display:grid; }
.loader span { width:42px; height:42px; margin:auto; border:2px solid rgba(255,255,255,.15); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loader p { color:var(--muted); font-size:13px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:800px) { .search{grid-template-columns:24px 1fr auto}.device-location{grid-column:2/-1}.details-grid{grid-template-columns:repeat(2,1fr)} .hero-card{height:470px}.hero-content{align-items:start;flex-direction:column;gap:26px}.temperature{font-size:76px}.forecast-grid{grid-template-columns:1fr}.prayer-panel{grid-template-columns:1fr}.prayer-date{border-right:0;border-bottom:1px solid var(--line)}.prayer-times{grid-template-columns:repeat(3,1fr)}.prayer-item:nth-child(3){border-right:0}.prayer-item{border-bottom:1px solid var(--line)}.prayer-item:nth-child(n+4){border-bottom:0} }
@media (max-width:520px) { .shell{width:min(100% - 24px,1180px);padding-top:12px} nav{margin-bottom:6px}.masthead{margin:0 0 8px}.masthead-rule{display:none}.bismillah{font-size:15px}.search{grid-template-columns:20px 1fr}.search button{grid-column:1/-1}.search .device-location{grid-column:1/-1}.suggestions{width:calc(100vw - 24px)}.hero-card{height:520px;border-radius:80px 80px 22px 22px}.hero-top,.hero-content{left:22px;right:22px}.hero-content{bottom:34px}h1{font-size:48px}.details-grid{grid-template-columns:1fr 1fr}.detail-card{padding:16px;gap:10px}.detail-icon{display:none}.forecast-section{padding-bottom:20px}.section-heading>span{display:none}.prayer-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:8px}.prayer-heading>div:first-child>p{display:none}.prayer-heading h2{font-size:28px}.prayer-actions{width:100%;align-items:stretch;flex-direction:column}.monthly-link{justify-content:center;width:100%;min-height:42px;padding:0 14px}.method-badge{display:none}.prayer-date{padding:12px 16px}.prayer-date span{font-size:13px}.prayer-date small{margin-top:3px;font-size:11px}.prayer-item{min-height:68px;padding:10px 6px}.prayer-item span{margin-bottom:3px;font-size:10px}.prayer-item strong{font-size:17px}.prayer-item.next::before{top:4px}.search-wrap{margin-top:14px} }