:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#EFF2F6;
  --ink:#1A1F2B; --muted:#59626F; --border:#E2E6EC; --border-strong:#CFD6DF;
  --accent:#2E5AAC; --accent-ink:#1E3E7C; --accent-soft:#E7EEFA;
  --good:#2E7D5B; --good-soft:#E0F0E7; --warn:#9A6707; --crit:#B4432E;
  --shadow:0 1px 2px rgba(20,30,50,.05),0 6px 20px rgba(20,30,50,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12151B; --surface:#1A1F28; --surface-2:#222835;
    --ink:#E6EAF0; --muted:#9AA4B2; --border:#2A3140; --border-strong:#3A4356;
    --accent:#6E9BE8; --accent-ink:#AEC6F0; --accent-soft:#1E2A42;
    --good:#5FBE8E; --good-soft:#123528; --warn:#D9A64A; --crit:#E27A63;
    --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px;line-height:1.6}
h1,h2{margin:0;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--muted);font-weight:400}
.error{color:var(--crit);font-size:14px}
.ok{color:var(--good);font-size:14px}
button{font-family:inherit;cursor:pointer;border:none;border-radius:8px;padding:9px 16px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600}
button:hover{filter:brightness(1.05)}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
button.ghost:hover{background:var(--surface-2)}
button.small{padding:5px 10px;font-size:13px}
input{font-family:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--border-strong);
  border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
input:focus{outline:2px solid var(--accent);outline-offset:1px}

.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand .dot{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6E9BE8, var(--accent))}

/* ログイン */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:32px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.login-card h1{font-size:22px;margin-top:4px}
.login-card .muted{margin:0 0 6px}

/* トップバー */
.topbar{display:flex;align-items:center;gap:20px;padding:12px 24px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs button{background:transparent;color:var(--muted);border:none;font-weight:600;padding:8px 14px;border-radius:8px}
.tabs button.active{background:var(--accent-soft);color:var(--accent-ink)}
#logout{margin-left:auto}

.content{max-width:1080px;margin:0 auto;padding:28px 24px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel-head h2{font-size:20px}
.tab-panel>.muted{margin:0 0 18px}

/* テーブル */
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill.on{background:var(--good-soft);color:var(--good)}
.pill.off{background:var(--surface-2);color:var(--muted)}
.pill.active{background:var(--good-soft);color:var(--good)}
.pill.idle{background:var(--accent-soft);color:var(--accent-ink)}
.pill.lock{background:var(--surface-2);color:var(--muted)}

/* 設定 */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.setting{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.setting label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.setting .key{font-family:ui-monospace,"Consolas",monospace;font-size:11px;color:var(--accent-ink);display:block;margin-top:6px}

/* ドロワー */
.drawer{position:fixed;inset:0;z-index:50}
.drawer-bg{position:absolute;inset:0;background:rgba(10,14,22,.4)}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(560px,100%);background:var(--bg);
  box-shadow:-8px 0 30px rgba(0,0,0,.2);padding:22px;overflow-y:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer-head button{font-size:20px;line-height:1;padding:4px 12px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:14px;margin-bottom:20px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-variant-numeric:tabular-nums;word-break:break-all}
.timeline{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px}
.seg:last-child{border-bottom:none}
.seg .dur{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}