:root { --fg: #1a1a1a; --muted: #57606a; --line: #d0d7de; --soft: #f6f8fa; --blue: #0969da; --green: #1a7f37; --red: #cf222e; --amber: #9a6700; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--fg); background: #fff; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
main { max-width: 1280px; margin: 0 auto; padding: 12px 16px 48px; }
h1 { font-size: 20px; margin: 8px 0 4px; } h2 { font-size: 16px; margin: 20px 0 6px; } h3 { font-size: 13px; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .02em; }
h2 small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }
.top { display: flex; align-items: center; gap: 20px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.top .brand { font-weight: 700; color: var(--fg); } .top nav a { margin-right: 14px; } .top form { margin-left: auto; }
.who { color: var(--muted); margin-right: 10px; font-size: 12px; }
.banner { padding: 8px 16px; font-size: 13px; } .banner.ok { background: #dafbe1; color: var(--green); } .banner.bad { background: #ffebe9; color: var(--red); } .banner.warn { background: #fff8c5; color: var(--amber); }
.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.counts .badge { margin-right: 4px; }
.run { color: var(--muted); font-size: 12px; } .run.bad { color: var(--red); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--soft); font-weight: 600; }
td { padding: 6px 8px; border-bottom: 1px solid #eaeef2; vertical-align: top; }
tr.held td { background: #fffdf2; }
td.why { max-width: 460px; } td.activity { white-space: nowrap; color: var(--muted); } td.actions { white-space: nowrap; }
.sub { color: var(--muted); font-size: 12px; } .note { color: var(--muted); font-size: 11px; max-width: 160px; }
.warn-text { color: var(--amber); } .error { color: var(--red); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--soft); color: var(--muted); white-space: nowrap; }
.s-DRAFT { background: #ddf4ff; color: var(--blue); } .s-SENT { background: #dafbe1; color: var(--green); } .s-HELD { background: #fff8c5; color: var(--amber); }
.s-FAILED { background: #ffebe9; color: var(--red); } .s-DRAFTING { background: #fbefff; color: #8250df; } .s-WATCHING { background: var(--soft); color: var(--muted); }
.s-DISMISSED, .s-EXPIRED { background: var(--soft); color: #8b949e; }
.f-strong { background: #1a7f37; color: #fff; } .f-good { background: #dafbe1; color: var(--green); } .f-weak { background: #fff8c5; color: var(--amber); } .f-no { background: var(--soft); color: #8b949e; }
td.fit { white-space: nowrap; } td.fit .badge { margin-right: 2px; } .legend { margin: 2px 0 6px; }
.p-paid { background: #dafbe1; color: var(--green); } .p-free { background: var(--soft); color: var(--muted); }
.t-demo { background: #dafbe1; color: var(--green); } .t-watch { background: #fff8c5; color: var(--amber); } .t-no { background: var(--soft); color: #8b949e; }
.c-high { background: #dafbe1; color: var(--green); } .c-medium { background: #fff8c5; color: var(--amber); } .c-low { background: #ffebe9; color: var(--red); }
.empty { color: var(--muted); }
.cols { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(360px, 6fr); gap: 32px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0; } dt { color: var(--muted); } dd { margin: 0; }
.signals td { padding: 3px 6px; font-size: 12px; } .signals .pts { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--green); width: 36px; } .signals .pts.zero { color: #8b949e; }
.sources { font-size: 12px; padding-left: 18px; } .sources a { word-break: break-all; }
.note-box { background: var(--soft); padding: 6px 10px; border-left: 3px solid var(--line); font-size: 12px; }
.editor label { display: block; margin: 8px 0 4px; font-weight: 600; font-size: 12px; color: var(--muted); }
.editor input, .editor textarea, .editor select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.editor textarea { font-family: inherit; line-height: 1.5; resize: vertical; }
.editor input[readonly] { background: var(--soft); color: var(--muted); }
.from-select { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .from-select label { display: flex; align-items: center; gap: 8px; margin: 0; } .from-select select { width: auto; }
button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); cursor: pointer; margin-top: 8px; }
button.primary { background: var(--green); color: #fff; border-color: var(--green); } button.primary:disabled { background: #94d3a2; border-color: #94d3a2; cursor: not-allowed; }
button.small { padding: 3px 8px; font-size: 12px; margin-top: 0; } button.danger { color: var(--red); } button.link { background: none; border: none; color: var(--blue); padding: 0; margin: 0; }
.inline { display: inline-block; } .inline select, .inline input { width: auto; }
.send-row { display: flex; gap: 12px; align-items: center; margin: 10px 0 20px; }
.secondary-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.secondary-row form { display: flex; gap: 6px; align-items: center; }
pre.mail { white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font: 13px/1.5 inherit; font-family: inherit; }
pre.diff { white-space: pre-wrap; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft); padding: 8px 10px; border-radius: 6px; }
details { margin: 6px 0; } summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.sent-item summary { font-size: 13px; color: var(--fg); }
.login { max-width: 360px; margin: 60px auto; } .login label { display: block; margin: 10px 0 4px; } .login input { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.crumb { margin: 4px 0 8px; font-size: 12px; }
code { background: var(--soft); padding: 1px 4px; border-radius: 4px; }