.steps button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font-weight:inherit;font-size:inherit}
.steps button:disabled{cursor:default}.steps button:focus-visible{outline:3px solid #5b95cc;outline-offset:-4px;border-radius:10px}.steps li.done{color:#637d6f}.steps li.done .step-number{background:#edf5f0;color:#637d6f}
.sketch-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.sketch-heading .button{flex:none}.sketch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 15px;background:#fff;border:1px solid var(--border);border-radius:11px;margin-bottom:16px}
.tool-group{display:flex;gap:4px;background:#f2f4f7;padding:4px;border-radius:7px}.tool-group button,.history-tools button,.drawing-actions button{border:0;background:transparent;padding:9px 12px;font-size:12px;color:#617283;border-radius:5px}.tool-group button[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 1px 5px #1e334412;font-weight:700}.tool-group button:focus-visible,.drawing-actions button:focus-visible,.history-tools button:focus-visible{outline:2px solid #5b95cc;outline-offset:2px}.snap-options{display:flex;gap:15px;font-size:11px;color:#647484}.snap-options label{display:flex;align-items:center;gap:6px}.snap-options input{accent-color:var(--accent);margin:0}.history-tools{display:flex;gap:4px}.history-tools button:disabled{color:#b2bbc4}.history-tools button:not(:disabled):hover,.drawing-actions button:not(:disabled):hover{background:#f0f3f7}
.sketch-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:stretch}.drawing-panel{border:1px solid var(--border);background:#fff;border-radius:12px;overflow:hidden;min-width:0}.drawing-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:17px 18px;border-bottom:1px solid var(--border);font-size:12px}.drawing-header strong{font-size:13px}.drawing-header>span{color:#8795a1;font-size:11px}.drawing-header>span.snapped{color:#538773;font-weight:600}.drawing-surface{position:relative;aspect-ratio:1000/660;min-height:260px;background:#fbfcfe}#sketch-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;outline:none}#sketch-canvas:focus-visible{outline:2px solid #5b95cc;outline-offset:-2px}#sketch-canvas[data-tool=draw],#sketch-canvas[data-tool=beam]{cursor:crosshair}
.sketch-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:85%;color:#9aa8b6}.sketch-empty strong{display:block;font-size:17px;font-weight:500;margin-bottom:10px}.sketch-empty span{font-size:12px;line-height:1.9}.drawing-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid var(--border)}.drawing-actions button{font-size:11px;padding:8px 10px;border:1px solid #e0e6ed}.drawing-actions button:disabled{color:#b1bac4;border-color:#edf0f3}.drawing-actions>span{font-size:10px;color:#9aa6b1;margin-left:auto}
.wall-stroke{stroke:#344f67;stroke-width:4;vector-effect:non-scaling-stroke;pointer-events:none}.wall-stroke.selected{stroke:var(--accent)}.wall-hit{stroke:transparent;stroke-width:18;vector-effect:non-scaling-stroke}.wall-label{font:14px "Microsoft YaHei",sans-serif;fill:#344f67;paint-order:stroke;stroke:#fbfcfe;stroke-width:5px;stroke-linejoin:round;pointer-events:none}.wall-label.unmeasured{fill:#9a7e65}.wall-endpoint{fill:#fff;stroke:#344f67;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}.draw-anchor{fill:#c84436;stroke:#fff;stroke-width:2;pointer-events:none}.draw-preview{stroke:#c84436;stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;pointer-events:none}.snap-marker{fill:#e4f5e9;fill-opacity:.7;stroke:#438769;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}.cursor-marker{fill:#c84436;fill-opacity:.4;pointer-events:none}.beam-fill{fill:#f3e9df}.beam-border{stroke:#b3927c;stroke-width:2;vector-effect:non-scaling-stroke}.beam.selected .beam-border{stroke:var(--accent);stroke-width:3}.beam-label{font:14px "Microsoft YaHei",sans-serif;fill:#805e45;paint-order:stroke;stroke:#f3e9df;stroke-width:3;pointer-events:none}.beam-size{font:11px "Microsoft YaHei",sans-serif;fill:#977963;paint-order:stroke;stroke:#f3e9df;stroke-width:3;pointer-events:none}#sketch-canvas[data-tool=select] .beam{cursor:move}#sketch-canvas[data-tool=select] .wall-hit{cursor:pointer}.beam-preview{fill:#f3e9df;fill-opacity:.7;stroke:#c84436;stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.dimension-panel{padding:21px 18px;background:#fff;border:1px solid var(--border);border-radius:12px;min-width:0}.dimension-panel .panel-heading{margin-bottom:10px}.dimension-intro,.dimension-help{font-size:11px;color:#8995a1;line-height:1.9;margin:0 0 17px}.dimension-help{margin:19px 0 0;padding-top:14px;border-top:1px solid #edf0f4}.wall-lengths{max-height:275px;overflow:auto;scrollbar-width:thin}.empty-lengths{font-size:12px;color:#a0aab5;line-height:1.8;padding:20px 0}.length-row{display:grid;grid-template-columns:67px minmax(0,1fr) 23px;align-items:center;gap:5px;border-bottom:1px solid #edf0f3;padding:10px 3px;border-radius:5px}.length-row.selected{background:#fff8f5}.length-row-name{font-size:12px;color:#536b7f}.length-row-name small{display:block;font-size:10px;color:#98a4af;margin-top:4px}.length-row input,.beam-properties input{min-width:0;width:100%;border:1px solid #dce3eb;border-radius:5px;font-size:12px;color:#344f67;height:35px;padding:0 8px;outline:none;background:white}.length-row input:focus,.beam-properties input:focus{border-color:#c84436;box-shadow:0 0 0 2px #c8443615}.length-unit{font-size:10px;color:#9aa6b1}.text-danger{display:block;padding:8px 0;border:0;background:transparent;color:#b76559;font-size:11px;margin-top:10px}.beam-properties{border:0;border-top:1px solid var(--border);padding:17px 0 0;margin:22px 0 0}.beam-properties legend{font-size:13px;color:#765944;padding:0 6px 0 0;font-weight:600}.beam-properties>p{font-size:10px;color:#998777;margin:0 0 14px}.beam-properties>label{display:block;font-size:11px;color:#7c8b98;margin:12px 0 7px}.sketch-message{font-size:12px;color:#7c8d9b;line-height:1.8;margin:14px 0 0;min-height:22px}.sketch-message.warning{color:#b56a35}
@media(max-width:1050px){.snap-options{gap:11px}.sketch-grid{grid-template-columns:minmax(0,1fr) 260px}.drawing-header{flex-direction:column;align-items:flex-start;gap:7px}.drawing-actions>span{width:100%;margin:5px 0 0}.tool-group button{padding:8px 10px}}
@media(max-width:760px){.sketch-grid{grid-template-columns:1fr}.drawing-surface{min-height:340px}.dimension-panel{padding:19px}.wall-lengths{max-height:240px}.length-row{grid-template-columns:85px minmax(0,1fr) 25px}.sketch-heading{align-items:flex-start}.sketch-heading .button{font-size:11px;padding:0 10px;height:35px;margin-top:7px}.sketch-heading h1{font-size:25px}.sketch-toolbar{gap:10px}.snap-options{order:3;width:100%;padding:5px 2px}.history-tools{margin-left:auto}.drawing-header{flex-direction:row;align-items:center;font-size:11px}.drawing-actions>span{width:auto;margin-left:auto}.dimension-intro{margin-bottom:8px}}
@media(max-width:560px){.steps button{flex-direction:column;gap:4px}.sketch-heading{flex-direction:column;gap:12px}.sketch-heading .button{margin:0}.drawing-surface{min-height:280px}.drawing-header{padding:13px 12px;flex-direction:column;align-items:flex-start;gap:6px}.drawing-actions>span{width:100%;margin:5px 0 0}.sketch-toolbar{padding:10px}.tool-group button{font-size:11px;padding:8px}.history-tools button{font-size:11px;padding:6px}.snap-options{font-size:10px}.sketch-message{font-size:11px}}

/* Direct dimension editing: the visible chip is compact, its touch area is 44px. */
.wall-stroke.beam-source{stroke:#a27a5a}.drawing-actions button[aria-pressed=true]{background:#fff4ef;color:var(--accent);border-color:#ddbdac}
.dimension-leader{stroke:#aebdca;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.wall-stroke.beam-source.selected{stroke:var(--accent)}
.dimension-chip{cursor:pointer;outline:none}.dimension-touch-target{fill:transparent;pointer-events:all;cursor:pointer}
.dimension-chip-box{fill:#fff;stroke:#d3dfe9;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.dimension-chip-text{font-family:"Microsoft YaHei",sans-serif;fill:#344f67;pointer-events:none}
.dimension-chip.unmeasured .dimension-chip-box{fill:#fffaf4;stroke:#e4d5bd}.dimension-chip.unmeasured .dimension-chip-text{fill:#8a643f}
.dimension-chip.selected .dimension-chip-box,.dimension-chip:focus-visible .dimension-chip-box{stroke:#c84436;stroke-width:2;fill:#fff4ef}
.wall-hit{stroke-width:44}.dimension-panel>summary,.snap-settings>summary{display:none;list-style:none}
.dimension-panel>summary::-webkit-details-marker,.snap-settings>summary::-webkit-details-marker{display:none}
body.dimension-open{overflow:hidden}
.dimension-dialog{position:fixed;inset:0;width:min(460px,calc(100% - 32px));height:fit-content;margin:auto;padding:26px;border:1px solid #e3e7ed;border-radius:18px;max-height:calc(var(--keyboard-viewport-height,100dvh) - 32px);overflow-y:auto;color:#263343;background:#fff;box-shadow:0 20px 90px #20344b30}
.dimension-dialog::backdrop{background:#26334366;backdrop-filter:blur(2px)}.sheet-grip{display:none}.dimension-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}
.dimension-dialog-heading h2{font-size:22px;margin:9px 0 0}.sheet-close{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:#f3f5f7;color:#667887;font-size:26px;line-height:1;cursor:pointer}
#dimension-dialog-description{font-size:13px;line-height:1.8;color:#8795a1;margin:18px 0 22px}.sheet-input{margin-top:20px}.sheet-input>label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}.sheet-input>div{display:flex;align-items:center;background:#f8fafc;border:1px solid #dce4ec;border-radius:10px;padding:0 16px}.sheet-input>div:focus-within{border-color:#c84436;box-shadow:0 0 0 3px #c8443612}
.sheet-input input{border:0;background:transparent;width:100%;min-width:0;height:60px;font-size:22px;color:#344f67;outline:none;padding:0}.sheet-input>div>span{font-size:14px;color:#8594a1;margin-left:10px}.sheet-input input::placeholder{font-size:16px;color:#a4afb9}
#dimension-error{font-size:13px;line-height:1.7;color:#b8523f;margin:10px 0 0;min-height:22px}#dimension-remaining{font-size:12px;color:#8896a2;margin:10px 0 22px}.dimension-dialog-actions{display:flex;gap:10px}.dimension-dialog-actions .button{height:48px;flex:1;min-width:0;padding:0 12px;font-size:14px}
.sheet-close:focus-visible{outline:3px solid #5b95cc;outline-offset:3px}
@media(max-width:760px){
  .sketch-toolbar{position:sticky;top:0;z-index:15;padding:10px;gap:8px;box-shadow:0 3px 12px #26334305}
  .tool-group{width:100%;order:0}.tool-group button{flex:1;min-width:44px;min-height:44px;font-size:13px;padding:8px 5px}
  .history-tools{order:1;margin:0;gap:5px}.history-tools button{min-width:44px;min-height:44px;font-size:12px}
  .snap-settings{order:2;flex:1;min-width:0}.snap-settings>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;font-size:13px;color:#647484;border:1px solid #e2e8ef;border-radius:6px;cursor:pointer}.snap-settings>summary:after{content:"⌄"}.snap-settings[open]>summary:after{content:"⌃"}
  .snap-options{padding:10px 0 0;display:flex;flex-direction:column;gap:3px;font-size:13px}.snap-options label{min-height:44px;gap:10px}.snap-options input{width:20px;height:20px;flex:none}
  .drawing-actions button,.sketch-heading .button,.text-danger{min-height:44px;min-width:44px;font-size:13px}.drawing-actions>span{font-size:11px}.drawing-surface{width:100%;min-height:320px}
  .dimension-panel{padding:0;align-self:start}.dimension-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px;min-height:56px;font-size:14px;font-weight:600;cursor:pointer}.dimension-panel>summary span{color:#8796a3;font-size:12px;font-weight:400}.dimension-content{padding:8px 18px 18px}.dimension-content>.panel-heading{display:none}
  .dimension-intro,.dimension-help{font-size:13px}.length-row{min-height:60px}.length-row input,.beam-properties input{font-size:16px;height:48px}.length-row-name{font-size:14px}.length-row-name small{font-size:12px}.beam-properties>label{font-size:14px;margin:16px 0 8px}.beam-properties legend{font-size:15px}.beam-properties>p{font-size:12px}
  .dimension-dialog{inset:auto 0 var(--keyboard-inset,0px);width:100%;max-width:none;margin:0;border-radius:22px 22px 0 0;padding:12px 20px max(22px,env(safe-area-inset-bottom));max-height:calc(var(--keyboard-viewport-height,100dvh) - 12px)}
  .sheet-grip{display:block;width:38px;height:4px;background:#d7dde4;border-radius:4px;margin:0 auto 18px}.dimension-dialog-heading h2{font-size:22px}.dimension-dialog-actions .button{height:52px}
  .actionbar .button{min-height:48px;font-size:14px}.page-note{font-size:12px;line-height:1.7}.sketch-message{font-size:13px;line-height:1.8}
}