:root {
  --ink: #202420;
  --muted: #747a72;
  --paper: #f6f3ed;
  --panel: #fffdfa;
  --line: #d8d5cc;
  --accent: #d96542;
  --accent-dark: #9d3e27;
  --sage: #d9dfd0;
  --grid: rgba(107, 122, 104, .14);
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: "Zen Kaku Gothic New", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { height: 84px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,253,250,.75); }
.brand-lockup, .project-meta, .selected-topline, .selected-input-row, .workspace-footer, .toolbar, .inspector-heading { display: flex; align-items: center; }
.brand-mark { width: 40px; height: 40px; margin-right: 12px; display: grid; place-items: center; color: var(--paper); background: var(--ink); font-size: 22px; font-weight: 900; transform: rotate(-4deg); }
.eyebrow { color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .12em; }
h1 { margin: 5px 0 0; font-size: 21px; line-height: 1; letter-spacing: .08em; }
.project-meta { gap: 10px; color: var(--muted); font-size: 12px; }
.status-dot, .live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #6e9a5a; }
.icon-button { margin-left: 16px; padding: 10px 17px; color: var(--paper); background: var(--ink); border: 0; font-size: 12px; letter-spacing: .08em; }
.print-button { background: var(--accent); }
.app-shell { min-height: calc(100vh - 84px); display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
.workspace { padding: 28px 4vw 24px; min-width: 0; }
.toolbar { justify-content: space-between; margin-bottom: 18px; }
.tool-group { display: flex; gap: 6px; }
.tool-button { height: 38px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.tool-button.active, .tool-button:hover { color: var(--ink); border-color: var(--ink); background: var(--panel); }
.mode-button { min-width: 82px; }
.start-change-button { min-width: 92px; }
.dimension-mode { min-width: 48px; padding: 0 9px; }
.tool-icon { margin-right: 7px; font-size: 17px; vertical-align: -1px; }
.compact { width: 38px; padding: 0; font-size: 20px; }
.toolbar-note { color: var(--muted); font: 10px var(--mono); letter-spacing: .03em; }
.live-dot { margin-right: 6px; background: var(--accent); }
.canvas-wrap { position: relative; overflow: hidden; min-height: 540px; height: calc(100vh - 220px); background-color: #e9e8df; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; border: 1px solid #d2d3c9; touch-action: none; overscroll-behavior: contain; }
#drawingCanvas { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.canvas-label { position: absolute; z-index: 1; top: 18px; left: 20px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; pointer-events: none; }
.canvas-label span { margin: 0 5px; color: var(--accent); }
.canvas-hint { position: absolute; right: 20px; bottom: 16px; color: var(--muted); font-size: 11px; pointer-events: none; }
.workspace-footer { justify-content: space-between; padding-top: 16px; color: var(--muted); font-size: 11px; }
.legend-line { width: 24px; margin-right: 8px; display: inline-block; border-top: 3px solid var(--accent); vertical-align: middle; }
.legend-label { margin-left: 16px; color: var(--ink); font-family: var(--mono); }
.scale-readout { font: 10px var(--mono); }
.inspector { padding: 34px 26px 26px; border-left: 1px solid var(--line); background: var(--panel); }
.inspector-heading { justify-content: space-between; margin-bottom: 24px; }
h2 { margin: 7px 0 0; font-size: 23px; letter-spacing: .08em; }
.measure-count { text-align: right; color: var(--muted); font-size: 11px; }
.measure-count strong { display: block; color: var(--ink); font: 24px var(--mono); line-height: 1; }
.selected-card { padding: 17px; background: var(--sage); }
.selected-topline { gap: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }
.selection-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.selected-input-row { margin-top: 14px; gap: 8px; }
.selected-input-row input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #bfc7b5; color: var(--ink); background: rgba(255,255,255,.65); font: 20px var(--mono); }
.selected-input-row span { color: var(--muted); font: 12px var(--mono); }
.apply-button { padding: 11px 12px; border: 0; color: white; background: var(--ink); font-size: 11px; white-space: nowrap; }
button:disabled, input:disabled { opacity: .45; cursor: not-allowed; }
.input-note { margin-top: 9px; color: var(--muted); font-size: 10px; }
.lock-toggle { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--ink); font-size: 11px; }
.type-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.type-picker select { min-height: 38px; padding: 0 28px 0 10px; color: var(--ink); border: 1px solid var(--line); background: var(--panel); font-size: 12px; }
.feature-panel { margin-top: 18px; padding: 13px; border: 1px solid var(--line); background: #faf9f4; }
.feature-title { margin-bottom: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; }
.feature-panel .selected-input-row { margin-top: 0; }
.feature-panel select, .feature-panel input { min-width: 0; height: 36px; padding: 0 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 11px; }
.feature-panel select { flex: 1.2; }
.feature-panel input { flex: 1; }
.feature-actions, .preset-row { display: flex; gap: 6px; margin-top: 8px; }
.feature-actions button { min-height: 36px; }
.preset-row { flex-wrap: wrap; margin-top: 0; }
.preset-button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 11px; }
.annotation-hit { cursor: move; }
.annotation-label rect { fill: rgba(255,253,250,.92); stroke: var(--accent); stroke-width: 2; }
.annotation-label text { fill: var(--ink); font: 14px "Zen Kaku Gothic New", sans-serif; text-anchor: middle; }
.annotation-label.symbol text { font-size: 25px; }
.annotation-hit.is-selected .annotation-label rect { stroke: var(--ink); stroke-width: 3; }
.start-anchor-marker { fill: rgba(217,101,66,.25); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 3 3; pointer-events: none; }
.closure-panel { margin-top: 18px; padding: 15px; border: 1px solid var(--line); background: #faf9f4; }
.closure-panel-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.closure-icon { width: 20px; height: 20px; display: grid; place-items: center; color: var(--panel); background: var(--accent); border-radius: 50%; font-size: 14px; }
.closure-panel p { margin: 9px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.closure-button { width: 100%; min-height: 42px; padding: 10px; color: var(--ink); border: 1px solid var(--accent); background: #fff8f3; font-size: 12px; font-weight: 700; }
.closure-button:not(:disabled):hover { color: white; background: var(--accent); }
.closure-button:disabled { border-color: var(--line); background: #f1efe9; }
.section-label { margin: 28px 0 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }
.edge-list { display: grid; gap: 5px; }
.edge-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px 10px; border: 1px solid transparent; background: #f4f2ec; text-align: left; }
.edge-row:hover, .edge-row.selected { border-color: var(--accent); background: #fff8f3; }
.edge-number { color: var(--muted); font: 12px var(--mono); }
.edge-name { font-size: 12px; }
.edge-type { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.edge-value { color: var(--ink); font: 14px var(--mono); }
.edge-value small { margin-left: 3px; color: var(--muted); font-size: 9px; }
.inspector-actions { display: flex; gap: 7px; margin-top: 20px; }
.secondary-button, .danger-button { flex: 1; padding: 10px 8px; border: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 10px; }
.danger-button { color: var(--accent-dark); border-color: #e5b5a5; }
.tip-box { display: flex; gap: 9px; margin-top: 28px; padding: 13px; border-top: 1px solid var(--line); color: var(--muted); }
.tip-icon { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; color: var(--panel); background: var(--accent); border-radius: 50%; font: 12px var(--mono); }
.tip-box p { margin: 0; font-size: 10px; line-height: 1.7; }
.toast { position: fixed; bottom: 24px; left: 50%; padding: 12px 18px; color: #fff; background: var(--ink); font-size: 12px; opacity: 0; transform: translate(-50%, 12px); transition: .22s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hit-line { stroke: transparent; stroke-width: 34; stroke-linecap: round; pointer-events: stroke; }
.actual-line { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; pointer-events: none; }
.svg-segment.is-selected .actual-line { stroke: var(--ink); stroke-width: 7; }
.svg-segment.adjustment-selected .actual-line { stroke: #2b7a78; stroke-width: 9; }
.svg-segment.pending .actual-line { stroke: var(--accent); stroke-dasharray: 10 8; opacity: .75; }
.vertex { fill: var(--panel); stroke: var(--accent); stroke-width: 4; r: 8; pointer-events: none; }
.snap-indicator { fill: rgba(217, 101, 66, .2); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 3 3; pointer-events: none; }
.dimension-label { pointer-events: none; }
.dimension-label rect { fill: var(--panel); stroke: var(--line); }
.dimension-label text { fill: var(--ink); font: 12px var(--mono); text-anchor: middle; }
.dimension-hit { cursor: ns-resize; }
.dimension-line { stroke: var(--ink); stroke-width: 2; marker-start: url(#dimension-arrow); marker-end: url(#dimension-arrow); pointer-events: none; }
.dimension-hit-line { stroke: transparent; stroke-width: 30; stroke-linecap: round; pointer-events: stroke; }
.extension-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.dimension-hit.is-grouped .dimension-line { stroke: var(--accent); }
.dimension-align-guide { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 6; opacity: .7; pointer-events: none; }
.dimension-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; color: var(--ink); background: var(--panel); border: 0; box-shadow: 0 18px 70px rgba(32,36,32,.22); }
.dimension-dialog::backdrop { background: rgba(32,36,32,.38); }
.dimension-dialog form { padding: 27px; }
.dialog-kicker { color: var(--accent); font: 10px var(--mono); letter-spacing: .1em; }
.dimension-dialog h2 { margin: 9px 0 8px; }
.dialog-description { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.dialog-label { display: block; margin-bottom: 7px; color: var(--muted); font: 10px var(--mono); }
.dialog-input-row { display: flex; align-items: center; gap: 8px; }
.dialog-input-row input { width: 100%; padding: 12px; border: 1px solid var(--line); background: #f4f2ec; color: var(--ink); font: 22px var(--mono); }
.dialog-input-row span { color: var(--muted); font: 12px var(--mono); }
.dialog-actions { display: flex; gap: 8px; margin-top: 23px; }
.dialog-actions button { flex: 1; padding: 12px; }
.closure-dialog { max-width: 500px; }
.closure-dialog.warning { border-top: 5px solid var(--accent); }
.closure-error-readout { display: flex; align-items: baseline; gap: 8px; padding: 14px; background: #f4f2ec; }
.closure-error-readout span { color: var(--muted); font-size: 11px; }
.closure-error-readout strong { margin-left: auto; font: 24px var(--mono); }
.closure-error-readout small { color: var(--muted); font: 11px var(--mono); }
.closure-actions { flex-wrap: wrap; }
.closure-actions .apply-button { min-width: 145px; }
.adjustment-choice { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.adjustment-choice p { margin: 0 0 9px; color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.adjustment-cancel { width: 100%; margin-top: 8px; }
.correction-button { color: var(--accent-dark); border-color: #e5b5a5; }
.print-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 12px; }
.print-settings-grid label { color: var(--muted); font-size: 11px; }
.print-settings-grid select { display: block; width: 100%; height: 40px; margin-top: 5px; padding: 0 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.scale-check { display: block; color: var(--ink); font-size: 11px; }
.print-warning { margin: 14px 0; padding: 10px; color: var(--accent-dark); background: #fff1eb; font-size: 11px; line-height: 1.7; }
.print-fit-message { min-height: 18px; color: var(--accent-dark); font-size: 11px; }
.print-preview-frame { overflow: auto; max-height: 330px; padding: 12px; background: #d8d8d2; }
.print-preview { position: relative; margin: auto; background: white; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
#printSheet { display: none; }
@media print { body > *:not(#printSheet) { display: none !important; } #printSheet { display: block; width: var(--paper-width); height: var(--paper-height); overflow: hidden; } @page { margin: 0; } }
@media (max-width: 800px) { .topbar { height: 72px; padding: 0 18px; } .project-meta > span:not(.status-dot) { display: none; } .app-shell { display: block; } .workspace { padding: 18px; } .canvas-wrap { height: 58vh; min-height: 390px; } .inspector { padding: 25px 18px 32px; border-top: 1px solid var(--line); border-left: 0; } .toolbar-note { display: none; } }
@media (max-width: 440px) { h1 { font-size: 18px; } .icon-button { margin-left: 8px; padding: 9px 11px; } .tool-button { padding: 0 5px; } .mode-button { min-width: 62px; } .start-change-button { min-width: 78px; } .dimension-mode { min-width: 39px; padding: 0 5px; } .compact { width: 34px; padding: 0; } .canvas-wrap { min-height: 340px; } }