:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #1f2630;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --danger: #ff7b72;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
button, input, select { font: inherit; }
button, .button-link { color: var(--text); background: #21262d; border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; cursor: pointer; }
button:hover, .button-link:hover { border-color: #6e7681; }
input, select { width: 100%; color: var(--text); background: #0d1117; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
label { display: block; color: #c9d1d9; margin: 7px 0 4px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); background: #0d1117; }
.topbar h1 { margin: 0; font-size: 21px; }
.topbar p { margin: 3px 0 0; color: var(--muted); }
.page { max-width: 1500px; margin: 0 auto; padding: 20px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 16px; }
.toolbar { display: grid; grid-template-columns: auto minmax(220px, 420px) 1fr auto; gap: 12px; align-items: center; margin-bottom: 18px; }
.toolbar label { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.empty { text-align: center; padding: 50px 20px; }
.empty h2 { margin-top: 0; }
.viewer-card { background: #070a0d; border: 1px solid var(--border); border-radius: 9px; padding: 12px; overflow: hidden; }
.floorplan-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; user-select: none; }
.floorplan-stage > img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.floorplan-stage canvas, .marker-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.marker-layer { pointer-events: none; line-height: normal; }
.sensor-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; border: 0; background: transparent; padding: 0; color: white; cursor: pointer; text-align: center; }
.sensor-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.95); background: rgba(17,24,39,.75); box-shadow: 0 1px 5px rgba(0,0,0,.65); margin: auto; }
.sensor-value { margin-top: 3px; white-space: nowrap; background: rgba(0,0,0,.70); border: 1px solid rgba(255,255,255,.25); border-radius: 5px; padding: 2px 5px; font-size: 12px; font-weight: 650; }
.sensor-label { display: none; margin-top: 2px; white-space: nowrap; background: rgba(0,0,0,.75); border-radius: 4px; padding: 2px 5px; font-size: 11px; }
.sensor-marker:hover .sensor-label, .sensor-marker:focus .sensor-label { display: block; }
.legend-wrap { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 0 2px; color: var(--muted); font-size: 12px; }
.temp-legend { width: min(360px, 60%); height: 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: linear-gradient(90deg, rgb(0,40,160) 0%, rgb(0,90,255) 78.26%, rgb(225,225,225) 80.43%, rgb(255,35,35) 82.61%, rgb(170,0,0) 100%); }
.popover { position: fixed; z-index: 50; width: min(520px, calc(100vw - 28px)); right: 20px; bottom: 20px; background: rgba(22,27,34,.98); border: 1px solid #484f58; border-radius: 10px; padding: 15px; box-shadow: 0 15px 50px rgba(0,0,0,.55); }
.popover-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.popover h2 { font-size: 17px; margin: 0; }
.popover #detail-close { padding: 2px 9px; font-size: 22px; }
.current-value { font-size: 26px; font-weight: 700; margin-top: 2px; }
.chart-box { height: 230px; margin-top: 10px; }
.admin-page { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 18px; padding: 18px; }
.admin-sidebar { display: flex; flex-direction: column; gap: 16px; }
.admin-sidebar h2, .admin-sidebar h3 { margin-top: 0; }
.sensor-catalog-card { min-height: 400px; }
.section-head, .button-row, .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-head h2 { margin-bottom: 8px; }
.catalog { margin-top: 10px; max-height: 60vh; overflow: auto; }
.catalog-device { border-top: 1px solid var(--border); padding: 10px 0; }
.catalog-device:first-child { border-top: 0; }
.catalog-device-name { font-weight: 650; }
.catalog-model { color: var(--muted); font-size: 11px; margin-left: 5px; }
.catalog-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.field-chip { width: auto; padding: 5px 7px; font-size: 12px; background: #21262d; }
.field-chip.selected { outline: 2px solid var(--accent); }
.admin-workspace { min-width: 0; }
.admin-toolbar { margin-bottom: 14px; }
.inline-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.inline-label input[type=range] { width: 120px; padding: 0; }
.admin-stage { cursor: crosshair; }
.admin-marker-layer { pointer-events: auto; }
.admin-marker { position: absolute; transform: translate(-50%, -50%); cursor: grab; background: rgba(0,0,0,.76); border: 1px solid rgba(255,255,255,.65); border-radius: 8px; padding: 5px 7px; line-height: 1.15; min-width: 86px; text-align: center; }
.admin-marker.selected { outline: 2px solid var(--accent); }
.admin-marker .name { font-size: 11px; font-weight: 650; }
.admin-marker .field { font-size: 10px; color: #c9d1d9; }
.admin-marker .remove { position: absolute; top: -9px; right: -9px; width: 21px; height: 21px; padding: 0; border-radius: 50%; background: #5c1f1f; border-color: #b62324; line-height: 18px; }
#upload-form button { margin-top: 10px; }
@media (max-width: 900px) {
  .admin-page { grid-template-columns: 1fr; }
  .catalog { max-height: 340px; }
  .toolbar { grid-template-columns: 1fr; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .button-row { flex-wrap: wrap; }
}
.topnav { display:flex; align-items:center; gap:12px; }
.topnav form { margin:0; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px, 100%); }
.login-card h1 { margin:0; }
.login-card form button { margin-top:14px; width:100%; }
.login-error { margin:14px 0; padding:10px 12px; border:1px solid #8e2a2a; background:#351616; border-radius:7px; color:#ffb4ad; }
.polygon-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.admin-polygon-layer { pointer-events:auto; }
.room-polygon { fill:rgba(88,166,255,.11); stroke:rgba(88,166,255,.90); stroke-width:3; vector-effect:non-scaling-stroke; cursor:pointer; pointer-events:auto; }
.room-polygon.selected { fill:rgba(88,166,255,.19); stroke:#fff; stroke-width:4; }
.room-polygon.pending { fill:rgba(210,153,34,.15); stroke:#d29922; stroke-dasharray:8 5; pointer-events:none; }
.room-draft { fill:none; stroke:#d29922; stroke-width:3; stroke-dasharray:8 5; vector-effect:non-scaling-stroke; pointer-events:none; }
.room-vertex { fill:#d29922; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
.admin-stage.drawing-room { cursor:crosshair; }

/* V2.1 plan visibility + polygon editor */
.plan-actions { flex-wrap: wrap; margin-top: 10px; justify-content: flex-start; }
.danger-button { border-color: #8e2a2a; background: #351616; color: #ffb4ad; }
.danger-button:hover { border-color: #d84a4a; }
.admin-polygon-layer { pointer-events: none; }
.room-polygon { pointer-events: all; }
.room-edit-vertex {
  fill: #58a6ff;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: grab;
  pointer-events: all;
}
.room-edit-vertex:active { cursor: grabbing; }

/* V2.1 precision zoom */
.zoom-controls { display:flex; align-items:center; gap:6px; }
.zoom-controls button { padding:6px 9px; min-width:34px; }
.zoom-controls .inline-label { white-space:nowrap; }
.zoom-controls input[type=range] { width:110px; }
.admin-stage-viewport {
  width:100%;
  max-height:calc(100vh - 210px);
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:4px;
  background:#05070a;
}
.admin-stage { width:100%; max-width:none; transform-origin:0 0; }
.admin-stage > img { width:100%; max-width:none; height:auto; }

/* V3 local weather strip */
.weather-card {
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(0, 1fr);
  gap:20px;
  align-items:center;
  margin-bottom:18px;
  min-height:190px;
}
.weather-condition {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.weather-icon {
  width:86px;
  height:86px;
  flex:0 0 86px;
  display:grid;
  place-items:center;
  color:#ffd866;
}
.weather-icon[data-kind="moon"] { color:#c9d1d9; }
.weather-icon[data-kind="cloud"] { color:#9da7b3; }
.weather-icon svg { width:100%; height:100%; display:block; }
.weather-current-block { min-width:0; }
.weather-current {
  font-size:34px;
  line-height:1;
  font-weight:750;
  letter-spacing:-0.02em;
}
.weather-location {
  margin-top:7px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weather-chart-wrap {
  position:relative;
  min-width:0;
  height:155px;
  padding-bottom:22px;
}
.weather-chart-wrap canvas { width:100% !important; height:130px !important; }
.weather-chart-wrap #weather-status {
  position:absolute;
  left:0;
  bottom:0;
}
@media (max-width: 720px) {
  .weather-card { grid-template-columns:1fr; gap:10px; }
  .weather-condition { justify-content:center; }
  .weather-current-block { min-width:0; }
}


/* Build identification */
.version-badge {
  display:inline-block;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:.78rem;
  line-height:1.2;
  opacity:.8;
  vertical-align:middle;
}
.app-footer {
  padding:14px 20px 22px;
  text-align:center;
  font-size:.78rem;
  opacity:.55;
}
.login-version { position:fixed; top:12px; right:14px; z-index:10; }

/* V4 synchronized historical playback */
.playback-card { margin-bottom:18px; }
.playback-top,.playback-transport,.preset-buttons { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.playback-top label { display:flex; align-items:center; gap:5px; font-size:.9rem; }
.playback-top input { width:auto; }
.playback-transport { margin-top:12px; }
.playback-transport #playback-slider { flex:1 1 260px; min-width:180px; }
#playback-time { min-width:190px; text-align:center; }
#playback-status { margin-top:8px; }
.playback-card.playback-active { border-color:rgba(88,166,255,.65); }
.sensor-marker.no-playback-data { opacity:.48; }
@media(max-width:720px){ .playback-top,.playback-transport{align-items:stretch}.playback-top label{width:100%;justify-content:space-between}.playback-top input{flex:1}.playback-transport #playback-slider{order:10;flex-basis:100%}#playback-time{min-width:0} }