/* Drawing presentation copied from the public W/jsq/111.html.
   Scope the original diagram-box rules to HUAHUI's diagram-stage. */
:root {
  --wall-color: #1c1714; --label-color: #1c1714;
  --guide-color: #d61f1f; --guide-text-color: #d61f1f; --angle-color: #9a6b3e;
}
.diagram-stage {
            width: 100%;
            height: var(--diagram-height, 284px);
            background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 12px 24px rgba(15, 23, 42, 0.045);
        }
.svg-wall { stroke: var(--wall-color); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.svg-guide { stroke: var(--guide-color); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; opacity: 0.95; }
.svg-angle-arc { fill: none; stroke: var(--angle-color); stroke-width: 2; }
.svg-text, .svg-guide-text, .svg-angle-text { fill: var(--label-color); font-weight: 800; font-family: monospace; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: #ffffff; stroke-width: 3.5px; }
.svg-text, .svg-guide-text { font-size: 17px; }
.svg-guide-text { fill: var(--guide-text-color); }
.svg-angle-text { font-size: 18px; fill: var(--angle-color); }
.svg-custom-field { fill: #0f172a; font-size: 18px; font-weight: 700; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; dominant-baseline: hanging; pointer-events: auto; user-select: none; cursor: grab; touch-action: none; }
.view-switcher {
            position: absolute;
            top: 8px; right: 8px;
            z-index: 4;
            display: inline-flex;
            align-items: center; justify-content: center;
            width: 52px; height: 32px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background: rgba(255,255,255,0.94);
            backdrop-filter: blur(6px);
            color: #1f2937;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            cursor: pointer;
            user-select: none;
            box-shadow: 0 4px 10px rgba(15,23,42,0.08);
            transition: background .18s, color .18s, transform .12s;
            font-family: 'Bahnschrift SemiCondensed','Segoe UI Variable Text','Microsoft YaHei UI',sans-serif;
        }
.view-switcher:hover { background: #ffffff; transform: translateY(-1px); }
.view-switcher[data-view="3d"] {
            background: linear-gradient(180deg, #d61f1f 0%, #a81212 100%);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 10px rgba(168,18,18,0.32);
        }
.diagram-stage #main-svg { width: 100%; height: 100%; max-width: 632px; }
.diagram-stage[data-view="3d"] { height: clamp(420px, 52vh, 560px); min-height: 420px; }
.svg-direction-label { paint-order: normal; stroke: none; }
text[data-force-active="true"][data-force-scope="base"] { fill: #92400e; }
text[data-force-active="true"][data-force-scope="angle"] { fill: #b45309; }
.svg-field-active { stroke: #fff0bd; stroke-width: 6px; }
.drawing-panel { border: 0; border-radius: 0; overflow: visible; }
.drawing-toolbar { border: 0; padding: 0 0 10px; min-height: 34px; }
.drawing-title { font-size: 13px; margin: 0; color: var(--text); }
.diagram-stage-footer { padding: 10px 0; border-top: 0; }
.capture-host-stage { width: 100%; margin-left: 0; }
.material-summary { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.material-summary strong { font-size: 17px; }
.drawing-hint { padding: 0 0 10px; border-bottom: 0; }
.reference-panel { border: 1px solid var(--border); border-radius: 8px; margin-top: 2px; }
.dialog-canvas > svg { max-width: none; }