*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg:           #080c14;
  --bg2:          #0d1420;
  --card:         #111827;
  --card2:        #1a2438;
  --input-bg:     #0a1020;
  --accent:       #00c2e0;
  --accent-b:     #00e5ff;
  --accent-dim:   rgba(0,194,224,.12);
  --accent-brd:   rgba(0,194,224,.28);
  --glow-s:       0 0 14px rgba(0,194,224,.28);
  --glow-m:       0 0 28px rgba(0,194,224,.38), 0 0 70px rgba(0,194,224,.12);
  --glow-l:       0 0 50px rgba(0,194,224,.55), 0 0 110px rgba(0,194,224,.2);
  --txt:          #e8edf5;
  --txt2:         #8b9ab2;
  --txt3:         #4a5870;
  --brd:          rgba(255,255,255,.06);
  --brd2:         rgba(255,255,255,.11);
  --ok:           #10d97a;
  --err:          #ff4d6d;
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  22px;
  --r-xl: 28px;
  --r-f:  100px;
  --shadow: 0 4px 28px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35);
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Ambient glow in top-left corner */
body::before {
  content: '';
  position: fixed;
  top: -180px; left: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(0,194,224,.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── App shell ─────────────────────────────────────── */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ── Header ───────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--safe-t)) 18px 14px;
  background: rgba(8,12,20,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--brd);
}

.header-left { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 42px; height: 42px;
  border-radius: var(--r-m);
  background: var(--accent-dim);
  border: 1px solid var(--accent-brd);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.app-title  { font-size: 17px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.app-sub    { font-size: 11px; color: var(--txt2); margin-top: 1px; }

/* Connection badge */
.conn-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-f);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--brd);
  cursor: pointer;
  transition: background .2s;
  user-select: none;
}
.conn-badge:active { background: rgba(255,255,255,.08); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--txt3);
  transition: background .3s, box-shadow .3s;
  flex-shrink: 0;
}
.dot.on  { background: var(--ok);  box-shadow: 0 0 8px rgba(16,217,122,.6); animation: blink 2.5s infinite; }
.dot.off { background: var(--err); box-shadow: 0 0 8px rgba(255,77,109,.6); }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.55} }

.conn-text { font-size: 11px; color: var(--txt2); font-weight: 500; white-space: nowrap; }

/* ── Main scroll area ─────────────────────────────── */
.main {
  flex: 1;
  padding: 14px 14px calc(20px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* ── Generic card ─────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 18px;
  border: 1px solid var(--brd);
  box-shadow: var(--shadow);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Status card ──────────────────────────────────── */
.status-card {
  background: linear-gradient(135deg, #111827 0%, #192232 100%);
  padding: 20px 22px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }

.stat-lbl { font-size: 10px; font-weight: 600; color: var(--txt2); letter-spacing: .5px; text-transform: uppercase; }

.stat-val {
  font-size: 20px; font-weight: 800;
  color: var(--txt);
  letter-spacing: -.6px;
  transition: color .3s;
}
.stat-val.accent { color: var(--accent); }

.stat-divider { width: 1px; height: 38px; background: var(--brd); flex-shrink: 0; }

/* ── Power card ───────────────────────────────────── */
.power-card {
  background: linear-gradient(145deg, #0f1d30 0%, #111827 100%);
  border-color: rgba(0,194,224,.1);
}

.power-row { display: flex; align-items: center; gap: 22px; }

.power-btn {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--txt2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
  flex-shrink: 0;
}
.power-btn svg { transition: all .3s; }
.power-btn:active { transform: scale(.92); }
.power-btn.is-on {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: var(--glow-m);
}
/* pulse ring */
.power-btn.is-on::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,194,224,.22);
  animation: ring 2.5s ease-in-out infinite;
}
@keyframes ring { 0%,100%{transform:scale(1);opacity:1} 60%{transform:scale(1.15);opacity:0} }

.power-info { display: flex; flex-direction: column; gap: 5px; }

.power-main {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.5px;
  transition: color .3s;
}
.power-main.is-on { color: var(--accent-b); }

.power-sub { font-size: 13px; color: var(--txt2); line-height: 1.3; }

/* ── Mode grid ────────────────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mode-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  padding: 14px 6px 12px;
  border-radius: var(--r-l);
  border: 1px solid var(--brd);
  background: rgba(255,255,255,.03);
  color: var(--txt2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.mode-btn:active { transform: scale(.94); }
.mode-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent-brd);
  color: var(--accent);
  box-shadow: var(--glow-s);
}
.mode-btn.disabled { opacity: .35; pointer-events: none; }

.mode-icon { font-size: 24px; line-height: 1; }
.mode-lbl  { font-size: 10px; font-weight: 700; letter-spacing: .2px; }

/* ── Temperature ──────────────────────────────────── */
.temp-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.temp-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid var(--brd);
  background: rgba(255,255,255,.04);
  color: var(--txt);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.temp-btn:hover  { border-color: var(--brd2); background: rgba(255,255,255,.07); }
.temp-btn:active { transform: scale(.9); background: var(--accent-dim); border-color: var(--accent-brd); color: var(--accent); }
.temp-btn.held   { background: var(--accent-dim); border-color: var(--accent-brd); color: var(--accent); box-shadow: var(--glow-s); }

.temp-display {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

.temp-num {
  display: flex; align-items: flex-start;
  line-height: 1;
}
.temp-digits {
  font-size: 72px; font-weight: 900;
  color: var(--accent-b);
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  transition: transform .15s var(--spring), color .2s;
  cursor: pointer;
}
.temp-digits:active { opacity: .7; }
.temp-digits.bump { transform: scale(1.12); }
.temp-edit {
  width: 2.6ch; font-size: 72px; font-weight: 900;
  color: var(--accent-b); background: transparent;
  border: none; border-bottom: 2px solid var(--accent);
  letter-spacing: -4px; font-variant-numeric: tabular-nums;
  outline: none; text-align: right; padding: 0;
  font-family: inherit;
}

.temp-deg { font-size: 28px; font-weight: 700; color: var(--accent); margin-top: 10px; }
.temp-hint { font-size: 11px; color: var(--txt3); margin-top: 6px; }

/* ── Fan grid ─────────────────────────────────────── */
.fan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fan-btn {
  padding: 12px 4px;
  border-radius: var(--r-m);
  border: 1px solid var(--brd);
  background: rgba(255,255,255,.03);
  color: var(--txt2);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: center;
}
.fan-btn:active { transform: scale(.94); }
.fan-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent-brd);
  color: var(--accent);
  box-shadow: var(--glow-s);
}

/* ── Timer card ───────────────────────────────────── */
.timer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.timer-head .section-label { margin-bottom: 0; }

.timer-live {
  display: none;
  align-items: center;
  gap: 10px;
}
.timer-live.visible { display: flex; }

.timer-time {
  font-size: 20px; font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

.timer-cancel {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,77,109,.35);
  background: rgba(255,77,109,.1);
  color: var(--err);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.timer-cancel:hover { background: rgba(255,77,109,.22); }

.presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.preset-btn {
  padding: 11px 3px;
  border-radius: var(--r-m);
  border: 1px solid var(--brd);
  background: rgba(255,255,255,.03);
  color: var(--txt2);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: center;
}
.preset-btn:hover  { border-color: var(--brd2); color: var(--txt); }
.preset-btn:active { transform: scale(.93); background: var(--accent-dim); border-color: var(--accent-brd); color: var(--accent); }
.preset-btn.active { background: var(--accent-dim); border-color: var(--accent-brd); color: var(--accent); box-shadow: var(--glow-s); }

.custom-row { display: flex; gap: 8px; }

.custom-input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--brd);
  background: var(--input-bg);
  color: var(--txt);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.custom-input::placeholder { color: var(--txt3); }
.custom-input:focus {
  border-color: var(--accent-brd);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
input[type=number] { -moz-appearance:textfield; }

.custom-go {
  height: 46px;
  padding: 0 18px;
  border-radius: var(--r-m);
  border: 1px solid var(--accent-brd);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
  font-family: inherit;
}
.custom-go:active { background: rgba(0,194,224,.25); transform: scale(.97); }

/* ── Toast ────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(22px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 22px;
  border-radius: var(--r-f);
  background: #1c2a3e;
  color: var(--txt);
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 36px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
  z-index: 200;
  opacity: 0;
  transition: all .3s var(--spring);
  white-space: nowrap;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { border-color: rgba(255,77,109,.3); background: #2a1520; }

/* ── Loading overlay on cards ─────────────────────── */
.app.busy .power-btn,
.app.busy .mode-btn,
.app.busy .temp-btn,
.app.busy .fan-btn,
.app.busy .preset-btn,
.app.busy .custom-go {
  pointer-events: none;
  opacity: .55;
}

/* ── Responsive — wider screens get 2-col cards ───── */
@media (min-width: 520px) {
  .main { padding: 16px 20px calc(24px + var(--safe-b)); }
}