:root{
  --ink:#102033;
  --muted:#637083;
  --line:#d7dee8;
  --panel:#ffffff;
  --canvas:#eef2f6;
  --soft:#f7f9fb;
  --blue:#123f66;
  --blue-2:#1f6f8b;
  --blue-soft:#e8f1f8;
  --green:#2d7354;
  --warn:#9a6a17;
  --danger:#a33a3a;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--canvas);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  line-height:1.5;
}

a{color:inherit}

button,
input,
select,
textarea{
  font:inherit;
  letter-spacing:0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(31,111,139,.28);
  outline-offset:2px;
}

.eyebrow,
.small-label,
.doc-type{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

.muted,
small{
  color:var(--muted);
}

.primary-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 14px;
  border-radius:6px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}

.primary-btn{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.primary-btn:hover,
.primary-btn:focus{
  background:#0c324f;
}

.secondary-btn{
  background:#fff;
  border-color:#ccd7e4;
  color:#17304a;
}

.secondary-btn:hover,
.secondary-btn:focus{
  border-color:#8bb5c7;
}

.action-row,
.topbar-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.menu-btn{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:30;
  min-width:52px;
  min-height:40px;
  border:1px solid #0f2830;
  border-radius:6px;
  background:#0f2830;
  color:#fff;
  font-weight:900;
}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:20;
  width:248px;
  padding:18px;
  background:#0f172a;
  color:#e2e8f0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sidebar-close{display:none}

.sidebar-logo{
  display:grid;
  gap:8px;
  justify-items:start;
  margin-bottom:24px;
}

.logo-img{
  width:42px;
  height:42px;
}

.sidebar-logo h2{
  margin:0;
  font-size:20px;
}

.sidebar-logo small,
.sidebar-footer small{
  color:#9aa7b8;
}

.sidebar-nav{
  display:grid;
  gap:6px;
}

.sidebar-item{
  text-decoration:none;
  padding:10px 12px;
  border-radius:6px;
  color:#cbd5e1;
  font-weight:800;
}

.sidebar-item:hover,
.sidebar-item:focus{
  background:#1e293b;
  color:#fff;
}

.profile-box{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}

.profile-circle{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue-2);
  color:#fff;
  font-weight:900;
}

.home-shell,
.app-content{
  margin-left:248px;
}

.home-shell{
  padding:42px;
}

.home-hero{
  min-height:440px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,520px);
  gap:42px;
  align-items:center;
  max-width:1180px;
  margin:auto;
}

.home-hero h1{
  margin:6px 0 12px;
  max-width:760px;
  font-size:clamp(36px,5vw,62px);
  line-height:1.04;
}

.home-hero p{
  max-width:760px;
  color:var(--muted);
  font-size:17px;
}

.home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1180px;
  margin:22px auto 0;
}

.home-grid article,
.auth-panel,
.overview-status,
.overview-card,
.next-issues,
.object-card,
.building-editor,
.envelope-workbench,
.system-card,
.chart-card,
.document-grid article,
.scenario-builder,
.scenario-list article,
.comparison-table-wrap,
.calculation-state,
.blocker-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
}

.home-grid article{
  padding:18px;
  display:grid;
  gap:6px;
}

.home-grid strong{
  font-size:21px;
}

.home-architecture-visual{
  min-height:330px;
  border:1px solid #d6e0ea;
  border-radius:8px;
  background:linear-gradient(180deg,#f7fbfd,#edf3f7);
  position:relative;
  overflow:hidden;
}

.home-architecture-visual::before{
  content:"";
  position:absolute;
  inset:auto 28px 70px 28px;
  height:2px;
  background:#2d4057;
}

.home-architecture-visual span{
  position:absolute;
  bottom:70px;
  border:2px solid #20354d;
  background:#fff;
}

.skyline-tower{
  left:60px;
  width:86px;
  height:160px;
  background:repeating-linear-gradient(90deg,#fff 0 13px,#dfe8ef 13px 20px);
}

.skyline-house{
  left:170px;
  width:150px;
  height:90px;
}

.skyline-house::before{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:-48px;
  height:58px;
  background:#d6e4ed;
  clip-path:polygon(0 100%,50% 0,100% 100%);
  border:2px solid #20354d;
}

.skyline-block{
  right:60px;
  width:130px;
  height:128px;
  background:repeating-linear-gradient(90deg,#fff 0 16px,#dfe8ef 16px 26px);
}

.home-architecture-visual i{
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(90deg,#c5d5df,#eef4f8);
}

.app-content{
  padding:32px;
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}

.hero-top h1{
  margin:4px 0;
  font-size:34px;
}

.hero-top p{
  margin:0;
  color:var(--muted);
}

.system-state{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:7px 10px;
  font-weight:900;
}

.green-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
}

.dashboard{
  max-width:1180px;
}

.auth-layout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.auth-panel{
  padding:22px;
  display:grid;
  gap:12px;
}

.auth-panel h2{
  margin:0;
}

.auth-panel label{
  display:grid;
  gap:5px;
  font-weight:800;
}

.auth-panel input,
.auth-panel select{
  width:100%;
  min-height:40px;
  border:1px solid #cbd7e4;
  border-radius:6px;
  padding:8px 10px;
}

.password-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
}

.password-toggle{
  min-height:40px;
  border:1px solid #cbd7e4;
  border-radius:6px;
  background:#fff;
  font-weight:800;
}

.form-message{
  margin:0;
  color:var(--green);
}

.form-message.error{
  color:var(--danger);
}

.workspace-shell.product-studio{
  margin-left:0;
  min-height:100vh;
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  background:linear-gradient(180deg,#f7f9fb 0,#eef2f6 100%);
  color:var(--ink);
}

.product-studio .workspace-rail{
  position:sticky;
  top:0;
  min-height:100vh;
  align-self:start;
  padding:20px 16px;
  background:#f9fbfd;
  border-right:1px solid var(--line);
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:20px;
}

.product-studio .rail-brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:4px 4px 14px;
  border-bottom:1px solid #e4eaf2;
}

.product-studio .rail-brand img{
  width:36px;
  height:36px;
}

.product-studio .rail-brand strong{
  display:block;
  font-size:15px;
}

.product-studio .rail-brand span{
  display:block;
  color:var(--muted);
  font-size:12px;
}

.product-studio .workspace-nav{
  display:grid;
  gap:5px;
  align-content:start;
}

.product-studio .workspace-nav button{
  min-height:42px;
  border:0;
  border-radius:6px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  color:#334155;
  text-align:left;
  font-weight:800;
  cursor:pointer;
}

.product-studio .workspace-nav button:hover,
.product-studio .workspace-nav button:focus{
  background:#edf3f8;
}

.product-studio .workspace-nav button.active{
  background:var(--blue);
  color:#fff;
  box-shadow:inset 3px 0 0 #79b9d2;
}

.nav-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  border:1.8px solid currentColor;
  border-radius:4px;
  position:relative;
  opacity:.86;
}

.nav-icon::before,
.nav-icon::after{
  content:"";
  position:absolute;
  background:currentColor;
}

.project-icon::before{width:8px;height:2px;left:4px;top:5px;box-shadow:0 5px 0 currentColor}
.location-icon{border-radius:50% 50% 50% 2px;transform:rotate(-45deg)}
.location-icon::before{width:6px;height:6px;border-radius:50%;left:4px;top:4px;background:currentColor}
.building-icon::before{width:10px;height:8px;left:3px;bottom:2px}
.envelope-icon::before{width:12px;height:2px;left:2px;top:4px;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor}
.systems-icon::before{width:10px;height:2px;left:3px;top:4px;box-shadow:0 5px 0 currentColor,0 10px 0 currentColor}
.scenario-icon::before{width:7px;height:7px;left:2px;top:2px}
.scenario-icon::after{width:7px;height:7px;right:2px;bottom:2px}
.results-icon::before{width:3px;height:9px;left:3px;bottom:3px;box-shadow:5px -4px 0 currentColor,10px -1px 0 currentColor}
.documents-icon::before{width:10px;height:2px;left:3px;top:5px;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor}

.readiness-card{
  align-self:end;
  padding:14px;
  border:1px solid #e1e7ef;
  background:#fff;
  border-radius:8px;
  display:grid;
  gap:8px;
}

.readiness-card strong{
  font-size:32px;
  line-height:1;
  color:var(--blue);
}

.readiness-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.readiness-issues,
.overview-issues{
  display:grid;
  gap:6px;
}

.readiness-issues button,
.overview-issues button{
  border:1px solid #dbe3ec;
  border-radius:6px;
  background:#f8fafc;
  padding:8px 9px;
  color:#26364a;
  text-align:left;
  cursor:pointer;
}

.readiness-issues button:hover,
.readiness-issues button:focus,
.overview-issues button:hover,
.overview-issues button:focus{
  border-color:#7aaac0;
  background:#eef6fa;
}

.workspace-main{
  min-width:0;
  padding:22px 28px 34px;
}

.workspace-topbar{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:2px 0 20px;
}

.workspace-topbar h1{
  margin:4px 0 2px;
  font-size:26px;
  line-height:1.15;
}

.workspace-current-step{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.workspace-form{
  display:block;
}

.workspace-section{
  display:none;
  gap:20px;
}

.workspace-section.active{
  display:grid;
}

.section-title{
  max-width:920px;
  display:grid;
  gap:5px;
}

.section-title h2,
.overview-lead h2{
  margin:0;
  font-size:28px;
  line-height:1.16;
}

.section-title p,
.overview-lead p{
  margin:0;
  color:var(--muted);
  max-width:760px;
}

.overview-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}

.overview-lead{
  min-height:265px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(115deg,rgba(18,63,102,.94),rgba(31,111,139,.84)),
    linear-gradient(135deg,transparent 0 55%,rgba(255,255,255,.13) 56% 58%,transparent 59%),
    var(--blue);
  color:#fff;
  display:grid;
  align-content:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}

.overview-lead::after{
  content:"";
  position:absolute;
  right:32px;
  bottom:26px;
  width:260px;
  height:145px;
  border:2px solid rgba(255,255,255,.32);
  border-top-width:0;
  background:
    linear-gradient(35deg,transparent 49%,rgba(255,255,255,.24) 50% 52%,transparent 53%) 0 0/110px 80px,
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 18px,transparent 18px 34px);
  clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%);
  opacity:.62;
}

.overview-lead .eyebrow,
.overview-lead p{
  color:#d8e8f3;
}

.overview-lead h2,
.overview-lead p,
.overview-lead .primary-btn{
  position:relative;
  z-index:1;
}

.overview-lead .primary-btn{
  justify-self:start;
  background:#fff;
  color:var(--blue);
  border-color:#fff;
}

.overview-stack{
  display:grid;
  gap:12px;
}

.overview-status{
  padding:18px;
  display:grid;
  align-content:center;
  gap:8px;
}

.overview-status strong{
  font-size:30px;
  color:var(--blue);
}

.overview-status p,
.overview-card p{
  margin:0;
  color:var(--muted);
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.overview-card{
  min-height:130px;
  padding:16px;
  display:grid;
  align-content:start;
  gap:8px;
}

.overview-card strong{
  font-size:19px;
}

.next-issues{
  padding:18px;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:18px;
}

.next-issues h3{
  margin:4px 0 0;
  font-size:18px;
}

.overview-issues{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.overview-issues button{
  display:grid;
  gap:3px;
}

.overview-issues button span,
.overview-issues article span{
  color:var(--muted);
  font-size:12px;
}

.location-layout{
  display:grid;
  grid-template-columns:minmax(248px,292px) minmax(0,2.65fr);
  grid-template-areas:"side map";
  gap:16px;
  align-items:start;
}

.location-controls{
  grid-area:side;
  display:grid;
  gap:14px;
  position:sticky;
  top:20px;
  min-width:0;
}

.climate-map-panel{
  grid-area:map;
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
}

.climate-map{
  width:min(100%,1120px);
  min-height:620px;
  border-radius:6px;
  border:1px solid #dde5ee;
  background:#f7fafc;
  overflow:hidden;
  touch-action:none;
  justify-self:center;
}

.map-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.map-toolbar h3{
  margin:0;
  font-size:16px;
}

.map-toolbar span{
  color:var(--muted);
  font-size:12px;
}

.map-controls{
  display:flex;
  gap:6px;
}

.map-controls button{
  min-width:38px;
  min-height:36px;
  border:1px solid #cad7e3;
  border-radius:6px;
  background:#fff;
  color:var(--blue);
  font-weight:900;
}

.climate-summary,
.county-browser,
.map-layer-switch{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:14px;
}

.climate-summary{
  display:grid;
  gap:5px;
}

.climate-summary strong{
  font-size:24px;
  color:var(--blue);
}

.product-studio label{
  display:grid;
  gap:6px;
  color:#1f2d3d;
  font-weight:800;
  min-width:0;
}

.product-studio label span{
  font-size:13px;
}

.product-studio input,
.product-studio select,
.product-studio textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:40px;
  border:1px solid #cbd7e4;
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  padding:8px 10px;
}

.locality-selector{
  position:relative;
}

.locality-results{
  position:absolute;
  z-index:15;
  left:0;
  right:0;
  top:calc(100% + 5px);
  max-height:330px;
  overflow:auto;
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid #cdd9e5;
  border-radius:8px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,31,48,.16);
}

.locality-results[hidden]{
  display:none;
}

.locality-option{
  width:100%;
  border:1px solid transparent;
  border-radius:6px;
  background:#f8fafc;
  padding:9px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 8px;
  text-align:left;
}

.locality-option:hover,
.locality-option:focus,
.locality-option.active{
  border-color:var(--blue-2);
  background:#eef7fb;
}

.locality-option span{
  grid-column:1/-1;
  color:var(--muted);
  font-size:12px;
}

.locality-option em{
  font-style:normal;
  color:#526477;
  font-size:12px;
  font-weight:900;
}

.county-browser{
  display:grid;
  gap:10px;
}

.county-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.map-layer-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.map-layer-switch button,
.equipment-chip,
.envelope-object-list button{
  border:1px solid #cfdae6;
  border-radius:6px;
  background:#fff;
  color:#17304a;
  min-height:40px;
  padding:8px 10px;
  font-weight:800;
}

.map-layer-switch button.active,
.equipment-chip.active,
.envelope-object-list button.active{
  border-color:var(--blue-2);
  background:#eaf5f8;
  color:#113f5f;
}

.map-layer-switch button:disabled{
  color:#8794a4;
  background:#f4f6f8;
}

.climate-map svg{
  display:block;
  width:100%;
  height:auto;
  min-height:inherit;
  cursor:crosshair;
  filter:drop-shadow(0 18px 28px rgba(27,45,63,.12));
}

.climate-map.dragging svg{
  cursor:grabbing;
}

.climate-map-svg,
.climate-map-svg *:focus{
  outline:none;
}

.romania-map-shadow{
  fill:#314055;
  opacity:.13;
  transform:translate(5px,7px);
}

.romania-silhouette{
  fill:url(#romaniaLand);
  stroke:#d4dfd8;
  stroke-width:.9;
  pointer-events:none;
}

.cartographic-base-layer{
  pointer-events:none;
}

.terrain-detail-layer{
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.55;
}

.romania-land-wash{
  fill:url(#romaniaLand);
}

.romania-altitude-wash{
  fill:url(#romaniaAltitude);
  mix-blend-mode:multiply;
}

.terrain-contour,
.terrain-ridge{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.terrain-contour{
  stroke:#738b86;
  stroke-width:.46;
  stroke-opacity:.20;
}

.terrain-contour.contour-1{stroke-opacity:.11}
.terrain-contour.contour-2{stroke-opacity:.08}

.terrain-ridge{
  stroke:#ffffff;
  stroke-width:1.26;
  stroke-opacity:.26;
}

.terrain-ridge.ridge-1{
  stroke:#526b78;
  stroke-width:.58;
  stroke-opacity:.16;
}

.romania-outline-soft{fill:none;stroke:rgba(255,255,255,.78);stroke-width:4.6;stroke-linejoin:round;pointer-events:none}
.romania-outline{fill:none;stroke:#26384b;stroke-width:1.05;stroke-linejoin:round;pointer-events:none}
.technical-hit-layer{opacity:0;pointer-events:none}
.presentation-layer{isolation:isolate}
.climate-zone{
  stroke:rgba(255,255,255,.48);
  stroke-width:.54;
  stroke-linejoin:round;
  opacity:.36;
  cursor:pointer;
  mix-blend-mode:multiply;
  transition:opacity .15s ease,filter .15s ease,stroke-width .15s ease,stroke .15s ease;
}

.climate-zone:hover,
.climate-zone:focus,
.climate-zone.hovered{
  opacity:.58;
  filter:brightness(1.04) saturate(1.02);
  stroke:#fff;
  stroke-width:.78;
}

.climate-zone.selected{
  opacity:.68;
  filter:brightness(1.05) saturate(1.04);
  stroke:#102033;
  stroke-width:1.12;
}

.climate-zone-boundary-layer,
.locality-layer{
  pointer-events:none;
}

.climate-zone-boundary{
  fill:none;
  stroke:#314151;
  stroke-width:.34;
  stroke-opacity:.22;
  stroke-linejoin:round;
}

.locality-marker{
  pointer-events:auto;
  cursor:pointer;
}

.locality-marker circle{
  fill:#21344a;
  stroke:#fff;
  stroke-width:1.5;
}

.locality-marker.tier-3 circle,
.locality-marker.tier-4 circle,
.locality-marker.tier-5 circle{
  fill:#405066;
}

.locality-marker.tier-5 circle{
  opacity:.68;
}

.locality-marker text.locality-label{
  fill:#1e3146;
  paint-order:stroke;
  stroke:#f8fbfd;
  stroke-width:4px;
  stroke-linejoin:round;
  font-family:Inter,Arial,sans-serif;
}

.locality-marker.tier-1 text.locality-label{fill:#10263a}
.locality-marker.tier-4 text.locality-label,
.locality-marker.tier-5 text.locality-label{fill:#4a596c}

.locality-marker:hover circle,
.locality-marker:focus circle,
.locality-marker.selected circle{
  fill:#0e6578;
}

.locality-marker.selected circle{
  stroke:var(--ink);
  stroke-width:2;
  stroke-dasharray:3 2;
}

.locality-marker.selected text.locality-label{
  fill:#0d5261;
  font-weight:900;
}

.location-pin{
  pointer-events:none;
}

.location-pin .pin-halo{
  fill:#0f6cae;
  opacity:.18;
}

.location-pin path{
  fill:#0b1d33;
  stroke:#fff;
  stroke-width:2.4;
}

.location-pin circle:not(.pin-halo){
  fill:#0b1d33;
  stroke:#fff;
  stroke-width:1.4;
}

.location-pin .pin-core{
  fill:#fff;
  stroke:none;
}

.map-empty{
  min-height:260px;
  display:grid;
  place-items:center;
  color:var(--muted);
}

.climate-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.climate-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #d2dbe6;
  border-radius:999px;
  background:#fff;
  padding:5px 9px;
  font-size:12px;
  font-weight:800;
}

.climate-legend i{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
}

.climate-legend .selected{
  border-color:var(--ink);
  box-shadow:0 0 0 2px rgba(16,32,51,.08);
}

.technical-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.technical-grid article{
  padding:10px;
  border:1px solid #d9e2ec;
  border-radius:6px;
  background:#f8fafc;
  display:grid;
  gap:4px;
}

.visual-card-grid{
  border:0;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.visual-card-grid legend{
  grid-column:1/-1;
}

.building-type-card{
  position:relative;
  min-height:148px;
  border:1px solid #d6e0ea;
  border-radius:8px;
  background:#fff;
  padding:12px;
  display:grid;
  gap:8px;
  cursor:pointer;
  overflow:hidden;
}

.building-type-card input{
  position:absolute;
  inset:0;
  width:auto;
  min-width:0;
  min-height:0;
  opacity:0;
  cursor:pointer;
}

.building-type-card:has(input:checked){
  border-color:var(--blue);
  background:#eef6fb;
  box-shadow:inset 0 0 0 2px rgba(18,63,102,.08);
}

.building-type-card strong{
  font-size:15px;
}

.building-type-card small{
  line-height:1.35;
}

.building-silhouette{
  position:relative;
  width:90px;
  height:70px;
  display:block;
}

.building-silhouette::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:45px;
  border:2px solid #223044;
  background:#f9fbfd;
}

.building-silhouette::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  height:38px;
  background:#d7e4ed;
  clip-path:polygon(0 60%,50% 0,100% 60%,100% 100%,0 100%);
  border:2px solid #223044;
}

.building-silhouette.p1::before{height:52px}
.building-silhouette.p2::before{height:62px}
.building-silhouette.mansard::after{top:0;height:42px;background:#cbdbe6}
.building-silhouette.semi::before{box-shadow:42px 0 0 -1px #f8fafc,42px 0 0 1px #223044}
.building-silhouette.terrace::before{box-shadow:28px 0 0 -1px #f8fafc,28px 0 0 1px #223044,56px 0 0 -1px #f8fafc,56px 0 0 1px #223044}
.building-silhouette.small-block::before,
.building-silhouette.block::before{height:58px;left:22px;right:22px;background:repeating-linear-gradient(90deg,#fff 0 12px,#dfe8ef 12px 20px)}
.building-silhouette.block::before{height:66px}
.building-silhouette.large{width:190px;height:138px}
.building-silhouette.large::before{height:86px}
.building-silhouette.large::after{height:62px}

.building-editor{
  padding:18px;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:20px;
  align-items:center;
  min-width:0;
}

.building-visual-context{
  min-height:210px;
  border:1px solid #e1e8f0;
  border-radius:8px;
  background:linear-gradient(180deg,#f7fbfd,#eef4f8);
  display:grid;
  justify-items:center;
  align-content:center;
  gap:12px;
  text-align:center;
}

.building-visual-context div{
  display:grid;
  gap:3px;
}

.building-visual-context strong{
  font-size:20px;
}

.form-grid{
  display:grid;
  gap:12px;
  min-width:0;
}

.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

.object-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.object-card{
  padding:15px;
  display:grid;
  gap:5px;
}

.object-card strong{
  font-size:22px;
}

.envelope-workbench{
  padding:0;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  overflow:hidden;
}

.envelope-object-list{
  padding:12px;
  border-right:1px solid var(--line);
  background:#f7f9fb;
  display:grid;
  gap:8px;
  align-content:start;
}

.envelope-object-list button{
  text-align:left;
}

.envelope-panel{
  display:none;
  padding:20px;
  gap:16px;
}

.envelope-panel.active{
  display:grid;
}

.envelope-panel h3,
.system-card h3,
.chart-card h3{
  margin:0;
  font-size:19px;
}

.assembly-strip{
  min-height:74px;
  display:grid;
  grid-template-columns:.8fr 1.4fr .8fr .7fr;
  border:1px solid #d1dce8;
  border-radius:8px;
  overflow:hidden;
}

.assembly-strip span{
  display:grid;
  place-items:center;
  padding:8px;
  min-width:0;
  color:#172033;
  font-size:12px;
  font-weight:800;
  text-align:center;
  background:#f3f1eb;
  border-right:1px solid rgba(0,0,0,.08);
}

.assembly-strip span:nth-child(2){background:#d8b985}
.assembly-strip span:nth-child(3){background:#d9e7bf}
.assembly-strip span:last-child{border-right:0;background:#f6f4ee}
.assembly-strip.roof span:nth-child(1){background:#b8c9d9}
.assembly-strip.roof span:nth-child(2){background:#cfb58c}
.assembly-strip.floor span:nth-child(3){background:#bac4cf}

.window-orientation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid #d9e2ec;
  border-radius:8px;
  background:#f8fafc;
}

.compass-control{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.compass-control label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  border:1px solid #cfd9e5;
  border-radius:999px;
  padding:5px 9px;
  background:#fff;
}

.systems-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.system-card{
  padding:18px;
  display:grid;
  gap:15px;
}

.system-card.featured{
  grid-column:1/-1;
}

.system-card-header{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
}

.checkbox-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
}

.product-studio label.checkbox-row{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
}

.checkbox-row input{
  width:auto;
  min-height:0;
}

.product-studio label.checkbox-row input{
  width:auto;
  min-width:16px;
  min-height:16px;
  flex:0 0 auto;
  padding:0;
}

.equipment-flow{
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(140px,1fr) minmax(180px,1.1fr);
  gap:12px;
  align-items:center;
}

.equipment-flow.compact{
  grid-template-columns:1fr 1fr 1fr;
}

.flow-source,
.flow-node,
.flow-branches span{
  min-height:48px;
  display:grid;
  place-items:center;
  border:1px solid #ccd9e4;
  border-radius:8px;
  background:#f8fafc;
  color:#1c3147;
  font-weight:900;
  text-align:center;
  padding:8px;
}

.flow-node{
  background:#eff6f9;
  border-color:#9cc6d4;
  color:var(--blue);
}

.flow-split,
.flow-branches{
  display:grid;
  gap:8px;
}

.system-card.featured.shared-active .flow-node{
  background:var(--blue);
  color:#fff;
}

.equipment-chip-row,
.equipment-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.info-strip{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid #ead6a6;
  border-radius:8px;
  background:#fff9e9;
  color:#5f4110;
}

.calculation-state{
  padding:16px;
  display:grid;
  gap:4px;
  border-left:4px solid #9aa8b7;
}

.calculation-state[data-state="calculated"]{border-left-color:var(--green)}
.calculation-state[data-state="blocked"]{border-left-color:var(--danger)}
.calculation-state[data-state="calculating"]{border-left-color:var(--blue)}
.calculation-state[data-state="stale"]{border-left-color:var(--warn)}

.blocker-panel{
  padding:16px;
  display:grid;
  gap:6px;
  background:#fff7f7;
  border-color:#e4c3c3;
  color:#672323;
}

.result-grid,
.document-grid,
.charts-grid{
  display:grid;
  gap:12px;
}

.product-results{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.result-card{
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  display:grid;
  gap:5px;
  min-height:122px;
}

.result-card.hero-metric{
  grid-column:span 2;
  background:var(--blue);
  color:#fff;
}

.result-card span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  font-weight:900;
}

.result-card.hero-metric span,
.result-card.hero-metric small{
  color:#dbeaf3;
}

.result-card strong{
  font-size:28px;
  line-height:1.12;
}

.charts-grid{
  grid-template-columns:1fr 1fr;
}

.chart-card{
  padding:16px;
  min-height:220px;
}

.bar-chart{
  display:grid;
  gap:10px;
  align-content:center;
}

.bar-chart.empty,
.monthly-chart.empty{
  color:var(--muted);
  display:grid;
  place-items:center;
  min-height:150px;
  border:1px dashed #cbd7e4;
  border-radius:8px;
}

.bar-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 110px;
  gap:9px;
  align-items:center;
}

.bar-row i{
  display:block;
  height:12px;
  border-radius:999px;
  background:var(--blue-2);
}

.monthly-chart{
  min-height:170px;
  display:flex;
  align-items:end;
  gap:7px;
}

.month-column{
  min-width:0;
  flex:1;
  height:150px;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  gap:4px;
}

.month-column i{
  align-self:end;
  width:9px;
  border-radius:999px 999px 0 0;
  display:inline-block;
  margin-inline:1px;
}

.month-column .heat{background:#b85b4f}
.month-column .cool{background:#3578a8}
.month-column span{font-size:11px;color:var(--muted)}

.technical-details{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:12px 14px;
}

.technical-details summary{
  cursor:pointer;
  font-weight:900;
}

.json-preview{
  max-height:420px;
  overflow:auto;
  background:#0f172a;
  color:#dbeafe;
  border-radius:6px;
  padding:12px;
  font-size:12px;
}

.scenario-builder{
  padding:16px;
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(200px,260px) auto;
  gap:12px;
  align-items:end;
}

.scenario-list{
  display:grid;
  gap:10px;
}

.scenario-list article{
  padding:14px;
  display:grid;
  gap:5px;
}

.comparison-table-wrap{
  overflow:auto;
}

.comparison-table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
  background:#fff;
}

.comparison-table th,
.comparison-table td{
  padding:12px;
  border-bottom:1px solid #e1e7ef;
  text-align:left;
}

.comparison-table th{
  color:#536477;
  font-size:12px;
  text-transform:uppercase;
}

.product-documents{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.product-documents article{
  padding:18px;
  display:grid;
  gap:8px;
}

.product-documents h3{
  margin:0;
}

.product-documents strong{
  justify-self:start;
  border:1px solid #d3dde8;
  border-radius:999px;
  padding:5px 9px;
  background:#f8fafc;
  color:var(--blue);
}

.document-readiness-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.document-readiness-list article{
  padding:13px;
  display:grid;
  gap:4px;
}

@media(max-width:1180px){
  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .sidebar{
    transform:translateX(-104%);
    transition:transform .2s ease;
  }
  .sidebar.open{
    transform:translateX(0);
  }
  .sidebar-close{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:6px;
    background:transparent;
    color:#fff;
  }
  .home-shell,
  .app-content{
    margin-left:0;
    padding:72px 22px 30px;
  }
  .workspace-shell.product-studio{
    grid-template-columns:1fr;
  }
  .product-studio .workspace-rail{
    position:static;
    min-height:0;
    grid-template-rows:auto auto;
  }
  .readiness-card{
    display:none;
  }
  .product-studio .workspace-nav{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .product-studio .workspace-nav button{
    justify-content:center;
  }
  .location-layout{
    grid-template-columns:1fr;
    grid-template-areas:"side" "map";
  }
  .location-controls{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .climate-map{
    min-height:560px;
  }
  .overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .visual-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .form-grid.four{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .home-hero{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .workspace-main{
    padding:16px;
  }
  .workspace-topbar,
  .hero-top{
    display:grid;
  }
  .topbar-actions{
    width:100%;
  }
  .topbar-actions .primary-btn,
  .topbar-actions .secondary-btn{
    flex:1;
  }
  .product-studio .workspace-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .overview-layout,
  .next-issues,
  .building-editor,
  .envelope-workbench,
  .systems-grid,
  .charts-grid,
  .product-documents,
  .document-readiness-list,
  .scenario-builder,
  .technical-grid,
  .auth-layout,
  .home-grid{
    grid-template-columns:1fr;
  }
  .overview-issues,
  .object-grid,
  .product-results,
  .visual-card-grid{
    grid-template-columns:1fr;
  }
  .result-card.hero-metric,
  .system-card.featured{
    grid-column:auto;
  }
  .envelope-object-list{
    border-right:0;
    border-bottom:1px solid var(--line);
    grid-template-columns:1fr 1fr;
  }
  .equipment-flow,
  .equipment-flow.compact{
    grid-template-columns:1fr;
  }
  .location-controls{
    grid-template-columns:1fr;
  }
  .climate-map{
    min-height:450px;
  }
  .bar-row{
    grid-template-columns:82px minmax(0,1fr);
  }
  .bar-row strong{
    grid-column:1/-1;
  }
  .home-shell{
    padding-inline:16px;
  }
}

@media(max-width:430px){
  .workspace-main{
    padding:12px;
  }
  .product-studio .workspace-rail{
    padding:12px;
  }
  .product-studio .workspace-nav{
    grid-template-columns:1fr;
  }
  .product-studio .workspace-nav button{
    justify-content:flex-start;
  }
  .workspace-topbar h1,
  .section-title h2,
  .overview-lead h2{
    font-size:22px;
  }
  .topbar-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .overview-lead{
    min-height:230px;
    padding:20px;
  }
  .overview-lead::after{
    width:190px;
    right:10px;
    opacity:.38;
  }
  .climate-map{
    min-height:390px;
  }
  .map-toolbar,
  .system-card-header,
  .window-orientation,
  .info-strip{
    display:grid;
  }
  .map-controls{
    width:100%;
  }
  .map-controls button{
    flex:1;
  }
  .county-grid,
  .form-grid.two,
  .form-grid.three,
  .form-grid.four,
  .envelope-object-list{
    grid-template-columns:1fr;
  }
  .locality-results{
    position:static;
    margin-top:6px;
    max-height:260px;
  }
  .comparison-table{
    min-width:520px;
  }
  .home-architecture-visual{
    min-height:250px;
  }
}

/* P12H-R: reference-driven visual acceptance remediation. */
.workspace-shell.product-studio{
  grid-template-columns:154px minmax(0,1fr);
  background:#f5f8fc;
}

.product-studio .workspace-rail{
  padding:14px 10px;
  gap:12px;
  background:linear-gradient(180deg,#fff 0%,#f9fbfe 100%);
  border-right:1px solid #e1e9f2;
  box-shadow:3px 0 18px rgba(31,49,71,.035);
}

.product-studio .rail-brand{
  padding:3px 2px 12px;
}

.product-studio .rail-brand img{
  width:32px;
  height:32px;
}

.product-studio .rail-brand strong{
  color:#06264b;
  font-size:14px;
}

.rail-group-label{
  color:#65758a;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.product-studio .workspace-nav button{
  min-height:36px;
  padding:8px;
  border-radius:5px;
  font-size:12px;
}

.product-studio .workspace-nav button.active{
  background:#e9f2ff;
  color:#0e58a8;
  box-shadow:inset 3px 0 0 #1467c8;
}

.nav-icon{
  width:16px;
  height:16px;
}

.readiness-card{
  border-radius:6px;
  box-shadow:none;
}

.workspace-main{
  padding:14px 20px 22px;
  background:radial-gradient(circle at 66% 5%,rgba(211,224,239,.72),transparent 32%),#f5f8fc;
}

.reference-topbar{
  min-height:60px;
  padding:0 0 12px;
  border-bottom:1px solid #e2e8f0;
  margin-bottom:14px;
}

.step-heading{
  display:flex;
  align-items:center;
  min-width:0;
  gap:12px;
}

.step-number{
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1769c2;
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(23,105,194,.18);
}

.workspace-topbar h1{
  margin:1px 0;
  color:#06264b;
  font-size:20px;
}

.workspace-current-step{
  max-width:680px;
  font-size:13px;
}

.topbar-actions{
  flex-wrap:nowrap;
}

.topbar-model-chip{
  min-width:116px;
  padding:7px 10px;
  border:1px solid #dbe5f0;
  border-radius:6px;
  background:#fff;
  display:grid;
  gap:2px;
  font-size:11px;
}

.topbar-model-chip span{
  color:#64758b;
  font-weight:800;
}

.topbar-model-chip strong{
  color:#0e58a8;
  font-size:12px;
}

.topbar-user-dot{
  width:34px;
  height:34px;
  border:1px solid #d5e0ec;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%,#6f8094 0 5px,transparent 6px),
    radial-gradient(circle at 50% 74%,#6f8094 0 9px,transparent 10px),
    #f7fafc;
}

.reference-screen,
.reference-panel,
.overview-card,
.system-card,
.chart-card,
.document-grid article,
.scenario-list article,
.calculation-state,
.blocker-panel,
.technical-details{
  border-color:#dfe7f0;
  border-radius:6px;
  box-shadow:0 10px 26px rgba(32,48,70,.035);
}

.section-title{
  max-width:100%;
  grid-template-columns:minmax(0,1fr);
  gap:3px;
}

.section-title h2,
.overview-lead h2{
  color:#06264b;
  font-size:22px;
}

.section-title p,
.overview-lead p{
  font-size:13px;
}

.overview-reference-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 332px;
  gap:14px;
  align-items:stretch;
}

.project-overview-panel{
  min-height:380px;
  padding:26px 28px;
  background:#fff;
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(340px,1.1fr);
  gap:20px;
  align-items:center;
}

.project-overview-panel h2{
  margin:3px 0 8px;
  font-size:30px;
  line-height:1.06;
}

.project-overview-panel p{
  margin:0 0 18px;
  color:#5d6d7f;
}

.overview-building-visual,
.building-visual-context,
.envelope-model-stage,
.scenario-house-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,248,251,.92)),
    radial-gradient(circle at 40% 70%,rgba(45,115,84,.12),transparent 38%);
}

.overview-building-visual{
  min-height:280px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.overview-building-visual i{
  position:absolute;
  left:14%;
  right:10%;
  bottom:44px;
  height:20px;
  border-radius:50%;
  background:rgba(75,97,116,.14);
  transform:skewX(-12deg);
}

.reference-house,
.scenario-house{
  width:260px;
  height:190px;
  position:relative;
  display:block;
  transform:skewY(-5deg);
}

.reference-house::before,
.scenario-house::before{
  content:"";
  position:absolute;
  left:56px;
  bottom:30px;
  width:148px;
  height:96px;
  border:2px solid #24374d;
  background:
    linear-gradient(90deg,transparent 16%,rgba(28,54,79,.16) 17% 19%,transparent 20% 42%,rgba(28,54,79,.16) 43% 45%,transparent 46%),
    #fbfcfd;
  box-shadow:36px 18px 0 #e6edf4;
}

.reference-house::after,
.scenario-house::after{
  content:"";
  position:absolute;
  left:40px;
  bottom:118px;
  width:196px;
  height:72px;
  background:#3d4d60;
  clip-path:polygon(0 74%,47% 0,100% 74%,90% 100%,10% 100%);
  box-shadow:0 7px 0 #a8bac8 inset;
}

.overview-control-stack{
  display:grid;
  gap:12px;
}

.next-issues{
  grid-template-columns:1fr;
  gap:10px;
}

.overview-issues{
  grid-template-columns:1fr;
}

.reference-summary-strip{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.location-reference-grid{
  grid-template-columns:minmax(164px,188px) minmax(0,1fr) minmax(166px,196px);
  grid-template-areas:"side map climate";
  gap:10px;
  align-items:stretch;
}

.location-controls,
.climate-inspector{
  position:sticky;
  top:14px;
}

.climate-inspector{
  grid-area:climate;
  align-self:start;
  padding:12px;
  background:#fff;
  display:grid;
  gap:12px;
}

.climate-summary{
  border:0;
  padding:0;
}

.climate-map-panel{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  align-self:stretch;
}

.map-toolbar{
  margin-bottom:8px;
  padding:0 2px;
}

.map-toolbar strong{
  color:#06264b;
  font-size:14px;
}

.map-controls button{
  min-width:34px;
  min-height:32px;
  border-radius:5px;
}

.climate-map{
  width:100%;
  min-height:704px;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 38% 24%,rgba(255,255,255,.92),rgba(243,249,247,.54) 32%,transparent 54%),
    linear-gradient(180deg,#eef5f8 0%,#f7faf8 54%,#edf4ed 100%);
  overflow:visible;
  justify-self:stretch;
  display:grid;
  place-items:center;
}

.climate-legend{
  margin-top:7px;
  border:0;
  background:transparent;
  padding:0;
}

.building-reference-grid{
  display:grid;
  grid-template-columns:184px minmax(480px,1fr) 276px;
  gap:12px;
  align-items:stretch;
}

.building-reference-grid .visual-card-grid{
  grid-template-columns:1fr;
  align-content:start;
  gap:8px;
}

.building-reference-grid .visual-card-grid legend{
  padding:0 0 3px;
  color:#58677a;
  font-size:12px;
  font-weight:900;
}

.building-reference-grid .building-type-card{
  min-height:68px;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  padding:8px;
  gap:8px;
}

.building-reference-grid .building-type-card strong,
.building-reference-grid .building-type-card small{
  grid-column:2;
}

.building-reference-grid .building-type-card .building-silhouette{
  grid-row:1 / span 2;
  width:62px;
  height:48px;
}

.building-reference-grid .building-silhouette.semi::before{
  box-shadow:17px 0 0 -1px #f8fafc,17px 0 0 1px #223044;
}

.building-reference-grid .building-silhouette.terrace::before{
  box-shadow:11px 0 0 -1px #f8fafc,11px 0 0 1px #223044,22px 0 0 -1px #f8fafc,22px 0 0 1px #223044;
}

.building-visual-stage{
  min-width:0;
  display:grid;
  grid-template-rows:minmax(506px,1fr) auto;
  gap:10px;
}

.building-visual-context{
  min-height:506px;
  border:0;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
  isolation:isolate;
}

.building-visual-context::before{
  content:"";
  position:absolute;
  left:8%;
  right:6%;
  bottom:68px;
  height:34px;
  border-radius:50%;
  background:rgba(38,58,80,.13);
  transform:skewX(-14deg);
  z-index:0;
}

.building-visual-context::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 0 54%,rgba(211,226,219,.55) 55%,rgba(236,242,235,.9) 100%),
    radial-gradient(circle at 28% 28%,rgba(216,229,240,.72),transparent 36%);
  z-index:0;
}

.building-silhouette.large{
  width:372px;
  height:272px;
  z-index:1;
  filter:drop-shadow(30px 26px 0 rgba(45,70,90,.12));
}

.building-silhouette.large::before{
  left:70px;
  right:58px;
  bottom:30px;
  height:162px;
  background:
    linear-gradient(90deg,transparent 13%,#c9dceb 14% 25%,transparent 26% 43%,#c9dceb 44% 55%,transparent 56% 73%,#c9dceb 74% 85%,transparent 86%),
    linear-gradient(180deg,#ffffff 0%,#f1f6f8 74%,#e2ebf0 100%);
  border:2px solid #22364d;
  box-shadow:52px 24px 0 #dce7ef;
}

.building-silhouette.large::after{
  left:34px;
  right:24px;
  top:18px;
  height:128px;
  background:linear-gradient(180deg,#42556b,#2f4156);
  clip-path:polygon(0 75%,48% 0,100% 75%,89% 100%,10% 100%);
  box-shadow:0 11px 0 #acbfcb inset;
}

.building-visual-context > div{
  position:absolute;
  left:26px;
  bottom:20px;
  z-index:2;
  display:grid;
  gap:3px;
  text-align:left;
  color:#526274;
  font-size:12px;
}

.building-visual-context > div strong{
  color:#06264b;
  font-size:17px;
}

.building-orientation-strip{
  min-height:42px;
  border:1px solid #dfe7f0;
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#526274;
  font-size:12px;
  font-weight:900;
}

.building-orientation-strip i{
  width:54px;
  height:2px;
  background:#1769c2;
  position:relative;
}

.building-orientation-strip i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-4px;
  border-left:8px solid #1769c2;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

.building-dimensions-panel{
  padding:14px;
  background:#fff;
  display:grid;
  gap:14px;
  align-content:start;
}

.building-dimensions-panel h3{
  margin:0;
  color:#06264b;
  font-size:16px;
}

.building-derived-strip{
  grid-template-columns:1fr;
}

.envelope-reference-grid{
  grid-template-columns:178px minmax(430px,1fr) minmax(286px,340px);
  min-height:560px;
}

.envelope-reference-grid .envelope-object-list{
  grid-column:1;
  grid-row:1;
}

.envelope-model-stage{
  grid-column:2;
  grid-row:1;
  min-height:560px;
  padding:20px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:12px;
  border-right:1px solid #e5ebf2;
  position:relative;
  overflow:hidden;
}

.envelope-model-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 26%,rgba(218,229,239,.72),transparent 34%),
    linear-gradient(180deg,#f8fbfc 0 58%,#e7f0ea 59% 100%);
  z-index:0;
}

.facade-model{
  width:min(94%,500px);
  aspect-ratio:1 / 1.05;
  position:relative;
  z-index:1;
  filter:drop-shadow(24px 24px 0 rgba(45,70,90,.10));
}

.facade-roof{
  position:absolute;
  inset:4% 5% auto;
  height:27%;
  background:#394a5e;
  clip-path:polygon(8% 100%,50% 8%,92% 100%);
  box-shadow:0 12px 0 #a8bac8 inset;
}

.facade-wall{
  position:absolute;
  left:16%;
  right:16%;
  top:27%;
  bottom:12%;
  border:2px solid #2c3c50;
  background:#f8fbfd;
}

.facade-window,
.facade-door,
.facade-highlight{
  position:absolute;
  border:2px solid #7a91a7;
  background:#d7e8f3;
}

.facade-window.left{left:24%;top:39%;width:18%;height:18%}
.facade-window.right{right:24%;top:39%;width:18%;height:18%}
.facade-door{left:44%;bottom:12%;width:15%;height:28%;background:#e6c491}
.facade-highlight{
  left:20%;
  right:20%;
  top:34%;
  height:34%;
  border-color:#1769c2;
  background:rgba(23,105,194,.07);
}

.model-caption{
  position:relative;
  z-index:1;
  color:#526274;
  font-size:12px;
  font-weight:900;
}

.envelope-reference-grid .envelope-panel{
  grid-column:3;
  grid-row:1;
  padding:16px;
  align-content:start;
}

.system-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border-bottom:1px solid #dfe7f0;
  padding-bottom:8px;
}

.system-tabs span{
  min-height:34px;
  display:inline-grid;
  place-items:center;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:5px;
  color:#526274;
  font-size:13px;
  font-weight:900;
}

.system-tabs .active{
  border-color:#b8d3ee;
  background:#eaf3ff;
  color:#0e58a8;
}

.systems-reference-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(238px,.72fr) minmax(238px,.72fr);
  gap:12px;
}

.systems-reference-grid .system-flow-card{
  grid-column:1 / 3;
  min-height:430px;
}

.systems-reference-grid .equipment-panel{
  min-height:260px;
}

.equipment-flow{
  min-height:184px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(88px,.8fr) minmax(126px,1fr) minmax(150px,1.1fr);
  align-items:center;
  gap:20px;
  padding:18px;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(247,251,253,.92)),
    radial-gradient(circle at 55% 45%,rgba(23,105,194,.08),transparent 40%);
}

.equipment-flow::before{
  content:"";
  position:absolute;
  left:15%;
  right:18%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,#b72c25,#dc3b31,#1769c2);
  z-index:0;
}

.equipment-flow.compact::before{
  background:#1769c2;
}

.flow-source,
.flow-node,
.flow-split span{
  position:relative;
  z-index:1;
  border-radius:6px;
  box-shadow:0 8px 20px rgba(31,49,70,.06);
}

.flow-split{
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}

.flow-source,
.flow-node{
  min-height:82px;
  display:grid;
  place-items:center;
  padding:12px;
  border:1px solid #d4e0ec;
  background:#fff;
  color:#17304a;
  font-weight:900;
  text-align:center;
}

.flow-split span{
  min-height:54px;
  display:grid;
  place-items:center;
  border:1px solid #d4e0ec;
  background:#fff;
  color:#17304a;
  font-weight:900;
}

.energy-source-node::before,
.generator-node::before{
  content:"";
  width:28px;
  height:28px;
  margin-bottom:4px;
  display:block;
  border:2px solid currentColor;
  border-radius:4px;
}

.generator-node::before{
  border-radius:50% 50% 4px 4px;
  background:linear-gradient(180deg,transparent 0 48%,currentColor 49% 52%,transparent 53%);
}

.flow-split span:first-child{
  border-color:#c6d8e9;
  background:#f4f8fb;
}

.flow-split span:last-child{
  border-color:#d8c7a6;
  background:#fff8eb;
}

.scenario-reference-grid{
  display:grid;
  grid-template-columns:216px minmax(0,1fr) minmax(260px,304px);
  gap:12px;
}

.scenario-sidebar,
.scenario-metrics{
  padding:14px;
  background:#fff;
  display:grid;
  gap:12px;
  align-content:start;
}

.scenario-builder{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  grid-template-columns:1fr;
}

.scenario-visual-comparison{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.scenario-house-card{
  min-height:470px;
  border:1px solid #dfe7f0;
  border-radius:6px;
  padding:18px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  text-align:center;
  overflow:hidden;
}

.scenario-house-card .scenario-house{
  width:clamp(160px,72%,230px);
}

.scenario-house::before{
  left:22%;
  bottom:22%;
  width:54%;
  height:46%;
  box-shadow:24px 13px 0 #e6edf4;
}

.scenario-house::after{
  left:14%;
  bottom:64%;
  width:74%;
  height:33%;
}

.scenario-metrics .comparison-table{
  min-width:100%;
  table-layout:fixed;
  font-size:12px;
}

.scenario-metrics .comparison-table th,
.scenario-metrics .comparison-table td{
  padding:10px 8px;
  overflow-wrap:anywhere;
}

.scenario-house-card span{
  color:#64758b;
  font-size:12px;
  font-weight:900;
}

.scenario-house-card strong{
  color:#06264b;
  font-size:18px;
}

.scenario-house.improved::before{
  box-shadow:36px 18px 0 #dcece1;
}

.scenario-arrow{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #dbe5f0;
  border-radius:50%;
  background:#fff;
  color:#1769c2;
  font-weight:900;
}

.results-reference-grid{
  display:grid;
  grid-template-columns:226px minmax(0,1fr) 226px;
  gap:12px;
  align-items:start;
}

.result-status-panel,
.result-actions-panel{
  padding:14px;
  background:#fff;
  display:grid;
  gap:12px;
}

.classification-boundary{
  display:grid;
  gap:5px;
  padding:12px;
  border:1px dashed #cfd9e5;
  border-radius:6px;
  background:#f8fafc;
}

.classification-boundary strong{
  color:#06264b;
}

.classification-boundary span{
  color:#64758b;
  font-size:12px;
}

.result-energy-center{
  display:grid;
  gap:12px;
}

.product-results{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.result-card.hero-metric{
  background:#0e58a8;
}

.service-donut-card .bar-chart:not(.empty){
  min-height:180px;
  padding:18px;
  border-radius:50%;
  border:26px solid #d8ecf7;
  place-content:center;
}

.document-grid.product-documents{
  gap:14px;
}

.document-grid.product-documents article{
  min-height:190px;
}

@media(max-width:1240px){
  .workspace-shell.product-studio{
    grid-template-columns:1fr;
  }
  .product-studio .workspace-rail{
    position:static;
    min-height:0;
    grid-template-rows:auto auto;
  }
  .rail-group-label,
  .readiness-card{
    display:none;
  }
  .product-studio .workspace-nav{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .location-reference-grid,
  .building-reference-grid,
  .envelope-reference-grid,
  .systems-reference-grid,
  .scenario-reference-grid,
  .results-reference-grid{
    grid-template-columns:1fr;
  }
  .location-reference-grid{
    grid-template-areas:"side" "map" "climate";
  }
  .location-controls,
  .climate-inspector{
    position:static;
  }
  .location-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .building-reference-grid .visual-card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .building-reference-grid .building-type-card{
    min-height:102px;
    grid-template-columns:1fr;
  }
  .building-reference-grid .building-type-card .building-silhouette,
  .building-reference-grid .building-type-card strong,
  .building-reference-grid .building-type-card small{
    grid-column:auto;
    grid-row:auto;
  }
  .envelope-reference-grid .envelope-object-list,
  .envelope-model-stage,
  .envelope-reference-grid .envelope-panel{
    grid-column:auto;
    grid-row:auto;
  }
  .systems-reference-grid .system-flow-card{
    grid-column:auto;
  }
  .scenario-visual-comparison{
    grid-template-columns:1fr;
  }
  .scenario-arrow{
    justify-self:center;
    transform:rotate(90deg);
  }
}

@media(max-width:820px){
  .reference-topbar{
    display:grid;
  }
  .topbar-actions{
    flex-wrap:wrap;
  }
  .topbar-model-chip{
    min-width:0;
    flex:1 1 130px;
  }
  .project-overview-panel,
  .overview-reference-grid{
    grid-template-columns:1fr;
  }
  .overview-building-visual{
    min-height:230px;
  }
  .reference-summary-strip,
  .product-results,
  .charts-grid{
    grid-template-columns:1fr;
  }
  .building-reference-grid .visual-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .building-visual-stage{
    grid-template-rows:auto auto;
  }
  .building-visual-context,
  .envelope-model-stage,
  .scenario-house-card{
    min-height:320px;
  }
  .location-controls{
    grid-template-columns:1fr;
  }
  .climate-map{
    min-height:520px;
  }
}

@media(max-width:430px){
  .workspace-main{
    padding:10px;
  }
  .workspace-section,
  .workspace-section.active,
  .section-title,
  .reference-screen,
  .system-tabs,
  .systems-reference-grid,
  .system-card{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .product-studio .workspace-nav{
    grid-template-columns:1fr 1fr;
  }
  .product-studio .workspace-nav button{
    font-size:12px;
  }
  .step-heading{
    align-items:flex-start;
  }
  .topbar-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .topbar-user-dot{
    display:none;
  }
  .project-overview-panel{
    padding:18px;
  }
  .project-overview-panel h2{
    font-size:23px;
  }
  .climate-map{
    min-height:430px;
  }
  .equipment-flow,
  .equipment-flow.compact{
    grid-template-columns:1fr;
    gap:10px;
    min-height:auto;
    padding:12px;
  }
  .equipment-flow::before,
  .equipment-flow.compact::before{
    display:none;
  }
  .flow-source,
  .flow-node,
  .flow-split span{
    min-height:48px;
  }
  .flow-split{
    gap:8px;
  }
  .building-reference-grid .visual-card-grid{
    grid-template-columns:1fr;
  }
  .building-silhouette.large{
    width:220px;
    height:170px;
  }
  .scenario-house-card{
    min-height:280px;
  }
  .reference-house,
  .scenario-house{
    width:210px;
    height:160px;
  }
}