:root{
  --bg-1:#0b1f3a;
  --bg-2:#123056;
  --card-bg:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.12);
  --text-1:#f2f6fb;
  --text-muted:#9fb3cc;
  --accent:#3fb0ff;
  --accent-2:#37e0c4;
  --warn:#ffb020;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,0.25);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2) 60%,#0a1830);
  color:var(--text-1);
}

a{color:var(--accent);}

.muted{color:var(--text-muted);}
.small{font-size:0.82rem;}

.app{display:flex;flex-direction:column;min-height:100vh;}

.topbar{
  display:flex;align-items:center;gap:20px;
  padding:14px 22px;
  background:rgba(5,15,30,0.55);
  border-bottom:1px solid var(--card-border);
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(6px);
  flex-wrap:wrap;
}
.brand{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.brand span{letter-spacing:0.2px;}

.search-wrap{position:relative;flex:1;min-width:240px;max-width:480px;display:flex;gap:8px;}
#searchInput{
  flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--card-border);
  background:rgba(255,255,255,0.08);color:var(--text-1);font-size:0.95rem;
}
#searchInput::placeholder{color:var(--text-muted);}
#searchInput:focus{outline:2px solid var(--accent);outline-offset:1px;}

#geoBtn, .icon-btn{
  background:rgba(255,255,255,0.08);border:1px solid var(--card-border);
  color:var(--text-1);border-radius:10px;padding:9px 12px;cursor:pointer;font-size:1rem;
  transition:background .15s ease;
}
#geoBtn:hover, .icon-btn:hover{background:rgba(255,255,255,0.16);}

.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#12233f;border:1px solid var(--card-border);border-radius:10px;
  box-shadow:var(--shadow);max-height:320px;overflow-y:auto;z-index:30;
}
.search-results .result-item{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:0.92rem;
}
.search-results .result-item:last-child{border-bottom:none;}
.search-results .result-item:hover, .search-results .result-item.active{background:rgba(63,176,255,0.15);}
.search-results .result-sub{color:var(--text-muted);font-size:0.8rem;}
.search-results .empty{padding:12px 14px;color:var(--text-muted);font-size:0.88rem;}

.layout{display:flex;flex:1;gap:20px;padding:20px 22px;max-width:1280px;margin:0 auto;width:100%;}

.sidebar{width:250px;flex-shrink:0;}
.sidebar-section{margin-bottom:22px;}
.sidebar-section h3{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:0 0 8px;}
.loc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.loc-list li{padding:0;}
.loc-list button{
  width:100%;text-align:left;background:var(--card-bg);border:1px solid transparent;
  color:var(--text-1);padding:8px 10px;border-radius:9px;cursor:pointer;font-size:0.88rem;
}
.loc-list button:hover{border-color:var(--card-border);background:rgba(255,255,255,0.1);}
.loc-list .muted{padding:6px 2px;font-size:0.85rem;}
.attribution{font-size:0.78rem;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;}

.error-banner{
  background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.4);
  color:#ffd7d7;padding:10px 14px;border-radius:10px;font-size:0.9rem;
}

.location-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.location-header h1{margin:0;font-size:1.6rem;}
.location-header p{margin:4px 0 0;}
.location-actions{display:flex;align-items:center;gap:10px;}
#favBtn.active{color:var(--warn);border-color:var(--warn);}

.current-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
}
.current-main{display:flex;align-items:center;gap:16px;}
.current-icon{font-size:3.4rem;line-height:1;}
.current-temp{font-size:3rem;font-weight:700;}
.current-cond{color:var(--text-muted);margin-top:2px;}
.current-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;
}
.current-stat{background:rgba(0,0,0,0.15);border-radius:10px;padding:10px 12px;}
.current-stat .label{font-size:0.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}
.current-stat .value{font-size:1.05rem;font-weight:600;margin-top:2px;}

.panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);}
.panel h2{margin:0 0 12px;font-size:1.05rem;}

.hourly-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;}
.hour-card{
  flex:0 0 auto;width:84px;text-align:center;background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);border-radius:10px;padding:10px 6px;
}
.hour-card .time{font-size:0.78rem;color:var(--text-muted);}
.hour-card .icon{font-size:1.5rem;margin:6px 0;}
.hour-card .temp{font-weight:600;}
.hour-card .precip{font-size:0.74rem;color:var(--accent);margin-top:2px;}

.daily-list{display:flex;flex-direction:column;gap:6px;}
.day-row{
  display:grid;grid-template-columns:90px 32px 1fr auto;gap:12px;align-items:center;
  padding:8px 10px;border-radius:9px;background:rgba(255,255,255,0.04);
}
.day-row .icon{font-size:1.3rem;}
.day-row .bar-wrap{display:flex;align-items:center;gap:8px;}
.day-row .range{color:var(--text-muted);font-size:0.85rem;white-space:nowrap;}
.day-row .precip{font-size:0.8rem;color:var(--accent);min-width:44px;text-align:right;}

.marine-panel .no-data{color:var(--text-muted);padding:8px 2px;}
.marine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:16px;}
.marine-stat{background:rgba(0,0,0,0.15);border-radius:10px;padding:10px 12px;}
.marine-stat .label{font-size:0.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}
.marine-stat .value{font-size:1.15rem;font-weight:700;margin-top:2px;color:var(--accent-2);}
.chart-wrap{height:220px;position:relative;}

.footer{
  text-align:center;padding:14px;color:var(--text-muted);font-size:0.8rem;
  border-top:1px solid var(--card-border);
}

@media (max-width: 860px){
  .layout{flex-direction:column;padding:14px;}
  .sidebar{width:100%;}
  .current-card{grid-template-columns:1fr;}
}