*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f1923;--card:#162230;--card2:#1a2a3a;--accent:#4fc3f7;--accent2:#81d4fa;--text:#e0e6ed;--text2:#8899aa;--green:#66bb6a;--orange:#ffa726;--red:#ef5350;--purple:#ab47bc;--border:#1e3347;--radius:16px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.container{max-width:900px;margin:0 auto;padding:16px}
header{text-align:center;padding:20px 0 10px}
header h1{font-size:1.4rem;font-weight:600;color:var(--accent)}
.search-box{position:relative;margin:16px auto;max-width:500px}
.search-box input{width:100%;padding:14px 20px 14px 44px;background:var(--card);border:1px solid var(--border);border-radius:50px;color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--accent)}
.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:var(--text2)}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-top:4px;z-index:100;overflow:hidden;display:none}
.search-results.active{display:block}
.search-results div{padding:12px 20px;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--border);transition:background .15s}
.search-results div:hover{background:var(--card2)}
.search-results div:last-child{border-bottom:none}
.location-name{text-align:center;font-size:1.1rem;color:var(--text2);margin-bottom:20px}
.location-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
.location-row .location-name{margin-bottom:0}
.unit-toggle{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:50px;overflow:hidden;cursor:pointer;flex-shrink:0}
.unit-toggle span{padding:5px 12px;font-size:.75rem;font-weight:600;color:var(--text2);transition:all .2s;user-select:none}
.unit-toggle span.active{background:var(--accent);color:var(--bg)}
.current{background:linear-gradient(135deg,#1a3a5c,#162230);border-radius:var(--radius);padding:28px;margin-bottom:20px;text-align:center;border:1px solid var(--border)}
.current .temp{font-size:4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.current .desc{font-size:1.15rem;color:var(--text2);margin:8px 0}
.current .details{display:flex;justify-content:center;gap:24px;margin-top:16px;flex-wrap:wrap}
.current .details span{font-size:.85rem;color:var(--text2)}
.current .details span b{color:var(--text);font-weight:500}
.sun-times{display:flex;justify-content:center;gap:24px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.sun-times span{font-size:.9rem;color:var(--text2)}
.section-title{font-size:1.1rem;font-weight:600;margin:24px 0 12px;color:var(--text);display:flex;align-items:center;gap:8px}
.section-title span{font-size:1.2rem}
.time-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.time-btn{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:8px 16px;border-radius:50px;font-size:.82rem;cursor:pointer;font-weight:500;transition:all .2s}
.time-btn:hover:not(:disabled){background:var(--card2);color:var(--text)}
.time-btn:disabled{opacity:.3;cursor:default}
.time-range{font-size:.85rem;color:var(--text2);font-weight:500}
.range-pills{display:flex;gap:4px}
.range-pill{padding:6px 14px;border-radius:50px;background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:.78rem;cursor:pointer;font-weight:500;transition:all .2s}
.range-pill.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.chart-card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:16px;border:1px solid var(--border)}
.chart-card h3{font-size:.85rem;color:var(--text2);margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.chart-card canvas{width:100%!important}
.forecast-cards{display:grid;gap:10px}
.forecast-card{background:var(--card);border-radius:var(--radius);padding:16px 20px;border:1px solid var(--border);display:flex;align-items:center;gap:16px}
.forecast-card .period-name{font-weight:600;min-width:110px;font-size:.9rem}
.forecast-card .period-temp{font-size:1.3rem;font-weight:700;min-width:55px;text-align:right}
.forecast-card .period-temp.hot{color:var(--orange)}
.forecast-card .period-temp.cold{color:var(--accent)}
.forecast-card .period-detail{font-size:.82rem;color:var(--text2);flex:1}
.loading{text-align:center;padding:60px 20px;color:var(--text2)}
.loading .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.error{text-align:center;padding:40px;color:var(--red);background:var(--card);border-radius:var(--radius);border:1px solid #3a1a1a}
.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 18px;border-radius:50px;background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:.82rem;cursor:pointer;white-space:nowrap;transition:all .2s;font-weight:500}
.tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.updated{text-align:center;font-size:.75rem;color:var(--text2);margin-top:20px;padding-bottom:20px}
@media(max-width:600px){
  .container{padding:10px}
  header{padding:12px 0 6px}
  header h1{font-size:1.2rem}
  .search-box{margin:10px auto}
  .search-box input{padding:11px 16px 11px 40px;font-size:.9rem}
  .current{padding:20px 16px;margin-bottom:14px}
  .current .temp{font-size:3rem}
  .current .details{gap:12px}
  .sun-times{gap:16px}
  .section-title{margin:16px 0 8px;font-size:1rem}
  .chart-card{padding:12px 10px;margin-bottom:12px;border-radius:12px}
  .tabs{gap:4px;margin-bottom:12px}
  .tab{padding:7px 14px;font-size:.78rem}
  .forecast-cards{gap:8px}
  .forecast-card{flex-wrap:wrap;gap:8px;padding:12px 14px;border-radius:12px}
  .forecast-card .period-name{min-width:auto}
  .location-name{font-size:1rem;margin-bottom:14px}
}