:root{
  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-2:#e3e7ec;
  --border:#d2d8e0;
  --text:#171a20;
  --text-dim:#5b6270;
  --text-faint:#8a909c;
  --accent:#d81f35;
  --accent-soft:#fbe4e7;
  --good:#1f8a5f;
  --good-soft:#e2f4ec;
  --warn:#a8690a;
  --warn-soft:#faf0da;
  --bad:#c81c31;
  --bad-soft:#fbe4e7;
  --shadow: 0 1px 2px rgba(20,24,32,.06), 0 8px 24px -12px rgba(20,24,32,.12);
  --font-display: "Bahnschrift", "SF Compact Display", "Segoe UI Semibold", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-body: -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", "Yu Gothic UI", monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1116; --surface:#171a21; --surface-2:#1e222a; --border:#2b303b;
    --text:#eceef2; --text-dim:#98a0ad; --text-faint:#6b7382;
    --accent:#ff4655; --accent-soft:#331419;
    --good:#3ddc97; --good-soft:#0f2a20;
    --warn:#f0b429; --warn-soft:#2c2308;
    --bad:#ff4655; --bad-soft:#331419;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1116; --surface:#171a21; --surface-2:#1e222a; --border:#2b303b;
  --text:#eceef2; --text-dim:#98a0ad; --text-faint:#6b7382;
  --accent:#ff4655; --accent-soft:#331419;
  --good:#3ddc97; --good-soft:#0f2a20;
  --warn:#f0b429; --warn-soft:#2c2308;
  --bad:#ff4655; --bad-soft:#331419;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:40px 24px 96px;
  display:flex;
  flex-direction:column;
  gap:36px;
}

/* ---------- Header ---------- */
header.top{ display:flex; flex-direction:column; gap:6px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
h1{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  letter-spacing:.01em;
  margin:0;
  text-wrap:balance;
}
.sub{ color:var(--text-dim); font-size:14.5px; max-width:70ch; }
.sub a{ color:var(--text-dim); text-decoration-color:var(--border); }
.sub a:hover{ color:var(--accent); }

/* ---------- Summary dashboard ---------- */
.dash{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.dash > div{ background:var(--surface); padding:20px 22px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.dash .stat-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.dash .stat-value{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:28px; font-weight:600; letter-spacing:-.01em; }
.dash .stat-value small{ font-size:14px; color:var(--text-dim); font-weight:500; }
.dash .coverage-cell{ grid-row: 1 / 3; }
.coverage-bar{ position:relative; height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden; display:flex; }
.coverage-bar span{ display:block; height:100%; background:var(--good); }
.coverage-note{ font-size:12.5px; color:var(--text-dim); }
.stat-value.c-bad{ color:var(--bad); }
.stat-value.c-warn{ color:var(--warn); }
.stat-value.c-good{ color:var(--good); }

/* ---------- Section shell ---------- */
section.block{ display:flex; flex-direction:column; gap:14px; }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.block-title{ font-family:var(--font-display); font-size:19px; font-weight:700; display:flex; align-items:center; gap:9px; }
.block-title .count{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); font-weight:500; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 10px; }
.block-desc{ font-size:13.5px; color:var(--text-dim); }

/* ---------- Priority cards (fully missing) ---------- */
.missing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.miss-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--bad);
  border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow);
}
.miss-card .coll{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.miss-card .name{ font-size:14.5px; font-weight:600; }
.miss-card .act{ font-family:var(--font-mono); font-size:11.5px; color:var(--bad); margin-top:2px; }

/* ---------- Partial list ---------- */
.partial-list{ display:flex; flex-direction:column; gap:8px; }
.partial-row{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 15px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.partial-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.partial-row .titles{ display:flex; flex-direction:column; min-width:180px; flex:0 0 auto; }
.partial-row .coll{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.partial-row .name{ font-size:14px; font-weight:600; }
.partial-row .name-en{ font-size:11.5px; color:var(--text-faint); }
.partial-row .prog{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); white-space:nowrap; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.chip{ font-size:12px; padding:3px 9px; border-radius:999px; background:var(--warn-soft); color:var(--warn); white-space:nowrap; }
.posted-strip{ display:flex; flex-wrap:wrap; gap:8px; }
.posted-thumb{
  display:flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:4px 10px 4px 4px; text-decoration:none; color:var(--text); font-size:12px; transition:border-color .15s;
}
.posted-thumb:hover{ border-color:var(--accent); }
.posted-thumb img{ width:40px; height:23px; object-fit:cover; border-radius:4px; background:var(--border); flex:none; }

/* ---------- Full table ---------- */
.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search{
  flex:1 1 220px; background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:9px 13px; font-size:13.5px; color:var(--text); font-family:var(--font-body);
}
.search:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.search::placeholder{ color:var(--text-faint); }
.seg{ display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:2px; gap:2px; }
.seg button{ font-family:var(--font-body); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:7px; border:none; background:transparent; color:var(--text-dim); cursor:pointer; }
.seg button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sort-select{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:7px 10px;
}
.sort-select:focus{ outline:2px solid var(--accent); outline-offset:-1px; }

/* ---------- Tag filter panel ---------- */
.tag-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.tag-row{ display:flex; align-items:flex-start; gap:12px; }
.tag-row-label{
  flex:0 0 76px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; padding-top:6px;
}
.tag-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; align-items:center; }
.tag-chips.collapsed{ max-height:34px; overflow:hidden; }
.tag-btn{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.tag-btn:hover{ border-color:var(--accent); color:var(--text); }
.tag-btn.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tag-more{
  font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-dim); background:none;
  border:none; text-decoration:underline; cursor:pointer; padding:5px 4px;
}
.tag-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; border-top:1px solid var(--border); }
.tag-selected{ display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-dim); align-items:center; }
.tag-selected .none{ color:var(--text-faint); }
.tag-clear{
  font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--accent); background:none;
  border:none; cursor:pointer; padding:4px 6px; white-space:nowrap;
}
.tag-clear:disabled{ color:var(--text-faint); cursor:default; }

.table-shell{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.table-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:820px; }
thead th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  font-weight:600; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); position:sticky; top:0;
}
tbody tr.data-row{ border-bottom:1px solid var(--border); cursor:pointer; }
tbody tr.data-row:hover{ background:var(--surface-2); }
tbody td{ padding:9px 16px; vertical-align:middle; }
td.col-coll{ color:var(--text-dim); font-size:12.5px; white-space:nowrap; }
td.col-name{ font-weight:600; }
td.col-act{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); white-space:nowrap; }
td.col-prog{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.name-cell{ display:flex; align-items:center; gap:10px; }
.name-cell img{ width:56px; height:32px; object-fit:cover; border-radius:5px; background:var(--surface-2); flex:none; }
.name-cell .txt{ display:flex; flex-direction:column; gap:2px; }
.row-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.row-tag{ font-size:10px; font-weight:600; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; }
.mini-bar{ display:inline-block; width:56px; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-right:8px; vertical-align:middle; }
.mini-bar span{ display:block; height:100%; background:var(--good); }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
.pill.done{ background:var(--good-soft); color:var(--good); }
.pill.partial{ background:var(--warn-soft); color:var(--warn); }
.pill.none{ background:var(--bad-soft); color:var(--bad); }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
tr.exp-row td{ padding:0; }
.exp-panel{ padding:14px 20px 20px 20px; background:var(--surface-2); display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.exp-item{
  display:flex; align-items:center; gap:9px; font-size:12.5px; background:var(--surface); border:1px solid var(--border);
  border-radius:9px; padding:8px 10px; text-decoration:none; color:var(--text);
}
.exp-item.ok{ transition:border-color .15s, transform .1s; }
.exp-item.ok:hover{ border-color:var(--accent); transform:translateY(-1px); }
.exp-item.no{ opacity:.7; cursor:default; border-style:dashed; }
.exp-item .thumb{ width:52px; height:30px; border-radius:5px; object-fit:cover; background:var(--border); flex:none; }
.exp-item .thumb.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:9px; }
.exp-item .meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.exp-item .lbl{ color:var(--text-dim); font-size:11px; }
.exp-item.no .lbl{ color:var(--bad); }
.exp-item .ttl{ color:var(--text-faint); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-item.ok .ttl{ color:var(--text); }
.exp-item .views{ color:var(--text-faint); font-size:10.5px; font-variant-numeric:tabular-nums; }
.posted-thumb b{ font-weight:700; color:var(--text-faint); margin-left:5px; }
.posted-thumb b::before{ content:"· "; font-weight:400; }
td.col-views{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-dim); white-space:nowrap; }
.play-badge{
  position:relative;
}
.play-badge::after{
  content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:9px; text-shadow:0 1px 3px rgba(0,0,0,.6); opacity:0; transition:opacity .15s;
}
.exp-item.ok:hover .play-badge::after{ opacity:1; }

.empty-note{ padding:26px; text-align:center; color:var(--text-faint); font-size:13px; }

footer{ color:var(--text-faint); font-size:12px; text-align:center; padding-top:8px; display:flex; flex-direction:column; gap:4px; }
footer a{ color:var(--text-dim); }

@media (max-width:720px){
  .dash{ grid-template-columns:1fr 1fr; }
  .dash .coverage-cell{ grid-row:auto; grid-column:1 / 3; }
}
