/* Layout */
[data-bs-theme="dark"] body { background-color: #1a1a2e; }
[data-bs-theme="light"] body { background-color: #f8f9fa; }
.section-card { margin-bottom: 1.5rem; }
.pws-stat { font-size: 1.1rem; }

/* Photo strip / Memories card */
.photo-strip { position: relative; overflow: hidden; height: 220px; }
.photo-grid { display: grid; gap: .5rem; position: absolute; width: 100%; top: 0; left: 0; transition: transform 1.4s ease-in-out; }
.photo-grid figure { position: relative; margin: 0; }
.photo-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: .375rem; cursor: pointer; display: block; }
.photo-grid figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; padding: 3px 8px; border-radius: 0 0 .375rem .375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-transform: capitalize; }

/* Card refresh rings (SVG circular countdown) */
@keyframes circleCountdown { from { stroke-dashoffset: 62.83; } to { stroke-dashoffset: 0; } }
.card-refresh-ring { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); stroke-dasharray: 62.83; stroke-dashoffset: 62.83; animation: circleCountdown 60s linear forwards; }
.card-refresh-ring.paused { animation-play-state: paused; }
.photo-refresh-ring { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); stroke-dasharray: 62.83; stroke-dashoffset: 62.83; }

/* uPlot / geothermal chart */
#zones_graph .uplot { width: 100% !important; }
[data-bs-theme="dark"] #zones_graph .u-wrap { background: transparent; }
[data-bs-theme="dark"] #zones_graph text { fill: #dee2e6; }
[data-bs-theme="dark"] #zones_graph .u-legend { color: #dee2e6; }
#zones_graph .u-select { background: rgba(100,180,255,0.15); border: 1px solid rgba(100,180,255,0.5); }
#zones_graph .u-legend { flex-wrap: wrap; }
#zones_graph .u-marker { width: 18px; height: 3px; border-radius: 0; margin-top: 7px; }
#zones_graph .u-series.u-off .u-label { opacity: 0.35; text-decoration: line-through; }
#zones_graph .u-series.u-off .u-marker { opacity: 0.35; }

/* Geothermal chart tooltip */
#zones_tooltip {
  position: absolute; pointer-events: none; display: none; z-index: 100;
  background: rgba(30,30,40,0.92); color: #dee2e6; border: 1px solid #555;
  border-radius: 6px; padding: 7px 10px; font-size: 12px; line-height: 1.6;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
[data-bs-theme="light"] #zones_tooltip { background: rgba(255,255,255,0.95); color: #212529; border-color: #ccc; }
#zones_tooltip .tt-time { font-weight: bold; margin-bottom: 3px; }
#zones_tooltip .tt-row { display: flex; gap: 8px; }
#zones_tooltip .tt-swatch { display: inline-block; width: 10px; height: 10px; margin-top: 3px; flex-shrink: 0; border-radius: 50%; }