/* ==========================================================================
   energylog — the finish

   Loaded after ui.css. ui.css is the system: tokens, the four looks, the
   status palette and every rule about what a colour may mean. This file is
   the finish on top of it — type, depth, icons, motion, and the newer
   screens — and it changes no meaning: status colours are still only ever
   status, the held hue is still the brand hue, and every band still ships as
   icon + word + number.

   Kept separate on purpose. Removing the one <link> to this file puts the
   previous appearance back exactly, which makes the finish cheap to try.
   ========================================================================== */

/* ------------------------------------------------------------------ type */

/* Inter, served from here (no third-party request), Latin only: 48 KB, cached
   for a week. Everything else — Devanagari included —
   falls through to the system font as before. */
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: "Inter Var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --grad: linear-gradient(135deg, #7c3aed 0%, #4f46e5 48%, #0891b2 100%);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html, body {
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.num, .stat-v, .site-read b { font-feature-settings: "tnum", "cv11"; }

/* ---------------------------------------------------- surfaces, refined */

:root,
:root[data-theme="light"] {
  --page:   #f3f4f8;
  --sunk:   #eef0f5;
  --line:   rgba(17, 24, 39, .085);
  --line-firm: rgba(17, 24, 39, .18);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 18px rgba(16, 24, 40, .055);
  --lift:   0 2px 6px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .12);
}
:root[data-theme="dark"] {
  --page:    #0b0d12;
  --surface: #12151c;
  --sunk:    #191d26;
  --raised:  #1c212b;
  --line:    rgba(226, 232, 240, .09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:    #0b0d12;
    --surface: #12151c;
    --sunk:    #191d26;
    --raised:  #1c212b;
    --line:    rgba(226, 232, 240, .09);
  }
}

/* The rail is its own dark surface in the bright look: the classic frame of
   a control room — dark chrome, bright figures. */
:root {
  --rail-bg:     linear-gradient(180deg, #121531 0%, #171b3f 55%, #121531 100%);
  --rail-ink:    #e8e9f7;
  --rail-muted:  #a3a8cc;
  --rail-hover:  rgba(255, 255, 255, .07);
  --rail-active: rgba(139, 92, 246, .24);
  --rail-line:   rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------ icons */

.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em;
}

/* ------------------------------------------------------------------ brand */

.logo {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--grad);
  box-shadow: 0 6px 16px -6px rgba(99, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.logo svg {
  width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.brand { text-decoration: none; color: inherit; gap: 10px; font-size: 1.28rem; letter-spacing: -.035em; }
.brand-word { font-weight: 720; }
.brand b { font-weight: 720; }

/* ------------------------------------------------------------------- rail */

@media (min-width: 900px) {
  .rail { padding: 20px 14px 16px; gap: 3px; }
}
.rail-sec {
  margin: 10px 12px 6px; font-size: .68rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}
.rail-item { border-radius: 11px; gap: 12px; font-weight: 560; position: relative; }
.rail-item .ic { display: inline-grid; place-items: center; width: 22px; font-size: 1.12rem; }
.rail-item .badge {
  min-width: 22px; text-align: center; padding: 2px 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 20%, transparent);
}

.rail-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 10px 2px;
  border-top: 1px solid var(--line);
}
.rail-user .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.ru-text { display: flex; flex-direction: column; min-width: 0; }
.ru-text b { font-size: .84rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-text small { font-size: .72rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bright: the dark frame. */
:root[data-look="bright"] .rail {
  background: var(--rail-bg); border-right: 0;
  color: var(--rail-ink);
  box-shadow: 1px 0 0 rgba(0, 0, 0, .04), 8px 0 30px -18px rgba(17, 20, 49, .5);
}
:root[data-look="bright"] .rail .brand b { color: #b9a4ff; }
:root[data-look="bright"] .rail-sec { color: #7d83ad; }
:root[data-look="bright"] .rail-item { color: var(--rail-muted); }
:root[data-look="bright"] .rail-item:hover { background: var(--rail-hover); color: #fff; }
:root[data-look="bright"] .rail-item[aria-current="page"] {
  background: var(--rail-active); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .25);
}
:root[data-look="bright"] .rail-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad);
}
:root[data-look="bright"] .rail-item[aria-current="page"] .ic { color: #c4b5fd; }
:root[data-look="bright"] .rail-item .badge.badge-held { background: #8b5cf6; color: #fff; }
:root[data-look="bright"] .rail-foot { border-top-color: var(--rail-line); }
:root[data-look="bright"] .rail-user { border-top-color: var(--rail-line); }
:root[data-look="bright"] .ru-text small { color: var(--rail-muted); }
:root[data-look="bright"] .rail-toggle {
  background: #1b1f45; color: #c7cbe6; border-color: rgba(255, 255, 255, .12);
}
:root[data-look="bright"] .rail-toggle:hover { color: #fff; }
:root[data-look="bright"] .rail :focus-visible { outline-color: #c4b5fd; }

/* -------------------------------------------------------------- topbar */

.topbar { gap: 14px; margin-bottom: calc(var(--gap) + 4px); align-items: center; flex-wrap: nowrap; }
.tb-title { flex: 1; min-width: 0; }
.tb-title h1 { flex: none; font-size: calc(1.62rem * var(--step)); letter-spacing: -.035em; font-weight: 740; line-height: 1.15; }
.topbar .sub {
  margin-top: 4px; font-size: var(--t-small); color: var(--ink-muted);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.topbar .sub .sep { opacity: .5; }
.topbar .sub .kind-chip { font-size: .72rem; }
.topbar .sub .kind-chip .i { width: 1em; height: 1em; }
.top-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-logo { display: none; text-decoration: none; color: inherit; }
/* The chat button is placed by ai.js at the end of the bar; order puts
   it beside the other tools rather than after them. */
.topbar .ai-btn { order: 1; min-height: 40px; box-shadow: var(--shadow); }
.topbar .top-tools { order: 2; }
.tb-logo .brand-word { display: none; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--ink-2);
  transition: background var(--speed), color var(--speed), transform var(--speed), border-color var(--speed);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-firm); }
.icon-btn:active { transform: scale(.96); }
.icon-btn .i { width: 19px; height: 19px; }
.icon-btn.spinning .i { animation: spin .8s linear infinite; }
:root[data-look="console"] .icon-btn { box-shadow: none; border-radius: var(--radius-sm); }

/* The live chip: a pulse and the age of what is on screen. */
.live {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); position: relative;
}
.live i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--ok); opacity: 0; animation: ping 2.4s var(--ease) infinite;
}
.live.is-off i { background: var(--ink-muted); }
.live.is-off i::after { display: none; }
.live.is-off { color: var(--ink-muted); }
:root[data-look="console"] .live { border-radius: var(--radius-sm); box-shadow: none; font-family: var(--mono); }

@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* The display menu. */
.dmenu { position: relative; }
.dmenu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  width: 290px; padding: 8px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--lift);
  animation: pop .16s var(--ease);
}
.dmenu-pop[hidden] { display: none; }
.dmenu-h {
  padding: 6px 10px 6px; font-size: .68rem; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
}
.dmenu-list { display: grid; gap: 2px; }
.dmenu-list button, .dmenu-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  text-align: left; color: var(--ink);
}
.dmenu-list button:hover, .dmenu-row:hover { background: var(--sunk); }
.dmenu-list button > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dmenu-list b { font-size: .86rem; font-weight: 640; }
.dmenu-list small { font-size: .72rem; color: var(--ink-muted); }
.dmenu-list .tick { color: var(--brand); opacity: 0; }
.dmenu-list button[aria-pressed="true"] { background: var(--brand-soft); }
.dmenu-list button[aria-pressed="true"] .tick { opacity: 1; }
.dmenu-row { font-size: .86rem; font-weight: 560; color: var(--ink-2); }
.dmenu-row[aria-pressed="true"] { color: var(--brand); }
.dmenu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.sw {
  width: 30px; height: 22px; border-radius: 7px; flex: none;
  border: 1px solid var(--line-firm);
}
.sw-bright  { background: linear-gradient(90deg, #171b3f 0 30%, #f3f4f8 30%); }
.sw-console { background: linear-gradient(90deg, #0b0d12 0 30%, #14161a 30%); border-color: #333; }
.sw-bold    { background: linear-gradient(90deg, #6d28d9 0 50%, #eab308 50%); }
.sw-spatial { background: linear-gradient(135deg, #0891b2, #7c3aed); }

@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ------------------------------------------------------------------ views */

.view { animation: rise .32s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.card { border-radius: var(--radius); }
:root[data-look="bright"] .card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.card-h h2 {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: var(--t-head); font-weight: 700; letter-spacing: -.015em;
}
.card-h h2 .i { color: var(--brand); width: 1.1em; height: 1.1em; }
.card-h .meta { font-size: var(--t-small); color: var(--ink-muted); }
.card-note { margin: -6px 0 12px; font-size: var(--t-small); color: var(--ink-muted); }

.section h2 { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.015em; }
.section h2 .i { color: var(--brand); }

.grid.split { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); margin-top: var(--gap); align-items: start; }
@media (max-width: 1100px) { .grid.split { grid-template-columns: minmax(0, 1fr); } }
.grid.split > *, .grid.stats > *, .grid.sites > * { min-width: 0; }
.card-h > * { min-width: 0; }
.scada-card .scada-bar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.scada-card .scada-bar::-webkit-scrollbar { display: none; }
.card-h .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 420px) {
  .arow { gap: 9px; }
  .arow-go { display: none; }
  .arow-ic { width: 30px; height: 30px; }
  .arow-v { font-size: 1.05rem; }
}

.grid.stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ------------------------------------------------------------- greeting */

.hello {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 calc(var(--gap) + 2px); padding: 22px 24px;
  border-radius: var(--radius-lg); color: #fff;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(6, 182, 212, .35), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(124, 58, 237, .45), transparent 60%),
    linear-gradient(120deg, #1b1f4b, #2a1f6b 55%, #183b63);
  box-shadow: 0 18px 40px -22px rgba(42, 31, 107, .8);
  position: relative; overflow: hidden;
}
.hello::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.hello > * { position: relative; z-index: 1; }
.hello h2 { margin: 0; font-size: calc(1.45rem * var(--step)); font-weight: 740; letter-spacing: -.03em; }
.hello p { margin: 6px 0 0; color: rgba(255, 255, 255, .8); font-size: var(--t-body); }
.hello-date {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-small); font-weight: 600; color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
}
:root[data-look="console"] .hello { border-radius: var(--radius); box-shadow: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
:root[data-look="console"] .hello p, :root[data-look="console"] .hello-date { color: var(--ink-2); }
:root[data-look="console"] .hello-date { background: var(--sunk); border-color: var(--line); }
:root[data-look="console"] .hello::after { display: none; }
:root[data-look="bold"] .hello { border-radius: var(--radius); }

/* ------------------------------------------------------------ stat tiles */

.stat { position: relative; overflow: hidden; padding: 18px 20px 16px; display: flex; flex-direction: column; }
.stat { border-top-width: 0; }
.stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--tone, var(--grad));
}
.stat.tone-ok   { --tone: var(--ok); }
.stat.tone-crit { --tone: var(--critical); }
.stat.tone-warm { --tone: var(--warm); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.stat-head .stat-k { margin: 0; font-size: var(--t-small); font-weight: 620; color: var(--ink-muted); }
.stat-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: var(--tone-ink, var(--brand));
  background: color-mix(in srgb, var(--tone-ink, var(--brand)) 12%, transparent);
}
.stat.tone-ok   .stat-ic { --tone-ink: var(--ok); }
.stat.tone-crit .stat-ic { --tone-ink: var(--critical); }
.stat.tone-warm .stat-ic { --tone-ink: var(--warm-text); }
.stat-ic .i { width: 18px; height: 18px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stat-v { font-size: calc(2.35rem * var(--step)); font-weight: 760; letter-spacing: -.045em; }
.stat-v .u { font-size: var(--t-head); font-weight: 600; color: var(--ink-muted); letter-spacing: -.01em; }
.stat-s { margin-top: 8px; line-height: 1.45; }
.stat-s .band { vertical-align: 1px; margin-left: 4px; }
.stat-row .mixbar { flex: 1 0 100%; }

.ring { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .ring-bg { stroke: var(--sunk); }
.ring .ring-fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.ring text { transform: rotate(90deg); transform-origin: 18px 18px; font-size: 9px; font-weight: 700; fill: var(--ink-2); }

.mixbar { display: flex; gap: 3px; height: 8px; margin-top: 12px; border-radius: 999px; overflow: hidden; }
.mixbar i { display: block; min-width: 6px; border-radius: 999px; }

/* Bold keeps its filled tiles, and the new parts follow the fill. */
:root[data-look="bold"] .stat::before { display: none; }
:root[data-look="bold"] .stat[class*="tone-"] .stat-ic { background: rgba(255, 255, 255, .18); color: inherit; }
:root[data-look="console"] .stat::before { height: 2px; }
:root[data-look="console"] .stat-ic { border-radius: var(--radius-sm); }

/* ------------------------------------------------------- attention list */

.alist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 -8px; }
.arow {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: background var(--speed);
}
.arow:hover { background: var(--sunk); }
.arow-ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: var(--high-text); background: color-mix(in srgb, var(--high) 14%, transparent);
}
.arow-ic.tone-critical { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.arow-ic.tone-warm { color: var(--warm-text); background: color-mix(in srgb, var(--warm) 18%, transparent); }
.arow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arow-main b { font-weight: 640; font-size: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow-main small { font-size: var(--t-micro); color: var(--ink-muted); }
.arow-v { font-size: 1.25rem; font-weight: 740; letter-spacing: -.03em; }
.arow-v small { font-size: .7rem; color: var(--ink-muted); margin-left: 2px; font-weight: 600; }
.arow-go { color: var(--ink-muted); }

.arow-ic.tone-ok { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.arow[hidden] { display: none; }
.checks .arow.grouped { grid-column: 1 / -1; }
button.arow { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.arow-t { font-size: var(--t-micro); color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.arow-ic.tone-high { color: var(--high-text); background: color-mix(in srgb, var(--high) 14%, transparent); }
.arow-ic.tone-held { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.arow-ic.tone-quiet { color: var(--ink-muted); background: color-mix(in srgb, var(--ink-muted) 13%, transparent); }
.checks { margin-top: var(--gap); }
.checks .alist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 10px; }
.checks .arow-main small { white-space: normal; line-height: 1.4; }
/*
 * On a phone the headline of an alert row ("Things to check", "Needs
 * attention") wraps instead of being cut. The grouped rows are whole
 * sentences ("19 sensors are holding one value — the site is reporting, the
 * sensors have stopped measuring"), about 600px wide, and at 390px only the
 * first 250px showed: "19 sensors are holding one value — t...". Desktop rows
 * have the room and stay one line.
 */
@media (max-width: 620px) {
  .arow-main b { white-space: normal; overflow-wrap: break-word; line-height: 1.35; }
}
.checks-ok {
  display: flex; align-items: center; gap: 10px; margin-top: var(--gap); padding: 12px 16px;
  border-radius: var(--radius); font-size: var(--t-small); font-weight: 600;
  color: var(--ok-text); background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}
.warmest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.warmest-h { font-size: var(--t-micro); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); margin: 0 0 6px; }
a.icon-btn { display: grid; place-items: center; text-decoration: none; }

.allclear { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px 4px; }
.ac-ic {
  width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.ac-ic .i { width: 24px; height: 24px; }
.allclear b { display: block; font-size: var(--t-body); font-weight: 650; margin-bottom: 4px; }
.allclear span { display: block; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.5; }
.allclear .empty-held { margin: 6px 0 0; max-width: none; text-align: left; font-weight: 600; color: var(--brand); }

/* ------------------------------------------------------------ health */

.health-body { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { width: 148px; height: 148px; flex: none; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 11; }
.donut .hd-bg { stroke: var(--sunk); }
.donut text { transform: rotate(90deg); transform-origin: 50px 50px; }
.donut .d-n { font-size: 17px; font-weight: 780; fill: var(--ink); letter-spacing: -.04em; }
.donut .d-k { font-size: 7.5px; font-weight: 600; fill: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.hd-ok   { stroke: var(--ok);   background: var(--ok); }
.hd-held { stroke: var(--brand); background: var(--brand); }
.hd-late { stroke: var(--warm); background: var(--warm); }
.hd-off  { stroke: color-mix(in srgb, var(--ink-muted) 60%, transparent); background: color-mix(in srgb, var(--ink-muted) 60%, transparent); }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend li > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend li > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.legend b { font-size: var(--t-small); font-weight: 640; }
.legend small { font-size: var(--t-micro); color: var(--ink-muted); }
.legend em { font-style: normal; font-weight: 720; font-size: 1.05rem; }

/* ------------------------------------------------------------- energy */

.stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.en-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.en-fig { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.en-fig span { font-size: var(--t-micro); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.en-fig b { font-size: 1.45rem; font-weight: 760; letter-spacing: -.035em; }
.en-fig b small { font-size: .72rem; color: var(--ink-muted); margin-left: 3px; font-weight: 600; letter-spacing: 0; }
.en-fig em { font-style: normal; font-size: var(--t-micro); color: var(--ink-muted); }
.en-fig.gen b { color: var(--kind-solar); }
.rank a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b b";
  gap: 5px 10px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink);
}
.rank a:hover { background: var(--sunk); }
.rk-bar .b-gen { background: linear-gradient(90deg, #f59e0b, #facc15); }
:root[data-look="console"] .en-fig { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------- finder */

.finder {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: calc(var(--gap) + 2px);
}
.search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px;
  height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink-muted);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); color: var(--brand); }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--t-body); color: var(--ink);
}
.search input::placeholder { color: var(--ink-muted); }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.chip:hover { border-color: var(--line-firm); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip .i { width: 15px; height: 15px; }
.chip-n { font-size: .72rem; opacity: .7; font-weight: 700; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 34px 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg); pointer-events: none;
}
.finder-n { margin-left: auto; font-size: var(--t-small); color: var(--ink-muted); font-weight: 600; }
:root[data-look="console"] :is(.search, .chip, .select-wrap select) { border-radius: var(--radius-sm); box-shadow: none; }
/*
 * The finder is the one row a phone user taps most, and it was the one row
 * still under the 44px --tap that .seg and .looks already grow to on a touch
 * screen: chips and the two selects 36px, the readings filter 38px. Raised on
 * coarse pointers only, so the desktop bar keeps its compact height.
 */
@media (pointer: coarse) {
  .chip, .select-wrap select, .search.small-search { height: var(--tap); }
}

/* ------------------------------------------------------------ site cards */

.grid.sites { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.site {
  gap: 12px; padding: 16px 16px 13px;
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.site[hidden] { display: none; }
.site::after {
  background: radial-gradient(220px 130px at 100% 0%,
    color-mix(in srgb, var(--kind, var(--kind-empty)) 11%, transparent), transparent 70%);
}
.site:hover {
  transform: translateY(-2px); box-shadow: var(--lift);
  border-color: color-mix(in srgb, var(--kind, var(--brand)) 40%, var(--line));
}
.site.state-warm, .site.state-high, .site.state-critical {
  border-color: color-mix(in srgb, var(--kind) 45%, var(--line));
  box-shadow: inset 0 3px 0 var(--kind), var(--shadow);
}
.site-top { align-items: center; gap: 12px; }
.site-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: var(--kind, var(--kind-empty));
  background: color-mix(in srgb, var(--kind, var(--kind-empty)) 13%, transparent);
}
.site-ic .i { width: 20px; height: 20px; }
.site-name { font-size: calc(.95rem * var(--step)); font-weight: 680; letter-spacing: -.01em; line-height: 1.25; }
.site-meta { margin-top: 2px; font-weight: 500; }
.site .dot { width: 9px; height: 9px; align-self: flex-start; margin-top: 4px; position: relative; }
.site .dot-ok { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.site-body { align-items: flex-end; }
.site-read b { font-size: calc(1.95rem * var(--step)); font-weight: 760; letter-spacing: -.045em; line-height: 1; }
.site-read .u { font-size: var(--t-small); font-weight: 600; color: var(--ink-muted); }
/* margin-top auto: footers line up at the bottom of every card in a row */
.site-foot {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.site-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); font-weight: 650; color: var(--kind, var(--ink-muted));
}
.site-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-count { font-size: var(--t-micro); color: var(--ink-muted); font-weight: 560; }
.site-count::before { content: "·"; margin-right: 8px; opacity: .6; }
.site-go { margin-left: auto; color: var(--ink-muted); transition: transform .2s var(--ease), color .2s; display: inline-flex; }
.site:hover .site-go { transform: translateX(3px); color: var(--kind, var(--brand)); }
.held-note { margin-top: -4px; }
.chanbar { display: flex; gap: 2px; height: 5px; border-radius: 999px; overflow: hidden; margin-top: -2px; }
.chanbar i { display: block; min-width: 4px; }
.chanbar .c-ok { background: var(--ok); opacity: .85; }
.chanbar .c-held { background: repeating-linear-gradient(135deg, var(--brand) 0 3px, color-mix(in srgb, var(--brand) 45%, transparent) 3px 6px); }
:root[data-look="console"] .chanbar { width: 120px; flex: none; }

/* A held card: dashed all round now that the left edge is no longer a stripe. */
.site.is-held { border-left-style: dashed; }
.site.is-held .site-ic { opacity: .85; }

/* Console: a row of instrument per site, as before. */
:root[data-look="console"] .site { box-shadow: none; border-radius: 0; gap: 8px 14px; }
:root[data-look="console"] .site:hover { transform: none; box-shadow: none; }
/*
 * The name keeps room for itself. With flex-basis 0 the name was the only item
 * on the row that could give, so once the "not updating" note and the 120px
 * channel bar joined the row it was squeezed to a letter wide on any screen
 * under ~760px: at 390px every one of the 76 cards printed its name one letter
 * per line, 400-790px tall, and 53 of them pushed the reading off the card.
 * A 160px basis plus wrap moves the reading to a second line only when the row
 * cannot hold both; at 1024px and up every row is still one line. On a phone
 * the name always takes its own line, so the rows do not alternate between two
 * layouts depending on how wide the status pill happens to be.
 */
:root[data-look="console"] .site { flex-wrap: wrap; }
:root[data-look="console"] .site-top { flex: 1 1 160px; min-width: 0; }
@media (max-width: 620px) { :root[data-look="console"] .site-top { flex-basis: 100%; } }
:root[data-look="console"] .site-foot { border: 0; padding: 0; margin: 0; }
:root[data-look="console"] .site-foot .kind-chip,
:root[data-look="console"] .site-foot .site-count { display: none; }
:root[data-look="console"] .site-ic { border-radius: var(--radius-sm); width: 30px; height: 30px; }
:root[data-look="console"] .site-read b { font-size: var(--t-title); }
:root[data-look="console"] .held-note { margin: 0; }

:root[data-look="bold"] .site { box-shadow: none; }
:root[data-look="spatial"] .site { border-left-width: 1px; }

/* ------------------------------------------------------------- site page */

.scada-card { margin-top: var(--gap); }
.scada-card .card-h { margin-bottom: 10px; }
.scada-bar { margin: 0; }
.scada-card .viz { overflow-x: auto; }
.scada-card [data-col] { cursor: pointer; }
.viz .sld-dev rect {
  filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .06)) drop-shadow(0 4px 10px rgba(16, 24, 40, .06));
  transition: stroke .15s;
}
.viz .sld-dev:hover rect { stroke: var(--brand); stroke-width: 2; }
.viz .dev, .viz .gauge-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.scada-card .viz .dev:hover, .scada-card .viz .gauge-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
:root[data-look="console"] .viz .sld-dev rect { filter: none; }
.trend-card.flash { animation: flash 1.1s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 var(--brand-soft), var(--shadow); } 30% { box-shadow: 0 0 0 6px var(--brand-soft), var(--shadow); } 100% { box-shadow: 0 0 0 0 transparent, var(--shadow); } }

.seg, .looks { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunk); border-radius: 999px; }
.seg button {
  padding: 6px 13px; min-height: 32px; border: 0; background: none; border-radius: 999px;
  font-size: var(--t-small); font-weight: 600; color: var(--ink-muted); cursor: pointer; white-space: nowrap;
  transition: background var(--speed), color var(--speed);
}
.seg button[aria-pressed="true"], .looks button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px rgba(16, 24, 40, .06);
}
:root[data-look="console"] :is(.seg, .looks), :root[data-look="console"] :is(.seg, .looks) button { border-radius: var(--radius-sm); }
@media (pointer: coarse) { .seg button { min-height: var(--tap); } }

.trend-pick { width: 100%; margin-bottom: 12px; }
.trend-pick select { width: 100%; height: 42px; border-radius: 12px; font-size: var(--t-body); color: var(--ink); background: var(--sunk); }
:root[data-look="console"] .trend-pick select { border-radius: var(--radius-sm); }
.trend-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tstat {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: var(--sunk); min-width: 0;
}
.tstat span { font-size: var(--t-micro); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tstat b { font-size: 1.2rem; font-weight: 740; letter-spacing: -.03em; white-space: nowrap; }
.tstat b small { font-size: .7rem; color: var(--ink-muted); margin-left: 3px; font-weight: 600; }
.tstat em { font-style: normal; font-size: var(--t-micro); color: var(--ink-muted); }
@media (max-width: 520px) { .trend-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root[data-look="console"] .tstat { border-radius: var(--radius-sm); }

.trend-slot { position: relative; min-height: 120px; transition: opacity .2s; }
.trend-slot.is-loading, .viz.is-loading { opacity: .45; }
svg.trend { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.tr-grid { stroke: var(--line); stroke-width: 1; }
.tr-ax { fill: var(--ink-muted); font-size: 11px; font-family: var(--font); }
.tr-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tr-s0 { stop-color: var(--brand); stop-opacity: .28; }
.tr-s1 { stop-color: var(--brand); stop-opacity: 0; }
.tr-dot { fill: var(--brand); }
.tr-last { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.tr-th { stroke-width: 1.2; stroke-dasharray: 5 5; }
.tr-th-warm { stroke: var(--warm); fill: var(--warm-text); }
.tr-th-high { stroke: var(--high); fill: var(--high-text); }
.tr-th-critical { stroke: var(--critical); fill: var(--critical-text); }
.tr-thl { font-size: 10.5px; font-weight: 650; stroke: none; }
.tr-hit { fill: transparent; cursor: crosshair; }
.tr-cursor line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tr-cursor circle { fill: var(--brand); stroke: var(--surface); stroke-width: 2.5; }
.tr-tip {
  position: absolute; transform: translateX(-50%); pointer-events: none;
  padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--surface);
  font-size: .78rem; white-space: nowrap; box-shadow: var(--lift);
  display: flex; flex-direction: column; align-items: center; line-height: 1.3;
}
.tr-tip[hidden] { display: none; }
.hs-tip { z-index: 5; }
.hist-card .hc { cursor: crosshair; }
.hist-card .hc:hover { stroke: var(--ink); stroke-width: 1.5; }
.tr-tip b { font-size: .9rem; }
.tr-tip span { opacity: .75; font-size: .72rem; }

.rank { list-style: none; margin: 0 -6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rank button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b b" "t t";
  gap: 5px 10px; align-items: center; padding: 9px 8px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; color: var(--ink);
}
.rank button:hover { background: var(--sunk); }
.rk-name { grid-area: n; font-size: var(--t-small); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-v { grid-area: v; font-weight: 740; font-size: .98rem; letter-spacing: -.02em; }
.rk-v small { font-size: .68rem; color: var(--ink-muted); margin-left: 2px; font-weight: 600; }
.rk-bar { grid-area: b; height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.rank button:hover .rk-bar { background: var(--surface); }
.rk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .6s var(--ease); }
.rk-bar .b-ok { background: var(--ok); }
.rk-bar .b-warm { background: var(--warm); }
.rk-bar .b-high { background: var(--high); }
.rk-bar .b-critical { background: var(--critical); }
.rk-bar .b-quiet { background: color-mix(in srgb, var(--ink-muted) 45%, transparent); }
.rk-bar .b-load { background: var(--grad); }
.rk-tag { grid-area: t; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); color: var(--ink-muted); font-weight: 600; }
.rk-tag.held { color: var(--brand); }
.rk-tag .i { width: 12px; height: 12px; }
.rank .is-quiet .rk-name, .rank .is-quiet .rk-v { color: var(--ink-muted); }

.hist-card, .read-card { margin-top: var(--gap); }
.th-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; }
.th { font-size: var(--t-micro); font-weight: 680; padding: 3px 9px; border-radius: 999px; }
.th-warm { color: var(--warm-text); background: color-mix(in srgb, var(--warm) 18%, transparent); }
.th-high { color: var(--high-text); background: color-mix(in srgb, var(--high) 15%, transparent); }
.th-critical { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.th-note { font-size: var(--t-micro); color: var(--ink-muted); margin-left: 2px; }
.small-search { flex: 0 1 260px; height: 38px; box-shadow: none; background: var(--sunk); }
.read-table td b { font-weight: 640; }
.read-table td small { display: block; font-size: var(--t-micro); color: var(--ink-muted); }
.read-table td.n small { display: inline; }
.read-table tr.is-old td { color: var(--ink-muted); }
.read-table tbody tr:hover td { background: var(--sunk); }
.more-btn { width: auto; margin-top: 12px; padding: 0 18px; }
.read-table td { vertical-align: middle; white-space: normal; }
.rd-dev { min-width: 150px; }
.rd-at { white-space: nowrap; }
.rd-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-v {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: var(--sunk); white-space: nowrap; font-size: var(--t-small);
}
.rd-v em { font-style: normal; color: var(--ink-muted); font-size: var(--t-micro); font-weight: 600; }
.rd-v b { font-weight: 700; }
.rd-v small { color: var(--ink-muted); font-size: var(--t-micro); }
.rd-v.none { opacity: .6; }
.read-table tbody tr:hover .rd-v { background: var(--surface); }
:root[data-look="console"] .rd-v { border-radius: var(--radius-sm); }
.read-card .card-h .meta { margin-right: auto; }
.hist-note { margin: 10px 0 0; }

/* ---------------------------------------------------------------- reports */

.rep-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
:root[data-look="bright"] .rep-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.rep-top { align-items: center; }
.rep-ic {
  width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft);
}
.rep-top .rep-h { flex: 1; min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter var(--speed), transform var(--speed), background var(--speed); }
.btn:not(.ghost) { background: var(--grad); box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .9); color: #fff; }
.btn:not(.ghost):hover { filter: brightness(1.06) saturate(1.05); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 17px; height: 17px; }
:root[data-look="console"] .btn:not(.ghost) { background: var(--brand); box-shadow: none; color: var(--brand-ink); }
.rep-bar { border-radius: var(--radius); }
.pr-link {
  border-left: 0; position: relative; flex-direction: row; align-items: center; gap: 14px;
  margin-bottom: calc(var(--gap) + 2px);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pr-link:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.pr-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pr-text span { color: var(--ink-muted); font-size: .86rem; }
.pr-go { color: var(--ink-muted); }

.pr-actions .btn { width: auto; padding: 0 18px; }
.pr-bar { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .pr-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pr-bar { grid-template-columns: 1fr; } }
.pr-chip { transition: border-color var(--speed), background var(--speed); }
.pr-meter { border-radius: 12px; }
:root[data-look="console"] .pr-meter { border-radius: var(--radius-sm); }

.rep-table .rg { width: 22%; min-width: 140px; }
.rep-table .rg-h { white-space: nowrap; }
.rg-bar { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--sunk); }
.rg-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--ok); opacity: .8; }
.rg-bar i.b-warm { background: var(--warm); }
.rg-bar i.b-high { background: var(--high); }
.rg-bar i.b-critical { background: var(--critical); }
.rg-bar b { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.rep-table tbody tr:hover td { background: var(--sunk); }
.rep-table tbody tr:hover .rg-bar { background: var(--surface); }

.oops { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; }
.oops > .i { width: 34px; height: 34px; color: var(--high); }
.oops > b { font-size: var(--t-head); }
.oops > span { color: var(--ink-muted); font-size: var(--t-small); }
.oops .btn { width: auto; padding: 0 18px; margin-top: 8px; }

.spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--sunk) 25%, color-mix(in srgb, var(--surface) 70%, var(--sunk)) 50%, var(--sunk) 75%);
  background-size: 200% 100%;
}

/* ----------------------------------------------------------------- login */

.login {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  min-height: 100dvh; padding: 0; place-items: stretch;
  background: var(--page);
}
.login-hero {
  position: relative; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 56px 36px;
  background: linear-gradient(150deg, #0f1230 0%, #1d1a52 46%, #102a4c 100%);
}
.hero-glow {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(35% 30% at 85% 70%, rgba(6, 182, 212, .4), transparent 70%),
    radial-gradient(30% 25% at 60% 15%, rgba(79, 70, 229, .45), transparent 70%);
  filter: blur(10px);
  animation: drift 18s ease-in-out infinite alternate;
}
.login-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.hero-lines { position: absolute; left: 0; right: 0; bottom: 8%; width: 100%; height: 42%; pointer-events: none; }
.hero-lines path { fill: none; stroke: rgba(165, 180, 252, .22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hero-lines .hl-pulse {
  stroke: #67e8f9; stroke-width: 2.5; stroke-dasharray: 90 1400; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, .9));
  animation: flow 6s linear infinite;
}
@keyframes flow { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
.hero-copy { position: relative; z-index: 1; max-width: 600px; }
.hero-brand { padding: 0 0 44px; font-size: 1.45rem; color: #fff; }
.hero-brand b { color: #c4b5fd; }
.hero-brand .logo { width: 38px; height: 38px; border-radius: 12px; }
.hero-h { margin: 0 0 16px; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.06; font-weight: 780; letter-spacing: -.045em; }
.hero-h span {
  background: linear-gradient(90deg, #a5b4fc, #67e8f9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-p { margin: 0 0 30px; font-size: 1.02rem; line-height: 1.6; color: rgba(226, 232, 255, .78); max-width: 460px; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hero-points li { display: flex; gap: 14px; align-items: flex-start; }
.hp-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #c4b5fd;
  backdrop-filter: blur(4px);
}
.hp-ic .i { width: 20px; height: 20px; }
.hero-points li > span:last-child { display: flex; flex-direction: column; font-size: .9rem; color: rgba(226, 232, 255, .72); line-height: 1.45; }
.hero-points b { color: #fff; font-weight: 650; font-size: .96rem; }
.hero-foot { position: relative; z-index: 1; font-size: .8rem; color: rgba(226, 232, 255, .55); letter-spacing: .02em; }

.login-side { display: grid; place-items: center; padding: 40px 28px; }
.login-card {
  width: 100%; max-width: 400px; padding: 0; background: none; border: 0; box-shadow: none;
}
.login-brand { padding: 0 0 30px; font-size: 1.35rem; display: none; }
.login-h { margin: 0; font-size: 1.85rem; font-weight: 760; letter-spacing: -.04em; }
.login-sub { margin: 6px 0 26px; color: var(--ink-muted); font-size: .95rem; }
.login .field { margin: 0 0 6px; }
.login .field span { font-size: .82rem; font-weight: 620; color: var(--ink-2); margin: 0; }
.input-ic {
  position: relative; display: flex; align-items: center; margin-bottom: 16px;
}
.input-ic > .i { position: absolute; left: 14px; color: var(--ink-muted); pointer-events: none; width: 18px; height: 18px; }
.input-ic input {
  width: 100%; height: 50px; padding: 0 46px 0 44px;
  font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-firm); border-radius: 13px;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.input-ic input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.input-ic:focus-within > .i { color: var(--brand); }
.pw-eye {
  position: absolute; right: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: var(--ink-muted); cursor: pointer;
}
.pw-eye:hover { color: var(--ink); background: var(--sunk); }
.btn-lg { height: 50px; border-radius: 13px; font-size: 1rem; margin-top: 6px; }
.btn-lg .i { transition: transform .2s var(--ease); }
.btn-lg:hover .i { transform: translateX(3px); }
.login-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 20px 0 0; font-size: .8rem; color: var(--ink-muted);
}
.login-foot .i { color: var(--ok); width: 16px; height: 16px; }
.form-error { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: 12px; margin-bottom: 18px; }
.form-error .i { margin-top: 1px; }
.form-error.inline-note { margin: 12px 0 0; }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-hero { padding: 26px 22px 30px; }
  .hero-brand { padding-bottom: 22px; }
  .hero-h { font-size: 1.85rem; margin-bottom: 10px; }
  .hero-p { margin-bottom: 0; font-size: .92rem; }
  .hero-points, .hero-foot, .hero-lines { display: none; }
  .login-side { padding: 28px 20px 40px; align-items: start; }
}

/* ------------------------------------------------------------- phone */

.tabbar a { position: relative; }
.tabbar .ic { display: inline-grid; place-items: center; }
.tabbar .ic .i { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] .ic {
  color: var(--brand);
}
.tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--grad);
}
.tab-dot {
  position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--critical); box-shadow: 0 0 0 2px var(--surface);
}
.tab-dot.held { background: var(--brand); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 899px) {
  .tb-logo { display: inline-flex; }
  .tb-logo .logo { width: 36px; height: 36px; border-radius: 11px; }
  .topbar { flex-wrap: wrap; row-gap: 12px; }
  .tb-title h1 { font-size: 1.35rem; }
  .top-tools { margin-left: auto; }
  .hello { padding: 18px; }
  .hello-date { display: none; }
}
@media (max-width: 620px) {
  .topbar .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .sub .sep { margin: 0 6px; }
  .topbar .sub .kind-chip, .topbar .sub .kind-chip + .sep { display: none; }
  .finder .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .finder .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .card-h .seg button { padding-inline: 10px; }
  /* Phone: buttons on the first row, the title on its own row under them. */
  .topbar .tb-title { order: 3; flex: 1 0 100%; }
  .topbar .tb-title h1 {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.2; font-size: 1.5rem;
  }
  .topbar .ai-btn { margin-left: auto; }
  .topbar .ai-btn + .top-tools, .topbar .top-tools { margin-left: auto; }
  .topbar .ai-btn ~ .top-tools { margin-left: 0; }
  .topbar .tb-title h1 { flex: none; }
  .live { padding: 0 11px; }
  .live #liveAge { display: none; }
  .live { width: 40px; justify-content: center; padding: 0; }
  .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px 14px 13px; }
  .stat-v { font-size: 1.7rem; }
  .stat-ic { width: 30px; height: 30px; }
  .ring { width: 42px; height: 42px; }
  .finder-n { margin-left: 0; }
  .search { max-width: none; flex-basis: 100%; }
  .health-body { justify-content: center; }
  .dmenu-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
}

/* ------------------------------------------------------------ wall mode */

:root[data-density="wall"] .rail-sec,
:root[data-density="wall"] .rail-user .ru-text { display: none; }
:root[data-density="wall"] .rail-user { justify-content: center; padding-inline: 0; }
:root[data-density="wall"] .rail .brand .logo { width: 40px; height: 40px; }
:root[data-density="wall"] .rail-item[aria-current="page"]::before { left: -6px; }

@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hl-pulse, .live i::after { animation: none !important; }
}

/* ----------------------------------------------------------------- print */

.print-head { display: none; }

@media print {
  .rail, .rail-toggle, .tabbar, .top-tools, .ai-btn, .finder, .seg, .scada-bar,
  .more-btn, .small-search, #backBtn, .tb-logo, .hello-date, .trend-pick,
  .rank-card .card-h .meta, .tr-cursor, .tr-tip { display: none !important; }
  .print-head {
    display: flex !important; align-items: center; justify-content: space-between;
    padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #d0d4dc;
    font-size: .8rem; color: #555;
  }
  .print-head .brand { padding: 0; font-size: 1.05rem; color: #111; }
  .print-head .logo { width: 24px; height: 24px; border-radius: 7px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-head .logo svg { width: 15px; height: 15px; }
  .stat::before, .rk-bar i, .ring, .band, .th, .kind-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, html { background: #fff !important; }
  .main { padding: 0 !important; }
  .card, .site, .stat { box-shadow: none !important; border: 1px solid #d0d4dc !important; break-inside: avoid; }
  .hello { color: #111 !important; background: #fff !important; border: 1px solid #d0d4dc; box-shadow: none; }
  .hello p { color: #333 !important; }
  .view { animation: none; }
  .read-table tr[hidden] { display: table-row !important; }
}

/* ---------------------------------------------------------------- energy */
/*
 * The Energy (units) card on a metering site's page: four to six figures, a
 * period bar, the bar chart, and each meter's share. Source colours are fixed
 * across every look so "solar" is always the same amber the Energy now card
 * already uses: grid = brand, diesel = slate, sent to grid = the ok green.
 */
.kwh-card { --src-grid: var(--brand); --src-solar: #f59e0b; --src-dg: #7c8798; --src-export: var(--ok); }
.kwh-body.is-loading { opacity: .55; transition: opacity .2s; }
.kwh-figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.kwh-fig { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--sunk); min-width: 0; }
.kwh-fig span { display: block; font-size: var(--t-small); color: var(--ink-muted); font-weight: 600; }
.kwh-fig b { display: block; margin-top: 2px; font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.kwh-fig b small, .kwh-total small, .kwh-table small { font-size: .62em; font-weight: 600; margin-left: 3px; color: var(--ink-muted); }
.kwh-fig em { display: block; margin-top: 2px; font-style: normal; font-size: var(--t-micro, .72rem); color: var(--ink-muted); line-height: 1.35; }
.kwh-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kwh-nav > b { font-weight: 650; min-width: 9ch; text-align: center; }
.kwh-nav .icon-btn[disabled] { opacity: .35; cursor: default; }
.kwh-nav .kwh-now { height: 32px; padding: 0 12px; }
.kwh-total { margin-left: auto; font-size: var(--t-small); color: var(--ink-muted); }
.kwh-total b { font-size: 1.05rem; color: var(--ink); margin-left: 4px; }
.kwh-total em { font-style: normal; margin-left: 10px; }
.kwh-chart { width: 100%; overflow: hidden; }
.kwh-svg { display: block; }
.kwh-svg .kwh-gridline { stroke: var(--line); stroke-width: 1; }
.kwh-svg .kwh-axis { stroke: var(--ink-muted); stroke-width: 1; opacity: .6; }
.kwh-svg .kwh-tick { font-size: 10px; fill: var(--ink-muted); }
.kwh-svg .kwh-none { font-size: 16px; fill: var(--ink-muted); }
.kwh-svg .kwh-hit { fill: transparent; }
.kwh-svg .kwh-bar[data-date] { cursor: pointer; }
.kwh-svg .kwh-bar[data-date]:hover .kwh-hit, .kwh-svg .kwh-bar:focus .kwh-hit { fill: var(--sunk); }
.kwh-svg .kwh-bar:focus { outline: none; }
/* Keyboard focus on a bar: ring its hit area, since an SVG group draws no outline. */
.kwh-svg .kwh-bar:focus-visible .kwh-hit { fill: var(--sunk); stroke: var(--brand); stroke-width: 2; }
.kwh-svg .kwh-bar.is-part rect:not(.kwh-hit) { opacity: .5; }
.kwh-svg .s-grid, .kwh-card i.s-grid { fill: var(--src-grid); background: var(--src-grid); }
.kwh-svg .s-solar, .kwh-card i.s-solar { fill: var(--src-solar); background: var(--src-solar); }
.kwh-svg .s-dg, .kwh-card i.s-dg { fill: var(--src-dg); background: var(--src-dg); }
.kwh-svg .s-export, .kwh-card i.s-export { fill: var(--src-export); background: var(--src-export); }
.kwh-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; font-size: var(--t-small); color: var(--ink-muted); }
.kwh-legend i, .kwh-src i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.kwh-notes { margin: 8px 0 4px; }
.kwh-table { margin-top: 10px; }
.kwh-table td { vertical-align: middle; }
.kwh-table td.num { white-space: nowrap; }
.kwh-table td.num em { display: block; font-style: normal; font-size: var(--t-micro, .72rem); color: var(--ink-muted); }
.kwh-table .kwh-m { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kwh-table .kwh-share { min-width: 140px; }
.kwh-table .kwh-share .rk-bar { display: inline-block; width: calc(100% - 52px); vertical-align: middle; }
.kwh-table .kwh-share b { display: inline-block; width: 46px; text-align: right; font-size: var(--t-small); font-weight: 600; }
.kwh-table .kwh-note { font-size: var(--t-small); color: var(--ink-muted); }
.kwh-src { white-space: nowrap; font-size: var(--t-small); }
@media (max-width: 620px) {
  .kwh-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kwh-total { margin-left: 0; width: 100%; }
  .kwh-table .kwh-note, .kwh-table th:last-child { display: none; }
  .kwh-table .kwh-m { max-width: 130px; }
  .kwh-table .kwh-share { min-width: 90px; }
}
@media print { .kwh-nav .icon-btn, .kwh-nav .kwh-now, #kwhViews, #kwhMore { display: none; } }