:root {
  --ink:#14181f; --muted:#6b7480; --line:rgba(20,24,31,.10); --bg:#f6f5f2; --card:#fff;
  --ok:#1f8a5f; --bad:#b4483c; --warn:#c9922f;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif; }
a { color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding:0 28px 80px; }

/* nav */
.nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(246,245,242,.86); border-bottom:1px solid var(--line); }
.nav-in { max-width:1180px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:22px; }
.brand { font-size:13px; font-weight:650; letter-spacing:.02em; margin-right:auto; }
.brand small { display:block; font-weight:400; color:var(--muted); font-size:11px; letter-spacing:.04em; }
.tabs { display:flex; gap:4px; }
.tabs a { text-decoration:none; font-size:13.5px; color:var(--muted); padding:7px 14px; border-radius:999px; }
.tabs a:hover { background:rgba(20,24,31,.05); color:var(--ink); }
.tabs a.on { background:var(--ink); color:#fff; }

/* header */
.head { padding:46px 0 0; }
.eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
h1 { font-size:40px; line-height:1.15; margin:10px 0 14px; letter-spacing:-.02em; }
.lede { max-width:760px; color:var(--muted); margin:0 0 26px; }
.meta-strip { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:13px; color:var(--muted); }
.chip b { color:var(--ink); font-weight:600; }

/* cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;
  position:relative; overflow:hidden; }
.card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
.card header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.agent { display:flex; align-items:center; gap:9px; }
.agent i { width:9px; height:9px; border-radius:50%; background:var(--accent); display:block; }
.agent h2 { font-size:16px; margin:0; }
.badge { font-size:12px; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.ok { background:rgba(31,138,95,.10); color:var(--ok); }
.badge.bad { background:rgba(180,72,60,.10); color:var(--bad); }
.score { display:flex; align-items:baseline; gap:6px; margin:16px 0 4px; }
.score .num { font-size:46px; font-weight:650; letter-spacing:-.03em; }
.score .unit { color:var(--muted); font-size:14px; }
.dims { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 16px; }
.dim { background:rgba(20,24,31,.035); border-radius:10px; padding:8px 6px; text-align:center; }
.dim span { display:block; font-size:10.5px; line-height:1.3; color:var(--muted); }
.dim b { font-size:16px; }
.meta { display:grid; grid-template-columns:1fr; gap:6px; margin:0; padding-top:14px;
  border-top:1px solid var(--line); }
.meta div { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; align-items:baseline; }
.meta dt { color:var(--muted); flex:none; } .meta dd { margin:0; text-align:right; word-break:break-word; }
.summary { margin:14px 0 0; font-size:13.5px; color:#3a4250; }

/* section + table */
h3 { font-size:22px; margin:56px 0 14px; letter-spacing:-.01em; }
h4 { font-size:13px; letter-spacing:.06em; color:var(--muted); margin:20px 0 10px; }
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:14px;
  overflow:hidden; font-size:13.5px; border:1px solid var(--line); }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
th { font-weight:600; color:var(--muted); font-size:12px; letter-spacing:.04em; background:#fbfbf9; }
tr:last-child td { border-bottom:none; }
td.strong { font-weight:650; }
td.rank { color:var(--muted); width:38px; }

/* dimension analysis */
.dimblock { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:14px; }
.dimblock h4 { margin:0 0 4px; font-size:14px; letter-spacing:0; color:var(--ink); }
.dimblock .hint { color:var(--muted); font-size:12.5px; margin:0 0 14px; }
.bar-row { display:grid; grid-template-columns:132px 1fr 92px; gap:12px; align-items:center; margin:9px 0; font-size:13px; }
.bar-track { height:9px; border-radius:99px; background:rgba(20,24,31,.06); overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; background:var(--accent); }
.bar-val { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.bar-val b { color:var(--ink); font-weight:600; }
.state { font-size:11px; padding:1px 7px; border-radius:99px; border:1px solid var(--line); color:var(--muted); margin-left:6px; }
.just { margin-top:10px; }
.just details { border-top:1px dashed var(--line); padding:8px 0; }
.just summary { cursor:pointer; font-size:12.5px; color:var(--muted); }
.just p { margin:6px 0 0; font-size:13px; color:#3a4250; }

/* takeaway + method */
.takeaway { margin-top:26px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px 24px 20px; }
.takeaway h3 { margin:0 0 8px; font-size:15px; }
.takeaway ul { margin:0; padding-left:18px; color:#3a4250; font-size:13.5px; }
.takeaway li { margin:5px 0; }
.method { margin-top:56px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:24px; }
.method h3 { margin:0 0 12px; font-size:17px; }
.method ul { margin:0; padding-left:18px; color:#3a4250; font-size:13.5px; }
.method li { margin:6px 0; }
footer { margin-top:36px; color:var(--muted); font-size:12px; }
.muted { color:var(--muted); }

/* cases page */
.selector { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px; }
.selector .label { font-size:12px; color:var(--muted); letter-spacing:.06em; margin-right:4px; }
.pill { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 14px;
  font-size:13px; cursor:pointer; color:var(--muted); display:inline-flex; gap:8px; align-items:center; }
.pill:hover { color:var(--ink); }
.pill.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--accent, #999); }
.pill .mini { font-size:11.5px; opacity:.75; font-variant-numeric:tabular-nums; }

.stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr); gap:18px; align-items:start; }
@media (max-width:900px) { .stage { grid-template-columns:1fr; } }
.player { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.player .bar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.player .bar .grow { margin-left:auto; }
.player .bar button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 10px;
  font-size:12px; cursor:pointer; color:var(--muted); }
.player .bar button:hover { color:var(--ink); }
.frame { position:relative; aspect-ratio:16/9; background:#0f1216; }
.frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.frame .empty { position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; color:#c9d1da; font-size:13px; text-align:center; padding:24px; }

.side { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.side .top { display:flex; align-items:baseline; gap:8px; }
.side .top .num { font-size:38px; font-weight:650; letter-spacing:-.03em; }
.side .top .unit { color:var(--muted); font-size:13px; }
.side .top .badge { margin-left:auto; }
.side dl { display:grid; gap:6px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.side dl div { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.side dt { color:var(--muted); flex:none; } .side dd { margin:0; text-align:right; word-break:break-word; }
.side .mini-dims { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.side .mini-dims div { background:rgba(20,24,31,.035); border-radius:10px; padding:7px 4px; text-align:center; }
.side .mini-dims span { display:block; font-size:10.5px; color:var(--muted); }
.side .mini-dims b { font-size:15px; }

/* coverage + findings */
.coverage, .findings { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.coverage li { display:flex; gap:10px; align-items:flex-start; background:#fafaf8;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.coverage .dot { width:8px; height:8px; border-radius:50%; margin-top:6px; background:#ccc; flex:none; }
.coverage li.covered .dot { background:var(--ok); }
.coverage li.partial .dot { background:var(--warn); }
.coverage li.missing .dot { background:var(--bad); }
.coverage p { margin:0; font-size:13.5px; } .coverage small { color:var(--muted); }
.coverage em { margin-left:auto; font-style:normal; font-size:12px; color:var(--muted); }
.finding { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fafaf8; }
.finding.high { border-left:3px solid var(--bad); }
.finding.medium { border-left:3px solid var(--warn); }
.finding.low { border-left:3px solid #8a929c; }
.fh { display:flex; gap:9px; align-items:center; margin-bottom:6px; }
.sev { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.finding p { margin:4px 0; font-size:13.5px; }
.finding .cause,.finding .fix,.finding .verify { color:var(--muted); font-size:13px; }
.refs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.refs code { background:rgba(20,24,31,.05); border-radius:6px; padding:2px 7px; font-size:11.5px; }

.panel-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-top:16px; }
.panel-card h3 { margin:0 0 12px; font-size:16px; }
.prompt { white-space:pre-wrap; font-size:13px; color:#3a4250; background:#fafaf8; border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; max-height:340px; overflow:auto; }

/* site overview */
.blink { text-decoration:none; }
.blink:hover b { text-decoration:underline; }
.bnote { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
td.ver { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:#3a4250; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.dimkey { color:var(--muted); font-weight:400; font-size:11px; }
.tnote { margin:10px 2px 0; font-size:12.5px; color:var(--muted); line-height:1.6; }

/* suites / task detail */
.task-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }
.task-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.task-card:hover { border-color:#c7c7bf; transform:translateY(-1px); }
.task-card .th { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.task-card h4 { margin:0; font-size:15px; color:var(--ink); }
.task-card p { margin:8px 0 0; font-size:12.5px; }
.task-card .open-hint { color:var(--muted); margin-top:10px; }
.tiny-scores { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tiny-score { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap;
  background:rgba(20,24,31,.035); border-radius:8px; padding:5px 9px; }
.tiny-score i { width:7px; height:7px; border-radius:50%; background:var(--accent); display:block; }
.tiny-score b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.task-view { margin-top:6px; }
.crumb { display:flex; align-items:center; gap:12px; margin:10px 0 6px; color:var(--muted); font-size:12.5px; }
.crumb button { cursor:pointer; }
.task-head h2 { font-size:30px; margin:8px 0 12px; letter-spacing:-.02em; }
.task-head .meta-strip { margin-bottom:8px; }
.agent-tabs { display:flex; flex-wrap:wrap; gap:8px; }
tr.sel td { background:#f1f4fa; }
.prompt-wrap summary { cursor:pointer; font-size:14px; color:var(--muted); }
.prompt-wrap .prompt { margin-top:12px; }
.table-scroll { overflow-x:auto; border-radius:14px; }
.table-scroll table { min-width:640px; }
.table-scroll th, .table-scroll td { white-space:nowrap; padding:10px; font-size:13px; }
.table-scroll th { font-size:11.5px; }