:root {
  --bg: #0b0d12;
  --text: #eef1f5;
  --surface-solid: #171a21;
  --border: #2a2f3a;
  --overlay-rgb: 255,255,255;
  --dock-bg: rgba(0,0,0,0.55);
  --caption-bg: rgba(0,0,0,0.5);
}
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --text: #1a1d23;
  --surface-solid: #ffffff;
  --border: #d7dbe0;
  --overlay-rgb: 0,0,0;
  --dock-bg: rgba(255,255,255,0.8);
  --caption-bg: rgba(255,255,255,0.75);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
}

#app { position: relative; width: 100vw; height: 100vh; }

.view {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: 4vh 4vw 12vh 4vw;
  overflow-y: auto;
}
.view.active { display: flex; }

/* ---- Clock ---- */
#view-clock .clock-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
#clock-time { font-size: 16vw; font-weight: 300; letter-spacing: 0.02em; line-height: 1; }
#clock-date { font-size: 3.2vw; opacity: 0.7; margin-top: 1.5vh; }
.pill {
  margin-top: 3vh;
  padding: 1.2vh 3vw;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.08);
  font-size: 2.4vw;
}

/* ---- Common headings / lists ---- */
h1 { font-size: 4vw; font-weight: 500; margin-bottom: 3vh; }
.hint { opacity: 0.6; font-size: 2vw; margin: 1vh 0; }
.list { display: flex; flex-direction: column; gap: 1.2vh; margin-bottom: 2vh; }
.list-item {
  display: flex; align-items: center; gap: 2vw;
  background: rgba(var(--overlay-rgb), 0.06);
  border-radius: 14px;
  padding: 1.8vh 2vw;
  font-size: 2.4vw;
}
.list-item .grow { flex: 1; }
.list-item.disabled { opacity: 0.4; }
.list-item.done .grow { text-decoration: line-through; opacity: 0.5; }
.list-item button {
  background: rgba(var(--overlay-rgb), 0.1); color: var(--text); border: none;
  border-radius: 8px; padding: 1vh 1.4vw; font-size: 1.8vw;
}

/* ---- Forms ---- */
.row-form {
  display: flex; flex-wrap: wrap; gap: 1.4vw; align-items: center;
  background: rgba(var(--overlay-rgb), 0.04); padding: 2vh 2vw; border-radius: 14px;
}
.row-form input[type="text"],
.row-form input[type="time"],
.row-form input[type="datetime-local"] {
  flex: 1; min-width: 20vw;
  background: var(--surface-solid); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.4vh 1.4vw; font-size: 2vw;
}
.row-form button {
  background: #3d7bfd; color: #fff; border: none;
  border-radius: 8px; padding: 1.4vh 2vw; font-size: 2vw;
}
.days-picker { display: flex; flex-wrap: wrap; gap: 1.2vw; font-size: 1.8vw; }
.days-picker label {
  display: flex; align-items: center; gap: 0.4vw;
  background: rgba(var(--overlay-rgb), 0.06); padding: 0.8vh 1vw; border-radius: 8px;
}

/* ---- Settings ---- */
fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 2vh 2vw; margin-bottom: 2vh; }
legend { padding: 0 1vw; font-size: 2.2vw; opacity: 0.8; }
fieldset label { display: block; font-size: 2vw; margin: 1.4vh 0; }
fieldset select, fieldset input[type="number"], fieldset input[type="text"],
fieldset input[type="email"], fieldset input[type="password"] {
  display: block; margin-top: 0.6vh; width: 100%; max-width: 50vw;
  background: var(--surface-solid); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 1vh 1vw; font-size: 1.9vw;
}
#refresh-location, #preview-azan, #preview-alarm {
  background: #3d7bfd; color: #fff; border: none; border-radius: 8px;
  padding: 1.2vh 2vw; font-size: 1.9vw; margin-top: 1vh; margin-right: 1vw;
}
.error { color: #ff6b6b; }
.view-hidden { display: none; }

/* ---- Planner (embedded real Planner web app) ---- */
#view-planner { padding: 2vh 2vw 12vh 2vw; }
#planner-iframe { flex: 1; width: 100%; border: 0; border-radius: 12px; background: #fff; }

/* ---- Smart home tiles ---- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.tile {
  background: rgba(var(--overlay-rgb), 0.06); border-radius: 16px;
  padding: 3vh 1vw; text-align: center; font-size: 2.2vw;
}
.tile .icon { font-size: 5vw; display: block; margin-bottom: 1vh; }
.tile.on { background: #3d7bfd; color: #fff; }

/* ---- Art frame ---- */
#view-art { padding: 0; }
#art-image-wrap { position: relative; width: 100%; height: 100%; background: #000; }
#art-image {
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1.2s ease;
}
#art-image.loaded { opacity: 1; }
#art-caption {
  position: absolute; left: 3vw; bottom: 3vh;
  font-size: 1.8vw; background: rgba(0,0,0,0.5); color: #eef1f5;
  padding: 1vh 1.4vw; border-radius: 8px; max-width: 60vw;
}
#art-clock {
  position: absolute; right: 3vw; top: 3vh;
  font-size: 2.4vw; background: rgba(0,0,0,0.5); color: #eef1f5;
  padding: 0.8vh 1.4vw; border-radius: 8px;
}

/* ---- Dock ---- */
#dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 1vw;
  padding: 1.2vh 1vw; background: var(--dock-bg);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 20;
}
#dock.hidden { opacity: 0; transform: translateY(100%); pointer-events: none; }
#dock button {
  background: rgba(var(--overlay-rgb), 0.08); color: var(--text); border: none;
  border-radius: 10px; padding: 1.4vh 2vw; font-size: 1.8vw;
}
#dock button.active { background: #3d7bfd; color: #fff; }
.nav-icon { position: relative; display: inline-block; margin-right: 0.6vw; }
.badge-dot {
  position: absolute; top: -0.8vh; right: -0.6vw;
  background: #e0483f; color: #fff; border-radius: 999px;
  font-size: 1.3vw; font-weight: 700; line-height: 1;
  min-width: 2.2vw; height: 2.2vw; padding: 0.3vh;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---- Alarm banner (intentionally fixed alert colors regardless of theme) ---- */
.banner {
  position: fixed; left: 50%; top: 8vh; transform: translateX(-50%);
  background: #d94f4f; color: #fff; border-radius: 16px;
  padding: 2vh 3vw; display: flex; align-items: center; gap: 2vw;
  font-size: 2.6vw; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.banner.hidden { display: none; }
.banner button {
  background: rgba(255,255,255,0.2); color: #fff; border: none;
  border-radius: 8px; padding: 1vh 1.6vw; font-size: 2vw;
}