* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: Segoe UI, Tahoma, sans-serif; background: #1e1f23; color: #d8d9dd; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100vh; }
#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #2a2c31; border-bottom: 1px solid #3a3c42; font-size: 13px; flex-wrap: wrap; flex: 0 0 auto; }
#topbar .sep { color: #555; }
#viewName { font-weight: 600; color: #f0f0f0; }
#status { color: #8ab4ff; margin-left: auto; }
button { background: #3a3c42; color: #d8d9dd; border: 1px solid #4a4c52; padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 12px; }
button:hover:not(:disabled) { background: #4a4c52; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.active { background: #2c5cc6; border-color: #4a7ce0; }
label.inline { display: inline-flex; align-items: center; gap: 4px; color: #b0b3bb; font-size: 12px; }
label.inline input { background: #1e1f23; color: #f0f0f0; border: 1px solid #4a4c52; padding: 3px 5px; width: 64px; border-radius: 3px; font-size: 12px; }
#orthoIndicator { display: inline-block; padding: 4px 10px; background: #3a3c42; color: #777; border: 1px solid #4a4c52; border-radius: 3px; font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; letter-spacing: 0.5px; }
#orthoIndicator.active { background: #2c5cc6; color: #fff; border-color: #4a7ce0; }
#hint { padding: 4px 12px; background: #25272b; color: #8a8d95; font-size: 11px; border-top: 1px solid #3a3c42; flex: 0 0 auto; }
#main { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
#canvas { display: block; flex: 1 1 0; width: 100%; height: 100%; background: #15161a; cursor: default; min-width: 0; }
#canvas.draw { cursor: crosshair; }
#canvas.pan.panning { cursor: grabbing; }
#layerBackground { pointer-events: none; }
#layerBackground[hidden] { display: none; }
#lblDxfBg, #lblExtr { display: inline-flex; align-items: center; gap: 4px; color: #b0b3bb; font-size: 12px; user-select: none; }
#lblDxfBg input, #lblExtr input { margin: 0; }
#layerImported[hidden] { display: none; }
.dxf-underlay { fill: none; stroke: rgba(190, 200, 220, 0.85); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.dxf-underlay.txt { fill: rgba(190, 200, 220, 0.85); stroke: none; font-family: Arial, Helvetica, sans-serif; }
.dxf-hatch { fill: rgba(190, 200, 220, 0.18); stroke: rgba(190, 200, 220, 0.4); stroke-width: 0.3; vector-effect: non-scaling-stroke; pointer-events: none; }
.dxf-solid { fill: rgba(190, 200, 220, 0.85); stroke: none; pointer-events: none; }
#palette { flex: 0 0 280px; background: #25272b; border-left: 1px solid #3a3c42; display: flex; flex-direction: column; font-size: 12px; }
#palette[hidden] { display: none; }
#palette header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #2a2c31; border-bottom: 1px solid #3a3c42; font-weight: 600; color: #f0f0f0; }
#palette header button { padding: 2px 8px; font-size: 12px; }
#palette .palette-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
#paletteProps { display: flex; flex-direction: column; gap: 8px; }
#paletteProps .props-empty { color: #777; font-style: italic; font-size: 12px; }
#paletteProps .props-header { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #3a3c42; }
#paletteProps .props-header .props-title { flex: 1 1 auto; color: #f0f0f0; font-weight: 600; }
#paletteProps .props-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b0b3bb; }
#paletteProps .props-row label { flex: 0 0 auto; }
#paletteProps .props-row input { flex: 1 1 auto; max-width: 100px; background: #1e1f23; color: #f0f0f0; border: 1px solid #4a4c52; padding: 3px 6px; border-radius: 3px; font-size: 12px; }
#paletteProps .props-row select { flex: 1 1 auto; background: #1e1f23; color: #f0f0f0; border: 1px solid #4a4c52; padding: 3px 6px; border-radius: 3px; font-size: 12px; }
#paletteProps .props-status { font-size: 10px; padding: 1px 6px; border-radius: 3px; text-align: center; }
#paletteProps .props-status.new { background: #2c5cc6; color: #fff; }
#paletteProps .props-status.modified { background: #c68a2c; color: #fff; }
#paletteProps .props-status.sent { background: #355038; color: #b8d8b8; }
#paletteProps .props-status.drawing { background: #c68a2c; color: #fff; }
#paletteProps .props-del { background: transparent; border: 1px solid #4a4c52; color: #b0b3bb; padding: 4px 8px; cursor: pointer; font-size: 12px; border-radius: 3px; }
#paletteProps .props-del:hover { color: #ff6868; border-color: #ff6868; }
.poly-edge { stroke: #6f7681; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.poly-detail { stroke: #b8b8c0; stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.fill-imported { fill: none; stroke: rgba(160, 180, 210, 0.35); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.sketch-finished { fill: rgba(80, 200, 120, 0.25); stroke: #5acf85; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.sketch-modified { fill: rgba(220, 160, 80, 0.25); stroke: #e0a040; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.sketch-sent { fill: rgba(120, 160, 220, 0.18); stroke: #7ba7e6; stroke-width: 1; stroke-dasharray: 4 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.sketch-selected { stroke: #ffe066 !important; stroke-width: 2.4 !important; fill: rgba(255, 224, 102, 0.18) !important; }
.sketch-current { fill: none; stroke: #ffb84a; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sketch-rubber { fill: none; stroke: #ffb84a; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; vector-effect: non-scaling-stroke; }
.sketch-vertex { fill: #ffb84a; stroke: #1e1f23; stroke-width: 1; vector-effect: non-scaling-stroke; }
.snap-endpoint { fill: rgba(255, 200, 50, 0.35); stroke: #ffc832; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.snap-segment { fill: rgba(120, 220, 255, 0.35); stroke: #78dcff; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.snap-perp { fill: none; stroke: #ff78c8; stroke-width: 2; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.snap-intersection { fill: none; stroke: #ff6868; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.snap-midpoint { fill: rgba(120, 240, 140, 0.35); stroke: #78f08c; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

#leftPalette { flex: 0 0 70px; background: #25272b; border-right: 1px solid #3a3c42; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; align-items: stretch; }
#leftPalette button { width: 100%; padding: 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; }
#leftPalette button.active { background: #ff8800; border-color: #ffa040; color: #fff; }

#mirrorPopup { position: absolute; left: 78px; top: 8px; z-index: 20; background: #2a2c31; border: 1px solid #4a4c52; border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.45); font-size: 12px; min-width: 160px; }
#mirrorPopup[hidden] { display: none; }
#mirrorPopup header { font-weight: 700; color: #f0f0f0; font-size: 11px; letter-spacing: 0.6px; border-bottom: 1px solid #3a3c42; padding-bottom: 5px; margin-bottom: 2px; }
#mirrorPopup label { display: flex; align-items: center; gap: 8px; color: #d8d9dd; cursor: pointer; user-select: none; font-weight: 600; letter-spacing: 0.4px; padding: 2px 0; }
#mirrorPopup label input { margin: 0; cursor: pointer; }

.cmd-selection { fill: none; stroke: #ff8800; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.cmd-preview { fill: rgba(255, 136, 0, 0.18); stroke: #ff8800; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cmd-axis { fill: none; stroke: #ff8800; stroke-width: 1; stroke-dasharray: 8 4; vector-effect: non-scaling-stroke; }
.cmd-marker { fill: #ff8800; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.preview-blacha { fill: rgba(80, 200, 120, 0.18); stroke: #5acf85; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.preview-welna { fill: rgba(230, 180, 80, 0.20); stroke: #e6b450; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.welna-batting { fill: none; stroke: #e6b450; stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0.85; }
.welna-batting-preview { fill: none; stroke: #e6b450; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0.5; }
.outline-edit { fill: none; stroke: #4a7ce0; stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
#paletteProps .props-edit { background: #2c5cc6; border: 1px solid #4a7ce0; color: #fff; padding: 5px 10px; cursor: pointer; font-size: 12px; border-radius: 3px; }
#paletteProps .props-edit:hover { background: #3a6cd6; }
#paletteProps .props-edit-row { display: flex; gap: 6px; }
#paletteProps .props-edit-row button { flex: 1 1 0; padding: 5px 10px; font-size: 12px; border-radius: 3px; cursor: pointer; }
#paletteProps .props-edit-row .ok { background: #355038; border: 1px solid #5acf85; color: #b8d8b8; }
#paletteProps .props-edit-row .ok:disabled { opacity: 0.4; cursor: not-allowed; }
#paletteProps .props-edit-row .cancel { background: transparent; border: 1px solid #4a4c52; color: #b0b3bb; }
.vertex-handle { fill: rgba(255, 224, 102, 0.85); stroke: #1e1f23; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: grab; }
.vertex-handle:hover { fill: #ffec80; stroke: #ffe066; }
.vertex-handle.dragging { fill: #ffe066; stroke: #fff; cursor: grabbing; }
#lenInput { position: fixed; transform: translate(-50%, -150%); background: #1e1f23; color: #ffb84a; border: 1px solid #ffb84a; padding: 2px 6px; width: 80px; font-size: 12px; border-radius: 3px; z-index: 100; text-align: center; pointer-events: auto; font-family: inherit; outline: none; }
#lenInput:focus { background: #2a2c31; color: #ffe0a0; border-color: #ffe066; box-shadow: 0 0 0 2px rgba(255, 224, 102, 0.25); }
#lenInput[hidden] { display: none; }
#angInput { position: fixed; transform: translate(-50%, -50%); background: #1e1f23; color: #78dcff; border: 1px solid #78dcff; padding: 2px 6px; width: 70px; font-size: 12px; border-radius: 3px; z-index: 100; text-align: center; pointer-events: auto; font-family: inherit; outline: none; }
#angInput:focus { background: #2a2c31; color: #b8ecff; border-color: #b8ecff; box-shadow: 0 0 0 2px rgba(120, 220, 255, 0.25); }
#angInput[hidden] { display: none; }
#angInput::after { content: '°'; }
#mirrorAngInput { position: fixed; transform: translate(-50%, -150%); background: #1e1f23; color: #ff8800; border: 1px solid #ff8800; padding: 2px 6px; width: 80px; font-size: 12px; border-radius: 3px; z-index: 100; text-align: center; pointer-events: auto; font-family: inherit; outline: none; }
#mirrorAngInput:focus { background: #2a2c31; color: #ffb060; border-color: #ffa040; box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.3); }
#mirrorAngInput[hidden] { display: none; }