* { box-sizing: border-box; }
html { color-scheme: dark; background: hsl(var(--canvas)); }
body { margin: 0; min-width: 320px; color: hsl(var(--text)); background: hsl(var(--canvas)); font-family: var(--font-sans); }
button, input, select { font: inherit; }
.shell { min-height: 100vh; }
.app-header { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid hsl(var(--border-subtle)); padding: 14px 20px; }
.brand { display: flex; align-items: center; gap: 9px; color: hsl(var(--text-strong)); white-space: nowrap; }
.brand__mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid hsl(var(--accent) / .45); border-radius: 6px; color: hsl(var(--accent)); font: 800 .66rem var(--font-mono); }
.brand strong { font: 700 .84rem var(--font-display); letter-spacing: .03em; }
.tagline { margin: 0; color: hsl(var(--text-faint)); font: .68rem var(--font-mono); }
.main { display: flex; flex-direction: column; gap: 16px; max-width: 980px; margin: 0 auto; padding: 20px; }
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font: .62rem var(--font-mono); color: hsl(var(--text-muted)); }
.field--grow { flex: 1; min-width: 220px; }
.field input, .field select { height: 32px; border: 1px solid hsl(var(--border-default)); border-radius: 6px; outline: 0; background: hsl(var(--nested) / .72); color: hsl(var(--text)); padding: 0 9px; font: .65rem var(--font-mono); }
.field input:focus, .field select:focus { border-color: hsl(var(--accent)); }
.status-line { margin: 6px 0 0; color: hsl(var(--text-faint)); font: .62rem var(--font-mono); }
.status-line--error { color: hsl(var(--danger)); }
.status-line--ok { color: hsl(var(--live)); }
.seed-reveal { margin-top: 10px; border: 1px solid hsl(var(--warning) / .5); border-radius: 6px; background: hsl(var(--warning) / .08); padding: 10px; font: .62rem var(--font-mono); }
.seed-reveal p { margin: 0 0 6px; color: hsl(var(--text-strong)); }
.seed-reveal code { display: block; overflow-wrap: anywhere; color: hsl(var(--text)); }
.mesh-table { width: 100%; margin-top: 10px; border: 1px solid hsl(var(--border-subtle)); border-radius: 7px; border-collapse: collapse; background: hsl(var(--surface) / .58); font: .62rem var(--font-mono); }
.mesh-table th, .mesh-table td { border-bottom: 1px solid hsl(var(--border-subtle)); padding: 7px 9px; text-align: left; white-space: nowrap; }
.mesh-table th { color: hsl(var(--text-faint)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mesh-table td { color: hsl(var(--text)); }
.mesh-table tr:last-child td { border-bottom: none; }
.mesh-table a { color: hsl(var(--accent)); text-decoration: none; }
.mesh-table a:hover { text-decoration: underline; }