.solar-panel[hidden] { display: none !important; }

.solar-panel {
  position: absolute;
  z-index: 920;
  top: 14px;
  left: 14px;
  width: min(360px, calc(100% - 90px));
  max-height: calc(100% - 28px);
  overflow: auto;
  border: 1px solid rgba(222, 216, 204, .96);
  border-radius: 15px;
  background: rgba(255, 253, 248, .97);
  color: #172d24;
  box-shadow: 0 16px 44px rgba(23, 45, 36, .25);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans, Inter, Arial, sans-serif);
}

.solar-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid #e4ddd1;
  background: linear-gradient(135deg, #fff9e8, #fffdf8);
}

.solar-panel.is-collapsed {
  width: min(242px, calc(100% - 90px));
  overflow: hidden;
}

.solar-panel.is-collapsed .solar-status,
.solar-panel.is-collapsed .solar-controls {
  display: none !important;
}

.solar-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.solar-collapse {
  width: 32px;
  height: 32px;
  border: 1px solid #d9d1c5;
  border-radius: 9px;
  color: #172d24;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.solar-panel header small,
.solar-panel header h3 { display: block; margin: 0; }
.solar-panel header small {
  color: #9b641f;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 8px;
  font-weight: 850;
}
.solar-panel header h3 { margin-top: 3px; font-size: 17px; }

.solar-play {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 50%;
  background: #f2b64d;
  color: #172d24;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.solar-status {
  margin: 12px 14px 0;
  border-radius: 9px;
  background: #f3efe6;
  color: #59665f;
  padding: 9px 11px;
  font-size: 10px;
  line-height: 1.45;
}
.solar-status[data-kind="loading"] { color: #7a531a; background: #fff4d9; }
.solar-status[data-kind="success"] { color: #285c45; background: #eaf5ef; }
.solar-status[data-kind="error"] { color: #9c2e29; background: #ffefed; }

.solar-controls { padding: 12px 14px 15px; }
.solar-controls > label > span,
.solar-hour-control > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #5d6b64;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 8px;
  font-weight: 850;
}
.solar-controls input[type="date"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d9d1c5;
  border-radius: 8px;
  background: #fff;
  color: #172d24;
  padding: 7px 9px;
  font-size: 11px;
}

.solar-season-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 7px 0 13px;
}
.solar-season-buttons button {
  border: 1px solid #dfd4c2;
  border-radius: 8px;
  background: #fff;
  color: #6c4a1a;
  padding: 7px 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.solar-season-buttons button:hover { background: #fff4d9; }

.solar-hour-control { display: block; }
.solar-hour-control input { width: 100%; accent-color: #d28b21; }

.solar-dayline {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 12px;
  color: #6b756f;
  font-size: 9px;
}

.solar-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.solar-kpis > span {
  border: 1px solid #e5ddcf;
  border-radius: 9px;
  background: #fff;
  padding: 9px;
}
.solar-kpis small,
.solar-kpis b { display: block; }
.solar-kpis small {
  color: #748079;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 850;
}
.solar-kpis b { margin-top: 4px; font-size: 13px; }

.solar-facades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.solar-facades > span {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #f1eee7;
  padding: 8px 9px 10px;
}
.solar-facades small,
.solar-facades b { position: relative; z-index: 1; display: block; }
.solar-facades small { color: #66736c; font-size: 8px; }
.solar-facades b { margin-top: 3px; font-size: 12px; }
.solar-facades i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--solar-width);
  height: 4px;
  background: linear-gradient(90deg, #e49a27, #f6ca58);
}

.solar-seasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.solar-seasons span {
  text-align: center;
  border-radius: 8px;
  background: #173127;
  color: #fff;
  padding: 7px 3px;
}
.solar-seasons small,
.solar-seasons b { display: block; }
.solar-seasons small { color: #d8e3de; font-size: 7px; }
.solar-seasons b { margin-top: 3px; font-size: 9px; }

.solar-map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin-top: 11px;
  color: #606d66;
  font-size: 8px;
}
.solar-map-key span { display: flex; align-items: center; gap: 5px; }
.solar-map-key i {
  width: 12px;
  height: 5px;
  border-radius: 5px;
}
.solar-key-lit { background: #f59e0b; }
.solar-key-blocked { background: #7c3aed; }
.solar-key-shadow { background: rgba(37, 49, 61, .45); }

.solar-panel details {
  margin-top: 12px;
  border-top: 1px solid #e6dfd4;
  padding-top: 10px;
}
.solar-panel summary {
  cursor: pointer;
  color: #76501c;
  font-size: 9px;
  font-weight: 850;
}
.solar-panel details p {
  margin: 7px 0 0;
  color: #657169;
  font-size: 9px;
  line-height: 1.5;
}

.study-summary-grid article[data-solar-summary]::before {
  background: linear-gradient(#f5b63c, #d97706);
}

@media (max-width: 640px) {
  .solar-panel {
    top: auto;
    bottom: 14px;
    left: 12px;
    width: calc(100% - 24px);
    max-height: 64%;
  }
  .solar-panel > header { position: sticky; top: 0; z-index: 2; }
}