:root {
  --bg: #f4f5f7; --card: #ffffff; --ink: #1c2126; --sub: #66707a; --line: #dfe3e8;
  --shop: #d9662b; --dhw: #e0a530; --house: #2f7fbf; --tank: #3f9b6e; --cold: #5b6ee1; --warn-bg: #fff4d6; --warn: #7a5a00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171a; --card: #1e2327; --ink: #e8ebee; --sub: #98a2ad; --line: #2e353c; --warn-bg: #3a3112; --warn: #f0d58a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; padding: 0 16px 40px; }
header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0 6px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.sub { color: var(--sub); font-weight: 400; font-size: 13px; }
section { max-width: 1400px; margin: 14px auto 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.live { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); color: var(--sub); }
.pill.on { background: var(--shop); border-color: var(--shop); color: #fff; }
.notice { max-width: 1400px; margin: 10px auto 0; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.seg button { background: var(--card); color: var(--ink); border: 0; padding: 7px 14px; font: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--bg); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; border-top: 3px solid var(--line); }
.tile.shop { border-top-color: var(--shop); } .tile.house { border-top-color: var(--house); } .tile.tank { border-top-color: var(--tank); }
.tile .k { color: var(--sub); font-size: 12.5px; }
.tile .v { font-size: 24px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .v small { font-size: 13px; font-weight: 400; color: var(--sub); margin-left: 3px; }
.tile .d { color: var(--sub); font-size: 12.5px; margin-top: 2px; }
.chart { position: relative; height: 280px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filters .grow { flex: 1; }
select, input, button { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; }
button[type=submit] { background: var(--ink); color: var(--bg); border-color: var(--ink); cursor: pointer; }
.chk { display: inline-flex; gap: 6px; align-items: center; color: var(--sub); font-size: 13.5px; }
.chk input { padding: 0; }
.tablewrap { overflow-x: auto; max-height: 520px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--card); color: var(--sub); font-weight: 600; font-size: 12.5px; }
th.n, td.n { text-align: right; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; color: #fff; }
.tag.shop { background: var(--shop); } .tag.house { background: var(--house); }
.tag.hot_water, .tag.mixed { background: var(--dhw); color: #222; } .tag.heat { background: transparent; color: var(--sub); border: 1px solid var(--line); }
.exports a { margin-right: 12px; color: var(--house); }

/* ---- password gate (outside visitors only) and the crossfade into the page ---- */
header .grow { flex: 1; }
.linkbtn { background: none; border: 1px solid var(--line); color: var(--sub); border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; }
.app { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
body.booting .app, body.locked .app { opacity: 0; transform: scale(.985); filter: blur(6px); pointer-events: none; }
body.locked { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 700px at 50% 115%, #3a1a0c 0%, #14100e 45%, #0b0c0e 100%);
  opacity: 0; transition: opacity .9s ease; }
.gate[hidden] { display: none; }
.gate.show { opacity: 1; }
.gate-glow { position: absolute; width: 520px; height: 520px; max-width: 90vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,128,48,.22) 0%, rgba(255,128,48,.06) 45%, transparent 70%);
  filter: blur(8px); animation: ember 6s ease-in-out infinite; pointer-events: none; }
@keyframes ember { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.gate-card { position: relative; width: 100%; max-width: 340px; text-align: center; color: #f3ede8;
  background: rgba(28, 24, 22, .62); border: 1px solid rgba(255, 170, 110, .18); border-radius: 18px;
  padding: 34px 28px 26px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateY(10px); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.gate.show .gate-card { transform: none; }
.gate-flame { width: 46px; height: 46px; fill: #ff8a3d; filter: drop-shadow(0 0 14px rgba(255,138,61,.55)); }
.gate-card h1 { font-size: 21px; margin: 10px 0 2px; letter-spacing: .2px; }
.gate-sub { margin: 0 0 20px; color: #b9aca3; font-size: 13.5px; }
.gate-card input[type=password] { width: 100%; text-align: center; font-size: 16px; letter-spacing: 2px; color: #fff;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s; }
.gate-card input[type=password]::placeholder { letter-spacing: 0; color: #8d8179; }
.gate-card input[type=password]:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(255,138,61,.2); }
.gate-card button { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600;
  color: #1b120c; background: linear-gradient(180deg, #ffa25c, #f0762a); cursor: pointer; transition: filter .2s, transform .1s; }
.gate-card button:hover { filter: brightness(1.07); } .gate-card button:active { transform: translateY(1px); }
.gate-card button:disabled { filter: saturate(.4) brightness(.8); cursor: default; }
.gate-err { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: #ff9b8a; }
.gate-card.shake { animation: shake .38s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .app, .gate, .gate-card { transition-duration: .01s; } .gate-glow, .gate-card.shake { animation: none; } }