:root{
  --bg:#f6f6f4; --panel:#fff; --ink:#1c1c1a; --sub:#6b6b66; --line:#e2e1dc;
  --accent:#2f5597; --accent-soft:#eaf0fb;
  --good:#1e7a4d; --good-soft:#e6f4ec;
  --warn:#9a6b00; --warn-soft:#fbf1dc;
  --bad:#a32b2b; --bad-soft:#fbe9e9;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17171a; --panel:#1f1f23; --ink:#e9e9e6; --sub:#9a9a95; --line:#2e2e34;
    --accent:#7ea6e8; --accent-soft:#23304a;
    --good:#6fcf9a; --good-soft:#1c3227;
    --warn:#e0b25a; --warn-soft:#332a17;
    --bad:#e88a8a; --bad-soft:#3a2222;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  font-size:14px; line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:1080px; margin:0 auto; padding:16px 14px 64px}

/* ヘッダー */
header{margin:8px 0 18px}
h1{font-size:19px; margin:0 0 2px; letter-spacing:.01em}
.meta{color:var(--sub); font-size:12px}
.headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}

button{font:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:7px 13px}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
button.primary:hover{opacity:.9}

/* パネル */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; margin:0 0 14px}
.panel h2{font-size:14px; margin:0 0 10px; letter-spacing:.02em}
.panel h2 .n{color:var(--sub); font-weight:400; margin-left:6px; font-size:12px}

/* 数字タイル */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:9px}
.tile{border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:var(--bg)}
.tile .k{font-size:11.5px; color:var(--sub); margin-bottom:3px}
.tile .v{font-size:23px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums}
.tile .v small{font-size:12px; font-weight:400; color:var(--sub); margin-left:3px}
.tile.hi{border-color:var(--accent); background:var(--accent-soft)}

/* 予定 */
.slot{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:0}
.slot .d{font-variant-numeric:tabular-nums; font-weight:600; min-width:132px}
.slot .l{color:var(--sub); font-size:12.5px}

/* パイプライン */
.pipe{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:11px}
.col{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:11px}
.col > h3{font-size:12.5px; margin:0 0 9px; display:flex; justify-content:space-between; align-items:center}
.col > h3 b{font-size:15px; font-variant-numeric:tabular-nums}
.card{border:1px solid var(--line); border-left:3px solid var(--line); border-radius:8px;
  padding:9px 10px; margin-bottom:8px; background:var(--bg); cursor:pointer}
.card:last-child{margin-bottom:0}
.card:hover{border-color:var(--accent)}
.card .no{font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums}
.card .nm{font-size:12.8px; font-weight:600; margin:1px 0 5px; line-height:1.4}
.card .ln{font-size:11.5px; color:var(--sub)}
.card.ok{border-left-color:var(--good)}
.card.warn{border-left-color:var(--warn)}
.card.bad{border-left-color:var(--bad)}

/* バッジ */
.b{display:inline-block; font-size:10.5px; padding:1.5px 7px; border-radius:99px;
  border:1px solid var(--line); margin:2px 4px 0 0; white-space:nowrap}
.b.good{background:var(--good-soft); border-color:transparent; color:var(--good)}
.b.warn{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.b.bad{background:var(--bad-soft); border-color:transparent; color:var(--bad)}
.b.acc{background:var(--accent-soft); border-color:transparent; color:var(--accent)}

/* 一覧 */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:760px}
th,td{text-align:left; padding:8px 9px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--sub); font-weight:600; font-size:11.5px; white-space:nowrap;
  position:sticky; top:0; background:var(--panel)}
tr:hover td{background:var(--bg)}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* タブ・フィルタ */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 13px}
.tabs button{padding:6px 13px; font-size:13px}
.tabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 11px}
.filters button{padding:4px 11px; font-size:12px}
.filters button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* 要対応 */
.todo{border-left:3px solid var(--bad); background:var(--bad-soft); border-radius:6px;
  padding:9px 11px; margin-bottom:8px}
.todo.w{border-left-color:var(--warn); background:var(--warn-soft)}
.todo .t{font-weight:600; font-size:12.8px; margin-bottom:2px}
.todo .x{font-size:12px; color:var(--sub)}
@media (prefers-color-scheme: dark){ .todo .x{color:#c9c9c4} }

/* 鍵 */
.lock{max-width:330px; margin:26px auto; text-align:center}
.lock input{font:inherit; font-size:19px; letter-spacing:.4em; text-align:center; width:100%;
  padding:11px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink)}
.lock input:focus{outline:2px solid var(--accent); outline-offset:1px}
.lock .msg{min-height:19px; font-size:12.5px; color:var(--bad); margin-top:9px}
.lock button{margin-top:11px; width:100%}

/* 詳細 */
dialog{border:1px solid var(--line); border-radius:12px; padding:0; max-width:620px; width:calc(100% - 28px);
  background:var(--panel); color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dlg{padding:17px 18px}
.dlg h3{margin:0 0 3px; font-size:15.5px; line-height:1.4}
.dlg .sub{color:var(--sub); font-size:12px; margin-bottom:12px}
.dl{display:grid; grid-template-columns:88px 1fr; gap:5px 11px; font-size:12.8px}
.dl dt{color:var(--sub)}
.dl dd{margin:0}
.dlg .close{margin-top:15px; width:100%}
.hint{color:var(--sub); font-size:11.5px; margin-top:9px; line-height:1.55}
.hidden{display:none !important}
a{color:var(--accent)}

/* 押せるタイル */
.tile.tap{cursor:pointer}
.tile.tap:hover{border-color:var(--accent); background:var(--accent-soft)}
.tile.tap:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.tile .more{font-size:11px; color:var(--accent); margin-top:4px}
dialog .card{margin-bottom:9px}
dialog .card:last-of-type{margin-bottom:14px}