:root {
  --paper: #f6f3ec;
  --paper-soft: #fbf9f4;
  --ink: #151517;
  --muted: #74736f;
  --faint: #aaa9a4;
  --line: #d9d6ce;
  --line-strong: #c9c6bd;
  --blue: #303dc8;
  --blue-soft: #e8eafe;
  --green: #2fb47c;
  --amber: #efa81b;
  --red: #d75f58;
  --font-ui: "Manrope", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
button:disabled, textarea:disabled { cursor: not-allowed; }

.state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.state-running { background: var(--blue); }
.state-done { background: var(--green); }
.state-waiting { background: var(--amber); }
.state-planned { background: #b8b7b2; }
.state-failed { background: var(--red); }

.brand-square { display: inline-block; width: 14px; height: 14px; background: var(--blue); }
.hidden { display: none !important; }