:root{--bg:#1a1a2e;--bg-surface:#16213e;--bg-panel:#0f3460;--bg-input:#1a1a3a;--text:#e0e0e0;--text-muted:#8892a4;--text-bright:#fff;--accent:#4fc3f7;--accent-hover:#81d4fa;--accent-dim:#4fc3f726;--border:#2a3a5c;--border-light:#3a4a6c;--danger:#ef5350;--success:#66bb6a;--warning:#ffa726;--pool-outline:#fff;--pool-fill:#4fc3f714;--dim-red:#ff6b6b;--pipe-blue:#4fc3f7;--pipe-pink:#f06292;--highlight-yellow:#ffee58;--light-yellow:#fff176;--font:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", monospace;font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{width:100vw;height:100vh;overflow:hidden}#root{flex-direction:column;width:100vw;height:100vh;display:flex}input,select,button{font-family:var(--font);font-size:13px}input[type=text],input[type=number]{background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);border-radius:4px;outline:none;padding:6px 10px;transition:border-color .2s}input:focus{border-color:var(--accent)}button{cursor:pointer;border:none;border-radius:4px;padding:6px 14px;font-weight:500;transition:all .15s}button.primary{background:var(--accent);color:var(--bg)}button.primary:hover{background:var(--accent-hover)}button.secondary{background:var(--bg-panel);color:var(--text);border:1px solid var(--border)}button.secondary:hover{border-color:var(--accent);color:var(--accent)}select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);border-radius:4px;outline:none;padding:6px 10px}select:focus{border-color:var(--accent)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:8px 16px;display:flex}.app-header .logo{color:var(--accent);letter-spacing:-.5px;font-size:16px;font-weight:600}.app-header .logo span{color:var(--text-muted);margin-left:4px;font-weight:400}.app-header .project-name{color:var(--text-bright);font-size:14px;font-weight:500}.app-header .actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tab-bar{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:0;padding:0 16px;display:flex;overflow-x:auto}.tab-bar button{color:var(--text-muted);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;padding:10px 18px;font-size:13px;font-weight:500;transition:all .15s}.tab-bar button:hover{color:var(--text);background:var(--accent-dim)}.tab-bar button.active{color:var(--accent);border-bottom-color:var(--accent)}.main-content{flex:1;display:flex;overflow:hidden}.canvas-area{background:#f0f0f0;border:1px solid #ddd;flex:1;position:relative;overflow:hidden}.canvas-container{width:100%;height:100%}.properties-panel{background:var(--bg-surface);border-left:1px solid var(--border);flex-shrink:0;width:280px;overflow-y:auto}.panel-section{border-bottom:1px solid var(--border);padding:14px 16px}.panel-section h3{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.panel-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.panel-row label{color:var(--text-muted);flex-shrink:0;min-width:60px;font-size:12px}.panel-row input,.panel-row select{flex:1;min-width:0}.dim-input{flex:1;align-items:center;display:flex}.dim-input input{border-radius:4px 0 0 4px;flex:1;min-width:0}.dim-input .unit{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);border-left:none;border-radius:0 4px 4px 0;padding:6px 8px;font-size:11px}.info-bar{background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:24px;height:36px;padding:6px 16px;font-size:12px;display:flex;overflow-x:auto}.info-item{white-space:nowrap;align-items:center;gap:6px;display:flex}.info-item .info-label{color:var(--text-muted)}.info-item .info-value{color:var(--accent);font-weight:600;font-family:var(--font-mono)}.cross-section{border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f3460f2;border-radius:8px;height:180px;padding:12px;position:absolute;bottom:44px;left:16px;right:296px}.cross-section h4{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:8px;font-size:11px}.cross-section canvas{width:100%;height:calc(100% - 24px)}.cross-section .toggle{padding:3px 8px;font-size:11px;position:absolute;top:8px;right:12px}.feature-buttons{flex-wrap:wrap;gap:6px;display:flex}.feature-buttons button{background:var(--accent-dim);color:var(--accent);border:1px solid #0000;padding:5px 10px;font-size:11px}.feature-buttons button:hover{border-color:var(--accent)}.zoom-controls{z-index:10;gap:4px;display:flex;position:absolute;bottom:12px;right:12px}.zoom-controls button{color:#333;cursor:pointer;background:#ffffffe6;border:1px solid #ccc;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex;box-shadow:0 1px 3px #0000001f}.zoom-controls button:hover{background:#f0f0f0;border-color:#666}.project-header{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:6px 16px;display:flex}.project-header input{color:var(--text-bright);background:0 0;border:1px solid #0000;border-radius:4px;padding:4px 8px;font-size:14px}.project-header input:hover{border-color:var(--border)}.project-header input:focus{border-color:var(--accent);background:var(--bg-input)}.project-header input.project-title{flex:0 0 200px;font-size:15px;font-weight:600}.material-order{margin-top:12px}.material-order .order-line{border-bottom:1px solid var(--border);justify-content:space-between;padding:4px 0;font-size:12px;display:flex}.material-order .order-line .count{color:var(--accent);font-weight:600;font-family:var(--font-mono)}.depth-points-list{flex-direction:column;gap:6px;display:flex}.depth-point-row{align-items:center;gap:6px;display:flex}.depth-point-row input{width:55px;padding:4px 6px;font-size:12px}.depth-point-row .remove-btn{width:20px;height:20px;color:var(--danger);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:14px;display:flex}.depth-point-row .remove-btn:hover{border-color:var(--danger)}.features-list{flex-direction:column;gap:8px;display:flex}.feature-card{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:8px 10px}.feature-card .feature-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.feature-card .feature-type{color:var(--accent);text-transform:capitalize;font-size:12px;font-weight:600}.feature-card .feature-props{grid-template-columns:1fr 1fr;gap:4px;display:grid}.feature-card .feature-props label{color:var(--text-muted);font-size:10px}.feature-card .feature-props input{width:100%;padding:3px 5px;font-size:11px}.revision-bar{background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0;padding:4px 16px}.revision-panel{background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0;max-height:300px;padding:12px 16px;overflow-y:auto}.revision-panel-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.revision-panel-header h3{color:var(--text-bright);margin:0;font-size:12px;font-weight:600}.revision-list{flex-direction:column;gap:4px;display:flex}.revision-item{background:var(--bg-input);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:8px 10px;transition:border-color .15s}.revision-item:hover{border-color:var(--text-muted)}.revision-item.selected{border-color:var(--accent)}.revision-item-header{justify-content:space-between;align-items:center;display:flex}.revision-number{color:var(--accent);font-size:12px;font-weight:700;font-family:var(--font-mono)}.revision-date{color:var(--text-muted);font-size:10px}.revision-note{color:var(--text);margin-top:2px;font-size:11px}.revision-summary{color:var(--text-muted);margin-top:2px;font-size:10px}.revision-actions{flex-direction:column;gap:6px;margin-top:8px;display:flex}.revision-diff{background:#ffffff08;border-radius:4px;margin-top:4px;padding:6px 8px}.remove-btn{width:20px;height:20px;color:var(--danger);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;font-size:14px;display:flex}.remove-btn:hover{border-color:var(--danger)}.tab-bar-spacer{flex:1}.undo-btn{color:var(--text-muted)!important;border:none!important;border-bottom:2px solid #0000!important;padding:6px 12px!important;font-size:11px!important}.undo-btn:disabled{opacity:.3;cursor:not-allowed}.undo-btn:not(:disabled):hover{color:var(--text)!important}.dialog-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;width:380px;max-width:90vw;box-shadow:0 20px 60px #00000080}.dialog-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.dialog-header h3{color:var(--text-bright);margin:0;font-size:14px;font-weight:600}.dialog-body{padding:16px}.dialog-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px;line-height:1}.close-btn:hover{color:var(--text-bright)}.contract-dialog .dialog-body{max-height:60vh;overflow-y:auto}.contract-linked-banner{background:var(--accent-dim);border:1px solid var(--accent);border-radius:8px;margin-bottom:16px;padding:12px}.contract-linked-banner .linked-label{text-transform:uppercase;letter-spacing:.8px;color:var(--accent);margin-bottom:4px;font-size:10px;font-weight:600}.contract-linked-banner .linked-name{color:var(--text-bright);margin-bottom:8px;font-size:13px;font-weight:500}.contract-linked-banner .linked-actions{align-items:center;gap:10px;display:flex}.push-ok{color:var(--success,#4caf50);font-size:12px;font-weight:600}.push-err{color:var(--danger);font-size:12px;font-weight:600}.contract-list-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.contract-list-header h4{color:var(--text-bright);margin:0;font-size:12px;font-weight:600}.contract-error{color:var(--danger);background:#ff000014;border-radius:6px;margin-bottom:8px;padding:8px;font-size:12px}.contract-empty{color:var(--text-muted);text-align:center;padding:16px;font-size:12px}.contract-list{flex-direction:column;gap:6px;display:flex}.contract-item{background:var(--bg-input);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:10px 12px;transition:border-color .15s}.contract-item:hover{border-color:var(--text-muted)}.contract-item.selected{border-color:var(--accent)}.contract-item.linked{border-left:3px solid var(--accent)}.contract-item-header{justify-content:space-between;align-items:center;display:flex}.contract-customer{color:var(--text-bright);align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.linked-badge{background:var(--accent);color:var(--bg);letter-spacing:.5px;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700}.contract-date{color:var(--text-muted);font-size:11px}.contract-item-details{color:var(--text-muted);gap:12px;margin-top:4px;font-size:11px;display:flex}.contract-pool-size{color:var(--accent);font-weight:600;font-family:var(--font-mono)}.contract-spa-tag{color:var(--accent);font-weight:600}.contract-item-actions{border-top:1px solid var(--border);align-items:center;gap:10px;margin-top:8px;padding-top:8px;display:flex}.import-note{color:var(--text-muted);font-size:10px;font-style:italic}.cloud-status{color:var(--text-muted);align-items:center;gap:4px;font-size:11px;display:flex}.cloud-status.synced{color:var(--success,#4caf50)}.cloud-status.error{color:var(--danger)}.coverage-breakdown{flex-direction:column;gap:4px;display:flex}.coverage-row{color:var(--text-muted);justify-content:space-between;padding:2px 0;font-size:11px;display:flex}.coverage-row .coverage-value{color:var(--accent);font-weight:600;font-family:var(--font-mono)}.coverage-row.total{border-top:1px solid var(--border);color:var(--text-bright);margin-top:4px;padding-top:6px;font-weight:600}.template-dialog{background:var(--bg-surface);border-radius:12px;width:90vw;max-width:600px;max-height:80vh;padding:24px;overflow-y:auto}.template-dialog .dialog-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.template-dialog h2{color:var(--text-bright);margin:0;font-size:18px;font-weight:600}.template-dialog h3{color:var(--text-muted);margin:0;font-size:12px}.template-group-label{text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px}.template-section{margin-bottom:12px}.template-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.template-card{background:var(--bg-primary);border:1px solid var(--border);text-align:left;cursor:pointer;color:var(--text);border-radius:8px;padding:12px;font-family:inherit;font-size:12px;transition:border-color .15s;position:relative}.template-card:hover{border-color:var(--accent)}.template-card.blank{text-align:center;flex-direction:column;align-items:center;padding:20px 12px;display:flex}.template-icon{color:var(--accent);margin-bottom:6px;font-size:28px}.template-name{color:var(--text-bright);margin-bottom:4px;font-weight:600}.template-desc{color:var(--text-muted);font-size:11px;line-height:1.3}.template-specs{color:var(--accent);font-size:10px;font-family:var(--font-mono);margin-top:6px}.template-delete{color:var(--danger);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:16px;line-height:1;position:absolute;top:4px;right:4px}.panel-toggle-btn{z-index:101;background:var(--accent);color:var(--bg-primary);cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;display:none;position:fixed;bottom:60px;right:16px;box-shadow:0 2px 8px #0000004d}.properties-panel-wrapper{display:contents}@media (width<=1024px){.panel-toggle-btn{display:block}.properties-panel-wrapper{z-index:100;background:var(--bg-surface);border-left:1px solid var(--border);width:300px;transition:transform .25s;display:block;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.properties-panel-wrapper.open{transform:translate(0)}.app-header .logo span{display:none}.app-header .actions button{padding:6px 8px;font-size:11px}.project-header{flex-wrap:wrap;gap:6px}.project-header input.project-title{flex:0 0 100%}.cross-section{right:16px}}@media (width<=768px){.app-header .actions{gap:4px}.info-bar{flex-wrap:wrap;gap:8px 16px;height:auto;padding:6px 12px}.properties-panel-wrapper{width:100%}.template-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.login-screen{background:var(--bg-primary);justify-content:center;align-items:center;height:100vh;display:flex}.login-form{background:var(--bg-surface);border:1px solid var(--border);text-align:center;border-radius:12px;width:320px;padding:32px}.login-form h1{color:var(--text-bright);letter-spacing:1px;margin:0 0 4px;font-size:20px;font-weight:700}.login-form>p{color:var(--text-muted);margin:0 0 24px;font-size:13px}.login-field{text-align:left;margin-bottom:14px}.login-field label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;display:block}.login-field select,.login-field input{background:var(--bg-primary);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;padding:10px 12px;font-family:inherit;font-size:14px}.login-field input:focus,.login-field select:focus{border-color:var(--accent);outline:none}.login-error{color:var(--danger);margin-bottom:12px;font-size:12px}.login-form button[type=submit]{background:var(--accent);width:100%;color:var(--bg-primary);cursor:pointer;border:none;border-radius:6px;margin-top:4px;padding:12px;font-size:14px;font-weight:600}.login-form button[type=submit]:hover{opacity:.9}.login-form button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.user-badge{color:var(--text-muted);white-space:nowrap;background:#ffffff0f;border-radius:12px;padding:4px 10px;font-size:11px}.user-badge:hover{color:var(--danger)}