:root{
  --bg:#0b1220; --card:#111a2e; --card2:#1a2640; --line:#22304f;
  --txt:#eaf1ff; --dim:#8ba0c4;
  --teal:#2dd4bf; --cyan:#38bdf8; --amber:#fbbf24; --rose:#fb7185; --violet:#a78bfa;
  --green:#34d399; --red:#f87171; --lime:#a3e635;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);font-family:-apple-system,"PingFang SC","Microsoft YaHei",Roboto,sans-serif;min-height:100%}
body{max-width:520px;margin:0 auto;padding:0 14px 40px;background:radial-gradient(1200px 600px at 70% -10%,#14213a 0%,#0b1220 55%)}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 2px 12px}
.brand{display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(45,212,191,.5);animation:pl 2s infinite}
.brand h1{font-size:19px;font-weight:700;letter-spacing:.5px}
.brand .sub{font-size:11px;color:var(--dim);display:block;margin-top:1px}
.status{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);padding:6px 11px;border-radius:20px;font-size:12px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green)}
.pulse.off{background:var(--red);animation:none}
.pulse.on{background:var(--green);animation:pl 1.4s infinite}
@keyframes pl{70%{box-shadow:0 0 0 7px transparent}0%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}}

.hero{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px}
.dt{font-size:11px;color:var(--dim);margin-bottom:14px;font-family:ui-monospace,monospace}
.now{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{border-radius:14px;padding:13px 14px;background:var(--card2);border:1px solid var(--line);position:relative;overflow:hidden}
.card .ico{font-size:21px}
.card label{font-size:12px;color:var(--dim);display:block;margin:4px 0 2px}
.card .val{font-size:13px}
.card .val b{font-size:30px;font-weight:700;letter-spacing:.5px}
.card .unit{font-size:14px;color:var(--dim);margin-left:3px}
.trend{font-size:11px;margin-top:6px;min-height:15px;color:var(--dim)}
/* 四格颜色强调 */
.card.temp b{color:var(--amber)}
.card.hum b{color:var(--cyan)}
.card.uv b{color:var(--violet)}
.card.water b{color:var(--teal)}
.card.warn{border-color:var(--red)}
.card.warn.temp b{color:var(--red)}
.card.warn.water{background:linear-gradient(180deg,#3a1a2a,#1a2640)}
.card.warn.water b{color:var(--rose)}

.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--dim);background:var(--card2);border-radius:10px;padding:9px 12px}
.meta b{color:var(--txt)}
.okbadge{padding:2px 10px;border-radius:12px;font-size:11px;background:#123a2a;color:var(--green)}
.okbadge.danger{background:#3a1620;color:var(--rose)}

.chartwrap{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 8px;margin-top:16px}
.seg{display:flex;gap:8px;margin-bottom:6px}
.seg button,.range button,.recbtn{background:var(--card2);border:1px solid var(--line);color:var(--dim);border-radius:12px;padding:11px 6px;font-size:14px;font-weight:600;cursor:pointer;flex:1;transition:.15s;min-height:42px}
.seg button.on{color:var(--txt);background:#243357;border-color:#35487a}
.charthead{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 2px}
.chk{font-size:13px;font-weight:600;color:var(--txt)}
.range{display:flex;gap:8px;margin-top:8px}
.range button{flex:1 1 0;min-width:0;font-size:14px;font-weight:700;padding:10px 0;min-height:44px}
.range button.on{color:#cbf3ff;background:#0e2c46;border-color:#1d5c96}
canvas{width:100%;height:200px}
.axis{font-size:10px;color:var(--dim);text-align:center;padding:2px 0 4px}

.rec{margin-top:16px}
.recbtn{width:100%;text-align:center;flex:none}
.reclist{list-style:none;margin-top:10px;display:none}
.reclist.show{display:block}
.reclist li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:8px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;line-height:1.6}
.reclist .rd{color:var(--txt)}
.reclist .rv{color:var(--dim);font-family:ui-monospace,monospace}
footer{text-align:center;color:var(--dim);font-size:11px;margin-top:20px;display:flex;justify-content:center;gap:12px}

@media (max-width:380px){
  .card .val b{font-size:25px}
}