:root{
  --bg:#edf5ff;
  --card:#ffffff;
  --panel:#f8fbff;
  --text:#17314f;
  --muted:#657a93;
  --line:#d8e7f7;
  --blue:#1565c0;
  --blue2:#0d47a1;
  --green:#43a047;
  --yellow:#fbc02d;
  --orange:#fb8c00;
  --red:#e53935;
  --shadow:0 12px 32px rgba(21,101,192,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;color:var(--text);background:linear-gradient(135deg,#eef7ff,#f8fbff 55%,#eaf3ff)}
body{padding:18px 14px 74px}.app{width:min(980px,100%);margin:0 auto}.hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.logo{width:76px;height:76px;border-radius:22px;background:linear-gradient(145deg,#2494ff,#0d47a1);display:grid;place-items:center;color:#fff;font-size:44px;font-weight:800;box-shadow:0 10px 24px rgba(21,101,192,.25)}
h1{margin:0 0 4px;font-size:clamp(1.55rem,4.8vw,2.35rem);letter-spacing:.01em}.lead{margin:0;color:var(--muted);line-height:1.7}.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.status-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 7px 18px rgba(21,101,192,.07)}.label{font-size:.84rem;color:var(--muted)}.metric{font-size:1.9rem;font-weight:800;margin-top:4px}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.btn{appearance:none;border:0;border-radius:999px;background:var(--blue);color:#fff;padding:12px 18px;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 8px 18px rgba(21,101,192,.18)}.btn:hover{background:var(--blue2)}.btn.secondary{background:#ecf4ff;color:var(--blue);border:1px solid var(--line);box-shadow:none}.btn.danger{background:#e53935}.btn:disabled{opacity:.52;cursor:not-allowed}.main{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 8px 22px rgba(21,101,192,.08)}.panel h2{margin:0 0 12px;font-size:1.1rem}.device-list{display:grid;gap:12px}.device{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}.device-icon{width:52px;height:52px;border-radius:16px;background:#e7f1ff;display:grid;place-items:center;font-size:1.7rem}.device-name{font-weight:800}.device-meta{font-size:.86rem;color:var(--muted);margin-top:3px}.battery{min-width:116px;text-align:right;font-weight:900;font-size:1.65rem}.bar{height:10px;width:96px;background:#dfeaf6;border-radius:999px;overflow:hidden;margin:5px 0 0 auto}.bar span{display:block;height:100%;width:0%;background:var(--green);transition:width .25s}.low{color:var(--red)}.mid{color:var(--orange)}.ok{color:var(--green)}.notice{background:#fff8e1;border:1px solid #ffe08a;color:#6a4b00;border-radius:16px;padding:12px;line-height:1.7}.log{height:220px;overflow:auto;background:#0d1b2a;color:#d8e7f7;border-radius:16px;padding:12px;font-family:ui-monospace,Consolas,monospace;font-size:.86rem;white-space:pre-wrap}.settings{display:grid;gap:12px}.settings label{display:grid;gap:6px;color:var(--muted);font-size:.9rem}.settings input,.settings select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;color:var(--text);font-size:1rem}.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px;background:var(--panel)}footer{position:fixed;left:0;right:0;bottom:0;text-align:center;padding:9px 10px;background:#f5faff;border-top:1px solid #d8e7f7;color:#1565c0;font-size:.9rem}footer a{color:#1565c0;text-decoration:none;font-weight:700}.hidden{display:none!important}@media(max-width:780px){body{padding:10px 10px 72px}.hero{grid-template-columns:1fr;text-align:center}.logo{margin:0 auto}.status-row,.main{grid-template-columns:1fr}.device{grid-template-columns:auto 1fr}.battery{grid-column:1/-1;text-align:left}.bar{margin-left:0}.controls .btn{flex:1 1 160px}}
.compact-panel{margin:14px 0;padding:12px 14px;box-shadow:0 6px 16px rgba(21,101,192,.06)}.scan-options label{display:grid;gap:6px;color:var(--muted);font-size:.9rem}.scan-options select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;color:var(--text);font-size:1rem}.mini-note{margin:8px 0 0;color:var(--muted);font-size:.86rem;line-height:1.6}.unknown{color:#657a93}.tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#e7f1ff;color:#1565c0;font-size:.76rem;font-weight:700}.error-text{color:#e53935;font-weight:700}.ok-text{color:#43a047;font-weight:700}