.sunmoon-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px 14px;
  color:var(--text);
  font-size:13px;
}
.sunmoon-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.sunmoon-title{
  font-size:14px;
  font-weight:600;
  color:var(--title);
}
.sunmoon-controls{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.sunmoon-daychip{
  appearance:none;
  border:1px solid var(--line);
  background:#111623;
  color:var(--muted);
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
}
.sunmoon-daychip.is-active{
  background:#2a2f3a;
  color:var(--title);
  border-color:#3a4252;
}
.sunmoon-graph-wrap{
  position:relative;
  margin-bottom:8px;
}
.sunmoon-canvas{
  width:100%;
  height:220px;
  display:block;
  border-radius:10px;
  background:#05060a;
}

/* ── 4-column summary grid ────────────────────────────────────────── */
.sunmoon-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px 4px;
  font-size:11px;
  color:var(--muted);
}
.sunmoon-summary-item{
  min-width:0; /* allow grid cells to shrink */
}
.sunmoon-summary-label{
  display:block;
  font-size:10px;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sunmoon-summary-value{
  display:block;
  color:var(--text);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sunmoon-hourline{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.sunmoon-tooltip{
  position:absolute;
  background:rgba(8,10,22,0.90);
  color:rgba(200,212,235,0.95);
  font-size:11px;
  padding:4px 9px;
  border-radius:6px;
  border:1px solid rgba(70,85,120,0.55);
  pointer-events:none;
  white-space:nowrap;
  display:none;
  z-index:10;
  backdrop-filter:blur(4px);
}