:root {
  --navy:#0f172a;
  --navy2:#1e293b;
  --accent:#2563eb;
  --accent-l:#dbeafe;
  --accent-d:#1d4ed8;
  --green:#16a34a;
  --green-l:#dcfce7;
  --green-d:#14532d;
  --amber:#d97706;
  --amber-l:#fef3c7;
  --red:#dc2626;
  --red-l:#fee2e2;
  --elec:#7c3aed;
  --elec-l:#ede9fe;
  --elec-d:#5b21b6;
  --border:#e2e8f0;
  --border2:#cbd5e1;
  --bg:#f8fafc;
  --card:#fff;
  --surface:#f1f5f9;
  --text:#0f172a;
  --muted:#64748b;
  --hint:#94a3b8;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05);
}

*, *::before, *::after { box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
button, input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }

#loadScreen {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  transition:opacity .35s ease,visibility 0s linear .35s;
}
#loadScreen.out { visibility:hidden; opacity:0; pointer-events:none; }
.load-icon { margin-bottom:14px; font-size:46px; }
.load-title { color:#fff; font-size:20px; font-weight:800; }
.load-subtitle { margin-top:6px; color:rgba(255,255,255,.5); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.load-track { width:190px; height:3px; margin-top:28px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.14); }
.load-progress { height:100%; border-radius:99px; background:#a78bfa; animation:loadSweep 1.4s ease-in-out infinite; }
@keyframes loadSweep { 0% { width:0; margin-left:0; } 50% { width:65%; margin-left:18%; } 100% { width:0; margin-left:100%; } }

.topbar {
  position:sticky;
  top:0;
  z-index:200;
  display:flex;
  min-height:56px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.brand { display:flex; flex-direction:column; color:var(--text); text-decoration:none; }
.brand span { font-size:13px; font-weight:800; }
.brand small { margin-top:1px; color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.topbar-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.quiet-button, .primary-button {
  min-height:38px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  font-weight:750;
}
.quiet-button { padding:7px 12px; font-size:12px; }
.primary-button { padding:10px 20px; border-color:var(--elec); background:var(--elec); color:#fff; }
.quiet-button:hover { border-color:var(--border2); background:var(--surface); }
.primary-button:hover { background:var(--elec-d); }
.user-chip { max-width:260px; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }

.workspace-nav {
  position:sticky;
  top:56px;
  z-index:190;
  display:flex;
  gap:6px;
  padding:9px 18px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
  background:var(--card);
  scrollbar-width:none;
}
.workspace-nav::-webkit-scrollbar { display:none; }
.workspace-nav a {
  flex:0 0 auto;
  min-height:36px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.workspace-nav a:hover { border-color:var(--border); background:var(--surface); color:var(--text); }
.workspace-nav a[aria-current="page"] { border-color:#c4b5fd; background:var(--elec-l); color:var(--elec-d); }

.login-wall {
  min-height:calc(100vh - 112px);
  padding:44px 20px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.login-wall h1 { margin:10px 0 6px; font-size:22px; }
.login-wall p { max-width:420px; margin:0 0 20px; color:var(--muted); line-height:1.55; }
.login-icon { font-size:42px; }

.page-shell { width:min(1220px,calc(100% - 32px)); margin:0 auto; padding:26px 0 80px; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.eyebrow { display:block; margin-bottom:7px; color:var(--elec-d); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.page-intro h1 { margin:0; font-size:clamp(28px,3vw,40px); letter-spacing:-.035em; line-height:1.05; }
.page-intro p { max-width:680px; margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.month-control { display:flex; flex:0 0 auto; align-items:center; gap:7px; padding:7px; border:1px solid var(--border); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
.month-control button { min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; font-weight:800; }
.month-control button:hover { border-color:#c4b5fd; background:var(--elec-l); color:var(--elec-d); }
.month-control strong { min-width:132px; text-align:center; font-size:13px; }
.month-control .today-button { min-width:auto; padding:0 12px; }

.energy-workspace { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--card); box-shadow:var(--shadow); }
.energy-workspace-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:21px 22px 16px; }
.energy-workspace-head h2 { margin:0; font-size:20px; letter-spacing:-.015em; line-height:1.25; }
.energy-workspace-head p { max-width:760px; margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.energy-asof { flex:0 0 auto; padding-top:4px; color:var(--muted); font-size:11px; white-space:nowrap; }
.energy-tabs { display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)); gap:6px; padding:0 16px 14px; overflow-x:auto; }
.energy-tab { min-height:44px; padding:8px 13px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; font-size:12px; font-weight:850; white-space:nowrap; }
.energy-tab[aria-selected="true"] { border-color:#c4b5fd; background:var(--elec-l); color:var(--elec-d); }
.energy-tab:focus-visible, .energy-toggle:focus-visible, .energy-kpi:focus-visible, .energy-metric-link:focus-visible, .month-control button:focus-visible, .quiet-button:focus-visible, .primary-button:focus-visible { outline:3px solid rgba(37,99,235,.28); outline-offset:2px; }
.energy-panel { padding:20px 22px 22px; border-top:1px solid var(--border); }
.energy-panel[hidden] { display:none; }
.energy-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.energy-panel-head h3 { margin:0; font-size:15px; }
.energy-panel-head p { max-width:700px; margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.energy-toggle-row { display:flex; gap:7px; flex-wrap:wrap; }
.energy-toggle { min-height:40px; padding:7px 14px; border:1.5px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); cursor:pointer; font-size:12px; font-weight:850; }
.energy-toggle[aria-pressed="true"] { border-color:var(--elec); background:var(--elec-l); color:var(--elec-d); }

.energy-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.energy-kpi { min-height:140px; padding:14px; border:1px solid var(--border); border-left:4px solid var(--quality,#64748b); border-radius:12px; background:var(--card); color:var(--text); cursor:pointer; text-align:left; }
.energy-kpi:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.energy-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.energy-kpi-label { color:var(--muted); font-size:10.5px; font-weight:850; letter-spacing:.05em; line-height:1.35; text-transform:uppercase; }
.energy-kpi-info { color:var(--elec-d); font-size:13px; }
.energy-kpi-value { display:block; margin-top:13px; font-size:23px; font-weight:850; line-height:1.15; }
.energy-kpi-sub { display:block; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.45; }
.energy-quality { display:inline-flex; align-items:center; margin-top:8px; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:850; text-transform:capitalize; }
.quality-complete { --quality:#15803d; }
.quality-partial, .quality-estimate { --quality:#b45309; }
.quality-missing { --quality:#64748b; }
.quality-invalid { --quality:#b91c1c; }
.energy-quality.quality-complete { background:var(--green-l); color:var(--green-d); }
.energy-quality.quality-partial, .energy-quality.quality-estimate { background:var(--amber-l); color:#92400e; }
.energy-quality.quality-missing { background:var(--surface); color:var(--muted); }
.energy-quality.quality-invalid { background:var(--red-l); color:var(--red); }
.energy-estimate-meta { display:block; margin-top:3px; color:#92400e; font-size:10px; line-height:1.4; white-space:normal; }

.energy-card { margin:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.energy-data-note { margin-bottom:14px; padding:10px 12px; border-radius:9px; background:var(--surface); color:var(--muted); font-size:11.5px; line-height:1.55; }
.energy-data-note.warn { border:1px solid #fcd34d; background:var(--amber-l); color:#92400e; }
.energy-chart-scroll, .energy-table-wrap { max-width:100%; overflow-x:auto; }
.energy-trend-svg { display:block; width:100%; min-width:560px; height:auto; }
.energy-table-wrap { margin-top:14px; }
.energy-data-table { width:100%; min-width:690px; border-collapse:collapse; font-size:12px; }
.energy-data-table caption { padding:0 0 8px; color:var(--muted); font-size:11px; text-align:left; }
.energy-data-table th, .energy-data-table td { padding:9px; border-top:1px solid var(--border); text-align:left; white-space:nowrap; }
.energy-data-table thead th { border-top:none; background:var(--surface); color:var(--muted); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.energy-metric-link { padding:3px 0; border:none; background:none; color:var(--accent-d); cursor:pointer; font:inherit; font-weight:750; text-decoration:underline dotted; text-underline-offset:3px; }
.energy-property-list { display:flex; flex-direction:column; gap:8px; }
.energy-property-row { display:grid; width:100%; grid-template-columns:minmax(150px,1.2fr) minmax(180px,2fr) minmax(105px,.7fr); align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border); border-left:4px solid var(--quality,#64748b); border-radius:10px; background:var(--card); color:var(--text); }
.energy-property-row:hover { background:var(--surface); }
.energy-property-label { display:flex; min-width:0; flex-direction:column; }
.energy-property-label strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.energy-property-label small { margin-top:2px; color:var(--muted); font-size:10.5px; }
.energy-property-track { height:12px; overflow:hidden; border-radius:999px; background:var(--surface); }
.energy-property-track > span { display:block; height:100%; border-radius:999px; }
.energy-property-value { font-size:12px; font-weight:800; text-align:right; white-space:nowrap; }
.energy-empty { padding:34px 18px; border-radius:10px; background:var(--surface); color:var(--muted); font-size:13px; line-height:1.55; text-align:center; }
.energy-anomaly-list { display:flex; flex-direction:column; gap:9px; }
.energy-anomaly { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px; border:1px solid var(--border); border-left:4px solid var(--amber); border-radius:10px; background:var(--card); }
.energy-anomaly.drop { border-left-color:var(--accent); }
.energy-anomaly strong { font-size:13px; }
.energy-anomaly p { margin:4px 0 0; color:var(--muted); font-size:11.5px; line-height:1.5; }
.energy-room-matrix { min-width:900px; }
.energy-room-matrix th:first-child { position:sticky; left:0; z-index:1; min-width:240px; background:var(--card); white-space:normal; }
.energy-matrix-cell span { display:inline-flex; padding:5px 8px; border-radius:7px; font-size:11px; font-weight:850; }
.energy-matrix-cell.state-valid span { background:var(--green-l); color:var(--green-d); }
.energy-matrix-cell.state-missing span { background:var(--surface); color:var(--muted); }
.energy-matrix-cell.state-gap span, .energy-matrix-cell.state-unresolved span { background:var(--amber-l); color:#92400e; }
.energy-matrix-cell.state-invalid span, .energy-matrix-cell.state-duplicate span { background:var(--red-l); color:var(--red); }

.truth-note { display:grid; grid-template-columns:auto 1fr; gap:5px 18px; margin-top:16px; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.truth-note strong { grid-row:1/4; color:var(--elec-d); font-size:12px; }
.truth-note p { margin:0; color:var(--muted); font-size:11.5px; line-height:1.5; }
.metric-id { color:var(--hint); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9.5px; overflow-wrap:anywhere; }

.energy-drawer { position:fixed; inset:0; z-index:9100; display:none; }
.energy-drawer.open { display:block; }
.energy-drawer-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); }
.energy-drawer-sheet { position:absolute; top:0; right:0; display:flex; width:min(620px,94vw); height:100%; flex-direction:column; background:var(--card); box-shadow:-20px 0 48px rgba(15,23,42,.22); outline:none; }
.energy-drawer-head { display:flex; align-items:flex-start; gap:12px; padding:18px; border-bottom:1px solid var(--border); }
.energy-drawer-head > div { flex:1; min-width:0; }
.energy-drawer-head h3 { margin:0; font-size:17px; }
.energy-drawer-head p { margin:4px 0 0; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.energy-drawer-close { width:38px; height:38px; border:none; border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; font-size:22px; }
.energy-drawer-body { padding:18px; overflow-y:auto; }
.energy-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
.energy-detail { padding:10px; border-radius:9px; background:var(--surface); }
.energy-detail b { display:block; margin-bottom:3px; color:var(--muted); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.energy-detail span { font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.energy-detail-wide { grid-column:1/-1; }

#toast { position:fixed; bottom:24px; left:50%; z-index:9200; padding:10px 18px; border-radius:9px; background:var(--navy2); color:#fff; font-size:13px; font-weight:750; opacity:0; pointer-events:none; transform:translateX(-50%); transition:opacity .2s; }
#toast.show { opacity:1; }

@media (max-width:800px) {
  .page-shell { width:min(100% - 24px,1220px); padding-top:18px; }
  .page-intro { align-items:flex-start; flex-direction:column; }
  .month-control { width:100%; }
  .month-control strong { flex:1; min-width:0; }
  .energy-workspace-head { flex-direction:column; }
  .energy-asof { white-space:normal; }
  .energy-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .truth-note { grid-template-columns:1fr; }
  .truth-note strong { grid-row:auto; }
}

@media (max-width:560px) {
  .topbar { padding:0 12px; }
  .user-chip { display:none!important; }
  .workspace-nav { padding-inline:12px; }
  .page-intro h1 { font-size:30px; }
  .month-control { gap:5px; padding:6px; }
  .month-control button { padding:0 8px; }
  .month-control .today-button { display:none; }
  .energy-workspace-head { padding:18px 16px 14px; }
  .energy-tabs { grid-template-columns:repeat(4,minmax(125px,1fr)); padding-inline:12px; }
  .energy-panel { padding:15px 14px 17px; }
  .energy-kpis { grid-template-columns:1fr; }
  .energy-property-row { grid-template-columns:1fr; }
  .energy-property-value { text-align:left; }
  .energy-detail-grid { grid-template-columns:1fr; }
  .energy-detail-wide { grid-column:auto; }
  .energy-drawer-sheet { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}