*{box-sizing: border-box}
:root{
  --bg-1:#0cbb69;
  --bg-2:#110949;
  --bg-glass: rgba(0,0,0,.35);
  --text:#ffffff;
  --muted:#d6d6e7;
  --accent:#60e0a7;
  --danger:#ff6b6b;
  --warning:#ffd166;
  --success:#7ae582;
  --overlay-start: rgba(0,0,0,.2);
  --overlay-end: rgba(0,0,0,.5);
}
html,body{
  height:100%;
}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  background: linear-gradient(135deg,var(--bg-1),var(--bg-2));
  overflow-x:hidden;
  transition: background 400ms ease;
}

.bgVideo{
  position: fixed;
  inset: 0;
  z-index: 0;
}
#bgVideo{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: saturate(1.2) brightness(.7);
}
.video-overlay{position:absolute; inset:0; background: radial-gradient(ellipse at center, var(--overlay-start), var(--overlay-end)); transition: background 400ms ease}

.container{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Ensure hidden attribute truly hides elements (overrides component display rules) */
[hidden]{display:none !important}

.card{
  width: min(840px, 92vw);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;
}
.app-title{font-size: clamp(20px, 2.5vw, 28px); margin:0}

.header-actions{display:flex; align-items:center; gap:10px}
.unit-toggle{display:inline-flex; border:1px solid rgba(255,255,255,.25); border-radius: 999px; overflow:hidden}
.unit-btn{
  background: transparent; color: var(--text); border:0; padding:8px 14px; cursor:pointer; font-weight:600; opacity:.75
}
.unit-btn.active{background: rgba(255,255,255,.2); opacity:1}
.unit-btn:focus-visible{outline:2px solid var(--accent)}

.geo-btn{background: rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); height:36px; padding:0 12px; border-radius:10px; cursor:pointer}
.geo-btn:hover{background: rgba(255,255,255,.25)}

.search{display:flex; align-items:center; gap:10px; margin: 10px 0 14px}
.search input{
  flex:1; border:1px solid rgba(255,255,255,.25); outline:0; background: rgba(255,255,255,.9); color:#1a1a1a;
  padding: 12px 16px; height: 48px; border-radius: 12px; font-size: 16px
}
.search button{border:0; outline:0; background: #ffffff; border-radius: 12px; width: 48px; height:48px; cursor:pointer; display:grid; place-items:center}
.search button img{width:18px}
.search input::placeholder{color:#6b7280}
.search:has(input:focus) button{box-shadow: 0 0 0 3px rgba(96,224,167,.35)}

.status-bar{margin-bottom: 12px; font-size: 14px}
.status-bar[data-type="error"]{color: var(--danger)}
.status-bar[data-type="warning"]{color: var(--warning)}
.status-bar[data-type="success"]{color: var(--success)}

.weather{display:grid; gap: 10px}
.weather[data-loading="true"]{opacity:.5; pointer-events:none}
.hero{display:flex; align-items:center; gap:16px}
.weather-icon{width: 120px; height: 120px; object-fit: contain}
.temp-block h1.temp{font-size: clamp(44px, 7.5vw, 72px); margin:0; line-height:1}
.temp-block .feels{margin:4px 0 0; color: var(--muted)}
.weather .status{font-size: clamp(18px, 3vw, 26px); margin:0}
.weather .city{font-size: clamp(18px, 3vw, 22px); margin:0; color: var(--muted)}

.detail{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; margin-top: 16px}
.col{display:flex; align-items:center; gap:10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); padding:12px 14px; border-radius: 12px}
.col img{width:28px; height:28px}
.humidity,.wind{font-size: 20px; margin: 0}

.extra{margin-top: 16px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.extra-item{background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); padding:12px 14px; border-radius: 12px}
.extra-item .label{margin:0; color: var(--muted); font-size: 12px}
.extra-item .value{margin:2px 0 0; font-size: 16px}

.loading{display:grid; place-items:center; gap:8px; padding: 16px; color: var(--muted)}
.spinner{width: 24px; height: 24px; border-radius: 999px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin 1s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (min-width: 720px){
  .card{padding: 28px 32px}
  .hero{gap: 24px}
  .weather-icon{width: 160px; height:160px}
  .detail{grid-template-columns: repeat(2, minmax(0, 1fr))}
}