:root { --bg:#faf6f0; --ink:#2b2622; --muted:#7a6f66; --accent:#c8553d; --accent-d:#9c3d2a; --card:#fff; --line:#e4dbd0; --ok:#2f7d4f; --warn:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:12px 24px; background:#2f2a26; color:#fff; }
header h1 { margin:0; font-size:22px; letter-spacing:.5px; }
.gauge-bar { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:14px; }
.gauge-bar input { width:70px; }
.muted { color:var(--muted); }
header .muted { color:#c9beb2; }
.tabs { display:flex; flex-wrap:wrap; gap:4px; padding:8px 24px 0; border-bottom:1px solid var(--line); background:#fff; }
.tabs button { border:0; background:none; padding:10px 16px; font:inherit; cursor:pointer; border-bottom:3px solid transparent; color:var(--muted); }
.tabs button.active { color:var(--accent-d); border-bottom-color:var(--accent); font-weight:600; }
main { padding:20px 24px 48px; max-width:1200px; margin:0 auto; }
.panel { display:none; }
.panel.active { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:18px; align-items:start; }
.panel.wide.active { display:block; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.card h2 { margin:0 0 4px; font-size:17px; }
.card .hint { margin:0 0 12px; color:var(--muted); font-size:13px; }
.fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px 12px; margin-bottom:10px; }
label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:2px; }
input, select, textarea, button { font:inherit; }
input, select, textarea { padding:6px 8px; border:1px solid #cfc4b7; border-radius:6px; background:#fff; color:var(--ink); min-width:0; }
input[type=color] { padding:0; height:34px; }
input[type=checkbox] { width:auto; }
button { padding:6px 12px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent-d); }
button:hover { filter:brightness(.95); }
.out { font-size:14px; }
.out .err { color:var(--warn); }
.out table { border-collapse:collapse; width:100%; margin:6px 0; }
.out th, .out td { text-align:left; padding:3px 8px 3px 0; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
.out code, .instr { background:#f3ece3; padding:2px 6px; border-radius:4px; font-family:ui-monospace, Menlo, monospace; font-size:13px; }
.instr { display:block; padding:8px 10px; margin:6px 0; white-space:normal; }
.big { font-size:20px; font-weight:600; color:var(--accent-d); }
.good { color:var(--ok); font-weight:600; }
.bad { color:var(--warn); font-weight:600; }
.schematic { width:100%; max-width:440px; height:auto; background:#fffdf9; border:1px solid var(--line); border-radius:8px; margin-top:8px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:flex-end; margin-bottom:12px; }
.toolbar .grp { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; padding-right:14px; border-right:1px solid var(--line); }
.toolbar .grp:last-child { border-right:0; }
.toolbar input[type=number] { width:64px; }
.palette { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.swatch { width:30px; height:30px; border-radius:6px; border:2px solid #fff; box-shadow:0 0 0 1px #8886; cursor:pointer; position:relative; }
.swatch.sel { box-shadow:0 0 0 3px var(--accent); }
.swatch b { position:absolute; bottom:-1px; right:2px; font-size:10px; color:#fff; mix-blend-mode:difference; }
.stitch-btn { width:38px; height:38px; padding:2px; background:#fff; border:1px solid #cfc4b7; border-radius:6px; }
.stitch-btn.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.chart-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; touch-action:none; }
.chart-wrap svg { display:block; cursor:crosshair; user-select:none; }
.reader { background:#fff8e1; border:1px solid #f0d78a; border-radius:8px; padding:10px 14px; margin-top:12px; }
.counter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.counter .val { font-size:34px; font-weight:700; min-width:70px; text-align:center; }
.counter input { width:90px; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; }
.legend span { display:flex; align-items:center; gap:6px; }
textarea { width:100%; min-height:140px; }
@media (max-width:600px) { header, main, .tabs { padding-left:12px; padding-right:12px; } }
@media print {
  header, .tabs, .toolbar, .reader, .no-print, .panel:not(#tab-chart) { display:none !important; }
  #tab-chart { display:block !important; }
  body { background:#fff; }
  .chart-wrap { border:0; overflow:visible; }
}