:root { --fg:#1c2330; --muted:#6b7280; --line:#d7dce3; --bg:#f6f7f9; --ok:#1a7f37; --bad:#b42318; --warn:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); }
header nav { display:flex; flex-wrap:wrap; gap:12px; flex:1; }
main { max-width:1100px; margin:0 auto; padding:16px; }
section { background:#fff; border:1px solid var(--line); border-radius:6px; padding:12px 16px; margin-bottom:16px; overflow-x:auto; }
h1 { font-size:22px; } h2 { font-size:18px; margin-top:0; } h3 { font-size:16px; }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
tr.ok td:nth-child(2) { color:var(--ok); } tr.bad td { color:var(--bad); } tr.warn td { color:var(--warn); }
input, select, textarea, button { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:4px; background:#fff; max-width:100%; }
button { cursor:pointer; background:#eef1f5; } button.danger { background:#fbe9e7; border-color:#e5a39b; color:var(--bad); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; align-items:end; }
.grid label, form.narrow label { display:flex; flex-direction:column; gap:3px; }
form.narrow { max-width:340px; display:flex; flex-direction:column; gap:10px; }
label.check { flex-direction:row; align-items:center; gap:6px; }
form.inline, .actions { display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
.actions form { display:inline-flex; gap:6px; align-items:center; }
.muted { color:var(--muted); }
.flash { padding:8px 12px; border-radius:4px; border:1px solid var(--line); background:#fff; }
.flash.ok { border-color:#8fd19e; background:#f0fbf3; } .flash.error { border-color:#e5a39b; background:#fdf1ef; }
.state.running { color:var(--ok); } .state.crashed { color:var(--bad); }
pre.log, pre.diff, pre.clause { background:#0f1720; color:#e6edf3; padding:10px; border-radius:4px; overflow-x:auto; max-height:360px; margin:0; }
pre.clause { max-height:none; } .diff .add { color:#7ee787; } .diff .del { color:#ff7b72; }
.tabs { display:flex; gap:6px; margin-bottom:10px; } .tab.active { background:#dbe7ff; border-color:#8fb0f5; }
.cond { display:grid; grid-template-columns:1fr 150px 1fr auto; gap:8px; align-items:start; border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:8px; }
.operand { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border-left:3px solid var(--line); padding-left:6px; }
.operand .operand { flex-basis:100%; }
@media (max-width:700px) { .cond { grid-template-columns:1fr; } header nav { order:3; flex-basis:100%; } }