/* All CSS styles remain the same as the previous version. */
        :root {
            --sidebar-width: 510px;
            --right-panel-width: 340px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; 
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
        }
        .container { 
            display: flex;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        .sidebar {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            max-width: var(--sidebar-width);
            background-color: white;
            overflow-y: auto;
            scrollbar-gutter: stable;
            border-right: 1px solid #d1d5db;
            box-shadow: 2px 0 4px rgba(0,0,0,0.05);
            padding-bottom: 1rem;
            transition: margin-left 0.2s ease;
        }
        .sidebar.sidebar-collapsed {
            margin-left: calc(-1 * var(--sidebar-width));
        }
        .sidebar-footer {
            text-align: center;
            padding: 1rem 0.75rem 0.5rem;
            font-size: 0.7rem;
            color: #9ca3af;
        }
        .canvas-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background-color: #e8eaed;
            position: relative;
        }
        .header {
            background-color: #111111;
            color: white;
            padding: 0.5rem 1rem;
            text-align: center;
        }
        .header h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
        .header p { color: #94a3b8; font-size: 0.875rem; }
        .header-logo { height: 96px; width: auto; display: block; flex-shrink: 1; min-width: 0; }
        .sidebar-sticky-top { position: sticky; top: 0; z-index: 20; }
        .env-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0.5rem 0.75rem 0.65rem; background: #111111; }
        .env-tab { flex: 1 1 0; min-width: 0; padding: 0.5rem 0.25rem; font-size: 0.72rem; font-weight: 700; border: none; border-radius: 6px; cursor: pointer; text-align: center; transition: all 0.15s ease; user-select: none; letter-spacing: 0.02em; }
        .env-tab.active { background: #fff; color: #111111; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
        .env-tab:not(.active) { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
        .env-tab:not(.active):hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
        .beta-badge { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; vertical-align: middle; margin-left: 3px; line-height: 1.3; background: #f59e0b; color: #fff; }
        .env-tab:not(.active) .beta-badge { opacity: 0.55; }
        #env-tab-3d { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
        #env-tab-3d .beta-badge { margin-left: 0; }
        .shape-btn .beta-badge { margin-left: 0; margin-top: 3px; }
        .section { padding: 1rem; border-bottom: 1px solid #e9ecef; }
        .section:last-child { border-bottom: none; }
        .shape-selector { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef; overflow-x: auto; }
        .shape-btn { padding: 0.5rem; border: 2px solid #d1d5db; border-radius: 0.375rem; background-color: #f9fafb; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 70px; }
        .shape-btn svg { width: 40px; height: 40px; margin-bottom: 0.25rem; stroke: #4b5563; stroke-width: 8; fill: none; stroke-linejoin: round; stroke-linecap: round; }
        .shape-btn span { font-size: 0.75rem; color: #4b5563; }
        .shape-btn.active { border-color: #2563eb; background-color: #e0e7ff; }
        .shape-btn.active svg { stroke: #2563eb; }
        .shape-btn svg .dot { fill: #4b5563; stroke: none; }
        .shape-btn.active svg .dot { fill: #2563eb; }
        .shape-btn.active span { color: #2563eb; font-weight: 500; }
        .form-group { margin-bottom: 1rem; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.5rem; } 
        .units-toggle { display: flex; background-color: #f3f4f6; border-radius: 0.5rem; padding: 0.25rem; margin-bottom: 1rem; }
        .units-toggle button { flex: 1; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; background: transparent; color: #4b5563; }
        .units-toggle button.active { background-color: #9a3412; color: white; } 
        label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
        input[type="text"], select { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; background: white; }
        input[type="text"]:focus, select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
        input[type="text"][disabled] { background-color: #e9ecef; cursor: not-allowed;}
        .helper-text { color: #6b7280; font-size: 0.75rem; margin-top: 0.25rem; }
        #shape-dimension-inputs .form-group { margin-bottom: 0.75rem;} 
        #shape-dimension-inputs label {font-size: 0.8rem;}
        #shape-dimension-inputs input {font-size: 1rem; padding: 0.5rem;}
        .placement-type-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
        .placement-type-btn { padding: 0.6rem; border: 1px solid #ced4da; border-radius: 0.375rem; background-color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 500; color: #495057; transition: background-color 0.2s ease, border-color 0.2s ease; }
        .placement-type-btn svg { width: 20px; height: 20px; stroke: #495057; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .placement-type-btn.active { background-color: #9a3412; color: white; border-color: #9a3412; box-shadow: 0 2px 4px rgba(154, 52, 18, 0.2); }
        .placement-type-btn.active svg { stroke: white; }
        #slotBtn svg, #obroundBtn svg { width: 40px; height: 40px; stroke-width: 1; }
        .preview-container { position: relative; background-color: #e8eaed; padding: 10px; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .live-coords-display { position: absolute; top: 15px; right: 15px; background-color: rgba(255, 255, 255, 0.9); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; color: #374151; border: 1px solid #d1d5db; z-index: 10; display: none; }
        .mode-indicator { background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.5rem; font-size: 0.875rem; text-align: center; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 10; white-space: nowrap; }
        .mode-indicator.add-mode { background-color: #fff7ed; border-color: #9a3412; color: #7c2d12; }
        .mode-indicator.move-mode { background-color: #fef3c7; border-color: #f59e0b; color: #92400e; }
        .mode-indicator.radius-mode { background-color: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
        .mode-indicator.cline-mode { background-color: #ecfdf5; border-color: #059669; color: #065f46; }
        .freeform-input-overlay { display: none; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: rgba(255,255,255,0.95); padding: 0.35rem 0.6rem; border-radius: 0.375rem; border: 1px solid #d1d5db; z-index: 10; gap: 0.75rem; align-items: center; font-size: 0.8rem; font-family: monospace; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .freeform-input-overlay .ff-label { color: #6b7280; font-weight: 600; }
        .freeform-input-overlay .ff-value { display: inline-block; min-width: 4em; padding: 0.15rem 0.3rem; border: 1px solid #e5e7eb; border-radius: 0.25rem; background: #f9fafb; text-align: center; }
        .freeform-input-overlay .ff-value.ff-active { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,0.2); }
        .freeform-input-overlay .ff-hint { color: #9ca3af; font-size: 0.65rem; font-family: sans-serif; }
        #canvas, #three-canvas-container canvas, #dxf-viewer-canvas, #import-preview-canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
        #canvas { border: none; background-color: white; cursor: crosshair; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
        #canvas.move-cursor { cursor: grab; }
        #canvas.grabbing-cursor { cursor: grabbing; }
        #canvas.resize-cursor { cursor: nwse-resize; }
        #canvas.resize-cursor-ew { cursor: ew-resize; }
        #canvas.resize-cursor-ns { cursor: ns-resize; }
        .object-list { max-height: 25rem; overflow-y: auto; margin-bottom: 1rem; } 
        .object-item { display: flex; justify-content: space-between; align-items: flex-start; background-color: #f9fafb; padding: 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; margin-bottom: 0.25rem; } 
        .object-edit-inputs { display: flex; align-items: flex-start; gap: 0.5rem; flex-grow: 1;} 
        .object-item-identifier { font-weight: 500; min-width: 75px; margin-right: 0.25rem; line-height: 1.3; flex-shrink: 0; font-size:0.8rem; }
        .object-item-properties-column { display: flex; flex-direction: column; gap: 0.2rem; flex-grow: 1;}
        .property-row { display: flex; align-items: center; gap: 0.2rem; } 
        .group-label { font-weight: 600; font-size: 0.75rem; color: #374151; min-width: 4.5em; flex-shrink: 0; } 
        .label-prefix { font-size: 0.75rem; color: #4b5563; min-width: 1.5em; text-align: right; margin-right: 0.1rem; flex-shrink: 0;} 
        .object-coord-input, .object-slot-dim-input, .object-diameter-input, .object-radius-input { width: 5.5em; max-width: 5.5em; padding: 0.25rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.75rem; text-align: center; flex-grow: 0; flex-shrink: 0; } 
        .object-coord-input:focus, .object-slot-dim-input:focus, .object-diameter-input:focus, .object-radius-input:focus { outline: none; border-color: #2563eb; }
        .object-diameter-input[disabled], .object-slot-dim-input[disabled] { background-color: #e9ecef; cursor: not-allowed; } 
        .object-delete { background: none; border: none; color: #ef4444; cursor: pointer; padding: 0.25rem; margin-left: auto; flex-shrink: 0; } 
        .object-delete:hover { color: #b91c1c; }
        .obround-rotate-btn { background: none; border: 1px solid #d1d5db; border-radius: 0.25rem; cursor: pointer; padding: 0.1rem 0.35rem; font-size: 0.85rem; color: #374151; flex-shrink: 0; margin-left: 0.25rem; }
        .obround-rotate-btn:hover { background-color: #e5e7eb; border-color: #9ca3af; }
        .slot-rotate-btn { background: none; border: 1px solid #d1d5db; border-radius: 0.25rem; cursor: pointer; padding: 0.1rem 0.35rem; font-size: 0.85rem; color: #374151; flex-shrink: 0; margin-left: 0.25rem; }
        .slot-rotate-btn:hover { background-color: #e5e7eb; border-color: #9ca3af; }
        .callout-row { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; }
        .callout-row label { display: flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: #4b5563; margin-bottom: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
        .callout-row input[type="checkbox"] { width: 13px; height: 13px; margin: 0; cursor: pointer; }
        .callout-text-input { width: 100%; padding: 0.2rem 0.3rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.7rem; text-align: left; }
        .callout-text-input:focus { outline: none; border-color: #2563eb; }
        .wall-layout-summary { background: #f0f4ff; border: 1px solid #c7d2fe; border-radius: 0.5rem; padding: 0.75rem; margin-top: 0.5rem; }
        .wall-layout-summary h4 { margin: 0 0 0.5rem 0; font-size: 0.85rem; color: #1e40af; }
        .wall-layout-summary .wl-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: #374151; padding: 0.15rem 0; }
        .wall-layout-summary .wl-row .wl-label { color: #6b7280; }
        .wall-layout-summary .wl-row .wl-value { font-weight: 600; color: #1e3a5f; }
        .wall-layout-summary .wl-divider { border-top: 1px solid #c7d2fe; margin: 0.4rem 0; }
        .wall-layout-btns { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
        .wall-layout-btns button { flex: 1; padding: 0.4rem 0.5rem; font-size: 0.75rem; border: 1px solid #2563eb; border-radius: 0.375rem; cursor: pointer; font-weight: 500; }
        .wall-layout-btns .wl-btn-common { background: #2563eb; color: white; }
        .wall-layout-btns .wl-btn-common:hover { background: #1d4ed8; }
        .wall-layout-btns .wl-btn-half { background: white; color: #2563eb; }
        .wall-layout-btns .wl-btn-half:hover { background: #eff6ff; }
        .wall-layout-btns .wl-btn-redraw { background: white; color: #6b7280; border-color: #9ca3af; }
        .wall-layout-btns .wl-btn-redraw:hover { background: #f3f4f6; }
        .wall-layout-btns .wl-btn-unique { background: white; color: #6d28d9; border-color: #8b5cf6; }
        .wall-layout-btns .wl-btn-unique:hover { background: #f5f3ff; }
        .wall-layout-btns .wl-btn-combine { background: white; color: #b45309; border-color: #f59e0b; }
        .wall-layout-btns .wl-btn-combine:hover { background: #fffbeb; }
        .wall-layout-btns .wl-btn-combine-active { background: #f59e0b; color: white; border-color: #f59e0b; }
        .wall-layout-btns .wl-btn-combine-active:hover { background: #d97706; }
        .wall-layout-btns .wl-btn-reset { background: white; color: #6b7280; border-color: #9ca3af; }
        .wall-layout-btns .wl-btn-reset:hover { background: #f3f4f6; }
        .stagger-toggle { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
        .stagger-toggle label { font-size: 0.78rem; color: #4b5563; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
        .stagger-toggle input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
        .btn { width: 100%; padding: 0.75rem 1.25rem; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem;}
        .btn-primary { background-color: #9a3412; color: white; }
        .btn-secondary { background-color: #9a3412; color: white; }
        .btn:disabled { background-color: #d1d5db; cursor: not-allowed; }
        .clear-btn { background: none; border: none; color: #6b7280; cursor: pointer; padding: 0.5rem; float: right; }
        .clear-btn:hover { color: #ef4444; }
        .dxf-output { padding: 1rem; border-top: 1px solid #e9ecef; background-color: #f9fafb; }
        .dxf-textarea { width: 100%; height: 10rem; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; font-size: 0.75rem; background-color: white; }
        .filename { text-align: center; font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; }
        .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
        .section-title h3 { font-size: 1.125rem; font-weight: 600; }
        .cutout-section-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background-color: #f9fafb; border: 1px solid #e9ecef; border-radius: 0.375rem; cursor: pointer; margin-top: 1.5rem; user-select: none; }
        .cutout-section-header:hover { background-color: #f3f4f6; }
        .cutout-section-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: #374151; }
        .cutout-toggle-icon { transition: transform 0.2s ease-in-out; font-weight: bold; color: #4b5563; }
        #cutouts-container .cutout-group { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed #d1d5db;}
        .cutout-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
        .cutout-header h4 { font-size: 0.9rem; color: #374151; margin: 0; }
        .cutout-delete-btn { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.2rem; padding: 0.2rem;}
        .cutout-delete-btn:hover { color: #b91c1c; }
        .grid-controls { display: flex; gap: 1rem; align-items: center; }
        .grid-controls label { margin-bottom: 0; }
        .grid-controls select { padding: 0.5rem; font-size: 0.875rem; }
        .canvas-toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; background: white; border-bottom: 1px solid #d1d5db; flex-shrink: 0; position: relative; }
        .canvas-toolbar .clear-btn { margin-bottom: 0; }
        #layer-section .form-row { align-items: end; }
        .layer-control { display: flex; flex-direction: column; gap: 0.5rem;}
        .layer-input-group { display: flex; gap: 0.5rem; }
        .layer-input-group .form-group { flex: 1; margin-bottom: 0;}
        .right-panel {
            width: var(--right-panel-width);
            min-width: var(--right-panel-width);
            max-width: var(--right-panel-width);
            background-color: white;
            overflow-y: auto;
            border-left: 1px solid #d1d5db;
            box-shadow: -2px 0 4px rgba(0,0,0,0.05);
            padding-bottom: 1rem;
            transition: margin-right 0.2s ease;
        }
        .right-panel.collapsed {
            margin-right: calc(-1 * var(--right-panel-width));
        }
        .right-panel .header {
            background-color: #111111;
        }
        .right-panel .section { padding: 1rem; border-bottom: 1px solid #e9ecef; }
        .right-panel .section:last-child { border-bottom: none; }
        .right-panel-toggle {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            z-index: 20;
            background-color: #1e293b;
            color: white;
            border: 1px solid #334155;
            border-right: none;
            border-radius: 0.375rem 0 0 0.375rem;
            padding: 0.5rem 0.25rem;
            cursor: pointer;
            font-size: 0.8rem;
            line-height: 1;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            letter-spacing: 0.05em;
        }
        .right-panel-toggle:hover { background-color: #334155; }
        .sidebar-toggle {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 20;
            background-color: #1e293b;
            color: white;
            border: 1px solid #334155;
            border-left: none;
            border-radius: 0 0.375rem 0.375rem 0;
            padding: 0.5rem 0.25rem;
            cursor: pointer;
            font-size: 0.8rem;
            line-height: 1;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            letter-spacing: 0.05em;
        }
        .sidebar-toggle:hover { background-color: #334155; }
        .project-parts-list { max-height: 15rem; overflow-y: auto; margin-top: 0.5rem; }
        .project-part-item { display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb; padding: 0.4rem 0.5rem; border-radius: 0.375rem; font-size: 0.8rem; margin-bottom: 0.25rem; border: 1px solid #e9ecef; flex-wrap: nowrap; }
        .project-part-item .part-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
        .project-part-item .part-name { font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .project-part-item .part-details { font-size: 0.7rem; color: #6b7280; }
        .project-part-item .part-cost { font-weight: 600; color: #16a34a; white-space: nowrap; margin-left: 0.25rem; font-size: 0.75rem; }
        .project-part-delete { background: none; border: none; color: #ef4444; cursor: pointer; padding: 0 0.15rem; font-size: 0.8rem; margin-left: 0.15rem; flex-shrink: 0; line-height: 1; }
        .project-part-delete:hover { color: #b91c1c; }
        .part-gp-wrap { display: flex; align-items: center; flex-shrink: 0; margin-left: 0.3rem; font-size: 0.65rem; color: #6b7280; gap: 0.15rem; }
        .part-gp-wrap input { width: 2rem; text-align: center; font-size: 0.65rem; padding: 0.1rem; border: 1px solid #d1d5db; border-radius: 0.2rem; }
        .project-total-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background-color: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 0.375rem; margin-top: 0.5rem; font-size: 0.85rem; }
        .project-total-bar .total-label { font-weight: 600; color: #166534; }
        .project-total-bar .total-value { font-weight: 700; color: #16a34a; font-size: 1rem; }
        /* Context Menu */
        #canvas-context-menu { display: none; position: fixed; z-index: 1000; background: #1f2937; border: 1px solid #4b5563; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); padding: 4px 0; min-width: 180px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 0.8rem; color: #e5e7eb; user-select: none; }
        #canvas-context-menu .ctx-item { display: flex; align-items: center; padding: 6px 14px; cursor: pointer; gap: 8px; white-space: nowrap; }
        #canvas-context-menu .ctx-item:hover { background: #374151; }
        #canvas-context-menu .ctx-item .ctx-icon { width: 18px; text-align: center; flex-shrink: 0; }
        #canvas-context-menu .ctx-sep { height: 1px; background: #4b5563; margin: 4px 8px; }
        #canvas-context-menu .ctx-header { padding: 4px 14px; font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; }
        /* Import Drawing */
        .import-file-label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background-color: #f9fafb; border: 1px dashed #9ca3af; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; color: #374151; width: 100%; justify-content: center; transition: background-color 0.15s, border-color 0.15s; box-sizing: border-box; }
        .import-file-label:hover { background-color: #f3f4f6; border-color: #6b7280; }
        .import-status { margin-top: 0.5rem; font-size: 0.8rem; color: #6b7280; }
        .import-status.error { color: #dc2626; }
        .import-status.success { color: #16a34a; }
        .import-summary { margin-top: 0.5rem; padding: 0.5rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.75rem; font-family: monospace; max-height: 8rem; overflow-y: auto; }
        .import-summary .sum-row { display: flex; justify-content: space-between; padding: 0.15rem 0; }
        .import-summary .sum-label { color: #6b7280; }
        .import-summary .sum-value { color: #1f2937; font-weight: 600; }
        .import-summary .sum-header { font-weight: 700; color: #374151; font-family: sans-serif; font-size: 0.8rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; margin-bottom: 0.25rem; }
        .import-layer-list { margin-top: 0.5rem; max-height: 6rem; overflow-y: auto; }
        .import-layer-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.15rem 0; }
        .import-layer-item label { font-size: 0.75rem; margin-bottom: 0; cursor: pointer; }
        .import-layer-item input[type="checkbox"] { margin: 0; cursor: pointer; }
        .import-layer-item .layer-count { color: #9ca3af; font-size: 0.7rem; }
        .import-preview-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 2000; align-items: center; justify-content: center; }
        .import-preview-modal.active { display: flex; }
        .import-preview-content { background: white; border-radius: 0.5rem; padding: 1rem; max-width: 700px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
        .import-preview-content h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }
        .import-preview-canvas-wrap { flex: 1; background: #f0f0f0; border: 1px solid #d1d5db; border-radius: 0.25rem; position: relative; min-height: 350px; }
        .import-preview-canvas-wrap canvas { width: 100%; height: 100%; }
        .import-preview-legend { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280; }
        .import-preview-legend span { display: flex; align-items: center; gap: 0.25rem; }
        .import-preview-legend .legend-swatch { width: 14px; height: 3px; border-radius: 1px; display: inline-block; }
        .import-preview-btns { display: flex; gap: 0.5rem; margin-top: 0.75rem; justify-content: flex-end; }
        .import-preview-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
        .import-preview-controls label { font-size: 0.8rem; margin-bottom: 0; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.25rem; background: #f9fafb; user-select: none; }
        .import-preview-controls label:hover { background: #f3f4f6; }
        .import-preview-controls label input { margin: 0; cursor: pointer; }
        .import-preview-hint { font-size: 0.7rem; color: #9ca3af; font-style: italic; margin-bottom: 0.25rem; }
        .import-preview-canvas-wrap canvas { cursor: crosshair; }
        .import-override-count { font-size: 0.7rem; color: #6b7280; margin-left: auto; }
        .import-preview-legend .legend-swatch-dash { width: 14px; height: 0; border-top: 2px dashed; display: inline-block; }

        /* Formed Plate Segment Builder */
        .fp-global-params { margin-bottom: 0.75rem; }
        .fp-segment-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
        .fp-segment-row { display: flex; align-items: center; gap: 0.35rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.35rem 0.45rem; font-size: 0.8rem; }
        .fp-segment-row.fp-type-allowance { border-left: 3px solid #9ca3af; }
        .fp-segment-row.fp-type-flat { border-left: 3px solid #2563eb; }
        .fp-segment-row.fp-type-bend { border-left: 3px solid #d97706; }
        .fp-seg-type-label { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; min-width: 60px; color: #374151; }
        .fp-seg-type-label.fp-allowance-label { color: #6b7280; }
        .fp-seg-type-label.fp-flat-label { color: #2563eb; }
        .fp-seg-type-label.fp-bend-label { color: #d97706; }
        .fp-seg-fields { display: flex; align-items: center; gap: 0.3rem; flex-grow: 1; flex-wrap: wrap; }
        .fp-seg-field { display: flex; align-items: center; gap: 0.15rem; }
        .fp-seg-field label { font-size: 0.7rem; color: #6b7280; white-space: nowrap; }
        .fp-seg-field input, .fp-seg-field select { font-size: 0.8rem; padding: 0.2rem 0.3rem; border: 1px solid #d1d5db; border-radius: 0.25rem; width: 3.5rem; }
        .fp-seg-field select { width: auto; }
        .fp-seg-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
        .fp-seg-btn { background: none; border: 1px solid #d1d5db; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; padding: 0.15rem 0.35rem; color: #6b7280; line-height: 1; }
        .fp-seg-btn:hover { background: #f3f4f6; color: #374151; }
        .fp-seg-btn.fp-delete-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
        .fp-seg-btn.fp-move-btn { font-size: 0.6rem; padding: 0.1rem 0.25rem; }
        .fp-seg-btn.fp-move-btn:hover { background: #dbeafe; color: #2563eb; border-color: #93c5fd; }
        .fp-add-segment-bar { display: flex; gap: 0.35rem; margin-top: 0.25rem; }
        .fp-add-btn { flex: 1; padding: 0.35rem 0.5rem; font-size: 0.75rem; border: 1px dashed #d1d5db; border-radius: 0.375rem; background: #fff; cursor: pointer; color: #6b7280; text-align: center; }
        .fp-add-btn:hover { background: #f0f9ff; border-color: #93c5fd; color: #2563eb; }
        .fp-summary { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; padding: 0.35rem 0.5rem; background: #f0f9ff; border-radius: 0.25rem; border: 1px solid #dbeafe; }

        /* === 3D MODE CSS === */
        .mode-toggle-3d { display: flex; align-items: center; gap: 0.25rem; margin-right: 0.75rem; padding-right: 0.75rem; border-right: 1px solid #d1d5db; }
        .mode-toggle-3d .toggle-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; cursor: pointer; padding: 0.25rem 0.4rem; border-radius: 0.25rem; transition: all 0.15s ease; user-select: none; }
        .mode-toggle-3d .toggle-label:hover { color: #374151; }
        .mode-toggle-3d .toggle-label.active { background: #1f2937; color: #fff; }
        #three-canvas-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 5; background: #e8eaed; }
        #three-canvas-container canvas:not(#drafting-canvas) { width: 100% !important; height: 100% !important; display: block; }
        .three-toolbar-3d { display: none; }
        .three-toolbar-3d.active { display: flex; }
        .canvas-toolbar-2d.hidden { display: none; }
        #three-info-overlay { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(31,41,55,0.85); color: #e5e7eb; font-size: 0.7rem; padding: 0.3rem 0.75rem; border-radius: 0.375rem; z-index: 10; pointer-events: none; white-space: nowrap; letter-spacing: 0.02em; }
        #canvas-hints-overlay { position: absolute; bottom: 8px; right: 8px; background: rgba(31,41,55,0.7); color: #d1d5db; font-size: 0.65rem; padding: 0.25rem 0.6rem; border-radius: 0.25rem; z-index: 10; pointer-events: none; white-space: nowrap; letter-spacing: 0.02em; }
        #three-dim-labels { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 6; }
        .three-dim-label { position: absolute; background: rgba(255,255,255,0.92); color: #1f2937; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 0.25rem; border: 1px solid #d1d5db; pointer-events: auto; cursor: pointer; user-select: none; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
        .three-dim-label:hover { background: #dbeafe; border-color: #3b82f6; }
        .three-dim-label.editing { background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
        .three-dim-label input { width: 4rem; border: none; outline: none; font-size: 0.75rem; font-weight: 600; text-align: center; background: transparent; font-family: inherit; }
        .sidebar-3d-content { display: none; }
        .sidebar-3d-content.active { display: block; }
        .sidebar-dxfviewer-content { display: none; }
        .sidebar-dxfviewer-content.active { display: block; }
        #dxf-viewer-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 5; background: #f8f9fa; flex-direction: column; align-items: center; justify-content: center; }
        #dxf-viewer-container .dxf-viewer-placeholder { text-align: center; color: #9ca3af; }
        #dxf-viewer-container .dxf-viewer-placeholder .dxf-drop-zone { width: 320px; height: 200px; border: 2px dashed #d1d5db; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; transition: all 0.2s ease; }
        #dxf-viewer-container .dxf-viewer-placeholder .dxf-drop-zone:hover { border-color: #9ca3af; background: rgba(0,0,0,0.02); }
        #dxf-viewer-container .dxf-viewer-placeholder .dxf-drop-icon { font-size: 2.5rem; }
        #dxf-viewer-container .dxf-viewer-placeholder .dxf-drop-text { font-size: 0.95rem; font-weight: 500; color: #6b7280; }
        #dxf-viewer-container .dxf-viewer-placeholder .dxf-drop-hint { font-size: 0.8rem; color: #9ca3af; }
        #dxf-viewer-container.drag-over { background: #eff6ff; }
        #dxf-viewer-container.drag-over .dxf-drop-zone { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
        #dxf-viewer-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: grab; }
        #dxf-viewer-canvas:active { cursor: grabbing; }
        #dxf-viewer-canvas.hidden { display: none; }
        #dxf-viewer-info-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(31,41,55,0.85); color: #e5e7eb; font-size: 0.7rem; padding: 0.3rem 0.75rem; border-radius: 0.375rem; z-index: 10; pointer-events: none; white-space: nowrap; }
        #dxf-viewer-coords { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.9); color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid #d1d5db; z-index: 10; pointer-events: none; font-family: monospace; }
        .dxfv-layer-list { max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
        .dxfv-layer-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid #f3f4f6; font-size: 0.78rem; cursor: pointer; transition: background 0.1s; }
        .dxfv-layer-row:last-child { border-bottom: none; }
        .dxfv-layer-row:hover { background: #f9fafb; }
        .dxfv-layer-row.hidden-layer { opacity: 0.4; }
        .dxfv-layer-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
        .dxfv-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dxfv-layer-count { color: #9ca3af; font-size: 0.7rem; }
        .dxfv-stat { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.2rem 0; }
        .dxfv-stat-label { color: #6b7280; }
        .dxfv-stat-value { font-weight: 600; color: #1f2937; }
        .dxfv-folder-tree { max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
        .dxfv-tree-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; font-size: 0.78rem; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid #f3f4f6; }
        .dxfv-tree-row:last-child { border-bottom: none; }
        .dxfv-tree-row:hover { background: #f0f9ff; }
        .dxfv-tree-row.folder { font-weight: 600; color: #374151; }
        .dxfv-tree-row.file { color: #4b5563; }
        .dxfv-tree-row.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
        .dxfv-tree-arrow { width: 14px; text-align: center; font-size: 0.65rem; color: #9ca3af; flex-shrink: 0; }
        .dxfv-tree-icon { flex-shrink: 0; font-size: 0.75rem; }
        .dxfv-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .td-corner-btn.selected { background: #3b82f6 !important; color: #fff !important; border-color: #2563eb !important; }
        .td-feature-item.selected { background: #dbeafe !important; border-color: #3b82f6 !important; }
        .sidebar-2d-content.hidden { display: none; }
        .td-part-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
        .td-part-card h4 { font-size: 0.85rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
        .td-dim-row { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; }
        .td-dim-field { flex: 1; }
        .td-dim-field label { display: block; font-size: 0.7rem; color: #6b7280; margin-bottom: 0.15rem; font-weight: 500; }
        .td-dim-field input { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.85rem; }
        .td-color-preview { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.25rem; vertical-align: middle; }
        .td-view-btns { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
        .td-view-btn { padding: 0.3rem 0.5rem; font-size: 0.7rem; border: 1px solid #d1d5db; border-radius: 0.25rem; background: #fff; cursor: pointer; color: #374151; font-weight: 500; }
        .td-view-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
        .td-view-btn.active { background: #1f2937; color: #fff; border-color: #1f2937; }
        .td-axes-legend { display: flex; gap: 0.75rem; font-size: 0.7rem; color: #6b7280; margin-top: 0.35rem; align-items: center; }
        .td-axes-legend span { display: flex; align-items: center; gap: 0.2rem; }
        .td-axis-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        /* Feature tools */
        .td-tool-btns { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
        .td-tool-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; border: 1px solid #d1d5db; border-radius: 0.25rem; background: #fff; cursor: pointer; color: #374151; font-weight: 500; display: flex; align-items: center; gap: 0.25rem; }
        .td-tool-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
        .td-tool-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
        .td-tool-btn.danger { color: #dc2626; border-color: #fca5a5; }
        .td-tool-btn.danger:hover { background: #fef2f2; border-color: #dc2626; }
        .td-feature-list { max-height: 200px; overflow-y: auto; margin-top: 0.5rem; }
        .td-feature-item { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; font-size: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.25rem; margin-bottom: 0.2rem; background: #fff; }
        .td-feature-item:hover { background: #f9fafb; }
        .td-feature-item .feat-info { color: #374151; font-weight: 500; }
        .td-feature-item .feat-face { color: #6b7280; font-size: 0.68rem; margin-left: 0.3rem; }
        .td-feature-item .feat-del { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.85rem; padding: 0 0.2rem; line-height: 1; }
        .td-feature-item .feat-del:hover { color: #dc2626; }
        /* Part list styles */
        .td-part-list { max-height: 180px; overflow-y: auto; margin-bottom: 0.5rem; }
        .td-part-list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.6rem; font-size: 0.78rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; margin-bottom: 0.25rem; background: #fff; cursor: pointer; transition: all 0.15s; }
        .td-part-list-item:hover { background: #f9fafb; border-color: #d1d5db; }
        .td-part-list-item.active { background: #eff6ff; border-color: #3b82f6; box-shadow: 0 0 0 1px rgba(59,130,246,0.2); }
        .td-part-list-item .part-name { font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
        .td-part-list-item .part-dims { color: #6b7280; font-size: 0.68rem; margin-left: 0.4rem; white-space: nowrap; }
        .td-part-list-item .part-del { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; line-height: 1; flex-shrink: 0; }
        .td-part-list-item .part-del:hover { color: #dc2626; }
        .td-part-list-actions { display: flex; gap: 0.35rem; }
        .td-part-list-actions button { flex: 1; }

        /* Assembly Mode */
        .td-mode-toggle { display: flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 2px; margin-bottom: 0.75rem; }
        .td-mode-toggle button { flex: 1; padding: 0.4rem 0.5rem; font-size: 0.72rem; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: #6b7280; transition: all 0.15s; }
        .td-mode-toggle button.active { background: #fff; color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .td-mode-toggle button:hover:not(.active) { color: #374151; }
        .td-asm-section { display: none; }
        .td-asm-section.visible { display: block; }
        .td-design-section { display: block; }
        .td-design-section.hidden { display: none; }
        .td-pos-row { display: flex; gap: 0.35rem; margin-bottom: 0.35rem; }
        .td-pos-field { flex: 1; }
        .td-pos-field label { display: block; font-size: 0.68rem; font-weight: 600; color: #6b7280; margin-bottom: 2px; }
        .td-pos-field input { width: 100%; padding: 0.3rem 0.4rem; font-size: 0.78rem; border: 1px solid #d1d5db; border-radius: 4px; text-align: center; }
        .td-rot-btns { display: flex; gap: 0.3rem; flex-wrap: wrap; }
        .td-rot-btns button { flex: 1; min-width: 60px; padding: 0.3rem 0.4rem; font-size: 0.68rem; font-weight: 600; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; color: #374151; transition: all 0.12s; }
        .td-rot-btns button:hover { background: #f3f4f6; border-color: #9ca3af; }
        .td-asm-info { font-size: 0.72rem; color: #6b7280; padding: 0.4rem 0.5rem; background: #f9fafb; border-radius: 4px; border: 1px solid #e5e7eb; margin-top: 0.5rem; }
        .td-mate-btn { width: 100%; padding: 0.45rem; font-size: 0.75rem; font-weight: 600; border: 1px solid #3b82f6; border-radius: 4px; background: #eff6ff; color: #2563eb; cursor: pointer; transition: all 0.12s; margin-top: 0.35rem; }
        .td-mate-btn:hover { background: #dbeafe; }
        .td-mate-btn.active { background: #3b82f6; color: #fff; }
        .td-explode-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
        .td-explode-row input[type=range] { flex: 1; }
        .td-draft-section { display: none; }
        .td-draft-section.visible { display: block; }
        #drafting-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10; display: none; cursor: default; }
        .td-view-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; padding: 0.25rem 0; cursor: pointer; }
        .td-view-check input { margin: 0; cursor: pointer; }
        .td-view-check label { cursor: pointer; color: #374151; }
        .td-draft-export-btns { display: flex; gap: 0.35rem; margin-top: 0.75rem; }
        .td-draft-export-btns button { flex: 1; padding: 0.45rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 0.375rem; cursor: pointer; transition: all 0.12s; }
        .td-draft-export-pdf { background: #dc2626; color: #fff; border: 1px solid #b91c1c; }
        .td-draft-export-pdf:hover { background: #b91c1c; }
        .td-draft-export-dxf { background: #2563eb; color: #fff; border: 1px solid #1d4ed8; }
        .td-draft-export-dxf:hover { background: #1d4ed8; }
        .td-scale-select { width: 100%; padding: 0.35rem 0.5rem; font-size: 0.8rem; border: 1px solid #d1d5db; border-radius: 4px; }
        .td-pattern-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; }
        .td-pattern-btn { padding: 0.25rem 0.45rem; font-size: 0.68rem; border: 1px solid #d1d5db; border-radius: 0.25rem; background: #fff; cursor: pointer; color: #374151; }
        .td-pattern-btn:hover { background: #eff6ff; border-color: #93c5fd; }
        #td-placement-banner { display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(37,99,235,0.92); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 0.375rem; z-index: 12; pointer-events: none; white-space: nowrap; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
        /* Stage 8: 3D Context Menu */
        #three-context-menu { display: none; position: fixed; z-index: 1000; background: #1f2937; border: 1px solid #4b5563; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); padding: 4px 0; min-width: 180px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 0.8rem; color: #e5e7eb; user-select: none; }
        #three-context-menu .ctx-item { display: flex; align-items: center; padding: 6px 14px; cursor: pointer; gap: 8px; white-space: nowrap; }
        #three-context-menu .ctx-item:hover { background: #374151; }
        #three-context-menu .ctx-item .ctx-icon { width: 18px; text-align: center; flex-shrink: 0; }
        #three-context-menu .ctx-item.disabled { opacity: 0.4; pointer-events: none; }
        #three-context-menu .ctx-sep { height: 1px; background: #4b5563; margin: 4px 8px; }
        #three-context-menu .ctx-header { padding: 4px 14px; font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; }
        /* Stage 8: Assembly Cost Panel */
        .td-cost-panel { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.6rem; }
        .td-cost-row { display: flex; justify-content: space-between; align-items: center; padding: 0.15rem 0; font-size: 0.75rem; }
        .td-cost-row .cost-label { color: #374151; }
        .td-cost-row .cost-value { font-weight: 600; color: #1f2937; }
        .td-cost-row.total { border-top: 1px solid #bbf7d0; margin-top: 0.25rem; padding-top: 0.35rem; }
        .td-cost-row.total .cost-value { font-size: 0.85rem; color: #16a34a; }
        .td-cost-input-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
        .td-cost-input-row label { font-size: 0.7rem; color: #6b7280; white-space: nowrap; font-weight: 500; }
        .td-cost-input-row input { flex: 1; padding: 0.25rem 0.4rem; font-size: 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; max-width: 70px; }
        /* Stage 8: Save/Load & Template Buttons */
        .td-action-row { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
        .td-action-row button { flex: 1; padding: 0.35rem 0.3rem; font-size: 0.7rem; font-weight: 600; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; color: #374151; transition: all 0.12s; }
        .td-action-row button:hover { background: #f3f4f6; border-color: #9ca3af; }
        .td-action-row button.primary { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
        .td-action-row button.primary:hover { background: #dbeafe; }
        .td-template-btn { width: 100%; padding: 0.4rem; font-size: 0.72rem; font-weight: 600; border: 1px solid #a78bfa; border-radius: 4px; background: #f5f3ff; color: #6d28d9; cursor: pointer; transition: all 0.12s; margin-top: 0.35rem; }
        .td-template-btn:hover { background: #ede9fe; }
        /* Face Export */
        .td-face-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin-top: 0.4rem; }
        .td-face-btn { padding: 0.35rem 0.3rem; font-size: 0.7rem; font-weight: 600; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; color: #374151; transition: all 0.12s; text-align: center; }
        .td-face-btn:hover { background: #f0fdf4; border-color: #86efac; }
        .td-face-btn.selected { background: #dcfce7; border-color: #22c55e; color: #166534; box-shadow: 0 0 0 1px #22c55e; }
        .td-face-btn .face-icon { display: block; font-size: 1rem; margin-bottom: 1px; }
        .td-faceexport-btns { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
        .td-faceexport-btns button { flex: 1; padding: 0.4rem 0.5rem; font-size: 0.73rem; font-weight: 600; border-radius: 0.375rem; cursor: pointer; transition: all 0.12s; }
        .td-faceexport-btns button:disabled { opacity: 0.4; cursor: not-allowed; }
        .td-faceexport-dxf { background: #2563eb; color: #fff; border: 1px solid #1d4ed8; }
        .td-faceexport-dxf:hover:not(:disabled) { background: #1d4ed8; }
        .td-faceexport-pdf { background: #dc2626; color: #fff; border: 1px solid #b91c1c; }
        .td-faceexport-pdf:hover:not(:disabled) { background: #b91c1c; }
        .td-face-preview { margin-top: 0.5rem; padding: 0.4rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 0.72rem; color: #6b7280; }
        .td-face-preview .face-dim { font-weight: 600; color: #374151; }
        .td-batch-btn { width: 100%; padding: 0.35rem; font-size: 0.7rem; font-weight: 600; border: 1px solid #6366f1; border-radius: 4px; background: #eef2ff; color: #4338ca; cursor: pointer; margin-top: 0.35rem; transition: all 0.12s; }
        .td-batch-btn:hover { background: #e0e7ff; }

        /* --- Auth Header --- */
        .header-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
        .header-row > #auth-header { flex-shrink: 0; }
        #auth-header { display: flex; align-items: center; gap: 0.5rem; }
        #auth-header-user { display: inline-flex; align-items: center; gap: 0.4rem; }
        #auth-user-email { font-size: 0.7rem; color: #94a3b8; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #auth-signout-btn { font-size: 0.65rem; padding: 0.2rem 0.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; background: transparent; color: #94a3b8; cursor: pointer; transition: all 0.15s; }
        #auth-signout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
        #auth-header-login { font-size: 0.7rem; padding: 0.3rem 0.7rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; background: transparent; color: #94a3b8; cursor: pointer; transition: all 0.15s; }
        #auth-header-login:hover { background: rgba(255,255,255,0.1); color: #fff; }

        /* --- Auth Modal --- */
        /* Dimension edit popup */
        .dim-edit-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 3500; align-items: center; justify-content: center; }
        .dim-edit-overlay.active { display: flex; }
        .dim-edit-card { background: #fff; border-radius: 0.5rem; padding: 1.25rem; width: 300px; max-width: 90vw; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
        .dim-edit-card label { display: block; font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
        .dim-edit-card input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 1rem; background: #fff; box-sizing: border-box; }
        .dim-edit-card input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
        .dim-edit-buttons { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
        .dim-edit-buttons button { flex: 1; padding: 0.5rem; font-size: 0.85rem; font-weight: 500; border-radius: 0.375rem; cursor: pointer; border: 1px solid #d1d5db; }
        #dim-edit-cancel { background: #f9fafb; color: #374151; }
        #dim-edit-cancel:hover { background: #f3f4f6; }
        #dim-edit-ok { background: #2563eb; color: #fff; border-color: #2563eb; }
        #dim-edit-ok:hover { background: #1d4ed8; }

        .auth-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 3000; align-items: center; justify-content: center; }
        .auth-modal-overlay.active { display: flex; }
        .auth-modal-card { background: #fff; border-radius: 0.75rem; padding: 2rem; width: 380px; max-width: 90vw; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
        .auth-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; line-height: 1; padding: 0 0.25rem; }
        .auth-close:hover { color: #374151; }
        .auth-modal-card h2 { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 0.25rem; }
        .auth-subtitle { font-size: 0.8rem; color: #6b7280; margin-bottom: 1.25rem; }
        .auth-field { margin-bottom: 0.85rem; }
        .auth-field label { display: block; font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 0.3rem; }
        .auth-field input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; background: #fff; }
        .auth-field input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
        .auth-error { font-size: 0.75rem; color: #dc2626; margin-bottom: 0.75rem; padding: 0.5rem; background: #fef2f2; border-radius: 0.25rem; }
        .auth-submit { width: 100%; padding: 0.65rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: #2563eb; border: none; border-radius: 0.375rem; cursor: pointer; transition: background 0.15s; }
        .auth-submit:hover { background: #1d4ed8; }
        .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-links { margin-top: 1rem; text-align: center; }
        .auth-links a { display: block; font-size: 0.75rem; color: #2563eb; text-decoration: none; margin-bottom: 0.35rem; cursor: pointer; }
        .auth-links a:hover { text-decoration: underline; }

        /* === RESPONSIVE: New component base styles (hidden on desktop) === */
        .mobile-menu-btn { display: none; align-items: center; justify-content: center; background: #1f2937; color: white; border: 1px solid #374151; border-radius: 0.375rem; padding: 0.4rem 0.6rem; font-size: 1.1rem; cursor: pointer; line-height: 1; flex-shrink: 0; }
        .mobile-menu-btn:hover { background: #374151; }
        .mobile-grid-toggle { display: none; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.4rem 0.6rem; font-size: 1rem; cursor: pointer; line-height: 1; flex-shrink: 0; }
        .mobile-grid-toggle:hover { background: #e5e7eb; }
        .sidebar-close-btn { display: none; position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0.25rem; z-index: 5; }
        .sidebar-close-btn:hover { color: #fff; }
        .right-panel-close-btn { display: none; position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0.25rem; z-index: 5; }
        .right-panel-close-btn:hover { color: #fff; }
        .right-panel .header { position: relative; }
        .sidebar-sticky-top .header { position: relative; }
        .mobile-est-btn { display: none; position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 30; background: #1e293b; color: white; border: 1px solid #334155; border-right: none; border-radius: 0.375rem 0 0 0.375rem; padding: 0.6rem 0.3rem; cursor: pointer; font-size: 0.75rem; font-weight: 600; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.05em; }
        .mobile-est-btn:hover { background: #334155; }
        .panel-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
        .panel-backdrop.active { display: block; }
        .bottom-tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: #111111; border-top: 1px solid #333; z-index: 110; align-items: stretch; }
        .bottom-tab { flex: 1; border: none; background: transparent; color: #9ca3af; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.15s; }
        .bottom-tab.active { color: #fff; background: rgba(255,255,255,0.08); }
        .bottom-tab:hover { color: #d1d5db; }

        /* === RESPONSIVE: Small laptop (1024-1366px) === */
        @media (max-width: 1366px) {
            :root {
                --sidebar-width: 380px;
                --right-panel-width: 280px;
            }
            .canvas-toolbar { flex-wrap: wrap; gap: 0.5rem; }
            .grid-controls { flex-wrap: wrap; gap: 0.4rem 0.75rem; }
        }

        /* === RESPONSIVE: Tablet (768-1024px) === */
        @media (max-width: 1024px) {
            :root {
                --sidebar-width: 420px;
                --right-panel-width: 320px;
            }
            .sidebar {
                position: fixed; top: 0; left: 0; height: 100vh;
                min-width: unset; max-width: 90vw;
                z-index: 100;
                transform: translateX(-100%);
                transition: transform 0.25s ease;
                box-shadow: 4px 0 16px rgba(0,0,0,0.15);
            }
            .sidebar.open { transform: translateX(0); }
            .right-panel {
                position: fixed; top: 0; right: 0; height: 100vh;
                min-width: unset; max-width: 90vw;
                z-index: 100;
                transform: translateX(100%);
                transition: transform 0.25s ease;
                box-shadow: -4px 0 16px rgba(0,0,0,0.15);
            }
            .right-panel.open { transform: translateX(0); }
            .right-panel.collapsed { margin-right: 0; transform: translateX(100%); }
            .right-panel-toggle { display: none; }
            .sidebar-toggle { display: none; }
            .mobile-menu-btn { display: flex; }
            .mobile-est-btn { display: block; }
            .sidebar-close-btn { display: block; }
            .right-panel-close-btn { display: block; }
            .canvas-toolbar { flex-wrap: wrap; gap: 0.5rem; }
            .grid-controls { flex-wrap: wrap; gap: 0.4rem 0.75rem; }
        }

        /* === RESPONSIVE: Phone (<768px) === */
        @media (max-width: 768px) {
            :root {
                --sidebar-width: 100vw;
                --right-panel-width: 100vw;
            }
            .sidebar { max-width: 100vw; height: calc(100vh - 48px) !important; padding-bottom: 80px; }
            .right-panel { max-width: 100vw; height: calc(100vh - 48px) !important; padding-bottom: 80px; }
            .bottom-tab-bar { display: flex; }
            .mobile-est-btn { display: none; }
            .canvas-area { padding-bottom: 48px; }
            .canvas-toolbar { padding: 0.25rem 0.5rem; gap: 0.4rem; }
            .grid-controls { display: none; }
            .grid-controls.mobile-open { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 0.5rem; border-bottom: 1px solid #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 15; }
            .mobile-grid-toggle { display: flex; }
            .header-logo { height: 60px; }
        }

        /* === INSPECTIONS ENVIRONMENT === */
        #inspections-container {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            display: none; z-index: 5; background: #fafbfc;
            overflow: hidden;
        }
        #inspections-canvas {
            position: absolute; top: 0; left: 0;
            cursor: grab;
        }
        #inspections-canvas.hidden { display: none; }
        #insp-image-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 10;
        }
        .insp-dim-field {
            position: absolute; pointer-events: auto;
            display: flex; flex-direction: column; align-items: center; gap: 1px;
        }
        .insp-dim-label {
            font-weight: 700; color: #374151; white-space: nowrap;
            background: rgba(255,255,255,0.85); border-radius: 2px; padding: 0 2px;
            cursor: grab; user-select: none;
        }
        .insp-dim-label:active { cursor: grabbing; }
        .insp-dim-measured {
            padding: 1px 2px; border: 1.5px solid #6b7280; border-radius: 3px;
            text-align: center; background: rgba(255,255,255,0.9);
            box-shadow: 0 0 2px rgba(0,0,0,0.1);
        }
        .insp-pass .insp-dim-measured { border-color: #16a34a; background: rgba(220,252,231,0.9); }
        .insp-fail .insp-dim-measured { border-color: #dc2626; background: rgba(254,226,226,0.9); }
        /* QA Log entries */
        .qa-log-entry { display:flex; gap:0.5rem; padding:0.5rem; border:1px solid #e5e7eb; border-radius:6px; margin-bottom:0.4rem; cursor:pointer; transition:background 0.15s; }
        .qa-log-entry:hover { background:#f3f4f6; }
        .qa-log-entry-thumb { width:48px; height:48px; object-fit:contain; border-radius:4px; background:#f9fafb; flex-shrink:0; }
        .qa-log-entry-info { flex:1; min-width:0; }
        .qa-log-entry-name { font-size:0.78rem; font-weight:600; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .qa-log-entry-meta { font-size:0.7rem; color:#6b7280; }
        .qa-log-entry-status { font-size:0.72rem; font-weight:600; }
        .qa-log-pass { color:#16a34a; }
        .qa-log-fail { color:#dc2626; }
        .qa-log-mixed { color:#d97706; }
        .insp-placeholder {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            display: flex; align-items: center; justify-content: center;
            z-index: 2; pointer-events: none;
        }
        .insp-placeholder > * { pointer-events: auto; }
        .insp-drop-zone {
            width: 320px; height: 200px; border: 2px dashed #d1d5db; border-radius: 12px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 0.75rem; cursor: pointer; transition: all 0.2s ease; color: #9ca3af;
        }
        .insp-drop-zone:hover { border-color: #9ca3af; background: rgba(0,0,0,0.02); }
        .insp-drop-icon { font-size: 2.5rem; }
        .insp-drop-text { font-size: 0.95rem; font-weight: 500; color: #6b7280; }
        .insp-drop-hint { font-size: 0.8rem; color: #9ca3af; }
        .insp-site-prompt { font-size: 1rem; color: #9ca3af; font-weight: 500; }
        #inspections-container.drag-over { background: #eff6ff; }
        #inspections-container.drag-over .insp-drop-zone { border-color: #3b82f6; background: rgba(59,130,246,0.05); }

        /* Converter container */
        #converter-container {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            display: none; z-index: 5; background: #fafbfc;
            overflow: hidden;
            flex-direction: column; align-items: center; justify-content: center;
        }
        #converter-drop-zone:hover { border-color: #9ca3af; background: rgba(0,0,0,0.02); }
        #converter-preview-section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
        #converter-preview-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

        /* Force-hide 2D elements when converter is active (prevents async bleed-through) */
        body.converter-mode #canvas,
        body.converter-mode #canvas-hints-overlay,
        body.converter-mode #canvas-toolbar-2d,
        body.converter-mode #liveCoordsDisplay,
        body.converter-mode #mode-indicator,
        body.converter-mode #freeformInputOverlay,
        body.converter-mode .right-panel { display: none !important; }

        /* Inspections sidebar */
        .insp-mode-toggle {
            display: flex; gap: 0.3rem; background: #f3f4f6; border-radius: 6px; padding: 3px;
        }
        .insp-mode-btn {
            flex: 1; padding: 0.4rem 0.5rem; font-size: 0.78rem; font-weight: 600;
            cursor: pointer; background: transparent; color: #6b7280;
            border: none; border-radius: 4px; transition: all 0.15s;
        }
        .insp-mode-btn.active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .insp-mode-btn:hover:not(.active) { color: #374151; }

        .insp-shape-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem;
        }
        .insp-shape-btn {
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            padding: 0.4rem 0.2rem; font-size: 0.7rem; font-weight: 500;
            cursor: pointer; background: #f9fafb; color: #374151;
            border: 1px solid #e5e7eb; border-radius: 6px; transition: all 0.15s;
        }
        .insp-shape-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
        .insp-shape-btn.active { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
        .insp-shape-icon { font-size: 1.2rem; }
        .insp-shape-label { line-height: 1.1; text-align: center; }

        .insp-dim-row {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            padding: 0.25rem 0; font-size: 0.82rem;
        }
        .insp-dim-row label { font-weight: 500; color: #374151; }