:root {
  --bg: #f3f4f1; --surface: #ffffff; --surface-2: #f8f9f7; --line: #dfe2dc; --line-strong: #c9cdc5;
  --text: #1b1f22; --muted: #5b646c; --faint: #8a9198;
  --accent: #0d6464; --accent-ink: #ffffff; --accent-soft: #e2efee;
  --ok: #1d7448; --ok-soft: #e3f1e8; --warn: #9a5b00; --warn-soft: #fbf0dc; --bad: #b3261e; --bad-soft: #fbe7e5; --unk: #5f6670; --unk-soft: #eceeef;
  --radius: 8px; --radius-sm: 5px; --shadow: 0 1px 2px rgba(20,24,28,.06), 0 4px 16px rgba(20,24,28,.05);
  --font: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121517; --surface: #1a1e21; --surface-2: #20252a; --line: #2c3237; --line-strong: #3a4148; --text: #e6e9eb; --muted: #a2abb3; --faint: #737c84; --accent: #4fb3ad; --accent-ink: #0b1414; --accent-soft: #1d3332; --ok: #5cc28a; --ok-soft: #173126; --warn: #e0a54a; --warn-soft: #33281a; --bad: #f07a70; --bad-soft: #3a1f1d; --unk: #9aa3ab; --unk-soft: #262b30; --shadow: none; }
}
:root[data-theme="dark"] { --bg: #121517; --surface: #1a1e21; --surface-2: #20252a; --line: #2c3237; --line-strong: #3a4148; --text: #e6e9eb; --muted: #a2abb3; --faint: #737c84; --accent: #4fb3ad; --accent-ink: #0b1414; --accent-soft: #1d3332; --ok: #5cc28a; --ok-soft: #173126; --warn: #e0a54a; --warn-soft: #33281a; --bad: #f07a70; --bad-soft: #3a1f1d; --unk: #9aa3ab; --unk-soft: #262b30; --shadow: none; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--t-base)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, td.num, .kpi-value, .mono { font-variant-numeric: tabular-nums lining-nums; }
.mono, code, pre { font-family: var(--mono); font-size: 12.5px; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shell */
.app { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr; }
.top { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: var(--t-md); letter-spacing: .01em; white-space: nowrap; }
.brand b { font-family: var(--mono); font-weight: 600; color: var(--accent); font-size: 18px; }
.top .meta { color: var(--muted); font-size: var(--t-sm); display: flex; gap: 14px; flex-wrap: wrap; }
.top .spacer { flex: 1; }
.nav { display: flex; gap: 2px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.nav button { border: 0; background: none; padding: 11px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.nav button[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.nav .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--bad-soft); color: var(--bad); font-size: 11px; line-height: 18px; text-align: center; }
main { padding: 20px 24px 64px; max-width: 1440px; width: 100%; margin: 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.test { border-color: var(--accent); color: var(--accent); }
.btn.exec { border-color: var(--bad); color: var(--bad); }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.kebab { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 4px; font-size: 16px; line-height: 1; border-radius: 4px; }
.kebab:hover { background: var(--surface-2); color: var(--text); }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; border-left: 4px solid var(--unk); }
.kpi.ok { border-left-color: var(--ok); } .kpi.warn { border-left-color: var(--warn); } .kpi.bad { border-left-color: var(--bad); }
.kpi-label { font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.kpi-value { font-size: var(--t-lg); font-weight: 600; margin: 2px 0; line-height: 1.3; }
.kpi-sub { font-size: var(--t-xs); color: var(--muted); }

/* Panels */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel > header h2 { margin: 0; font-size: var(--t-base); font-weight: 600; }
.panel > header .hint { color: var(--muted); font-size: var(--t-xs); }
.panel > header .spacer { flex: 1; }
.panel .body { padding: 14px 16px; }
.panel .body.flush { padding: 0; }
.note { font-size: var(--t-xs); color: var(--muted); }
.callout { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-sm); }
.callout.warn { background: var(--warn-soft); border-color: transparent; color: var(--text); }
.callout.bad { background: var(--bad-soft); border-color: transparent; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--t-xs); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; white-space: nowrap; background: var(--unk-soft); color: var(--unk); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.plain::before { display: none; }
.sev { font-weight: 600; font-size: var(--t-xs); padding: 1px 7px; border-radius: 4px; }
.sev.高 { background: var(--bad); color: #fff; } .sev.中 { background: var(--warn-soft); color: var(--warn); } .sev.低 { background: var(--unk-soft); color: var(--unk); }

/* Services */
.proj { border-top: 1px solid var(--line); }
.proj:first-child { border-top: 0; }
.proj-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px 4px; }
.proj-head h3 { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.proj-head .note { font-family: var(--mono); }
.svc { display: grid; grid-template-columns: minmax(150px, 1.3fr) 118px minmax(120px, 1fr) 70px 64px minmax(90px, .8fr) 28px; gap: 10px; align-items: center; padding: 7px 16px; font-size: var(--t-sm); }
.svc:hover { background: var(--surface-2); }
.svc .name { min-width: 0; }
.svc .name a { color: var(--text); text-decoration: none; font-weight: 500; }
.svc .name small { display: block; color: var(--faint); font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc .ver { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-head { color: var(--muted); font-size: 11px; padding-top: 8px; padding-bottom: 4px; }
.svc-head:hover { background: none; }
.spark { width: 100%; height: 26px; display: block; }

/* Incident detail */
.inc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.inc-head h1 { margin: 0; font-size: var(--t-lg); font-weight: 600; line-height: 1.35; }
.timeline { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); margin-top: 4px; }
.timeline b { color: var(--text); font-weight: 500; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--unk); min-width: 0; }
.col.cause { border-top-color: #6a5acd; } .col.recovery { border-top-color: var(--warn); } .col.permanent { border-top-color: var(--accent); }
.col > header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.col > header .row { display: flex; align-items: center; gap: 8px; }
.col > header h2 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.col > header p { margin: 4px 0 0; font-size: var(--t-xs); color: var(--muted); }
.col .sect { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.col .sect:last-child { border-bottom: 0; }
.col h3 { margin: 0 0 6px; font-size: var(--t-xs); color: var(--muted); font-weight: 500; text-transform: none; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.facts li { display: flex; gap: 6px; font-size: var(--t-sm); padding: 4px 6px; border-radius: 4px; }
.facts li:hover { background: var(--surface-2); }
.facts li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cand { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: var(--t-sm); }
.cand:first-child { border-top: 0; padding-top: 0; }
.cand small { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-xs); }
select.state { font-size: var(--t-xs); padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.state-badge { font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--unk-soft); color: var(--unk); white-space: nowrap; }
.state-badge.done { background: var(--ok-soft); color: var(--ok); } .state-badge.mid { background: var(--warn-soft); color: var(--warn); } .state-badge.bad { background: var(--bad-soft); color: var(--bad); }

.card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-2); }
.card + .card { margin-top: 10px; }
.card h4 { margin: 0 0 4px; font-size: var(--t-sm); font-weight: 600; }
.card p { margin: 0 0 8px; font-size: var(--t-xs); color: var(--muted); }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.phase { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; font-size: var(--t-xs); margin-top: 6px; }
.phase .lbl { color: var(--muted); font-weight: 500; }
.steps { display: flex; gap: 3px; }
.steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.steps span.on { background: var(--accent); } .steps span.fail { background: var(--bad); }
.phase .st { grid-column: 2; color: var(--text); }
.rev { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Modal */
dialog { border: 0; padding: 0; border-radius: 10px; background: var(--surface); color: var(--text); width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15, 20, 24, .45); }
.m-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.m-head h2 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.m-head .kind { font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.m-head .kind.test { background: var(--accent-soft); color: var(--accent); } .m-head .kind.exec { background: var(--bad-soft); color: var(--bad); }
.m-body { padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.m-body > * { min-width: 0; }
.m-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; font-size: var(--t-sm); }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.envs { display: grid; gap: 6px; }
.envs label { display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--t-sm); }
.envs label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.envs small { grid-column: 2; color: var(--muted); font-size: var(--t-xs); }
.envs .rec { font-size: 11px; color: var(--accent); font-weight: 600; margin-left: 6px; }
pre.cmd { margin: 0; padding: 12px 14px; background: #14191c; color: #d9e3e3; border-radius: var(--radius-sm); overflow-x: auto; white-space: pre; line-height: 1.55; }
.cmd-wrap { position: relative; }
.cmd-wrap .btn { position: absolute; top: 8px; right: 8px; background: #2a3236; color: #e6eeee; border-color: #3b4549; }
textarea { width: 100%; min-height: 110px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); resize: vertical; font-family: var(--mono); font-size: 12.5px; }
textarea.prose { font-family: var(--font); font-size: var(--t-sm); min-height: 70px; }
input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); }
.diff { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.diff div { padding: 2px 10px; white-space: pre-wrap; }
.diff .add { background: var(--ok-soft); } .diff .del { background: var(--bad-soft); text-decoration: line-through; }
.flow { display: flex; gap: 0; font-size: var(--t-xs); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.flow span { flex: 1; padding: 6px 8px; text-align: center; color: var(--muted); border-right: 1px solid var(--line); background: var(--surface-2); }
.flow span:last-child { border-right: 0; }
.flow span.now { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.flow span.past { color: var(--text); background: var(--accent-soft); }
.flow span.fail { background: var(--bad); color: #fff; font-weight: 600; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 110px; height: 76px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* Context menu */
.ctx { position: fixed; z-index: 100; min-width: 230px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; font-size: var(--t-sm); }
.ctx button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.ctx button:hover, .ctx button:focus { background: var(--accent-soft); outline: none; }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.ctx .ttl { padding: 5px 10px 3px; color: var(--muted); font-size: 11px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-rc] { cursor: context-menu; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1b2226; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: var(--t-sm); z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.toast.err { background: var(--bad); }

.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: var(--t-sm); }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 4px; height: 14px; }
@keyframes sk { to { background-position: -200% 0; } }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.bar > i.warn { background: var(--warn); } .bar > i.bad { background: var(--bad); }
.hostgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 1100px) { .three { grid-template-columns: 1fr; } .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .top { padding: 10px 14px; flex-wrap: wrap; gap: 8px; } .top .meta { font-size: var(--t-xs); gap: 8px; width: 100%; order: 3; }
  .nav { padding: 0 8px; } main { padding: 14px 12px 60px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { padding: 10px 12px; } .kpi-value { font-size: var(--t-md); }
  .svc { grid-template-columns: minmax(0, 1fr) auto 28px; row-gap: 2px; } .svc .c-spark, .svc .c-up, .svc .c-ms, .svc .ver { display: none; } .svc-head { display: none; }
  dl.kv { grid-template-columns: 1fr; gap: 0 0; } dl.kv dd { margin-bottom: 8px; }
  .hostgrid { grid-template-columns: 1fr; }
  td, th { padding: 8px; }
  .hide-sm { display: none; }
}