@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-app: #0c0f14;--bg-surface: #141922;--bg-surface-elevated: #1a2230;--bg-card: rgba(22, 29, 41, .75);--bg-glass: rgba(18, 24, 35, .82);--border-subtle: rgba(255, 255, 255, .08);--border-prominent: rgba(255, 255, 255, .16);--border-focus: #0ea5e9;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-cyan: #38bdf8;--accent-cyan-glow: rgba(56, 189, 248, .25);--accent-blue: #0284c7;--accent-indigo: #6366f1;--accent-emerald: #10b981;--accent-rose: #f43f5e;--accent-amber: #f59e0b;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);--transition-fast: .15s cubic-bezier(.16, 1, .3, 1);--transition-smooth: .25s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;width:100vw;height:100vh;position:relative;overflow:hidden}.app-header{height:56px;background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:40;position:relative}.brand-row{display:flex;align-items:center;gap:12px}.brand-icon{width:32px;height:32px;background:linear-gradient(135deg,#0284c7,#38bdf8);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 16px var(--accent-cyan-glow)}.brand-title{font-size:16px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-actions{display:flex;align-items:center;gap:8px}.btn-nav{display:inline-flex;align-items:center;gap:6px;background:#ffffff0d;border:1px solid var(--border-subtle);color:var(--text-primary);font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-nav:hover{background:#ffffff1a;border-color:var(--border-prominent);transform:translateY(-1px)}.btn-nav.primary{background:linear-gradient(135deg,#0284c7,#0ea5e9);border:1px solid rgba(56,189,248,.3);color:#fff;box-shadow:0 2px 10px #0ea5e94d}.btn-nav.primary:hover{background:linear-gradient(135deg,#0369a1,#0284c7);box-shadow:0 4px 14px #0ea5e973}.workspace-layout{flex:1;display:flex;position:relative;overflow:hidden}.canvas-container{flex:1;position:relative;height:100%;width:100%;background:radial-gradient(circle at center,#111620,#0c0f14);-webkit-user-select:none;user-select:none}.toolbar-container{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:30;pointer-events:auto}.sidebar-container{width:320px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;z-index:20;position:relative;transition:transform var(--transition-smooth)}.inspector-container{position:absolute;bottom:24px;right:340px;z-index:30;transition:opacity var(--transition-fast),transform var(--transition-fast)}.inspector-container.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}.floor-canvas{display:block;width:100%;height:100%;cursor:crosshair}.canvas-bg{fill:transparent}.wall-segment{stroke:#e2e8f0;stroke-linecap:square;stroke-linejoin:round;cursor:pointer;transition:stroke .15s ease,filter .15s ease}.wall-segment:hover{stroke:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.4))}.wall-segment.selected{stroke:#38bdf8;filter:drop-shadow(0 0 6px rgba(56,189,248,.6))}.wall-joint{fill:#e2e8f0;stroke:none}.wall-joint.selected{fill:#38bdf8}.room-group{cursor:pointer}.room-polygon{transition:fill .2s ease,stroke .2s ease}.room-polygon:hover{fill:#38bdf829;stroke:#38bdf8}.room-badge{pointer-events:auto;cursor:pointer}.room-title{font-family:var(--font-sans);font-size:13px;font-weight:600;fill:#f1f5f9;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.8)}.room-area{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:#38bdf8;text-shadow:0 1px 4px rgba(0,0,0,.8)}.door-opening-cut,.window-opening-cut{stroke:#111620;stroke-linecap:butt}.door-leaf{stroke:#38bdf8;stroke-width:2.5px;stroke-linecap:round}.door-arc{fill:none;stroke:#38bdf8a6;stroke-width:1.5px;stroke-dasharray:4 3}.door-group{cursor:pointer}.door-group:hover .door-leaf{stroke:#fff}.door-group.selected .door-leaf,.door-group.selected .door-arc{stroke:#f43f5e}.window-glass-line{stroke:#38bdf8;stroke-width:1.5px;stroke-linecap:round}.window-group{cursor:pointer}.window-group:hover .window-glass-line{stroke:#fff}.window-group.selected .window-glass-line{stroke:#f43f5e}.dimension-label{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:#94a3b8;-webkit-user-select:none;user-select:none;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.9)}.dimension-badge text{font-family:var(--font-mono);font-size:12px;font-weight:600;fill:#fff;paint-order:stroke;stroke:#0c0f14;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;-webkit-user-select:none;user-select:none;pointer-events:none}.preview-cursor{fill:#38bdf8;stroke:#fff;stroke-width:1.5px;pointer-events:none}.preview-wall{stroke:#38bdf8b3;stroke-dasharray:6 4;stroke-linecap:square;pointer-events:none}.snap-endpoint-circle{fill:#10b981;stroke:#fff;stroke-width:2px;filter:drop-shadow(0 0 6px rgba(16,185,129,.8));pointer-events:none}.snap-grid-box{fill:none;stroke:#38bdf8;stroke-width:1.5px;filter:drop-shadow(0 0 4px rgba(56,189,248,.8));pointer-events:none}.snap-guide-line{stroke:#38bdf859;stroke-width:1px;stroke-dasharray:5 4;pointer-events:none}.selection-handle{fill:#38bdf8;stroke:#fff;stroke-width:2px;cursor:grab;filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}.selection-handle:hover{transform:scale(1.2);fill:#fff}.selection-midpoint-group{cursor:pointer}.selection-midpoint-handle{fill:#10b981;stroke:#fff;stroke-width:2px;filter:drop-shadow(0 0 5px rgba(16,185,129,.8));transition:transform .15s ease,fill .15s ease}.selection-midpoint-handle:hover{fill:#34d399;transform:scale(1.3)}.selection-midpoint-plus{stroke:#fff;stroke-width:1.5px;stroke-linecap:round;pointer-events:none}.toolbar-pill{display:flex;align-items:center;gap:6px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:6px 10px;border-radius:var(--radius-full);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md),0 0 20px #0006}.tool-group{display:flex;align-items:center;gap:4px}.toolbar-divider{width:1px;height:22px;background:var(--border-subtle);margin:0 4px}.tool-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:7px 14px;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.tool-btn:hover:not(:disabled){background:#ffffff12;color:var(--text-primary)}.tool-btn.active{background:#38bdf826;border-color:#38bdf859;color:#38bdf8;box-shadow:0 0 14px #38bdf833}.tool-btn.icon-only{padding:7px;border-radius:var(--radius-full)}.tool-btn:disabled{opacity:.35;cursor:not-allowed}.tool-btn.danger:hover:not(:disabled){background:#f43f5e26;color:var(--accent-rose);border-color:#f43f5e4d}.zoom-group{display:flex;align-items:center;gap:2px}.zoom-level-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;font-weight:500;padding:4px 6px;border-radius:var(--radius-sm);cursor:pointer;min-width:44px;text-align:center;transition:all var(--transition-fast)}.zoom-level-btn:hover{background:#ffffff14;color:var(--text-primary);border-color:var(--border-subtle)}.sidebar-header{padding:18px 20px 14px;border-bottom:1px solid var(--border-subtle)}.sidebar-title-row{display:flex;align-items:center;justify-content:space-between}.sidebar-title{font-size:15px;font-weight:600;color:var(--text-primary)}.settings-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.settings-btn:hover{color:var(--text-primary);background:#ffffff14}.project-name-badge{font-size:12px;color:var(--text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.area-card{margin:16px 18px;background:linear-gradient(145deg,#1a2230e6,#0f141ecc);border:1px solid rgba(56,189,248,.2);border-radius:var(--radius-md);padding:16px 18px;box-shadow:0 4px 16px #0000004d;position:relative;overflow:hidden}.area-card:after{content:"";position:absolute;top:0;right:0;width:90px;height:90px;background:radial-gradient(circle,var(--accent-cyan-glow) 0%,transparent 70%);pointer-events:none}.area-card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-cyan)}.area-card-value{margin:6px 0;font-family:var(--font-mono);font-size:32px;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:6px}.area-card-value .unit{font-size:16px;color:var(--text-secondary);font-weight:500}.area-card-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px}.dot-sep{opacity:.4}.sidebar-section{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0 18px}.section-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-bottom:8px}.section-heading .badge{background:#ffffff14;color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:var(--radius-full)}.rooms-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:12px}.room-item-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:10px 12px;transition:all var(--transition-fast);cursor:pointer}.room-item-card:hover{border-color:var(--border-prominent);background:#ffffff0a}.room-item-card.selected{border-color:#38bdf8;background:#38bdf814}.room-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.room-name-input{background:transparent;border:1px solid transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:13px;font-weight:600;padding:2px 6px;border-radius:4px;width:140px;transition:border-color var(--transition-fast)}.room-name-input:hover{border-color:var(--border-subtle)}.room-name-input:focus{outline:none;background:var(--bg-surface-elevated);border-color:var(--accent-cyan)}.room-area-badge{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-cyan);background:#38bdf81a;padding:3px 8px;border-radius:var(--radius-sm)}.empty-rooms-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 12px;color:var(--text-muted);gap:8px}.empty-rooms-state p{font-size:13px;font-weight:500;color:var(--text-secondary)}.empty-rooms-state small{font-size:11px;line-height:1.4}.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border-subtle);background:#0c0f1480;display:flex;flex-direction:column;gap:8px}.scale-info{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.shortcuts-hint{font-size:11px;color:var(--text-muted);line-height:1.4}.inspector-card{width:280px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden}.inspector-header{padding:12px 16px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.inspector-title{font-size:13px;font-weight:600;color:var(--text-primary)}.close-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;border-radius:4px;padding:2px 6px}.close-btn:hover{color:var(--text-primary);background:#ffffff14}.inspector-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}.prop-row{display:flex;align-items:center;justify-content:space-between}.prop-label{font-size:12px;color:var(--text-secondary)}.prop-val{font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}.prop-val-highlight{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--accent-cyan)}.prop-input-wrap{display:flex;align-items:center;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}.prop-input-wrap input{width:54px;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;padding:4px 6px;text-align:right}.prop-input-wrap input:focus{outline:none}.unit-addon{font-size:11px;color:var(--text-muted);padding-right:8px;-webkit-user-select:none;user-select:none}.prop-slider{width:100%;accent-color:var(--accent-cyan);cursor:pointer}.prop-text-input{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;padding:5px 8px;width:130px}.prop-text-input:focus{outline:none;border-color:var(--accent-cyan)}.inspector-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}.btn-secondary{background:#ffffff0f;border:1px solid var(--border-subtle);color:var(--text-primary);font-size:12px;font-weight:500;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:#ffffff1a;border-color:var(--border-prominent)}.btn-danger-outline{background:transparent;border:1px solid rgba(244,63,94,.35);color:#fb7185;font-size:12px;font-weight:500;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-danger-outline:hover{background:#f43f5e26;border-color:var(--accent-rose)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:1;transition:opacity var(--transition-fast)}.modal-backdrop.hidden{opacity:0;pointer-events:none}.modal-dialog{width:440px;max-width:90vw;background:var(--bg-surface-elevated);border:1px solid var(--border-prominent);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.modal-header{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:16px;font-weight:600;color:var(--text-primary)}.modal-body{padding:20px;display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:13px;font-weight:500;color:var(--text-primary)}.input-desc{font-size:11px;color:var(--text-muted)}.form-input{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;padding:8px 12px;transition:border-color var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--accent-cyan)}.grid-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}.preset-pill{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12px;font-weight:500;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.preset-pill:hover{background:#ffffff0d;color:var(--text-primary)}.preset-pill.active{background:#38bdf826;border-color:#38bdf8;color:#38bdf8}.custom-grid-row{display:flex;align-items:center;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden;margin-top:4px}.custom-grid-row input{flex:1;border:none}.callout-tip{background:#38bdf814;border-left:3px solid #38bdf8;padding:10px 12px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:12px;color:#94a3b8;line-height:1.4}.callout-tip strong{color:#f1f5f9}.modal-footer{padding:14px 20px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:10px;background:#0c0f1466}.btn-primary{background:linear-gradient(135deg,#0284c7,#0ea5e9);border:1px solid rgba(56,189,248,.3);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 10px #0ea5e94d}.btn-primary:hover{background:linear-gradient(135deg,#0369a1,#0284c7);box-shadow:0 4px 14px #0ea5e973}.toast-notification{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:#121823eb;border:1px solid rgba(56,189,248,.4);color:#fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;font-weight:500;padding:10px 20px;border-radius:var(--radius-full);box-shadow:var(--shadow-lg),0 0 20px #38bdf833;opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.16,1,.3,1);z-index:200}.toast-notification.visible{opacity:1;transform:translate(-50%) translateY(0)}.toast-notification.error{border-color:#f43f5e99;box-shadow:var(--shadow-lg),0 0 20px #f43f5e33;color:#fecdd3}
