:root{--navy:#101a3a;--ink:#17213f;--muted:#7e88a4;--line:#e9edf5;--lav:#f3f3ff;--purple:#8177f7;--white:#fff;--bg:#f7f8fc}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden}.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}.ambient-one{width:420px;height:420px;background:#e8e9ff;top:-190px;right:-120px;opacity:.65}.ambient-two{width:300px;height:300px;background:#e7f7fb;bottom:-150px;left:24%;opacity:.6}.app-shell{max-width:1480px;min-height:100vh;margin:0 auto;display:grid;grid-template-columns:245px minmax(0,1fr);background:rgba(255,255,255,.66);box-shadow:0 0 80px #29315b0a}.sidebar{background:#fff;border-right:1px solid #edf0f7;padding:31px 19px 22px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font:800 25px Manrope,sans-serif;letter-spacing:-1.2px;margin:0 0 55px 9px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;color:white;background:linear-gradient(135deg,#8c82ff,#625be5);font-size:20px;box-shadow:0 7px 16px #8177f744}.brand-dot{color:#8c82ff}.side-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#9aa3bb}.side-label{margin:0 0 14px 11px}.nav-item,.place-link{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:13px;padding:13px 13px;border-radius:12px;color:#77819e;font:600 13px 'DM Sans',sans-serif;text-align:left;cursor:pointer;transition:.2s}.nav-item.active{background:#f0efff;color:#655ce2;box-shadow:inset 3px 0 #8177f7}.nav-item:hover,.place-link:hover{background:#f7f7ff;color:#655ce2}.nav-icon{font-size:17px;width:18px;text-align:center}.side-divider{height:1px;background:#edf0f6;margin:28px 5px 27px}.place-link{padding:12px 11px}.place-dot{width:8px;height:8px;border-radius:50%;background:#ff9e85}.place-dot.tokyo{background:#e66c99}.place-dot.ny{background:#62bfa7}.place-arrow{margin-left:auto;font-size:15px;opacity:0}.place-link:hover .place-arrow{opacity:1}.sidebar-bottom{margin-top:auto}.mini-card{background:linear-gradient(140deg,#f4f3ff,#f0f7ff);border:1px solid #ecebff;border-radius:16px;padding:17px 14px;display:flex;gap:12px;align-items:flex-start}.mini-sun{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:11px;background:#fff1cf;color:#e7a43d;font-size:23px}.mini-card strong{font:700 12px Manrope,sans-serif}.mini-card p{margin:6px 0 0;color:#818aa5;font-size:11px;line-height:1.6}.sidebar-foot{font-size:10px;color:#a0a8bc;margin:22px 0 0 7px}.sidebar-foot span{color:#8c82ff}.main-content{padding:30px clamp(22px,4vw,58px) 25px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:42px}.breadcrumb{font-size:12px;color:#9ba4ba}.breadcrumb span{margin:0 9px;color:#d4d8e4}.breadcrumb strong{color:#47516d;font-weight:600}.top-actions{display:flex;align-items:center;gap:11px}.search-wrap{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e9edf5;border-radius:12px;padding:0 7px 0 13px;height:42px;width:228px;box-shadow:0 4px 15px #26335c05}.search-wrap>span{font-size:23px;color:#9ca5bd;transform:rotate(-20deg)}.search-wrap input{border:0;outline:0;min-width:0;width:100%;font:500 12px 'DM Sans',sans-serif;color:var(--ink);background:transparent}.search-wrap input::placeholder{color:#a6aec1}.search-wrap button{border:0;border-radius:8px;background:#f1f0ff;color:#7268eb;width:28px;height:28px;cursor:pointer}.unit-toggle{border:1px solid #e9edf5;background:#fff;padding:4px;border-radius:11px;display:flex;gap:2px;height:42px;align-items:center}.unit-toggle span{font-size:11px;color:#939bb2;padding:8px 9px;border-radius:7px;cursor:pointer}.unit-toggle .unit-active{background:#171f43;color:#fff}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{margin:0 0 10px}.welcome-row h1{font:800 clamp(28px,3vw,39px) Manrope,sans-serif;letter-spacing:-1.6px;margin:0;color:#151e40}.welcome-row h1 span{color:#8177f7}.subheading{margin:9px 0 0;color:#8c95ad;font-size:13px}.location-btn{border:1px solid #e4e6f4;background:#fff;border-radius:11px;padding:12px 15px;color:#6b63dc;font:600 11px 'DM Sans',sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px #29315b05;transition:.2s}.location-btn:hover{background:#f4f2ff;transform:translateY(-1px)}.location-btn span{font-size:16px;margin-right:6px}.hero-card{position:relative;isolation:isolate;overflow:hidden;min-height:292px;border-radius:22px;background:linear-gradient(112deg,#171f46 0%,#292d64 52%,#6867bd 100%);color:#fff;padding:28px 34px 0;box-shadow:0 17px 35px #2e306b1c;margin-bottom:31px}.hero-card:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 79% 20%,#a9a1ff3d,transparent 40%),radial-gradient(ellipse at 0 100%,#4b4e9a66,transparent 40%)}.hero-copy{position:relative;z-index:3}.live-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff30;background:#ffffff12;border-radius:20px;padding:6px 10px;font-size:8px;letter-spacing:1.4px;color:#d7d9ff;font-weight:700}.live-dot{width:5px;height:5px;border-radius:50%;background:#78e5c2;box-shadow:0 0 0 4px #78e5c21c}.hero-card h2{font:700 22px Manrope,sans-serif;margin:17px 0 4px;letter-spacing:-.5px}.hero-date{font-size:11px;color:#c1c5e6;margin:0}.temperature-line{display:flex;align-items:center;gap:13px;margin:10px 0 -3px}.temperature-line>span:first-child{font:500 65px Manrope,sans-serif;letter-spacing:-5px}.weather-emoji{font-size:36px;filter:drop-shadow(0 4px 9px #ffc86a30)}.condition{font-size:13px;color:#e0e2ff;margin:0 0 10px}.feels{font-size:10px;color:#bfc5e6;margin:0}.feels strong{color:#fff;font-weight:600}.feels-divider{margin:0 7px;color:#6e75ae}.hero-art{position:absolute;inset:0 0 0 45%;overflow:hidden;z-index:1}.sun-glow{position:absolute;width:190px;height:190px;top:20px;right:16%;border-radius:50%;background:#ffdc9c16;filter:blur(10px)}.sun-disc{position:absolute;width:94px;height:94px;right:23%;top:39px;border-radius:50%;background:linear-gradient(135deg,#ffe9a9,#ffb86b);box-shadow:0 0 40px #ffd78640}.cloud{position:absolute;width:150px;height:43px;border-radius:40px;background:linear-gradient(180deg,#e9eaff,#a9b2e4);box-shadow:0 15px 28px #0b123d20}.cloud i,.cloud b,.cloud em{position:absolute;display:block;border-radius:50%;background:inherit}.cloud i{width:53px;height:53px;left:24px;top:-24px}.cloud b{width:67px;height:67px;left:60px;top:-36px}.cloud em{width:45px;height:45px;right:12px;top:-14px}.cloud-back{right:7%;top:118px;transform:scale(.83);opacity:.75}.cloud-front{right:26%;top:157px;transform:scale(1.02);background:linear-gradient(180deg,#fff,#d4d9fa)}.art-spark{position:absolute;color:#ffdf9c;font-size:20px}.spark-one{right:10%;top:55px}.spark-two{right:48%;top:94px;font-size:14px}.art-hill{position:absolute;bottom:-72px;width:430px;height:180px;border-radius:50% 50% 0 0;transform:rotate(-10deg)}.hill-back{right:-60px;background:linear-gradient(130deg,#6267b6,#454b91);bottom:-94px}.hill-front{right:10px;bottom:-119px;background:linear-gradient(130deg,#a0a2e0,#777ac7);transform:rotate(13deg)}.hero-footer{position:absolute;bottom:0;left:34px;right:34px;height:44px;border-top:1px solid #ffffff20;display:flex;align-items:center;justify-content:space-between;color:#c6c9eb;font-size:10px;z-index:4}.footer-icon{font-size:14px;color:#a9a1ff;margin-right:7px}.updated{color:#a3a9d4;font-size:9px}.section-heading,.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}.section-heading{margin-bottom:16px}.section-heading h3,.panel-heading h3{font:700 18px Manrope,sans-serif;letter-spacing:-.5px;margin:0;color:#1c2547}.section-note,.panel-tag{font-size:10px;color:#9aa3ba}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:25px}.metric-card{background:#fff;border:1px solid #edf0f7;border-radius:16px;padding:17px 16px 14px;min-height:151px;position:relative;overflow:hidden;box-shadow:0 4px 13px #26335c04}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#8a93ad;font-size:11px}.metric-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:16px}.metric-icon.warm{background:#fff3e3;color:#edab4b}.metric-icon.wind{background:#e9f7ff;color:#57a9d2}.metric-icon.humidity{background:#e7f6f2;color:#4cae9b}.metric-icon.uv{background:#fff0f0;color:#f28a7c}.metric-value{font:700 29px Manrope,sans-serif;letter-spacing:-1px;margin-top:10px;color:#20294a}.metric-value small{font:500 11px 'DM Sans',sans-serif;letter-spacing:0;color:#9ba3b8}.metric-foot{font-size:9px;color:#9aa3ba;margin-top:4px}.metric-bar{height:4px;background:#f0f0fb;border-radius:4px;margin-top:14px;overflow:hidden}.metric-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffc77c,#f0a9a0)}.wind-compass{display:flex;align-items:center;gap:8px;position:absolute;right:14px;bottom:12px;color:#8b94ae;font-size:9px}.compass-ring{width:28px;height:28px;border:1px solid #e7edf4;border-radius:50%;display:grid;place-items:center;color:#6b77b8;font-size:16px}.humidity-dots{display:flex;gap:3px;margin-top:14px}.humidity-dots i{height:4px;flex:1;background:#e4f5f1;border-radius:3px}.humidity-dots i:nth-child(-n+7){background:#68c7b5}.uv-scale{display:flex;gap:3px;margin-top:14px}.uv-scale i{height:4px;flex:1;border-radius:3px;background:#edf0f6}.uv-scale i:nth-child(-n+4){background:linear-gradient(90deg,#ffd27c,#f4a28d)}.lower-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:14px;margin-bottom:25px}.panel{background:#fff;border:1px solid #edf0f7;border-radius:17px;padding:21px 20px;box-shadow:0 4px 13px #26335c04;min-width:0}.panel-heading{align-items:center;margin-bottom:22px}.panel-heading .eyebrow{margin-bottom:7px}.panel-heading h3{font-size:16px}.panel-tag{padding:6px 9px;border-radius:7px;background:#f7f7fc}.hourly-list{display:flex;justify-content:space-between;gap:5px;overflow-x:auto;padding-bottom:2px}.hour-item{min-width:49px;display:flex;align-items:center;flex-direction:column;gap:11px;padding:11px 5px;border-radius:12px;color:#8d96ae}.hour-item.active{background:#f1f0ff;color:#645be0}.hour-time{font-size:9px;white-space:nowrap}.hour-icon{font-size:19px;height:22px}.hour-temp{font:700 13px Manrope,sans-serif;color:#27304e}.hour-item.active .hour-temp{color:#655ce2}.sun-symbol{font-size:24px;color:#f1b85e}.sun-times{display:flex;justify-content:space-between;gap:10px}.sun-times>div{display:flex;align-items:center;gap:10px}.sun-time-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-size:19px}.sunrise{background:#fff4df;color:#e6a84b}.sunset{background:#f1edff;color:#8774e8}.sun-times small{display:block;font-size:9px;color:#9aa3ba;margin-bottom:5px}.sun-times strong{font:700 14px Manrope,sans-serif;color:#27304e}.sun-path{height:89px;position:relative;margin-top:14px;overflow:hidden}.sun-path-line{position:absolute;width:72%;height:75px;border:1.5px dashed #f0c980;border-bottom:0;border-radius:90px 90px 0 0;left:14%;top:5px}.sun-path-sun{position:absolute;left:47%;top:1px;font-size:20px;color:#f3b84e;text-shadow:0 0 15px #ffd78b99}.sun-path-horizon{position:absolute;bottom:12px;left:0;right:0;border-bottom:1px solid #e9edf5}.sun-path-labels{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;color:#a2abc0;font-size:8px}.daylight-note{display:flex;align-items:center;gap:8px;border-radius:9px;background:#fffaf0;padding:10px 11px;color:#8c91a5;font-size:10px}.daylight-note>span:first-child{color:#e9b34f;font-size:17px}.daylight-note strong{color:#665a3e}.forecast-panel{margin-bottom:23px}.week-list{display:flex;flex-direction:column}.week-row{display:grid;grid-template-columns:1.1fr 1fr 1.5fr 1fr;align-items:center;gap:10px;padding:12px 7px;border-top:1px solid #f0f2f7;font-size:11px}.week-row:first-child{border-top:0}.week-day{font-weight:600;color:#414b6a}.week-day small{font-weight:400;color:#a1a9bd;margin-left:6px}.week-condition{display:flex;align-items:center;gap:9px;color:#8992ab}.week-condition span{font-size:18px}.week-rain{font-size:10px;color:#72b7d0}.week-temps{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-weight:700;color:#3d4764}.week-temps span:last-child{font-weight:500;color:#a2aabd}.temp-track{height:4px;width:50px;background:#f0f1f7;border-radius:5px;overflow:hidden}.temp-track i{display:block;height:100%;background:linear-gradient(90deg,#9a9aff,#f5c47d);border-radius:5px}.app-footer{display:flex;justify-content:space-between;gap:15px;color:#a5adc0;font-size:9px;padding:4px 3px 10px}.app-footer>span:first-child{font:800 12px Manrope,sans-serif;color:#4e5877}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#192144;color:white;padding:12px 18px;border-radius:12px;font-size:12px;box-shadow:0 10px 30px #101a3a33;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.loading{opacity:.55;pointer-events:none}
@media(max-width:1050px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding-left:14px;padding-right:14px}.main-content{padding-left:27px;padding-right:27px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{min-height:145px}.hero-art{left:40%}.hero-card{min-height:286px}.lower-grid{grid-template-columns:1fr}.sun-panel{min-height:250px}.sun-path{max-width:480px;margin-left:auto;margin-right:auto;width:90%}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:static;height:auto;min-height:0;padding:16px 18px;border-right:0;border-bottom:1px solid #edf0f7;display:block}.brand{margin:0;font-size:22px}.brand-mark{width:30px;height:30px}.sidebar .side-label,.sidebar .nav-item,.sidebar .side-divider,.sidebar .place-link,.sidebar-bottom{display:none}.main-content{padding:21px 16px}.topbar{margin-bottom:28px;align-items:flex-start}.breadcrumb{padding-top:12px}.top-actions{gap:6px}.search-wrap{width:min(44vw,210px);height:39px;padding-left:9px}.search-wrap input{font-size:11px}.search-wrap button{display:none}.unit-toggle{height:39px}.unit-toggle span{padding:7px}.welcome-row{align-items:flex-start;flex-direction:column;margin-bottom:19px}.welcome-row h1{font-size:31px}.location-btn{align-self:flex-start}.hero-card{padding:23px 21px 0;min-height:276px;border-radius:18px}.hero-card h2{font-size:19px}.temperature-line>span:first-child{font-size:58px}.hero-art{left:34%;opacity:.83}.sun-disc{width:67px;height:67px;right:14%;top:42px}.cloud-front{right:16%;top:147px;transform:scale(.8)}.cloud-back{right:-5%;top:107px;transform:scale(.65)}.hero-footer{left:21px;right:21px}.hero-footer>span:first-child{max-width:65%}.updated{font-size:8px}.section-note{display:none}.metrics-grid{gap:9px}.metric-card{padding:14px 12px;min-height:142px}.metric-value{font-size:26px}.metric-foot{font-size:8px}.lower-grid{gap:10px}.panel{padding:17px 14px}.hourly-list{justify-content:flex-start;gap:7px}.hour-item{min-width:50px}.sun-times strong{font-size:12px}.week-row{grid-template-columns:.85fr 1.1fr 1fr;gap:7px;padding:12px 2px}.week-rain{display:none}.week-condition{gap:5px;font-size:10px}.week-condition span{font-size:17px}.week-temps{gap:6px;font-size:10px}.temp-track{width:30px}.week-day{font-size:10px}.week-day small{display:none}.app-footer{flex-direction:column;gap:7px}.panel-heading h3{font-size:15px}}
@media(max-width:390px){.main-content{padding-left:12px;padding-right:12px}.search-wrap{width:150px}.hero-art{left:29%;opacity:.65}.metric-card{padding:12px 10px}.metric-top{font-size:10px}.metric-icon{width:25px;height:25px}.wind-compass{right:8px}.week-condition{font-size:9px}.week-temps{gap:4px}.temp-track{width:22px}}

.sidebar-foot strong{font-weight:700;color:#68718e}
.app-footer strong{font-weight:700;color:#69728f}