* { box-sizing: border-box; }
body { font: 14px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #f7f7f8; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
header { background: #111; color: #fff; padding: 12px 0; margin-bottom: 24px; }
header .wrap { display: flex; align-items: center; gap: 24px; }
header strong { font-size: 15px; letter-spacing: .3px; }
header nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
header nav a { color: #ddd; text-decoration: none; }
header nav a:hover { color: #fff; }
header nav .muted { color: #888; font-size: 12px; }
h1 { margin: 0 0 16px; font-size: 22px; }
h2 { margin: 24px 0 12px; font-size: 17px; }
h3 { margin: 0 0 8px; font-size: 15px; }
h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.card { background: #fff; border: 1px solid #e3e3e7; border-radius: 8px; padding: 18px; margin: 16px 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.grid .span2 { grid-column: span 2; }
.grid .span4 { grid-column: span 4; }
label { display: block; font-size: 12px; color: #555; }
label input, label textarea, label select { display: block; width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; margin-top: 2px; }
input[type=number] { max-width: 100%; }
.inline { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 10px 0; }
.inline label { font-size: 12px; }
.inline input { width: 160px; }
button { background: #1565d8; color: #fff; border: 0; padding: 8px 14px; border-radius: 4px; font: inherit; cursor: pointer; }
button:hover { background: #0d4fb0; }
button.small { padding: 4px 8px; font-size: 12px; }
button.danger { background: #c0392b; }
button.danger:hover { background: #902b22; }
table.data { width: 100%; border-collapse: collapse; margin: 8px 0; background: #fff; border: 1px solid #e3e3e7; border-radius: 6px; overflow: hidden; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
table.data th { background: #fafafa; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #555; }
table.data tr:last-child td { border-bottom: 0; }
table.data .r { text-align: right; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; letter-spacing: .3px; }
.pill.ok { background: #e4f5df; color: #2e7d32; }
.pill.warn { background: #fff4e1; color: #a3620d; }
.pill.bad { background: #fde8e6; color: #a3251a; }
.muted { color: #888; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 11.5px; }
blockquote { border-left: 3px solid #cfd3da; margin: 0 0 16px; padding: 2px 12px; color: #555; }
a { color: #1565d8; }

/* Quick issue preset grid */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.quick { background: #fafbfd; border: 1px solid #e3e3e7; border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.quick .quick-plan { font-size: 15px; font-weight: 600; }
.quick .quick-spec { font-size: 12px; color: #333; }
.quick .quick-feat { font-size: 11px; color: #777; min-height: 24px; }
.quick label { font-size: 11px; color: #555; }
.quick label input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; margin-top: 2px; }
.quick button { background: #1565d8; color: #fff; border: 0; padding: 8px 10px; border-radius: 4px; font: inherit; cursor: pointer; margin-top: 4px; }
.quick button:hover { background: #0d4fb0; }

details > summary { cursor: pointer; }