.roof-panel{background:var(--shell-surface);border:1px solid var(--shell-border);border-radius:var(--radius-lg);padding:12px 14px}.roof-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.roof-panel-title{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;letter-spacing:1.5px;color:var(--shell-text)}.roof-panel-meta{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--lcd-green-dim)}.roof-segments{display:flex;flex-direction:column;gap:8px}.roof-segment{display:flex;align-items:center;gap:12px;background:var(--lcd-bg);border:1px solid var(--lcd-green-dim);border-radius:var(--radius);padding:10px 12px}.roof-segment-rank{font-family:var(--font-lcd);font-size:28px;color:var(--lcd-green-dim);min-width:36px;text-align:center}.roof-compass{flex-shrink:0;width:52px;height:52px}.roof-compass-svg{width:100%;height:100%}.roof-segment-data{flex:1;display:flex;gap:16px;flex-wrap:wrap}.roof-segment-row{display:flex;flex-direction:column;align-items:center;min-width:70px}.roof-segment-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--lcd-green-dim)}.roof-segment-value{font-family:var(--font-lcd);font-size:24px;color:var(--lcd-green);line-height:1}.roof-segment-unit{font-family:var(--font-mono);font-size:9px;color:var(--lcd-green-dim);letter-spacing:.5px}.roof-loading{display:flex;flex-direction:column;gap:6px}.roof-loading-text{font-family:var(--font-mono);font-size:11px;color:var(--lcd-green-dim);letter-spacing:.5px;text-align:center}@media(max-width:700px){.roof-panel-header{flex-direction:column;align-items:flex-start;gap:4px}.roof-segment-data{gap:10px}.roof-segment-row{min-width:55px}}.roof-segment-slider-row{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding-top:6px;margin-top:4px;border-top:1px solid var(--shell-border)}.roof-segment-slider{flex:1;accent-color:var(--lcd-green);height:4px}.roof-segment-slider-value{font-family:var(--font-mono);font-size:11px;color:var(--lcd-green);letter-spacing:.5px;min-width:130px;text-align:right;text-transform:uppercase}.roof-segment-potential{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;min-width:90px}.roof-segment-potential-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--lcd-green-dim)}.roof-potential-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.2px;padding:5px 10px;border-radius:var(--radius);border:1px solid;text-transform:uppercase}.roof-potential-badge.potential-high{color:#1a3a0c;background:#96dd62;border-color:#6cbd2c}.roof-potential-badge.potential-medium{color:#4a3000;background:#f0a830;border-color:#c47a00}.roof-potential-badge.potential-low{color:#fff;background:#b04a3a;border-color:#7a2a1c}.roof-design{background:var(--shell-surface);border:1px solid var(--shell-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}.roof-design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--shell-border)}.roof-design-title{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;letter-spacing:1.5px;color:var(--shell-text)}.roof-design-toggles{display:flex;gap:10px}.roof-design-toggle{display:flex;align-items:center;gap:4px;cursor:pointer}.roof-design-toggle input{accent-color:var(--sun-gold);width:12px;height:12px}.roof-design-toggle-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--shell-text)}.roof-design-map-container{position:relative;height:450px;padding:8px}.roof-design-map{width:100%;height:100%;border-radius:var(--radius)}.roof-design-legend{position:absolute;top:16px;right:16px;background:#d8d6d0eb;border:1px solid var(--shell-border);border-radius:var(--radius);padding:6px 8px;display:flex;flex-direction:column;gap:3px;z-index:1000}.roof-design-legend-item{display:flex;align-items:center;gap:5px}.roof-design-legend-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}.roof-design-legend-text{font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;color:var(--shell-text-bright);white-space:nowrap}.roof-design-controls{padding:12px 14px;display:flex;flex-direction:column;gap:10px}.roof-design-slider-row{display:flex;align-items:center;gap:10px}.roof-design-slider-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--shell-text);min-width:50px}.roof-design-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--shell-border);border-radius:2px;outline:none}.roof-design-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--sun-gold);border:2px solid var(--sun-gold-dim);cursor:pointer}.roof-design-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sun-gold);border:2px solid var(--sun-gold-dim);cursor:pointer}.roof-design-slider-value{font-family:var(--font-lcd);font-size:22px;color:var(--lcd-green);min-width:40px;text-align:right}.roof-design-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.roof-design-stat{background:var(--lcd-bg);border:1px solid var(--lcd-green-dim);border-radius:var(--radius);padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:2px}.roof-design-stat-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--lcd-green-dim)}.roof-design-stat-value{font-family:var(--font-lcd);font-size:24px;color:var(--lcd-green);line-height:1}.roof-design-stat-unit{font-family:var(--font-mono);font-size:9px;color:var(--lcd-green-dim);letter-spacing:.5px}@media(max-width:700px){.roof-design-map-container{height:350px}.roof-design-stats{grid-template-columns:1fr}}.roof-design-stat-clickable{position:relative;cursor:pointer;transition:border-color .15s ease}.roof-design-stat-clickable:hover{border-color:var(--lcd-green)}.roof-design-stat-edit-hint{font-family:var(--font-mono);font-size:8px;color:var(--lcd-green-dim);letter-spacing:.5px;text-transform:uppercase;font-style:italic;margin-top:2px;opacity:.75}.roof-design-panel-edit-popover{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);z-index:200;background:var(--shell-surface);border:1px solid var(--lcd-green-dim);border-radius:var(--radius);padding:12px;box-shadow:0 6px 20px #00000073;min-width:220px;display:flex;flex-direction:column;gap:8px;cursor:default}.roof-design-panel-edit-title{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--shell-text);padding-bottom:6px;border-bottom:1px solid var(--shell-border)}.roof-design-panel-edit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--shell-text-bright);letter-spacing:.5px}.roof-design-panel-edit-row span{text-transform:uppercase;font-size:10px;color:var(--shell-text);letter-spacing:1px}.roof-design-panel-edit-row input{width:90px;font-family:var(--font-mono);font-size:12px;padding:4px 8px;background:var(--lcd-bg);border:1px solid var(--lcd-green-dim);border-radius:var(--radius);color:var(--lcd-text);outline:none}.roof-design-panel-edit-row input:focus{border-color:var(--lcd-green)}.roof-design-panel-edit-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.roof-design-panel-edit-btn{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;background:var(--shell-bg);border:1px solid var(--shell-border);border-radius:var(--radius);color:var(--shell-text-bright);cursor:pointer}.roof-design-panel-edit-btn:hover{background:var(--shell-surface);border-color:var(--shell-text)}.roof-design-panel-edit-btn.primary{background:var(--lcd-bg);border-color:var(--lcd-green-dim);color:var(--lcd-green)}.roof-design-panel-edit-btn.primary:hover{border-color:var(--lcd-green);background:#96dd621a}