:root{--clx-navy:#0f2748;--clx-blue:#1f5fbf;--clx-green:#1f8f4c;--clx-card:#fff;--clx-text:#172033;--clx-muted:#64748b;--clx-border:#d9e2ef;--clx-shadow:0 18px 45px rgba(15,39,72,.12)}
.clx-planner-alert{background:#fff7ed;border:1px solid #fed7aa;color:#92400e;padding:18px;border-radius:14px}
#clathrix-planner-app,#clathrix-planner-app *{box-sizing:border-box}
#clathrix-planner-app{width:min(1100px,calc(100% - 32px));margin:32px auto;font-family:Arial,Helvetica,sans-serif;color:var(--clx-text);line-height:1.45}
#clathrix-planner-app .clx-hero{background:linear-gradient(135deg,var(--clx-navy),#173d72);color:#fff;border-radius:24px;padding:28px;display:flex;justify-content:space-between;gap:24px;align-items:flex-start;box-shadow:var(--clx-shadow)}
#clathrix-planner-app h1{margin:4px 0 8px;font-size:clamp(28px,4vw,44px);color:#fff}
#clathrix-planner-app .clx-hero p{color:#dbeafe;max-width:760px;margin:0}
#clathrix-planner-app .clx-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#93c5fd!important;font-weight:700;font-size:12px;margin:0}
#clathrix-planner-app button,#clathrix-planner-app .clx-link-btn{border:0;padding:13px 18px;border-radius:14px;font-weight:700;cursor:pointer;background:var(--clx-blue);color:#fff;transition:.2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
#clathrix-planner-app button:hover,#clathrix-planner-app .clx-link-btn:hover{transform:translateY(-1px);opacity:.94}
#clathrix-planner-app #clxReset{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26)}
#clathrix-planner-app .clx-progress,#clathrix-planner-app .clx-card{background:var(--clx-card);border:1px solid var(--clx-border);border-radius:22px;box-shadow:var(--clx-shadow);margin-top:18px}
#clathrix-planner-app .clx-progress{padding:18px}#clathrix-planner-app .clx-progress>div:first-child{display:flex;justify-content:space-between;color:var(--clx-muted);margin-bottom:12px}
#clathrix-planner-app .clx-bar{height:12px;background:#e8eef7;border-radius:999px;overflow:hidden}#clathrix-planner-app #clxFill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--clx-blue),var(--clx-green));transition:width .35s ease}
#clathrix-planner-app .clx-card{padding:28px}#clathrix-planner-app .clx-title{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#clathrix-planner-app .clx-badge{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--clx-blue);font-weight:800;flex-shrink:0}
#clathrix-planner-app h2{margin:0;font-size:clamp(22px,3vw,34px);color:var(--clx-text)}#clathrix-planner-app .clx-help{color:var(--clx-muted);margin:6px 0 22px}
#clathrix-planner-app .clx-options,#clathrix-planner-app .clx-grid,#clathrix-planner-app .clx-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
#clathrix-planner-app .clx-option,#clathrix-planner-app .clx-box{border:1px solid var(--clx-border);background:#fbfdff;border-radius:18px;padding:18px}
#clathrix-planner-app .clx-option{cursor:pointer;transition:.18s ease;min-height:110px}#clathrix-planner-app .clx-option:hover{border-color:var(--clx-blue);transform:translateY(-2px)}
#clathrix-planner-app .clx-option strong{display:block;margin-bottom:8px;font-size:17px}#clathrix-planner-app .clx-option span,#clathrix-planner-app .clx-box p,#clathrix-planner-app .clx-box li{color:var(--clx-muted)}
#clathrix-planner-app label{display:grid;gap:7px;font-weight:700;color:#26364f}#clathrix-planner-app input,#clathrix-planner-app select,#clathrix-planner-app textarea{width:100%;border:1px solid var(--clx-border);border-radius:14px;padding:13px;font-size:15px;background:#fff;color:var(--clx-text)}
#clathrix-planner-app .clx-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}#clathrix-planner-app .clx-nav button:first-child{background:#e2e8f0;color:#0f172a}
#clathrix-planner-app .clx-hidden{display:none}#clathrix-planner-app .clx-score{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
#clathrix-planner-app .clx-pill{border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px;border:1px solid var(--clx-border)}
#clathrix-planner-app .low{background:#f0fdf4;color:#166534;border-color:#bbf7d0}#clathrix-planner-app .medium{background:#fffbeb;color:#92400e;border-color:#fde68a}#clathrix-planner-app .high,#clathrix-planner-app .risk{background:#fef2f2;color:#991b1b;border-color:#fecaca}#clathrix-planner-app .good{background:#f0fdf4;border-color:#bbf7d0}
#clathrix-planner-app ul{margin:8px 0 0 20px;padding:0}#clathrix-planner-app .clx-save-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f8fafc;color:#334155;border:1px solid #e2e8f0}
#clathrix-planner-app .clx-map-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
#clathrix-planner-app .clx-map{border:1px solid var(--clx-border);background:linear-gradient(180deg,#f8fbff,#eef5ff);border-radius:22px;padding:18px;min-height:360px}
#clathrix-planner-app .clx-world{width:100%;height:330px}#clathrix-planner-app .clx-region{cursor:pointer;transition:.2s ease;fill:#dbeafe;stroke:#1f5fbf;stroke-width:2}
#clathrix-planner-app .clx-region:hover,#clathrix-planner-app .clx-region.active{fill:#1f5fbf}
#clathrix-planner-app .clx-region-label{pointer-events:none;fill:#0f2748;font-weight:800;font-size:14px}
#clathrix-planner-app .clx-region.active+.clx-region-label,#clathrix-planner-app .clx-region:hover+.clx-region-label{fill:#fff}
#clathrix-planner-app .clx-region-panel{border:1px solid var(--clx-border);background:#fff;border-radius:22px;padding:20px}#clathrix-planner-app .clx-region-panel h3{margin-top:0}
#clathrix-planner-app .clx-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}#clathrix-planner-app .clx-mini{border:1px solid var(--clx-border);border-radius:14px;padding:12px;background:#fbfdff}
#clathrix-planner-app .clx-mini strong{display:block;color:#0f2748}#clathrix-planner-app .clx-mini span{color:#64748b;font-size:13px}
.cx-planner-saved-summary{margin-top:24px;padding-top:18px;border-top:1px solid #e5e7eb}.cx-planner-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}.cx-planner-result-card{border:1px solid #d9e2ef;border-radius:16px;padding:16px;background:#fbfdff}.cx-planner-result-card h5{margin:0 0 8px;color:#0f2748}.cx-planner-result-card ul{margin:8px 0 0 20px}
@media(max-width:900px){#clathrix-planner-app .clx-map-wrap{grid-template-columns:1fr}}@media(max-width:720px){#clathrix-planner-app .clx-hero,#clathrix-planner-app .clx-nav{flex-direction:column}#clathrix-planner-app button,#clathrix-planner-app .clx-link-btn{width:100%}}


/* OpenStreetMap / Leaflet region selector */
#clathrix-planner-app #clxLeafletMap {
  width: 100%;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--clx-border);
}

#clathrix-planner-app .leaflet-container {
  font-family: Arial, Helvetica, sans-serif;
}

#clathrix-planner-app .clx-map-note {
  margin: 10px 0 0;
  color: var(--clx-muted);
  font-size: 13px;
}

#clathrix-planner-app .clx-map-marker-popup strong {
  display:block;
  color:#0f2748;
  margin-bottom:4px;
}


/* Exact location selector */
#clathrix-planner-app .clx-location-search {
  display:flex;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

#clathrix-planner-app .clx-location-search input {
  flex:1;
  min-width:220px;
}

#clathrix-planner-app .clx-location-search button {
  white-space:nowrap;
}

#clathrix-planner-app .clx-location-details {
  margin-top:14px;
  border-top:1px solid var(--clx-border);
  padding-top:14px;
}

#clathrix-planner-app .clx-search-results {
  display:grid;
  gap:8px;
  margin:10px 0 12px;
}

#clathrix-planner-app .clx-search-result {
  border:1px solid var(--clx-border);
  background:#fbfdff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  color:#334155;
}

#clathrix-planner-app .clx-search-result:hover {
  border-color:var(--clx-blue);
}


/* Annual weather profile */
#clathrix-planner-app .clx-weather-profile {
  margin-top: 14px;
  border-top: 1px solid var(--clx-border);
  padding-top: 14px;
}
#clathrix-planner-app .clx-weather-profile h4 {
  margin: 0 0 8px;
  color: #0f2748;
}
#clathrix-planner-app .clx-weather-chart {
  width: 100%;
  min-height: 210px;
  border: 1px solid var(--clx-border);
  border-radius: 16px;
  background: #fbfdff;
  overflow: hidden;
  margin-top: 10px;
}
#clathrix-planner-app .clx-weather-chart svg {
  width: 100%;
  height: 230px;
  display: block;
}
#clathrix-planner-app .clx-weather-note {
  font-size: 13px;
  color: var(--clx-muted);
  margin: 8px 0 0;
}
#clathrix-planner-app .clx-weather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: 10px;
  margin-top: 12px;
}
#clathrix-planner-app .clx-weather-metric {
  border: 1px solid var(--clx-border);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}
#clathrix-planner-app .clx-weather-metric strong {
  display:block;
  color:#0f2748;
}
#clathrix-planner-app .clx-weather-metric span {
  color:#64748b;
  font-size:13px;
}


/* v6.1 bigger annual weather chart with visible Y-axis */
#clathrix-planner-app .clx-weather-chart {
  min-height: 360px !important;
  padding: 12px !important;
  overflow: visible !important;
}

#clathrix-planner-app .clx-weather-chart svg {
  width: 100% !important;
  height: 350px !important;
  overflow: visible !important;
}


/* v6.2 full-width annual weather profile */
#clathrix-planner-app .clx-weather-profile {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 22px !important;
  border: 1px solid var(--clx-border) !important;
  border-radius: 22px;
  background: #fff;
  padding: 22px !important;
}

#clathrix-planner-app .clx-weather-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
  align-items: end;
}

#clathrix-planner-app .clx-weather-controls button {
  width: 100%;
}

#clathrix-planner-app .clx-weather-chart {
  width: 100% !important;
  min-height: 520px !important;
  padding: 16px !important;
}

#clathrix-planner-app .clx-weather-chart svg {
  width: 100% !important;
  height: 500px !important;
}