.sss-uv-wrap { padding: 24px 0; }
.sss-uv-card {
  max-width: 1100px; margin: 0 auto; background: #fff;
  border: 1px solid #e7ebef; border-radius: 16px; padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.sss-uv-header { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.sss-sub { margin:4px 0 0; color:#64748b; }
.sss-micro { margin:6px 0 2px; font-size:13px; color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; }

.sss-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sss-city-wrap {
  position:relative;
  flex: 1 1 320px;
  min-width:220px;
  max-width:360px;
}
#sss-city {
  width: 100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d6dde5;
  font-size:16px;
  box-sizing:border-box;
}

.sss-suggest {
  position:absolute; top:44px; left:0; right:0; background:#fff;
  border:1px solid #e7ebef; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,0.06); z-index:50; display:none;
}
.sss-suggest button{
  display:block; width:100%; text-align:left; padding:10px 12px; border:0; background:#fff;
  cursor:pointer; font-size:14px;
}
.sss-suggest button:hover{ background:#f4f6f8; }

.sss-btn {
  border-radius: 999px; padding: 9px 14px; font-weight: 600; letter-spacing:.08em;
  text-transform:uppercase; font-size:12px; cursor:pointer;
}
.sss-btn.ghost{ background:#fff; border:1px solid #d6dde5; color:#0f766e; }
.sss-btn.solid{ background:#0f766e; border:1px solid #0f766e; color:#fff; }

.sss-grid { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:14px; margin-top:18px; }
@media (max-width: 980px){ .sss-grid{ grid-template-columns:1fr; } }

.sss-stack-strip{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  box-shadow:0 6px 16px rgba(15,23,42,0.04);
}
.sss-strip-title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:#0f172a;
}
.sss-strip-summary{
  margin:6px 0 8px;
  color:#1f2937;
  font-weight:700;
}
.sss-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sss-stack-strip .sss-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.sss-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,118,110,0.08);
  border:1px solid rgba(15,118,110,0.16);
  color:#0f172a;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sss-chip:hover{
  background:rgba(15,118,110,0.16);
  color:#0f172a;
}

.sss-panel{
  background:#f8fafc; border:1px solid #e7ebef; border-radius:12px; padding:14px;
  min-height:220px;
}
.sss-risk-panel{
  padding-top:24px;
}

.sss-chart-shell {
  position: relative;
  height: 230px;
  width: 100%;
}

@media (max-width: 600px) {
  .sss-chart-shell {
    height: 200px;
  }
}

.sss-chart-shell canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.sss-big { font-size:44px; font-weight:800; margin:8px 0; display:flex; gap:8px; align-items:baseline; }
.sss-big small{ font-size:14px; color:#64748b; font-weight:600; }

.sss-meta{ color:#334155; font-size:14px; display:grid; gap:6px; margin-top:8px; }
.sss-sed-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sss-sed-toggle{
  background:transparent;
  border:none;
  color:#0f766e;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  padding:2px 4px;
  text-decoration:underline;
}
.sss-sed-toggle:hover{ color:#0b5c55; }
.sss-sed-note{
  margin-top:8px;
  color:#475569;
  font-size:13px;
  line-height:1.55;
}

.sss-risk-windows{
  margin-top:14px;
  font-size:14px;
  color:#334155;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sss-risk-window{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 4px 12px rgba(15,23,42,0.05);
}

.sss-risk-window-time{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:4px;
}

.sss-risk-window-peak{
  font-size:13px;
  color:#64748b;
}

.sss-risk-window--empty{
  border-style:dashed;
  text-align:center;
  font-size:13px;
  color:#94a3b8;
  font-weight:500;
}

.sss-peak-window-block{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
}
.sss-peak-window-line{
  font-size:19px;
  font-weight:800;
  color:#0f172a;
}
.sss-peak-window-sub{
  margin-top:6px;
  font-size:14px;
  color:#475569;
}
.sss-risk-window-list{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.sss-risk-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 6px;
}

.sss-risk-badge{
  padding:6px 12px;
  border-radius:999px;
  background:#0f766e;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sss-risk-badge.ghost{
  background:#e0f2f1;
  color:#0f766e;
}

.sss-score {
  font-size:40px;
  font-weight:800;
  margin-top:8px;
  padding-bottom:10px;
  border-bottom:1px solid #e2e8f0;
}
.sss-score small{ font-size:13px; color:#64748b; font-weight:700; }

.sss-risk-category{
  font-size:19px;
  color:#0f172a;
  margin-top:10px;
  font-weight:800;
}
.sss-risk-desc{
  font-size:13px;
  color:#475569;
  margin-top:6px;
  line-height:1.4;
}
.sss-risk-legend{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sss-risk-bar{
  position:relative;
  height:12px;
  border-radius:999px;
  background: linear-gradient(90deg, #16a34a 0%, #facc15 30%, #fb923c 60%, #ef4444 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.sss-risk-indicator{
  position:absolute;
  top:50%;
  transform: translate(-50%, -50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #0f172a;
  box-shadow:0 4px 10px rgba(15,23,42,0.18);
  transition:left 0.2s ease;
}
.sss-risk-band-labels{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#475569;
}
.sss-risk-band-labels span{
  display:block;
}
.sss-risk-band-labels span.is-active{
  color:#0f172a;
  font-weight:800;
}

/* Autocomplete dropdown readability */
.sss-uv-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-radius: 12px;
  box-sizing: border-box;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #0f172a;
  z-index: 9999;
  display: none;
}

.sss-uv-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  color: #0f172a;
  background-color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:600;
}

.sss-uv-autocomplete-item small {
  color: #6b7280;           /* muted subtext */
}

.sss-uv-autocomplete-item:hover,
.sss-uv-autocomplete-item.is-active {
  background-color: #e2e8f0;
  color: #0b172a;
}

.sss-stack-card{
  margin-top:28px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
}
.sss-stack-card header h3{ margin:0; }
.sss-stack-controls{
  margin:14px 0;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  font-size:14px;
  color:#334155;
}
.sss-stack-controls select{
  min-width:240px;
  flex:1 1 240px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #cbd5f5;
  font-size:14px;
  color:#0f172a;
  background:#fff;
}
.sss-stack-summary p{
  margin:6px 0;
  color:#334155;
}
.sss-stack-why{
  color:#0f766e;
  font-weight:600;
}
.sss-stack-goal-tip{
  font-size:13px;
  color:#64748b;
}
.sss-stack-accordions{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.sss-stack-accordions details{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 14px;
  background:#f8fafc;
}
.sss-stack-accordions summary{
  font-weight:600;
  color:#0f172a;
  cursor:pointer;
}
.sss-stack-accordions ul{
  margin:10px 0 0 18px;
  padding:0;
  color:#475569;
  font-size:14px;
  line-height:1.5;
}
.sss-cta-row{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sss-cta{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #0f766e;
  color:#0f766e;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
}
.sss-cta:hover{
  background:#0f766e;
  color:#fff;
}