:root { --bg: #f6f7f9; --card: #fff; --ink: #1d2330; --muted: #5b6474; --line: #dde1e8; --accent: #1f5fbf;
    --ok: #1d7a46; --warn: #a15c00; --bad: #b3261e; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, sans-serif; }
  header { background: var(--card); border-bottom: 1px solid var(--line); padding: 14px 20px; }
  header h1 { margin: 0; font-size: 18px; }
  header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
  main { max-width: 760px; margin: 20px auto; padding: 0 16px 60px; }
  .dev { background: #fff4d6; border: 1px solid #f0d58a; padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
  section { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 12px; }
  section h2 { margin: 0 0 6px; font-size: 16px; display: flex; gap: 10px; align-items: center; }
  .badge { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
  .done .badge { color: var(--ok); border-color: var(--ok); }
  .problem .badge { color: var(--bad); border-color: var(--bad); }
  .next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .todo { opacity: .7; }
  ol { margin: 6px 0; padding-left: 22px; }
  button { font: inherit; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
  button.secondary { background: #fff; color: var(--accent); }
  button:disabled { opacity: .5; cursor: default; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
  .msg { margin-top: 8px; font-size: 14px; }
  .msg.ok { color: var(--ok); } .msg.bad { color: var(--bad); } .msg.warn { color: var(--warn); }
  pre { background: #f1f3f6; padding: 8px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; margin: 8px 0 0; max-height: 220px; overflow: auto; }
  .app { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
  .app:first-of-type { border-top: 0; margin-top: 0; }
  small { color: var(--muted); }
  nav { display: flex; gap: 16px; margin-top: 6px; font-size: 14px; }
  nav a { color: var(--accent); text-decoration: none; }
  nav a.here { font-weight: 600; color: var(--ink); }
  table.rules { width: 100%; border-collapse: collapse; }
  table.rules td { border-top: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
  table.rules td.pick { white-space: nowrap; width: 1%; }
  select, input[type=number], textarea { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
  textarea { width: 100%; min-height: 70px; }
  label.check { display: block; margin: 6px 0; }
  .field { margin: 10px 0; }
  .field b, .field > small { display: block; }
  .field > small { margin-bottom: 4px; }
  ul.changes { margin: 6px 0; padding-left: 22px; }
  main.wide { max-width: 1100px; }
  section.totals { display: flex; flex-wrap: wrap; gap: 10px; background: none; border: 0; padding: 0; }
  .total { flex: 1 1 150px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
  .total b { display: block; font-size: 24px; }
  .total span { display: block; font-size: 13px; }
  .total small { display: block; font-size: 12px; }
  .filters { display: flex; flex-wrap: wrap; gap: 12px; }
  .filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
  .filters select, .filters input { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); min-width: 160px; }
  .scroll { overflow-x: auto; margin-top: 10px; }
  table.events { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.events th { text-align: left; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px; }
  table.events td { border-top: 1px solid var(--line); padding: 6px; vertical-align: top; overflow-wrap: break-word; }
  td.nowrap { white-space: nowrap; }
  .tag { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 8px; border: 1px solid var(--bad); color: var(--bad); }
  small.why { display: block; margin-bottom: 2px; }
  .totals.inner { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
  .total.warnbox { border-color: var(--warn); }
  .total.warnbox small { color: var(--warn); }
  table.facts { border-collapse: collapse; margin: 6px 0; }
  table.facts th { text-align: left; font-weight: 600; padding: 4px 16px 4px 0; vertical-align: top; white-space: nowrap; }
  table.facts td { padding: 4px 0; }
  .cols { display: flex; flex-wrap: wrap; gap: 24px; }
  .cols > div { flex: 1 1 260px; }
  .cols h3 { font-size: 14px; margin: 4px 0; }
  .cols ol { margin: 4px 0; padding-left: 22px; }
  a.button { display: inline-block; padding: 6px 14px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; }