:root { --bg:#f6f7f9; --fg:#1d232b; --muted:#5a6573; --card:#fff; --line:#dde2e8; --ok:#1f7a3f; --warn:#9a6700; --fail:#b42318; --unk:#5a6573; --accent:#1e5aa8; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
.banner { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:.6rem 1rem; color:#fff; background:#2d3540; }
body.env-birdome .banner { background:#1f6f43; }
body.env-septona .banner { background:#1e4f8f; }
.banner .env { font-weight:700; letter-spacing:.08em; border:1px solid #fff8; padding:.1rem .5rem; border-radius:4px; }
.banner nav a { color:#fff; margin-right:.8rem; text-decoration:none; }
.banner .who { margin-left:auto; display:flex; gap:.5rem; align-items:center; font-size:.85rem; }
main { max-width:1150px; margin:0 auto; padding:1rem; }
footer { color:var(--muted); font-size:.8rem; text-align:center; padding:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin:1rem 0; overflow-x:auto; }
.card.narrow { max-width:480px; margin:3rem auto; }
.card.attention { border-left:4px solid var(--warn); }
.card.ok { border-left:4px solid var(--ok); }
.card.status { display:flex; gap:2rem; flex-wrap:wrap; align-items:center; }
.label { color:var(--muted); font-size:.8rem; text-transform:uppercase; margin-right:.4rem; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr.child td:first-child { padding-left:1.4rem; }
code { font-size:.85em; overflow-wrap:anywhere; }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:4px; font-size:.8rem; font-weight:600; border:1px solid var(--line); }
.badge.exec { background:#eef2f7; border-color:#c9d3df; }
.exec-completed { color:var(--ok); } .exec-failed, .exec-rejected, .exec-cancelled { color:var(--fail); }
.exec-waiting_approval { color:var(--warn); } .exec-running, .exec-created, .exec-validating { color:var(--accent); }
.health { color:#fff; border:none; }
.health-pass { background:var(--ok); } .health-warn { background:var(--warn); } .health-fail, .health-error { background:var(--fail); }
.health-unknown, .health-none { background:var(--unk); }
.step-succeeded { color:var(--ok); } .step-failed { color:var(--fail); } .step-running, .step-ready, .step-retry_wait { color:var(--accent); }
.step-waiting_approval { color:var(--warn); } .step-skipped, .step-pending { color:var(--muted); }
button { font:inherit; padding:.4rem .9rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--fail); border-color:var(--fail); }
button:disabled { opacity:.5; cursor:wait; }
.banner button { background:transparent; border-color:#fff8; }
.banner .lang { display:flex; gap:.25rem; margin-left:auto; }
.banner .lang button { padding:.2rem .5rem; font-size:.85rem; }
.banner .lang + .who { margin-left:.75rem; }
.banner .lang button[aria-current] { opacity:1; cursor:default; background:#fff2; font-weight:600; }
.msg { min-height:1.4em; color:var(--muted); } .msg.bad { color:var(--fail); }
.notice { font-weight:600; }
.legend { color:var(--muted); font-size:.9rem; }
.filters, form.start { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
input { font:inherit; padding:.3rem .5rem; border:1px solid var(--line); border-radius:6px; }

/* Help Center (UX/L10n phase 4) */
.help { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.help-toc { position: sticky; top: .5rem; font-size: .92rem; }
.help-toc ul { list-style: none; padding: 0; margin: .3rem 0 1rem; }
.help-toc li { margin: .25rem 0; }
.help-toc h3 { font-size: .85rem; margin: 1rem 0 .2rem; color: var(--muted, #5a6573); }
.help-search label { display: block; font-size: .85rem; }
.help-search input { width: 100%; margin: .2rem 0; }
.help-body { max-width: 860px; line-height: 1.5; }
.help-body h2 { margin-top: 1.4rem; }
.help-meta { color: var(--muted, #5a6573); font-size: .85rem; }
.help-cards li, .help-results li, .help-steps li, .help-example li { margin: .55rem 0; }
.help-catalog .status-active { background: #ecf7ee; } .help-catalog .status-mcp_only { background: #f3f4f6; }
.help-catalog .status-not_eligible, .help-catalog .status-planned { background: #fff4e5; }
.rule-explain { background: #f6f2ff; border: 1px solid #d9cdf5; border-radius: 6px; padding: .45rem .6rem; }
.help-links { margin: -.4rem 0 .8rem; }
.toolbar .help-link { margin-left: auto; }
@media (max-width: 800px) { .help { grid-template-columns: 1fr; } .help-toc { position: static; } }