/* --- glassmorphism base ------------------------------------- */
:root {
  --bg-base: rgba(255, 255, 255, 0.15);
  --bg-blur: 10px;
  --border-radius: 20px;
  --shadow: 0 4px 30px rgba(0,0,0,0.1);
}

/* Theme overrides */
.theme1 { --bg-base: rgba(255,255,255,0.15); }
.theme2 { --bg-base: rgba(255,255,255,0.25); }
.theme3 { --bg-base: rgba(255,255,255,0.35); }
.theme4 { --bg-base: rgba(255,255,255,0.45); }
.theme5 { --bg-base: rgba(255,255,255,0.55); }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: linear-gradient(135deg,#4e54c8,#8f94fb);
  color: #fff;
  display:flex; justify-content:center; align-items:center;
  height:100vh;
}

#app{
  width:90%;
  max-width:400px;
  text-align:center;
}

/* Header */
header {
  background: var(--bg-base);
  backdrop-filter: blur(var(--bg-blur));
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding:1.5rem;
  margin-bottom:1rem;
}

#date { font-size:1.4rem; }
#time, #binaryTime { font-size:2rem; }

/* Weather */
section#weather {
  background: var(--bg-base);
  backdrop-filter: blur(var(--bg-blur));
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding:1.5rem;
  margin-bottom:1rem;
}

.current{
  display:flex; align-items:center; justify-content:center;
  gap:.8rem;
  font-size:2rem;
}
#icon{ width:48px; height:48px; }

.forecast{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.4rem;
  margin-top:1rem;
}

.day{
  background: var(--bg-base);
  backdrop-filter: blur(var(--bg-blur));
  border-radius:var(--border-radius);
  padding:.6rem;
  font-size:.9rem;
}

/* Theme selector */
footer {
  display:flex; justify-content:center; align-items:center;
}
select{ margin-left:.5rem; }