:root{--navy: #1a365d;--navy-light: #2d4a71;--orange: #ff6b35;--orange-hover: #e55a2b;--orange-gradient: #f7931e;--white: #ffffff;--bg-light: #f8f9fa;--border: #e9ecef;--text: #333333;--text-secondary: #6c757d;--block-standard: #4a4a4a;--block-large: #5a5a5a;--block-cornerA: #3a3a3a;--block-cornerB: #353535}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Source Sans Pro,sans-serif;background:var(--bg-light);color:var(--text);line-height:1.5;overflow:hidden;height:100vh}#root{height:100vh;overflow:hidden}h1,h2,h3,h4,h5,h6{font-family:Overpass,sans-serif}.app-layout{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:320px 1fr;grid-template-areas:"header header" "sidebar viewport" "sidebar results";height:100vh;overflow:hidden}.app-header{grid-area:header;background:linear-gradient(135deg,var(--navy),var(--navy-light));color:var(--white);padding:14px 30px;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;right:0;width:200px;height:100%;background:linear-gradient(45deg,var(--orange),var(--orange-gradient));clip-path:polygon(30% 0%,100% 0%,100% 100%,0% 100%);opacity:.8}.header-content{position:relative;z-index:2;display:flex;align-items:baseline;gap:16px}.app-header h1{font-size:1.5rem;font-weight:400;letter-spacing:-.5px}.app-header p{font-size:.9rem;opacity:.8}.input-panel{grid-area:sidebar;background:var(--white);border-right:3px solid var(--orange);padding:20px;overflow-y:auto}.panel-title{color:var(--navy);font-size:1.2rem;font-weight:600;margin-bottom:20px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:5px;font-weight:600;color:var(--navy);font-size:.88rem}.form-group input,.form-group select{width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:8px;font-size:.95rem;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease;background:var(--white)}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-label input[type=checkbox]{width:auto;padding:0;cursor:pointer}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px #ff6b351a}.spec-box{background:var(--bg-light);padding:14px;border-radius:8px;margin-top:16px;border-left:4px solid var(--orange)}.spec-box h4{color:var(--navy);margin-bottom:10px;font-size:.95rem;font-weight:600}.spec-row{display:flex;justify-content:space-between;margin:5px 0;font-size:.82rem}.spec-row span:first-child{color:var(--text-secondary);font-weight:500}.spec-row span:last-child{font-weight:600;color:var(--navy)}.info-box{background:linear-gradient(135deg,#e3f2fd,#f0f8ff);border-left:4px solid var(--orange);padding:12px;border-radius:0 8px 8px 0;margin-top:16px;font-size:.82rem;color:var(--navy);line-height:1.4}.viewport-container{grid-area:viewport;position:relative;background:#f0f0f0;min-height:0}.viewport-container canvas{display:block}.block-legend{position:absolute;bottom:12px;left:12px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:10px 14px;box-shadow:0 2px 8px #0000001a}.legend-item{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:.78rem}.legend-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15)}.legend-label{color:var(--text)}.results-panel{grid-area:results;background:var(--white);border-top:2px solid var(--border);padding:16px 24px;overflow-x:auto}.results-empty{text-align:center;color:var(--text-secondary);font-style:italic;padding:8px}.results-cards{display:flex;gap:12px;margin-bottom:14px}.result-card{flex:1;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);color:var(--white);padding:14px 16px;border-radius:10px;text-align:center;position:relative;overflow:hidden;min-width:120px}.result-card:before{content:"";position:absolute;top:0;right:0;width:40px;height:100%;background:linear-gradient(45deg,var(--orange),var(--orange-gradient));clip-path:polygon(40% 0%,100% 0%,100% 100%,0% 100%)}.result-card h3{font-size:.75rem;font-weight:400;opacity:.9;margin-bottom:4px;position:relative;z-index:2}.card-value{font-size:1.6rem;font-weight:700;position:relative;z-index:2}.card-subtitle{font-size:.68rem;opacity:.75;position:relative;z-index:2}.results-breakdown{display:flex;gap:24px}.breakdown-section{flex:1}.breakdown-section h4{color:var(--navy);font-size:.85rem;font-weight:600;margin-bottom:6px}.breakdown-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.82rem;border-bottom:1px solid var(--border)}.breakdown-row:last-child{border-bottom:none}.breakdown-row span:first-child{flex-shrink:0}.breakdown-row span:nth-child(2){flex:1;color:var(--text-secondary)}.breakdown-value{font-weight:600;color:var(--navy);margin-left:auto}.block-swatch{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.15)}.block-swatch.standard{background:#5c7a99}.block-swatch.large{background:#e8a840}.block-swatch.cornerA{background:#c0392b}.block-swatch.cornerB{background:#27ae60}.pdf-export-btn{display:block;width:100%;margin-top:16px;padding:12px 24px;background:var(--orange);color:var(--white);border:none;border-radius:6px;font-family:Overpass,sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s}.pdf-export-btn:hover{background:var(--orange-hover)}@media(max-width:900px){.app-layout{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"header" "sidebar" "viewport" "results"}.input-panel{border-right:none;border-bottom:3px solid var(--orange);max-height:200px;overflow-y:auto}.results-cards{flex-wrap:wrap}.results-breakdown{flex-direction:column}}