:root { --bg:#0d1117; --card:#161b22; --line:#30363d; --fg:#e6edf3; --mut:#8b949e; --pos:#3fb950; --neg:#f85149; --acc:#2ea043; --warn:#d29922; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%; }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; padding-top:max(14px,env(safe-area-inset-top)); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; }
.brand { font-weight:700; font-size:18px; }
.pill { font-size:11px; font-weight:600; background:#1f6feb33; color:#79c0ff; padding:2px 8px; border-radius:99px; vertical-align:middle; margin-left:4px; }
.out { color:var(--mut); text-decoration:none; font-size:14px; }
main { max-width:960px; margin:0 auto; padding:16px; display:grid; gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
h2 { margin:0 0 10px; font-size:15px; color:var(--mut); font-weight:600; }
.muted { color:var(--mut); } .small { font-size:13px; } a { color:#58a6ff; }
.power { display:flex; gap:18px; align-items:center; }
.btn-power { flex:none; width:104px; height:104px; border-radius:50%; border:0; font:700 22px system-ui; color:#fff; cursor:pointer; transition:transform .1s, box-shadow .2s; }
.btn-power:active { transform:scale(.96); }
.btn-power.off { background:#21262d; border:3px solid var(--line); color:var(--mut); }
.btn-power.on { background:var(--acc); box-shadow:0 0 0 6px #2ea04333, 0 0 32px #2ea04366; }
.btn-power.other { background:#21262d; border:3px solid var(--warn); color:var(--warn); font-size:15px; }
.btn-power:disabled { opacity:.6; cursor:default; }
.power-info { display:grid; gap:4px; min-width:0; }
.big { font-size:17px; font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat .lbl { color:var(--mut); font-size:13px; } .stat .val { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; } .stat .sub { color:var(--mut); font-size:12px; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.list { display:grid; gap:8px; }
.row { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-variant-numeric:tabular-nums; }
.row .t { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row .t a { color:inherit; text-decoration:none; }
.row .r { text-align:right; font-weight:600; } .row .m { color:var(--mut); font-size:12px; grid-column:1/-1; }
.empty { color:var(--mut); font-size:14px; padding:6px 0; }
.log { max-height:320px; overflow:auto; font:12.5px/1.5 ui-monospace,Consolas,monospace; display:grid; gap:3px; }
.log .e { color:var(--neg); } .log .tr { color:#79c0ff; } .log time { color:var(--mut); margin-right:6px; }
.foot-actions { margin-top:10px; }
.btn-ghost { background:none; border:1px solid var(--line); color:var(--mut); border-radius:8px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; }
@media (max-width:640px) {
  main { padding:12px; gap:12px; }
  .stats { grid-template-columns:repeat(2,1fr); gap:12px; }
  .btn-power { width:88px; height:88px; font-size:20px; }
  .power { gap:14px; }
}
.step { font-size:11px; font-weight:600; padding:1px 7px; border-radius:99px; margin-left:6px; vertical-align:middle; background:#21262d; color:var(--mut); }
.step.s2 { background:#9e6a0333; color:var(--warn); } .step.s3 { background:#2ea04333; color:var(--pos); }
.row.w3 { border-color:#2ea04366; }
#watching { max-height:460px; overflow:auto; }
