* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg1: #0b1020; --bg2: #131a33;
  --card: rgba(255, 255, 255, .055);
  --border: rgba(255, 255, 255, .09);
  --text: #e8ecf8; --dim: #8b93b5;
  --blue: #4ea1ff; --green: #2ee6a8; --amber: #ffb84d; --red: #ff6b6b;
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  min-height: 100vh;
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  padding: 24px;
}

.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(78, 161, 255, .18), transparent),
    radial-gradient(500px 300px at 90% 0%, rgba(46, 230, 168, .10), transparent);
}

header { display: flex; justify-content: space-between; align-items: baseline; max-width: 1100px; margin: 0 auto 20px; padding: 0 4px; }
header h1 { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.clock { text-align: right; }
.clock #clock-time { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clock #clock-date { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; max-width: 1100px; margin: 0 auto;
}
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: 14px;
}
.card.full { grid-column: 1 / -1; }

.card-head { display: flex; align-items: center; gap: 10px; }
.card-head .icon { font-size: 22px; }
.card-head h2 { font-size: 17px; font-weight: 600; flex: 1; }
.badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--dim); border: 1px solid var(--border);
}
.badge.on { background: rgba(46, 230, 168, .15); color: var(--green); border-color: rgba(46, 230, 168, .35); }
.badge.humid { color: #7eb3ff; }

/* 开关 */
.switches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sw {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  color: var(--dim); transition: all .2s; font-family: inherit;
}
.sw .sw-icon { font-size: 22px; filter: grayscale(1); opacity: .55; transition: all .2s; }
.sw .sw-name { font-size: 13px; }
.sw .sw-state { font-size: 12px; }
.sw:hover { background: rgba(255, 255, 255, .09); }
.sw.on {
  background: rgba(46, 230, 168, .12); border-color: rgba(46, 230, 168, .4); color: var(--green);
}
.sw.on .sw-icon { filter: none; opacity: 1; }
.sw.busy { opacity: .5; pointer-events: none; }

.auto-row { display: flex; gap: 10px; }
.mini-btn {
  flex: 1; padding: 9px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  color: var(--dim); font-size: 13px; font-family: inherit; transition: all .2s;
}
.mini-btn:hover { background: rgba(255, 255, 255, .1); color: var(--text); }

/* 空调 */
.ac-temp { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.ac-temp #ac-temp-val { font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-temp .unit { font-size: 20px; color: var(--dim); }
.ac-temp-ctl { display: flex; justify-content: center; gap: 14px; }
.round {
  width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--text);
  transition: all .2s; font-family: inherit;
}
.round:hover { background: rgba(255, 255, 255, .14); }
.round.on { background: rgba(78, 161, 255, .25); border-color: rgba(78, 161, 255, .5); color: #9ec7ff; }

.ac-modes, .ac-fan { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-modes button, .ac-fan button {
  flex: 1; min-width: 56px; padding: 8px 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border);
  color: var(--dim); font-size: 13px; font-family: inherit; transition: all .2s;
}
.ac-modes button:hover, .ac-fan button:hover { background: rgba(255, 255, 255, .1); }
.ac-modes button.on { background: rgba(78, 161, 255, .2); border-color: rgba(78, 161, 255, .5); color: #9ec7ff; }
.ac-fan button.on { background: rgba(255, 184, 77, .18); border-color: rgba(255, 184, 77, .45); color: var(--amber); }
.hint { font-size: 11px; color: var(--dim); text-align: center; }

/* 热水器 */
.heater-power { text-align: center; }
.heater-power span:first-child { font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.heater-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.heater-meta div {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 8px; text-align: center;
}
.heater-meta span { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.heater-meta b { font-size: 13px; font-weight: 600; }
.btn-badge { cursor: pointer; font-family: inherit; font-size: 13px; padding: 6px 16px; }
.btn-badge.on { background: rgba(46, 230, 168, .15); color: var(--green); border-color: rgba(46, 230, 168, .35); }
.btn-badge:not(.on) { background: rgba(255, 107, 107, .12); color: var(--red); border-color: rgba(255, 107, 107, .35); }

/* 电脑 */
.pc-status { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; font-size: 20px; font-weight: 600; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: #555; box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); transition: all .3s; }
.dot.on { background: var(--green); box-shadow: 0 0 12px rgba(46, 230, 168, .8); }

/* 图表 */
.chart-wrap { height: 260px; position: relative; }

@media (max-width: 680px) {
  body { padding: 14px; }
  .ac-temp #ac-temp-val { font-size: 42px; }
  .grid { grid-template-columns: 1fr; }
}