:root{
  --bg:#0b0d10; --panel:#12161b; --panel-2:#171c22;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --txt:#eef2f5; --muted:#a2adb8; --muted-2:#6f7a86;
  --accent:#2dd4bf; --accent-ink:#06201d;
  --radius:16px; --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fa; --panel:#ffffff; --panel-2:#f1f4f6;
    --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.18);
    --txt:#0f172a; --muted:#52606d; --muted-2:#7b8794;
    --accent:#0f766e; --accent-ink:#ffffff;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:28px 20px 48px;display:flex;flex-direction:column;gap:18px}

.head{display:flex;align-items:center;gap:14px}
.mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--accent)}
.head-text h1{margin:0;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.02em}
.head-text p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.btn{margin-left:auto;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);
  background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer;flex:none;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}

.notice{border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:10px;
  padding:10px 14px;font-size:13px;color:var(--muted);background:var(--panel)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:16px 18px;
  display:flex;flex-direction:column;gap:12px}
.card--wide{grid-column:1/-1}
.card-head{display:flex;align-items:center;gap:10px}
.card-head h2{margin:0;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted);text-transform:none}
.tag{margin-left:auto;font-size:12px;color:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.dot.off{background:var(--muted-2);box-shadow:none}

.battery{display:flex;flex-direction:column;gap:10px}
.battery strong{font-size:34px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;
  transition:width .35s var(--ease),background .35s var(--ease)}
.bar span.charging{background:linear-gradient(90deg,var(--accent),#5eead4)}
@media (prefers-color-scheme: light){ .bar span.charging{background:linear-gradient(90deg,var(--accent),#14b8a6)} }

.rows{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;border-top:1px solid var(--line)}
.rows dt{font-size:12.5px;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line)}
.rows dd{margin:0;text-align:right;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rows dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.rows dt:last-of-type,.rows dd:last-of-type{border-bottom:none}

.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.tool{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line-2);background:transparent;color:var(--txt);font:inherit;font-size:13px;
  cursor:pointer;text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease)}
.tool:hover{border-color:var(--accent)}
.tool:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.tool-state{margin-left:auto;font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.tool.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tool.on .tool-state{color:var(--accent)}

.foot p{margin:0;font-size:12px;line-height:1.6;color:var(--muted-2);max-width:70ch}

@media (max-width:560px){
  .wrap{padding:20px 14px 40px}
  .head-text h1{font-size:19px}
  .battery strong{font-size:30px}
}