:root {
  --bg: oklch(0.972 0.006 255);
  --panel: oklch(1 0 0);
  --panel-2: oklch(0.945 0.008 255);
  --ink: oklch(0.24 0.03 258);
  --ink-soft: oklch(0.44 0.025 258);
  --line: oklch(0.88 0.01 258);
  --action: oklch(0.44 0.14 258);
  --action-ink: oklch(0.99 0 0);
  --lit: oklch(0.87 0.135 82);
  --lit-deep: oklch(0.7 0.16 70);
  --lit-ink: oklch(0.26 0.05 60);
  --danger: oklch(0.5 0.19 27);
  --ok: oklch(0.48 0.12 150);
  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10;
  --z-toast: 30;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}
h1, h2 { text-wrap: balance; margin: 0; line-height: 1.15; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 650; }
[hidden] { display: none !important; }

.btn {
  font: inherit; font-weight: 600;
  min-height: 48px; padding: 0 1.1rem;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-primary { background: var(--action); color: var(--action-ink); }
.btn-primary:hover { background: oklch(0.39 0.14 258); }
.btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--panel-2); }
.btn-quiet { background: transparent; color: var(--action); min-height: 40px; padding: 0 0.6rem; }
.btn-quiet:hover { background: var(--panel-2); }
.btn-danger { background: var(--danger); color: var(--action-ink); }
.btn-wide { width: 100%; }
:focus-visible { outline: 3px solid oklch(0.62 0.15 258); outline-offset: 2px; }

input, select {
  font: inherit; color: var(--ink);
  width: 100%; min-height: 48px; padding: 0 0.9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
label { font-weight: 600; }
.hint { color: var(--ink-soft); font-size: 0.92rem; margin: 0.6rem 0 0; }
.error { color: var(--danger); font-weight: 600; min-height: 1.4em; margin: 0.75rem 0 0; }
.error:empty { min-height: 0; margin: 0; }

.offline {
  position: sticky; top: 0; z-index: var(--z-toast);
  background: var(--ink); color: var(--panel);
  padding: 0.6rem 1rem; text-align: center; font-size: 0.92rem;
}

/* ---- auth ---- */
.auth {
  max-width: 26rem; margin: 0 auto;
  padding: max(3rem, env(safe-area-inset-top)) 1.25rem 2rem;
}
.auth-mark img { border-radius: 20px; display: block; }
.auth h1 { margin-top: 1.25rem; font-size: 2.25rem; }
.lede { color: var(--ink-soft); font-size: 1.08rem; margin: 0.5rem 0 2rem; max-width: 32ch; }
.auth-block { margin-top: 1.5rem; }
.auth-block h2 { margin-bottom: 0.9rem; }
#enroll { border-top: 1px solid var(--line); padding-top: 1.5rem; }
#enroll-form { display: grid; gap: 0.6rem; }
#enroll-form .btn { margin-top: 0.4rem; }

/* ---- app chrome ---- */
.app { max-width: 60rem; margin: 0 auto; padding: 0 1rem calc(6rem + env(safe-area-inset-bottom)); }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1.25rem, env(safe-area-inset-top)) 0.25rem 1rem;
}
.who { display: flex; align-items: center; gap: 0.25rem; min-width: 0; color: var(--ink-soft); font-size: 0.95rem; }
#who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn { white-space: nowrap; }
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: flex; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line);
}
.tab {
  flex: 0 1 12rem; min-height: 48px;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.tab[aria-current="page"] { background: var(--panel-2); color: var(--ink); }

/* ---- device tiles ---- */
.tiles { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.tile {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.tile.is-on {
  background: var(--lit); border-color: var(--lit-deep);
  box-shadow: 0 10px 30px -14px oklch(0.75 0.16 75 / 0.9);
  color: var(--lit-ink);
}
.tile.skeleton { min-height: 6.5rem; background: var(--panel-2); border-color: transparent; }
.tile-toggle {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 6.5rem; padding: 1.15rem 1.25rem;
  border-radius: var(--radius);
}
.tile-toggle:focus-visible { outline: 3px solid oklch(0.62 0.15 258); outline-offset: 2px; }
.tile-toggle:disabled { cursor: default; }
.tile-text { display: grid; gap: 0.2rem; }
.tile-name { font-size: 1.2rem; font-weight: 650; }
.tile-state { font-size: 0.98rem; color: var(--ink-soft); }
.tile.is-on .tile-state { color: var(--lit-ink); }
.tile.is-offline .tile-state { color: var(--danger); }
.tile.is-busy .tile-toggle { cursor: progress; }

.switch {
  flex: none; position: relative; width: 4rem; height: 2.3rem;
  border-radius: 999px; background: oklch(0.82 0.012 258);
  transition: background-color 200ms var(--ease);
}
.knob {
  position: absolute; top: 0.25rem; left: 0.25rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--panel); box-shadow: 0 1px 3px oklch(0.2 0.02 258 / 0.3);
  transition: transform 200ms var(--ease);
}
.tile.is-on .switch { background: var(--lit-ink); }
.tile.is-on .knob { transform: translateX(1.7rem); background: var(--lit); }
.tile.is-offline .switch { opacity: 0.4; }
.tile.is-busy .knob { animation: pulse 900ms ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.45; } }

.tile-edit {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: 0.6rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color 180ms var(--ease);
}
.tile-edit:hover { background: oklch(0.2 0.02 258 / 0.07); }
.tile.is-on .tile-edit { color: var(--lit-ink); }
.tile.is-editing .tile-toggle, .tile.is-editing .tile-edit { display: none; }
.tile-rename { grid-column: 1 / -1; display: grid; gap: 0.6rem; padding: 1.15rem 1.25rem; }
.tile-rename label { display: grid; gap: 0.4rem; }
.tile.is-editing.is-on { color: var(--lit-ink); }
.bulb-controls { grid-column: 1 / -1; display: grid; gap: 0.9rem; padding: 0 1.25rem 1.2rem; }
.bulb-controls label { display: grid; gap: 0.35rem; font-size: 0.95rem; }
.bulb-controls output { font-weight: 500; color: inherit; opacity: 0.85; }
input[type="range"] { min-height: 32px; padding: 0; border: 0; background: transparent; accent-color: var(--lit-ink); }
input.warmth {
  appearance: none; height: 10px; min-height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.8 0.13 65), oklch(0.96 0.01 90), oklch(0.85 0.06 240));
}
input.warmth::-webkit-slider-thumb {
  appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--lit-ink);
}
input.warmth::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--panel); border: 2px solid var(--lit-ink); }

.empty { color: var(--ink-soft); padding: 1rem 0.25rem; max-width: 40ch; }

/* ---- schedules ---- */
#add-schedule { margin-bottom: 1rem; }
.schedule-form {
  display: grid; gap: 0.6rem; max-width: 30rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.schedule-form fieldset { border: 0; padding: 0; margin: 0.4rem 0 0; min-width: 0; }
.schedule-form legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segmented legend { width: 100%; }
.segmented label, .day-chips label { position: relative; }
.segmented input, .day-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span, .day-chips span {
  display: grid; place-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 999px; font-weight: 600; background: var(--panel);
}
.day-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.day-chips span { min-width: 44px; padding: 0 0.5rem; }
.segmented input:checked + span, .day-chips input:checked + span { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.segmented input:focus-visible + span, .day-chips input:focus-visible + span { outline: 3px solid oklch(0.62 0.15 258); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; margin-top: 0.4rem; }
.check input { width: 22px; min-height: 22px; accent-color: var(--action); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }

.schedule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.schedule {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem;
}
.schedule.is-disabled { opacity: 0.65; }
.schedule-time { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; grid-row: span 2; }
.schedule-what { font-weight: 650; }
.schedule-days { color: var(--ink-soft); font-size: 0.95rem; }
.schedule-run { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.3rem; }
.schedule-run.ok { color: var(--ok); }
.schedule-run.fail { color: var(--danger); }
.schedule-next { grid-column: 1 / -1; font-size: 0.95rem; font-weight: 600; margin: 0.4rem 0 0; }
.schedule-actions { grid-column: 1 / -1; display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }

@media (min-width: 40rem) {
  .app { padding-inline: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}