@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#080808;--panel:#101010;--panel2:#151515;--line:#292929;--text:#f6f6f6;--muted:#929292;--soft:#c7c7c7;--white:#fff;--radius:22px;--shadow:0 25px 80px #0008}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,Inter,sans-serif;min-height:100vh;overflow-x:hidden}button,input{font:inherit}.ambient{position:fixed;width:450px;height:450px;border-radius:50%;filter:blur(110px);opacity:.08;pointer-events:none;z-index:-1}.ambient-one{background:#eee;top:-300px;left:-160px}.ambient-two{background:#aaa;right:-320px;top:500px}.topbar{height:84px;max-width:1240px;padding:0 28px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}.brand-mark{width:42px;height:42px;border:1px solid #444;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#292929,#0c0c0c)}.brand-mark svg{width:22px;fill:#fff}.brand b{display:block;font:800 17px Inter,sans-serif;letter-spacing:3px}.brand small{display:block;font:500 8px Inter,sans-serif;color:#777;letter-spacing:1.5px;margin-top:3px}.top-actions{display:flex;align-items:center;gap:10px;color:#aaa;font-size:12px}.lang-toggle{border:1px solid #383838;color:#eee;background:#141414;border-radius:10px;padding:8px 12px;cursor:pointer;font-size:12px}.live-dot,.source-dot{width:7px;height:7px;background:#eee;border-radius:50%;box-shadow:0 0 13px #fff8}.shell{max-width:1120px;padding:0 24px;margin:auto}.hero{padding:70px 0 42px;max-width:780px}.eyebrow{display:flex;align-items:center;gap:10px;color:#b8b8b8;font-size:12px;letter-spacing:.5px}.eyebrow-line{height:1px;width:28px;background:#eee}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.22;letter-spacing:-1.5px;margin:22px 0 16px;font-weight:800}.hero h1 span{color:#888}.hero-copy{max-width:590px;color:#999;font-size:14px;line-height:2;margin:0 0 28px}.searchbar{display:flex;align-items:center;gap:13px;background:#111;border:1px solid #353535;border-radius:16px;padding:8px 9px 8px 16px;box-shadow:0 10px 40px #0005;transition:border .2s}.searchbar:focus-within{border-color:#888}.search-icon{width:21px;flex-shrink:0;stroke:#888;fill:none;stroke-width:1.7}.searchbar input{background:transparent;color:#fff;border:0;outline:0;min-width:0;flex:1;font-size:14px;padding:12px 0}.searchbar input::placeholder{color:#666}.searchbar button{background:#f2f2f2;color:#111;border:0;border-radius:11px;padding:12px 17px;display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s}.searchbar button:hover{background:#fff;transform:translateY(-1px)}.searchbar button svg{width:17px;stroke:#111;fill:none;stroke-width:1.8}.quick-cities{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px;font-size:11px;color:#777}.quick-cities button{border:1px solid #292929;background:#0e0e0e;color:#bbb;padding:6px 11px;border-radius:20px;font-size:11px;cursor:pointer}.quick-cities button:hover{color:#fff;border-color:#666}.notice{border:1px solid #593737;background:#1d1010;color:#ffbcbc;border-radius:13px;padding:14px 16px;margin:0 0 22px;font-size:13px;line-height:1.8}.hidden{display:none!important}.weather-panel{padding-bottom:50px}.location-heading{display:flex;align-items:center;gap:15px;padding:25px 0 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}.location-symbol{width:50px;height:50px;border-radius:15px;border:1px solid #383838;background:#141414;display:grid;place-items:center}.location-symbol svg{width:23px;stroke:#fff;fill:none;stroke-width:1.5}.location-text{flex:1;min-width:180px}.city-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.city-line h2{font-size:25px;margin:0;font-weight:700}.country-tag{border:1px solid #333;border-radius:6px;padding:3px 8px;color:#bbb;font:500 10px Inter,sans-serif}.location-text p{margin:5px 0 0;color:#888;font-size:12px}.coordinates{font:11px Inter,sans-serif!important;color:#666!important}.local-clock{min-width:190px;text-align:left;border-left:1px solid #333;padding-left:22px;display:flex;flex-direction:column;gap:4px}.local-clock span{font-size:11px;color:#888}.local-clock strong{font:600 24px Inter,sans-serif;letter-spacing:1px}.local-clock small{font-size:11px;color:#777}.current-card{margin-top:22px;padding:27px 30px 0;background:linear-gradient(130deg,#181818,#0e0e0e 70%);border:1px solid #292929;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.current-main{display:flex;align-items:center;justify-content:space-between;min-height:185px}.section-kicker{font:600 10px Inter,Vazirmatn,sans-serif;color:#858585;letter-spacing:1.5px;text-transform:uppercase}.temperature{font:700 clamp(60px,9vw,94px)/1 Inter,sans-serif;letter-spacing:-5px;margin:18px 0 10px}.temperature sup{font-size:30px;vertical-align:top;letter-spacing:-1px;margin-left:3px;color:#aaa}.condition{font-size:17px;font-weight:600}.feels{font-size:12px;color:#888;margin-top:7px}.feels b{color:#ddd}.weather-art{width:190px;height:150px;display:grid;place-items:center}.weather-art svg{width:150px;height:125px;overflow:visible}.weather-art svg circle{fill:#f0f0f0}.weather-art svg path{fill:#888;stroke:#eee;stroke-width:1.3}.current-bottom{border-top:1px solid #2a2a2a;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:18px 0}.current-bottom div{display:flex;flex-direction:column;gap:7px}.current-bottom span{font-size:11px;color:#777}.current-bottom b{font:600 13px Inter,Vazirmatn,sans-serif;color:#e4e4e4}.current-bottom i{font-style:normal;color:#666}.section-title{display:flex;align-items:center;gap:25px;margin:42px 0 18px}.section-title h3{font-size:20px;margin:4px 0 0}.title-rule{height:1px;background:#292929;flex:1}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{position:relative;min-height:136px;border:1px solid #262626;border-radius:16px;padding:17px;background:linear-gradient(145deg,#121212,#0b0b0b);display:flex;flex-direction:column;gap:9px;transition:transform .2s,border-color .2s}.metric:hover{transform:translateY(-3px);border-color:#555}.metric-icon{width:35px;height:35px;border:1px solid #303030;border-radius:10px;display:grid;place-items:center;color:#eee;background:#171717}.metric-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.metric>span:nth-child(2){font-size:11px;color:#888}.metric strong{font:600 23px Inter,Vazirmatn,sans-serif;display:inline}.metric small{position:absolute;bottom:20px;left:17px;color:#666;font:10px Inter,sans-serif}.forecast-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.forecast-day{background:#101010;border:1px solid #272727;border-radius:15px;text-align:center;padding:18px 9px}.forecast-day .day{font-size:11px;color:#888}.forecast-day svg{width:42px;height:42px;margin:12px auto;display:block}.forecast-day svg path,.forecast-day svg circle{stroke:#ddd;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.forecast-day .fc-desc{font-size:10px;color:#888;min-height:32px;display:flex;align-items:center;justify-content:center}.forecast-day .fc-temps{display:flex;justify-content:center;gap:10px;font:600 13px Inter,sans-serif;margin-top:10px}.forecast-day .fc-temps span:last-child{color:#666}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.info-card{border:1px solid #292929;border-radius:18px;background:linear-gradient(145deg,#121212,#0c0c0c);padding:22px}.card-heading{display:flex;align-items:center;gap:12px}.card-heading h3{font-size:17px;margin:4px 0 0}.aqi-row{display:flex;align-items:baseline;gap:13px;margin:23px 0 12px}.aqi-row strong{font:700 36px Inter,sans-serif}.aqi-row span{font-size:12px;color:#aaa}.aqi-track{height:5px;border-radius:8px;background:#292929;overflow:hidden}.aqi-track span{display:block;height:100%;width:0;background:#ddd;border-radius:8px;transition:width .4s}.pollutants{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.pollutants div{display:flex;flex-direction:column;gap:5px}.pollutants span{font:11px Inter,sans-serif;color:#888}.pollutants b{font:600 15px Inter,sans-serif}.pollutants small{font-size:9px;color:#666}.muted-note{font-size:10px;line-height:1.9;color:#666;margin:22px 0 0}.sun-row{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #252525;font-size:12px;color:#888}.sun-row:first-of-type{margin-top:10px}.sun-row strong{font:600 13px Inter,Vazirmatn,sans-serif;color:#eee}.source-line{display:flex;align-items:center;gap:9px;border-top:1px solid #242424;margin-top:28px;padding-top:18px;color:#777;font-size:10px}.source-line #unitsLine{margin-right:auto;font:10px Inter,sans-serif;color:#555}.empty-state{text-align:center;padding:38px 20px 75px;max-width:550px;margin:auto}.empty-icon{width:110px;height:110px;margin:0 auto 25px;display:grid;place-items:center;border:1px solid #2b2b2b;border-radius:32px;background:linear-gradient(145deg,#171717,#0b0b0b)}.empty-icon svg{width:70px;stroke:#ddd;fill:none;stroke-width:1.4;stroke-linecap:round}.empty-state h2{font-size:25px;margin:0 0 10px}.empty-state p{font-size:13px;color:#888;line-height:2;margin:0 auto 18px}.empty-example{font:10px Inter,sans-serif;color:#666;letter-spacing:1px}footer{border-top:1px solid #222;display:flex;justify-content:space-between;gap:15px;padding:23px 0 28px;color:#666;font-size:10px}footer span:first-child{font:10px Inter,sans-serif;letter-spacing:1px}body.en{font-family:Inter,Vazirmatn,sans-serif}body.en .hero h1{letter-spacing:-2px}body.en .local-clock{text-align:right;border-left:0;border-right:1px solid #333;padding-left:0;padding-right:22px}body.en .metric small{left:17px;right:auto}body.en .source-line #unitsLine{margin-left:auto;margin-right:0}body.en .searchbar{direction:ltr}body.en .hero-copy,body.en .location-text p{line-height:1.8}body.en .searchbar input{text-align:left}body.en .current-bottom b,body.en .sun-row strong{font-family:Inter,sans-serif}
@media(max-width:760px){.topbar{height:72px;padding:0 18px}.shell{padding:0 16px}.hero{padding:48px 0 30px}.hero h1{font-size:43px}.hero-copy{font-size:13px}.location-heading{gap:11px}.local-clock{width:100%;border:0;border-top:1px solid #252525;padding:15px 0 0;text-align:right;min-width:0}.local-clock strong{font-size:22px}.current-card{padding:21px 20px 0}.current-main{min-height:160px}.weather-art{width:115px}.weather-art svg{width:105px}.temperature{font-size:70px}.current-bottom{grid-template-columns:repeat(2,1fr);gap:18px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:130px}.forecast-grid{grid-template-columns:repeat(5,minmax(115px,1fr));overflow-x:auto;padding-bottom:6px}.bottom-grid{grid-template-columns:1fr}.section-title{margin-top:33px}.city-line h2{font-size:22px}.current-bottom b{font-size:12px}}
@media(max-width:420px){.hero h1{font-size:36px}.searchbar{gap:8px;padding-left:8px}.searchbar button{padding:11px 12px}.searchbar input{font-size:12px}.quick-cities{gap:6px}.quick-cities button{padding:6px 8px}.weather-art{width:90px}.weather-art svg{width:90px}.temperature{font-size:62px}.temperature sup{font-size:23px}.current-card{padding:18px 15px 0}.metric{padding:13px}.metric strong{font-size:20px}.metric small{left:13px;bottom:16px}.pollutants{gap:5px}.info-card{padding:17px}footer{flex-direction:column}}

/* Theme and unit controls */
.unit-toggle,.theme-toggle{border:1px solid #383838;color:#eee;background:#141414;border-radius:10px;min-height:35px;padding:7px 10px;cursor:pointer;font:600 11px Inter,sans-serif}
.theme-toggle{width:36px;height:35px;display:grid;place-items:center;padding:7px}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon-icon{display:none}
body[data-theme="light"]{--bg:#f3f3f3;--panel:#fff;--panel2:#f8f8f8;--line:#dedede;--text:#141414;--muted:#777;--soft:#555;--white:#111;background:var(--bg);color:var(--text)}
body[data-theme="light"] .ambient{opacity:.045}
body[data-theme="light"] .topbar{border-bottom-color:#ddd}
body[data-theme="light"] .brand{color:#111}
body[data-theme="light"] .brand-mark{border-color:#ddd;background:linear-gradient(145deg,#fff,#e9e9e9)}
body[data-theme="light"] .brand-mark svg{fill:#111}
body[data-theme="light"] .brand small{color:#888}
body[data-theme="light"] .top-actions{color:#555}
body[data-theme="light"] .lang-toggle,body[data-theme="light"] .unit-toggle,body[data-theme="light"] .theme-toggle{border-color:#d5d5d5;color:#222;background:#fff}
body[data-theme="light"] .theme-toggle .sun-icon{display:none}
body[data-theme="light"] .theme-toggle .moon-icon{display:block}
body[data-theme="light"] .hero h1 span{color:#777}
body[data-theme="light"] .hero-copy,body[data-theme="light"] .eyebrow{color:#666}
body[data-theme="light"] .eyebrow-line{background:#222}
body[data-theme="light"] .searchbar{background:#fff;border-color:#ddd;box-shadow:0 10px 40px #0000000a}
body[data-theme="light"] .searchbar input{color:#111}
body[data-theme="light"] .searchbar input::placeholder{color:#999}
body[data-theme="light"] .search-icon{stroke:#777}
body[data-theme="light"] .quick-cities{color:#777}
body[data-theme="light"] .quick-cities button{background:#fff;border-color:#ddd;color:#555}
body[data-theme="light"] .quick-cities button:hover{border-color:#999;color:#111}
body[data-theme="light"] .location-heading{border-bottom-color:#ddd}
body[data-theme="light"] .location-symbol,body[data-theme="light"] .metric-icon{background:#f7f7f7;border-color:#ddd;color:#222}
body[data-theme="light"] .location-symbol svg{stroke:#222}
body[data-theme="light"] .country-tag{border-color:#ddd;color:#555}
body[data-theme="light"] .location-text p,body[data-theme="light"] .local-clock span,body[data-theme="light"] .local-clock small{color:#777}
body[data-theme="light"] .coordinates{color:#888!important}
body[data-theme="light"] .local-clock{border-color:#ddd}
body[data-theme="light"] .current-card{background:linear-gradient(130deg,#fff,#f2f2f2 70%);border-color:#ddd;box-shadow:0 20px 55px #0000000b}
body[data-theme="light"] .section-kicker{color:#777}
body[data-theme="light"] .temperature sup{color:#777}
body[data-theme="light"] .feels{color:#777}
body[data-theme="light"] .feels b{color:#222}
body[data-theme="light"] .weather-art svg circle{fill:#222}
body[data-theme="light"] .weather-art svg path{fill:#aaa;stroke:#333}
body[data-theme="light"] .current-bottom{border-top-color:#ddd}
body[data-theme="light"] .current-bottom span{color:#777}
body[data-theme="light"] .current-bottom b{color:#222}
body[data-theme="light"] .title-rule{background:#ddd}
body[data-theme="light"] .metric,body[data-theme="light"] .forecast-day,body[data-theme="light"] .info-card{background:linear-gradient(145deg,#fff,#f8f8f8);border-color:#ddd}
body[data-theme="light"] .metric:hover{border-color:#aaa}
body[data-theme="light"] .metric>span:nth-child(2),body[data-theme="light"] .forecast-day .day,body[data-theme="light"] .forecast-day .fc-desc{color:#777}
body[data-theme="light"] .metric strong,body[data-theme="light"] .pollutants b,body[data-theme="light"] .sun-row strong{color:#222}
body[data-theme="light"] .metric small,body[data-theme="light"] .pollutants small{color:#888}
body[data-theme="light"] .forecast-day .fc-temps span:last-child{color:#777}
body[data-theme="light"] .forecast-day svg path,body[data-theme="light"] .forecast-day svg circle{stroke:#333}
body[data-theme="light"] .aqi-track{background:#ddd}
body[data-theme="light"] .aqi-row span,body[data-theme="light"] .pollutants span,body[data-theme="light"] .sun-row{color:#666}
body[data-theme="light"] .muted-note{color:#777}
body[data-theme="light"] .sun-row{border-bottom-color:#ddd}
body[data-theme="light"] .source-line,body[data-theme="light"] footer{border-color:#ddd;color:#777}
body[data-theme="light"] .source-line #unitsLine{color:#888}
body[data-theme="light"] .empty-icon{border-color:#ddd;background:linear-gradient(145deg,#fff,#eee)}
body[data-theme="light"] .empty-icon svg{stroke:#333}
body[data-theme="light"] .empty-state p{color:#777}
body[data-theme="light"] .empty-example{color:#888}
body[data-theme="light"] .notice{background:#fff5f5;color:#a33;border-color:#e5caca}
body[data-theme="light"] footer{color:#777}
@media(max-width:760px){.top-actions{gap:6px}.unit-toggle{padding:7px 8px}.live-label{display:none}}