@import url("/fonts/MiSansVF.min.css");

* { box-sizing: border-box; }
:root { color-scheme: light; --paper:#fff; --surface:#fafafa; --ink:#151515; --muted:#666; --line:#ddd; --ok:#1f7a44; --wait:#8a6100; --bad:#b32d2d; --idle:#5b5b5b; }

body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.7 "MiSans VF",MiSans,'Microsoft YaHei',sans-serif; }
a { color:inherit; text-underline-offset:4px; }
header { display:flex; align-items:center; justify-content:space-between; padding:22px max(24px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--line); }
header a { text-decoration:none; font-weight:650; }
header span { font-weight:400; margin-left:12px; color:var(--muted); }
main { max-width:1440px; margin:auto; padding:32px 24px 70px; }
h1 { font-size:30px; line-height:1.3; font-weight:550; margin:6px 0 24px; }
h2 { font-size:22px; line-height:1.5; margin:0 0 14px; }
h3 { font-size:15px; margin:20px 0 8px; }
.eyebrow { font-size:10px; letter-spacing:.18em; color:var(--muted); margin:0; }
.muted, small { color:var(--muted); }
.login { max-width:440px; margin:70px auto; }
.login form { margin-top:30px; }
.heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
nav { display:flex; gap:6px; border-bottom:1px solid var(--line); margin:10px 0 18px; padding-bottom:10px; }

button, input, textarea, select { font:inherit; color:inherit; }
button { border:1px solid var(--line); background:var(--paper); padding:8px 14px; cursor:pointer; border-radius:4px; }
button:hover { background:var(--surface); }
button[aria-current], .primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
button:disabled { opacity:.45; cursor:wait; }
input, textarea, select { width:100%; background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:8px 10px; margin:4px 0 0; }
textarea { min-height:130px; resize:vertical; }
label { display:block; font-size:13px; margin:0 0 14px; }
label input, label textarea, label select { font-size:15px; }
label:has(input[type=checkbox]) { display:flex; gap:8px; align-items:center; }
input[type=checkbox] { width:auto; margin:0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.error { color:var(--bad); }
#notice { min-height:1.7em; margin:20px 0 0; font-size:14px; }

/* 筛选条 */
.filters { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { padding:6px 12px; font-size:13px; border-radius:999px; white-space:nowrap; }
.chip[aria-current] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tools .search { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; white-space:nowrap; }
.tools .search input { width:230px; margin:0; }
.tools .page-size { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; white-space:nowrap; }
.tools .page-size select { width:auto; margin:0; padding:6px 8px; }

/* 两栏：左侧行列表 + 右侧详情 */
.columns { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr); gap:26px; align-items:start; }
.list-pane { border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); }
.rows { display:flex; flex-direction:column; max-height:calc(100vh - 260px); overflow:auto; }
.rows > p { margin:0; padding:18px; }
.row { display:grid; grid-template-columns:142px minmax(0,1fr) 96px 92px; gap:12px; align-items:center; width:100%; text-align:left; padding:11px 14px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--paper); font-size:14px; }
.row:hover { background:var(--surface); }
.row[aria-pressed="true"] { background:#f2f2f2; box-shadow:inset 3px 0 0 var(--ink); }
.row:last-child { border-bottom:0; }
.row-head { position:sticky; top:0; z-index:2; background:var(--surface); font-size:12px; letter-spacing:.06em; color:var(--muted); cursor:default; border-bottom:1px solid var(--line); padding:8px 14px; grid-template-columns:142px minmax(0,1fr) 96px 92px; display:grid; gap:12px; }
.row-head:hover { background:var(--surface); }
.cell { min-width:0; }
.cell.time { color:var(--muted); font-variant-numeric:tabular-nums; font-size:12.5px; white-space:nowrap; }
.cell.main { display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.cell.main strong { font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell.main small { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell.tag { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell.state { text-align:right; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; border:1px solid currentColor; font-size:12px; line-height:1.6; white-space:nowrap; }
.badge.ok { color:var(--ok); }
.badge.wait { color:var(--wait); }
.badge.bad { color:var(--bad); }
.badge.idle { color:var(--idle); }
.list-foot { display:flex; flex-direction:column; gap:10px; align-items:center; padding:12px; border-top:1px solid var(--line); background:var(--surface); }
.list-foot p { margin:0; font-size:13px; }
.list-foot button { width:100%; max-width:320px; }

/* 详情 */
.detail { border:1px solid var(--line); border-radius:6px; padding:20px; background:var(--paper); position:sticky; top:16px; max-height:calc(100vh - 40px); overflow:auto; }
.detail > p.body { white-space:pre-wrap; overflow-wrap:anywhere; }
.detail .meta { color:var(--muted); font-size:13px; margin:0 0 10px; }
.detail .images { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:10px; }
.detail figure { margin:0; }
.detail figure img { width:100%; height:auto; border:1px solid var(--line); border-radius:4px; display:block; }
.detail figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.check-row { font-size:13px; }

@media (max-width:1080px) {
  .columns { grid-template-columns:minmax(0,1fr); }
  .rows { max-height:none; }
  .detail { position:static; max-height:none; }
  .row, .row-head { grid-template-columns:112px minmax(0,1fr) 88px; }
  .row-head span:nth-child(3), .row .cell.tag { display:none; }
}
@media (max-width:680px) {
  .row, .row-head { grid-template-columns:minmax(0,1fr) 84px; }
  .row-head span:nth-child(1), .row .cell.time { display:none; }
  .tools .search input { width:150px; }
}