:root{--primary: #1E40AF;--primary-light: #3B82F6;--secondary: #64748B;--success: #10B981;--warning: #F59E0B;--danger: #EF4444;--bg: #F1F5F9;--card: #FFFFFF;--text: #1E293B;--text-light: #64748B;--border: #E2E8F0;--radius: 12px;--shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;padding:1rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-lg)}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:2rem;background:#fff3;padding:.5rem;border-radius:10px}.logo h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.tagline{font-size:.75rem;opacity:.8}.header-controls{display:flex;align-items:center;gap:.75rem}.unit-toggle{display:flex;background:#ffffff26;border-radius:8px;padding:3px}.unit-toggle button{padding:.5rem 1rem;border:none;background:transparent;color:#fffc;cursor:pointer;border-radius:6px;font-weight:500;transition:all .2s}.unit-toggle button.active{background:#fff;color:var(--primary)}.region-select{padding:.5rem 1rem;border:none;background:#ffffff26;color:#fff;border-radius:8px;cursor:pointer;font-size:.9rem}.region-select option{color:var(--text)}.menu-btn{display:none;padding:.5rem;background:#ffffff26;border:none;color:#fff;border-radius:8px;font-size:1.25rem;cursor:pointer}.main{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1rem;width:100%}.welcome{text-align:center;margin-bottom:2rem}.welcome h2{font-size:1.75rem;color:var(--text);margin-bottom:.5rem}.welcome p{color:var(--text-light)}.categories{display:flex;flex-direction:column;gap:2rem}.category-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-left:.5rem;border-left:4px solid}.category-icon{font-size:1.5rem}.category-header h3{font-size:1.1rem;font-weight:600;color:var(--text)}.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.calc-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;text-align:left}.calc-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}.calc-icon{font-size:2rem;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg),white);border-radius:12px;flex-shrink:0}.calc-info{flex:1}.calc-info h4{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.25rem}.calc-info p{font-size:.85rem;color:var(--text-light)}.calc-arrow{font-size:1.25rem;color:var(--secondary);transition:transform .2s}.calc-card:hover .calc-arrow{transform:translate(4px);color:var(--accent)}.footer{background:var(--card);border-top:1px solid var(--border);padding:1.5rem;text-align:center}.footer p{color:var(--text-light);font-size:.85rem}.footer .version{margin-top:.5rem;font-size:.75rem;opacity:.7}.calc-page{background:var(--card);min-height:100vh}.calc-header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;padding:1rem;display:flex;align-items:center;gap:1rem}.back-btn{padding:.5rem 1rem;background:#ffffff26;border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:.5rem}.back-btn:hover{background:#ffffff40}.calc-header h2{font-size:1.25rem}.calc-body{max-width:800px;margin:0 auto;padding:1.5rem}.form-section{margin-bottom:1.5rem}.form-section h3{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.85rem;font-weight:500;color:var(--text-light)}.form-group input,.form-group select{padding:.75rem 1rem;border:2px solid var(--border);border-radius:8px;font-size:1rem;transition:border-color .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-light)}.input-unit{position:relative}.input-unit input{width:100%;padding-right:3.5rem}.input-unit span{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.85rem}.input-with-unit{display:flex;gap:0;border:2px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s}.input-with-unit:focus-within{border-color:var(--primary-light)}.input-with-unit input{flex:1;border:none;padding:.75rem 1rem;font-size:1rem;min-width:80px}.input-with-unit input:focus{outline:none}.input-with-unit select{border:none;border-left:2px solid var(--border);padding:.75rem .5rem;background:var(--bg);font-size:.85rem;color:var(--text);cursor:pointer;min-width:100px}.input-with-unit select:focus{outline:none}.results{background:linear-gradient(135deg,var(--bg),white);border-radius:var(--radius);padding:1.5rem;margin-top:2rem}.results h3{font-size:1.1rem;margin-bottom:1rem;color:var(--primary)}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.result-item{background:var(--card);padding:1rem;border-radius:8px;text-align:center;box-shadow:var(--shadow)}.result-item .value{font-size:1.5rem;font-weight:700;color:var(--primary)}.result-item .label{font-size:.8rem;color:var(--text-light);margin-top:.25rem}.btn-primary{width:100%;padding:1rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.materials-list{margin-top:1.5rem}.material-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border)}.material-row:last-child{border-bottom:none}.material-name{font-weight:500}.material-qty{font-weight:700;color:var(--primary)}.quick-access{display:flex;gap:.5rem;margin-bottom:2rem;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}.quick-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .9rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.85rem;font-weight:500;color:var(--text);white-space:nowrap;transition:all .2s;flex:1;min-width:0}.quick-btn:hover{border-color:var(--primary-light);background:linear-gradient(135deg,var(--bg),white)}.quick-icon{font-size:1.1rem}.mobile-menu{background:#ffffff1a;padding:1rem;display:flex;flex-direction:column;gap:1rem}.mobile-menu-section{padding:.5rem 0}.mobile-menu-label{font-size:.8rem;opacity:.8;margin-bottom:.5rem}.mobile-menu-nav{display:flex;flex-direction:column;gap:.5rem}.mobile-menu-nav button{padding:.75rem 1rem;background:#ffffff26;border:none;border-radius:8px;color:#fff;font-size:1rem;cursor:pointer;text-align:left}.region-select.mobile{width:100%}.settings-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.5rem}.settings-tab{padding:.75rem 1.25rem;background:var(--bg);border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;white-space:nowrap;transition:all .2s}.settings-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}.settings-content{margin-bottom:1.5rem}.form-hint{color:var(--text-light);font-size:.85rem;margin-bottom:1rem}.form-group.full-width{grid-column:1 / -1}.form-group textarea{padding:.75rem 1rem;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit;resize:vertical;transition:border-color .2s}.form-group textarea:focus{outline:none;border-color:var(--primary-light)}.button-group{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.btn-secondary{padding:.75rem 1.25rem;background:var(--bg);border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s}.btn-secondary:hover{border-color:var(--primary-light);background:#fff}.btn-danger{padding:.75rem 1.25rem;background:var(--danger);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s}.btn-danger:hover{opacity:.9}.search-bar{display:flex;gap:.75rem;margin-bottom:1.5rem}.search-bar input{flex:1;padding:.75rem 1rem;border:2px solid var(--border);border-radius:8px;font-size:1rem}.search-bar input:focus{outline:none;border-color:var(--primary-light)}.btn-add{padding:.75rem 1.25rem;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;white-space:nowrap}.btn-add:hover{background:var(--primary-light)}.empty-state{text-align:center;padding:3rem 1rem}.empty-icon{font-size:4rem;margin-bottom:1rem;filter:grayscale(.5)}.empty-state h3{color:var(--text);margin-bottom:.5rem}.empty-state p{color:var(--text-light);margin-bottom:1.5rem}.customer-list{display:flex;flex-direction:column;gap:.75rem}.customer-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s}.customer-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow)}.customer-avatar{width:56px;height:56px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:700;flex-shrink:0}.customer-avatar.small{width:44px;height:44px;font-size:1.2rem}.customer-info{flex:1;min-width:0}.customer-info h4{font-size:1rem;margin-bottom:.25rem}.customer-company{color:var(--text-light);font-size:.85rem}.customer-contact{display:flex;gap:1rem;margin-top:.25rem;font-size:.8rem;color:var(--text-light)}.customer-arrow{font-size:1.25rem;color:var(--secondary)}.customer-stats{text-align:center;padding:1rem;color:var(--text-light);font-size:.85rem}.customer-detail{text-align:center}.customer-detail h2{margin:1rem 0 .25rem}.contact-actions{display:flex;justify-content:center;gap:.75rem;margin:1.5rem 0}.action-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500}.action-btn.email{background:var(--primary);color:#fff}.action-btn.call{background:var(--success);color:#fff}.customer-info-list{text-align:left;background:var(--bg);border-radius:var(--radius);padding:1rem;margin:1.5rem 0}.info-row{display:flex;padding:.75rem 0;border-bottom:1px solid var(--border)}.info-row:last-child{border-bottom:none}.info-label{width:100px;color:var(--text-light);font-size:.85rem}.info-value{flex:1;white-space:pre-line}.quote-list{display:flex;flex-direction:column;gap:.75rem}.quote-card{padding:1rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s}.quote-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow)}.quote-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.quote-number{font-weight:600;color:var(--primary)}.quote-status-badge{padding:.25rem .5rem;border-radius:4px;color:#fff;font-size:.7rem;font-weight:600;text-transform:uppercase}.quote-card-body h4{font-size:1rem;margin-bottom:.25rem}.job-desc{color:var(--text-light);font-size:.85rem}.quote-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.quote-total{font-weight:700;color:var(--primary);font-size:1.1rem}.quote-date{color:var(--text-light);font-size:.8rem}.quote-stats{display:flex;justify-content:center;gap:1.5rem;padding:1rem;color:var(--text-light);font-size:.85rem}.quote-detail h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:.9rem;color:var(--text-light);text-transform:uppercase}.quote-header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.quote-status{padding:.5rem 1rem;border-radius:6px;color:#fff;font-weight:600;font-size:.8rem}.text-muted{color:var(--text-light)}.quote-items-list{background:var(--bg);border-radius:8px;padding:.5rem}.quote-item-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:.75rem;border-bottom:1px solid var(--border)}.quote-item-row:last-child{border-bottom:none}.item-desc{font-weight:500}.item-calc{color:var(--text-light);font-size:.85rem}.item-total{font-weight:600}.quote-totals{background:var(--bg);border-radius:8px;padding:1rem;margin-top:1rem}.total-row{display:flex;justify-content:space-between;padding:.5rem 0}.total-row.grand-total{border-top:2px solid var(--border);margin-top:.5rem;padding-top:.75rem;font-size:1.2rem;font-weight:700;color:var(--primary)}.quote-notes{background:var(--bg);padding:1rem;border-radius:8px;white-space:pre-line;font-size:.9rem}.line-item{position:relative;background:var(--bg);padding:1rem;border-radius:8px;margin-bottom:1rem}.line-total{padding:.75rem;background:#fff;border-radius:8px;font-weight:600;text-align:center}.remove-item-btn{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;background:var(--danger);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:.9rem}.btn-add-item{width:100%;padding:.75rem;background:var(--bg);border:2px dashed var(--border);border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--text-light);transition:all .2s}.btn-add-item:hover{border-color:var(--primary-light);color:var(--primary)}.quick-btn.has-badge{position:relative}.badge{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;padding:2px 6px;border-radius:10px;min-width:20px;text-align:center}.recent-quotes-widget{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.widget-header h3{font-size:1rem;font-weight:600}.view-all{background:none;border:none;color:var(--primary);font-size:.85rem;cursor:pointer;font-weight:500}.view-all:hover{text-decoration:underline}.recent-quotes-list{display:flex;flex-direction:column;gap:.5rem}.recent-quote-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--bg);border-radius:8px;cursor:pointer;transition:all .2s}.recent-quote-item:hover{background:linear-gradient(135deg,var(--bg),white)}.rq-info{display:flex;flex-direction:column;gap:.25rem}.rq-number{font-weight:600;font-size:.9rem;color:var(--primary)}.rq-customer{font-size:.85rem;color:var(--text-light)}.rq-meta{display:flex;align-items:center;gap:.75rem}.rq-total{font-weight:700;color:var(--text)}.rq-status{padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;color:#fff;text-transform:uppercase}.pending-alert{display:flex;align-items:center;gap:.75rem;padding:1rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #F59E0B;border-radius:var(--radius);margin-bottom:1.5rem;cursor:pointer;transition:all .2s}.pending-alert:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.pending-icon{font-size:1.5rem}.pending-text{flex:1;font-size:.95rem}.pending-action{color:var(--primary);font-weight:600;font-size:.9rem}.btn-add-to-quote{width:100%;padding:.75rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:600;margin-top:.75rem;transition:all .2s}.btn-add-to-quote:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.pending-items-section{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #F59E0B;border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem}.pending-items-section h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.pending-items-list{display:flex;flex-direction:column;gap:.5rem}.pending-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#ffffffb3;border-radius:6px}.pending-item-info{flex:1}.pending-item-source{font-size:.75rem;color:var(--text-light)}.btn-use-items{width:100%;padding:.75rem;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;margin-top:.75rem}.btn-clear-items{width:100%;padding:.5rem;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:6px;cursor:pointer;font-size:.85rem;margin-top:.5rem}.type-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.type-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;font-size:.85rem;font-weight:500}.type-btn:hover{border-color:var(--primary-light);background:#fff}.type-btn.active{border-color:var(--primary);background:linear-gradient(135deg,#1e40af1a,#3b82f61a);color:var(--primary)}.type-icon{font-size:1.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.95rem}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.depth-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem}.depth-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;background:var(--bg);border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;text-align:center}.depth-btn:hover{border-color:var(--primary-light);background:#fff}.depth-btn.active{border-color:var(--primary);background:linear-gradient(135deg,#1e40af1a,#3b82f61a)}.depth-value{font-weight:600;font-size:1rem;color:var(--text)}.depth-btn.active .depth-value{color:var(--primary)}.depth-desc{font-size:.7rem;color:var(--text-light)}@media (max-width: 768px){.header-content{flex-wrap:wrap}.logo h1{font-size:1.25rem}.unit-toggle,.region-select{display:none}.menu-btn{display:block}.welcome h2{font-size:1.5rem}.calc-grid,.form-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:repeat(2,1fr)}}:root{font-family:Inter,system-ui,sans-serif;color:#0f172a;background-color:#f4f6fb}body{margin:0;min-height:100vh}button{cursor:pointer}