:root { --bg:#f4f6f9; --card:#fff; --ink:#1b2430; --muted:#6b7684; --line:#e3e8ee; --accent:#1f6feb; --ok:#1a7f37; --bad:#c62828; --warn:#b26a00; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
nav.top { display:flex; align-items:center; gap:14px; padding:10px 20px; background:#0f1b2d; color:#fff; flex-wrap:wrap; }
nav.top a { color:#c9d4e3; text-decoration:none; padding:6px 8px; border-radius:6px; }
nav.top a.on, nav.top a:hover { background:#1d2d45; color:#fff; }
nav.top .brand { font-weight:700; color:#fff; font-size:17px; }
nav.top .spacer { flex:1; }
main { max-width: 1400px; margin: 0 auto; padding: 18px 20px 60px; }
h1 { font-size:24px; margin:8px 0 12px; } h2 { font-size:17px; margin:0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.card.narrow { max-width:380px; margin:60px auto; }
.card.sticky { position: sticky; top: 12px; }
.cols { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.cols.editor { grid-template-columns: 3fr 2fr; align-items:start; }
@media (max-width: 900px) { .cols, .cols.editor { grid-template-columns: 1fr; } }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .row.between { justify-content:space-between; }
.inline { display:inline; }
.muted { color:var(--muted); } .small { font-size:13px; } .nowrap { white-space:nowrap; } .mt { margin-top:12px; display:block; }
.ok { color:var(--ok); font-weight:600; } .bad { color:var(--bad); font-weight:600; } .warn { color:var(--warn); } .err { color:var(--bad); }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#e9edf2; color:#333; }
.pill.live { background:#1a7f37; color:#fff; } .pill.shadow { background:#f0b429; color:#222; } .pill.skipped { background:#ddd; }
.flash { background:#fff8e1; border-bottom:1px solid #f0d78c; padding:10px 20px; }
table.grid { width:100%; border-collapse:collapse; } table.grid th { text-align:left; font-size:12px; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:2px solid var(--line); }
table.grid td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; } table.grid.small td { padding:4px 6px; }
tr.dim td { opacity:.55; }
.clip { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pre { white-space:pre-wrap; }
label { display:block; margin:8px 0; font-weight:600; font-size:13px; color:#333; }
label input, label select, label textarea, td input { display:block; width:100%; margin-top:4px; padding:7px 9px; border:1px solid #cfd6df; border-radius:7px; font:inherit; font-weight:400; }
label.check { display:flex; align-items:center; gap:8px; font-weight:500; } label.check input { display:inline; width:auto; margin:0; }
input.tiny { display:inline-block !important; width:70px !important; margin:0 4px !important; }
td input.w6 { width:6em; } td input.w8 { width:8em; } td input.w10 { width:10em; } td input.w12 { width:13em; }
button, .button { font:inherit; padding:7px 14px; border-radius:7px; border:1px solid #c5ccd6; background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.danger { color:var(--bad); border-color:#e5b4b4; } button.small, .button.small { padding:4px 10px; font-size:13px; }
button.link { background:none; border:none; color:#c9d4e3; padding:6px 8px; } button.link:hover { color:#fff; }
button.toggle { width:46px; font-size:11px; font-weight:700; background:#ddd; } button.toggle.on { background:var(--ok); color:#fff; border-color:var(--ok); }
ul.plain { list-style:none; padding:0; margin:0 0 14px; } ul.plain li { padding:3px 0; }
.cond { display:grid; grid-template-columns: 2fr 1.2fr 1.2fr auto; gap:8px; align-items:center; margin:6px 0; }
.cond select, .cond input { padding:7px 9px; border:1px solid #cfd6df; border-radius:7px; font:inherit; width:100%; }
.indent { margin-left:26px; } .hidden { display:none; }
pre.msg { background:#f7f9fb; border:1px solid var(--line); border-radius:8px; padding:12px; white-space:pre-wrap; font: 14px/1.4 inherit; min-height:80px; }
code { background:#eef2f6; padding:1px 5px; border-radius:4px; font-size:12.5px; cursor:pointer; }
#condPreview div { padding:2px 0; }