:root {
  --iv-ink: #02080c;
  --iv-nav: #061218;
  --iv-panel: #0a1c23;
  --iv-panel-2: #102a33;
  --iv-line: rgba(135, 180, 191, 0.24);
  --iv-text: #eef7f8;
  --iv-muted: #9eb7bd;
  --iv-lime: #b5e342;
  --iv-cyan: #65dff3;
  --iv-teal: #119cb7;
  --iv-sand: #f3b558;
  --iv-danger: #f07d70;
  --iv-paper: #f1f6f5;
  --iv-paper-ink: #0b242d;
  --iv-shadow: 0 20px 54px rgba(0, 0, 0, 0.26);
}

* { box-sizing: border-box; }

html { background: var(--iv-ink); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--iv-text);
  background:
    radial-gradient(circle at 85% 7%, rgba(12, 161, 190, 0.19), transparent 26rem),
    radial-gradient(circle at 5% 35%, rgba(181, 227, 66, 0.12), transparent 26rem),
    var(--iv-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.solar-app {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.solar-app::before {
  content: "";
  pointer-events: none;
  position: fixed;
  z-index: 0;
  inset: -22vw -16vw auto auto;
  width: 76vw;
  height: 76vw;
  opacity: 0.42;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 28px, rgba(101, 223, 243, 0.13) 29px 30px, transparent 31px 50px);
  transform: rotate(-12deg);
  animation: solar-topo 28s linear infinite alternate;
}

@keyframes solar-topo {
  from { transform: rotate(-12deg) translate3d(0, 0, 0); }
  to { transform: rotate(-6deg) translate3d(-3%, 3%, 0); }
}

.app-nav,
.app-main,
.app-footer {
  position: relative;
  z-index: 1;
}

.app-nav {
  min-height: 72px;
  padding: 0 clamp(18px, 5vw, 76px);
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(137, 182, 192, 0.18);
  background: rgba(2, 8, 12, 0.83);
  backdrop-filter: blur(16px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: white;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 900;
}

.brand-lockup::before {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  clip-path: polygon(50% 0, 92% 23%, 92% 75%, 50% 100%, 8% 75%, 8% 23%);
  background: linear-gradient(135deg, var(--iv-lime), var(--iv-cyan));
  box-shadow: 0 0 22px rgba(181, 227, 66, 0.6);
}

.brand-lockup span { color: var(--iv-lime); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--iv-muted);
}

.nav-links a:hover { color: var(--iv-lime); }

.nav-links .nav-admin {
  padding: 9px 12px;
  color: var(--iv-text);
  border: 1px solid rgba(101, 223, 243, 0.5);
  border-radius: 999px;
}

.nav-links .nav-admin:hover {
  border-color: var(--iv-lime);
  background: rgba(181, 227, 66, 0.1);
}

.app-main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 52px clamp(18px, 5vw, 76px) 76px;
}

.eyebrow {
  margin: 0 0 11px;
  color: var(--iv-lime);
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.17em;
  font-weight: 850;
}

.page-heading {
  max-width: 940px;
  margin-bottom: 34px;
}

.page-heading h1 {
  max-width: 880px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.55rem, 6vw, 5.6rem);
  line-height: 0.93;
  letter-spacing: -0.065em;
}

.page-heading h1 em {
  color: var(--iv-cyan);
  font-style: normal;
}

.page-heading .lead {
  max-width: 720px;
  margin: 21px 0 0;
  color: #c2d8dd;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.68;
}

.interface-layout {
  display: grid;
  grid-template-columns: minmax(370px, 0.92fr) minmax(0, 1.25fr);
  gap: 22px;
  align-items: start;
}

.roof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.78fr);
  gap: 22px;
  align-items: start;
}

.viewer-card-inner { padding-bottom: 18px; }
.viewer-card .surface-heading { gap: 22px; }
.roof-viewer-frame {
  width: 100%;
  height: min(64vw, 700px);
  min-height: 460px;
  margin-top: 20px;
  display: block;
  border: 1px solid rgba(101, 223, 243, 0.22);
  border-radius: 12px;
  background: #061218;
}
.viewer-caption { margin: 11px 0 0; color: var(--iv-muted); font-size: 0.78rem; line-height: 1.5; }
.roof-controls { position: sticky; top: 18px; }
.full-width { width: 100%; justify-content: center; }
.layout-result, .pvgis-summary { margin-top: 22px; }
.compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-metrics .metric { min-height: 130px; }
.compact-metrics .metric strong { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.calculation-note {
  margin: 12px 0 0;
  color: #b9d0d4;
  font-size: 0.8rem;
  line-height: 1.58;
}
.verified-shadow {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(243, 181, 88, 0.38);
  border-radius: 14px;
  background: rgba(243, 181, 88, 0.075);
}
.verified-shadow .eyebrow { margin-bottom: 7px; color: var(--iv-sand); }
.verified-shadow h3 { margin: 0; color: #fff5df; font-size: 1rem; }
.verified-shadow p:last-child { margin: 8px 0 0; color: #e0cda6; font-size: 0.83rem; line-height: 1.58; }
.solar-query { margin-top: 22px; }
.monthly-inline { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--iv-line); }
.monthly-inline h3 { margin: 0 0 12px; color: #fff; font-size: 1rem; }
.monthly-output { display: flex; flex-wrap: wrap; gap: 8px; }
.monthly-output span { padding: 7px 9px; color: #d9f5f8; border: 1px solid rgba(101, 223, 243, 0.28); border-radius: 8px; background: rgba(101, 223, 243, 0.06); font-size: 0.75rem; font-weight: 700; }

.surface {
  border: 1px solid var(--iv-line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13, 37, 45, 0.97), rgba(5, 17, 22, 0.97));
  box-shadow: var(--iv-shadow);
}

.surface-inner { padding: clamp(20px, 2.8vw, 34px); }

.surface-heading {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--iv-line);
}

.surface-heading h2,
.surface-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 1.22rem;
  letter-spacing: -0.025em;
}

.surface-heading p {
  margin: 6px 0 0;
  color: var(--iv-muted);
  font-size: 0.87rem;
  line-height: 1.55;
}

.pvgis-tag {
  flex: none;
  padding: 7px 9px;
  color: #b7f0fa;
  border: 1px solid rgba(101, 223, 243, 0.38);
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 850;
}

.form-stack {
  display: grid;
  gap: 18px;
  padding-top: 21px;
}

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

.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.one { grid-template-columns: 1fr; }

.field {
  display: grid;
  gap: 7px;
}

.field label,
.field-label {
  color: #dceef0;
  font-size: 0.79rem;
  font-weight: 760;
  line-height: 1.3;
}

.field small,
.hint {
  color: #89a8af;
  font-size: 0.72rem;
  line-height: 1.45;
}

.field input,
.field select,
.field textarea,
.address-row input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #f3ffff;
  outline: none;
  border: 1px solid rgba(135, 180, 191, 0.32);
  border-radius: 11px;
  background: rgba(0, 11, 15, 0.64);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea { min-height: 112px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.address-row input:focus {
  border-color: var(--iv-cyan);
  box-shadow: 0 0 0 3px rgba(101, 223, 243, 0.12);
}

.field select { cursor: pointer; }

.address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.button {
  appearance: none;
  min-height: 44px;
  padding: 11px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-weight: 850;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.button:hover { transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(101, 223, 243, 0.5); outline-offset: 3px; }
.button:disabled { cursor: wait; transform: none; opacity: 0.58; }

.button.primary {
  color: #061218;
  background: linear-gradient(135deg, var(--iv-lime), #d3ee73);
  box-shadow: 0 12px 28px rgba(181, 227, 66, 0.18);
}

.button.secondary {
  color: #dffafd;
  border-color: rgba(101, 223, 243, 0.48);
  background: rgba(101, 223, 243, 0.08);
}

.button.ghost {
  color: #d8f1f4;
  border-color: rgba(135, 180, 191, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

.button.danger {
  color: #ffe7e3;
  border-color: rgba(240, 125, 112, 0.56);
  background: rgba(240, 125, 112, 0.1);
}

.button.small {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 0.69rem;
}

.search-results {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

.search-result {
  width: 100%;
  padding: 9px 10px;
  color: #d9f1f4;
  text-align: left;
  border: 1px solid rgba(135, 180, 191, 0.22);
  border-radius: 9px;
  background: rgba(2, 12, 16, 0.62);
  cursor: pointer;
  font-size: 0.77rem;
  line-height: 1.35;
}

.search-result:hover {
  border-color: rgba(101, 223, 243, 0.65);
  background: rgba(101, 223, 243, 0.09);
}

.map-wrap {
  overflow: hidden;
  border: 1px solid rgba(135, 180, 191, 0.28);
  border-radius: 13px;
  background: #0a1a20;
}

.map-canvas {
  width: 100%;
  height: 235px;
  background:
    linear-gradient(135deg, rgba(101, 223, 243, 0.15), transparent),
    #0a1a20;
}

.map-note {
  padding: 10px 12px;
  color: #a8c4ca;
  border-top: 1px solid rgba(135, 180, 191, 0.18);
  background: rgba(4, 16, 21, 0.78);
  font-size: 0.75rem;
}

.calculate-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 3px;
}

.calculate-row .button { flex: 1 1 220px; }

.form-note {
  margin: 0;
  color: #9db7bd;
  font-size: 0.74rem;
  line-height: 1.55;
}

.result-panel {
  min-height: 750px;
  padding: clamp(20px, 2.8vw, 34px);
  position: relative;
}

.result-placeholder {
  min-height: 620px;
  padding: 32px;
  display: grid;
  align-content: center;
  gap: 15px;
  text-align: center;
  color: var(--iv-muted);
  border: 1px dashed rgba(135, 180, 191, 0.3);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 34%, rgba(101, 223, 243, 0.14), transparent 11rem),
    rgba(2, 13, 17, 0.46);
}

.result-placeholder .sun-orb {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff9cf, var(--iv-sand) 38%, #ec9237 67%, transparent 69%);
  box-shadow: 0 0 0 16px rgba(243, 181, 88, 0.08), 0 0 52px rgba(243, 181, 88, 0.38);
}

.result-placeholder h2 {
  margin: 0;
  color: #eaffff;
  font-size: 1.38rem;
}

.result-placeholder p {
  max-width: 420px;
  margin: 0 auto;
  font-size: 0.94rem;
  line-height: 1.65;
}

.results-content[hidden],
.result-placeholder[hidden] { display: none; }

.result-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--iv-line);
}

.result-meta strong { color: white; font-size: 1rem; }
.result-meta .coordinates { color: var(--iv-muted); font-size: 0.76rem; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.metric {
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(135, 180, 191, 0.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(15, 44, 53, 0.76), rgba(6, 21, 27, 0.86));
}

.metric .metric-label {
  display: block;
  color: #99bbc1;
  font-size: 0.66rem;
  line-height: 1.35;
  letter-spacing: 0.095em;
  font-weight: 800;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 15px;
  color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.metric .metric-unit,
.metric .metric-detail {
  display: block;
  margin-top: 7px;
  color: #a9c7cc;
  font-size: 0.74rem;
  line-height: 1.35;
}

.result-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--iv-line);
}

.result-section h3 {
  margin: 0 0 13px;
  color: #efffff;
  font-size: 1rem;
}

.orientation-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(101, 223, 243, 0.26);
  border-radius: 13px;
  background: rgba(101, 223, 243, 0.07);
}

.orientation-compass {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(101, 223, 243, 0.54);
  border-radius: 50%;
  color: var(--iv-cyan);
  font-weight: 900;
  background: radial-gradient(circle, rgba(101, 223, 243, 0.18), transparent 65%);
}

.orientation-card strong { display: block; color: #f3ffff; }
.orientation-card p { margin: 5px 0 0; color: #b6d2d6; font-size: 0.81rem; line-height: 1.5; }

.monthly-table {
  width: 100%;
  border-collapse: collapse;
  color: #dff2f3;
  font-size: 0.79rem;
}

.monthly-table th,
.monthly-table td {
  padding: 10px 7px;
  border-bottom: 1px solid rgba(135, 180, 191, 0.17);
  text-align: left;
}

.monthly-table th {
  color: #8fb1b7;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bar-cell { width: 57%; }
.energy-bar { height: 7px; border-radius: 999px; background: rgba(101, 223, 243, 0.13); overflow: hidden; }
.energy-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--iv-teal), var(--iv-lime)); }

.sun-path {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(243, 181, 88, 0.34);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(55, 42, 18, 0.35), rgba(7, 19, 24, 0.8));
}

.sun-path-header {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sun-path-header h3 { margin: 0; color: #fff6de; font-size: 1rem; }
.sun-path-header p { margin: 5px 0 0; color: #d9cda9; font-size: 0.76rem; }

.sun-visual {
  height: 184px;
  position: relative;
  overflow: hidden;
  margin-top: 15px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(101, 223, 243, 0.16), transparent 66%),
    linear-gradient(0deg, rgba(18, 47, 43, 0.78) 0 30%, transparent 30%);
}

.sun-arc {
  position: absolute;
  width: min(88%, 440px);
  height: 230px;
  left: 50%;
  bottom: 13px;
  border: 1px dashed rgba(243, 181, 88, 0.62);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}

.sun-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  bottom: 31px;
  border-radius: 50%;
  background: #fff7bf;
  box-shadow: 0 0 0 7px rgba(243, 181, 88, 0.16), 0 0 28px rgba(243, 181, 88, 0.8);
  transform: translate(-50%, 0);
  transition: left 0.18s ease, bottom 0.18s ease, opacity 0.18s ease;
}

.sun-horizon-label {
  position: absolute;
  bottom: 9px;
  color: #b9d6da;
  font-size: 0.65rem;
  font-weight: 800;
}
.sun-horizon-label.east { left: 10px; }
.sun-horizon-label.west { right: 10px; }

.sun-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.43fr);
  gap: 13px;
  align-items: end;
  margin-top: 15px;
}

.range-field { display: grid; gap: 7px; }
.range-field input { width: 100%; accent-color: var(--iv-lime); }
.sun-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sun-readout div {
  padding: 10px;
  border: 1px solid rgba(243, 181, 88, 0.27);
  border-radius: 9px;
  background: rgba(2, 12, 15, 0.42);
}
.sun-readout span { display: block; color: #c4b98f; font-size: 0.63rem; letter-spacing: 0.08em; font-weight: 800; }
.sun-readout strong { display: block; margin-top: 4px; color: #fff6de; font-size: 0.92rem; }

.disclaimer {
  margin: 20px 0 0;
  padding: 13px 14px;
  color: #f2ddbf;
  border-left: 3px solid var(--iv-sand);
  border-radius: 0 10px 10px 0;
  background: rgba(243, 181, 88, 0.1);
  font-size: 0.79rem;
  line-height: 1.55;
}

.error-message,
.notice-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.error-message {
  color: #ffd8d2;
  border: 1px solid rgba(240, 125, 112, 0.44);
  background: rgba(240, 125, 112, 0.12);
}

.notice-message {
  color: #dff3f5;
  border: 1px solid rgba(101, 223, 243, 0.32);
  background: rgba(101, 223, 243, 0.09);
}

.app-footer {
  padding: 25px clamp(18px, 5vw, 76px);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: #819ca2;
  border-top: 1px solid rgba(135, 180, 191, 0.16);
  font-size: 0.7rem;
}

/* Private workspace */
.admin-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-project-list {
  overflow: hidden;
  padding: 0;
}

.admin-project-list .surface-heading { padding: 20px; }

.project-list {
  max-height: 680px;
  overflow: auto;
}

.project-list-item {
  width: 100%;
  padding: 15px 19px;
  display: grid;
  gap: 6px;
  color: #e3f3f5;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(135, 180, 191, 0.16);
  background: transparent;
  cursor: pointer;
}

.project-list-item:hover,
.project-list-item[aria-current="true"] {
  background: rgba(101, 223, 243, 0.1);
  box-shadow: inset 3px 0 var(--iv-lime);
}

.project-list-item strong { font-size: 0.91rem; }
.project-list-item span { color: #98bbc1; font-size: 0.72rem; line-height: 1.35; }

.status {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(181, 227, 66, 0.35);
  border-radius: 999px;
  color: #dff5a0;
  background: rgba(181, 227, 66, 0.08);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  font-weight: 850;
}

.status.delivered {
  color: #aff3ff;
  border-color: rgba(101, 223, 243, 0.48);
  background: rgba(101, 223, 243, 0.1);
}

.workspace-card { min-width: 0; }

.workspace-card .surface-heading {
  align-items: center;
}

.workspace-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-card form { padding: 23px; }

.form-section {
  margin-top: 25px;
  padding-top: 22px;
  border-top: 1px solid var(--iv-line);
}

.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.form-section-heading {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.form-section-heading h3 {
  margin: 0;
  color: #efffff;
  font-size: 1rem;
}

.form-section-heading p {
  margin: 0;
  color: #91b2b8;
  font-size: 0.73rem;
}

.admin-preview {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid rgba(101, 223, 243, 0.26);
  border-radius: 13px;
  background: rgba(2, 12, 16, 0.55);
}

.admin-preview header {
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c6e6e9;
  border-bottom: 1px solid rgba(101, 223, 243, 0.17);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-preview iframe {
  width: 100%;
  height: 310px;
  display: block;
  border: 0;
  background: #061218;
}

.embed-fallback {
  padding: 18px;
  color: #afd0d4;
  text-align: center;
  font-size: 0.8rem;
}

.embed-fallback .button { margin-top: 10px; }

.publish-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d5edf0;
  font-size: 0.75rem;
}

.publish-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7e9195;
}

.publish-state.is-published::before {
  background: var(--iv-lime);
  box-shadow: 0 0 12px rgba(181, 227, 66, 0.8);
}

/* Client report */
.report-shell { max-width: 1040px; margin: 0 auto; }
.report-hero {
  padding: clamp(28px, 6vw, 70px);
  border: 1px solid var(--iv-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 14%, rgba(243, 181, 88, 0.2), transparent 18rem),
    linear-gradient(145deg, rgba(15, 47, 55, 0.92), rgba(5, 16, 21, 0.98));
  box-shadow: var(--iv-shadow);
}

.report-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 4.9rem);
  letter-spacing: -0.065em;
  line-height: 0.93;
}

.report-hero p {
  max-width: 700px;
  margin: 17px 0 0;
  color: #c5dcdf;
  line-height: 1.65;
}

.report-status-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

.report-section {
  margin-top: 18px;
  padding: clamp(22px, 3vw, 34px);
}

.report-section h2 {
  margin: 0 0 16px;
  color: #f4ffff;
  font-size: 1.25rem;
}

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

.report-data {
  padding: 14px;
  border: 1px solid rgba(135, 180, 191, 0.21);
  border-radius: 12px;
  background: rgba(2, 13, 17, 0.42);
}

.report-data span {
  display: block;
  color: #94b4ba;
  font-size: 0.66rem;
  letter-spacing: 0.085em;
  font-weight: 800;
  text-transform: uppercase;
}

.report-data strong {
  display: block;
  margin-top: 7px;
  color: #ebfbfc;
  font-size: 1.02rem;
  line-height: 1.35;
}

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

.resource-link {
  min-height: 72px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(101, 223, 243, 0.27);
  border-radius: 12px;
  color: #dcf7fa;
  background: rgba(101, 223, 243, 0.07);
}

.resource-link:hover {
  border-color: var(--iv-lime);
  background: rgba(181, 227, 66, 0.09);
}

.resource-link::before {
  content: "↗";
  color: var(--iv-lime);
  font-size: 1.2rem;
  font-weight: 900;
}

.resource-link span {
  color: #e6fbfc;
  font-size: 0.84rem;
  font-weight: 780;
}

.recommendation {
  color: #eafafb;
  font-size: 1rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

.viewer-frame {
  width: 100%;
  height: min(58vw, 580px);
  min-height: 320px;
  display: block;
  border: 0;
  background: #061218;
}

.report-empty {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 30px;
  text-align: center;
}

.report-empty h1 { margin: 0; font-size: 2rem; }
.report-empty p { max-width: 520px; color: #afcbd0; line-height: 1.65; }

@media (max-width: 1080px) {
  .interface-layout { grid-template-columns: 1fr; }
  .roof-layout { grid-template-columns: 1fr; }
  .roof-controls { position: static; }
  .result-panel { min-height: 0; }
  .result-placeholder { min-height: 320px; }
  .admin-layout { grid-template-columns: 1fr; }
  .project-list { max-height: 280px; }
}

@media (max-width: 700px) {
  .app-nav { min-height: 64px; }
  .nav-links { gap: 11px; font-size: 0.69rem; }
  .nav-links a:not(.nav-admin) { display: none; }
  .app-main { padding-top: 34px; }
  .field-grid,
  .field-grid.three,
  .metric-grid,
  .report-grid,
  .resource-list { grid-template-columns: 1fr; }
  .address-row { grid-template-columns: 1fr; }
  .map-canvas { height: 250px; }
  .sun-controls { grid-template-columns: 1fr; }
  .sun-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-footer { flex-direction: column; }
  .workspace-card form { padding: 18px; }
  .workspace-actions { width: 100%; }
  .workspace-actions .button { flex: 1; }
  .viewer-frame { height: 420px; }
  .roof-viewer-frame { height: 440px; min-height: 0; }
  .compact-metrics { grid-template-columns: 1fr; }
  .viewer-card .surface-heading { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .solar-app::before { animation: none; }
  .button { transition: none; }
}