:root {
  --bg:#f3f1ec; --panel:#faf9f6; --ink:#2a2a27; --muted:#75736d; --line:#dedbd3; --accent:#3f6fb5; --warn:#b3453d;
  --field:#fff; --hot:#fff3d6; --tip-bg:#2a2a27; --tip-ink:#f4f2ec; --label:#3c7a3c; --scene:#efede7;
}
:root[data-theme="dark"] {
  --bg:#171a20; --panel:#1e222a; --ink:#d9dbe0; --muted:#8e939d; --line:#2f3440; --accent:#6f9bd8; --warn:#e07a72;
  --field:#252a33; --hot:#3a3320; --tip-bg:#0f1116; --tip-ink:#e6e8ec; --label:#8ecf8e; --scene:#1b1f26;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; align-items:baseline; gap:14px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
header h1 { font-size:17px; margin:0; letter-spacing:.2px; font-weight:600; }
header .sub, .muted { color:var(--muted); }
header .spacer { flex:1; }
header .auto { color:var(--muted); font-size:13px; }
header #theme { font-size:12px; padding:3px 9px; }
main { display:grid; grid-template-columns: 400px 1fr; height: calc(100vh - 48px); }
aside { padding:12px; border-right:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:10px; overflow:auto; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
label { color:var(--muted); }
select, button, input[type=number], input[type=text], textarea { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--field); color:var(--ink); }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
textarea { width:100%; min-height:220px; font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding:8px; resize:vertical; }
textarea[readonly] { opacity:.8; }
.mono { font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre-wrap; }
.error { color:var(--warn); white-space:pre-wrap; font-size:12px; border:1px solid var(--warn); background:transparent; padding:8px; border-radius:6px; opacity:.9; }
details { border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
details summary { cursor:pointer; font-weight:600; font-size:13px; }
details > *:not(summary) { margin-top:6px; }
/* form */
#form { display:flex; flex-direction:column; gap:8px; }
.field { display:grid; grid-template-columns: 120px 1fr 64px; gap:8px; align-items:center; font-size:13px; }
.field label { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field input[type=range] { width:100%; accent-color:var(--accent); }
.field input[type=number] { width:64px; padding:3px 5px; font-size:12px; }
.field select, .field input[type=text] { grid-column: 2 / 4; }
.field.check { grid-template-columns: 120px 1fr; }
.field .vec { grid-column: 2 / 4; display:flex; gap:4px; }
.field .vec input { width:100%; padding:3px 5px; font-size:12px; }
.hint { color:var(--muted); font-size:12px; margin:0; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
/* view */
#view { position:relative; background:var(--scene); }
#canvas-host { position:absolute; inset:0; }
#viewbar { position:absolute; top:10px; left:12px; display:flex; gap:10px; align-items:center; background:color-mix(in srgb, var(--panel) 88%, transparent); padding:6px 10px; border-radius:6px; font-size:12px; }
#viewbar .sep { width:1px; height:18px; background:var(--line); }
#viewbar button { padding:2px 8px; font-size:12px; }
#legend { position:absolute; left:12px; bottom:10px; background:color-mix(in srgb, var(--panel) 85%, transparent); padding:6px 8px; border-radius:6px; }
/* pattern */
#pattern-panel { padding:14px 18px; background:var(--panel); border-top:1px solid var(--line); }
#pattern-panel h2 { font-size:16px; margin:0 12px 0 0; font-weight:600; }
#svg-host { position:relative; overflow:auto; border:1px solid var(--line); border-radius:6px; margin:10px 0; background:var(--field); max-height:70vh; }
#svg-wrap { position:relative; display:inline-block; }
#svg-wrap svg { display:block; height:260px; width:auto; }
#svg-host.assembly #svg-wrap svg { height:520px; }
/* Physical-size labels are hidden in the viewer and replaced by screen-sized ones. */
#svg-wrap svg text.label { visibility:hidden; }
:root[data-theme="dark"] #svg-wrap svg #cut * { stroke:#e6e8ec; }
:root[data-theme="dark"] #svg-wrap svg #roll { stroke:#5b6170; }
:root[data-theme="dark"] #svg-wrap svg text { fill:#9fd39f; }
#svg-wrap svg [data-panel]:hover, #svg-wrap svg [data-panel].hot { stroke:#e6a100 !important; stroke-width:2.5; cursor:pointer; }
.ov-label { position:absolute; transform:translate(-50%,-50%); font:600 12px/1.2 system-ui, sans-serif; color:var(--label); background:color-mix(in srgb, var(--field) 80%, transparent); padding:1px 5px; border-radius:4px; pointer-events:none; white-space:nowrap; }
#svg-tip { position:fixed; z-index:10; background:var(--tip-bg); color:var(--tip-ink); font:12px/1.4 ui-monospace, Menlo, monospace; padding:6px 8px; border-radius:6px; pointer-events:none; white-space:pre; }
.toggle { margin-left:auto; color:var(--muted); }
.toggle button { padding:1px 8px; margin-left:4px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:right; padding:4px 8px; border-bottom:1px solid var(--line); }
th:first-child, td:first-child, th:last-child, td:last-child { text-align:left; }
td.warn { color:var(--warn); }
/* outline editor */
#ol-tables table { font-size:12px; margin-top:6px; }
#ol-tables th, #ol-tables td { padding:2px 6px; text-align:left; }
#ol-tables td input[type=number] { width:64px; padding:1px 4px; font-size:12px; }
#ol-tables tr.selected td { background:var(--hot); }
#ol-messages .error { color:var(--warn); border:0; background:none; padding:0; }
#ol-messages .warn { color:#c8892a; }
#ol-messages .info { color:var(--muted); }