*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);color:#333}#app{display:flex;height:100vh}.toolbar{width:70px;background:rgba(255,255,255,0.95);padding:15px 5px;display:flex;flex-direction:column;gap:8px;z-index:10;border-right:1px solid #ddd;box-shadow:2px 0 10px rgba(0,0,0,0.05)}.toolbar button{width:60px;height:60px;border:none;border-radius:12px;background:#fff;color:#555;cursor:pointer;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:all 0.2s;box-shadow:0 2px 5px rgba(0,0,0,0.08);border:1px solid #e0e0e0}.toolbar button:hover{background:#e3f2fd;transform:translateY(-2px);box-shadow:0 4px 8px rgba(33,150,243,0.1)}.toolbar button.active{background:#2196f3;color:white;border-color:#1976d2}.toolbar button svg{width:24px;height:24px}.toolbar hr{border:none;height:1px;background:#e0e0e0;margin:10px 0}#canvas-container{flex:1;position:relative}#canvas-container canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:all}#info{position:absolute;top:70px;left:85px;background:rgba(255,255,255,0.95);color:#333;padding:15px;border-radius:12px;font-size:13px;max-width:250px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:1px solid #e0e0e0;line-height:1.5;z-index:2}#props{position:absolute;top:70px;right:20px;width:320px;background:rgba(255,255,255,0.95);border-radius:12px;color:#333;font-size:14px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:1px solid #e0e0e0;overflow:hidden;z-index:2}#props h3{background:linear-gradient(135deg,#2196f3 0%,#1976d2 100%);color:white;padding:15px;margin:0;font-size:16px;display:flex;align-items:center;gap:10px}.props-content{padding:20px}.prop-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.prop-row label{flex:1;font-weight:500;font-size:13px}.prop-row input,.prop-row select{width:120px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#333;font-size:14px;transition:border 0.2s}.prop-row input:focus,.prop-row select:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,0.1)}#materials{position:absolute;bottom:20px;right:20px;width:400px;background:rgba(255,255,255,0.95);border-radius:12px;color:#333;font-size:12px;max-height:45vh;overflow-y:auto;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:1px solid #e0e0e0;z-index:2}#materials h3{background:linear-gradient(135deg,#4caf50 0%,#2e7d32 100%);color:white;padding:15px;margin:0;font-size:16px;position:sticky;top:0;display:flex;align-items:center;gap:10px}.mat-content{padding:15px}.mat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;align-items:center;font-size:12px}.mat-row:last-child{border:none}.mat-row span{text-align:right;min-width:80px}.mat-row span:first-child{text-align:left;flex:1;min-width:auto}.mat-total{background:linear-gradient(135deg,#ff9800 0%,#f57c00 100%);color:white;padding:15px;font-weight:bold;display:flex;justify-content:space-between;font-size:16px}#prices-panel{position:absolute;bottom:20px;left:85px;width:300px;background:rgba(255,255,255,0.95);border-radius:12px;color:#333;font-size:14px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:1px solid #e0e0e0;overflow:hidden;z-index:2}#prices-panel h3{background:linear-gradient(135deg,#9c27b0 0%,#7b1fa2 100%);color:white;padding:15px;margin:0;font-size:16px;display:flex;align-items:center;gap:10px}.prices-content{padding:20px}.price-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.price-row label{flex:1;font-weight:500}.price-row input{width:120px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#333;font-size:14px;text-align:right}#mode-info{position:absolute;bottom:20px;right:430px;background:#2196f3;color:white;padding:12px 25px;border-radius:25px;font-weight:600;box-shadow:0 4px 10px rgba(33,150,243,0.3);z-index:2}#grid-plane{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);color:#333;padding:10px 20px;border-radius:20px;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,0.08);border:1px solid #e0e0e0;display:flex;align-items:center;gap:10px;z-index:2}#length-info{position:absolute;top:235px;left:85px;background:rgba(255,255,255,0.95);color:#333;padding:10px 15px;border-radius:8px;font-size:22px;font-weight:500;box-shadow:0 4px 10px rgba(0,0,0,0.08);border:1px solid #e0e0e0;display:none;z-index:2}.controls{position:absolute;top:70px;left:350px;background:rgba(255,255,255,0.95);padding:8px;border-radius:12px;display:flex;gap:5px;box-shadow:0 4px 10px rgba(0,0,0,0.08);border:1px solid #e0e0e0;z-index:2}.controls button{width:36px;height:36px;border:none;border-radius:6px;background:#2196f3;color:white;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center}.controls button:hover{background:#1976d2}.notification{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#4caf50;color:white;padding:10px 20px;border-radius:25px;z-index:1000;font-weight:500;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.camera-controls{position:absolute;top:70px;left:550px;background:rgba(255,255,255,0.95);padding:8px;border-radius:12px;display:flex;gap:5px;box-shadow:0 4px 10px rgba(0,0,0,0.08);border:1px solid #e0e0e0;z-index:2}.camera-controls button{width:50px;padding:0;margin:0;height:36px;border:none;border-radius:6px;background:#9c27b0;color:white;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}.camera-controls button:hover{background:#7b1fa2}.btn-sm{padding:6px 12px;border:none;border-radius:6px;background:#2196f3;color:white;cursor:pointer;font-size:12px}