:root{
  --bg0:#ffffff;
  --bg1:#f6f8fc;
  --bg2:#eef3ff;

  --surface0:#ffffff;
  --border0: rgba(15, 23, 42, .10);
  --border1: rgba(15, 23, 42, .14);

  --text: rgba(15, 23, 42, .92);
  --muted: rgba(15, 23, 42, .62);
  --muted2: rgba(15, 23, 42, .45);

  --accent: #3B5BFF;
  --accent2:#2563EB;

  --danger:#EF4444;
  --warn:#F59E0B;
  --ok:#22C55E;

  --shadow2: 0 10px 26px rgba(15, 23, 42, .08);
  --radius: 18px;
}

[hidden]{
  display:none !important;
}

*{ box-sizing:border-box; }
html{ min-height: 100%; background: var(--bg1); }
body{ min-height: 100%; margin:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(59,91,255,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}

#appRoot[hidden]{
  display:none;
}
.login-screen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% -10%, rgba(59,91,255,.04), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(37,99,235,.06), transparent 50%),
    radial-gradient(circle at 50% 120%, rgba(15,23,42,.45), rgba(15,23,42,.85));
  z-index:9999;
  backdrop-filter: blur(4px);
}
.login-card{
  width:min(420px,100%);
  background:rgba(255,255,255,0.92);
  border-radius:22px;
  padding:32px 28px;
  border:1px solid rgba(15,23,42,.15);
  box-shadow:0 30px 60px rgba(15,23,42,.25);
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:center;
}
.login-logo{
  width:64px;
  height:auto;
  margin:0 auto;
  display:block;
}
.login-copy h1{
  margin:0;
  font-size:24px;
  letter-spacing:-0.02em;
}
.login-copy p{
  margin:4px 0;
  color:var(--muted);
}
.login-mode{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  padding: 6px;
}
.login-mode-btn{
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.login-mode-btn.is-active{
  background: rgba(255,255,255,.95);
  color: rgba(15, 23, 42, .92);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
}
.login-note{
  font-size:14px;
  color:var(--muted2);
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
}
.login-form label{
  font-size:12px;
  color:var(--muted);
}
.login-form input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.login-form button{
  width:100%;
}
#signupConfirmWrap{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.login-hint{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  opacity:.8;
}

.wrap{
  width: min(1800px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 22px 12px 24px;
}

header{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 18px;
}

.headerActions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.headerActionBtn{
  min-height: 34px;
  padding: 8px 14px;
  font-size: 13px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}
.logo{
  width: 150px;
  height: auto;
  display:block;
}
.brand h1{
  font-size: 20px;
  margin:0;
  letter-spacing:-0.02em;
}
.brand p{
  margin:2px 0 0;
  color: var(--muted2);
  font-size: 12.5px;
}

.card{
  background: var(--surface0);
  border: 1px solid var(--border0);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.topbar{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
}
@media (max-width: 980px){
  .topbar{ flex-direction: column; align-items: stretch; }
}

.controls{
  display:grid;
  grid-template-columns: 1.2fr .7fr .7fr .7fr auto;
  gap: 12px;
  align-items:end;
  width: 100%;
}
@media (max-width: 980px){
  .controls{ grid-template-columns: 1fr; }
}

label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

input, select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #ffffff;
  color: #0f172a;
  padding: 11px 12px;
  outline:none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{
  border-color: rgba(59,91,255,.55);
  box-shadow:
    0 0 0 4px rgba(59,91,255,.16),
    0 1px 0 rgba(15, 23, 42, .03);
}

/* Custom select (avoid OS dropdown look) */
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-color: #ffffff;
  color: #0f172a;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select option{
  background: #ffffff;
  color: #0f172a;
}
select::-ms-expand{ display: none; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:0;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(59,91,255,1), rgba(37,99,235,1));
  color:white;
  box-shadow: 0 12px 26px rgba(59,91,255,.18);
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0px); filter: brightness(.98); }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .10);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.metaRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 12.5px;
}
@media (max-width: 980px){
  .metaRow{ flex-direction: column; align-items:flex-start; }
}

.grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  --panelH: clamp(620px, calc(100vh - 126px), 920px);
  transition: grid-template-columns .22s ease;
}
.grid.sideCollapsed{
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 980px){
  .wrap{
    width: 100%;
    padding: 22px 18px 44px;
  }
  .grid{ grid-template-columns: 1fr; --panelH: 520px; }
  .grid.sideCollapsed{ grid-template-columns: 1fr; }
}

.mapCard{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: var(--panelH);
  position: relative;
  --mapPanelTop: 74px;
  padding: 0;
}

.mapCard.mapBelow{
  height: auto;
  min-height: var(--panelH);
  overflow: visible;
}

.mapPanel,
.transitionPanel{
  flex: 1;
  min-height: 0;
  position: relative;
}
.mapPanel{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: max-content minmax(clamp(420px, calc(var(--panelH) - 270px), 680px), 1fr);
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  overflow: auto;
}
.mapPanel[hidden],
.transitionPanel[hidden]{
  display: none !important;
}

.mapPanel.is-empty{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.mapPanel.is-empty .physicalSummaryPanel{
  grid-column: 1;
  grid-row: 1;
}

.mapPanel.is-empty .physicalBreakdownPanel,
.mapPanel.is-empty .physicalMapArea{
  display: none !important;
}

.mapPanel.mapOnly{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.mapPanel.mapOnly .physicalSummaryPanel{
  grid-column: 1;
  grid-row: 1;
}

.mapPanel.mapOnly .physicalBreakdownPanel{
  display: none !important;
}

.mapPanel.mapOnly .physicalMapArea{
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  min-height: 0;
}

.mapPanel.weatherLayout{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mapPanel.weatherLayout .physicalBreakdownPanel{
  grid-column: 1;
  grid-row: 2;
}

.mapPanel.weatherLayout .physicalMapArea{
  grid-column: 2;
  grid-row: 2;
}

.mapPanel.actionPlanMode{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
}

.mapPanel.actionPlanMode .physicalSummaryPanel{
  grid-column: 1;
  grid-row: 1;
}

.mapPanel.actionPlanMode .physicalBreakdownPanel{
  grid-column: 1;
  grid-row: 2;
}

.mapPanel.actionPlanMode .physicalMapArea{
  display: none !important;
}

.physicalSummaryPanel{
  grid-column: 1 / -1;
  grid-row: 1;
}

.physicalBreakdownPanel{
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow: auto;
}

.physicalMapArea{
  grid-column: 2;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  gap: 0;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.mapPanel.mapBelow{
  grid-template-rows: auto auto auto;
  align-content: start;
  overflow: visible;
}

.mapPanel.mapBelow .physicalBreakdownPanel{
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: auto;
  overflow: visible;
}

.mapPanel.mapBelow .physicalMapArea{
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 420px;
  overflow: visible;
}

.mapPanel.mapBelow .physicalBreakdownCard{
  min-height: auto;
}

.mapToolbar{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1200;
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items: flex-start;
  max-width: min(440px, calc(100% - 24px));
}

.mapToolbar[hidden]{
  display:none !important;
}

.mapControlPanels{
  position: static;
  display:flex;
  flex-direction:column;
  gap: 10px;
  width: min(440px, calc(100vw - 80px));
  max-width: 100%;
}

.mapCanvas{
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.map{
  width: 100%;
  height: 100%;
  min-height: 0;
}

.sideCard{
  display:flex;
  flex-direction:column;
  height: var(--panelH);
  min-height: 0;
  min-width: 0;
}
.sideHeader{
  padding: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.sideHeader h2{
  margin:0;
  font-size: 13px;
  letter-spacing:-0.01em;
}
.sideHeader p{
  margin:6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

.sideControls{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}
.sideControls[hidden]{
  display:none !important;
}
.sideControls .btn{
  grid-column: 1 / -1;
  width: 100%;
}
@media (max-width: 980px){
  .sideControls{ grid-template-columns: 1fr; }
}

.sideMeta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12.5px;
}

.sideHeaderTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.sideHeaderActions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.collapsedAssetBar{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions";
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}
.collapsedAssetBarTitle{
  display:block;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .48);
  margin-bottom: 10px;
  white-space: nowrap;
}
.collapsedAssetBar[hidden]{
  display:none !important;
}
.collapsedAssetBarMain{
  grid-area: main;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.collapsedAssetBar select{
  width: 100%;
  min-width: 0;
}
.collapsedTopColumns{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 10px;
  align-items: start;
}
.collapsedAllColumn{
  min-width: 0;
  padding: 0;
}
.collapsedColumnTag{
  display:flex;
  align-items:center;
  width: fit-content;
  min-height: 16px;
  line-height: 1;
  margin-bottom: 7px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(15, 23, 42, .6);
}
.collapsedPortfolioMetrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.collapsedPortfolioMetric{
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  background:
    radial-gradient(circle at 4% 8%, rgba(59, 130, 246, .06), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.collapsedPortfolioAalLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .52);
  white-space: nowrap;
}
.collapsedPortfolioAal{
  display:block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(17, 24, 39, .96);
  white-space: nowrap;
}
.collapsedPortfolioRatio{
  display:block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(37, 99, 235, .98);
  white-space: nowrap;
}
.collapsedWeatherStatus{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(30, 64, 175, .96);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.collapsedWeatherStatus .collapsedColumnTag{
  margin-bottom: 7px;
  margin-top: 0;
}
.collapsedWeatherStatusBody{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  gap: 10px;
}
.collapsedWeatherStatus.has-alerts{
  color: rgba(127, 29, 29, .96);
}
.collapsedWeatherStatus.has-alerts .collapsedColumnTag{
  color: rgba(127, 29, 29, .78);
}
.collapsedWeatherStatusIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .95);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}
.collapsedWeatherStatus.has-alerts .collapsedWeatherStatusIcon{
  background: rgba(220, 38, 38, .96);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
  animation: collapsedWeatherStatusPulse 1.6s ease-out infinite;
}
.collapsedWeatherStatusText{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.collapsedWeatherStatusLabel{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(30, 64, 175, .78);
  font-weight: 900;
}
.collapsedWeatherStatus.has-alerts .collapsedWeatherStatusLabel{
  color: rgba(127, 29, 29, .74);
}
.collapsedWeatherStatusText > #collapsedPortfolioWeather{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}
.collapsedWeatherStatusCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  background: rgba(37, 99, 235, .94);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}
.collapsedWeatherStatus.has-alerts .collapsedWeatherStatusCount{
  background: rgba(220, 38, 38, .94);
  box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
}
@keyframes collapsedWeatherStatusPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
  }
  70%{
    box-shadow: 0 0 0 7px rgba(220, 38, 38, 0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}
.collapsedAssetBarActions{
  grid-area: actions;
  display:flex;
  align-items:center;
  gap: 8px;
}

@media (max-width: 900px){
  .collapsedAssetBar{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main actions";
    row-gap: 8px;
  }
  .collapsedTopColumns{
    grid-template-columns: minmax(0, 1fr);
  }
  .collapsedWeatherStatus{
    margin-top: 0;
  }
  .collapsedPortfolioMetrics{
    grid-template-columns: minmax(0, 1fr);
  }
}

.toggleAssetsIcon{
  font-size: 1.2em;
  line-height: 1;
}

.grid.sideCollapsed .sideCard{
  display:none;
}

.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .03);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  user-select:none;
}
.iconBtn:hover{ filter: brightness(1.03); }
.iconBtn[aria-expanded="true"]{
  background: rgba(59, 91, 255, .10);
  border-color: rgba(59, 91, 255, .22);
  color: rgba(37, 99, 235, 1);
}

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal[hidden]{
  display: none !important;
}
.modalBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .45);
  backdrop-filter: blur(4px);
}
.modalCard{
  position: relative;
  width: min(720px, 100%);
  max-height: min(78vh, 720px);
  overflow: auto;
  background: rgba(255,255,255, .98);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 24px 70px rgba(2, 6, 23, .22);
}
.modalHeader{
  padding: 14px 14px 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.modalHeader h3{
  margin: 0;
  font-size: 16px;
}
.modalBody{
  padding: 14px;
}
.modalTabs{
  display:flex;
  gap: 10px;
  margin-bottom: 14px;
}
.modalTab{
  flex: 1;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .03);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.modalTab.isActive{
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .22);
  color: rgba(37, 99, 235, 1);
}
.modalPanel[hidden]{
  display:none !important;
}
.modalFooter{
  padding: 12px 14px 14px 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  border-top: 1px solid rgba(15, 23, 42, .08);
}
.energyUsedModalCard{
  width: min(560px, 100%);
}
.energyUsedFormGrid{
  align-items: start;
}

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}
.formGrid .full{
  grid-column: 1 / -1;
}
@media (max-width: 740px){
  .formGrid{ grid-template-columns: 1fr; }
}

.hint{
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.fieldHintError{
  color: rgba(153, 27, 27, 1);
}
input[aria-invalid="true"]{
  border-color: rgba(239, 68, 68, .65);
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, .15),
    0 1px 0 rgba(15, 23, 42, .03);
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.divider{
  height: 1px;
  background: rgba(15, 23, 42, .10);
  margin: 14px 0;
}

.csvImport{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.csvImportTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.docUpload{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.docUploadTitle{
  font-weight: 700;
}
.docDropZone{
  border: 1px dashed rgba(15, 23, 42, .18);
  border-radius: 14px;
  padding: 16px;
  background: rgba(15, 23, 42, .02);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 8px;
}
.docFileList{
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .02);
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.coordGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 740px){
  .coordGrid{ grid-template-columns: 1fr; }
}

.miniMapWrap{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.miniMap{
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .04);
}

.segmented{
  display:flex;
  gap: 0;
  background: rgba(15, 23, 42, .03);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  overflow:hidden;
}
.segmentedItem{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  cursor:pointer;
  user-select:none;
  font-size: 13px;
  color: var(--text);
}
.segmentedItem input{
  margin: 0;
}

.btn.ghost{
  background: rgba(15, 23, 42, .03);
  color: var(--text);
  border: 1px solid rgba(15, 23, 42, .12);
}
.btn.ghost:hover{ filter: brightness(1.02); }

.sideBody{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow:auto;
  flex: 1;
  min-height: 0;
}

.asset{
  padding: 12px;
}

.assetTop{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items:start;
}
@media (max-width: 720px){
  .assetTop{
    grid-template-columns: minmax(0, 1fr);
  }
}

.riskGauge{
  width: 88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  user-select:none;
  position: relative;
}
.riskGauge.noInfo{
  opacity: .45;
  filter: saturate(.15);
}
.riskGauge.noInfo .riskGaugeNeedle{
  visibility: hidden;
}
.riskGaugeSvg{
  width: 76px;
  height: auto;
  display:block;
}
.riskGaugeBg{
  fill: none;
  stroke: rgba(15, 23, 42, .12);
  stroke-width: 11;
  stroke-linecap: round;
}
.riskGaugeArc{
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: .95;
}
.riskGaugeNeedle{
  stroke: rgba(15, 23, 42, .78);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.riskGaugePivot{
  fill: rgba(15, 23, 42, .78);
  opacity: 0;
}
.riskGaugeValue{
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 950;
  font-size: 12.5px;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, .92);
  pointer-events: none;
}
.riskGaugePill{
  padding: 3px 6px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .04);
  color: rgba(15, 23, 42, .86);
  white-space: nowrap;
  margin-top: -6px;
}
.riskGaugePill.noInfo{
  background: rgba(107, 114, 128, .12);
  border-color: rgba(107, 114, 128, .22);
  color: rgba(107, 114, 128, 1);
}

.riskGaugePill.riskBand.low{
  background: rgba(27, 138, 58, .16);
  border-color: rgba(27, 138, 58, .25);
  color: rgba(21, 128, 61, 1);
}
.riskGaugePill.riskBand.medium{
  background: rgba(183, 243, 106, .62);
  border-color: rgba(183, 243, 106, .75);
  color: rgba(31, 41, 55, 1);
}
.riskGaugePill.riskBand.high{
  background: rgba(244, 67, 54, .16);
  border-color: rgba(244, 67, 54, .25);
  color: rgba(153, 27, 27, 1);
}

.scoreCircle{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .92);
  background: rgba(15, 23, 42, .04);
  user-select:none;
}
.scoreCircle.empty{
  background: rgba(15, 23, 42, .04);
  color: rgba(15, 23, 42, .62);
  box-shadow: none;
}

.miniBtn{
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .03);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
  font-size: 10.5px;
  user-select:none;
  display:inline-flex;
  align-items:center;
  width: 88px;
  justify-content: center;
}
.miniBtn:hover{ filter: brightness(1.03); }
.miniBtn[aria-expanded="true"]{
  background: rgba(59, 91, 255, .10);
  border-color: rgba(59, 91, 255, .22);
  color: rgba(37, 99, 235, 1);
}

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

.assetQuickMetaLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .48);
}

.assetQuickMetaValue{
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(248, 250, 252, .96);
  color: rgba(15, 23, 42, .82);
  font-size: 11.5px;
  font-weight: 800;
}
.assetQuickMetaValue.noInfo{
  background: rgba(241, 245, 249, .96);
  border-color: rgba(148, 163, 184, .35);
  color: rgba(71, 85, 105, 1);
}

.riskRows{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.riskActions{
  margin-top: 10px;
}
.exportPdfBtn{
  width: 100%;
  justify-content: center;
}
.riskRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(15, 23, 42, .02);
}
.riskName{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(15, 23, 42, .88);
}
.riskValue{
  display:flex;
  align-items:baseline;
  gap: 10px;
  white-space: nowrap;
}
.riskNum{
  font-weight: 950;
  font-size: 12.5px;
}
.riskLabel{
  font-size: 12px;
  color: rgba(15, 23, 42, .62);
  font-weight: 800;
}
.riskSwatch{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(15, 23, 42, .10);
  flex: 0 0 auto;
}
.riskSwatch.empty{
  background: rgba(15, 23, 42, .06);
  border-color: rgba(15, 23, 42, .10);
}

.assetInfo{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 240px;
}
.assetMetaBadges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.assetTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.assetTitle h3{
  margin:0;
  font-size: 14.5px;
  letter-spacing:-0.01em;
}
.assetAddress,
.assetCoords{
  margin: 0;
  color: rgba(15, 23, 42, .62);
  font-size: 12.5px;
  line-height: 1.4;
}
.assetCoords{
  color: rgba(15, 23, 42, .54);
  font-size: 11.5px;
}

.physicalSummaryPanel{
  padding: 0;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.physicalSummaryPanel.mapHeaderOnly{
  overflow: visible;
}

.mapPanel.mapHidden .physicalSummaryPanel{
  flex: 1;
  max-height: none;
  min-height: 0;
}

.mapPanel.mapHidden .physicalSummaryCard{
  min-height: 100%;
}

.physicalSummaryCard{
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 16px;
  min-height: 100%;
}

.physicalSummaryCard--empty{
  min-height: auto;
  justify-content:center;
}

.physicalSummaryHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.physicalSummaryHeadMain{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.physicalSummaryHeadAside{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  text-align:right;
  flex: 0 0 auto;
}

.physicalSummaryEyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .48);
}

.physicalSummaryHead h3,
.physicalSummaryCard--empty h3{
  margin: 6px 0 4px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.assetTitleRow{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.assetTitleRow h3{
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.assetTitleRow .assetNameEditBtn{
  position: static;
  top: auto;
  right: auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.assetTitleRow .assetNameDeleteBtn{
  border-color: rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .08);
  color: rgba(153, 27, 27, .92);
}

.assetTitleRow .assetNameDeleteBtn:hover{
  background: rgba(239, 68, 68, .16);
  border-color: rgba(239, 68, 68, .4);
  color: rgba(127, 29, 29, .98);
}

.physicalSummaryHead p,
.physicalSummaryCard--empty p{
  margin: 0;
  color: rgba(15, 23, 42, .62);
  font-size: 13px;
  line-height: 1.45;
}

.assetSummaryTop{
  display:flex;
  flex-direction:column;
  gap: 18px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.assetSummaryTop--compact{
  gap: 12px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.mapOverlayModeTabs{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap: 8px;
  min-width: 0;
}

.mapOverlayModeTab{
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, .62);
  padding: 4px 2px;
  border-radius: 0;
  cursor:pointer;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  box-shadow: none;
}

.mapOverlayModeTab span:last-child{
  text-decoration: none;
}

.mapOverlayModeTab:hover{
  color: rgba(15, 23, 42, .88);
}

.mapOverlayModeTab.is-active{
  color: rgba(15, 23, 42, .96);
  box-shadow: none;
}

.mapOverlayModeTab.is-active span:last-child{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mapOverlayWeatherAlertIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .98);
  color: #ffffff;
  font-weight: 900;
  font-size: 11px;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .55);
  animation: weatherAlertPulse 1.4s ease-out infinite;
}

@keyframes weatherAlertPulse{
  0%{
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .55);
  }
  70%{
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.assetSummarySwitchGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items:start;
  padding: 0;
}

.physicalSummaryGaugeWrap{
  display:flex;
  justify-content:center;
}

.physicalSummaryStatCard{
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(239, 246, 255, .92), rgba(248, 251, 255, .98));
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
  padding: 13px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 100%;
}

.physicalSummaryStatCard--switch{
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.physicalSummaryStatCard--switch:hover{
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, .28);
}

.physicalSummaryStatCard--switch.is-active{
  border-color: rgba(16, 185, 129, .28);
  background: linear-gradient(135deg, rgba(219, 234, 254, .96), rgba(239, 246, 255, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 24px rgba(15, 23, 42, .06);
}

.physicalSummaryStatCard--switch.is-active .riskGauge{
  opacity: 1;
  filter: none;
}

.physicalSummaryStatCard--switch.is-active .riskGaugeArc{
  opacity: 1;
}

.physicalSummaryStatCard--switch:not(.is-active) .riskGauge{
  opacity: .52;
  filter: saturate(.45);
}

.physicalSummaryStatCard--switch:not(.is-active) .riskGaugeArc{
  opacity: .22;
}

.physicalSummaryStatCard--switch:focus-visible{
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

.physicalSummaryStatCard--muted{
  background: linear-gradient(180deg, rgba(241, 247, 255, .88), rgba(248, 251, 255, .96));
}

.physicalSummaryStatLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .46);
}

.physicalSummaryStatValue{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width: 48px;
}

.physicalSummaryStatFoot{
  font-size: 11px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .58);
}

.physicalSummaryStatPill{
  font-size: 10px;
  padding: 5px 10px;
  margin-top: 0;
}

.riskSwitchCardBody{
  display:flex;
  align-items:center;
  gap: 12px;
}

.riskSwitchGaugeWrap{
  flex: 0 0 auto;
}

.riskSwitchGaugeWrap .riskGauge{
  width: 84px;
}

.riskSwitchGaugeWrap .riskGaugeSvg{
  width: 72px;
}

.riskSwitchGaugeWrap .riskGaugeValue{
  top: 23px;
  font-size: 15px;
}

.riskSwitchGaugeWrap .riskGaugePill{
  font-size: 8px;
}

.riskSwitchCardBody .physicalSummaryStatValue{
  justify-content:flex-start;
}

.physicalSummaryGaugeWrap .riskGauge{
  width: 102px;
  gap: 4px;
}

.physicalSummaryGaugeWrap .riskGaugeSvg{
  width: 96px;
}

.physicalSummaryGaugeWrap .riskGaugeValue{
  display: block;
  top: 28px;
  font-size: 18px;
  font-weight: 950;
}

.physicalSummaryGaugeWrap .riskGaugePill{
  padding: 3px 7px;
  font-size: 9px;
  letter-spacing: .08em;
  margin-top: -4px;
}

.physicalSummarySectionHeader{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

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

.physicalSummarySectionTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .52);
}

.physicalSummaryDivider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .18), rgba(15, 23, 42, .08));
}

.physicalBreakdownCard{
  min-height: 100%;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, .06);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.physicalBreakdownWeatherTabs{
  margin-bottom: 10px;
}

.weatherAlertsCard{
  gap: 12px;
}

.weatherDecisionTreeOpenBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .28);
  background: rgba(239, 246, 255, .95);
  color: rgba(29, 78, 216, 1);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.weatherDecisionTreeOpenBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(29, 78, 216, .48);
  filter: brightness(1.02);
}

.weatherDecisionTreeOpenBtn:focus-visible{
  outline: none;
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.weatherSubtabs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(248, 250, 252, .92);
  width: fit-content;
  max-width: 100%;
}

.weatherSubtabBtn{
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, .65);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.weatherSubtabBtn:hover{
  color: rgba(15, 23, 42, .9);
}

.weatherSubtabBtn.is-active{
  background: rgba(37, 99, 235, .14);
  color: rgba(29, 78, 216, 1);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25);
}

.weatherClimateCard{
  gap: 12px;
}

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

.climateTableWrap{
  border: 1px solid rgba(15, 23, 42, .11);
  border-radius: 14px;
  background: rgba(248, 250, 252, .88);
  overflow: auto;
}

.climateTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.climateTable thead th{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .64);
  text-align: left;
  background: rgba(226, 232, 240, .42);
  padding: 9px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.climateTable tbody th,
.climateTable tbody td{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(15, 23, 42, .84);
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  white-space: nowrap;
}

.climateTable tbody th{
  font-weight: 700;
  color: rgba(15, 23, 42, .92);
}

.climateTable tbody tr:last-child th,
.climateTable tbody tr:last-child td{
  border-bottom: 0;
}

.weatherAlertsWarn{
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(255, 251, 235, .9);
  color: rgba(146, 64, 14, .95);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 10px 12px;
}

.weatherAlertsLoading,
.weatherAlertsEmpty,
.weatherAlertsError{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .1);
  background: rgba(248, 250, 252, .88);
  color: rgba(15, 23, 42, .72);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
}

.weatherAlertsError{
  border-color: rgba(190, 24, 93, .25);
  color: rgba(136, 19, 55, .95);
  background: rgba(255, 241, 242, .9);
}

.weatherAlertsList{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.weatherAlertItem{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .1);
  background: rgba(248, 250, 252, .92);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.weatherAlertHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.weatherAlertHeadMain{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.weatherAlertEvent{
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .95);
  line-height: 1.3;
}

.weatherAlertSender{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .56);
  text-align: left;
}

.weatherAlertTreeBtn{
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255, 255, 255, .92);
  color: rgba(15, 23, 42, .78);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}

.weatherAlertTreeBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .38);
  background: rgba(239, 246, 255, .98);
  color: rgba(29, 78, 216, 1);
}

.weatherAlertTreeBtn:focus-visible{
  outline: none;
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.weatherAlertMeta{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.weatherAlertMetaRow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.weatherAlertMetaRow span{
  color: rgba(15, 23, 42, .55);
  font-weight: 700;
}

.weatherAlertMetaRow strong{
  color: rgba(15, 23, 42, .85);
  font-weight: 700;
}

.weatherAlertDesc{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .78);
}

.weatherAlertTags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weatherAlertTags span{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .16);
  background: rgba(255, 255, 255, .9);
  color: rgba(15, 23, 42, .72);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}

.weatherAlertActions{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .92);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weatherAlertActionsTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
}

.weatherAlertActionsList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weatherAlertActionItem{
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .1);
  background: rgba(248, 250, 252, .95);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weatherAlertActionTitle{
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .94);
  line-height: 1.35;
}

.weatherAlertActionDetails{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .76);
}

.weatherAlertActionMeta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weatherAlertActionPill{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255, 255, 255, .9);
  color: rgba(15, 23, 42, .7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 8px;
}

.weatherAlertActionPill--critical{
  border-color: rgba(220, 38, 38, .35);
  background: rgba(254, 242, 242, .95);
  color: rgba(153, 27, 27, .95);
}

.weatherAlertActionPill--high{
  border-color: rgba(245, 158, 11, .35);
  background: rgba(255, 251, 235, .95);
  color: rgba(146, 64, 14, .95);
}

.weatherAlertActionPill--medium{
  border-color: rgba(59, 130, 246, .35);
  background: rgba(239, 246, 255, .95);
  color: rgba(30, 64, 175, .95);
}

.weatherDecisionTreeModalCard{
  width: min(1180px, 100%);
  max-height: min(90vh, 920px);
}

.weatherDecisionTreeModalBody{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weatherDecisionTreeHeaderText{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.weatherDecisionTreeHeaderText h3{
  margin: 0;
}

.weatherDecisionTreeSubtitle{
  margin: 0;
  color: rgba(15, 23, 42, .64);
  font-size: 12.8px;
  line-height: 1.4;
}

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

.weatherDecisionTreeKpi{
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .3);
  background: rgba(248, 250, 252, .9);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weatherDecisionTreeKpi strong{
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(15, 23, 42, .92);
}

.weatherDecisionTreeKpiLabel{
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(71, 85, 105, .86);
}

.weatherDecisionTreeKpi--focused{
  background: rgba(254, 242, 242, .84);
  border-color: rgba(220, 38, 38, .26);
}

.weatherDecisionTreeRule{
  grid-column: 1 / -1;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, .24);
  background: linear-gradient(135deg, rgba(239, 246, 255, .95), rgba(247, 250, 252, .95));
  color: rgba(30, 64, 175, .92);
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 12px;
}

.weatherDecisionTreePanel{
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, .32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)),
    radial-gradient(circle at top left, rgba(255, 255, 255, .98), rgba(241, 245, 249, .88) 56%),
    #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 24px rgba(15, 23, 42, .06);
  padding: 16px;
  overflow: auto;
}

.weatherDecisionTreeSvg{
  display: block;
  width: 100%;
  height: auto;
  min-width: 1020px;
}

.weatherDecisionTreeItem{
  transition: opacity .24s ease, filter .24s ease, transform .24s ease, stroke-width .24s ease;
}

.weatherDecisionTreeItem.is-faded{
  opacity: .22;
  filter: saturate(.72);
}

.weatherDecisionTreeNode rect{
  stroke-width: 2.2;
  rx: 20;
  ry: 20;
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .08));
}

.weatherDecisionTreeNodeTitle{
  font-size: 17px;
  font-weight: 700;
  fill: rgba(15, 23, 42, .95);
  text-anchor: middle;
  pointer-events: none;
}

.weatherDecisionTreeNodeSubtitle{
  font-size: 13px;
  fill: rgba(51, 65, 85, .88);
  text-anchor: middle;
  pointer-events: none;
}

.weatherDecisionTreeNode--start rect{
  fill: #f8fafc;
  stroke: rgba(100, 116, 139, .82);
}

.weatherDecisionTreeNode--decision rect{
  fill: #eef4ff;
  stroke: #7c9bd1;
}

.weatherDecisionTreeNode--red rect{
  fill: #ffe0e0;
  stroke: #c62828;
}

.weatherDecisionTreeNode--orange rect{
  fill: #ffe7d1;
  stroke: #d76b00;
}

.weatherDecisionTreeNode--yellow rect{
  fill: #fff8d9;
  stroke: #c49000;
}

.weatherDecisionTreeNode--green rect{
  fill: #e8f7ea;
  stroke: #2e7d32;
}

.weatherDecisionTreeLink{
  fill: none;
  stroke: rgba(100, 116, 139, .9);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weatherDecisionTreeLink.is-active{
  stroke: #dc2626;
  stroke-width: 5.2;
  filter: drop-shadow(0 2px 7px rgba(220, 38, 38, .3));
}

.weatherDecisionTreeLabel{
  font-size: 12.4px;
  font-weight: 800;
  fill: rgba(71, 85, 105, .96);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(248, 250, 252, .95);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.weatherDecisionTreeLabel.is-active{
  fill: #dc2626;
}

.aalSummaryCard{
  padding: 18px;
  border-radius: 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.aalSummaryMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, .96);
}

.aalSummaryHint{
  margin-top: -2px;
  color: rgba(15, 23, 42, .6);
  font-size: 12.5px;
  line-height: 1.45;
}

.aalSummaryPending{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(15, 23, 42, .72);
  background: rgba(15, 23, 42, .06);
}

.aalSummaryPendingIcon{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #ffffff;
  background: rgba(217, 119, 6, .95);
}

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

.aalSummaryItem{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(245, 245, 246, .88);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.aalSummaryLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .54);
}

.aalSummaryValue{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, .92);
  overflow-wrap: anywhere;
}

.physicalSummaryRows{
  gap: 10px;
}

.physicalSummaryRows[hidden]{
  display:none !important;
}

.physicalSummaryRows .physicalSummarySubsection{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.physicalSummaryRows .physicalSummarySubsection + .physicalSummarySubsection{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, .14);
}

.physicalSummaryRows .physicalSummarySubsectionTitle{
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .56);
}

.physicalSummaryRows .physicalSummarySubsectionRows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.physicalSummaryRows .riskRow{
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(245, 245, 246, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}


.physicalSummaryRows .riskName{
  gap: 10px;
  font-size: 12.5px;
  font-weight: 900;
  color: #31384d;
}

.physicalSummaryRows .riskSwatch{
  width: 12px;
  height: 12px;
  border: 0;
}

.physicalSummaryRows .riskValue{
  gap: 10px;
}

.physicalSummaryRows .riskNum{
  font-size: 14px;
  color: #293147;
}

.physicalSummaryRows .riskLabel{
  font-size: 12.5px;
  color: rgba(88, 95, 111, .96);
  font-weight: 800;
}

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

.actionPlanCard{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.actionPlanScenario{
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.actionPlanBaseline{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(248, 250, 252, .92);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.actionPlanBaselineTotal{
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, .94);
}

.actionPlanBaselineUnit{
  margin-top: -2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .56);
}

.actionPlanStack{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 176px;
}

.actionPlanStackPart{
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

.actionPlanStackPart span{
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
}

.actionPlanStackPart small{
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 23, 42, .72);
}

.actionPlanStackPart--needs{
  background: rgba(191, 219, 254, .58);
}

.actionPlanStackPart--use{
  background: rgba(153, 246, 228, .44);
}

.actionPlanBaselineLabel{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .52);
}

.actionPlanImpact{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 8px 0 4px;
}

.actionPlanImpactStep{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.actionPlanImpactValue{
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, .96);
  text-align: center;
}

.actionPlanImpactUnit{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .56);
}

.actionPlanImpactDelta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(22, 101, 52, .98);
  text-align: center;
}

.actionPlanImpactLine{
  margin-top: 6px;
  width: 0;
  min-height: 54px;
  border-left: 2px dotted rgba(100, 116, 139, .58);
}

.actionPlanImpactBubble{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .16);
  background: rgba(226, 232, 240, .92);
  color: rgba(15, 23, 42, .9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.actionPlanTable{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  overflow: hidden;
  background: #fff;
}

.actionPlanTableRow{
  display: grid;
  grid-template-columns: 58px 140px minmax(0, 1fr) 170px 124px 104px 90px;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid rgba(15, 23, 42, .07);
}

.actionPlanTableRow.is-selected{
  background: rgba(220, 252, 231, .45);
}

.actionPlanTableRow:first-child{
  border-top: 0;
}

.actionPlanTableHead{
  background: rgba(241, 245, 249, .94);
}

.actionPlanCol{
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 11px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15, 23, 42, .86);
  border-left: 1px solid rgba(15, 23, 42, .06);
}

.actionPlanCol:first-child{
  border-left: 0;
  justify-content: center;
}

.actionPlanTableHead .actionPlanCol{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
}

.actionPlanCol--application{
  font-weight: 800;
}

.actionPlanCol--description{
  font-weight: 700;
}

.actionPlanCol--reduction{
  justify-content: flex-end;
  text-align: right;
  font-weight: 800;
  color: rgba(22, 101, 52, .98);
}

.actionPlanCol--class{
  justify-content: center;
}

.actionPlanCol--select{
  justify-content: center;
}

.actionPlanCol--list-remove{
  justify-content: center;
}

.actionPlanMeasureBadge{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, .28);
  background: rgba(226, 232, 240, .98);
  color: rgba(30, 41, 59, .9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.actionPlanClassPill{
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(183, 243, 106, .82);
  border: 1px solid rgba(133, 188, 49, .72);
  color: rgba(48, 64, 22, .98);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
}

.actionPlanMeasureSummary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.actionPlanMeasureSummaryText{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, .74);
}

.actionPlanMeasureSummaryActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.actionPlanAddBtn{
  border: 1px solid rgba(37, 99, 235, .32);
  border-radius: 999px;
  background: rgba(37, 99, 235, .10);
  color: rgba(29, 78, 216, 1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}

.actionPlanAddBtn:hover{
  background: rgba(37, 99, 235, .16);
}

.actionPlanClearBtn{
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 999px;
  background: rgba(248, 250, 252, .92);
  color: rgba(15, 23, 42, .82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}

.actionPlanClearBtn:hover{
  background: #ffffff;
}

.actionPlanClearBtn:disabled{
  opacity: .45;
  cursor: default;
}

.actionPlanMeasureToggle{
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 999px;
  background: rgba(248, 250, 252, .96);
  color: rgba(15, 23, 42, .8);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  min-width: 74px;
  cursor: pointer;
}

.actionPlanMeasureToggle:hover{
  background: #ffffff;
}

.actionPlanMeasureToggle.is-selected{
  border-color: rgba(22, 163, 74, .42);
  background: rgba(220, 252, 231, .9);
  color: rgba(21, 101, 52, 1);
}

.actionPlanMeasureDelete{
  border: 1px solid rgba(220, 38, 38, .26);
  border-radius: 999px;
  background: rgba(254, 242, 242, .95);
  color: rgba(185, 28, 28, .95);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 8px;
  min-width: 66px;
  cursor: pointer;
}

.actionPlanMeasureDelete:hover{
  background: rgba(254, 226, 226, .95);
}

.actionPlanMeasureDelete:disabled{
  opacity: .6;
  cursor: default;
}

.actionPlanTableEmpty{
  padding: 12px;
  font-size: 12.5px;
  color: rgba(15, 23, 42, .68);
}

.actionPlanMeasureModalCard{
  width: min(620px, 100%);
}

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

.actionPlanMeasureFormGrid textarea{
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #ffffff;
  color: #0f172a;
  padding: 11px 12px;
  outline: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
}

.actionPlanMeasureFormGrid textarea:focus{
  border-color: rgba(59,91,255,.55);
  box-shadow:
    0 0 0 4px rgba(59,91,255,.16),
    0 1px 0 rgba(15, 23, 42, .03);
}

.physicalSummaryBtn{
  width: auto;
  min-width: 0;
  max-width: none;
  justify-content: center;
  min-height: 0;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .72);
  background: rgba(15, 23, 42, .03);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .04);
  cursor: pointer;
}

.physicalSummaryBtn--inline{
  align-self: auto;
}

.physicalSummaryBtn--layout{
  align-self: auto;
}

.physicalSummaryBtn:hover{
  background: rgba(255, 255, 255, .92);
  color: rgba(15, 23, 42, .92);
}

@media (max-width: 640px){
  .mapCard{
    --mapPanelTop: 122px;
  }
  .mapPanel{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding: 14px;
  }
  .mapPanel.weatherLayout{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .physicalSummaryPanel,
  .physicalMapArea,
  .physicalBreakdownPanel{
    grid-column: 1;
  }
  .physicalSummaryPanel{ grid-row: 1; }
  .physicalMapArea{
    grid-row: 2;
    min-height: 0;
  }
  .physicalBreakdownPanel{ grid-row: 3; }
  .mapModes{
    display:none !important;
  }
  .assetSummarySwitchGrid,
  .transitionRiskSwitch{
    grid-template-columns: minmax(0, 1fr);
  }
  .aalSummaryGrid{
    grid-template-columns: minmax(0, 1fr);
  }
  .aalSummaryMain{
    font-size: 30px;
  }
  .physicalSummaryHead{
    flex-direction: column;
    align-items: stretch;
  }
  .physicalSummaryHeadAside{
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .mapOverlayModeTabs{
    width: 100%;
    justify-content:flex-start;
  }
  .mapControlPanels{
    width: min(420px, calc(100vw - 72px));
  }
  .physicalSummarySectionHeaderTop{
    flex-direction: column;
    align-items: flex-start;
  }
  .physicalSummaryGaugeWrap{
    justify-content:flex-start;
  }
  .physicalSummaryCard{
    padding: 0;
  }
  .mapCanvas{
    min-height: 260px;
  }
  .physicalStat strong{
    font-size: 24px;
  }
  .physicalSummaryRows .riskName,
  .physicalSummaryRows .riskLabel{
    font-size: 12px;
  }
  .physicalSummaryRows .riskNum{
    font-size: 13px;
  }
  .actionPlanScenario{
    grid-template-columns: 1fr;
  }
  .actionPlanImpact{
    grid-template-columns: 1fr;
  }
  .weatherAlertHead{
    flex-direction: column;
    align-items: flex-start;
  }
  .weatherAlertHeadMain{
    width: 100%;
  }
  .weatherAlertTreeBtn{
    width: 100%;
    justify-content: center;
  }
  .weatherAlertSender{
    text-align: left;
  }
  .weatherDecisionTreeOpenBtn{
    width: 100%;
    justify-content: center;
  }
  .weatherDecisionTreeSvg{
    min-width: 920px;
  }
  .weatherDecisionTreeIntro{
    grid-template-columns: 1fr;
  }
  .weatherDecisionTreeRule{
    grid-column: auto;
  }
  .actionPlanImpactStep{
    align-items: flex-start;
  }
  .actionPlanImpactLine{
    min-height: 26px;
  }
  .actionPlanTable{
    overflow: auto;
  }
  .actionPlanTableRow{
    min-width: 960px;
  }
}
.sub{
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.transitionWrap{
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: #ffffff;
}
.transitionShell{
  display:grid;
  grid-template-rows: auto auto auto minmax(clamp(420px, calc(var(--panelH) - 270px), 680px), 1fr);
  gap: 16px;
  height: auto;
  min-height: 100%;
  padding: 18px;
  box-sizing: border-box;
  overflow: visible;
}
.transitionSustainabilityGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.crremPathwaysSection{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crremPathwaysTop{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.crremPathwaysMeta{
  color: rgba(15, 23, 42, .58);
  font-size: 12px;
  line-height: 1.35;
}
.crremPathwaysGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.crremPathwayCard{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.crremPathwayTitle{
  padding: 9px 11px;
  color: rgba(15, 23, 42, .86);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(241, 245, 249, .9), rgba(255, 255, 255, .98));
}
.crremPathwaySvg{
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
}
.crremChartWrap{
  position: relative;
}
.crremPlotBg{
  fill: rgba(248, 250, 252, .86);
}
.crremPlotFrame{
  fill: none;
  stroke: rgba(15, 23, 42, .22);
  stroke-width: 1;
  pointer-events: none;
}
.crremGridLine{
  stroke: rgba(148, 163, 184, .28);
  stroke-width: 1;
  pointer-events: none;
}
.crremGridLine--x{
  stroke-opacity: .6;
}
.crremTickText{
  fill: rgba(71, 85, 105, .88);
  font-size: 10.5px;
  font-weight: 600;
  dominant-baseline: middle;
}
.crremArea{
  fill: rgba(37, 99, 235, .18);
  pointer-events: none;
}
.crremTargetLine{
  fill: none;
  stroke: #16a34a;
  stroke-width: 2.6;
  pointer-events: none;
}
.crremAssetLine{
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.6;
  pointer-events: none;
}
.crremAlignMarker{
  fill: #ffffff;
  stroke: #ef4444;
  stroke-width: 2;
  pointer-events: none;
}
.crremHoverGuide{
  stroke: rgba(15, 23, 42, .32);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  pointer-events: none;
}
.crremHoverMarker{
  pointer-events: none;
}
.crremHoverMarker--target{
  fill: #ffffff;
  stroke: #16a34a;
  stroke-width: 2;
}
.crremHoverMarker--asset{
  fill: #ffffff;
  stroke: #0f172a;
  stroke-width: 2;
}
.crremHoverHit{
  fill: transparent;
  stroke: transparent;
  stroke-width: 10;
  cursor: crosshair;
}
.crremTooltip{
  position: absolute;
  z-index: 3;
  transform: translate(-50%, 0);
  min-width: 140px;
  max-width: min(260px, calc(100% - 14px));
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .16);
  background: rgba(255, 255, 255, .98);
  color: rgba(15, 23, 42, .92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  padding: 7px 9px;
  pointer-events: none;
}
.crremTooltipYear{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .58);
  margin-bottom: 4px;
}
.crremTooltipBody{
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.crremLegend{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px 10px;
  color: rgba(51, 65, 85, .85);
  font-size: 11px;
  font-weight: 700;
}
.crremLegendItem{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crremLegendSwatch{
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .8);
}
.crremLegendSwatch--area{
  height: 8px;
  background: rgba(37, 99, 235, .28);
}
.crremLegendSwatch--target{
  background: #16a34a;
}
.crremLegendSwatch--asset{
  background: #0f172a;
}
.crremPathwaysError{
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, .25);
  border-radius: 12px;
  background: rgba(239, 68, 68, .08);
  color: rgba(153, 27, 27, 1);
  font-size: 12.5px;
  line-height: 1.35;
}
.transitionSustainabilityCard{
  position: relative;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, .10), transparent 42%),
    linear-gradient(165deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  padding: 14px 44px 14px 14px;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}
.transitionSustainabilityLabel{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15, 23, 42, .78);
  letter-spacing: -0.01em;
}
.transitionSustainabilityBody{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.transitionSustainabilityScoreBlock{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .78);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.transitionSustainabilityScoreCaption{
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .52);
}
.transitionSustainabilityScoreRow{
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.transitionSustainabilityScoreRow .riskSwatch{
  width: 10px;
  height: 10px;
}
.transitionSustainabilityScoreValue{
  font-size: 38px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, .96);
}
.transitionSustainabilityScoreLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, .68);
  line-height: 1.1;
}
.transitionSustainabilityValuesPane{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.transitionSustainabilityDatum{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .88);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.transitionSustainabilityDatum--reference{
  background: linear-gradient(180deg, rgba(241, 245, 249, .92), rgba(255, 255, 255, .96));
}
.transitionSustainabilityDatumLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .54);
}
.transitionSustainabilityDatumValue{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.transitionSustainabilityValue{
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, .96);
}
.transitionSustainabilityUnit{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  color: rgba(15, 23, 42, .56);
}
.transitionSustainabilityReferenceValue{
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(15, 23, 42, .86);
}
.transitionSustainabilityReferenceUnit{
  color: rgba(15, 23, 42, .58);
  font-weight: 700;
  font-size: 11px;
}
.transitionSustainabilityEditBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(15, 23, 42, .03);
  color: rgba(15, 23, 42, .72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.transitionSustainabilityEditBtn:hover{
  background: rgba(59, 91, 255, .08);
  border-color: rgba(59, 91, 255, .24);
  color: rgba(37, 99, 235, 1);
}
.transitionSustainabilityEditBtn:focus-visible{
  outline: 2px solid rgba(37, 99, 235, .5);
  outline-offset: 1px;
}
.transitionSustainabilityEditBtn:disabled{
  opacity: .55;
  cursor: wait;
}
.transitionSustainabilityEditBtn svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.transitionContentGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.transitionContentGrid.mapBelow{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(420px, 1fr) auto;
  overflow: visible;
}
.transitionMapHost{
  min-height: 0;
  display:flex;
}
.transitionContentGrid.mapBelow .transitionMapHost{
  grid-column: 1;
  grid-row: 1;
}
.transitionContentGrid .physicalBreakdownCard{
  min-height: 0;
  overflow: auto;
}
.transitionContentGrid.mapBelow .physicalBreakdownCard{
  grid-column: 1;
  grid-row: 2;
  overflow: visible;
}
.transitionMapHost .physicalMapArea{
  width: 100%;
  height: 100%;
}
.transitionTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.transitionTop h3,
.transitionEmpty h3{
  margin: 6px 0 4px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.transitionTop p,
.transitionEmpty p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 620px;
}
.transitionEyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .48);
}
.transitionEmpty{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height: 100%;
  padding: 24px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.transitionEmpty--top{
  justify-content:flex-start;
}
.transitionEmpty--loading{
  gap: 18px;
  justify-content: center;
}
.transitionLoading{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .14), transparent 40%),
    linear-gradient(180deg, rgba(239, 246, 255, .9), rgba(255, 255, 255, .96));
}
.transitionLoadingTitle{
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .9);
  margin-bottom: 4px;
}
.transitionLoadingSub{
  margin-top: 6px;
  color: rgba(15, 23, 42, .56);
  font-size: 12.5px;
  line-height: 1.45;
}
.transitionSpinner{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  border: 2.5px solid rgba(37, 99, 235, .16);
  border-top-color: rgba(37, 99, 235, .92);
  animation: transitionSpin .75s linear infinite;
}
@keyframes transitionSpin{
  to{ transform: rotate(360deg); }
}

.energyClassCard,
.transitionMetric{
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .92);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}
.energyClassCard{
  padding: 16px;
}
.energyClassHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.energyClassCurrent{
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  color: rgba(15, 23, 42, .92);
}
.energyClassCurrentWrap{
  margin-top: 6px;
}
.energyClassScale{
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.energyClassStep{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 12px 8px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  color: rgba(15, 23, 42, .72);
  background: linear-gradient(180deg, rgba(241, 245, 249, .9), rgba(255, 255, 255, .98));
}
.energyClassStep.is-active{
  background: rgba(15, 23, 42, .08);
  color: rgba(15, 23, 42, .94);
  border-color: rgba(15, 23, 42, .14);
  box-shadow: none;
}

.transitionMetrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.transitionMetric{
  padding: 16px;
}
.transitionMetricTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.transitionMetricLabel{
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.transitionMetricLabelRow{
  display:flex;
  align-items:center;
  gap: 10px;
}
.transitionMetricIcon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(15, 23, 42, .05);
  border: 1px solid rgba(15, 23, 42, .08);
  color: rgba(15, 23, 42, .72);
  flex: 0 0 auto;
}
.transitionMetricIcon svg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.transitionMetricUnit{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15, 23, 42, .52);
}
.transitionDelta{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.transitionDelta--good{
  background: rgba(22, 163, 74, .10);
  color: #166534;
}
.transitionDelta--bad{
  background: rgba(239, 68, 68, .10);
  color: #991b1b;
}
.transitionDelta--neutral{
  background: rgba(148, 163, 184, .16);
  color: #475569;
}
.transitionMetricGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items:end;
}
.transitionMetricGrid--single{
  grid-template-columns: minmax(0, 1fr);
}
.transitionInputGroup{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.transitionInputGroup span{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .48);
}
.transitionInputGroup input,
.transitionInputGroup select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(248, 250, 252, .95);
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
}
.transitionInputGroup--compact{
  width: 120px;
}
.transitionReferenceCard{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(241, 245, 249, .88);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-height: 100%;
  justify-content: center;
}
.transitionReferenceCard span,
.transitionReferenceCard small{
  color: rgba(15, 23, 42, .52);
  font-size: 12px;
}
.transitionReferenceCard strong{
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.transitionCompare{
  margin-top: 14px;
}
.transitionCompareTrack{
  height: 10px;
  border-radius: 999px;
  background: rgba(226, 232, 240, .92);
  overflow:hidden;
}
.transitionCompareFill{
  display:block;
  height: 100%;
  border-radius: inherit;
  background: #94a3b8;
}
.transitionCompareFill--good{
  background: linear-gradient(90deg, #16a34a, #84cc16);
}
.transitionCompareFill--bad{
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.transitionCompareFill--neutral{
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}
.transitionCompareLabels{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: rgba(15, 23, 42, .56);
  font-weight: 700;
}
.transitionActions{
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .transitionTop,
  .energyClassHead{
    flex-direction: column;
    align-items: stretch;
  }
  .energyClassScale,
  .transitionMetrics{
    grid-template-columns: 1fr;
  }
  .transitionSustainabilityGrid{
    grid-template-columns: 1fr;
  }
  .crremPathwaysGrid{
    grid-template-columns: 1fr;
  }
  .transitionSustainabilityBody{
    grid-template-columns: 1fr;
  }
  .transitionContentGrid{
    grid-template-columns: 1fr;
  }
  .transitionMetricGrid{
    grid-template-columns: 1fr;
  }
  .transitionInputGroup--compact{
    width: 100%;
  }
  .actionPlanScenario{
    grid-template-columns: 1fr;
  }
  .actionPlanTable{
    overflow: auto;
  }
  .actionPlanTableRow{
    min-width: 960px;
  }
}

.badge{
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .04);
  color: var(--text);
  white-space: nowrap;
}

.badge.ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(21, 128, 61, 1);
  font-weight: 700;
}
.badge.warn{
  border-color: rgba(245,158,11,.38);
  background: rgba(245,158,11,.14);
  color: rgba(146, 64, 14, 1);
  font-weight: 800;
}
.badge.danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: rgba(153, 27, 27, 1);
  font-weight: 900;
}

.iconDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(15, 23, 42, .10);
}
.iconDot.ok{ background: rgba(34,197,94,.90); border-color: rgba(34,197,94,.45); }
.iconDot.warn{ background: rgba(245,158,11,.95); border-color: rgba(245,158,11,.55); }
.iconDot.danger{ background: rgba(239,68,68,.95); border-color: rgba(239,68,68,.55); }

.riskLevel.minimal{ background: #1B8A3A !important; border-color: rgba(27, 138, 58, .55) !important; color: #ffffff !important; }
.riskLevel.very-low{ background: #37A858 !important; border-color: rgba(55, 168, 88, .55) !important; color: #ffffff !important; }
.riskLevel.low{ background: #62C86E !important; border-color: rgba(98, 200, 110, .55) !important; color: #0f172a !important; }
.riskLevel.low-moderate{ background: #7DDF7B !important; border-color: rgba(125, 223, 123, .55) !important; color: #0f172a !important; }
.riskLevel.moderate-low{ background: #B7F36A !important; border-color: rgba(183, 243, 106, .55) !important; color: #0f172a !important; }
.riskLevel.moderate{ background: #FFF176 !important; border-color: rgba(255, 241, 118, .60) !important; color: #0f172a !important; }
.riskLevel.moderate-high{ background: #FFD54F !important; border-color: rgba(255, 213, 79, .60) !important; color: #0f172a !important; }
.riskLevel.high{ background: #FFB74D !important; border-color: rgba(255, 183, 77, .60) !important; color: #0f172a !important; }
.riskLevel.very-high{ background: #FF8A65 !important; border-color: rgba(255, 138, 101, .60) !important; color: #0f172a !important; }
.riskLevel.critical{ background: #F44336 !important; border-color: rgba(244, 67, 54, .60) !important; color: #ffffff !important; }

.row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.mapModes{
  display:none !important;
}

.timeCtl{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  backdrop-filter: blur(6px);
}
.timeCtl[hidden]{
  display:none !important;
}
.basemapCtl{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  backdrop-filter: blur(6px);
}
.basemapCtl[hidden]{
  display:none !important;
}
.basemapCtl label{
  margin: 0;
  font-size: 12px;
}
.basemapCtl select{
  min-width: 0;
}
.mapBasemapBtn{
  position: absolute;
  top: 12px;
  right: 52px;
  z-index: 20;
  opacity: 1;
  background: rgba(255,255,255,1);
  color: rgba(15, 23, 42, 1);
}
.mapBasemapBtn[aria-expanded="true"]{
  opacity: 1;
  background: rgba(255,255,255,1);
  border-color: rgba(15, 23, 42, .18);
  color: rgba(15, 23, 42, 1);
}
.mapLayoutBtn{
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 20;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255,255,255,1);
  color: rgba(15, 23, 42, 1);
  font-size: 17px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mapLayoutBtn:hover{
  filter: brightness(1.03);
}
.mapLayoutBtn.is-active{
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .22);
  color: rgba(37, 99, 235, 1);
}
.hazardCtl{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  backdrop-filter: blur(6px);
}
.hazardCtl[hidden]{
  display:none !important;
}
.riskCtl{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  backdrop-filter: blur(6px);
}
.riskCtl[hidden]{
  display:none !important;
}
.timeCtlRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.weatherViewTabs{
  width: 100%;
  gap: 6px;
}

.weatherViewTab{
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(248, 250, 252, .9);
  color: rgba(15, 23, 42, .7);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  flex: 1 1 0;
  min-width: 0;
}

.weatherViewTab:hover{
  color: rgba(15, 23, 42, .9);
  border-color: rgba(15, 23, 42, .2);
}

.weatherViewTab.is-active{
  background: rgba(37, 99, 235, .14);
  color: rgba(29, 78, 216, 1);
  border-color: rgba(37, 99, 235, .26);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}
.timeCtlRow--time{
  flex-wrap: nowrap;
}
.timeCtlRow--time label{
  min-width: 44px;
}
.timeCtlRow--time input[type="range"]{
  flex: 1 1 auto;
  width: auto;
  min-width: 140px;
}
.timeCtlRow--time .pill{
  white-space: nowrap;
}
.timeCtl label{
  margin: 0;
  font-size: 12px;
}
.timeCtl input[type="range"]{
  width: 320px;
  max-width: 100%;
  padding: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
}
.timeCtl select{
  min-width: 240px;
}
.timeCtl .pill{
  background: rgba(59, 91, 255, .10);
  border-color: rgba(59, 91, 255, .22);
  color: rgba(37, 99, 235, 1);
  font-weight: 800;
}
.timePlayBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 14px;
}
.timePlayBtn span{
  display:block;
  line-height: 1;
}
.timePlayBtn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.toggleBtn{
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 18px;
  cursor:pointer;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  user-select:none;
  width: auto;
  min-width: 124px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}
.toggleBtn:hover{ filter: brightness(1.03); }
.toggleBtn[aria-expanded="true"]{
  background: linear-gradient(180deg, rgba(226, 232, 240, .96), rgba(255, 255, 255, .98));
  border-color: rgba(15, 23, 42, .16);
  color: rgba(15, 23, 42, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(15, 23, 42, .08);
}
.toggleBtn[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(226, 232, 240, .96), rgba(255, 255, 255, .98));
  border-color: rgba(15, 23, 42, .16);
  color: rgba(15, 23, 42, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(15, 23, 42, .08);
}
.toggleBtn:disabled{
  opacity: .55;
  cursor:not-allowed;
}

.selected{
  outline: 3px solid rgba(59,91,255,.20);
}

.smallNote{
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}

.err{
  color: rgba(153, 27, 27, 1);
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.10);
  padding: 10px 12px;
  border-radius: 14px;
  margin: 14px 0 0;
  display:none;
  white-space: pre-wrap;
}

.toast{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(540px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255,255,255,.94);
  color: rgba(15, 23, 42, .92);
  backdrop-filter: blur(10px);
}
.toast[hidden]{ display:none !important; }
.toast--info{
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .18);
  color: rgba(30, 64, 175, 1);
}
.toast--success{
  background: rgba(27, 138, 58, .10);
  border-color: rgba(27, 138, 58, .18);
  color: rgba(21, 128, 61, 1);
}
.toast--error{
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .22);
  color: rgba(153, 27, 27, 1);
}

/* Leaflet */
.leaflet-container{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.leaflet-popup-content-wrapper{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.leaflet-control-layers{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.leaflet-control-layers-expanded{
  padding: 10px 12px;
}
.leaflet-bar a, .leaflet-bar a:hover{
  border-color: rgba(15, 23, 42, .12);
}

.mapLegend{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  padding: 10px 12px;
  min-width: 170px;
  backdrop-filter: blur(6px);
}
.mapLegend .legendToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
.mapLegend .legendToggle:focus-visible{
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: 4px;
  border-radius: 10px;
}

.mapHover{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  padding: 8px 10px;
  min-width: 180px;
  backdrop-filter: blur(6px);
}
.mapHover[hidden]{
  display:none !important;
}
.mapHover .hoverTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.mapHover .hoverRows{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mapHover .hoverRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, .86);
}
.mapHover .hoverName{
  color: rgba(15, 23, 42, .70);
  font-weight: 800;
}
.mapHover .hoverVal{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.mapLegend .legendTitle{
  font-weight: 900;
  letter-spacing:-0.01em;
  font-size: 12.5px;
}
.mapLegend .legendChevron{
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  color: rgba(15, 23, 42, .60);
}
.mapLegend .legendSection{
  margin-top: 10px;
}
.mapLegend .legendSection.isCollapsed{
  display:none;
}
.mapLegend .legendLabel{
  font-size: 12px;
  color: rgba(15, 23, 42, .72);
  font-weight: 800;
  margin-bottom: 6px;
}
.mapLegend .legendRows{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mapLegend .legendRow{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, .86);
}
.mapLegend .legendMuted{
  font-size: 12px;
  color: rgba(15, 23, 42, .56);
}
.mapLegend .legendDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(15, 23, 42, .10);
  display:inline-block;
}
.mapLegend .legendDot.ok{ background: rgba(34,197,94,.90); border-color: rgba(34,197,94,.45); }
.mapLegend .legendDot.warn{ background: rgba(245,158,11,.95); border-color: rgba(245,158,11,.55); }
.mapLegend .legendDot.danger{ background: rgba(239,68,68,.95); border-color: rgba(239,68,68,.55); }
.mapLegend .legendSwatch{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: linear-gradient(135deg, rgba(59,91,255,.35), rgba(37,99,235,.25));
  display:inline-block;
}
.mapLegend .legendScale{
  margin-top: 10px;
}
.mapLegend .legendBar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  margin-top: 6px;
}
.mapLegend .legendMinMax{
  display:flex;
  justify-content:space-between;
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(15, 23, 42, .70);
  gap: 8px;
}
.mapLegend .legendMinMax span{
  min-width: 44px;
}

/* Hazard legend: Extreme heat (WBGT) */
.mapLegend .legendExtremeHeat{
  margin-top: 10px;
}
.mapLegend .legendExtremeHeatTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.mapLegend .legendExtremeHeatSub{
  font-size: 12px;
  color: rgba(15, 23, 42, .72);
  margin-bottom: 6px;
}
.mapLegend .legendExtremeHeatVar{
  font-size: 12px;
  color: rgba(15, 23, 42, .56);
}
.mapLegend .legendExtremeHeatScale{
  display:flex;
  align-items:stretch;
  gap: 10px;
  margin-top: 10px;
}
.mapLegend .legendExtremeHeatBar{
  width: 18px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: linear-gradient(to bottom, #C45A00 0%, #FFF2C5 100%);
}
.mapLegend .legendExtremeHeatTicks{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size: 12px;
  color: rgba(15, 23, 42, .86);
  line-height: 1;
  min-width: 28px;
}

.userPageWrap{
  max-width: 1100px;
  padding-top: 26px;
  padding-bottom: 36px;
}

.userHeader{
  margin-bottom: 14px;
}

.userSummaryCard{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  background:
    radial-gradient(560px 260px at 8% -20%, rgba(59, 91, 255, .16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .95));
}

.userSummaryIdentity{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.userAvatar{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(59, 91, 255, .28);
  background: linear-gradient(145deg, #3B5BFF, #2563EB);
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .26);
  flex: 0 0 auto;
}

.userSummaryCopy h2{
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.03em;
}

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

.userSummaryTags{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 8px;
}

.userSummaryTag{
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .85);
}

.userSummaryTagLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .54);
}

.userSummaryTagValue{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, .88);
}

.userCard{
  margin-top: 14px;
  padding: 18px;
}

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

.userCardHead h2{
  margin: 0;
  font-size: 18px;
}

.userCardHead p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 460px;
}

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

.userInfoItem{
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 88px;
}

.userInfoItemWide{
  grid-column: 1 / -1;
}

.userInfoLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .52);
  overflow-wrap: anywhere;
}

.userInfoText{
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--text);
  overflow-wrap: anywhere;
}

.userInfoTextMono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.45;
}

.userInfoEmpty{
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, .18);
  color: var(--muted);
}

.userSecurityCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.userSecurityBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.userSecurityIcon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.userSecurityIcon svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.changePasswordModalCard{
  width: min(560px, 100%);
  max-height: min(84vh, 760px);
}

.changePasswordModalHeader{
  padding: 16px 16px 12px 16px;
}

.changePasswordModalBody{
  padding: 16px;
}

.changePasswordModalBody .formGrid{
  gap: 10px;
}

@media (max-width: 980px){
  .userSummaryCard{
    flex-direction: column;
    align-items:flex-start;
  }
  .userSummaryTags{
    justify-content:flex-start;
  }
}

@media (max-width: 820px){
  .userInfoGrid{
    grid-template-columns: 1fr;
  }
  .userSecurityCard{
    align-items:flex-start;
    flex-direction:column;
  }
  .userInfoText{
    font-size: 15px;
  }
}