/* 監視センター 従来UI(classic-plus)
   コンセプトコンプ /tmp/mc-classic-concept を設計specとする。
   従来監視センターの配色トークンを継承し、シグネチャは上部ステータスビーコンと
   全行共通のトーンレール(左端3px)に集約する。 */

:root {
  --bg: #070f1c;
  --bg-deep: #050b15;
  --surface: #0f1b2d;
  --surface-2: #142338;
  --line: rgb(148 163 184 / 0.16);
  --line-strong: rgb(148 163 184 / 0.3);
  --text: #e8eef8;
  --muted: #96a5bc;
  --cyan: #22d3ee;
  --blue: #38bdf8;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #fb7185;
  --info: #818cf8;
  --gold: #f6c453; /* 実行コマンド用。--surface上でコントラスト約10.6:1 */
  --radius: 0.7rem;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: clip; }

body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgb(34 211 238 / 0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  font-feature-settings: "palt";
  line-height: 1.55;
}

a { color: var(--cyan); }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==== シェル ==== */
.shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  max-width: 1460px;
  margin: 1rem auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: clip;
  background: var(--bg-deep);
  min-height: calc(100vh - 2rem);
}

.sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  padding: 1.1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: linear-gradient(180deg, rgb(20 35 56 / 0.5), transparent 40%);
}

.brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.45rem; }
.brand-mark {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgb(34 211 238 / 0.6));
}
.brand-mark-light { fill: var(--cyan); stroke: none; animation: brand-breathe 3.2s ease-in-out infinite; transform-origin: 12px 12px; }
@keyframes brand-breathe { 50% { transform: scale(0.8); opacity: 0.75; } }
.brand strong { font-size: 0.95rem; letter-spacing: 0.05em; }
.brand small { display: block; color: var(--muted); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.12em; }

.nav { display: flex; flex-direction: column; gap: 0.3rem; }
.nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.58rem 0.7rem;
  border-radius: 0.55rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.83rem;
  border: 1px solid transparent;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.nav a svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.nav a:hover { color: var(--text); background: rgb(20 35 56 / 0.6); }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--cyan); border-color: rgb(34 211 238 / 0.22); }

.badge {
  margin-left: auto;
  min-width: 1.35rem;
  text-align: center;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.badge[data-tone="info"] { background: rgb(129 140 248 / 0.18); color: var(--info); }
.badge[data-tone="warning"] { background: rgb(251 191 36 / 0.16); color: var(--warning); }
.badge[data-tone="danger"] { background: rgb(251 113 133 / 0.16); color: var(--danger); }

.sidebar-foot {
  margin-top: auto;
  padding: 0.7rem 0.45rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
}
.sidebar-foot-copy { margin: 0; line-height: 1.75; }
.sidebar-back {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgb(34 211 238 / 0.48);
  text-underline-offset: 0.16em;
}
.sidebar-back:hover { color: var(--text); text-decoration-color: currentColor; }

/* ブラウザ通知トグル(左メニュー最下部) */
.notify-toggle {
  margin-top: 0.7rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.notify-toggle:hover:not(:disabled) { border-color: var(--cyan); color: var(--text); }
.notify-toggle:disabled { opacity: 0.55; cursor: default; }
.notify-toggle .notify-state { font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; }
.notify-toggle[data-state="on"] { border-color: rgb(34 211 238 / 0.45); color: var(--text); }
.notify-toggle[data-state="on"] .notify-state { color: var(--cyan); }
.notify-toggle[data-state="denied"] .notify-state { color: var(--danger); }

/* タッチ端末では左メニュー最下部の操作もタップ領域44px相当へ広げる(デスクトップ密度は不変) */
@media (pointer: coarse) {
  .sidebar-back {
    line-height: 2.75rem; /* 箱型にせず、テキストリンクの押下高を44px相当へ広げる */
  }
  .notify-toggle {
    min-height: 2.75rem; /* タップ領域44px以上を確保 */
  }
}

/* ==== ステータスビーコン ==== */
.main { min-width: 0; display: flex; flex-direction: column; }

.beacon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s ease;
}
.beacon[data-tone="success"] { background: linear-gradient(90deg, rgb(74 222 128 / 0.07), transparent 55%); }
.beacon[data-tone="warning"] { background: linear-gradient(90deg, rgb(251 191 36 / 0.07), transparent 55%); }
.beacon[data-tone="danger"] { background: linear-gradient(90deg, rgb(251 113 133 / 0.09), transparent 55%); }

.beacon-light {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--muted);
  flex: 0 0 auto;
}
.beacon[data-tone="success"] .beacon-light { background: var(--success); box-shadow: 0 0 14px rgb(74 222 128 / 0.75); }
.beacon[data-tone="warning"] .beacon-light { background: var(--warning); box-shadow: 0 0 14px rgb(251 191 36 / 0.75); }
.beacon[data-tone="danger"] .beacon-light { background: var(--danger); box-shadow: 0 0 14px rgb(251 113 133 / 0.8); }
.beacon[data-tone="danger"] .beacon-light::after {
  content: "";
  position: absolute;
  inset: -0.35rem;
  border-radius: 999px;
  border: 2px solid rgb(251 113 133 / 0.5);
  animation: beacon-ping 1.6s ease-out infinite;
}
@keyframes beacon-ping {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.beacon-copy { min-width: 0; }
.beacon-state { font-size: 0.95rem; font-weight: 700; }
.beacon-desc { color: var(--muted); font-size: 0.78rem; }
.beacon-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==== コンテンツ共通 ==== */
.content { padding: 1.3rem 1.4rem 2rem; display: grid; gap: 1.2rem; align-content: start; flex: 1; }
.content:focus { outline: none; }

.view-title { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; }
.view-sub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.8rem; }

.loading, .empty {
  padding: 1.4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* メトリクスレール */
.metric-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.metric {
  position: relative;
  padding: 0.8rem 0.9rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--success); }
.metric[data-tone="warning"]::before { background: var(--warning); }
.metric[data-tone="danger"]::before { background: var(--danger); }
.metric[data-tone="neutral"]::before { background: var(--line-strong); }
.metric-value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.metric[data-tone="warning"] .metric-value { color: var(--warning); }
.metric[data-tone="danger"] .metric-value { color: var(--danger); }
.metric-label { font-size: 0.74rem; color: var(--muted); }
.metric-note { font-size: 0.64rem; color: var(--muted); opacity: 0.75; }

/* パネル */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.panel-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 0.92rem; }
.panel-title .panel-link { margin-left: auto; color: var(--cyan); font-size: 0.75rem; text-decoration: none; }
.panel-title .panel-link:hover { text-decoration: underline; }
.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.2rem; align-items: start; }
.col-stack { display: grid; gap: 1.2rem; }

/* サービス行 */
.svc {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 0.9fr) minmax(4.8rem, 0.55fr) minmax(0, 1.1fr) 0.55rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.65rem;
  border-radius: 0.55rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.svc + .svc { margin-top: 0.25rem; }
a.svc:hover { background: rgb(34 211 238 / 0.06); border-color: rgb(34 211 238 / 0.25); }
.svc-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--muted); flex: 0 0 auto; }
.svc[data-tone="success"] .svc-dot { background: var(--success); }
.svc[data-tone="warning"] .svc-dot { background: var(--warning); }
.svc[data-tone="danger"] .svc-dot { background: var(--danger); box-shadow: 0 0 8px rgb(251 113 133 / 0.7); }
.svc strong,
.svc-state,
.svc-primary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc strong { font-size: 0.82rem; }
.svc-state { font-size: 0.74rem; color: var(--muted); }
.svc[data-tone="warning"] .svc-state { color: var(--warning); }
.svc[data-tone="danger"] .svc-state { color: var(--danger); }
.svc-primary { font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svc-chevron {
  justify-self: end;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
a.svc:hover .svc-chevron { border-color: var(--cyan); }

/* タイムライン */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
}
.timeline li:last-child { border-bottom: 0; }
.timeline li::before,
.trow::before,
.backup-row::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 0.58rem;
  height: 0.58rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.timeline li::after,
.trow::after,
.backup-row::after {
  content: "";
  position: absolute;
  width: 1px;
  background: var(--line-strong);
}
.timeline li::before { left: 0.65rem; top: 0.9rem; }
.timeline li::after { left: 0.965rem; top: 1.5rem; bottom: -0.9rem; }
.timeline li:last-child::after,
.trow:last-child::after,
.backup-row:last-child::after { display: none; }
.timeline li[data-tone="danger"]::before { border-color: var(--danger); }
.timeline li[data-tone="success"]::before { border-color: var(--success); }
.timeline li[data-tone="warning"]::before { border-color: var(--warning); }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline strong { font-size: 0.78rem; }
.timeline span { color: var(--muted); }

/* 機能チェックバー */
.checkbar { display: grid; grid-template-columns: 6.6rem 3.4rem 1fr; align-items: center; gap: 0.65rem; font-size: 0.77rem; padding: 0.52rem 0.35rem; color: inherit; text-decoration: none; border-radius: 0.4rem; }
.checkbar:hover { background: rgb(34 211 238 / 0.06); }
.checkbar strong { font-variant-numeric: tabular-nums; }
.checkbar .bar { height: 0.42rem; background: rgb(148 163 184 / 0.14); border-radius: 999px; overflow: hidden; }
.checkbar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--success)); border-radius: 999px; transition: width 0.5s ease; }
.checkbar[data-tone="danger"] .bar i { background: linear-gradient(90deg, var(--warning), var(--danger)); }

/* チップ */
.chip {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: rgb(148 163 184 / 0.09);
  justify-self: start;
  white-space: nowrap;
}
.chip[data-tone="success"] { color: var(--success); border-color: rgb(74 222 128 / 0.4); background: rgb(74 222 128 / 0.08); }
.chip[data-tone="warning"] { color: var(--warning); border-color: rgb(251 191 36 / 0.4); background: rgb(251 191 36 / 0.08); }
.chip[data-tone="danger"] { color: var(--danger); border-color: rgb(251 113 133 / 0.45); background: rgb(251 113 133 / 0.09); }
.chip-new { color: #06202e; background: var(--cyan); border-color: var(--cyan); letter-spacing: 0.04em; }

/* 要対応リスト */
.attention { border-color: rgb(251 113 133 / 0.35); background: linear-gradient(180deg, rgb(251 113 133 / 0.05), transparent 70%) , var(--surface); }
.attention-item {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 0.5rem;
  background: var(--surface-2);
}
.attention-item[data-tone="danger"] { border-left-color: var(--danger); }
.attention-item + .attention-item { margin-top: 0.55rem; }
.attention-item header { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.82rem; }
.attention-check { color: var(--muted); font-size: 0.75rem; }
.attention-item p { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }

/* チェックグループ */
.check-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: clip; }
.check-group + .check-group { margin-top: 0.7rem; }
.check-group summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  list-style: none;
  border-left: 3px solid transparent;
}
.check-group summary::-webkit-details-marker { display: none; }
.check-group[data-tone="warning"] summary { border-left-color: var(--warning); }
.check-group[data-tone="danger"] summary { border-left-color: var(--danger); }
.check-group summary::after {
  content: "";
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.check-group[open] summary::after { transform: rotate(225deg); }
.group-count { font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.group-count[data-tone="warning"] { color: var(--warning); }
.group-count[data-tone="danger"] { color: var(--danger); }
.check-list { list-style: none; margin: 0; padding: 0.2rem 0.9rem 0.7rem; }
.check-list li {
  display: grid;
  grid-template-columns: 10rem 11rem auto 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.77rem;
}
.check-list li:first-child { border-top: 0; }
.check-list .check-name { color: var(--muted); }
.check-list .check-summary { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ツールバー */
.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  font-family: inherit;
}
.toolbar input { flex: 1 1 12rem; min-width: 0; }
.toolbar .count { margin-left: auto; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.toolbar .ack-status { font-size: 0.72rem; color: var(--muted); }
.toolbar .ack-status[data-tone="success"] { color: var(--success); }
.toolbar .ack-status[data-tone="danger"] { color: var(--danger); }

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.btn:hover:not(:disabled) { border-color: var(--cyan); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { border-color: rgb(34 211 238 / 0.45); color: var(--cyan); }
.btn-danger { border-color: rgb(251 113 133 / 0.4); color: var(--danger); }
.btn-danger:hover:not(:disabled) { border-color: var(--danger); }

/* 履歴テーブル */
.table { border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: var(--surface); }
.thead, .trow { display: grid; grid-template-columns: 11rem 1.1fr 0.6fr 1.7fr; gap: 0.7rem; padding: 0.55rem 0.8rem; }
.thead { font-size: 0.7rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.trow { position: relative; font-size: 0.77rem; border-bottom: 1px solid var(--line); align-items: start; padding-left: 2.55rem; }
.trow:last-child { border-bottom: 0; }
.trow::before { left: 1rem; top: 0.82rem; }
.trow::after { left: 1.315rem; top: 1.45rem; bottom: -0.85rem; }
.trow[data-tone="danger"]::before { border-color: var(--danger); }
.trow[data-tone="success"]::before { border-color: var(--success); }
.trow[data-tone="warning"]::before { border-color: var(--warning); }
.trow[data-unread="true"] { background: rgb(34 211 238 / 0.05); }
.trow time { color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.trow .result b { font-size: 0.78rem; }
.trow[data-tone="success"] .result b { color: var(--success); }
.trow[data-tone="warning"] .result b { color: var(--warning); }
.trow[data-tone="danger"] .result b { color: var(--danger); }
.trow .result small { display: block; color: var(--muted); font-size: 0.66rem; }
.trow .msg { color: var(--muted); overflow-wrap: anywhere; }
.loader {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.7rem;
  font-size: 0.74rem;
  cursor: pointer;
}
.loader:disabled { cursor: default; }

/* 更新・ビルド(項目ごとの開閉式、チェックグループと同じ操作言語) */
.release-list { display: grid; gap: 0.55rem; }
.release-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: clip;
}
.release-item summary {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 1.6fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.9rem;
  cursor: pointer;
  font-size: 0.8rem;
  list-style: none;
  border-left: 3px solid var(--success);
  transition: background-color 0.16s ease;
}
.release-item summary::-webkit-details-marker { display: none; }
.release-item summary:hover { background: rgb(34 211 238 / 0.05); }
.release-item summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.release-item[data-tone="warning"] summary { border-left-color: var(--warning); }
.release-item[data-tone="danger"] summary { border-left-color: var(--danger); }
.release-item summary::after {
  content: "";
  justify-self: end;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.release-item[open] summary::after { transform: rotate(225deg); }
.release-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-ver { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; }
.release-ver code {
  background: rgb(148 163 184 / 0.1);
  padding: 0.06rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
.release-ver .arrow { color: var(--muted); margin: 0 0.3rem; }
.release-kv {
  display: grid;
  grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr) minmax(7rem, 0.42fr) minmax(0, 1fr);
  gap: 0.38rem 0.9rem;
  margin: 0;
  padding: 0.75rem 0.95rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  background: rgb(20 35 56 / 0.35);
}
.release-kv dt { color: var(--muted); }
.release-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.release-link { color: var(--cyan); text-decoration: none; }
.release-link:hover { text-decoration: underline; }
.release-ver-behind { color: var(--warning); }
.release-ver-current { color: var(--success); }
.release-products {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  border-top: 1px solid var(--line);
  background: rgb(20 35 56 / 0.35);
}
.release-products th, .release-products td {
  text-align: left;
  padding: 0.38rem 0.95rem;
  border-bottom: 1px solid rgb(148 163 184 / 0.12);
  vertical-align: middle;
}
.release-products th { color: var(--muted); font-weight: 500; font-size: 0.68rem; }
.release-products tr:last-child td { border-bottom: 0; }
.release-products-name { font-weight: 600; overflow-wrap: anywhere; }
.release-products code {
  background: rgb(148 163 184 / 0.1);
  padding: 0.06rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
}
.release-products tr[data-tone="warning"] td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.release-products a code { color: inherit; }

/* 世代バックアップ(ジョブ行はアコーディオン。開いた行だけ対象パスと実行コマンドを表示) */
.backup-row {
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}
.backup-row:last-child { border-bottom: 0; }
.backup-summary {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr auto auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 2.6rem; /* タップ領域24px以上を確保 */
  padding: 0.6rem 0.75rem 0.6rem 2.55rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.16s ease;
}
.backup-summary::-webkit-details-marker { display: none; }
.backup-summary:hover { background: rgb(34 211 238 / 0.05); }
.backup-summary:active { background: rgb(34 211 238 / 0.1); }
.backup-summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.backup-row::before { left: 1rem; top: 0.92rem; }
.backup-row::after { left: 1.315rem; top: 1.55rem; bottom: -0.95rem; }
.backup-row[data-tone="success"]::before { border-color: var(--success); }
.backup-row[data-tone="warning"]::before { border-color: var(--warning); }
.backup-row[data-tone="danger"]::before { border-color: var(--danger); }
.backup-row[data-tone="success"] .chip { color: var(--success); }
.backup-row[data-tone="warning"] .chip { color: var(--warning); }
.backup-row[data-tone="danger"] .chip { color: var(--danger); }
/* 閉じた行は1行維持。ジョブ名は幅に応じてellipsisし、全文はsummaryのtitleで回復する */
.backup-summary > strong,
.backup-summary > .backup-gen {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 開閉可否は右端のchevronだけで示す。閉=右向き、開=下向き。hover/focusで着色しタッチでも常時視認できる */
.backup-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  min-height: 24px; /* タップ領域24px以上を確保 */
  color: var(--muted);
}
.backup-toggle::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}
.backup-row[open] .backup-toggle::after { transform: rotate(45deg); }
.backup-summary:hover .backup-toggle,
.backup-summary:focus-visible .backup-toggle,
.backup-summary:active .backup-toggle { color: var(--cyan); }
.backup-problems { grid-column: 1 / -1; margin: 0; color: var(--warning); font-size: 0.72rem; }
.backup-detail { display: grid; gap: 0.3rem; padding: 0 0.75rem 0.7rem 2.55rem; }
.backup-src {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 実行コマンド(金色)。開いた行の全幅に折返し表示し、狭幅では長いコマンドも読み切れるようにする */
.backup-cmd-line { grid-column: 1 / -1; margin: 0.1rem 0 0; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.backup-cmd-label { flex: 0 0 auto; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.04em; }
.backup-cmd {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 直近の実行(時刻/ジョブ/結果/内容の4列。結果は記号+ラベルのチップで色以外でも判別) */
.bk-events .bk-event {
  grid-template-columns: 6.4rem minmax(5rem, 8.2rem) 5.9rem 1fr;
  align-items: start;
}
.bk-event .bk-job {
  color: var(--text);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bk-event .chip { justify-self: start; }
.bk-event .bk-text { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.bk-event[data-tone="success"] .bk-text,
.bk-event[data-tone="neutral"] .bk-text { color: var(--muted); }
.bk-event[data-tone="warning"] .bk-text { color: var(--text); }
.bk-event[data-tone="danger"] .bk-text { color: var(--text); }
/* 全体実行完了のメッセージだけ金色(実行コマンドと同じ--gold)で強調する */
.bk-event .bk-text .bk-run-complete { color: var(--gold); }
.bk-event[data-tone="success"] { background: linear-gradient(90deg, rgb(74 222 128 / 0.055), transparent 70%); }
.bk-event[data-tone="warning"] { background: linear-gradient(90deg, rgb(251 191 36 / 0.09), transparent 78%); }
.bk-event[data-tone="danger"] { background: linear-gradient(90deg, rgb(251 113 133 / 0.11), transparent 78%); }
.bk-event[data-tone="neutral"] { background: linear-gradient(90deg, rgb(129 140 248 / 0.065), transparent 70%); }

/* モバイル */
.mobile-nav { display: none; }

/* モバイルメニュー(サイドバー非表示時の設定と戻り導線。下部5タブは使わない) */
.mobile-menu-button { display: none; }
.mobile-menu {
  position: absolute;
  top: 100%;
  right: 0.6rem;
  margin-top: 0.3rem;
  z-index: 30;
  display: none;
  gap: 0.45rem;
  min-width: 14rem;
  padding: 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: rgb(5 11 21 / 0.97);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem; /* タップ領域44px以上を確保 */
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.mobile-menu .notify-toggle {
  margin-top: 0.1rem;
  min-height: 2.75rem; /* タップ領域44px以上を確保 */
}

@media (max-width: 840px) {
  .shell { grid-template-columns: 1fr; margin: 0; border-radius: 0; border: 0; min-height: 100vh; }
  .sidebar { display: none; position: static; height: auto; max-height: none; overflow: visible; }
  .mobile-menu-button { display: inline-block; }
  .mobile-menu:not([hidden]) { display: grid; }
  .content { padding: 1rem 0.9rem 5.4rem; }
  .beacon { padding: 0.7rem 0.9rem; flex-wrap: wrap; }
  .beacon-meta { flex: 1 0 100%; margin-left: 0; justify-content: space-between; }
  .metric-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-rail .metric:nth-child(5) { grid-column: 1 / -1; }
  .two-col { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 0.5rem minmax(0, 1fr) minmax(4.2rem, 0.58fr) minmax(0, 0.75fr) 0.5rem; gap: 0.38rem; padding-inline: 0.4rem; }
  .svc strong { font-size: 0.74rem; }
  .svc-state, .svc-primary { font-size: 0.68rem; }
  .check-list li { grid-template-columns: 1fr auto; }
  .check-list .check-summary { grid-column: 1 / -1; white-space: normal; }
  .thead { display: none; }
  .trow { grid-template-columns: 1fr; gap: 0.25rem; }
  .release-item summary { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 0.3rem; }
  .release-item summary .release-ver { grid-column: 1 / -1; grid-row: 2; }
  .release-kv { grid-template-columns: minmax(6.4rem, 0.42fr) minmax(0, 1fr); gap: 0.32rem 0.65rem; }
  .release-kv dt { font-size: 0.68rem; }
  .release-products th, .release-products td { padding: 0.32rem 0.6rem; }
  .release-products th:nth-child(4), .release-products td:nth-child(4) { display: none; }
  /* 狭幅: 閉じた行は必ず1行(ジョブ名ellipsis+世代+状態+chevron)。経過時間と警告文はtitleで回復する */
  .backup-summary { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.55rem; }
  .backup-row .backup-age { display: none; }
  .backup-summary .backup-problems { display: none; }
  .backup-detail { padding-left: 2.2rem; }
  /* 直近の実行: 1行目に時刻+ジョブ+結果、2行目に内容。ジョブ名は幅に応じて縮む */
  .bk-events .bk-event { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.2rem; }
  .bk-event .chip { justify-self: end; }
  .bk-event .bk-text { grid-column: 1 / -1; }
  .check-group { scroll-margin-top: 0.5rem; }

  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(5 11 21 / 0.96);
    border-top: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
    z-index: 20;
  }
  .mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    padding: 0.5rem 0.2rem 0.65rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.62rem;
    position: relative;
  }
  /* 選択中タブ: 上端バー+背景+太字で、色覚差があっても一目で判別できるようにする */
  .mobile-nav a[aria-current="page"] {
    color: var(--cyan);
    font-weight: 700;
    background: linear-gradient(180deg, rgb(34 211 238 / 0.16), rgb(34 211 238 / 0.02));
  }
  .mobile-nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--cyan);
  }
  .mobile-nav a svg { width: 1.15rem; height: 1.15rem; }
  .mobile-nav a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgb(34 211 238 / 0.55)); }
  .mobile-nav .badge { position: absolute; top: 0.2rem; right: 18%; margin-left: 0; }
}

/* ==== スプラッシュ: ビーコンの点灯。掃引が5つの監視項目を順に灯し、中央の灯がヘッダーのビーコンへ降りる ==== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
}
.splash-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 50% 45%, rgb(34 211 238 / 0.07), transparent 65%),
    var(--bg-deep);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash-scene {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  width: min(92vw, 420px);
}
.splash-beacon {
  width: min(58vw, 240px);
  height: auto;
  overflow: visible;
}
.splash-ring {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 604;
  stroke-dashoffset: 604;
  transform: rotate(-90deg);
  transform-origin: 120px 120px;
  animation: ring-draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
  opacity: 0.85;
}
.splash-ring-inner { stroke-dasharray: 390; stroke-dashoffset: 390; opacity: 0.45; animation-delay: 0.35s; animation-duration: 0.7s; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
.splash-ticks line { stroke: rgb(148 163 184 / 0.55); stroke-width: 1.5; stroke-linecap: round; opacity: 0; animation: tick-in 0.4s ease 0.9s forwards; }
@keyframes tick-in { to { opacity: 1; } }
.splash-sweep {
  transform-origin: 120px 120px;
  opacity: 0;
  animation: sweep-turn 1.5s cubic-bezier(0.3, 0.1, 0.3, 1) 0.8s both;
}
.splash-sweep path {
  fill: rgb(34 211 238 / 0.22);
  stroke: rgb(34 211 238 / 0.7);
  stroke-width: 1;
  filter: drop-shadow(0 0 8px rgb(34 211 238 / 0.45));
}
@keyframes sweep-turn {
  0% { opacity: 0; transform: rotate(0deg); }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg); }
}
.splash-light {
  position: absolute;
  left: 50%;
  top: calc(min(58vw, 240px) / 2);
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 rgb(34 211 238 / 0);
  transform: scale(0.4);
  opacity: 0;
  transition: background 0.5s ease, box-shadow 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.splash.is-lit .splash-light { opacity: 1; transform: scale(1.9); }
.splash[data-tone="neutral"] .splash-light { background: var(--cyan); box-shadow: 0 0 22px rgb(34 211 238 / 0.85); }
.splash[data-tone="success"] .splash-light { background: var(--success); box-shadow: 0 0 22px rgb(74 222 128 / 0.85); }
.splash[data-tone="warning"] .splash-light { background: var(--warning); box-shadow: 0 0 22px rgb(251 191 36 / 0.85); }
.splash[data-tone="danger"] .splash-light { background: var(--danger); box-shadow: 0 0 22px rgb(251 113 133 / 0.9); }
.splash-ping {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 120px 120px;
}
.splash[data-tone="success"] .splash-ping { stroke: var(--success); }
.splash[data-tone="warning"] .splash-ping { stroke: var(--warning); }
.splash[data-tone="danger"] .splash-ping { stroke: var(--danger); }
.splash.is-lit .splash-ping { animation: splash-ping 1.3s ease-out 0.1s; }
.splash.is-lit .splash-ping-2 { animation-delay: 0.45s; }
@keyframes splash-ping { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(6); } }
/* 5つの監視項目のレール。掃引の通過に合わせて左から灯る */
.splash-rail {
  position: relative;
  display: flex;
  gap: clamp(0.5rem, 3vw, 1rem);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(15 27 45 / 0.6);
  opacity: 0;
  transform: translateY(8px);
  animation: rail-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s forwards;
}
.splash-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgb(34 211 238 / 0.7);
  transform: scaleY(0);
  animation: rail-tone 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) 2.1s forwards;
}
@keyframes rail-in { to { opacity: 1; transform: none; } }
@keyframes rail-tone { to { transform: scaleY(1); } }
.splash-node {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  opacity: 0.45;
  transform: scale(0.85);
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.45s ease, opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.splash-node svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.splash-node.is-on { color: var(--cyan); border-color: rgb(34 211 238 / 0.6); box-shadow: 0 0 14px rgb(34 211 238 / 0.45); opacity: 1; transform: scale(1); }
.splash-node.is-here { color: var(--text); border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(34 211 238 / 0.22), 0 0 18px rgb(34 211 238 / 0.55); }
.splash-word { display: grid; justify-items: center; gap: 0.15rem; text-align: center; }
.splash-word strong { font-size: 1.25rem; letter-spacing: 0.14em; opacity: 0; transform: translateY(6px); animation: rail-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.3s forwards; }
.splash-word small { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.3em; opacity: 0; animation: tick-in 0.6s ease 1.7s forwards; }
.splash-word em { font-style: normal; margin-top: 0.5rem; color: var(--muted); font-size: 0.78rem; opacity: 0; animation: tick-in 0.6s ease 2.0s forwards; }
.splash-skip {
  position: absolute;
  right: 1.1rem;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: tick-in 0.6s ease 1.2s forwards;
}
/* 降りる: 幕は明け、灯はヘッダーのビーコンの位置へ。レールと題字は沈む */
.splash.is-settle { pointer-events: none; }
.splash.is-settle .splash-veil { opacity: 0; }
.splash.is-settle .splash-beacon,
.splash.is-settle .splash-rail,
.splash.is-settle .splash-word,
.splash.is-settle .splash-skip { opacity: 0; transition: opacity 0.4s ease; animation: none; }
.splash.is-settle .splash-light { transform: scale(1); }
.splash.is-landed .splash-light { opacity: 0; }
/* 短縮版(同じタブでの再訪): 環は既に描かれ、項目は灯っている。灯が一度脈打って降りる */
.splash.is-short .splash-ring { stroke-dashoffset: 0; animation: none; }
.splash.is-short .splash-ticks line { animation: tick-in 0.3s ease forwards; }
.splash.is-short .splash-sweep { animation: none; opacity: 0; }
.splash.is-short .splash-rail { animation: rail-in 0.35s ease forwards; }
.splash.is-short .splash-rail::before { animation: rail-tone 0.4s cubic-bezier(0.3, 1.3, 0.5, 1) 0.25s forwards; }
.splash.is-short .splash-word strong { animation: rail-in 0.4s ease 0.05s forwards; }
.splash.is-short .splash-word small { animation: tick-in 0.4s ease 0.15s forwards; }
.splash.is-short .splash-word em,
.splash.is-short .splash-skip { animation: none; }
/* 幕が明けた後、画面はビーコンの灯に続いて浮かぶ */
body.is-arriving .shell { opacity: 0; }
body.is-arrived .shell { animation: shell-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes shell-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .splash { display: none; }
  body.is-arriving .shell { opacity: 1; }
}