/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-200: oklch(88.5% .062 18.334);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-cyan-200: oklch(91.7% .08 205.041);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-white: #fff;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --radius-md: .375rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --blur-xl: 24px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-ops-canvas: var(--canvas);
    --color-ops-rail: var(--rail);
    --color-ops-panel: var(--surface);
    --color-ops-line: var(--line);
    --color-ops-muted: var(--muted);
    --color-live: var(--primary);
    --color-healthy: var(--green);
    --color-caution: var(--amber);
    --color-critical: var(--red);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-\[38px\] {
    width: 38px;
    height: 38px;
  }

  .size-\[74px\] {
    width: 74px;
    height: 74px;
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }

  .min-h-\[72px\] {
    min-height: 72px;
  }

  .min-h-\[76px\] {
    min-height: 76px;
  }

  .min-h-\[92px\] {
    min-height: 92px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-\[104px\] {
    width: 104px;
  }

  .w-full {
    width: 100%;
  }

  .\!min-w-\[560px\] {
    min-width: 560px !important;
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .resize {
    resize: both;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .grid-cols-\[8px_1fr_auto\] {
    grid-template-columns: 8px 1fr auto;
  }

  .grid-cols-\[20px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .grid-cols-\[22px_1fr\] {
    grid-template-columns: 22px 1fr;
  }

  .grid-cols-\[24px_1fr\] {
    grid-template-columns: 24px 1fr;
  }

  .grid-cols-\[38px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .grid-cols-\[116px_1fr\] {
    grid-template-columns: 116px 1fr;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-ops-line > :not(:last-child)) {
    border-color: var(--color-ops-line);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[7px\] {
    border-radius: 7px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-amber-500\/25 {
    border-color: #f99c0040;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/25 {
      border-color: color-mix(in oklab, var(--color-amber-500) 25%, transparent);
    }
  }

  .border-caution\/30 {
    border-color: var(--color-caution);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-caution\/30 {
      border-color: color-mix(in oklab, var(--color-caution) 30%, transparent);
    }
  }

  .border-critical\/35 {
    border-color: var(--color-critical);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-critical\/35 {
      border-color: color-mix(in oklab, var(--color-critical) 35%, transparent);
    }
  }

  .border-emerald-500\/25 {
    border-color: #00bb7f40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/25 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
    }
  }

  .border-healthy\/30 {
    border-color: var(--color-healthy);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-healthy\/30 {
      border-color: color-mix(in oklab, var(--color-healthy) 30%, transparent);
    }
  }

  .border-live\/25 {
    border-color: var(--color-live);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-live\/25 {
      border-color: color-mix(in oklab, var(--color-live) 25%, transparent);
    }
  }

  .border-live\/30 {
    border-color: var(--color-live);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-live\/30 {
      border-color: color-mix(in oklab, var(--color-live) 30%, transparent);
    }
  }

  .border-live\/40 {
    border-color: var(--color-live);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-live\/40 {
      border-color: color-mix(in oklab, var(--color-live) 40%, transparent);
    }
  }

  .border-ops-line {
    border-color: var(--color-ops-line);
  }

  .\!bg-transparent {
    background-color: #0000 !important;
  }

  .bg-amber-500\/5 {
    background-color: #f99c000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/5 {
      background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
    }
  }

  .bg-caution, .bg-caution\/\[0\.08\] {
    background-color: var(--color-caution);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-caution\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--color-caution) 8%, transparent);
    }
  }

  .bg-critical, .bg-critical\/\[0\.08\] {
    background-color: var(--color-critical);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-critical\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--color-critical) 8%, transparent);
    }
  }

  .bg-emerald-500\/5 {
    background-color: #00bb7f0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/5 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
    }
  }

  .bg-healthy, .bg-healthy\/\[0\.07\] {
    background-color: var(--color-healthy);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-healthy\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--color-healthy) 7.0%, transparent);
    }
  }

  .bg-live\/\[0\.06\] {
    background-color: var(--color-live);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-live\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--color-live) 6%, transparent);
    }
  }

  .bg-live\/\[0\.07\] {
    background-color: var(--color-live);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-live\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--color-live) 7.0%, transparent);
    }
  }

  .bg-ops-canvas, .bg-ops-canvas\/50 {
    background-color: var(--color-ops-canvas);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ops-canvas\/50 {
      background-color: color-mix(in oklab, var(--color-ops-canvas) 50%, transparent);
    }
  }

  .bg-ops-canvas\/90 {
    background-color: var(--color-ops-canvas);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ops-canvas\/90 {
      background-color: color-mix(in oklab, var(--color-ops-canvas) 90%, transparent);
    }
  }

  .bg-ops-panel, .bg-ops-panel\/90 {
    background-color: var(--color-ops-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ops-panel\/90 {
      background-color: color-mix(in oklab, var(--color-ops-panel) 90%, transparent);
    }
  }

  .bg-ops-panel\/95 {
    background-color: var(--color-ops-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ops-panel\/95 {
      background-color: color-mix(in oklab, var(--color-ops-panel) 95%, transparent);
    }
  }

  .bg-ops-rail\/95 {
    background-color: var(--color-ops-rail);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ops-rail\/95 {
      background-color: color-mix(in oklab, var(--color-ops-rail) 95%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .text-center {
    text-align: center;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-caution {
    color: var(--color-caution);
  }

  .text-critical {
    color: var(--color-critical);
  }

  .text-cyan-200 {
    color: var(--color-cyan-200);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-green-200 {
    color: var(--color-green-200);
  }

  .text-healthy {
    color: var(--color-healthy);
  }

  .text-live {
    color: var(--color-live);
  }

  .text-ops-muted {
    color: var(--color-ops-muted);
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .text-slate-200 {
    color: var(--color-slate-200);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.10\)\] {
    --tw-shadow: 0 12px 30px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_14px_38px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 14px 38px var(--tw-shadow-color, #0000001f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_46px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 18px 46px var(--tw-shadow-color, #0000001f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[20px_0_55px_rgba\(0\,0\,0\,0\.16\)\] {
    --tw-shadow: 20px 0 55px var(--tw-shadow-color, #00000029);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_1px_rgba\(255\,255\,255\,0\.02\)\] {
    --tw-shadow: inset 0 1px var(--tw-shadow-color, #ffffff05);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:text-live:is(:where(.group):hover *) {
      color: var(--color-live);
    }

    .hover\:border-live\/35:hover {
      border-color: var(--color-live);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-live\/35:hover {
        border-color: color-mix(in oklab, var(--color-live) 35%, transparent);
      }
    }

    .hover\:bg-white\/\[0\.035\]:hover {
      background-color: #ffffff09;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.035\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 3.5%, transparent);
      }
    }
  }

  .focus-visible\:outline-live:focus-visible {
    outline-color: var(--color-live);
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[1\.2fr_\.8fr\] {
      grid-template-columns: 1.2fr .8fr;
    }

    .xl\:grid-cols-\[1fr_1\.35fr\] {
      grid-template-columns: 1fr 1.35fr;
    }

    .xl\:grid-cols-\[190px_minmax\(0\,1fr\)\] {
      grid-template-columns: 190px minmax(0, 1fr);
    }

    .xl\:grid-cols-\[210px_minmax\(0\,1fr\)_280px\] {
      grid-template-columns: 210px minmax(0, 1fr) 280px;
    }

    .xl\:grid-cols-\[270px_minmax\(0\,1fr\)\] {
      grid-template-columns: 270px minmax(0, 1fr);
    }

    .xl\:grid-cols-\[300px_minmax\(0\,1fr\)\] {
      grid-template-columns: 300px minmax(0, 1fr);
    }

    .xl\:grid-cols-\[360px_minmax\(0\,1fr\)\] {
      grid-template-columns: 360px minmax(0, 1fr);
    }

    .xl\:grid-cols-\[minmax\(0\,1\.1fr\)_minmax\(320px\,\.9fr\)\] {
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    }

    .xl\:grid-cols-\[minmax\(0\,1\.25fr\)_minmax\(330px\,\.75fr\)\] {
      grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    }
  }
}

:root {
  --canvas: #f4f6f8;
  --canvas-deep: #eceff3;
  --rail: #fff;
  --surface: #fff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f6;
  --line: #e3e8ee;
  --line-soft: #edf1f5;
  --line-strong: #d4dbe3;
  --text: #101828;
  --muted: #5d6b7e;
  --faint: #8a97a8;
  --primary: #f59e0b;
  --primary-strong: #d97706;
  --primary-deep: #b45309;
  --primary-soft: #fdf2dc;
  --primary-line: #d977064d;
  --primary-glow: #f59e0b29;
  --info: #2563eb;
  --info-strong: #1d4ed8;
  --info-soft: #e9f0fe;
  --info-line: #2563eb47;
  --green: #0e9f6e;
  --green-soft: #e4f7ef;
  --green-line: #0e9f6e4d;
  --amber: #d97706;
  --amber-soft: #fdf1dc;
  --amber-line: #d9770652;
  --red: #dc2626;
  --red-soft: #fdebeb;
  --red-line: #dc26264d;
  --cyan: var(--info);
  --shadow-xs: 0 1px 2px #1018280d;
  --shadow-sm: 0 1px 2px #1018280d, 0 4px 12px #1018280d;
  --shadow-md: 0 2px 4px #1018280a, 0 12px 28px #10182814;
  --shadow-lg: 0 8px 16px #10182812, 0 24px 60px #10182821;
  --shadow-pop: 0 18px 50px #1018282e;
  --shadow-hover: 0 6px 14px #10182814, 0 18px 42px #1018281f;
  --gradient-primary: linear-gradient(135deg, #fcd34d 0%, #f59e0b 52%, #ea8a00 100%);
  --gradient-info: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --gradient-sheen: linear-gradient(105deg, transparent 35%, #ffffff61 50%, transparent 65%);
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --anim-fast: .15s cubic-bezier(.3, 0, .2, 1);
  --anim-normal: .26s cubic-bezier(.3, 0, .2, 1);
  --anim-slow: .48s cubic-bezier(.3, 0, .2, 1);
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --chart-grid: #64748b29;
  --chart-tick: #7b8a9c;
  --ring: 0 0 0 3px #f59e0b47;
  --bg: var(--canvas);
  --bg-main: var(--canvas);
  --bg-card: var(--surface);
  --bg-soft: var(--surface-3);
  --text-main: var(--text);
  --text-muted: var(--muted);
  --text-light: var(--faint);
  --primary-dark: var(--primary-strong);
  --success: var(--green);
  --success-soft: var(--green-soft);
  --warning: #ea580c;
  --warning-soft: #fdeede;
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --border: var(--line);
  --shadow: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --shadow-glow: 0 0 0 1px var(--primary-line), 0 14px 40px var(--primary-glow);
  --radius-lg: var(--r-lg);
  --radius-mdx: var(--r-md);
  --glass: #ffffffd1;
  --glass-strong: #fffffff0;
  --solar-blue: var(--info);
  --solar-gold: var(--primary);
  --solar-orange: #ea8a00;
  --solar-emerald: var(--green);
  --live: var(--primary);
  color: var(--text);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  accent-color: var(--primary);
}

[data-theme="dark"], .theme-dark {
  --canvas: #0a1018;
  --canvas-deep: #070c12;
  --rail: #0d141d;
  --surface: #111a26;
  --surface-2: #16202e;
  --surface-3: #1b2736;
  --line: #94a6be2b;
  --line-soft: #94a6be1a;
  --line-strong: #94a6be4d;
  --text: #e9eef6;
  --muted: #97a5b8;
  --faint: #6c7a8d;
  --primary: #f6a91c;
  --primary-strong: #fbbf24;
  --primary-deep: #fcd34d;
  --primary-soft: #f6a91c21;
  --primary-line: #f6a91c5c;
  --primary-glow: #f6a91c1f;
  --info: #60a5fa;
  --info-strong: #93c5fd;
  --info-soft: #60a5fa21;
  --info-line: #60a5fa57;
  --green: #34d399;
  --green-soft: #34d3991f;
  --green-line: #34d39952;
  --amber: #fbbf24;
  --amber-soft: #fbbf241f;
  --amber-line: #fbbf2457;
  --red: #f87171;
  --red-soft: #f871711f;
  --red-line: #f8717157;
  --shadow-xs: 0 1px 2px #0000004d;
  --shadow-sm: 0 2px 6px #0000004d;
  --shadow-md: 0 6px 14px #00000042, 0 18px 44px #0000004d;
  --shadow-lg: 0 12px 26px #00000057, 0 30px 80px #0000006b;
  --shadow-pop: 0 24px 70px #0000008c;
  --shadow-hover: 0 10px 22px #00000052, 0 26px 60px #00000061;
  --gradient-primary: linear-gradient(135deg, #fcd34d 0%, #f59e0b 52%, #ea8a00 100%);
  --gradient-info: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  --gradient-sheen: linear-gradient(105deg, transparent 35%, #ffffff38 50%, transparent 65%);
  --chart-grid: #94a6be24;
  --chart-tick: #8294a8;
  --ring: 0 0 0 3px #f6a91c4d;
  --warning: #fb923c;
  --warning-soft: #fb923c21;
  --glass: #111a26d1;
  --glass-strong: #111a26f0;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--canvas);
  background-image: radial-gradient(1100px 480px at 8% -8%, var(--primary-glow), transparent 62%), radial-gradient(900px 420px at 100% 0%, #2563eb12, transparent 60%);
  background-attachment: fixed;
  margin: 0;
  overflow-x: hidden;
}

button, select, input, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3, .metric-value, .card-value, .band-metric strong, .ops-stat strong, .weather-temperature strong, .control-room-health strong, .control-room-metric strong, .commercial-kpi-card strong, .energy-flow-node strong, .health-score-ring strong, .single-line-node strong, .node strong {
  font-family: var(--font-display);
  letter-spacing: -.015em;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

::selection {
  color: #1f1503;
  background: #f59e0b59;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  background-clip: content-box;
  border: 2px solid #0000;
  border-radius: 999px;
}

button, input, select, textarea, .panel, nav button, .status-badge, .source-badge {
  transition: color var(--anim-fast), background-color var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast), opacity var(--anim-fast), transform var(--anim-fast);
}

.density-button {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 38px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.density-button:hover {
  color: var(--primary-strong);
  border-color: var(--primary-line);
  transform: translateY(-1px);
}

.density-compact .panel, .density-compact .metric-card {
  padding: 10px;
}

.density-compact .page-stack, .density-compact .solis-explorer {
  gap: 9px;
}

.density-compact .ops-stat {
  min-height: 64px;
  padding-block: 7px;
}

.density-compact td {
  height: 34px;
  padding-block: 6px;
}

.freshness {
  border: 1px solid var(--green-line);
  border-radius: var(--r-pill);
  color: var(--green);
  background: var(--green-soft);
  font-variant-numeric: tabular-nums;
  flex: none;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
}

.freshness.stale {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.admin-page-intro {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  display: flex;
}

.admin-page-intro > div:first-child > span, .benchmark-dialog header span {
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 800;
}

.admin-page-intro h2, .benchmark-dialog h2 {
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: 3px;
  font-size: 18px;
  font-weight: 750;
}

.admin-page-intro p {
  color: var(--muted);
  margin-top: 5px;
  font-size: 12px;
}

.admin-page-intro > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.secondary-action {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 38px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.secondary-action:hover {
  border-color: var(--primary-line);
  color: var(--primary-strong);
  transform: translateY(-1px);
}

.admin-feedback, .security-note {
  border: 1px solid var(--info-line);
  border-radius: var(--r-md);
  color: var(--info);
  background: var(--info-soft);
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.admin-filter-grid {
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 8px;
  display: grid;
}

.admin-table {
  min-width: 1120px;
}

.admin-table td strong, .admin-table td small {
  display: block;
}

.admin-table td small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.admin-table code {
  color: var(--info);
  font: 11px/1.4 var(--font-mono);
}

.admin-table details summary {
  cursor: pointer;
  max-width: 220px;
  color: var(--text);
}

.admin-table details pre {
  white-space: pre-wrap;
  max-width: 440px;
  max-height: 220px;
  color: var(--muted);
  font: 10px/1.5 var(--font-mono);
  overflow: auto;
}

.row-actions {
  gap: 5px;
  display: flex;
}

.row-actions button, .benchmark-dialog header button {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: var(--surface);
  place-items: center;
  display: grid;
}

.row-actions button:hover {
  color: var(--info);
  border-color: var(--info-line);
  background: var(--info-soft);
}

.row-actions button:last-child:hover {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

.inline-toggle {
  border: 1px solid var(--line);
  background: var(--surface-3);
  border-radius: 12px;
  width: 38px;
  height: 21px;
  padding: 2px;
}

.inline-toggle span {
  background: var(--faint);
  width: 15px;
  height: 15px;
  transition: transform var(--anim-fast), background var(--anim-fast);
  border-radius: 50%;
  display: block;
}

.inline-toggle span.on {
  background: var(--green);
  transform: translateX(15px);
}

.benchmark-dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: min(920px, 100vw - 28px);
  max-height: calc(100vh - 30px);
  box-shadow: var(--shadow-pop);
  overflow: auto;
}

.benchmark-dialog header, .benchmark-dialog footer {
  border-bottom: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.benchmark-dialog footer {
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
  justify-content: flex-end;
}

.benchmark-dialog footer > button:first-child {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 38px;
  color: var(--muted);
  background: none;
  padding: 0 13px;
}

.benchmark-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  display: grid;
}

.benchmark-form label {
  color: var(--muted);
  align-content: start;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  display: grid;
}

.benchmark-form .wide {
  grid-column: 1 / -1;
}

.benchmark-form textarea {
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 170px;
  color: var(--text);
  background: var(--surface-2);
  font: 12px/1.5 var(--font-mono);
  padding: 10px;
}

.check-field {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  display: flex !important;
}

.check-field input {
  min-height: 0;
  box-shadow: none;
}

.template-help {
  color: var(--faint);
  font: 10px/1.5 var(--font-mono);
}

@media (max-width: 1050px) {
  .admin-filter-grid, .benchmark-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-page-intro {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-page-intro > div:last-child {
    justify-content: stretch;
  }

  .admin-page-intro button {
    flex: 1;
  }

  .admin-filter-grid, .benchmark-form {
    grid-template-columns: 1fr;
  }

  .benchmark-form .wide {
    grid-column: auto;
  }
}

.data-table-shell {
  min-width: 0;
  position: relative;
}

.data-table-tools, .table-pagination {
  min-height: 34px;
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.column-control {
  position: relative;
}

.column-control > button, .table-pagination button {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  min-height: 30px;
  color: var(--muted);
  background: var(--surface);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.column-control > button:hover, .table-pagination button:hover:not(:disabled) {
  color: var(--primary-strong);
  border-color: var(--primary-line);
}

.column-menu {
  z-index: 12;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  min-width: 190px;
  max-height: 270px;
  box-shadow: var(--shadow-lg);
  padding: 7px;
  display: grid;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  overflow-y: auto;
}

.column-menu label {
  border-radius: var(--r-xs);
  min-height: 30px;
  color: var(--text);
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  font-size: 11px;
  display: grid;
}

.column-menu label:hover {
  background: var(--surface-2);
}

.column-menu input {
  width: 14px;
  min-height: 14px;
  accent-color: var(--primary);
  box-shadow: none;
}

.table-pagination {
  padding-top: 7px;
}

.table-pagination > div {
  gap: 5px;
  display: flex;
}

.table-pagination button {
  width: 30px;
  padding: 0;
}

.dialog-backdrop {
  z-index: 80;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #080c148c;
  place-items: center;
  padding: 18px;
  animation: .2s both backdrop-in;
  display: grid;
  position: fixed;
  inset: 0;
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.confirm-dialog, .benchmark-dialog {
  animation: .28s cubic-bezier(.22, 1, .36, 1) both dialog-in;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.confirm-dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: min(100%, 480px);
  box-shadow: var(--shadow-pop);
}

.confirm-dialog header {
  border-bottom: 1px solid var(--line-soft);
  grid-template-columns: 38px 1fr 32px;
  align-items: start;
  gap: 11px;
  padding: 16px;
  display: grid;
}

.confirm-dialog header > div:first-child {
  border-radius: var(--r-sm);
  width: 38px;
  height: 38px;
  color: var(--amber);
  background: var(--amber-soft);
  place-items: center;
  display: grid;
}

.confirm-dialog header > div:first-child.critical {
  color: var(--red);
  background: var(--red-soft);
}

.confirm-dialog h2 {
  color: var(--text);
  font-size: 14px;
}

.confirm-dialog p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}

.confirm-dialog header > button {
  border-radius: var(--r-xs);
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.confirm-dialog header > button:hover {
  background: var(--surface-2);
}

.confirm-dialog footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}

.confirm-dialog footer button {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 36px;
  color: var(--text);
  background: var(--surface);
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
}

.confirm-dialog footer button.warn {
  color: #221501;
  background: var(--gradient-primary);
  border-color: #0000;
}

.confirm-dialog footer button.critical {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: #0000;
}

@media (max-width: 760px) {
  .density-button span {
    display: none;
  }

  .density-button {
    width: 40px;
    padding: 0;
  }

  .column-menu {
    max-height: 50vh;
    position: fixed;
    inset: auto 14px 86px;
  }
}

.access-users-table {
  min-width: 1180px;
}

.permission-chip-row {
  flex-wrap: wrap;
  gap: 5px;
  max-width: 280px;
  display: flex;
}

.permission-chip-row span {
  border: 1px solid var(--primary-line);
  min-height: 23px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.permission-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.permission-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  grid-template-columns: 18px 1fr;
  align-items: start;
  padding: 12px;
  gap: 8px !important;
  display: grid !important;
}

.permission-card input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--primary);
  box-shadow: none;
  margin-top: 2px;
}

.permission-card strong {
  color: var(--text);
  font-size: 12px;
  display: block;
}

.permission-card small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
  display: block;
}

.access-user-dialog textarea {
  min-height: 92px;
}

.access-user-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1050px) {
  .permission-grid, .access-user-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .permission-grid, .access-user-form {
    grid-template-columns: 1fr;
  }
}

.brand-mark {
  isolation: isolate;
  position: relative;
  overflow: visible;
}

.brand-mark:after {
  z-index: -1;
  border: 1px solid var(--primary-line);
  border-radius: inherit;
  content: "";
  opacity: 0;
  position: absolute;
  inset: -5px;
  transform: scale(.82);
}

.brand:hover .brand-mark:after, .login-brand:hover .brand-mark:after, .auth-loading .brand-mark:after {
  animation: 2.4s ease-out infinite solar-mark-pulse;
}

.solar-brand-svg {
  color: var(--primary-strong);
  display: block;
  overflow: visible;
}

.solar-brand-sun {
  fill: currentColor;
}

.solar-brand-rays, .solar-brand-panel, .solar-brand-grid, .solar-brand-stand {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solar-brand-rays {
  stroke-width: 2.2px;
}

.solar-brand-panel {
  fill: var(--info-soft);
  stroke: var(--info);
  stroke-width: 2.2px;
}

.solar-brand-grid, .solar-brand-stand {
  stroke: var(--info);
  stroke-width: 1.6px;
}

.solar-brand-live-dot {
  fill: var(--green);
  stroke: var(--surface);
  stroke-width: 1.5px;
}

.login-energy-map > svg {
  animation: 1.8s ease-in-out infinite login-flow-arrow;
}

.login-energy-map > svg:nth-of-type(2) {
  animation-delay: .22s;
}

.login-energy-map > svg:nth-of-type(3) {
  animation-delay: .44s;
}

.single-line-node, .energy-flow-node {
  transition: transform var(--anim-normal), border-color var(--anim-normal), box-shadow var(--anim-normal);
}

.single-line-node:hover, .energy-flow-node:hover {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.single-line-node > svg, .energy-node-icon {
  transition: transform var(--anim-normal);
}

.single-line-node:hover > svg, .energy-flow-node:hover .energy-node-icon {
  transform: scale(1.08);
}

.recharts-cartesian-axis-tick-value, .recharts-legend-item-text {
  font-size: 11px;
  fill: var(--chart-tick) !important;
  color: var(--chart-tick) !important;
}

.recharts-cartesian-grid line {
  stroke: var(--chart-grid) !important;
}

.recharts-tooltip-cursor {
  fill: var(--surface-3);
  opacity: .6;
}

@keyframes solar-mark-pulse {
  0% {
    opacity: .55;
    transform: scale(.84);
  }

  72%, 100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

@keyframes login-flow-arrow {
  0%, 100% {
    opacity: .42;
    transform: translateX(-2px);
  }

  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark:after, .login-energy-map > svg {
    animation: none !important;
  }

  .single-line-node:hover, .energy-flow-node:hover, .single-line-node:hover > svg, .energy-flow-node:hover .energy-node-icon {
    transform: none;
  }
}

:root {
  --premium-bg-main: #07111f;
  --premium-bg-soft: #0d1b2f;
  --premium-card-bg: #0f2037d1;
  --premium-card-border: #ffffff14;
  --premium-solar: #f59e0b;
  --premium-solar-soft: #f59e0b2e;
  --premium-success: #22c55e;
  --premium-warning: #f97316;
  --premium-danger: #ef4444;
  --premium-info: #38bdf8;
  --premium-text-main: #f8fafc;
  --premium-text-muted: #94a3b8;
  --premium-radius-lg: 24px;
  --premium-shadow-card: 0 20px 60px #00000059;
}

.role-login-admin, .role-admin {
  --role-color: #a855f7;
  --role-soft: #a855f72e;
  --role-strong: #ef4444;
}

.role-login-manager, .role-manager {
  --role-color: #38bdf8;
  --role-soft: #38bdf82e;
  --role-strong: #2563eb;
}

.role-login-operator, .role-operator {
  --role-color: #f97316;
  --role-soft: #f973162e;
  --role-strong: #f59e0b;
}

.role-login-customer, .role-customer {
  --role-color: #22c55e;
  --role-soft: #22c55e2e;
  --role-strong: #16a34a;
}

.role-kiosk {
  --role-color: #facc15;
  --role-soft: #facc152e;
  --role-strong: #eab308;
}

.scada-login-shell .plant-terminal-screen {
  background: radial-gradient(circle at 8% 10%, var(--role-color, #f59e0b), transparent 32%), radial-gradient(circle at 90% 18%, #38bdf824, transparent 30%), linear-gradient(135deg, #030712 0%, #07111f 44%, #0a1020 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .scada-login-shell .plant-terminal-screen {
    background: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--role-color, #f59e0b) 24%, transparent), transparent 32%), radial-gradient(circle at 90% 18%, #38bdf824, transparent 30%), linear-gradient(135deg, #030712 0%, #07111f 44%, #0a1020 100%);
  }
}

.scada-login-shell .plant-terminal:before {
  content: "";
  pointer-events: none;
  background-image: linear-gradient(#ffffff07 1px, #0000 1px), linear-gradient(90deg, #ffffff07 1px, #0000 1px);
  background-size: 42px 42px;
  position: fixed;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle, #000 0%, #0000 74%);
  mask-image: radial-gradient(circle, #000 0%, #0000 74%);
}

.scada-login-shell .terminal-nameplate, .scada-login-shell .terminal-monitor, .scada-login-shell .terminal-auth {
  border-color: var(--role-color, #f59e0b);
}

@supports (color: color-mix(in lab, red, red)) {
  .scada-login-shell .terminal-nameplate, .scada-login-shell .terminal-monitor, .scada-login-shell .terminal-auth {
    border-color: color-mix(in srgb, var(--role-color, #f59e0b) 38%, #ffffff14);
  }
}

.scada-login-shell .terminal-nameplate, .scada-login-shell .terminal-monitor, .scada-login-shell .terminal-auth {
  box-shadow: 0 26px 90px #00000057, inset 0 0 0 1px #ffffff09;
}

.login-hero-badges {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.login-hero-badges span {
  color: #dbeafe;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.premium-login-role-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
  display: grid;
}

.premium-role-card {
  color: #d7e4ef;
  background: radial-gradient(circle at top right, var(--role-soft), transparent 52%), linear-gradient(145deg, #fff1, #ffffff06);
  cursor: pointer;
  border: 1px solid #ffffff14;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.premium-role-card svg {
  color: var(--role-color);
}

.premium-role-card strong {
  color: #f8fafc;
  letter-spacing: -.01em;
  font-size: 13px;
}

.premium-role-card span {
  color: #8ea3b5;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
}

.premium-role-card:hover, .premium-role-card.active {
  border-color: var(--role-color);
  transform: translateY(-2px);
}

@supports (color: color-mix(in lab, red, red)) {
  .premium-role-card:hover, .premium-role-card.active {
    border-color: color-mix(in srgb, var(--role-color) 62%, #ffffff1f);
  }
}

.premium-role-card:hover, .premium-role-card.active {
  box-shadow: 0 18px 45px var(--role-color);
}

@supports (color: color-mix(in lab, red, red)) {
  .premium-role-card:hover, .premium-role-card.active {
    box-shadow: 0 18px 45px color-mix(in srgb, var(--role-color) 18%, transparent);
  }
}

.premium-role-card.active:after {
  content: "ACTIVE";
  color: #06111c;
  background: var(--role-color);
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 7px;
  font-weight: 950;
  position: absolute;
  top: 10px;
  right: 10px;
}

.scada-login-shell .role-login-switcher button.active, .scada-login-shell .auth-role-matrix button.active, .scada-login-shell .login-lock {
  border-color: var(--role-color, #f59e0b);
}

@supports (color: color-mix(in lab, red, red)) {
  .scada-login-shell .role-login-switcher button.active, .scada-login-shell .auth-role-matrix button.active, .scada-login-shell .login-lock {
    border-color: color-mix(in srgb, var(--role-color, #f59e0b) 60%, #ffffff1a);
  }
}

.scada-login-shell .role-login-switcher button.active, .scada-login-shell .auth-role-matrix button.active, .scada-login-shell .login-lock {
  background: var(--role-soft, #f59e0b2e);
}

@supports (color: color-mix(in lab, red, red)) {
  .scada-login-shell .role-login-switcher button.active, .scada-login-shell .auth-role-matrix button.active, .scada-login-shell .login-lock {
    background: color-mix(in srgb, var(--role-soft, #f59e0b2e) 72%, #ffffff0d);
  }
}

.scada-login-shell .role-login-switcher button.active, .scada-login-shell .auth-role-matrix button.active, .scada-login-shell .login-lock {
  color: var(--role-color, #f59e0b);
}

.scada-login-shell .terminal-auth .login-primary, .scada-login-shell .terminal-auth .login-verify {
  letter-spacing: -.01em;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  transition: transform .16s, box-shadow .16s, filter .16s;
}

.scada-login-shell .terminal-auth .login-primary {
  color: #07111f;
  background: linear-gradient(135deg, var(--role-color, #facc15), var(--role-strong, #f97316));
  box-shadow: 0 14px 35px var(--role-color, #f97316);
}

@supports (color: color-mix(in lab, red, red)) {
  .scada-login-shell .terminal-auth .login-primary {
    box-shadow: 0 14px 35px color-mix(in srgb, var(--role-color, #f97316) 30%, transparent);
  }
}

.scada-login-shell .terminal-auth .login-verify {
  color: #f8fafc;
  background: linear-gradient(135deg, #ffffff1f, #ffffff0d);
  border: 1px solid #ffffff1a;
}

.scada-login-shell .terminal-auth .login-primary:not(:disabled):hover, .scada-login-shell .terminal-auth .login-verify:not(:disabled):hover {
  filter: saturate(1.1);
  transform: translateY(-2px);
}

.role-security-warning, .remember-number-row, .login-support-actions, .kiosk-pin-card {
  background: #ffffff0b;
  border: 1px solid #ffffff14;
  border-radius: 16px;
}

.role-security-warning {
  color: #cbd5e1;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
}

.role-security-warning svg {
  color: var(--role-color, #f59e0b);
  flex: none;
  margin-top: 1px;
}

.remember-number-row {
  cursor: pointer;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  flex-direction: row !important;
  display: flex !important;
}

.remember-number-row input {
  accent-color: var(--role-color, #f59e0b);
  width: 16px !important;
  height: 16px !important;
}

.remember-number-row span {
  color: #dbeafe !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
}

.login-support-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  display: grid;
}

.login-support-button, .login-kiosk-button, .kiosk-pin-row button {
  color: #f8fafc;
  cursor: pointer;
  background: #ffffff0f;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  font-weight: 800;
  display: inline-flex;
}

.login-kiosk-button {
  background: linear-gradient(135deg, #facc1538, #f973161f);
}

.login-support-button:hover, .login-kiosk-button:hover, .kiosk-pin-row button:hover {
  border-color: var(--role-color, #f59e0b);
}

.kiosk-pin-card {
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  display: grid;
}

.kiosk-pin-card strong {
  color: #f8fafc;
  display: block;
}

.kiosk-pin-card span {
  color: #94a3b8;
  margin-top: 3px;
  font-size: 12px;
  display: block;
}

.kiosk-pin-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  display: grid;
}

.kiosk-pin-row input {
  color: #fff;
  background: #0000002e;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  outline: none;
  min-height: 42px;
  padding: 0 12px;
}

.kiosk-pin-row input:focus {
  border-color: var(--role-color, #f59e0b);
  box-shadow: 0 0 0 3px var(--role-soft, #f59e0b2e);
}

.panel, .premium-card, .data-status-panel, .settings-card, .report-card, .whatsapp-card, .file-card, .permission-card {
  border-radius: var(--premium-radius-lg, 24px);
  box-shadow: var(--premium-shadow-card, 0 20px 60px #00000059);
  border-color: #ffffff14;
}

.metric-card, .kpi-card, .summary-card {
  background: radial-gradient(circle at 100% 0, #f59e0b2e, #0000 34%), linear-gradient(145deg, #0f2037f2, #07111ff5);
}

.status-chip, .status-badge, .source-badge {
  letter-spacing: .02em;
  border-radius: 999px;
  font-weight: 800;
}

button, .refresh-button, .density-button, .logout-button, .save-button, .export-button, .action-button {
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}

button:not(:disabled):hover, .refresh-button:not(:disabled):hover, .density-button:not(:disabled):hover, .logout-button:not(:disabled):hover, .save-button:not(:disabled):hover, .export-button:not(:disabled):hover, .action-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.page-content > * {
  animation: .34s both v48-fade-up;
}

@keyframes v48-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .premium-login-role-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-hero-badges {
    display: none;
  }
}

@media (max-width: 720px) {
  .premium-login-role-cards {
    grid-template-columns: 1fr;
  }

  .premium-role-card {
    min-height: 74px;
  }

  .login-support-actions, .kiosk-pin-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-content > *, .premium-role-card, .scada-login-shell .terminal-auth .login-primary, .scada-login-shell .terminal-auth .login-verify, button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

.app-shell {
  isolation: isolate;
  min-height: 100vh;
  transition: grid-template-columns var(--anim-normal);
  grid-template-columns: 252px minmax(0, 1fr);
  display: grid;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 80px minmax(0, 1fr);
}

.sidebar {
  z-index: 10;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--rail) 170px);
  flex-direction: column;
  height: 100vh;
  padding: 18px 14px;
  display: flex;
  position: sticky;
  top: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 30%, var(--rail)) 0%, var(--rail) 170px);
  }
}

.sidebar {
  overflow-y: auto;
}

.brand {
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
  gap: 11px;
  padding: 2px 8px 18px;
  display: flex;
}

.brand-mark {
  border: 1px solid var(--primary-line);
  border-radius: var(--r-md);
  width: 40px;
  height: 40px;
  color: var(--primary-strong);
  background: linear-gradient(140deg, var(--primary-soft), transparent 140%);
  box-shadow: var(--shadow-xs);
  flex: none;
  place-items: center;
  display: grid;
}

.brand strong {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  color: var(--text);
  font-size: 17px;
  line-height: 1.1;
  display: block;
}

.brand span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.sidebar-toggle {
  border-radius: var(--r-xs);
  width: 30px;
  height: 30px;
  color: var(--faint);
  background: none;
  border: 1px solid #0000;
  place-items: center;
  margin-left: auto;
  display: grid;
}

.sidebar-toggle:hover {
  color: var(--primary-strong);
  border-color: var(--line);
  background: var(--surface-2);
}

nav {
  gap: 16px;
  padding-top: 16px;
  display: grid;
}

.nav-group {
  gap: 2px;
  display: grid;
}

.nav-group-label {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 0 12px 6px;
  font-size: 10px;
  font-weight: 700;
}

nav button {
  border-radius: var(--r-md);
  width: 100%;
  min-height: 44px;
  color: var(--muted);
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  position: relative;
}

nav button:before {
  content: "";
  border-radius: var(--r-pill);
  background: var(--primary);
  width: 3px;
  height: 0;
  transition: height var(--anim-normal);
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
}

nav button:hover {
  color: var(--text);
  background: var(--surface-2);
}

nav button.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
}

nav button.active:before {
  height: 24px;
}

nav button svg {
  width: 30px;
  height: 30px;
  color: var(--faint);
  background: var(--surface-3);
  transition: background var(--anim-fast), color var(--anim-fast), transform var(--anim-fast), box-shadow var(--anim-fast);
  border-radius: 9px;
  flex: none;
  padding: 6px;
}

nav button:hover svg {
  color: var(--text);
  background: var(--line-soft);
}

nav button.active svg {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 5px 12px #ea8a0059;
}

.side-foot {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  color: var(--green);
  background: var(--surface-2);
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px 10px;
  margin-top: auto;
  padding: 12px;
  font-size: 11px;
  display: grid;
}

.side-foot svg {
  grid-row: span 2;
}

.side-foot span {
  color: var(--text);
  font-weight: 600;
}

.side-foot strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.side-foot small {
  color: var(--faint);
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 9px;
}

.sidebar-collapsed .brand {
  justify-content: center;
  gap: 6px;
  padding-inline: 0;
}

.sidebar-collapsed .brand > div:nth-child(2), .sidebar-collapsed nav button span, .sidebar-collapsed .nav-group-label, .sidebar-collapsed .side-foot span, .sidebar-collapsed .side-foot strong, .sidebar-collapsed .side-foot small {
  display: none;
}

.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
}

.sidebar-collapsed nav button {
  justify-content: center;
}

main {
  min-width: 0;
  padding: 0 24px 28px;
}

.topbar {
  z-index: 8;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  margin: 0 -24px 18px;
  padding: 12px 24px;
  display: flex;
  position: sticky;
  top: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .topbar {
    background: color-mix(in srgb, var(--canvas) 76%, transparent);
  }
}

.topbar {
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 32px -22px #10182859;
}

.page-heading {
  min-width: 170px;
}

.page-heading h1 {
  letter-spacing: -.025em;
  color: var(--text);
  font-size: 21px;
  font-weight: 700;
}

.page-heading p {
  max-width: 560px;
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.top-actions {
  justify-content: flex-end;
  align-items: end;
  gap: 8px;
  display: flex;
}

.top-actions label, .field, .login-form label, .routing-row label, .schedule-time {
  color: var(--muted);
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.top-actions label {
  width: min(300px, 27vw);
}

select, input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
  min-height: 38px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 0 12px;
  font-size: 13px;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 34px;
}

select:hover, input:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

input::placeholder, textarea::placeholder {
  color: var(--faint);
}

select:focus-visible, input:focus-visible, textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.logout-button, .refresh-button, .primary-action, .icon-action, .export-row button, .quick-actions button, .tabs button, .alarm-row button, .login-form button, .icon-danger {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 38px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.logout-button:hover, .icon-action:hover, .export-row button:hover, .quick-actions button:hover, .tabs button:hover {
  border-color: var(--primary-line);
  color: var(--primary-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.refresh-button, .primary-action {
  color: #281a02;
  background: var(--gradient-primary);
  border-color: #0000;
  font-weight: 750;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px #ea8a0047;
}

.refresh-button:after, .primary-action:after, .login-primary:after, .report-generate:after {
  content: "";
  background: var(--gradient-sheen);
  pointer-events: none;
  transition: transform .65s;
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}

.refresh-button:hover:after, .primary-action:hover:after, .login-primary:hover:after, .report-generate:hover:after {
  transform: translateX(130%);
}

[data-theme="dark"] .refresh-button, [data-theme="dark"] .primary-action, .theme-dark .refresh-button, .theme-dark .primary-action {
  color: #221501;
}

.refresh-button:hover:not(:disabled), .primary-action:hover:not(:disabled) {
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px #ea8a005c;
}

.refresh-button:disabled, button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

button:active {
  transform: translateY(0) scale(.985);
}

.spinning {
  animation: .9s linear infinite spin;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.page-stack, .solis-explorer, .solis-query-area {
  gap: 14px;
  display: grid;
}

.page-content {
  min-width: 0;
  max-width: 1720px;
  margin-inline: auto;
  animation: .24s ease-out both page-in;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--anim-fast), box-shadow var(--anim-normal);
  padding: 16px;
}

.panel:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}

.panel-head {
  border-bottom: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  display: flex;
}

.panel h2 {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
}

.panel h2:before {
  content: "";
  background: var(--gradient-primary);
  border-radius: 99px;
  flex: none;
  width: 3px;
  height: 14px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.status-badge, .source-badge {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  letter-spacing: .02em;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
}

.status-badge:before {
  content: "";
  background: currentColor;
  border-radius: 999px;
  flex: none;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px;
}

@supports (color: color-mix(in lab, red, red)) {
  .status-badge:before {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
  }
}

.source-badge, .status-badge.info {
  color: var(--info);
  border-color: var(--info-line);
  background: var(--info-soft);
}

.status-badge.ok {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

.status-badge.warn {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.status-badge.critical {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

.api-issue-strip {
  border: 1px solid var(--amber-line);
  border-radius: var(--r-md);
  background: var(--amber-soft);
  color: var(--amber);
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  display: grid;
}

.api-issue-strip strong {
  color: var(--text);
  font-size: 12px;
  display: block;
}

.api-issue-strip span {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.data-status-panel, .empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  min-height: 200px;
  color: var(--muted);
  background: var(--surface-2);
  text-align: center;
  place-items: center;
  gap: 8px;
  padding: 20px;
  display: grid;
}

.data-status-panel > svg, .empty-state > svg {
  width: 46px;
  height: 46px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary-line);
  border-radius: 15px;
  padding: 11px;
}

.data-status-panel strong, .empty-state strong {
  color: var(--text);
  font-size: 15px;
}

.data-status-panel p, .empty-state span {
  max-width: 720px;
  font-size: 12px;
  line-height: 1.5;
}

.issue-list {
  gap: 6px;
  width: 100%;
  display: grid;
}

.issue-list div {
  border-top: 1px solid var(--line);
  text-align: left;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  display: grid;
}

.overview-status-band {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
  overflow: hidden;
}

.overview-status {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px 16px;
  display: grid;
}

.overview-status + .overview-status {
  border-left: 1px solid var(--line-soft);
}

.overview-status svg {
  width: 32px;
  height: 32px;
  color: var(--info);
  background: currentColor;
  border-radius: 10px;
  padding: 7px;
}

@supports (color: color-mix(in lab, red, red)) {
  .overview-status svg {
    background: color-mix(in srgb, currentColor 11%, transparent);
  }
}

.overview-status span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 650;
  display: block;
}

.overview-status strong {
  color: var(--text);
  overflow-wrap: anywhere;
  margin-top: 5px;
  font-size: 14px;
  display: block;
}

.overview-status.ok svg, .overview-status.ok strong {
  color: var(--green);
}

.overview-status.warn svg, .overview-status.warn strong {
  color: var(--amber);
}

.overview-status.critical svg, .overview-status.critical strong {
  color: var(--red);
}

.overview-metric-band {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  grid-template-columns: repeat(8, minmax(110px, 1fr));
  display: grid;
  overflow-x: auto;
}

.band-metric {
  min-width: 116px;
  padding: 14px 15px;
}

.band-metric + .band-metric {
  border-left: 1px solid var(--line-soft);
}

.band-metric span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 650;
  display: block;
}

.band-metric strong {
  color: var(--text);
  white-space: nowrap;
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.05;
  display: block;
}

.band-metric.amber strong {
  color: var(--amber);
}

.band-metric small {
  color: var(--faint);
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
}

.overview-workspace {
  grid-template-columns: minmax(420px, 1.45fr) minmax(250px, .62fr) minmax(240px, .58fr);
  gap: 14px;
  display: grid;
}

.generation-panel {
  min-height: 330px;
}

.flow-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 330px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.flow-head {
  color: var(--text);
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.flow {
  grid-template-columns: 1fr;
  place-items: center;
  gap: 5px;
  min-height: 245px;
  padding: 10px 0;
  display: grid;
}

.node {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 120px;
  min-height: 58px;
  color: var(--muted);
  background: var(--surface-2);
  text-align: center;
  place-items: center;
  padding: 9px;
  font-size: 11px;
  display: grid;
}

.node strong {
  color: var(--info);
  margin-top: 4px;
  font-size: 16px;
}

.node.grid strong {
  color: var(--green);
}

.flow-line {
  background: linear-gradient(180deg, var(--primary), var(--green));
  border-radius: 99px;
  width: 2px;
  height: 18px;
}

.flow-legend {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.operations-rail {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 330px;
  box-shadow: var(--shadow-sm);
  padding: 0 14px;
}

.rail-item {
  border-bottom: 1px solid var(--line-soft);
  grid-template-columns: 17px minmax(72px, .7fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 55px;
  display: grid;
}

.rail-item:last-child {
  border-bottom: 0;
}

.rail-item span {
  color: var(--muted);
  font-size: 11px;
}

.rail-item svg {
  color: var(--info);
}

.rail-item strong {
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.rail-item.ok svg, .rail-item.ok strong {
  color: var(--green);
}

.rail-item.warn svg, .rail-item.warn strong {
  color: var(--amber);
}

.overview-lower {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 14px;
  display: grid;
}

.problem-strip {
  display: grid;
}

.problem-strip > div {
  border-top: 1px solid var(--line-soft);
  min-height: 44px;
  color: var(--text);
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: grid;
}

.problem-strip > div:first-child {
  border-top: 0;
}

.problem-strip .critical svg {
  color: var(--red);
}

.problem-strip .warning svg {
  color: var(--amber);
}

.inline-clear {
  min-height: 70px;
  color: var(--green);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.source-status-table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.source-health-tile {
  border-top: 1px solid var(--line-soft);
  grid-template-columns: minmax(70px, .6fr) minmax(0, 1fr);
  gap: 3px 8px;
  padding: 10px 11px;
  display: grid;
}

.source-health-tile:nth-child(-n+2) {
  border-top: 0;
}

.source-health-tile:nth-child(2n) {
  border-left: 1px solid var(--line-soft);
}

.source-health-tile span {
  color: var(--muted);
  font-size: 11px;
}

.source-health-tile strong {
  color: var(--text);
  text-align: right;
  font-size: 11px;
}

.source-health-tile small {
  color: var(--faint);
  overflow-wrap: anywhere;
  grid-column: 1 / -1;
  font-size: 10px;
}

.source-health-tile.live strong {
  color: var(--green);
}

.source-health-tile.warn strong {
  color: var(--amber);
}

.dashboard {
  animation: .45s both pageFadeIn;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.premium-command-center {
  border: 1px solid var(--primary-line);
  border-radius: var(--r-xl);
  background: radial-gradient(620px 300px at 0% 0%, var(--primary-glow), transparent 70%), radial-gradient(520px 280px at 100% 100%, #2563eb14, transparent 70%), var(--surface);
  max-width: 1720px;
  box-shadow: var(--shadow-md);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  margin: 0 auto 18px;
  padding: 26px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.premium-command-center:after {
  content: "";
  background: radial-gradient(circle, var(--primary-glow), transparent 65%);
  pointer-events: none;
  border-radius: 999px;
  width: 320px;
  height: 320px;
  position: absolute;
  inset: -25% -20% auto auto;
}

.command-copy, .command-status-card, .command-kpis {
  z-index: 1;
  position: relative;
}

.eyebrow {
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: .09em;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.command-copy h1 {
  color: var(--text);
  letter-spacing: -.035em;
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
}

.command-copy p {
  color: var(--muted);
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

.command-chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.command-status-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  align-content: start;
  gap: 14px;
  padding: 18px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .command-status-card {
    background: color-mix(in srgb, var(--surface) 76%, transparent);
  }
}

.command-status-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.status-line {
  align-items: center;
  gap: 12px;
  display: flex;
}

.status-line small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  display: block;
}

.status-line strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 750;
  display: block;
}

.live-dot {
  background: var(--green);
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
  position: relative;
}

.live-dot.warning {
  background: var(--warning);
}

.live-dot.critical {
  background: var(--red);
}

.live-dot:after {
  content: "";
  border-radius: inherit;
  background: #0e9f6e40;
  animation: 1.6s ease-out infinite livePulse;
  position: absolute;
  inset: -6px;
}

.live-dot.warning:after {
  background: #ea580c3d;
}

.live-dot.critical:after {
  background: #dc262638;
}

@keyframes livePulse {
  0% {
    opacity: .9;
    transform: scale(.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.health-score-ring {
  --score: 0%;
  background: conic-gradient(var(--green) var(--score), var(--surface-3) 0);
  border-radius: 50%;
  place-items: center;
  width: 142px;
  height: 142px;
  margin-inline: auto;
  display: grid;
  position: relative;
  box-shadow: 0 12px 30px -12px #0e9f6e73;
}

.health-score-ring:after {
  content: "";
  border-radius: inherit;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  position: absolute;
  inset: 11px;
}

.health-score-ring strong, .health-score-ring span {
  z-index: 1;
  text-align: center;
  position: relative;
}

.health-score-ring strong {
  color: var(--text);
  align-self: end;
  font-size: 32px;
  font-weight: 700;
}

.health-score-ring span {
  color: var(--muted);
  align-self: start;
  font-size: 11px;
  font-weight: 700;
}

.command-refresh-row {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.command-kpis {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  display: grid;
}

.card, .summary-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--anim-normal), box-shadow var(--anim-normal), border-color var(--anim-normal);
}

.card:hover, .summary-card:hover {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.summary-card {
  animation: .5s both cardEnter;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.summary-card:first-child {
  animation-delay: 50ms;
}

.summary-card:nth-child(2) {
  animation-delay: .1s;
}

.summary-card:nth-child(3) {
  animation-delay: .15s;
}

.summary-card:nth-child(4) {
  animation-delay: .2s;
}

.summary-card:nth-child(5) {
  animation-delay: .25s;
}

.summary-card:nth-child(6) {
  animation-delay: .3s;
}

.command-kpi {
  min-height: 150px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.kpi-icon {
  border-radius: var(--r-md);
  width: 42px;
  height: 42px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  place-items: center;
  margin-bottom: 14px;
  display: grid;
}

.command-kpi.info .kpi-icon {
  color: var(--info);
  background: var(--info-soft);
}

.command-kpi.success .kpi-icon {
  color: var(--green);
  background: var(--green-soft);
}

.card-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
  font-weight: 750;
}

.card-value {
  color: var(--text);
  overflow-wrap: anywhere;
  margin-top: 10px;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.card-unit {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.kpi-foot {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.kpi-foot small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.live-value {
  transition: color .22s, transform .22s;
}

.live-value.updated {
  animation: .35s valuePop;
}

.live-value.missing-value {
  color: var(--faint);
}

@keyframes valuePop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.solar-glow-card {
  position: relative;
  overflow: hidden;
}

.solar-glow-card:before {
  content: "";
  background: linear-gradient(120deg, transparent, var(--primary-glow), transparent);
  pointer-events: none;
  width: 80%;
  height: 180%;
  animation: 4s ease-in-out infinite solarSweep;
  position: absolute;
  top: -40%;
  left: -40%;
  transform: rotate(18deg);
}

@keyframes solarSweep {
  0% {
    transform: translateX(-120%) rotate(18deg);
  }

  55% {
    transform: translateX(180%) rotate(18deg);
  }

  100% {
    transform: translateX(180%) rotate(18deg);
  }
}

.issues-attention-panel {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--warning-soft), var(--surface) 65%);
  max-width: 1720px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #ea580c47;
  margin: 0 auto 16px;
  padding: 18px;
  animation: .45s both warningSlide;
}

.issues-head {
  color: var(--warning);
  align-items: center;
  gap: 12px;
  display: flex;
}

.issues-head strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  display: block;
}

.issues-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  display: block;
}

.issues-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.warning-banner {
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: var(--r-md);
  border: 1px solid #ea580c4d;
  padding: 14px 16px;
  font-weight: 650;
  animation: .45s both warningSlide;
}

.warning-banner.danger {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-line);
}

.warning-banner.info {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-line);
}

.warning-banner strong {
  color: inherit;
  font-size: 13px;
  display: block;
}

.warning-banner span {
  color: var(--muted);
  margin: 5px 0 9px;
  font-size: 12px;
  line-height: 1.45;
  display: block;
}

@keyframes warningSlide {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.worker-timeline, .developer-diagnostics {
  max-width: 1720px;
  margin: 14px auto 0;
  padding: 20px;
}

.section-title-row {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}

.section-title-row h2 {
  color: var(--text);
  letter-spacing: -.02em;
  text-transform: none;
  font-size: 17px;
  font-weight: 750;
}

.section-title-row p {
  color: var(--muted);
  font-size: 12px;
}

.timeline-list {
  gap: 10px;
  display: grid;
}

.timeline-event {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  display: grid;
}

.timeline-event i {
  background: var(--warning);
  border-radius: 999px;
  width: 10px;
  height: 10px;
}

.timeline-event.success i {
  background: var(--green);
}

.timeline-event.danger i {
  background: var(--red);
}

.timeline-event strong {
  color: var(--text);
  font-size: 13px;
  display: block;
}

.timeline-event span {
  color: var(--muted);
  font-size: 12px;
  display: block;
}

.timeline-event time {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

.developer-diagnostics summary {
  cursor: pointer;
  color: var(--text);
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 750;
  list-style: none;
  display: flex;
}

.developer-diagnostics summary::-webkit-details-marker {
  display: none;
}

.developer-diagnostics summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}

.developer-diagnostics pre {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas-deep);
  max-height: 520px;
  color: var(--muted);
  font: 11px/1.55 var(--font-mono);
  margin-top: 14px;
  padding: 14px;
  overflow: auto;
}

.commercial-kpi-rail {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.commercial-kpi-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 118px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--anim-normal), box-shadow var(--anim-normal), border-color var(--anim-normal);
  padding: 16px;
  animation: .5s both cardEnter;
}

.commercial-kpi-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-line);
  transform: translateY(-3px);
}

.commercial-kpi-top {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.commercial-kpi-top > span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 800;
}

.commercial-kpi-top svg {
  color: var(--primary-strong);
}

.commercial-kpi-card strong {
  color: var(--text);
  margin-top: 14px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.commercial-kpi-card small {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  display: block;
}

.commercial-kpi-card.green strong {
  color: var(--green);
}

.commercial-kpi-card.amber strong {
  color: var(--amber);
}

.commercial-kpi-card.cyan strong {
  color: var(--info);
}

.energy-flow-premium {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: radial-gradient(circle at top left, var(--primary-glow), transparent 36%), radial-gradient(circle at bottom right, #2563eb1a, transparent 36%), var(--surface);
  min-height: 230px;
  box-shadow: var(--shadow-sm);
  grid-template-columns: minmax(135px, 1fr) minmax(80px, .52fr) minmax(135px, 1fr) minmax(80px, .52fr) minmax(135px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.energy-flow-node {
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  place-items: center;
  gap: 6px;
  min-height: 150px;
  padding: 14px;
  display: grid;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .energy-flow-node {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
}

.energy-flow-node {
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.energy-node-icon {
  border-radius: var(--r-lg);
  width: 52px;
  height: 52px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  place-items: center;
  display: grid;
}

.energy-flow-node.live .energy-node-icon {
  color: var(--info);
  background: var(--info-soft);
}

.energy-flow-node.grid .energy-node-icon {
  color: var(--green);
  background: var(--green-soft);
}

.energy-flow-node.warn .energy-node-icon {
  color: var(--warning);
  background: var(--warning-soft);
}

.energy-flow-node span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  font-weight: 800;
}

.energy-flow-node strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
}

.energy-flow-node small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.energy-flow-line-premium {
  min-height: 88px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  position: relative;
}

.energy-flow-line-premium i {
  background: var(--primary);
  border-radius: 999px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .energy-flow-line-premium i {
    background: color-mix(in srgb, var(--primary) 24%, transparent);
  }
}

.energy-flow-line-premium i {
  transform: translateY(-50%);
}

.energy-flow-line-premium.grid i {
  background: var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .energy-flow-line-premium.grid i {
    background: color-mix(in srgb, var(--green) 23%, transparent);
  }
}

.energy-flow-line-premium.warn i {
  background: var(--warning);
}

@supports (color: color-mix(in lab, red, red)) {
  .energy-flow-line-premium.warn i {
    background: color-mix(in srgb, var(--warning) 23%, transparent);
  }
}

.energy-flow-line-premium i:after {
  content: "";
  color: var(--primary);
  background: linear-gradient(90deg, #0000, currentColor, #0000);
  animation: 1.9s ease-in-out infinite flowTravel;
  position: absolute;
  inset: 0;
}

.energy-flow-line-premium.grid i:after {
  color: var(--green);
}

.energy-flow-line-premium.warn i:after {
  color: var(--warning);
}

.energy-flow-line-premium span {
  z-index: 2;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 9px;
  position: relative;
}

@keyframes flowTravel {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

.energy-flow-legend-premium {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 650;
  display: flex;
}

.energy-flow-legend-premium span {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.energy-flow-legend-premium i {
  background: var(--primary);
  border-radius: 999px;
  width: 10px;
  height: 10px;
}

.energy-flow-legend-premium i.live {
  background: var(--info);
}

.energy-flow-legend-premium i.grid {
  background: var(--green);
}

.chart-cockpit, .plant-location-card, .meter-detail-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.chart-cockpit-head {
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
  display: flex;
}

.chart-cockpit-head span, .plant-location-copy span, .meter-detail-head span {
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 800;
}

.chart-cockpit-head h2, .plant-location-copy h2, .meter-detail-head h2 {
  color: var(--text);
  letter-spacing: -.02em;
  text-transform: none;
  margin-top: 3px;
  font-size: 21px;
  font-weight: 750;
}

.chart-cockpit-head p, .plant-location-copy p, .meter-detail-head p {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.chart-tabs-premium {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.chart-tabs-premium button {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 34px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
}

.chart-tabs-premium button:hover {
  color: var(--primary-strong);
  border-color: var(--primary-line);
  transform: translateY(-1px);
}

.chart-tabs-premium button.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
  border-color: var(--primary-line);
}

.chart-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  display: grid;
}

.chart-cockpit-body {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  min-height: 230px;
  padding: 12px;
}

.plant-location-card {
  align-content: start;
  gap: 14px;
  display: grid;
}

.plant-map-visual {
  border: 1px solid var(--info-line);
  border-radius: var(--r-lg);
  min-height: 132px;
  color: var(--info);
  background: radial-gradient(circle, var(--info) 0 18%, transparent 19% 100%), linear-gradient(135deg, var(--info-soft), var(--surface));
  place-items: center;
  display: grid;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .plant-map-visual {
    background: radial-gradient(circle, color-mix(in srgb, var(--info) 14%, transparent) 0 18%, transparent 19% 100%), linear-gradient(135deg, var(--info-soft), var(--surface));
  }
}

.plant-map-visual {
  overflow: hidden;
}

.plant-map-visual:before, .plant-map-visual:after {
  content: "";
  border: 1px dashed var(--info);
  position: absolute;
  inset: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .plant-map-visual:before, .plant-map-visual:after {
    border: 1px dashed color-mix(in srgb, var(--info) 22%, transparent);
  }
}

.plant-map-visual:before, .plant-map-visual:after {
  border-radius: 999px;
}

.plant-map-visual:after {
  inset: 38px;
}

.map-pulse {
  background: var(--info);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .map-pulse {
    background: color-mix(in srgb, var(--info) 18%, transparent);
  }
}

.map-pulse {
  animation: 1.7s ease-out infinite livePulse;
}

.plant-weather-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.plant-source-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.meter-action-stack {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.meter-detail-button, .meter-detail-actions button {
  border: 1px solid var(--info-line);
  border-radius: var(--r-pill);
  min-height: 32px;
  color: var(--info);
  background: var(--info-soft);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 750;
  display: inline-flex;
}

.meter-detail-button:hover, .meter-detail-actions button:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.meter-detail-panel {
  margin-top: 14px;
  scroll-margin-top: 90px;
  animation: .35s both pageFadeIn;
}

.meter-detail-head {
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
  display: flex;
}

.meter-detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.meter-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.meter-detail-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 14px;
  overflow-x: auto;
}

.meter-detail-table-wrap table {
  width: 100%;
  min-width: 620px;
}

.meter-detail-table-wrap th, .meter-detail-table-wrap td {
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.meter-detail-table-wrap tr:last-child td {
  border-bottom: 0;
}

.empty-state.compact {
  min-height: 190px;
}

.page-intro, .selected-inverter-banner, .solis-explorer-intro, .weather-command {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 64px;
  box-shadow: var(--shadow-sm);
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  display: grid;
}

.intro-mark, .selected-inverter-icon {
  border-radius: var(--r-md);
  color: #fff;
  background: var(--gradient-primary);
  border: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  box-shadow: 0 6px 14px #ea8a004d, inset 0 1px #ffffff40;
}

.intro-copy h2, .selected-inverter-banner h2, .solis-explorer-intro h2 {
  letter-spacing: -.02em;
  color: var(--text);
  text-transform: none;
  font-size: 16px;
  font-weight: 750;
}

.intro-copy p, .selected-inverter-banner p, .solis-explorer-intro p {
  max-width: 800px;
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.intro-status, .panel-action-stack, .selected-inverter-status, .solis-explorer-trust {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  display: flex;
}

.ops-summary, .ops-strip, .metrics-grid, .inverter-fleet-summary, .weather-solar-kpis {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  display: grid;
  overflow: hidden;
}

.ops-stat, .metric-card {
  border-right: 1px solid var(--line-soft);
  background: none;
  min-height: 76px;
  padding: 12px 14px;
}

.ops-stat:nth-child(4n), .metric-card:nth-child(4n) {
  border-right: 0;
}

.ops-stat:nth-child(n+5), .metric-card:nth-child(n+5) {
  border-top: 1px solid var(--line-soft);
}

.ops-stat:hover, .metric-card:hover {
  background: var(--surface-2);
}

.ops-stat {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  display: grid;
}

.ops-stat svg {
  width: 32px;
  height: 32px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary-line);
  border-radius: 10px;
  padding: 7px;
}

@supports (color: color-mix(in lab, red, red)) {
  .ops-stat svg {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-line) 55%, transparent);
  }
}

.ops-stat span, .metric-top span, .mini-metric span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 650;
  display: block;
}

.ops-stat strong, .metric-value {
  color: var(--text);
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}

.ops-stat strong.green, .metric-value.green {
  color: var(--green);
}

.ops-stat strong.amber, .metric-value.amber {
  color: var(--amber);
}

.ops-stat strong.red, .metric-value.red {
  color: var(--red);
}

.ops-stat strong.cyan, .metric-value.cyan {
  color: var(--info);
}

.metric-top {
  justify-content: space-between;
  gap: 6px;
  display: flex;
}

.metric-value small {
  color: var(--muted);
  margin-left: 4px;
  font-size: 10px;
}

.dashboard-charts, .analytics-grid, .ai-grid, .meters-grid, .inverter-detail-grid, .inverter-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-card, .ops-stat, .band-metric, .overview-status, .weather-value, .source-health-tile {
  animation: .45s cubic-bezier(.22, 1, .36, 1) both fade-up;
}

.metric-card:nth-child(2), .ops-stat:nth-child(2), .band-metric:nth-child(2), .overview-status:nth-child(2), .weather-value:nth-child(2), .source-health-tile:nth-child(2) {
  animation-delay: 50ms;
}

.metric-card:nth-child(3), .ops-stat:nth-child(3), .band-metric:nth-child(3), .overview-status:nth-child(3), .weather-value:nth-child(3), .source-health-tile:nth-child(3) {
  animation-delay: .1s;
}

.metric-card:nth-child(4), .ops-stat:nth-child(4), .band-metric:nth-child(4), .overview-status:nth-child(4), .weather-value:nth-child(4), .source-health-tile:nth-child(4) {
  animation-delay: .15s;
}

.metric-card:nth-child(5), .ops-stat:nth-child(5), .band-metric:nth-child(5), .weather-value:nth-child(5), .source-health-tile:nth-child(5) {
  animation-delay: .2s;
}

.metric-card:nth-child(6), .ops-stat:nth-child(6), .band-metric:nth-child(6), .source-health-tile:nth-child(6) {
  animation-delay: .25s;
}

.metric-card:nth-child(7), .ops-stat:nth-child(7), .band-metric:nth-child(7), .source-health-tile:nth-child(7) {
  animation-delay: .3s;
}

.metric-card:nth-child(n+8), .ops-stat:nth-child(n+8), .band-metric:nth-child(n+8), .source-health-tile:nth-child(n+8) {
  animation-delay: .35s;
}

.meter-headline, .chart-caption {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.meter-card {
  min-width: 0;
  overflow: hidden;
}

.meter-headline span, .chart-caption span, .preview-meta {
  color: var(--muted);
  font-size: 11px;
}

.meter-headline strong, .chart-caption strong {
  color: var(--text);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.meter-values, .identity-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0;
  display: grid;
  overflow: hidden;
}

.meter-values {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mini-metric {
  border-right: 1px solid var(--line-soft);
  min-height: 64px;
  padding: 10px;
}

.mini-metric:last-child {
  border-right: 0;
}

.mini-metric strong {
  color: var(--text);
  overflow-wrap: anywhere;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  display: block;
}

.chart-caption {
  align-items: center;
  margin: 12px 0 4px;
}

.chart-caption strong {
  color: var(--text);
}

.chart-card {
  animation: .7s both chartReveal;
}

@keyframes chartReveal {
  from {
    opacity: 0;
    transform-origin: bottom;
    transform: translateY(20px) scaleY(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.meter-card.live {
  border-color: var(--info-line);
}

.premium-meter-headline {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--info-soft), var(--surface) 60%);
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  display: flex;
}

.premium-meter-headline span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.premium-meter-headline strong {
  color: var(--text);
  overflow-wrap: anywhere;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 750;
  display: block;
}

.premium-meter-headline small {
  color: var(--red);
  font-weight: 650;
}

.meter-status-stack {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.meter-metric-group {
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-top: 14px;
  padding: 14px;
  position: relative;
}

.meter-metric-group header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.meter-metric-group h3 {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  font-weight: 800;
}

.meter-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.meter-metric-grid .mini-metric {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.meter-warning {
  margin-top: 14px;
}

.theiox-empty-state {
  border: 1px dashed var(--info-line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--info-soft), var(--surface) 70%);
  animation: 3s ease-in-out infinite emptyFloat;
}

.theiox-empty-state.compact {
  min-height: 150px;
  padding: 20px;
}

.empty-icon {
  border-radius: var(--r-lg);
  background: var(--info-soft);
  width: 64px;
  height: 64px;
  color: var(--info);
  place-items: center;
  margin: 0 auto 14px;
  display: grid;
}

@keyframes emptyFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.weather-command {
  grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
}

.weather-now {
  border-right: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  display: flex;
}

.weather-condition {
  align-items: center;
  gap: 10px;
  display: flex;
}

.weather-condition > svg {
  color: var(--primary-strong);
}

.weather-condition span, .weather-value span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 700;
}

.weather-condition h2 {
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--text);
  margin-top: 3px;
  font-size: 16px;
}

.weather-condition p {
  color: var(--muted);
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  font-size: 10px;
  display: flex;
}

.weather-temperature strong {
  color: var(--text);
  font-size: 36px;
  font-weight: 700;
}

.weather-temperature span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
  display: block;
}

.weather-live-grid {
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  display: grid;
}

.weather-value {
  border-left: 1px solid var(--line-soft);
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  padding: 9px;
  display: grid;
}

.weather-value svg {
  color: var(--info);
}

.weather-value strong {
  color: var(--text);
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.weather-value strong.amber {
  color: var(--amber);
}

.weather-value small {
  color: var(--faint);
  margin-top: 3px;
  font-size: 9px;
  display: block;
}

.hourly-weather-strip {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  grid-template-columns: repeat(12, minmax(78px, 1fr));
  display: grid;
  overflow-x: auto;
}

.hourly-weather-strip article {
  border-right: 1px solid var(--line-soft);
  text-align: center;
  justify-items: center;
  gap: 6px;
  min-height: 118px;
  padding: 10px 6px;
  display: grid;
}

.hourly-weather-strip article:hover {
  background: var(--surface-2);
}

.hourly-weather-strip span, .hourly-weather-strip small {
  color: var(--muted);
  font-size: 9px;
}

.hourly-weather-strip strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.hourly-weather-strip div {
  color: var(--info);
  gap: 3px;
  font-size: 9px;
  display: flex;
}

.hourly-weather-strip svg {
  color: var(--primary-strong);
}

.weather-detail-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 14px;
  display: grid;
}

.precaution-list {
  display: grid;
}

.precaution-list div {
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  font-size: 11px;
  display: grid;
}

.precaution-list div:first-child {
  border-top: 0;
}

.precaution-list svg {
  color: var(--amber);
}

.solar-source-note {
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  padding-top: 10px;
  font-size: 10px;
  display: grid;
}

.solar-source-note strong {
  color: var(--text);
}

.inverter-fleet-summary {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.inverter-registry-toolbar {
  border-bottom: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  display: flex;
}

.inverter-filter, .segmented-control {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 3px;
  display: inline-flex;
}

.inverter-filter button, .segmented-control button {
  min-height: 30px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.inverter-filter button.active, .segmented-control button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.inverter-search, .solis-search {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: min(340px, 100%);
  min-height: 38px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  display: flex;
}

.inverter-search:focus-within, .solis-search:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.inverter-search input, .solis-search input {
  width: 100%;
  min-height: 32px;
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.inverter-search input:focus-visible, .solis-search input:focus-visible {
  box-shadow: none;
}

.inverter-fleet-list {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
  display: grid;
}

.inverter-empty {
  min-height: 120px;
  color: var(--muted);
  text-align: center;
  place-items: center;
  font-size: 12px;
  display: grid;
}

.inverter-list-head {
  border-block: 1px solid var(--line-soft);
  color: var(--faint);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  grid-template-columns: 9px minmax(150px, 1.15fr) minmax(110px, .72fr) minmax(82px, .52fr) minmax(88px, .55fr) minmax(116px, .72fr) minmax(110px, .72fr) minmax(120px, auto);
  gap: 10px;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 750;
  display: grid;
}

.inverter-fleet-row {
  border: 0;
  border-top: 1px solid var(--line-soft);
  min-height: 54px;
  color: var(--text);
  text-align: left;
  background: none;
  grid-template-columns: 9px minmax(150px, 1.15fr) minmax(110px, .72fr) minmax(82px, .52fr) minmax(88px, .55fr) minmax(116px, .72fr) minmax(110px, .72fr) minmax(120px, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: grid;
}

.inverter-fleet-row:hover {
  background: var(--surface-2);
}

.inverter-fleet-row.active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 var(--primary);
}

.inverter-state-light {
  background: var(--red);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px var(--red-soft);
  border-radius: 50%;
}

.inverter-state-light.online {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.inverter-fleet-row small, .selected-inverter-banner span {
  color: var(--muted);
  font-size: 9px;
  display: block;
}

.inverter-fleet-row strong {
  overflow-wrap: anywhere;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 650;
  display: block;
}

.inverter-primary strong {
  color: var(--text);
  font-size: 12px;
}

.inverter-row-status, .selected-inverter-status {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  display: flex;
}

.inverter-logger-state {
  gap: 4px;
  display: grid;
}

.inverter-yield small, .inverter-yield strong {
  display: block;
}

.inverter-yield small {
  color: var(--muted);
  font-size: 9px;
}

.inverter-yield strong {
  color: var(--green);
  margin-top: 3px;
  font-size: 11px;
}

.selected-inverter-banner {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.selected-inverter-icon.online {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

.inverter-kpis {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.event-list {
  display: grid;
}

.event-list article {
  border-top: 1px solid var(--line-soft);
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  display: grid;
}

.event-list span {
  color: var(--muted);
  font-size: 10px;
}

.event-list strong {
  color: var(--text);
  font-size: 11px;
}

.inverter-detail-tabs {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  gap: 3px;
  padding: 4px;
  display: flex;
  overflow-x: auto;
}

.inverter-detail-tabs button {
  border-radius: var(--r-sm);
  min-height: 36px;
  color: var(--muted);
  background: none;
  border: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.inverter-detail-tabs button:hover {
  color: var(--text);
  background: var(--surface);
}

.inverter-detail-tabs button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.inverter-detail-tabs button span {
  color: #221501;
  background: var(--primary);
  border-radius: 5px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.inverter-tab-panel {
  gap: 14px;
  min-height: 190px;
  animation: .18s ease-out both page-in;
  display: grid;
}

.inverter-tab-panel .inverter-detail-grid {
  align-items: start;
}

.report-workspace, .whatsapp-layout, .local-layout {
  grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 14px;
  display: grid;
}

.step-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 12px;
  display: grid;
  overflow: hidden;
}

.step-row div {
  border-right: 1px solid var(--line-soft);
  min-height: 38px;
  color: var(--muted);
  align-items: center;
  gap: 6px;
  padding: 7px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.step-row div:last-child {
  border-right: 0;
}

.step-row span {
  border: 1px solid var(--line);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-weight: 700;
  display: grid;
}

.step-row .complete {
  color: var(--green);
  background: var(--green-soft);
}

.step-row .complete span {
  color: #fff;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green);
  border-color: #0000;
}

@supports (color: color-mix(in lab, red, red)) {
  .step-row .complete span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
  }
}

.builder-grid, .toggle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.export-row, .quick-actions, .tabs {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  display: flex;
}

.tabs {
  margin-top: 0;
}

.tabs button.active {
  border-color: var(--primary-line);
  color: var(--primary-deep);
  background: var(--primary-soft);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  width: 100%;
  max-height: min(64vh, 620px);
  overflow: auto;
}

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 650px;
  font-size: 12px;
}

th, td {
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  padding: 10px 12px;
}

th {
  height: 36px;
  color: var(--faint);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 750;
}

td {
  height: 40px;
  color: var(--text);
}

tbody tr {
  transition: background-color var(--anim-fast);
}

tbody tr:nth-child(2n) {
  background: var(--surface-2);
}

@supports (color: color-mix(in lab, red, red)) {
  tbody tr:nth-child(2n) {
    background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  }
}

tbody tr:hover {
  background: var(--surface-2);
}

tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 var(--primary);
}

.table-wrap thead {
  z-index: 2;
  position: sticky;
  top: 0;
}

.table-wrap thead th {
  box-shadow: 0 8px 14px -10px #1018284d;
}

.table-wrap th {
  padding: 0;
}

.table-wrap th button {
  width: 100%;
  min-height: 36px;
  color: inherit;
  text-align: left;
  text-transform: uppercase;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  display: flex;
}

.table-wrap th button:hover, .table-wrap th button.active {
  color: var(--primary-strong);
  background: var(--primary-soft);
}

.summary-list, .alarm-list, .connection-list, .routing-editor {
  display: grid;
}

.summary-list article, .alarm-row, .connection-list article, .routing-row {
  border-top: 1px solid var(--line-soft);
  background: none;
  padding: 11px 10px;
}

.summary-list article:first-child, .alarm-row:first-child, .connection-list article:first-child, .routing-row:first-child {
  border-top: 0;
}

.summary-list h3 {
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  font-weight: 800;
}

.summary-list p, .safe-note, .alarm-row span, .connection-list span, .route-summary {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
}

.ai-grid {
  align-items: start;
}

.action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.ai-policy, .storage-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  color: var(--muted);
  background: var(--surface-2);
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  font-size: 11px;
  display: grid;
}

.alarm-row, .connection-list article {
  grid-template-columns: minmax(200px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  display: grid;
}

.alarm-row div, .connection-list div {
  gap: 3px;
  display: grid;
}

.checklist-grid, .security-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  display: grid;
  overflow: hidden;
}

.checklist-grid div, .security-grid div {
  border-right: 1px solid var(--line-soft);
  min-height: 44px;
  color: var(--text);
  align-items: center;
  gap: 7px;
  padding: 8px;
  font-size: 10px;
  display: flex;
}

.checklist-grid svg, .security-grid svg {
  color: var(--green);
  flex: none;
}

.security-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.security-grid div {
  grid-template-columns: 20px minmax(0, 1fr);
  display: grid;
}

.security-grid span {
  color: var(--green);
  grid-column: 2;
}

.toggle {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 38px;
  color: var(--text);
  background: var(--surface);
  justify-content: space-between;
  align-items: center;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.toggle.compact {
  min-height: 32px;
  font-size: 10px;
}

.schedule-time {
  max-width: 220px;
  margin-top: 10px;
}

.routing-row {
  content-visibility: auto;
  contain-intrinsic-size: 120px;
  grid-template-columns: minmax(125px, .7fr) minmax(150px, .8fr) minmax(230px, 1.3fr) auto;
  align-items: end;
  gap: 8px;
  display: grid;
}

.routing-row:hover {
  background: var(--surface-2);
}

.recipient-permissions {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 6px;
  display: grid;
}

.route-summary {
  grid-column: 1 / -1;
}

.icon-danger {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

.icon-danger:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.hero-metric {
  display: none;
}

.auth-shell {
  background: none;
  min-height: 100vh;
}

.auth-loading {
  background: var(--canvas);
  place-content: center;
  justify-items: center;
  gap: 12px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.auth-loading:after {
  content: "";
  background: linear-gradient(120deg, transparent, var(--primary-glow), transparent);
  height: 80%;
  animation: 4s ease-in-out infinite solarSweep;
  position: absolute;
  inset: auto -40% -60%;
}

.auth-loading .brand-mark {
  width: 52px;
  height: 52px;
  animation: 1.4s ease-in-out infinite login-pulse;
}

.auth-loading strong {
  color: var(--text);
  font-size: 15px;
}

.auth-loading span {
  color: var(--muted);
  font-size: 11px;
}

.login-screen {
  background: radial-gradient(900px 460px at 12% 0%, var(--primary-glow), transparent 65%), radial-gradient(800px 420px at 95% 80%, #2563eb14, transparent 62%), var(--canvas);
  grid-template-rows: 72px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  display: grid;
  position: relative;
}

.login-hero-premium {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.login-screen:before, .login-screen:after {
  content: "";
  z-index: 0;
  filter: blur(56px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
  border-radius: 999px;
  width: 540px;
  height: 540px;
  position: absolute;
}

.login-screen:before {
  background: radial-gradient(circle, var(--primary-glow), transparent 70%);
  animation: 14s ease-in-out infinite alternate aurora-drift;
  top: -180px;
  left: -130px;
}

.login-screen:after {
  background: radial-gradient(circle, #2563eb29, #0000 70%);
  animation: 18s ease-in-out infinite alternate-reverse aurora-drift;
  bottom: -220px;
  right: -150px;
}

@keyframes aurora-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(60px, 44px, 0) scale(1.16);
  }
}

.login-brandbar, .login-layout {
  z-index: 1;
  position: relative;
}

.login-brandbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .login-brandbar {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }
}

.login-brandbar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.login-brand {
  align-items: center;
  gap: 12px;
  display: flex;
}

.login-brand strong {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 17px;
}

.login-brandbar > span {
  color: var(--faint);
  font-size: 11px;
}

.login-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .72fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 70px) clamp(20px, 4vw, 64px);
  display: grid;
}

.login-context {
  align-content: center;
  gap: clamp(32px, 5vh, 58px);
  min-width: 0;
  display: grid;
}

.login-context h1 {
  letter-spacing: -.04em;
  max-width: 680px;
  color: var(--text);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.04;
}

.login-context > div:first-child > p {
  max-width: 610px;
  color: var(--muted);
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
}

.login-energy-map {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), var(--surface);
  min-height: 132px;
  box-shadow: var(--shadow-sm);
  background-size: 46px 46px, 46px 46px, auto;
  grid-template-columns: repeat(7, auto);
  justify-content: start;
  align-items: center;
  gap: clamp(8px, 1.8vw, 24px);
  padding: 25px 20px;
  display: grid;
  position: relative;
}

.login-energy-map > div {
  min-width: 76px;
  color: var(--primary-strong);
  place-items: center;
  gap: 9px;
  display: grid;
}

.login-energy-map > div span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.login-energy-map > svg {
  color: var(--primary);
}

.login-trust-list {
  max-width: 650px;
  display: grid;
}

.login-trust-list article {
  border-top: 1px solid var(--line-soft);
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 72px;
  display: grid;
}

.login-trust-list article:first-child {
  border-top: 0;
}

.login-trust-list svg {
  color: var(--green);
}

.login-trust-list strong, .login-trust-list span {
  display: block;
}

.login-trust-list strong {
  color: var(--text);
  font-size: 13px;
}

.login-trust-list span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.login-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  justify-self: end;
  width: min(100%, 470px);
  padding: clamp(24px, 3vw, 38px);
}

@supports (color: color-mix(in lab, red, red)) {
  .login-panel {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
  }
}

.login-panel {
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadow-lg);
}

.login-panel-title {
  border-bottom: 1px solid var(--line-soft);
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding-bottom: 23px;
  display: grid;
}

.login-lock {
  border-radius: var(--r-md);
  color: #fff;
  background: var(--gradient-primary);
  border: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  box-shadow: 0 6px 16px #ea8a0052, inset 0 1px #ffffff40;
}

.login-panel-title h2 {
  letter-spacing: -.02em;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
}

.login-panel-title p {
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.login-form {
  gap: 15px;
  padding-top: 23px;
  display: grid;
}

.login-form label {
  color: var(--muted);
  gap: 7px;
  font-size: 11px;
  font-weight: 650;
  display: grid;
}

.login-form label > small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
}

.phone-field, .otp-field {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 48px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  align-items: center;
  display: flex;
  overflow: hidden;
}

.phone-field:focus-within, .otp-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.phone-field > span {
  border-right: 1px solid var(--line);
  min-width: 64px;
  color: var(--text);
  background: var(--surface-2);
  align-self: stretch;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  display: grid;
}

.phone-field input, .otp-field input {
  width: 100%;
  min-height: 46px;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 14px;
  font-size: 14px;
}

.phone-field input:focus, .otp-field input:focus {
  box-shadow: none;
  outline: 0;
}

.otp-field {
  padding-left: 14px;
}

.otp-field svg {
  flex: none;
}

.field-disabled {
  opacity: .46;
}

.login-primary, .login-verify {
  border-radius: var(--r-sm);
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
}

.login-form .login-primary, .login-form .login-verify {
  min-height: 48px;
}

.login-primary, .login-form .login-primary {
  color: #281a02;
  background: var(--gradient-primary);
  border: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px #ea8a004d;
}

.login-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px #ea8a0061;
}

.login-verify, .login-form .login-verify {
  color: #fff;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 0;
  box-shadow: 0 8px 20px #0f172a47;
}

.login-verify:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px #0f172a5c;
}

[data-theme="dark"] .login-form .login-verify, .theme-dark .login-form .login-verify {
  background: linear-gradient(135deg, #334155, #1e293b);
}

.login-primary:disabled, .login-verify:disabled {
  opacity: .45;
  transform: none;
}

.login-divider {
  color: var(--faint);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 650;
  display: grid;
}

.login-divider:before, .login-divider:after {
  content: "";
  background: var(--line);
  height: 1px;
}

.login-status {
  border: 1px solid var(--line);
  border-left: 3px solid var(--faint);
  border-radius: var(--r-xs);
  min-height: 38px;
  color: var(--muted);
  background: var(--surface-2);
  overflow-wrap: anywhere;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 11px;
  font-size: 11px;
  line-height: 1.5;
  display: grid;
}

.login-status.success {
  border-left-color: var(--green);
  color: var(--green);
  background: var(--green-soft);
}

.login-status.error {
  border-left-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
}

.login-allowlist {
  border-block: 1px solid var(--line-soft);
  color: var(--muted);
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  margin-top: 19px;
  padding: 13px 0;
  display: grid;
}

.login-allowlist svg {
  color: var(--faint);
}

.login-allowlist p {
  font-size: 10px;
  line-height: 1.55;
}

.login-security {
  color: var(--faint);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 16px;
  font-size: 9px;
  display: flex;
}

.login-security span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.login-security span:first-child {
  color: var(--green);
}

@keyframes login-pulse {
  0%, 100% {
    opacity: .62;
    transform: scale(.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.login-agent-panel {
  border: 1px solid var(--info-line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--info-soft), var(--green-soft) 130%);
  max-width: 650px;
  box-shadow: var(--shadow-sm);
  gap: 14px;
  padding: 16px;
  display: grid;
}

.login-agent-head {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.login-agent-head > svg {
  color: var(--info);
}

.login-agent-head strong, .login-agent-head span {
  display: block;
}

.login-agent-head strong {
  color: var(--text);
  font-size: 13px;
}

.login-agent-head span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.login-agent-head b {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  min-height: 28px;
  color: var(--muted);
  background: var(--surface);
  text-transform: uppercase;
  letter-spacing: .04em;
  justify-content: center;
  align-items: center;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
}

.login-agent-head b.online {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

.login-agent-head b.offline {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

.login-agent-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.login-agent-metrics span {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  min-height: 56px;
  padding: 10px;
}

.login-agent-metrics small, .login-agent-metrics strong {
  display: block;
}

.login-agent-metrics small {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
}

.login-agent-metrics strong {
  color: var(--text);
  margin-top: 6px;
  font-size: 13px;
}

.solis-explorer-intro {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 56px;
  padding: 10px 14px;
}

.solis-explorer-intro > div:first-child > span {
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.solis-explorer-intro h2 {
  font-size: 15px;
}

.solis-explorer-intro p {
  display: none;
}

.solis-workspace {
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}

.solis-workspace > .panel {
  position: sticky;
  top: 92px;
}

.solis-category-tabs {
  border-bottom: 1px solid var(--line-soft);
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 9px;
  display: flex;
  overflow-x: auto;
}

.solis-category-tabs button {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 30px;
  color: var(--muted);
  background: var(--surface-2);
  flex: none;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
}

.solis-category-tabs button.active {
  color: var(--primary-deep);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

.solis-dataset-list {
  max-height: 585px;
  display: grid;
  overflow-y: auto;
}

.solis-dataset-list button {
  border: 0;
  border-top: 1px solid var(--line-soft);
  min-height: 44px;
  color: var(--text);
  text-align: left;
  background: none;
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  display: grid;
}

.solis-dataset-list button:hover {
  background: var(--surface-2);
}

.solis-dataset-list button.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 var(--primary);
}

.solis-dataset-list strong, .solis-dataset-list small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.solis-dataset-list strong {
  font-size: 11px;
}

.solis-dataset-list small {
  color: var(--faint);
  margin-top: 3px;
  font-size: 9px;
}

.solis-description {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.endpoint-chip {
  border: 1px solid var(--info-line);
  border-radius: var(--r-pill);
  color: var(--info);
  background: var(--info-soft);
  font: 9px/1.4 var(--font-mono);
  margin-top: 8px;
  padding: 4px 8px;
  display: inline-block;
}

.solis-input-grid {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 11px;
  display: grid;
}

.solis-input-grid .span-two {
  grid-column: span 2;
}

.solis-query-actions, .solis-result-toolbar, .solis-response-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  display: flex;
}

.solis-query-actions > span, .solis-response-meta {
  color: var(--muted);
  font-size: 10px;
}

.solis-result-toolbar {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 9px;
}

.solis-query-area > .panel:first-child {
  border-top: 3px solid var(--primary);
}

.solis-error {
  border: 1px solid var(--amber-line);
  border-radius: var(--r-md);
  color: var(--amber);
  background: var(--amber-soft);
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  padding: 11px;
  display: grid;
}

.solis-error strong, .solis-error span {
  font-size: 11px;
  display: block;
}

.solis-search {
  flex: 1;
  width: auto;
  min-width: 210px;
}

.solis-table table {
  min-width: 920px;
}

.solis-table th, .solis-table td {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  font-size: 10px;
  overflow: hidden;
}

.use-row-button {
  border: 1px solid var(--info-line);
  border-radius: var(--r-xs);
  width: 28px;
  height: 28px;
  color: var(--info);
  background: var(--info-soft);
  place-items: center;
  display: grid;
}

.use-row-button:hover {
  transform: translateY(-1px);
}

.json-viewer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 610px;
  color: var(--text);
  background: var(--canvas-deep);
  font: 10px/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 10px;
  padding: 12px;
  overflow: auto;
}

[data-theme="dark"] .json-viewer, .theme-dark .json-viewer {
  color: #bfe3f5;
}

.sr-only {
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}

.meters-page .meters-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meters-page .meter-card {
  border-top: 3px solid var(--info);
}

.meters-page .meter-values {
  margin-top: 12px;
}

.meters-page .mini-metric strong {
  color: var(--info);
  font-size: 13px;
}

.weather-page .weather-command {
  min-height: 120px;
}

.weather-page .weather-solar-kpis {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  overflow-x: auto;
}

.weather-page .dashboard-charts > .panel {
  min-height: 285px;
}

.inverters-page .selected-inverter-banner {
  border-left: 3px solid var(--primary);
  min-height: 64px;
}

.inverters-page .identity-grid {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.inverters-page .identity-grid .mini-metric {
  background: none;
}

.inverters-page .inverter-detail-grid > .panel, .inverters-page > .panel {
  min-width: 0;
}

.inverters-page .event-list article.warning {
  box-shadow: inset 3px 0 var(--amber);
}

.analytics-page .analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-page .analytics-grid > .panel:first-child {
  grid-column: 1 / -1;
  min-height: 300px;
}

.analytics-page .analytics-grid > .panel {
  min-height: 275px;
}

.reports-page .step-row {
  margin: 0;
}

.reports-page .step-row div {
  min-height: 42px;
}

.reports-page .report-workspace {
  grid-template-columns: minmax(260px, .52fr) minmax(0, 1.48fr);
}

.report-config-panel {
  position: sticky;
  top: 92px;
}

.report-config-panel .builder-grid {
  grid-template-columns: 1fr;
}

.report-save-action {
  width: 100%;
  margin-top: 8px;
}

.report-save-note {
  margin-bottom: 0;
}

.report-save-note.saved {
  color: var(--success);
}

.report-save-note.error {
  color: var(--danger);
}

.maintenance-agent-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  display: grid;
}

.monitoring-agent-panel {
  overflow: hidden;
}

.monitoring-agent-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.monitoring-agent-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  display: flex;
}

.monitoring-agent-toolbar > span {
  color: var(--muted);
  font-size: 10px;
}

.monitoring-agent-message {
  border: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted);
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  font-size: 11px;
  display: flex;
}

.monitoring-agent-message svg {
  color: var(--info);
  flex: none;
}

.monitoring-pending-list {
  gap: 7px;
  margin-top: 12px;
  display: grid;
}

.monitoring-pending-list > strong {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}

.monitoring-pending-list article {
  border: 1px solid var(--line);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  display: grid;
}

.monitoring-pending-list article span {
  color: var(--warning);
  text-transform: uppercase;
  font-size: 8px;
}

.monitoring-pending-list article strong {
  color: var(--text);
  margin-top: 3px;
  font-size: 12px;
  display: block;
}

.monitoring-pending-list article p {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.monitoring-pending-list article > div:last-child {
  align-items: center;
  gap: 6px;
  display: flex;
}

.monitoring-pending-list button {
  border: 1px solid var(--line);
  min-height: 32px;
  color: var(--muted);
  background: none;
  padding: 0 10px;
}

.monitoring-pending-list button.approve {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green);
}

@media (max-width: 720px) {
  .monitoring-agent-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-agent-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .monitoring-pending-list article {
    grid-template-columns: 1fr;
  }
}

.maintenance-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.maintenance-action {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: auto;
  min-height: 34px;
  color: var(--text);
  background: var(--surface);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.maintenance-action:hover:not(:disabled) {
  color: var(--primary-strong);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

.maintenance-action.primary {
  color: #281a02;
  background: var(--gradient-primary);
  border-color: #0000;
}

.whatsapp-detail-selector {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .whatsapp-detail-selector {
    background: color-mix(in srgb, var(--panel-2) 84%, transparent);
  }
}

.selector-heading {
  color: var(--text);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 12px;
  display: flex;
}

.selector-heading strong {
  color: var(--accent);
  font-size: 11px;
}

.detail-toggle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.report-preview-panel {
  overflow: hidden;
}

.report-generate {
  color: #281a02;
  background: var(--gradient-primary);
  border-color: #0000;
  width: 100%;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px #ea8a0047;
}

.report-generate:hover:not(:disabled) {
  box-shadow: 0 10px 26px #ea8a005c;
}

.report-state {
  border: 1px solid var(--green-line);
  border-radius: var(--r-sm);
  color: var(--green);
  background: var(--green-soft);
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  font-size: 11px;
  display: grid;
}

.report-state.loading {
  border-color: var(--info-line);
  color: var(--info);
  background: var(--info-soft);
}

.report-state.error {
  border-color: var(--red-line);
  color: var(--red);
  background: var(--red-soft);
}

.preview-meta {
  color: var(--muted);
  font-size: 10px;
}

.report-summary-strip {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  display: grid;
  overflow: hidden;
}

.report-summary-strip .mini-metric {
  min-height: 56px;
}

.report-export-row {
  border-top: 1px solid var(--line-soft);
  justify-content: flex-end;
  padding-top: 10px;
}

.report-export-row button:first-child {
  border-color: var(--info-line);
  color: var(--info);
  background: var(--info-soft);
}

.ai-page .ai-grid {
  grid-template-columns: 190px minmax(0, 1fr) minmax(250px, .42fr);
}

.ai-index {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  align-content: start;
  display: grid;
  position: sticky;
  top: 92px;
  overflow: hidden;
}

.ai-index > span {
  border-bottom: 1px solid var(--line-soft);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px;
  font-size: 10px;
  font-weight: 750;
}

.ai-index button {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 40px;
  color: var(--muted);
  text-align: left;
  background: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.ai-index button:hover {
  color: var(--primary-strong);
  background: var(--primary-soft);
}

.ai-page .summary-list article {
  padding: 14px 10px;
  scroll-margin-top: 95px;
}

.ai-page .summary-list h3 {
  font-size: 12px;
}

.ai-page .summary-list p {
  max-width: 820px;
  line-height: 1.65;
}

.alarms-page .alarm-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alarms-page .tabs {
  border-bottom: 1px solid var(--line);
}

.alarms-page .tabs button {
  min-width: 116px;
  box-shadow: none;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  border-radius: 0;
}

.alarms-page .tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary-deep);
  background: none;
}

.alarms-page .alarm-row {
  min-height: 54px;
  padding-inline: 8px;
}

.alarms-page .checklist-grid div {
  background: var(--surface);
}

.whatsapp-page .whatsapp-layout {
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr);
}

.whatsapp-page .whatsapp-layout > .panel:first-child {
  position: sticky;
  top: 92px;
}

.whatsapp-page .routing-row {
  grid-template-columns: minmax(120px, .65fr) minmax(155px, .8fr) minmax(250px, 1.35fr) 38px;
  padding: 12px 4px;
}

.whatsapp-page .icon-danger {
  width: 38px;
  padding: 0;
  font-size: 0;
}

.whatsapp-page .route-summary {
  border-left: 2px solid var(--line);
  padding-left: 8px;
}

.whatsapp-page .export-row button:last-of-type {
  border-color: var(--info-line);
  color: var(--info);
  background: var(--info-soft);
}

.whatsapp-bot-readiness {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 12px;
  display: flex;
}

.bot-log-filter {
  min-width: 170px;
  color: var(--muted);
  gap: 4px;
  font-size: 11px;
  display: grid;
}

.bot-log-filter select {
  min-height: 36px;
}

.whatsapp-card.running {
  border-color: var(--green-line);
}

.whatsapp-preview-card {
  border: 1px solid var(--green-line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--green-soft), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
  gap: 13px;
  padding: 16px;
  display: grid;
}

.whatsapp-preview-head {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(135deg, #15994f, #0b6e3a);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: -16px -16px 0;
  padding: 13px 16px;
  display: flex;
}

.whatsapp-preview-head span {
  color: #ffffffb8;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.whatsapp-preview-head strong {
  color: #fff;
  margin-top: 4px;
  font-size: 16px;
  display: block;
}

.whatsapp-preview-head .status-badge {
  color: #fff;
  background: #ffffff24;
  border-color: #ffffff59;
}

.whatsapp-phone-preview {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  display: grid;
}

.whatsapp-phone-preview > svg {
  color: var(--green);
  margin-top: 8px;
}

.message-bubble {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: 16px 16px 16px 4px;
  gap: 5px;
  max-width: 520px;
  padding: 13px 14px;
  display: grid;
}

.message-bubble strong {
  color: var(--text);
  font-size: 13px;
}

.message-bubble span {
  color: var(--text);
  font-size: 12px;
}

.message-bubble small {
  color: var(--muted);
  font-size: 10px;
}

.whatsapp-preview-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.local-data-page .metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.local-data-page .local-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
}

.local-data-page .storage-card {
  margin: 0;
  padding: 18px 14px;
}

.local-data-page .storage-card svg {
  color: var(--info);
}

.local-data-page .storage-card strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.local-data-page .storage-card span {
  grid-column: 2;
  line-height: 1.55;
}

.settings-workspace {
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}

.settings-nav {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  position: sticky;
  top: 92px;
  overflow: hidden;
}

.settings-nav button {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 44px;
  color: var(--muted);
  text-align: left;
  background: none;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.settings-nav button:last-child {
  border-bottom: 0;
}

.settings-nav button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.settings-nav button.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 var(--primary);
}

.settings-content {
  min-width: 0;
}

.connection-table {
  display: grid;
}

.connection-table-head, .connection-table article {
  grid-template-columns: minmax(130px, .75fr) minmax(220px, 1.4fr) minmax(110px, .7fr) minmax(110px, .72fr) 34px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.connection-table-head {
  border-bottom: 1px solid var(--line);
  min-height: 36px;
  color: var(--faint);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 750;
}

.connection-table article {
  border-bottom: 1px solid var(--line-soft);
  min-height: 52px;
  padding: 7px 10px;
}

.connection-table article:hover {
  background: var(--surface-2);
}

.connection-table article:last-child {
  border-bottom: 0;
}

.connection-table article > strong {
  color: var(--text);
  font-size: 11px;
}

.connection-table article > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.credential-ok {
  color: var(--green) !important;
}

.credential-warn {
  color: var(--amber) !important;
}

.connection-test {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: var(--surface);
  place-items: center;
  padding: 0;
  display: grid;
}

.connection-test:hover {
  color: var(--info);
  border-color: var(--info-line);
  background: var(--info-soft);
}

.connection-loading {
  min-height: 120px;
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.diagnostics-console {
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  background: #0b1424;
  border: 1px solid #233047;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.diagnostics-console > strong {
  color: #cbd5e1;
  margin-bottom: 7px;
  font-size: 11px;
}

.diagnostics-console > div {
  border-top-color: #94a6be1f;
}

.diagnostics-console time {
  color: #64748b;
}

.diagnostics-console p {
  color: #94a3b8;
}

.diagnostics-console > div {
  border-top: 1px solid var(--line-soft);
  grid-template-columns: 7px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  display: grid;
}

.diagnostics-console > div:first-of-type {
  border-top: 0;
}

.diagnostics-console i, .diagnostics-console span {
  background: var(--amber);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.diagnostics-console span.ok {
  background: var(--green);
}

.diagnostics-console time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
}

.diagnostics-console p {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 10px;
}

.settings-security-stack {
  gap: 10px;
  display: grid;
}

.environment-checklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.environment-checklist div {
  border-top: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 9px;
  display: flex;
}

.environment-checklist div:nth-child(-n+2) {
  border-top: 0;
}

.environment-checklist div:nth-child(2n) {
  border-left: 1px solid var(--line-soft);
}

.environment-checklist code {
  color: var(--info);
  font: 10px/1.4 var(--font-mono);
}

.settings-policy-list {
  display: grid;
}

.settings-policy-list div {
  border-top: 1px solid var(--line-soft);
  grid-template-columns: minmax(150px, .65fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 48px;
  display: grid;
}

.settings-policy-list div:first-child {
  border-top: 0;
}

.settings-policy-list span {
  color: var(--muted);
  font-size: 11px;
}

.settings-policy-list strong {
  color: var(--text);
  font-size: 11px;
}

.notification-bell {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 38px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  position: relative;
}

.notification-bell:hover {
  color: var(--info);
  border-color: var(--info-line);
  transform: translateY(-1px);
}

.notification-bell.has-issues {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.notification-bell.has-issues:after {
  content: "";
  background: var(--red);
  border-radius: 999px;
  width: 8px;
  height: 8px;
  animation: 1.5s ease-out infinite livePulse;
  position: absolute;
  top: 6px;
  right: 7px;
}

.notification-panel {
  z-index: 70;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: min(420px, 100vw - 28px);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  animation: .28s both cardEnter;
  position: fixed;
  top: 84px;
  right: 18px;
}

.notification-panel-head {
  border-bottom: 1px solid var(--line-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  display: flex;
}

.notification-panel-head strong {
  color: var(--text);
  font-size: 15px;
  display: block;
}

.notification-panel-head span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.notification-panel-head button {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  place-items: center;
  display: grid;
}

.notification-list {
  gap: 8px;
  max-height: 360px;
  padding: 12px 0;
  display: grid;
  overflow: auto;
}

.notification-list article {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  display: grid;
}

.notification-list article.danger {
  border-color: var(--red-line);
  background: var(--red-soft);
  color: var(--red);
}

.notification-list article.warning {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

.notification-list article.info {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

.notification-list strong {
  color: var(--text);
  font-size: 12px;
  display: block;
}

.notification-list span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  display: block;
}

.notification-list small {
  color: currentColor;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.notification-empty {
  min-height: 170px;
  color: var(--green);
  text-align: center;
  place-items: center;
  gap: 7px;
  display: grid;
}

.notification-empty span {
  max-width: 280px;
  color: var(--muted);
  font-size: 11px;
}

.notification-freshness {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
  display: grid;
}

.notification-freshness span {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  background: var(--surface-2);
  padding: 8px;
  font-size: 10px;
}

.control-room-overlay {
  z-index: 90;
  color: var(--text);
  background: radial-gradient(circle at 20% 15%, var(--primary-glow), transparent 30%), radial-gradient(circle at 82% 18%, #2563eb1a, transparent 32%), var(--canvas);
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: 24px;
  animation: .32s both pageFadeIn;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: auto;
}

.control-room-head {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  display: flex;
}

.control-room-head h2 {
  letter-spacing: -.03em;
  margin-top: 7px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
}

.control-room-head p {
  color: var(--muted);
  margin-top: 7px;
  font-size: 13px;
}

.control-room-actions {
  flex-wrap: wrap;
  gap: 9px;
  display: flex;
}

.control-room-grid {
  grid-template-columns: 1.35fr repeat(4, minmax(120px, 1fr));
  gap: 12px;
  display: grid;
}

.control-room-health, .control-room-metric {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-height: 142px;
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.control-room-health {
  background: linear-gradient(135deg, var(--amber-soft), var(--surface) 70%);
  align-content: center;
  display: grid;
}

.control-room-health.ok {
  background: linear-gradient(135deg, var(--green-soft), var(--surface) 70%);
}

.control-room-health span, .control-room-metric span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 750;
}

.control-room-health strong {
  color: var(--green);
  margin-top: 8px;
  font-size: 64px;
  line-height: .95;
  display: block;
}

.control-room-health.warn strong {
  color: var(--amber);
}

.control-room-health small, .control-room-metric small {
  color: var(--muted);
  margin-top: 7px;
  font-size: 11px;
}

.control-room-metric {
  align-content: center;
  gap: 7px;
  display: grid;
}

.control-room-metric svg {
  color: var(--info);
}

.control-room-metric strong {
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
}

.control-room-line {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  min-height: 260px;
  box-shadow: var(--shadow-sm);
  grid-template-columns: 1fr minmax(130px, .65fr) 1fr minmax(130px, .65fr) 1fr;
  align-items: center;
  gap: 12px;
  padding: 20px;
  display: grid;
}

.control-node {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  place-items: center;
  gap: 7px;
  min-height: 180px;
  display: grid;
}

.control-node svg {
  color: var(--primary-strong);
}

.control-node.inverter svg {
  color: var(--info);
}

.control-node.load svg {
  color: var(--green);
}

.control-node span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 750;
}

.control-node strong {
  font-size: 28px;
}

.control-flow {
  min-height: 90px;
  color: var(--muted);
  text-transform: uppercase;
  place-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 750;
  display: grid;
  position: relative;
}

.control-flow i {
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  border-radius: 999px;
  width: 100%;
  height: 8px;
  display: block;
  overflow: hidden;
}

.control-flow i:after {
  content: "";
  border-radius: inherit;
  background: #ffffffd9;
  width: 40%;
  height: 100%;
  animation: 1.6s linear infinite flowMove;
  display: block;
}

.control-flow.blue i {
  background: linear-gradient(90deg, transparent, var(--info), transparent);
}

.control-flow span {
  color: var(--text);
  font-size: 16px;
}

.control-room-issues {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  gap: 8px;
  padding: 16px;
  display: grid;
}

.control-room-issues > strong {
  font-size: 15px;
}

.control-room-issues div {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 12px;
  display: grid;
}

.control-room-issues div.ok {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

.control-room-issues div.danger {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

.control-room-issues div.warning {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.single-line-diagram {
  grid-template-columns: 1fr minmax(86px, .48fr) 1fr minmax(86px, .48fr) 1fr minmax(86px, .48fr) 1fr;
  align-items: center;
  gap: 10px;
  min-height: 230px;
  padding: 12px;
  display: grid;
}

.single-line-node {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  min-height: 168px;
  box-shadow: var(--shadow-xs);
  place-items: center;
  gap: 7px;
  padding: 14px;
  display: grid;
}

.single-line-node svg {
  color: var(--info);
}

.single-line-node.solar svg, .single-line-node.solar strong {
  color: var(--primary-strong);
}

.single-line-node.load svg, .single-line-node.grid svg, .single-line-node.load strong, .single-line-node.grid strong {
  color: var(--green);
}

.single-line-node.warn svg, .single-line-node.warn strong {
  color: var(--amber);
}

.single-line-node span {
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.single-line-node strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.single-line-node small {
  min-height: 14px;
  color: var(--muted);
  font-size: 10px;
}

.single-line-wire {
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  place-items: center;
  gap: 7px;
  font-size: 9px;
  display: grid;
}

.single-line-wire i {
  background: var(--surface-3);
  border-radius: 999px;
  width: 100%;
  height: 6px;
  position: relative;
  overflow: hidden;
}

.single-line-wire i:after {
  content: "";
  border-radius: inherit;
  width: 45%;
  animation: 1.8s linear infinite flowMove;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
}

.single-line-wire.solar i:after {
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.single-line-wire.load i:after {
  background: linear-gradient(90deg, transparent, var(--info), transparent);
}

.single-line-wire.export i:after {
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}

.single-line-wire.import i:after {
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation-direction: reverse;
}

.single-line-wire strong {
  color: var(--text);
  font-size: 11px;
}

.single-line-footer {
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
  display: flex;
}

.single-line-footer span {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  background: var(--surface);
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 10px;
  display: inline-flex;
}

.single-line-footer i {
  background: var(--info);
  border-radius: 999px;
  width: 9px;
  height: 9px;
}

.single-line-footer i.solar {
  background: var(--primary);
}

.single-line-footer i.load {
  background: var(--info);
}

.single-line-footer i.export {
  background: var(--green);
}

.single-line-footer i.import {
  background: var(--amber);
}

.plant-comparison-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  display: grid;
}

.plant-comparison-grid article {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  gap: 11px;
  padding: 14px;
  display: grid;
}

.plant-comparison-grid article.warn {
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.plant-comparison-grid article > div:first-child {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.plant-comparison-grid strong {
  color: var(--text);
}

.plant-compare-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.plant-compare-values span {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 8px;
}

.plant-compare-values small {
  color: var(--muted);
  font-size: 9px;
  display: block;
}

.plant-compare-values b {
  color: var(--info);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.plant-comparison-grid p {
  color: var(--muted);
  font-size: 10px;
}

.meter-trend-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
  display: grid;
}

.meter-trend-strip.large {
  margin: 14px 0;
}

.mini-trend {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  min-width: 0;
  padding: 10px;
}

.mini-trend div {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  display: flex;
}

.mini-trend span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.mini-trend strong {
  color: var(--text);
  font-size: 12px;
}

.mini-trend small {
  color: var(--muted);
  font-size: 8px;
}

.mini-trend svg {
  width: 100%;
  height: 38px;
  display: block;
}

.mini-trend polyline {
  fill: none;
  stroke: var(--info);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-trend.amber polyline {
  stroke: var(--primary);
}

.mini-trend.green polyline {
  stroke: var(--green);
}

.whatsapp-report-center .panel {
  min-height: 100%;
}

.report-action-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.report-action-grid button {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  min-height: 72px;
  color: var(--text);
  text-align: center;
  place-items: center;
  gap: 7px;
  padding: 12px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.report-action-grid button:hover:not(:disabled) {
  border-color: var(--info);
  color: var(--info);
}

.pdf-report-library {
  gap: 8px;
  max-height: 280px;
  display: grid;
  overflow: auto;
}

.pdf-report-library article {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  display: grid;
}

.pdf-report-library strong {
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.pdf-report-library span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
  display: block;
}

.pdf-report-library a {
  color: var(--info);
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.empty-state.small {
  min-height: 86px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
  place-items: center;
  gap: 6px;
  padding: 16px;
  display: grid;
}

.alert-filter-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.alert-filter-row button {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 34px;
  color: var(--muted);
  background: var(--surface);
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
}

.alert-filter-row button:hover, .alert-filter-row button.active {
  color: var(--primary-deep);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

@keyframes flowMove {
  to {
    transform: translateX(330%);
  }
}

.app-toast {
  z-index: 60;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  max-width: min(390px, 100vw - 28px);
  min-height: 46px;
  box-shadow: var(--shadow-pop);
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 650;
  animation: .18s ease-out both toast-in;
  display: flex;
  position: fixed;
  bottom: 22px;
  right: 22px;
}

.app-toast.ok {
  color: var(--green);
  border-color: var(--green-line);
}

.app-toast.warn {
  color: var(--amber);
  border-color: var(--amber-line);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skeleton-page {
  gap: 12px;
  display: grid;
}

.skeleton-line, .skeleton-metrics > div, .skeleton-panels > div {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: 1.2s ease-in-out infinite skeletonMove;
}

@keyframes skeletonMove {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.skeleton-line {
  width: 38%;
  height: 70px;
}

.skeleton-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.skeleton-metrics > div {
  height: 90px;
}

.skeleton-panels {
  grid-template-columns: 1.3fr .7fr;
  gap: 12px;
  display: grid;
}

.skeleton-panels > div {
  height: 320px;
}

.sync-loader {
  border: 3px solid var(--green-soft);
  border-top-color: var(--green);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: .8s linear infinite spin;
}

.mobile-nav, .mobile-more-sheet {
  display: none;
}

.ai-chat-shell {
  z-index: 90;
  pointer-events: none;
  position: fixed;
  bottom: 22px;
  right: 22px;
}

.ai-chat-fab, .ai-chat-panel {
  pointer-events: auto;
}

.ai-chat-fab {
  color: #fff;
  background: linear-gradient(135deg, var(--info-strong), #0f1f47);
  cursor: pointer;
  border: 0;
  border-radius: 20px;
  place-items: center;
  width: 60px;
  height: 60px;
  display: grid;
  position: relative;
  box-shadow: 0 18px 40px #1d4ed852;
}

[data-theme="dark"] .ai-chat-fab, .theme-dark .ai-chat-fab {
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
}

.ai-chat-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px #1d4ed866;
}

.ai-chat-fab.active {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.ai-chat-fab span {
  color: #fff;
  background: var(--warning);
  border: 2px solid var(--canvas);
  border-radius: 999px;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  position: absolute;
  top: -5px;
  right: -5px;
}

.ai-chat-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  grid-template-rows: auto auto minmax(220px, 1fr) auto auto;
  width: min(420px, 100vw - 28px);
  max-height: min(720px, 100vh - 108px);
  margin-bottom: 14px;
  display: grid;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .ai-chat-panel {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
}

.ai-chat-panel {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  animation: .24s cubic-bezier(.22, 1, .36, 1) both aiChatEnter;
}

.ai-chat-header {
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, var(--info-soft), var(--primary-soft));
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  display: flex;
}

.ai-chat-title {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ai-chat-orb {
  border-radius: var(--r-md);
  color: #fff;
  background: var(--gradient-info);
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  box-shadow: 0 6px 14px #2563eb4d, inset 0 1px #ffffff40;
}

.ai-chat-title strong, .ai-chat-title span {
  display: block;
}

.ai-chat-title strong {
  font-size: 15px;
  font-weight: 800;
}

.ai-chat-title span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
}

.ai-chat-header button {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  width: 36px;
  height: 36px;
  color: inherit;
  cursor: pointer;
  place-items: center;
  display: grid;
}

.ai-chat-status-row {
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
}

.ai-chat-status-row span {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 750;
}

.ai-chat-status-row span.ok {
  color: var(--green);
  background: var(--green-soft);
}

.ai-chat-status-row span.warn {
  color: var(--warning);
  background: var(--warning-soft);
}

.ai-chat-messages {
  background: var(--surface-2);
  gap: 12px;
  padding: 14px;
  display: grid;
  overflow-y: auto;
}

.ai-chat-message {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  max-width: 92%;
  box-shadow: var(--shadow-xs);
  padding: 12px 13px;
}

.ai-chat-message.user {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  justify-self: end;
}

.ai-chat-message.assistant {
  justify-self: start;
}

.ai-chat-message.loading {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ai-chat-message-meta {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 11px;
  display: flex;
}

.ai-chat-message-meta strong {
  font-weight: 800;
}

.ai-chat-message-meta span {
  color: var(--faint);
  font-weight: 600;
}

.ai-chat-message p {
  white-space: pre-wrap;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.ai-chat-quick {
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
  display: flex;
}

.ai-chat-quick button {
  border: 1px solid var(--info-line);
  color: var(--info);
  background: var(--info-soft);
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 700;
}

.ai-chat-quick button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ai-chat-input {
  grid-template-columns: 1fr 48px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.ai-chat-input textarea {
  resize: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  width: 100%;
  color: inherit;
  background: var(--surface-2);
  font: inherit;
  outline: none;
  padding: 11px 12px;
  font-size: 13px;
}

.ai-chat-input textarea:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 3px var(--info-soft);
}

.ai-chat-input button {
  border-radius: var(--r-md);
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 0;
  place-items: center;
  display: grid;
  box-shadow: 0 10px 20px #2563eb42;
}

.ai-chat-input button:disabled, .ai-chat-quick button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@keyframes aiChatEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@supports (content-visibility: auto) {
  .meter-card, .summary-list article, .alarm-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }
}

@media (max-width: 1280px) {
  .commercial-kpi-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .meter-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .brand > div:last-child, nav button span, .nav-group-label, .side-foot span, .side-foot strong, .side-foot small {
    display: none;
  }

  .brand {
    justify-content: center;
    padding-inline: 0;
  }

  nav button {
    justify-content: center;
  }

  .nav-group + .nav-group {
    padding-top: 8px;
  }

  .overview-workspace {
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr);
  }

  .operations-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 0;
    padding: 0;
    display: grid;
  }

  .rail-item {
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
    padding: 8px;
  }

  .rail-item:last-child {
    border-right: 0;
  }

  .weather-command, .weather-detail-layout, .report-workspace, .whatsapp-layout, .local-layout, .whatsapp-page .whatsapp-layout {
    grid-template-columns: 1fr;
  }

  .whatsapp-page .whatsapp-layout > .panel:first-child {
    position: static;
  }

  .whatsapp-page .routing-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .whatsapp-page .recipient-permissions, .whatsapp-page .route-summary {
    grid-column: 1 / -1;
  }

  .whatsapp-page .icon-danger {
    justify-self: end;
  }

  .weather-now {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 0 10px;
  }

  .inverter-fleet-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inverter-fleet-row {
    grid-template-columns: 9px minmax(160px, 1fr) minmax(100px, .7fr) minmax(80px, .5fr);
  }

  .inverter-last-seen, .inverter-logger-state, .inverter-row-status {
    grid-column: auto;
  }

  .solis-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .login-layout {
    grid-template-columns: minmax(0, 1fr) minmax(370px, .8fr);
    gap: 42px;
  }

  .login-energy-map {
    gap: 8px;
  }

  .login-energy-map > div {
    min-width: 62px;
  }

  .ai-page .ai-grid {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .ai-page .ai-grid > .panel:last-child {
    grid-column: 1 / -1;
  }

  .connection-table-head, .connection-table article {
    grid-template-columns: minmax(120px, .7fr) minmax(190px, 1.25fr) minmax(100px, .65fr) minmax(100px, .65fr) 32px;
  }

  .command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .premium-command-center, .issues-grid {
    grid-template-columns: 1fr;
  }

  .control-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-room-line, .single-line-diagram {
    grid-template-columns: 1fr;
  }

  .control-flow i, .single-line-wire i {
    width: 6px;
    height: 54px;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .app-shell:not(.sidebar-collapsed) {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .app-shell:not(.sidebar-collapsed) .brand > div:nth-child(2), .app-shell:not(.sidebar-collapsed) nav button span, .app-shell:not(.sidebar-collapsed) .nav-group-label, .app-shell:not(.sidebar-collapsed) .side-foot span, .app-shell:not(.sidebar-collapsed) .side-foot strong, .app-shell:not(.sidebar-collapsed) .side-foot small {
    display: initial;
  }

  .app-shell:not(.sidebar-collapsed) nav button {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .maintenance-agent-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-actions {
    justify-content: flex-start;
  }

  .energy-flow-premium {
    grid-template-columns: 1fr;
  }

  .energy-flow-line-premium {
    min-height: 46px;
  }

  .energy-flow-line-premium i {
    width: 4px;
    height: auto;
    inset: 0 auto 0 50%;
    transform: translateX(-50%);
  }

  .energy-flow-line-premium i:after {
    animation-name: flowTravelVertical;
  }

  .chart-cockpit-head, .meter-detail-head {
    display: grid;
  }

  .chart-tabs-premium {
    justify-content: flex-start;
  }

  .chart-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes flowTravelVertical {
  from {
    transform: translateY(-120%);
  }

  to {
    transform: translateY(120%);
  }
}

@media (max-width: 760px) {
  .app-shell, .app-shell.sidebar-collapsed {
    padding-bottom: 78px;
    display: block;
  }

  .sidebar {
    display: none;
  }

  .mobile-nav {
    z-index: 50;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 64px;
    padding: 6px;
    display: grid;
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .mobile-nav {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
  }

  .mobile-nav {
    box-shadow: var(--shadow-pop);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    border-radius: var(--r-md);
    min-width: 0;
    min-height: 52px;
    color: var(--muted);
    background: none;
    border: 0;
    align-content: center;
    place-items: center;
    gap: 3px;
    padding: 4px 2px;
    font-size: 9px;
    font-weight: 700;
    display: grid;
  }

  .mobile-nav button.active {
    color: var(--primary-deep);
    background: var(--primary-soft);
  }

  .mobile-more-sheet {
    z-index: 49;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    padding: 10px;
    animation: .18s ease-out both toast-in;
    display: block;
    position: fixed;
    bottom: 82px;
    left: 10px;
    right: 10px;
  }

  .mobile-more-head {
    color: var(--text);
    justify-content: space-between;
    align-items: center;
    padding: 2px 3px 10px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
  }

  .mobile-more-head button {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    width: 32px;
    height: 32px;
    color: var(--muted);
    background: none;
    place-items: center;
    display: grid;
  }

  .mobile-more-sheet > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    display: grid;
  }

  .mobile-more-sheet > div:last-child button {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    min-height: 68px;
    color: var(--muted);
    background: var(--surface-2);
    text-align: center;
    align-content: center;
    place-items: center;
    gap: 6px;
    padding: 7px 4px;
    font-size: 9px;
    font-weight: 650;
    display: grid;
  }

  .mobile-more-sheet > div:last-child button.active {
    color: var(--primary-deep);
    border-color: var(--primary-line);
    background: var(--primary-soft);
  }

  .mobile-more-sheet > div:last-child button:hover {
    color: var(--text);
    border-color: var(--line-strong);
  }

  main {
    padding: 0 12px 18px;
  }

  .topbar {
    z-index: 18;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    margin: 0 -12px 12px;
    padding: 11px 12px;
    position: sticky;
    top: 0;
  }

  .page-heading h1 {
    font-size: 17px;
  }

  .page-heading p {
    display: none;
  }

  .top-actions {
    align-items: end;
    width: 100%;
  }

  .top-actions label {
    flex: 1;
    width: auto;
  }

  .top-actions .status-badge, .refresh-button span, .logout-button span {
    display: none;
  }

  .overview-status-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-status:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .overview-status:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }

  .overview-status {
    min-height: 62px;
    padding: 9px;
  }

  .overview-metric-band {
    grid-template-columns: repeat(8, 132px);
  }

  .overview-workspace, .overview-lower, .dashboard-charts, .analytics-grid, .ai-grid, .meters-grid, .inverter-detail-grid, .inverter-context-grid {
    grid-template-columns: 1fr;
  }

  .generation-panel {
    min-height: 280px;
  }

  .operations-rail {
    grid-template-columns: 1fr;
  }

  .rail-item {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .page-intro, .selected-inverter-banner, .solis-explorer-intro {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .intro-status, .selected-inverter-status, .solis-explorer-trust {
    grid-column: 2;
    justify-content: flex-start;
  }

  .ops-summary, .ops-strip, .metrics-grid, .weather-solar-kpis, .inverter-fleet-summary, .inverter-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-stat:nth-child(2n), .metric-card:nth-child(2n) {
    border-right: 0;
  }

  .ops-stat:nth-child(n+3), .metric-card:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .weather-command {
    display: block;
  }

  .weather-now {
    flex-direction: column;
    align-items: flex-start;
  }

  .weather-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
  }

  .weather-value {
    border: 1px solid var(--line-soft);
  }

  .inverter-registry-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .inverter-list-head {
    display: none;
  }

  .inverter-search {
    width: 100%;
  }

  .inverter-fleet-row {
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .inverter-plant-ref, .inverter-power, .inverter-yield, .inverter-last-seen, .inverter-logger-state, .inverter-row-status {
    grid-column: 2 / -1;
  }

  .inverter-row-status {
    justify-content: flex-start;
  }

  .meter-values, .identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-metric:nth-child(2n) {
    border-right: 0;
  }

  .mini-metric:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .alarm-row, .connection-list article, .routing-row, .checklist-grid, .security-grid, .builder-grid, .toggle-grid, .action-grid {
    grid-template-columns: 1fr;
  }

  .step-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-page .report-workspace, .whatsapp-page .whatsapp-layout, .local-data-page .local-layout, .settings-workspace {
    grid-template-columns: 1fr;
  }

  .report-config-panel, .whatsapp-page .whatsapp-layout > .panel:first-child, .settings-nav, .solis-workspace > .panel, .ai-index {
    position: static;
  }

  .report-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-page .ai-grid {
    grid-template-columns: 1fr;
  }

  .ai-page .ai-grid > .panel:last-child {
    grid-column: auto;
  }

  .ai-index {
    display: flex;
    overflow-x: auto;
  }

  .ai-index > span {
    display: none;
  }

  .ai-index button {
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
    flex: none;
  }

  .settings-nav {
    display: flex;
    overflow-x: auto;
  }

  .settings-nav button {
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
    flex: none;
  }

  .connection-table {
    overflow-x: auto;
  }

  .connection-table-head, .connection-table article {
    min-width: 760px;
  }

  .environment-checklist {
    grid-template-columns: 1fr;
  }

  .environment-checklist div:nth-child(n) {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .environment-checklist div:first-child {
    border-top: 0;
  }

  .weather-page .weather-solar-kpis {
    grid-template-columns: repeat(6, 145px);
  }

  .whatsapp-page .whatsapp-layout > .panel {
    min-width: 0;
    overflow: hidden;
  }

  .whatsapp-page .routing-row, .whatsapp-page .routing-row > label, .whatsapp-page .recipient-permissions {
    width: 100%;
    min-width: 0;
  }

  .whatsapp-page .recipient-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .whatsapp-page .recipient-permissions .toggle {
    min-width: 0;
  }

  .login-screen {
    grid-template-rows: 60px minmax(0, 1fr);
  }

  .login-brandbar {
    padding: 0 14px;
  }

  .login-brand strong {
    font-size: 14px;
  }

  .login-brandbar > span {
    display: none;
  }

  .login-layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 26px;
    padding: 24px 14px 34px;
  }

  .login-context {
    gap: 22px;
  }

  .login-context h1 {
    font-size: 31px;
  }

  .login-context > div:first-child > p {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
  }

  .login-energy-map {
    grid-template-columns: repeat(7, auto);
    min-height: 100px;
    padding: 17px 14px;
    overflow-x: auto;
  }

  .login-energy-map > div {
    min-width: 64px;
  }

  .login-energy-map > div span {
    font-size: 8px;
  }

  .login-trust-list {
    display: none;
  }

  .login-panel {
    justify-self: stretch;
    width: 100%;
    padding: 20px 16px;
  }

  .login-panel-title {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-bottom: 18px;
  }

  .login-lock {
    width: 38px;
    height: 38px;
  }

  .login-panel-title h2 {
    font-size: 17px;
  }

  .login-form {
    padding-top: 18px;
  }

  .phone-field, .otp-field, .login-primary, .login-verify {
    min-height: 48px;
  }

  .login-security span:last-child {
    display: none;
  }

  .solis-workspace, .solis-input-grid {
    grid-template-columns: 1fr;
  }

  .solis-input-grid .span-two {
    grid-column: auto;
  }

  .solis-dataset-list {
    max-height: 300px;
  }

  .solis-search {
    min-width: 100%;
  }

  .app-toast {
    bottom: 84px;
    left: 14px;
    right: 14px;
  }

  .skeleton-line {
    width: 100%;
    height: 58px;
  }

  .skeleton-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skeleton-panels {
    grid-template-columns: 1fr;
  }

  .skeleton-panels > div {
    height: 230px;
  }

  .inverter-detail-tabs {
    z-index: 7;
    position: sticky;
    top: 104px;
  }

  .inverter-detail-tabs button {
    min-height: 40px;
    padding-inline: 12px;
  }

  .premium-command-center {
    border-radius: var(--r-lg);
    padding: 18px;
  }

  .command-copy h1 {
    font-size: 28px;
  }

  .command-kpis {
    grid-template-columns: 1fr;
  }

  .command-status-card {
    padding: 14px;
  }

  .command-refresh-row {
    flex-direction: column;
    align-items: stretch;
  }

  .meter-metric-grid {
    grid-template-columns: 1fr;
  }

  .timeline-event {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .timeline-event time, .timeline-event .source-badge {
    text-align: left;
    grid-column: 2;
    justify-self: start;
  }

  .commercial-kpi-rail {
    grid-template-columns: 1fr;
  }

  .commercial-kpi-card {
    min-height: auto;
  }

  .plant-weather-grid, .chart-kpi-strip {
    grid-template-columns: 1fr;
  }

  .energy-flow-node {
    min-height: 122px;
  }

  .notification-panel {
    top: 70px;
    right: 10px;
  }

  .control-room-overlay {
    gap: 12px;
    padding: 12px;
  }

  .control-room-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .control-room-grid {
    grid-template-columns: 1fr;
  }

  .control-room-health strong {
    font-size: 50px;
  }

  .meter-trend-strip, .whatsapp-preview-meta {
    grid-template-columns: 1fr;
  }

  .plant-compare-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .login-agent-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ai-chat-shell {
    bottom: 90px;
    right: 14px;
  }

  .ai-chat-panel {
    max-height: calc(100vh - 170px);
  }

  .ai-chat-fab {
    border-radius: 18px;
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 520px) {
  .login-agent-head {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .login-agent-head b {
    grid-column: 2;
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.v46-page .admin-page-intro, .access-admin-intro {
  position: relative;
  overflow: hidden;
}

.v46-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.v46-form-grid label:not(.check-field), .access-user-form label:not(.check-field) {
  gap: 6px;
  display: grid;
}

.v46-form-grid span, .access-user-form label > span {
  color: #e2e8f0b8;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.v46-form-grid input, .access-user-form input, .access-user-form select, .access-user-form textarea {
  color: #e2e8f0;
  background: #0f172ab8;
  border: 1px solid #94a3b83d;
  border-radius: 12px;
  outline: none;
  width: 100%;
  padding: 10px 12px;
}

.v46-check-grid, .page-permission-grid, .action-permission-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.access-section-heading {
  color: #e0f2fe;
  background: #082f4942;
  border: 1px solid #22d3ee2e;
  border-radius: 12px;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  display: flex;
}

.access-section-heading small {
  color: #bae6fdb8;
  font-size: 11px;
}

.v46-finding-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.v46-finding {
  background: #0f172ab8;
  border: 1px solid #94a3b82e;
  border-radius: 16px;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.v46-finding strong {
  color: #f8fafc;
}

.v46-finding span {
  color: #e2e8f0b8;
  font-size: 12px;
}

.v46-finding.ok {
  background: #16653424;
  border-color: #22c55e42;
}

.v46-finding.warn {
  background: #78350f29;
  border-color: #f59e0b4d;
}

.v46-finding.critical {
  background: #7f1d1d29;
  border-color: #f871714d;
}

.v46-sql-preview {
  white-space: pre-wrap;
  color: #cbd5e1;
  background: #020617ad;
  border: 1px solid #94a3b82e;
  border-radius: 14px;
  max-height: 520px;
  padding: 16px;
  font-size: 11px;
  line-height: 1.55;
  overflow: auto;
}

.permission-chip-row span {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .v46-form-grid, .v46-finding-grid, .page-permission-grid, .action-permission-grid {
    grid-template-columns: 1fr;
  }
}

.report-action-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  gap: 8px;
  min-height: 148px;
  padding: 12px;
  display: grid;
}

.report-action-card > div:first-child {
  color: var(--text);
  gap: 5px;
  display: grid;
}

.report-action-card > div:first-child svg {
  color: var(--info);
}

.report-action-card > div:first-child strong {
  font-size: 12px;
}

.report-action-card > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.report-action-card button {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 10px;
  display: inline-flex;
}

.report-action-card button:hover:not(:disabled) {
  border-color: var(--info);
  color: var(--info);
}

@media (max-width: 1100px) {
  .report-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .report-action-grid {
    grid-template-columns: 1fr;
  }
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
/* Google Stitch "Industrial Precision" implementation layer.
   Presentation only: API, authentication, workers, and deployment stay unchanged. */

:root {
  /* UI/UX Pro Max design system: "blue data + amber highlights", WCAG-adjusted */
  --canvas: #f8fafc;
  --canvas-deep: #eef2f7;
  --rail: #0e1626;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e9eef6;
  --line: #dbe3ee;
  --line-soft: #e8eef6;
  --line-strong: #c3d0e0;
  --text: #0f1a2a;
  --muted: #51617a;
  --faint: #7e8ca3;
  --primary: #d97706;
  --primary-strong: #b45309;
  --primary-deep: #92400e;
  --primary-soft: #fcf1e0;
  --primary-line: rgba(180, 83, 9, 0.30);
  --primary-glow: rgba(217, 119, 6, 0.09);
  --info: #4338ca;
  --info-strong: #3730a3;
  --info-soft: #eceafd;
  --info-line: rgba(67, 56, 202, 0.26);
  --green: #0b8f67;
  --green-soft: #eaf7f2;
  --green-line: rgba(11, 143, 103, 0.25);
  --amber: #b45309;
  --amber-soft: #fcf1e0;
  --amber-line: rgba(180, 83, 9, 0.30);
  --red: #dc2626;
  --red-soft: #fdeeee;
  --red-line: rgba(220, 38, 38, 0.24);
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(23, 32, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(23, 32, 42, 0.045);
  --shadow-md: 0 4px 14px rgba(23, 32, 42, 0.07);
  --shadow-hover: 0 5px 16px rgba(23, 32, 42, 0.08);
  --gradient-primary: linear-gradient(135deg, #f0b13d, #d97706);
  --gradient-info: linear-gradient(135deg, #6366f1, #4338ca);
  --gradient-sheen: none;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Industrial dark equivalents — declared after :root so the theme toggle keeps working. */
[data-theme="dark"],
.theme-dark {
  /* Cinematic Liquid Glass dark (UI/UX Pro Max): deep slate-navy, hairline borders, glass cards */
  --canvas: #0a101f;
  --canvas-deep: #060a16;
  --rail: #0c1426;
  --surface: #131b2f;
  --surface-2: #182238;
  --surface-3: #1e2a45;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.17);
  --text: #f1f5fb;
  --muted: #9fb0ca;
  --faint: #6c7c97;
  --primary: #f59e0b;
  --primary-strong: #fbbf24;
  --primary-deep: #fcd34d;
  --primary-soft: rgba(245, 158, 11, 0.13);
  --primary-line: rgba(245, 158, 11, 0.34);
  --primary-glow: rgba(245, 158, 11, 0.10);
  --info: #818cf8;
  --info-strong: #a5b4fc;
  --info-soft: rgba(99, 102, 241, 0.16);
  --info-line: rgba(129, 140, 248, 0.34);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.13);
  --green-line: rgba(52, 211, 153, 0.32);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.13);
  --amber-line: rgba(251, 191, 36, 0.32);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.13);
  --red-line: rgba(248, 113, 113, 0.30);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.34);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.38);
}

body {
  background: var(--canvas);
  background-image: none;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Cinematic ambient glow blobs (dark mode only, fixed behind content) */
[data-theme="dark"] body::before,
[data-theme="dark"] body::after,
.theme-dark body::before,
.theme-dark body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.11;
  pointer-events: none;
  will-change: transform;
}

[data-theme="dark"] body::before,
.theme-dark body::before {
  top: -200px;
  left: -140px;
  background: radial-gradient(circle, #4338ca, transparent 70%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

[data-theme="dark"] body::after,
.theme-dark body::after {
  bottom: -240px;
  right: -160px;
  background: radial-gradient(circle, #d97706, transparent 70%);
  animation: aurora-drift 24s ease-in-out infinite alternate-reverse;
}

/* Minimal glow on live data in dark mode (OLED style guidance) */
[data-theme="dark"] .card-value,
[data-theme="dark"] .live-value,
[data-theme="dark"] .health-score-ring strong,
[data-theme="dark"] .control-room-health strong,
[data-theme="dark"] .energy-flow-node strong,
[data-theme="dark"] .single-line-node strong,
.theme-dark .card-value,
.theme-dark .live-value,
.theme-dark .health-score-ring strong,
.theme-dark .control-room-health strong,
.theme-dark .energy-flow-node strong,
.theme-dark .single-line-node strong {
  text-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent);
}

.theme-light .text-slate-100,
.theme-light .text-slate-200,
.theme-light .text-slate-300 { color: var(--text) !important; }
.theme-light .text-slate-400,
.theme-light .text-slate-500 { color: var(--muted) !important; }

.app-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--canvas);
}

.app-shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }

.sidebar {
  width: auto;
  padding: 10px 8px;
  border-right: 0;
  color: #e9edf0;
  background: var(--rail) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.brand {
  min-height: 48px;
  padding: 0 7px 10px;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--primary);
  box-shadow: none;
}

.brand strong { color: #fff; font-size: 14px; }
.brand span { color: #9ca7b0; font-size: 10px; }
.sidebar-toggle { color: #9ca7b0; }
.sidebar-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); }

.sidebar nav { gap: 10px; padding-top: 10px; }
.sidebar .nav-group { gap: 2px; }
.sidebar .nav-group-label { padding: 4px 10px; color: #788690; font-size: 8px; }

.sidebar nav button {
  min-height: 40px;
  padding: 5px 8px;
  border-radius: 8px;
  color: #aeb8bf;
  font-size: 11px;
}

.sidebar nav button::before { left: -8px; width: 3px; background: var(--primary); }
.sidebar nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.055); }
.sidebar nav button.active { color: #fff; background: rgba(217, 119, 6, 0.20); }
.sidebar nav button.active::before { height: 28px; }
.sidebar nav button svg,
.sidebar nav button.active svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  color: currentColor;
  background: transparent;
  box-shadow: none;
}

.side-foot {
  padding: 8px;
  border-color: rgba(255, 255, 255, 0.09);
  color: #78d8b6;
  background: rgba(255, 255, 255, 0.04);
}
.side-foot span { color: #f6f8f9; }
.side-foot strong, .side-foot small { color: #8e9aa3; }

main { padding: 0 16px 24px; }

.topbar {
  min-height: 56px;
  margin: 0 -16px 12px;
  padding: 7px 16px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  box-shadow: 0 1px 0 rgba(23, 32, 42, 0.03);
  backdrop-filter: blur(10px);
}

.page-heading { min-width: 150px; }
.page-heading h1 { color: var(--text); font-size: 16px; font-weight: 650; }
.page-heading p { margin-top: 2px; color: var(--muted); font-size: 9px; }
.top-actions { align-items: center; gap: 6px; }
.top-actions label { display: flex; align-items: center; gap: 6px; width: min(250px, 22vw); }
.top-actions label > span { color: var(--muted); font-size: 9px; }
.top-actions select { min-height: 34px; color: var(--text) !important; background-color: var(--surface) !important; font-size: 11px; }

.density-button,
.notification-bell,
.refresh-button,
.logout-button,
.icon-action,
.secondary-action,
.primary-action {
  min-height: 34px;
  border-radius: 8px;
  box-shadow: none;
}

.refresh-button,
.primary-action {
  color: #2d2107;
  background: var(--primary);
  box-shadow: none;
}

.refresh-button:hover:not(:disabled),
.primary-action:hover:not(:disabled) {
  box-shadow: 0 3px 10px rgba(184, 121, 0, 0.18);
  filter: none;
}

.page-content {
  max-width: 1600px;
  animation: none;
}
.page-stack { gap: 10px; }

.panel,
.metric-card,
.chart-card,
.chart-cockpit,
.plant-location-card,
.commercial-kpi-card,
.page-intro,
.admin-page-intro,
.solis-query-panel,
.solis-result-panel {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--text);
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
}

.panel:hover,
.metric-card:hover,
.commercial-kpi-card:hover { border-color: var(--line-strong) !important; box-shadow: var(--shadow-sm) !important; }

/* Liquid Glass cards in dark mode: translucent surface + dynamic blur + top-edge highlight */
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .chart-cockpit,
[data-theme="dark"] .plant-location-card,
[data-theme="dark"] .commercial-kpi-card,
[data-theme="dark"] .page-intro,
[data-theme="dark"] .admin-page-intro,
[data-theme="dark"] .login-panel,
[data-theme="dark"] .login-agent-panel,
[data-theme="dark"] .login-energy-map,
[data-theme="dark"] .stitch-status-footer,
.theme-dark .panel,
.theme-dark .metric-card,
.theme-dark .chart-card,
.theme-dark .chart-cockpit,
.theme-dark .plant-location-card,
.theme-dark .commercial-kpi-card,
.theme-dark .page-intro,
.theme-dark .admin-page-intro,
.theme-dark .login-panel,
.theme-dark .login-agent-panel,
.theme-dark .login-energy-map,
.theme-dark .stitch-status-footer {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.panel-head {
  min-height: 32px;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.panel h2,
.panel-head h2 {
  color: var(--text) !important;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.panel h2::before { display: none; }
.source-badge,
.status-badge { min-height: 20px; padding: 0 7px; border-radius: 999px; font-size: 8px; }

.mobile-menu-button { display: none; }
.mobile-nav { display: none; }

/* Stitch overview */
.stitch-dashboard { padding-bottom: 8px; }

.stitch-kpi-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stitch-kpi-band > article {
  min-height: 88px;
  padding: 12px;
}

.stitch-kpi-band .freshness { border: 0; background: transparent; padding: 0; }

.stitch-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(260px, 0.9fr);
  gap: 10px;
}

.stitch-primary-grid .chart-cockpit { min-height: 334px; }
.stitch-primary-grid .chart-cockpit-head { padding: 12px 14px 8px; }
.stitch-primary-grid .chart-cockpit-head > div:first-child > span,
.stitch-primary-grid .chart-cockpit-head p { display: none; }
.stitch-primary-grid .chart-cockpit-head h2 { font-size: 13px; }
.stitch-primary-grid .chart-kpi-strip { display: none; }
.stitch-primary-grid .chart-cockpit-body { padding: 2px 8px 8px; }

.stitch-alert-list { display: grid; gap: 7px; }
.stitch-alert-list article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 8px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.stitch-alert-list article.critical { border-color: var(--red-line); background: var(--red-soft); }
.stitch-alert-list article.warning { border-color: var(--amber-line); background: var(--amber-soft); }
.stitch-alert-list article > svg:first-child { color: var(--red); }
.stitch-alert-list article.warning > svg:first-child { color: var(--amber); }
.stitch-alert-list article > svg:last-child { align-self: center; color: var(--faint); }
.stitch-alert-list strong { display: block; color: var(--text); font-size: 10px; line-height: 1.4; }
.stitch-alert-list span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.stitch-clear-state { display: flex; min-height: 210px; align-items: center; justify-content: center; gap: 8px; color: var(--green); font-size: 11px; }

.stitch-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  gap: 10px;
}

.stitch-secondary-grid .single-line-diagram { min-height: 155px; padding: 12px; }
.stitch-secondary-grid .single-line-node { min-height: 82px; padding: 8px; }
.stitch-secondary-grid .single-line-node strong { font-size: 14px; }
.stitch-secondary-grid .single-line-wire { min-width: 54px; }

.stitch-meter-table { min-width: 100%; }
.stitch-meter-table th { height: 30px; padding: 6px 8px; color: var(--muted); background: transparent; font-size: 8px; }
.stitch-meter-table td { height: 31px; padding: 6px 8px; font-size: 9px; }
.stitch-meter-table tbody tr:nth-child(even) { background: var(--surface-2); }
.stitch-meter-table td:first-child { color: var(--primary-strong); font-weight: 650; }

.stitch-status-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
}
.stitch-status-footer span { display: inline-flex; align-items: center; gap: 5px; }
.stitch-status-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--info); }
.stitch-status-footer i.healthy { background: var(--green); }
.stitch-status-footer i.warning { background: var(--amber); }
.stitch-status-footer small { margin-left: auto; color: var(--faint); }

.stitch-detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px 4px;
}
.stitch-detail-heading span { color: var(--primary-strong); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
.stitch-detail-heading h2 { margin-top: 3px; color: var(--text); font-size: 17px; }
.stitch-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; }
.stitch-location-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 10px; }
.stitch-operations-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.72fr) minmax(300px, 1fr); gap: 10px; }

table { color: var(--text); }
th { color: var(--muted); background: var(--surface-2); }
td { border-color: var(--line-soft); }
input, select, textarea { color: var(--text); background: var(--surface); }

/* Login follows the same industrial system. */
.login-screen {
  overflow-x: clip;
  color: var(--text) !important;
  background: var(--canvas) !important;
}
.login-brandbar {
  min-height: 58px;
  color: var(--text);
  background: var(--surface) !important;
  backdrop-filter: none;
}
.login-brand strong { color: var(--text); }
.login-brandbar > span { color: var(--muted); }
.login-layout { max-width: 1180px; }
.login-context h1 { color: var(--text); }
.login-context p,
.login-trust-list span,
.login-agent-head span { color: var(--muted); }
.login-energy-map,
.login-agent-panel,
.login-trust-list article,
.login-panel {
  border-color: var(--line) !important;
  color: var(--text);
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}
.login-panel h2,
.login-trust-list strong,
.login-agent-head strong { color: var(--text); }
.login-lock { color: var(--primary-strong) !important; background: var(--primary-soft) !important; }

@media (max-width: 1180px) {
  .stitch-primary-grid { grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr); }
  .stitch-secondary-grid,
  .stitch-detail-grid,
  .stitch-location-grid { grid-template-columns: 1fr; }
  .stitch-operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-actions .density-button span,
  .top-actions .control-room-button span,
  .logout-button span { display: none; }
}

@media (max-width: 760px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .app-shell,
  .app-shell.sidebar-collapsed { display: block; min-height: 100vh; }
  .sidebar { display: none; }
  main { padding: 0 10px 94px; }

  .topbar {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 62px;
    gap: 8px;
    margin: 0 -10px 10px;
    padding: 7px 10px;
  }

  .mobile-menu-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
  }

  .page-heading { min-width: 0; }
  .page-heading h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
  .page-heading p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; }
  .top-actions { flex-wrap: nowrap !important; gap: 5px; }
  .top-actions label { width: 108px; }
  .top-actions label > span,
  .top-actions > .status-badge,
  .top-actions .density-button,
  .top-actions .control-room-button,
  .top-actions .logout-button { display: none; }
  .top-actions select { width: 108px; min-height: 34px; padding-left: 8px; font-size: 9px; }
  .notification-bell,
  .refresh-button { width: 36px; padding: 0; }
  .refresh-button span { display: none; }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 4px 5px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow: 0 -5px 18px rgba(23, 32, 42, 0.07);
    backdrop-filter: blur(12px);
  }

  .mobile-nav button {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font-size: 8px;
  }
  .mobile-nav button.active { color: var(--primary-deep); background: var(--primary-soft); }
  .mobile-nav button svg { width: 18px; height: 18px; }

  .mobile-more-sheet {
    left: 10px;
    right: 10px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    z-index: 60;
    max-height: 68vh;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 16px 44px rgba(23, 32, 42, 0.2);
  }
  .mobile-more-sheet button { color: var(--text); }

  .page-content,
  .stitch-dashboard,
  .stitch-kpi-band,
  .stitch-primary-grid,
  .stitch-secondary-grid,
  .stitch-detail-grid,
  .stitch-location-grid,
  .stitch-operations-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .stitch-kpi-band {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }
  .stitch-kpi-band > article {
    flex: 0 0 142px;
    scroll-snap-align: start;
    min-height: 86px;
  }

  .stitch-primary-grid,
  .stitch-secondary-grid,
  .stitch-detail-grid,
  .stitch-location-grid,
  .stitch-operations-grid { display: flex; flex-direction: column; gap: 9px; }
  .stitch-primary-grid > *,
  .stitch-secondary-grid > *,
  .stitch-detail-grid > *,
  .stitch-location-grid > *,
  .stitch-operations-grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .stitch-primary-grid > :nth-child(2) { order: -1; }
  .stitch-primary-grid .chart-cockpit { min-height: 292px; }
  .stitch-primary-grid .chart-cockpit-body { min-height: 220px; }
  .chart-tabs-premium { max-width: 100%; overflow-x: auto; }
  .chart-tabs-premium button { min-width: 52px; }

  .stitch-alert-list article { min-height: 58px; }
  .stitch-clear-state { min-height: 90px; }

  .stitch-secondary-grid .single-line-diagram {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
  }
  .stitch-secondary-grid .single-line-node { min-width: 0; width: 100%; min-height: 76px; }
  .stitch-secondary-grid .single-line-wire {
    display: none;
  }

  .stitch-status-footer { align-items: flex-start; flex-wrap: wrap; gap: 7px 12px; }
  .stitch-status-footer small { width: 100%; margin-left: 0; }
  .stitch-detail-heading { align-items: start; padding-top: 12px; }
  .stitch-detail-heading h2 { font-size: 15px; }

  .commercial-kpi-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .panel,
  .chart-card,
  .plant-location-card { border-radius: 10px !important; }

  .login-layout { grid-template-columns: 1fr; padding: 14px 12px 24px; }
  .login-context { display: none; }
  .login-panel { width: 100%; padding: 16px; }
  .login-brandbar { padding: 8px 12px; }
  .login-brandbar > span { display: none; }

  .deepseek-chat-launcher { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .deepseek-chat-panel { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   Per-page redesign layer — UI/UX Pro Max skill driven (v7)
   Design system: "Liquid Glass / Real-Time Operations" (MASTER.md).
   Goal: give every page a distinct "sense of place" via a semantic
   accent, while keeping one consistent component language. Plus the
   skill's concrete guidance: input affordance, focus rings, chart
   surface theming, a defined z-index scale, and loading/empty parity.
   ===================================================================== */

/* ---- Documented z-index scale (skill: z-index-management) ---- */
:root {
  --z-base: 0;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-overlay: 40;
  --z-dialog: 80;
  --z-toast: 100;
}

/* ---- Per-page semantic accent tokens ---- */
.stitch-dashboard      { --page-accent: #d97706; --page-accent-2: #f0b13d; } /* brand amber */
.inverters-page        { --page-accent: #6366f1; --page-accent-2: #818cf8; } /* fleet indigo */
.meters-page           { --page-accent: #0891b2; --page-accent-2: #22b8cf; } /* metering cyan */
.analytics-page        { --page-accent: #7c3aed; --page-accent-2: #a78bfa; } /* insight violet */
.reports-page          { --page-accent: #2563eb; --page-accent-2: #60a5fa; } /* document blue */
.alarms-page           { --page-accent: #dc2626; --page-accent-2: #f87171; } /* alert red */
.solis-explorer        { --page-accent: #059669; --page-accent-2: #34d399; } /* data emerald */
.weather-page          { --page-accent: #0284c7; --page-accent-2: #38bdf8; } /* sky blue */
.whatsapp-page         { --page-accent: #16a34a; --page-accent-2: #4ade80; } /* whatsapp green */
.ai-page               { --page-accent: #7c3aed; --page-accent-2: #a78bfa; } /* AI violet */
.local-data-page       { --page-accent: #0d9488; --page-accent-2: #2dd4bf; } /* workers teal */
.settings-page         { --page-accent: #475569; --page-accent-2: #94a3b8; } /* system slate */

/* Apply the accent to each page's intro mark + a leading accent rule,
   so the header reads as "this section" without adding clutter elsewhere. */
.page-stack[class*="-page"] .page-intro,
.solis-explorer .solis-explorer-intro {
  position: relative;
  overflow: hidden;
}
.page-stack[class*="-page"] .page-intro::before,
.solis-explorer .solis-explorer-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--page-accent, var(--primary)), var(--page-accent-2, var(--primary)));
}
.page-stack[class*="-page"] .page-intro .intro-mark,
.solis-explorer .solis-explorer-intro .intro-mark {
  color: #fff;
  background: linear-gradient(135deg, var(--page-accent-2, var(--primary-strong)), var(--page-accent, var(--primary))) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--page-accent, var(--primary)) 34%, transparent),
              inset 0 1px rgba(255, 255, 255, 0.25);
}

/* Active tabs / segmented controls pick up the page accent (stays on-system). */
.page-stack[class*="-page"] .tabs button.active,
.page-stack[class*="-page"] .segmented-control button.active,
.page-stack[class*="-page"] .inverter-filter button.active,
.page-stack[class*="-page"] .chart-tabs-premium button.active {
  color: #fff;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--page-accent-2, var(--primary-strong)), var(--page-accent, var(--primary))) !important;
}
.alarms-page .tabs button.active {
  color: var(--page-accent) !important;
  background: transparent !important;
  border-bottom-color: var(--page-accent) !important;
}

/* ---- Input affordance + focus rings (skill: input-affordance, focus-states) ---- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.phone-field,
.otp-field,
.inverter-search,
.solis-search {
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--page-accent, var(--info)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent, var(--info)) 22%, transparent) !important;
}
.phone-field:focus-within,
.otp-field:focus-within,
.inverter-search:focus-within,
.solis-search:focus-within {
  border-color: var(--page-accent, var(--info)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent, var(--info)) 18%, transparent) !important;
}
/* Keyboard focus visibility on every interactive control (skill: focus-states) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent, var(--primary)) 30%, transparent);
}

/* ---- Chart surface theming (skill: gridline-subtle, trend-emphasis, contrast-data) ---- */
.recharts-cartesian-grid line { stroke: var(--line) !important; }
.recharts-text { fill: var(--muted) !important; }
.recharts-default-tooltip {
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-md) !important;
}
.recharts-tooltip-label { color: var(--text) !important; font-weight: 600; }
[data-theme="dark"] .recharts-default-tooltip,
.theme-dark .recharts-default-tooltip {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: blur(8px);
}

/* ---- Loading / empty-state parity in both themes (skill: empty-states, loading-states) ---- */
.data-status-panel,
.empty-state,
.theiox-empty-state,
.inverter-empty,
.connection-loading {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* ---- Login page: distinct system-trust accent, clear primary hierarchy ---- */
.login-energy-map > div { color: var(--primary-strong); }
.login-lock {
  color: #fff !important;
  background: var(--gradient-primary) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent),
              inset 0 1px rgba(255, 255, 255, 0.25);
}
.login-trust-list svg { color: var(--green); }

/* ---- Density: keep all hit targets >= 36px high on data-dense controls (skill: touch-target) ---- */
.row-actions button,
.connection-test,
.use-row-button,
.column-control > button,
.table-pagination button {
  min-height: 32px;
  min-width: 32px;
}

/* =====================================================================
   New feature components (06-12 backend release) — Cinematic Glass skin
   DeepSeek maintenance widget, Report save settings, WhatsApp detail
   selector. These use CSS vars the layer above redefines, so they adopt
   the palette automatically; here we add the glass treatment + identity.
   ===================================================================== */

/* token alias used by .selector-heading strong (undefined in base) */
:root { --accent: var(--primary-strong); }
[data-theme="dark"], .theme-dark { --accent: var(--primary-strong); }

/* DeepSeek maintenance agent widget (in Reports) */
.maintenance-agent-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.maintenance-agent-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--info), var(--primary));
}
[data-theme="dark"] .maintenance-agent-panel,
.theme-dark .maintenance-agent-panel {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.maintenance-action {
  min-height: 38px;
  border-radius: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.maintenance-action:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.maintenance-action.primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--gradient-info) !important;
  border-color: transparent !important;
}
.maintenance-action.primary:hover:not(:disabled) { box-shadow: 0 8px 20px color-mix(in srgb, var(--info) 34%, transparent); }
.maintenance-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* Report save-settings control (Report Builder) */
.report-save-action {
  min-height: 38px;
  border-radius: 10px;
}
.report-save-note { font-size: 11px; }
.report-save-note.saved { color: var(--green); }
.report-save-note.error { color: var(--red); }

/* WhatsApp report detail selector */
.whatsapp-detail-selector {
  background: var(--surface-2);
  border-color: var(--line) !important;
  border-radius: 12px !important;
}
.selector-heading strong { color: var(--accent); }
.detail-toggle-grid .toggle { min-height: 38px; }

/* ---- Reduced motion: also neutralise the per-page accent transitions ---- */
@media (prefers-reduced-motion: reduce) {
  input, select, textarea, .phone-field, .otp-field { transition: none !important; }
  .maintenance-action { transition: none !important; }
}
/* Neer Solar Industrial Console v8
   Authoritative presentation layer based on docs/00-16. */

:root {
  --canvas: #f5f7fa;
  --canvas-deep: #e9eef4;
  --rail: #111b26;
  --surface: #fff;
  --surface-2: #f7f9fc;
  --surface-3: #edf2f7;
  --line: #d9e1e9;
  --line-soft: #e8edf2;
  --line-strong: #bcc8d5;
  --text: #111827;
  --muted: #596579;
  --faint: #8490a2;
  --primary: #d97706;
  --primary-strong: #b45309;
  --primary-deep: #78350f;
  --primary-soft: #fff4e3;
  --primary-line: rgba(217, 119, 6, .3);
  --primary-glow: rgba(217, 119, 6, .1);
  --page-accent: #d97706;
  --page-accent-soft: #fff4e3;
  --page-accent-line: rgba(217, 119, 6, .28);
  --green: #159447;
  --green-soft: #eaf8ef;
  --red: #d92d20;
  --red-soft: #fff0ef;
  --amber: #d97706;
  --amber-soft: #fff4e3;
  --info: #2563eb;
  --info-soft: #edf4ff;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 22px rgba(15, 23, 42, .07);
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
  --font-display: Bahnschrift, "Arial Narrow", Inter, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

[data-page="inverters"] { --page-accent: #4f46e5; --page-accent-soft: #eef0ff; --page-accent-line: rgba(79, 70, 229, .25); }
[data-page="meters"] { --page-accent: #0785a3; --page-accent-soft: #eaf9fc; --page-accent-line: rgba(7, 133, 163, .25); }
[data-page="analytics"], [data-page="ai"] { --page-accent: #7c3aed; --page-accent-soft: #f3edff; --page-accent-line: rgba(124, 58, 237, .25); }
[data-page="reports"] { --page-accent: #2563eb; --page-accent-soft: #edf4ff; --page-accent-line: rgba(37, 99, 235, .25); }
[data-page="alarms"], [data-page="login-activity"] { --page-accent: #dc2626; --page-accent-soft: #fff0ef; --page-accent-line: rgba(220, 38, 38, .25); }
[data-page="solis-data"] { --page-accent: #059669; --page-accent-soft: #eaf9f3; --page-accent-line: rgba(5, 150, 105, .25); }
[data-page="weather"] { --page-accent: #0284c7; --page-accent-soft: #eaf7ff; --page-accent-line: rgba(2, 132, 199, .25); }
[data-page="whatsapp"] { --page-accent: #16a34a; --page-accent-soft: #edf9f0; --page-accent-line: rgba(22, 163, 74, .25); }
[data-page="benchmarks"] { --page-accent: #ca8a04; --page-accent-soft: #fff8df; --page-accent-line: rgba(202, 138, 4, .25); }
[data-page="notification-logs"], [data-page="local"] { --page-accent: #0f766e; --page-accent-soft: #eaf8f7; --page-accent-line: rgba(15, 118, 110, .25); }
[data-page="settings"] { --page-accent: #475569; --page-accent-soft: #f0f3f6; --page-accent-line: rgba(71, 85, 105, .25); }

.theme-dark {
  --canvas: #09111c;
  --canvas-deep: #060c14;
  --rail: #080f18;
  --surface: #111b28;
  --surface-2: #162231;
  --surface-3: #1c2a3b;
  --line: rgba(165, 181, 201, .17);
  --line-soft: rgba(165, 181, 201, .1);
  --line-strong: rgba(165, 181, 201, .29);
  --text: #eef3f8;
  --muted: #a1afc0;
  --faint: #718096;
  --page-accent-soft: color-mix(in srgb, var(--page-accent) 14%, transparent);
  --page-accent-line: color-mix(in srgb, var(--page-accent) 38%, transparent);
}

body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font: inherit; }
button { border-radius: var(--r-sm); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
}

/* Global operations shell */
.app-shell { grid-template-columns: 216px minmax(0, 1fr); background: var(--canvas); }
.app-shell.sidebar-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
.sidebar {
  padding: 0;
  color: #dce6f1;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 220px), var(--rail);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}
.brand { min-height: 76px; gap: 10px; padding: 15px 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark { width: 38px; height: 38px; border: 0; border-radius: 4px; color: #f59e0b; background: transparent; box-shadow: none; }
.brand strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand span { color: #f59e0b; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.sidebar-toggle { color: #94a3b8; }
.sidebar nav { gap: 0; padding: 12px 8px 100px; }
.nav-group { gap: 2px; padding: 9px 0 10px; border-bottom: 1px solid rgba(255,255,255,.075); }
.nav-group-label {
  padding: 0 10px 7px;
  color: #708197;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sidebar nav button {
  position: relative;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #c6d1df;
  font-size: 12px;
  font-weight: 500;
}
.sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar nav button.active {
  color: #fff;
  background: color-mix(in srgb, var(--page-accent) 24%, rgba(255,255,255,.035));
  border-color: color-mix(in srgb, var(--page-accent) 55%, transparent);
  box-shadow: inset 3px 0 var(--page-accent);
}
.sidebar nav button.active svg { color: var(--page-accent); }
.side-foot {
  margin: auto 8px 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: #8fa0b5;
}
.side-foot strong { color: #5ee38c; }
.side-foot small { color: #65778d; font-size: 8px; }

.topbar {
  min-height: 76px;
  padding: 10px 18px;
  gap: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.page-heading { min-width: 220px; }
.page-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--page-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.page-heading h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.page-heading p { margin-top: 2px; color: var(--muted); font-size: 10px; }
.top-actions { margin-left: auto; gap: 6px; align-items: center; }
.top-actions label {
  min-width: 176px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.top-actions label > span {
  display: block;
  color: var(--faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.top-actions select { min-height: 24px; border: 0; background: transparent; color: var(--text); font-size: 11px; font-weight: 650; }
.density-button, .refresh-button, .logout-button, .notification-bell {
  min-height: 35px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}
.refresh-button { border-color: var(--page-accent-line); color: var(--page-accent); background: var(--page-accent-soft); }
.logout-button:hover { color: var(--red); border-color: rgba(220,38,38,.3); background: var(--red-soft); }
.notification-bell.has-issues { color: var(--red); }
.page-content { max-width: 1780px; padding: 18px; margin: 0 auto; }
.api-issue-strip { border-radius: 0; }

/* Shared page language */
.panel, .metric-card, .stat-card, .summary-card, .settings-card,
.report-card, .health-card, .weather-card, .ai-section, .connection-card,
.inverter-card, .meter-card, .benchmark-card, .worker-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.panel:hover, .metric-card:hover, .stat-card:hover, .summary-card:hover {
  border-color: var(--page-accent-line);
  box-shadow: var(--shadow-sm);
}
.panel-head, .section-header, .page-section-head { border-bottom: 1px solid var(--line-soft); }
.panel-head h2, .panel-head h3, .section-header h2, .section-header h3 {
  font-family: var(--font-display);
  letter-spacing: .01em;
}
.panel-head::before, .section-header::before, .metric-card::before, .stat-card::before { background: var(--page-accent); }
.card-value, .metric-value, .stat-value, .live-value {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: -.035em;
}
.card-icon, .metric-icon, .summary-icon, .stat-icon {
  border: 1px solid var(--page-accent-line);
  border-radius: 6px;
  background: var(--page-accent-soft);
  color: var(--page-accent);
}
.source-badge, .status-badge, .chip, .pill, .tag {
  border-radius: 3px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .035em;
}
table { border-collapse: collapse; }
th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
td { color: var(--text); font-size: 11px; }
th, td { border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: var(--page-accent-soft); }
input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
}
.primary-button, .save-button, button.primary, button[type="submit"] {
  border-color: var(--page-accent);
  background: var(--page-accent);
  color: #fff;
}
.secondary-button, button.secondary { border-color: var(--line); background: var(--surface); color: var(--text); }
.tab-button.active, .tabs button.active, [role="tab"][aria-selected="true"] { color: var(--page-accent); border-color: var(--page-accent); }
.recharts-cartesian-grid line { stroke: var(--line-soft); }
.recharts-text { fill: var(--muted); font-size: 10px; }
.recharts-default-tooltip { border-color: var(--line) !important; border-radius: 6px !important; box-shadow: var(--shadow-md); }

.mobile-nav {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px 18px 0 0;
  background: #101823;
  box-shadow: 0 -12px 35px rgba(0,0,0,.25);
}
.mobile-nav button { color: #d5dde8; }
.mobile-nav button.active { color: #ff9800; }
.mobile-more-sheet {
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  box-shadow: 0 -18px 45px rgba(15,23,42,.22);
}

/* Plant access terminal */
.auth-shell:has(.plant-terminal-screen) { background: #080d0e; }
.plant-terminal-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(min-content, 1fr);
  place-items: center;
  padding: 18px;
  color: #171717;
  background: radial-gradient(circle at 50% 0%, rgba(56,73,72,.7), transparent 48%), #070b0c;
}
.plant-terminal-screen::before,
.plant-terminal-screen::after { display: none; }
.plant-terminal {
  width: min(1450px, 100%);
  padding: 20px;
  border: 2px solid #9c9b94;
  border-radius: 18px;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #d9d6cf, #a9a8a2 48%, #e4e1da);
  box-shadow: inset 0 0 0 4px #65645f, inset 0 0 0 6px #eeece6, 0 35px 85px rgba(0,0,0,.65);
}
.terminal-nameplate {
  min-height: 130px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 36px;
  padding: 16px 32px;
  border: 2px solid #5f5e59;
  border-radius: 10px;
  background: rgba(245,243,237,.5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.terminal-brand { display: flex; align-items: center; gap: 24px; }
.terminal-brand-mark { width: 76px; height: 76px; display: grid; place-items: center; color: #111; border: 3px solid #222; border-radius: 50%; }
.terminal-brand h1 { margin: 0; font-family: var(--font-mono); font-size: clamp(28px,4vw,52px); letter-spacing: .05em; }
.terminal-brand p { margin: 4px 0 0; font-family: var(--font-mono); font-size: 17px; letter-spacing: .24em; text-transform: uppercase; }
.terminal-model span, .terminal-ready span { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.terminal-model strong { display: block; margin-top: 7px; padding: 13px 18px; border: 2px solid #252525; border-radius: 4px; font-family: var(--font-mono); font-size: 22px; }
.terminal-ready { text-align: center; }
.terminal-ready i { display: block; width: 26px; height: 26px; margin: 0 auto 8px; border: 4px solid #5e3900; border-radius: 50%; background: #ffc132; box-shadow: 0 0 15px #f59e0b, inset 0 0 6px #fff; }
.terminal-console { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.terminal-monitor, .terminal-auth {
  border: 4px solid #292b29;
  border-radius: 12px;
  background: #0b100f;
  box-shadow: inset 0 0 0 2px #77736b, inset 0 0 28px #000;
}
.terminal-monitor { padding: 24px; color: #6df28b; }
.terminal-screen-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 15px; letter-spacing: .06em; text-shadow: 0 0 8px #36e36a; }
.terminal-wave {
  height: 310px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #284d32;
  border-radius: 8px;
  color: #45c966;
  background: radial-gradient(circle at center, rgba(33,120,56,.16), transparent 60%), #07110a;
  box-shadow: inset 0 0 38px #000, 0 0 18px rgba(36,220,86,.08);
}
.terminal-wave svg { width: 100%; height: 100%; }
.wave-axis { fill: none; stroke: #58e67b; stroke-width: 1; opacity: .4; }
.wave-line { fill: none; stroke: #76f390; stroke-width: 4; }
.terminal-monitor.data-unavailable .terminal-wave { filter: saturate(.35); }
.terminal-monitor.data-unavailable .wave-line { opacity: .28; stroke-dasharray: 12 12; }
.terminal-readouts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.terminal-readouts span { display: grid; grid-template-columns: 1fr auto; padding: 10px; border: 2px solid #313632; border-radius: 7px; background: #070a08; box-shadow: inset 0 0 12px #000; }
.terminal-readouts small { grid-column: 1/-1; color: #c5cec7; font-family: var(--font-mono); font-size: 10px; text-align: center; text-transform: uppercase; }
.terminal-readouts strong { color: #68ef86; font-family: var(--font-mono); font-size: clamp(30px,4vw,50px); font-weight: 500; text-shadow: 0 0 10px #38d75d; }
.terminal-readouts b { align-self: end; padding-bottom: 8px; color: #c7d0c9; font-family: var(--font-mono); font-weight: 400; }
.terminal-readouts span.alarm { border-color: #7f2d2d; }
.terminal-readouts span.alarm strong { color: #ff5d5d; text-shadow: 0 0 10px rgba(255, 59, 59, .75); }
.terminal-agent-strip { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-top: 1px solid #27442e; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.terminal-agent-strip strong { margin-left: auto; color: #fff; }
.terminal-ready.offline i, .terminal-ready.unavailable i { background: #e3a12a; box-shadow: 0 0 12px #e3a12a; }
.terminal-ready.offline span, .terminal-ready.unavailable span { color: #e3a12a; }
.terminal-monitor .login-trust-list { display: none; }
.terminal-auth {
  padding: 34px 38px;
  border-color: #292b29 !important;
  color: #e6ece9 !important;
  background: #0b100f !important;
  box-shadow: inset 0 0 0 2px #77736b, inset 0 0 28px #000 !important;
}
.terminal-auth .login-panel-title { padding-bottom: 20px; border-bottom: 1px solid #3c4541; }
.terminal-auth .login-lock {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #39c759 !important;
  background: transparent !important;
}
.terminal-auth h2 { color: #fff !important; font-family: var(--font-display); font-size: 25px; }
.terminal-auth .login-panel-title p { color: #8f9b96; }
.terminal-auth .login-form { gap: 15px; margin-top: 20px; }
.terminal-auth label > span { color: #d8dedb; font-size: 13px; }
.terminal-auth label small { color: #7f8b86; }
.terminal-auth .phone-field, .terminal-auth .otp-field { border-color: #46514c; background: #111816; }
.terminal-auth input { color: #fff; background: transparent; }
.terminal-auth .login-primary { min-height: 48px; border: 1px solid #20a43f; background: #199b36; color: #fff; font-weight: 750; }
.terminal-auth .login-verify { min-height: 48px; border: 1px solid #28af48; background: transparent; color: #45d465; font-weight: 750; }
.terminal-auth .login-status { border-color: #35403b; background: #111816; color: #aab5b0; }
.terminal-auth .login-status.success { color: #57dd76; }
.terminal-auth .login-status.error { color: #ff7770; }
.terminal-auth .login-allowlist { margin-top: 20px; border: 0; border-top: 1px solid #35403b; background: transparent; color: #8f9a95; }
.terminal-auth .login-security { display: none; }
.terminal-footer { display: flex; justify-content: space-between; padding: 16px 12px 0; color: #333; font-family: var(--font-mono); font-size: 10px; font-weight: 750; letter-spacing: .1em; }

@media (max-width: 1180px) {
  .top-actions .density-button span, .top-actions .refresh-button span, .top-actions .logout-button span { display: none; }
  .terminal-nameplate { grid-template-columns: 1fr auto; }
  .terminal-ready { display: none; }
}

@media (max-width: 900px) {
  .app-shell { display: block; padding-bottom: 74px; }
  .sidebar { display: none; }
  .topbar { min-height: 74px; padding: 9px 12px; }
  .page-kicker, .page-heading p { display: none; }
  .page-heading { min-width: 0; }
  .page-heading h1 { font-size: 19px; }
  .top-actions label { min-width: 130px; }
  .top-actions .status-badge, .top-actions .density-button, .top-actions .logout-button { display: none; }
  .page-content { padding: 12px; }
  .plant-terminal { width: min(680px, 100%); }
  .terminal-console { grid-template-columns: 1fr; }
  .terminal-monitor { display: none; }
  .terminal-nameplate { min-height: 90px; padding: 12px 18px; }
  .terminal-brand-mark { width: 52px; height: 52px; }
  .terminal-brand h1 { font-size: 23px; }
  .terminal-brand p { font-size: 10px; }
  .terminal-model { display: none; }
  .terminal-wave { height: 210px; }
}

@media (min-width: 901px) and (max-height: 850px) {
  .plant-terminal-screen { padding: 10px; }
  .plant-terminal { padding: 12px; }
  .terminal-nameplate { min-height: 92px; padding: 8px 20px; gap: 20px; }
  .terminal-brand { gap: 14px; }
  .terminal-brand-mark { width: 54px; height: 54px; }
  .terminal-brand h1 { font-size: clamp(26px, 3vw, 38px); }
  .terminal-brand p { font-size: 11px; }
  .terminal-model strong { margin-top: 4px; padding: 8px 12px; font-size: 16px; }
  .terminal-ready i { width: 20px; height: 20px; margin-bottom: 4px; }
  .terminal-console { gap: 10px; margin-top: 8px; }
  .terminal-monitor { padding: 14px; }
  .terminal-screen-head { font-size: 11px; }
  .terminal-wave { height: 220px; margin-top: 8px; }
  .terminal-readouts { gap: 5px; margin-top: 7px; }
  .terminal-readouts span { padding: 6px; }
  .terminal-readouts small { font-size: 8px; }
  .terminal-readouts strong { font-size: 28px; }
  .terminal-agent-strip { margin-top: 7px; padding: 7px 8px; font-size: 8px; }
  .terminal-auth { padding: 18px 22px; }
  .terminal-auth .login-panel-title { padding-bottom: 12px; }
  .terminal-auth h2 { font-size: 20px; }
  .terminal-auth .login-form { gap: 8px; margin-top: 0; padding-top: 12px; }
  .terminal-auth label > span { font-size: 11px; }
  .terminal-auth .phone-field,
  .terminal-auth .otp-field,
  .terminal-auth .phone-field input,
  .terminal-auth .otp-field input,
  .terminal-auth .login-primary,
  .terminal-auth .login-verify { min-height: 44px; }
  .terminal-auth .login-status { min-height: 34px; padding: 7px 9px; font-size: 9px; }
  .terminal-auth .login-allowlist { margin-top: 9px; padding: 8px 0; }
  .terminal-footer { padding: 8px 8px 0; font-size: 8px; }
}

@media (max-width: 620px) {
  .plant-terminal-screen { padding: 0; align-items: start; }
  .plant-terminal { min-height: 100vh; padding: 10px; border-radius: 0; }
  .terminal-nameplate { display: block; min-height: 86px; padding: 10px 14px; }
  .terminal-brand { gap: 12px; }
  .terminal-brand-mark { width: 46px; height: 46px; }
  .terminal-brand h1 { font-size: clamp(20px, 7vw, 28px); }
  .terminal-brand p { font-size: 8px; letter-spacing: .18em; }
  .terminal-console { margin-top: 9px; gap: 9px; }
  .terminal-monitor { padding: 14px; }
  .terminal-wave { height: 160px; }
  .terminal-readouts strong { font-size: 25px; }
  .terminal-readouts b { font-size: 9px; padding-bottom: 3px; }
  .terminal-auth { padding: 18px 16px; }
  .terminal-auth .login-panel-title { padding-bottom: 14px; }
  .terminal-auth .login-form { gap: 10px; margin-top: 0; padding-top: 14px; }
  .terminal-auth .login-allowlist { margin-top: 10px; padding: 9px 0; }
  .terminal-footer { display: none; }
  .topbar { flex-wrap: wrap; }
  .page-heading { order: 1; }
  .top-actions { order: 2; }
  .top-actions label { min-width: 118px; }
  .stitch-kpi-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .stitch-kpi-band > article { min-width: 0; }
  .mobile-nav { min-height: calc(72px + env(safe-area-inset-bottom)); }
  .mobile-nav button span {
    display: block;
    line-height: 1;
  }
}

@media (max-width: 620px) and (max-height: 700px) {
  .terminal-nameplate { display: none; }
  .terminal-console { margin-top: 0; }
}
/* Neer Solar SCADA v9
   High-density supervisory control-room presentation for 4K displays. */

.scada-root {
  --sc-bg: #030608;
  --sc-bg-2: #071014;
  --sc-panel: #0a1217;
  --sc-panel-2: #0d181e;
  --sc-line: #26343b;
  --sc-line-strong: #40515a;
  --sc-text: #e7eef1;
  --sc-muted: #82939c;
  --sc-green: #46e17b;
  --sc-cyan: #27c6df;
  --sc-amber: #ffb224;
  --sc-red: #ff3b3b;
  --sc-blue: #4a8fff;
  --sc-font: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  min-height: 100vh;
  display: grid;
  grid-template: 72px minmax(0, 1fr) / 190px minmax(0, 1fr);
  overflow: hidden;
  color: var(--sc-text);
  background:
    linear-gradient(rgba(38, 52, 59, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 52, 59, .09) 1px, transparent 1px),
    var(--sc-bg);
  background-size: 32px 32px;
  font-family: var(--sc-font);
  font-variant-numeric: tabular-nums;
}

.scada-root * { box-sizing: border-box; }
.scada-root button, .scada-root select, .scada-root textarea { font: inherit; }
.scada-root button { color: inherit; }
.scada-root button:focus-visible, .scada-root select:focus-visible, .scada-root textarea:focus-visible {
  outline: 2px solid var(--sc-cyan);
  outline-offset: 1px;
}
.scada-root[data-scale="compact"],
.scada-root[data-scale="standard"],
.scada-root[data-scale="large"] { transform: none; }
.scada-root.scada-kiosk[data-scale="compact"] { --sc-kiosk-density: .92; font-size: 92%; }
.scada-root.scada-kiosk[data-scale="standard"] { --sc-kiosk-density: 1; font-size: 100%; }
.scada-root.scada-kiosk[data-scale="large"] { --sc-kiosk-density: 1.08; font-size: 108%; }
.scada-root[data-scale="tv-safe"] { width: calc(100% - 48px); height: calc(100dvh - 48px); min-height: calc(100dvh - 48px); margin: 24px; overflow: hidden; }
.scada-root[data-scale="mobile"] { transform: none; }

.scada-light {
  --sc-bg: #e9eef0;
  --sc-bg-2: #dfe6e9;
  --sc-panel: #f7f9fa;
  --sc-panel-2: #edf2f4;
  --sc-line: #bdc9ce;
  --sc-line-strong: #8b9da5;
  --sc-text: #102027;
  --sc-muted: #53676f;
  --sc-green: #087d35;
  --sc-cyan: #007b91;
  --sc-amber: #a25c00;
  --sc-red: #c81e1e;
  --sc-blue: #185eb8;
}

.scada-style-alarm {
  --sc-bg: #090507;
  --sc-panel: #14090c;
  --sc-panel-2: #210d12;
  --sc-line: rgba(255, 95, 95, .34);
  --sc-line-strong: rgba(255, 122, 122, .58);
  --sc-cyan: #ffd45c;
  --sc-green: #7dff91;
  --sc-amber: #ffcf57;
  --sc-red: #ff4a4a;
}
.scada-style-executive {
  --sc-bg: #081114;
  --sc-panel: #101c21;
  --sc-panel-2: #15252b;
  --sc-line: rgba(112, 148, 160, .25);
  --sc-cyan: #8eeaff;
  --sc-green: #79efaa;
}
.scada-style-maintenance {
  --sc-bg: #070d10;
  --sc-panel: #0d171b;
  --sc-panel-2: #101f25;
  --sc-line: rgba(109, 230, 255, .26);
  --sc-cyan: #6de6ff;
  --sc-amber: #ffcb5b;
}

.scada-nav {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(5, 11, 14, .98);
  border-right: 1px solid var(--sc-line);
  z-index: 5;
}
.scada-light .scada-nav { background: #18272d; color: #f1f5f6; }
.scada-brand {
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sc-line);
}
.scada-brand strong { display: block; font-family: Bahnschrift, "Arial Narrow", sans-serif; font-size: 17px; letter-spacing: .08em; }
.scada-brand span { display: block; margin-top: 2px; color: var(--sc-green); font-size: 8px; letter-spacing: .22em; }
.scada-solar-glyph {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--sc-amber);
  border: 1px solid #574717;
  background: #171609;
}
.scada-solar-glyph svg:last-child { position: absolute; right: 3px; bottom: 3px; color: var(--sc-green); }
.scada-nav > button {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(64, 81, 90, .35);
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #a7b5bb;
  background: transparent;
  text-align: left;
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
}
.scada-nav > button:hover { color: #fff; background: rgba(39, 198, 223, .07); }
.scada-nav > button.active { color: #fff; border-left-color: var(--sc-green); background: rgba(70, 225, 123, .09); }
.scada-nav > button.active svg { color: var(--sc-green); }
.scada-nav > button b { min-width: 19px; padding: 3px 4px; color: #fff; background: var(--sc-red); text-align: center; font-size: 9px; }
.scada-nav-summary { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--sc-line); }
.scada-nav-summary > span { color: #6f838c; font-size: 8px; letter-spacing: .15em; }
.scada-nav-summary dl { margin: 8px 0 0; }
.scada-nav-summary dl div { display: flex; justify-content: space-between; padding: 4px 0; color: #758890; font-size: 9px; }
.scada-nav-summary dd { margin: 0; color: #d9e4e8; }
.scada-nav-summary dd.ok { color: var(--sc-green); }
.scada-nav .scada-kiosk-button {
  margin: 0 10px 12px;
  width: calc(100% - 20px);
  min-height: 36px;
  display: flex;
  justify-content: center;
  border: 1px solid #35515c;
  border-left: 1px solid #35515c;
  color: var(--sc-cyan);
  background: rgba(39, 198, 223, .07);
}

.scada-topbar {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) 200px minmax(360px, 1.6fr) minmax(300px, 1.2fr) auto;
  min-width: 0;
  align-items: stretch;
  background: rgba(7, 16, 20, .98);
  border-bottom: 1px solid var(--sc-line-strong);
  z-index: 4;
}
.scada-light .scada-topbar { background: rgba(247, 249, 250, .98); }
.scada-topbar > * { min-width: 0; padding: 9px 12px; border-right: 1px solid var(--sc-line); }
.scada-plant-select span, .scada-clock > span, .scada-comms > span, .scada-alarm-annunciator > span {
  display: block;
  margin-bottom: 5px;
  color: var(--sc-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.scada-plant-select select {
  width: 100%;
  height: 31px;
  padding: 0 8px;
  color: var(--sc-text);
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: var(--sc-panel);
  font-size: 11px;
}
.scada-clock { display: grid; grid-template: auto 1fr / 22px 1fr; align-content: center; }
.scada-clock svg { grid-row: 1 / 4; align-self: center; color: var(--sc-cyan); }
.scada-clock > span { margin: 0; }
.scada-clock strong { font-size: 20px; line-height: 1; letter-spacing: .08em; }
.scada-clock small { color: var(--sc-muted); font-size: 8px; }
.scada-comms > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.scada-comms div span { display: grid; grid-template-columns: 8px 1fr; gap: 0 5px; align-items: center; font-size: 9px; }
.scada-comms i, .scada-status-footer i, .scada-scene-table article > i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--sc-red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sc-red) 65%, transparent);
}
.scada-comms i.ok, .scada-status-footer i.ok, .scada-scene-table article > i.ok { background: var(--sc-green); box-shadow: 0 0 8px color-mix(in srgb, var(--sc-green) 65%, transparent); }
.scada-comms span small { grid-column: 2; color: var(--sc-muted); font-size: 7px; }
.scada-alarm-annunciator > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.scada-alarm-annunciator b {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  min-height: 32px;
  padding: 0 6px;
  color: #fff;
  font-size: 15px;
  background: #363f43;
}
.scada-alarm-annunciator b.critical { background: #b42025; animation: scada-pulse 1.5s infinite; }
.scada-alarm-annunciator b.high { background: #ad5614; }
.scada-alarm-annunciator b.medium { color: #171000; background: #e7a51c; }
.scada-alarm-annunciator b.low { background: #245b9c; }
.scada-alarm-annunciator small { font-size: 7px; font-weight: 500; text-transform: uppercase; }
.scada-top-actions { display: flex; gap: 4px; align-items: center; border-right: 0; }
.scada-top-actions button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: var(--sc-panel);
  cursor: pointer;
}
.scada-top-actions button:hover { color: var(--sc-cyan); border-color: var(--sc-cyan); }
.scada-top-select {
  min-width: 96px;
  height: 44px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 4px 7px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-top-select span {
  color: var(--sc-muted);
  font-size: 6px;
  letter-spacing: .12em;
}
.scada-top-select select {
  width: 100%;
  color: var(--sc-text);
  border: 0;
  background: transparent;
  font-size: 8px;
  text-transform: uppercase;
}

.scada-workspace {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 72px);
  overflow: auto;
  padding: 8px;
  scrollbar-color: var(--sc-line-strong) var(--sc-bg);
}
.scada-kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scada-kpi-strip article {
  min-width: 0;
  display: grid;
  grid-template: auto auto / 40px 1fr;
  align-items: center;
  position: relative;
  min-height: 83px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  border-left: 3px solid var(--sc-green);
  background: linear-gradient(110deg, color-mix(in srgb, var(--sc-green) 7%, var(--sc-panel)), var(--sc-panel));
}
.scada-kpi-strip article.amber { border-left-color: var(--sc-amber); background: linear-gradient(110deg, color-mix(in srgb, var(--sc-amber) 7%, var(--sc-panel)), var(--sc-panel)); }
.scada-kpi-strip article > svg { grid-row: 1 / 4; color: var(--sc-green); }
.scada-kpi-strip article.amber > svg { color: var(--sc-amber); }
.scada-kpi-strip article > span { color: var(--sc-muted); font-size: 8px; letter-spacing: .12em; }
.scada-kpi-strip article strong { font-size: clamp(19px, 1.45vw, 29px); line-height: 1.15; }
.scada-kpi-strip article strong small { margin-left: 5px; color: var(--sc-muted); font-size: 10px; }
.scada-kpi-strip article p { margin: 1px 0 0; color: var(--sc-muted); font-size: 8px; }
.scada-kpi-strip article > i { position: absolute; right: 0; top: 0; width: 28%; height: 2px; background: var(--sc-green); }

.scada-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 26%);
  gap: 6px;
  min-height: 410px;
  height: clamp(410px, 58vh, 1250px);
  margin-top: 6px;
}
.scada-process-panel, .scada-alarm-console, .scada-scene-table, .scada-trends > article {
  min-width: 0;
  border: 1px solid var(--sc-line);
  background: color-mix(in srgb, var(--sc-panel) 97%, transparent);
}
.scada-process-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.scada-process-panel > header, .scada-alarm-console > header, .scada-scene-table > header, .scada-trends article > header {
  min-height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-process-panel header strong, .scada-alarm-console header strong, .scada-scene-table header strong, .scada-trends header strong { font-size: 10px; letter-spacing: .1em; }
.scada-process-panel header span, .scada-alarm-console header span, .scada-scene-table header span, .scada-trends header span { color: var(--sc-muted); font-size: 8px; }

.scada-sld {
  min-height: 373px;
  height: 100%;
  display: grid;
  grid-template-columns: 1.2fr 28px 1.25fr 28px 1.35fr 28px 1fr;
  align-items: stretch;
  position: relative;
  padding: 18px 14px 34px;
  overflow: hidden;
}
.sld-stage { min-width: 0; padding: 8px; border: 1px solid var(--sc-line); background: rgba(7, 16, 20, .6); }
.scada-light .sld-stage { background: rgba(255,255,255,.55); }
.sld-stage > span { display: block; padding-bottom: 7px; color: var(--sc-muted); border-bottom: 1px solid var(--sc-line); font-size: 8px; letter-spacing: .12em; }
.sld-pv-row, .sld-inverter {
  min-height: 66px;
  display: grid;
  grid-template: auto auto / 38px 1fr;
  align-content: center;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--sc-line);
}
.sld-pv-row svg { grid-row: 1 / 3; color: var(--sc-amber); }
.sld-pv-row b, .sld-inverter b { font-size: 9px; }
.sld-pv-row small { color: var(--sc-muted); font-size: 7px; }
.sld-inverter { grid-template: auto auto auto / 36px 1fr auto; border-left: 3px solid var(--sc-green); }
.sld-inverter.offline { border-left-color: var(--sc-red); }
.sld-inverter svg { grid-row: 1 / 4; color: var(--sc-cyan); }
.sld-inverter small { color: var(--sc-muted); font-size: 7px; }
.sld-inverter strong { grid-column: 3; grid-row: 1 / 4; align-self: center; color: var(--sc-green); font-size: 11px; }
.sld-bus { display: grid; place-items: center; position: relative; color: var(--sc-muted); }
.sld-bus span { position: absolute; top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); font-size: 7px; letter-spacing: .1em; }
.sld-bus i { width: 3px; height: 80%; background: #53636b; }
.sld-bus.energized i { background: var(--sc-green); box-shadow: 0 0 8px color-mix(in srgb, var(--sc-green) 50%, transparent); }
.sld-bus.warning i { background: var(--sc-amber); }
.mcc-stage { display: grid; grid-template-rows: auto 62px 1fr; }
.sld-breaker { display: grid; place-items: center; align-content: center; }
.sld-breaker i { width: 40px; height: 4px; margin-bottom: 6px; background: var(--sc-green); box-shadow: -25px 0 var(--sc-green), 25px 0 var(--sc-green); }
.sld-breaker b { font-size: 9px; }
.sld-breaker small { color: var(--sc-green); font-size: 7px; }
.sld-meter-values { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; padding-top: 7px; border-top: 1px solid var(--sc-line); }
.sld-meter-values b { color: var(--sc-muted); font-size: 7px; font-weight: 500; }
.sld-meter-values strong { text-align: right; color: var(--sc-cyan); font-size: 9px; }
.grid-stage { display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.grid-stage > svg { color: var(--sc-cyan); }
.grid-stage > b { font-size: 10px; }
.grid-stage > strong { color: var(--sc-green); font-size: 11px; }
.grid-stage > small { color: var(--sc-muted); font-size: 7px; }
.sld-alarm-marker { margin-top: 12px; padding: 5px 7px; color: var(--sc-amber); border: 1px solid var(--sc-amber); font-size: 7px; }
.sld-legend { position: absolute; left: 15px; bottom: 9px; display: flex; gap: 14px; color: var(--sc-muted); font-size: 7px; }
.sld-legend i { width: 17px; height: 3px; display: inline-block; margin-right: 4px; background: #526169; vertical-align: middle; }
.sld-legend i.energized { background: var(--sc-green); }
.sld-legend i.warning { background: var(--sc-amber); }
.sld-legend i.alarm { background: var(--sc-red); }

.scada-alarm-console { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
.scada-alarm-console > header span { color: var(--sc-red); }
.scada-alarm-table-head, .scada-alarm-list button {
  display: grid;
  grid-template-columns: 70px 42px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 5px;
}
.scada-alarm-table-head { padding: 6px 7px; color: var(--sc-muted); border-bottom: 1px solid var(--sc-line); font-size: 6px; }
.scada-alarm-list { min-height: 0; overflow: auto; }
.scada-alarm-list button {
  width: 100%;
  min-height: 45px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  border-left: 3px solid var(--sc-blue);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.scada-alarm-list button:hover, .scada-alarm-list button.selected { background: rgba(39, 198, 223, .08); }
.scada-alarm-list button.critical { border-left-color: var(--sc-red); }
.scada-alarm-list button.high { border-left-color: #ef7827; }
.scada-alarm-list button.medium { border-left-color: var(--sc-amber); }
.scada-alarm-list button > span { display: flex; gap: 4px; align-items: center; color: var(--sc-blue); font-size: 7px; text-transform: uppercase; }
.scada-alarm-list button.critical > span { color: var(--sc-red); }
.scada-alarm-list button.high > span { color: #ef7827; }
.scada-alarm-list button.medium > span { color: var(--sc-amber); }
.scada-alarm-list time { color: var(--sc-muted); font-size: 7px; }
.scada-alarm-list strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.scada-alarm-list strong small { display: block; overflow: hidden; margin-top: 3px; color: var(--sc-muted); font-size: 7px; font-weight: 400; text-overflow: ellipsis; }
.scada-alarm-list button > b { color: var(--sc-text); font-size: 7px; text-align: right; }
.scada-alarm-console > footer { display: flex; justify-content: space-between; align-items: center; min-height: 32px; padding: 0 8px; border-top: 1px solid var(--sc-line); color: var(--sc-muted); font-size: 7px; }
.scada-alarm-console > footer button { padding: 4px 7px; color: var(--sc-cyan); border: 1px solid var(--sc-line-strong); border-radius: 0; background: transparent; font-size: 7px; cursor: pointer; }
.scada-alarm-clear { min-height: 200px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--sc-green); }
.scada-alarm-clear span { color: var(--sc-muted); font-size: 8px; }

.scada-trends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.scada-trends > article { min-height: 200px; overflow: hidden; }
.scada-trends .recharts-wrapper { font-family: var(--sc-font); }
.scada-trends .recharts-cartesian-grid line { stroke: var(--sc-line); }
.scada-trends .recharts-text { fill: var(--sc-muted); font-size: 8px; }
.scada-trends .recharts-surface { overflow: visible; }
.scada-trends .recharts-responsive-container { min-height: 154px; padding-top: 4px; }

.scada-trend-wall {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.scada-trend-wall-head {
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border: 1px solid var(--sc-line);
  border-left: 3px solid var(--sc-cyan);
  background:
    linear-gradient(90deg, rgba(39, 198, 223, .08), transparent 35%),
    var(--sc-panel);
}
.scada-trend-wall-head > div:first-child span { display: block; color: var(--sc-cyan); font-size: 8px; letter-spacing: .16em; }
.scada-trend-wall-head > div:first-child strong { display: block; margin-top: 5px; font-size: 15px; letter-spacing: .02em; }
.scada-trend-live { display: flex; align-items: center; gap: 7px; color: var(--sc-green); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.scada-trend-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-green); box-shadow: 0 0 11px var(--sc-green); animation: scada-pulse 1.5s infinite; }
.scada-trend-live small { padding-left: 9px; color: var(--sc-muted); border-left: 1px solid var(--sc-line); font-size: 8px; font-weight: 500; letter-spacing: 0; }
.scada-trend-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--sc-line);
  background: var(--sc-line);
}
.scada-trend-summary article {
  min-width: 0;
  position: relative;
  padding: 8px 12px;
  overflow: hidden;
  background: var(--sc-panel);
}
.scada-trend-summary article::after { content: ""; position: absolute; right: 0; bottom: 0; width: 35%; height: 2px; background: var(--sc-cyan); }
.scada-trend-summary article.ok::after { background: var(--sc-green); }
.scada-trend-summary article.warn::after { background: var(--sc-amber); }
.scada-trend-summary span { display: block; color: var(--sc-muted); font-size: 7px; letter-spacing: .12em; }
.scada-trend-summary strong { display: block; margin-top: 3px; color: var(--sc-cyan); font-size: clamp(20px, 1.5vw, 29px); line-height: 1; }
.scada-trend-summary article.ok strong { color: var(--sc-green); }
.scada-trend-summary article.warn strong { color: var(--sc-amber); }
.scada-trend-summary strong small { margin-left: 4px; color: var(--sc-muted); font-size: 8px; }
.scada-trend-summary p { margin: 4px 0 0; color: var(--sc-muted); font-size: 7px; }
.scada-trend-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}
.scada-trend-card {
  grid-column: span 3;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  background:
    linear-gradient(180deg, rgba(39, 198, 223, .025), transparent 45%),
    var(--sc-panel);
}
.scada-trend-card.generation { grid-column: span 7; }
.scada-trend-card.grid-flow { grid-column: span 5; }
.scada-trend-card > header {
  min-height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-trend-card > header strong { display: block; font-size: 9px; letter-spacing: .08em; }
.scada-trend-card > header div > span { display: block; margin-top: 3px; color: var(--sc-muted); font-size: 6px; letter-spacing: .1em; }
.scada-trend-legend { display: flex; gap: 10px; }
.scada-trend-card > header .scada-trend-legend span { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 7px; letter-spacing: .05em; }
.scada-trend-legend i { width: 14px; height: 2px; background: #3b82f6; }
.scada-trend-legend i.amber { background: #f59e0b; }
.scada-trend-legend i.green { background: #10b981; }
.scada-trend-chart { min-width: 0; padding: 4px 7px 0; }
.scada-trend-empty { min-height: 185px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--sc-muted); }
.scada-trend-card.generation .scada-trend-empty, .scada-trend-card.grid-flow .scada-trend-empty { min-height: 240px; }
.scada-trend-empty svg { color: var(--sc-cyan); opacity: .65; }
.scada-trend-empty strong { color: var(--sc-text); font-size: 9px; letter-spacing: .05em; }
.scada-trend-empty span { font-size: 7px; }
.scada-trend-wall .recharts-wrapper { font-family: var(--sc-font); }
.scada-trend-wall .recharts-cartesian-grid line { stroke: var(--sc-line); }
.scada-trend-wall .recharts-text { fill: var(--sc-muted); font-size: 8px; }
.scada-trend-wall .recharts-line-curve { filter: drop-shadow(0 0 3px rgba(59, 130, 246, .28)); }

.scada-status-footer {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1.2fr .8fr 1.3fr;
  margin-top: 6px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
}
.scada-status-footer > div { min-width: 0; padding: 7px 10px; border-right: 1px solid var(--sc-line); }
.scada-status-footer > div:last-child { border: 0; }
.scada-status-footer > div > strong { display: block; margin-bottom: 7px; color: var(--sc-muted); font-size: 7px; letter-spacing: .12em; }
.scada-status-footer section { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.scada-status-footer section span { display: flex; gap: 5px; align-items: center; color: var(--sc-muted); font-size: 8px; }
.scada-status-footer section b { color: var(--sc-text); font-weight: 600; }
.scada-status-footer i.warn { background: var(--sc-amber); }

.scada-alarm-inspector {
  position: fixed;
  top: 72px;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(420px, 92vw);
  padding: 16px;
  overflow: auto;
  color: var(--sc-text);
  border-left: 1px solid var(--sc-line-strong);
  background: var(--sc-bg-2);
  box-shadow: -18px 0 40px rgba(0,0,0,.4);
  font-family: var(--sc-font);
}
.scada-alarm-inspector header { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--sc-line); }
.scada-alarm-inspector header span { display: block; color: var(--sc-red); font-size: 8px; letter-spacing: .15em; }
.scada-alarm-inspector header strong { display: block; margin-top: 5px; font-size: 11px; }
.scada-alarm-inspector header button { width: 29px; height: 29px; border: 1px solid var(--sc-line); border-radius: 0; background: transparent; cursor: pointer; }
.scada-alarm-inspector h2 { margin: 18px 0; font-family: Bahnschrift, sans-serif; font-size: 22px; }
.scada-alarm-inspector dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sc-line); }
.scada-alarm-inspector dl div { padding: 10px; background: var(--sc-panel); }
.scada-alarm-inspector dt { color: var(--sc-muted); font-size: 7px; text-transform: uppercase; }
.scada-alarm-inspector dd { margin: 5px 0 0; font-size: 9px; }
.scada-alarm-inspector label { display: block; margin-top: 18px; }
.scada-alarm-inspector label span { display: block; margin-bottom: 6px; color: var(--sc-muted); font-size: 8px; }
.scada-alarm-inspector textarea { width: 100%; padding: 9px; resize: vertical; color: var(--sc-text); border: 1px solid var(--sc-line-strong); border-radius: 0; background: var(--sc-panel); }
.scada-alarm-actions { display: grid; gap: 6px; margin-top: 10px; }
.scada-alarm-actions button { min-height: 37px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid var(--sc-cyan); border-radius: 0; background: rgba(39,198,223,.08); cursor: pointer; }
.scada-alarm-actions button:first-child { color: #071109; border-color: var(--sc-green); background: var(--sc-green); }
.scada-alarm-history { margin-top: 22px; }
.scada-alarm-history > strong { display: block; padding-bottom: 7px; color: var(--sc-muted); border-bottom: 1px solid var(--sc-line); font-size: 8px; letter-spacing: .12em; }
.scada-alarm-history > div { display: grid; grid-template-columns: 7px 1fr auto; gap: 3px 8px; position: relative; padding: 10px 0; border-bottom: 1px solid var(--sc-line); font-size: 8px; }
.scada-alarm-history i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--sc-cyan); }
.scada-alarm-history b { color: var(--sc-muted); font-weight: 500; }
.scada-alarm-history time, .scada-alarm-history small { grid-column: 2 / 4; color: var(--sc-muted); font-size: 7px; }

.scada-scene-table { grid-column: 1 / -1; }
.scada-scene-table > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sc-line); }
.scada-scene-table article { display: grid; grid-template-columns: 10px 1.4fr repeat(4, minmax(65px, .7fr)); gap: 8px; align-items: center; min-height: 54px; padding: 7px 10px; background: var(--sc-panel); font-size: 9px; }
.scada-scene-table article strong small { display: block; margin-top: 3px; color: var(--sc-muted); font-size: 7px; }
.scada-scene-table article b { color: var(--sc-green); text-align: right; }
.scene-hidden { display: none !important; }
.scada-kiosk-toolbar { display: none; }

.scada-inverter-telemetry {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
}
.scada-telemetry-head {
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-telemetry-head > div:first-child > span { display: block; color: var(--sc-cyan); font-size: 8px; letter-spacing: .14em; }
.scada-telemetry-head > div:first-child > strong { display: block; margin-top: 4px; font-size: 15px; }
.scada-telemetry-head > div:first-child small { margin-left: 8px; color: var(--sc-muted); font-size: 8px; font-weight: 500; }
.scada-inverter-picker { display: flex; align-items: stretch; border: 1px solid var(--sc-line-strong); }
.scada-inverter-picker button {
  width: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--sc-cyan);
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.scada-inverter-picker button:first-child { border-right: 1px solid var(--sc-line); }
.scada-inverter-picker button:last-child { border-left: 1px solid var(--sc-line); }
.scada-inverter-picker label { min-width: 180px; display: grid; gap: 3px; padding: 5px 8px; }
.scada-inverter-picker label span { color: var(--sc-muted); font-size: 7px; letter-spacing: .1em; }
.scada-inverter-picker select { min-width: 0; padding: 0; color: var(--sc-text); border: 0; background: var(--sc-panel); font: inherit; font-size: 9px; }
.scada-inverter-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-line);
}
.scada-inverter-summary > div, .scada-phase-balance > div {
  min-width: 0;
  padding: 7px 9px;
  background: var(--sc-panel);
}
.scada-inverter-summary span, .scada-phase-balance span { display: block; color: var(--sc-muted); font-size: 7px; letter-spacing: .1em; }
.scada-inverter-summary strong, .scada-phase-balance strong { display: block; margin-top: 4px; color: var(--sc-cyan); font-size: 12px; }
.scada-inverter-summary .ok strong, .scada-phase-balance .ok strong { color: var(--sc-green); }
.scada-inverter-summary .warn strong, .scada-phase-balance .warn strong { color: var(--sc-amber); }
.scada-inverter-summary .bad strong { color: var(--sc-red); }
.scada-telemetry-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); }
.scada-dc-telemetry, .scada-ac-telemetry { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.scada-dc-telemetry { border-right: 1px solid var(--sc-line); }
.scada-dc-telemetry > header, .scada-ac-telemetry > header {
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 9px;
  border-bottom: 1px solid var(--sc-line);
  background: rgba(39, 198, 223, .04);
}
.scada-dc-telemetry > header strong, .scada-ac-telemetry > header strong { font-size: 9px; letter-spacing: .1em; }
.scada-dc-telemetry > header span, .scada-ac-telemetry > header span { color: var(--sc-muted); font-size: 7px; }
.scada-mppt-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  max-height: 96px;
  overflow: auto;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-line);
}
.scada-mppt-strip article { min-width: 0; padding: 6px 8px; background: var(--sc-panel); }
.scada-mppt-strip article div { display: flex; justify-content: space-between; align-items: center; }
.scada-mppt-strip article div strong { color: var(--sc-amber); font-size: 9px; }
.scada-mppt-strip article i, .scada-string-table article b i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--sc-red);
}
.scada-mppt-strip article i.ok, .scada-string-table article b.ok i { background: var(--sc-green); }
.scada-mppt-strip article i.warn, .scada-string-table article b.warn i { background: var(--sc-amber); }
.scada-mppt-strip article > span { display: inline-block; margin: 6px 9px 0 0; color: var(--sc-muted); font-size: 7px; }
.scada-mppt-strip article > b { display: block; margin-top: 4px; color: var(--sc-green); font-size: 10px; }
.scada-string-table { min-height: 0; overflow: auto; }
.scada-telemetry-table-head, .scada-string-table article {
  display: grid;
  grid-template-columns: 1fr .8fr repeat(3, 1fr) .9fr;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
}
.scada-telemetry-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 27px;
  color: var(--sc-muted);
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
  font-size: 7px;
}
.scada-string-table article { min-height: 31px; border-bottom: 1px solid var(--sc-line); font-size: 8px; }
.scada-string-table article:hover { background: rgba(39, 198, 223, .04); }
.scada-string-table article strong { color: var(--sc-amber); }
.scada-string-table article span { color: var(--sc-text); text-align: right; }
.scada-string-table article b { display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: var(--sc-red); font-size: 7px; text-transform: uppercase; }
.scada-string-table article b.ok { color: var(--sc-green); }
.scada-string-table article b.warn { color: var(--sc-amber); }
.scada-ac-telemetry { grid-template-rows: auto minmax(0, 1fr) auto; }
.scada-phase-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: auto; background: var(--sc-line); }
.scada-phase-grid > article { min-width: 0; padding: 10px; background: var(--sc-panel); border-top: 3px solid var(--sc-red); }
.scada-phase-grid > article.phase-1 { border-top-color: var(--sc-amber); }
.scada-phase-grid > article.phase-2 { border-top-color: var(--sc-blue); }
.scada-phase-grid > article > div { padding: 7px 0; border-bottom: 1px solid var(--sc-line); }
.scada-phase-grid > article > div:first-child { display: flex; justify-content: space-between; align-items: center; padding-top: 0; }
.scada-phase-grid span { color: var(--sc-muted); font-size: 7px; letter-spacing: .08em; }
.scada-phase-grid strong { display: block; margin-top: 3px; color: var(--sc-cyan); font-size: 14px; }
.scada-phase-grid > article > div:first-child strong { margin: 0; color: var(--sc-text); font-size: 18px; }
.scada-phase-grid strong small { margin-left: 3px; color: var(--sc-muted); font-size: 7px; }
.scada-phase-balance { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 1px; border-top: 1px solid var(--sc-line); background: var(--sc-line); }
.scada-phase-balance > strong { display: grid; place-items: center; padding: 7px; color: var(--sc-muted); background: var(--sc-panel-2); font-size: 7px; writing-mode: vertical-rl; }
.scada-phase-balance > div { padding: 7px; }
.scada-phase-balance strong { font-size: 10px; }
.scada-inverter-history { min-height: 132px; border-top: 1px solid var(--sc-line); background: var(--sc-panel); }
.scada-inverter-history > header { min-height: 27px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--sc-line); background: var(--sc-panel-2); }
.scada-inverter-history > header strong { font-size: 8px; letter-spacing: .08em; }
.scada-inverter-history > header span { color: var(--sc-muted); font-size: 6px; }
.scada-inverter-history > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sc-line); }
.scada-inverter-history article { min-width: 0; min-height: 103px; padding: 4px 5px 0; background: var(--sc-panel); }
.scada-inverter-history article > span { display: block; padding: 2px 4px; color: var(--sc-muted); font-size: 6px; letter-spacing: .08em; }
.scada-inverter-history article > small { min-height: 76px; display: grid; place-items: center; color: var(--sc-muted); font-size: 7px; }
.scada-inverter-history .recharts-text { font-size: 6px; }
.scada-telemetry-empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 280px; color: var(--sc-muted); }
.scada-telemetry-empty strong { color: var(--sc-text); font-size: 11px; }

.scada-kiosk {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
}
.scada-kiosk .scada-nav, .scada-kiosk .scada-topbar { display: none; }
.scada-kiosk .scada-workspace { grid-column: 1; height: 100dvh; padding: 46px 8px 8px; overflow: auto; }
.scada-kiosk[data-scene="trends"] .scada-workspace { height: 100dvh; }
.scada-kiosk[data-scene="trends"] .scada-primary-grid,
.scada-kiosk[data-scene="trends"] .scada-kpi-strip { display: none; }
.scada-kiosk[data-scene="trends"] .scada-trend-wall { min-height: calc(100vh - 116px); margin-top: 0; }
.scada-kiosk .scada-kiosk-toolbar {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 86px;
  z-index: 70;
  max-width: calc(100vw - 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  transform: none;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
}
.scada-kiosk-toolbar button { min-width: 30px; height: 28px; display: grid; place-items: center; padding: 0 7px; border: 0; border-right: 1px solid var(--sc-line); border-radius: 0; background: transparent; font-size: 7px; letter-spacing: .08em; }
.scada-kiosk-toolbar button.active-toggle { color: #06100b; background: var(--sc-green); }
.scada-kiosk-toolbar strong { min-width: 128px; text-align: center; font-size: 8px; letter-spacing: .12em; }
.scada-kiosk-toolbar > label { height: 28px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px; padding: 0 6px; border-left: 1px solid var(--sc-line); }
.scada-kiosk-toolbar > label span { color: var(--sc-muted); font-size: 6px; letter-spacing: .08em; }
.scada-kiosk-toolbar > label select { height: 20px; padding: 0 3px; color: var(--sc-text); border: 1px solid var(--sc-line-strong); border-radius: 0; background: var(--sc-panel-2); font-size: 7px; }
.scada-kiosk-toolbar .scada-kiosk-exit {
  width: auto;
  min-width: 104px;
  display: flex;
  gap: 6px;
  padding: 0 10px;
  color: #fff;
  border-right: 0;
  background: #9e252a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.scada-kiosk-exit-fab {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 90;
  min-width: 72px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  color: #fff;
  border: 1px solid #ff6b6b;
  border-radius: 0;
  background: #b4232a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255,255,255,.09) inset;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  cursor: pointer;
}
.scada-kiosk-exit-fab:hover { background: #d52c34; }
.scada-root:not(.scada-kiosk) .scada-kiosk-exit-fab { display: none; }

.scada-connection-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--sc-text);
  background: rgba(2, 5, 7, .82);
  backdrop-filter: blur(5px);
}
.scada-connection-overlay > div {
  width: min(620px, 94vw);
  padding: 28px;
  text-align: center;
  border: 1px solid var(--sc-red);
  border-top: 5px solid var(--sc-red);
  background:
    linear-gradient(135deg, rgba(255, 59, 59, .12), transparent 48%),
    var(--sc-bg-2);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .72);
}
.scada-connection-overlay svg { color: var(--sc-red); }
.scada-connection-overlay span { display: block; margin-top: 12px; color: var(--sc-red); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.scada-connection-overlay h2 { margin: 8px 0 0; font-family: Bahnschrift, sans-serif; font-size: 28px; }
.scada-connection-overlay p { margin: 12px 0 0; color: var(--sc-text); font-size: 11px; }
.scada-connection-overlay small { display: block; margin-top: 8px; color: var(--sc-muted); font-size: 8px; }
.scada-connection-overlay section { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.scada-connection-overlay button { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--sc-line-strong); border-radius: 0; background: var(--sc-panel); cursor: pointer; }
.scada-connection-overlay button:first-child { color: #071109; border-color: var(--sc-green); background: var(--sc-green); }
.scada-connection-overlay button:last-child { color: #fff; border-color: var(--sc-red); background: #8e2227; }
.scada-loading-shell { display: grid; place-items: center; color: var(--sc-green); font-family: var(--sc-font); }
.scada-loading-shell > div { display: grid; justify-items: center; gap: 12px; }

.alarm-row-actions { display: flex; gap: 5px; }
.alarm-row-actions button, .alarm-redo > .alarm-row > button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}

@keyframes scada-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@media (min-width: 2200px) {
  .scada-root { grid-template: 92px minmax(0, 1fr) / 242px minmax(0, 1fr); }
  .scada-brand { height: 92px; flex-basis: 92px; padding: 0 20px; }
  .scada-brand strong { font-size: 22px; }
  .scada-nav > button { min-height: 60px; padding: 0 20px; font-size: 13px; }
  .scada-topbar > * { padding: 14px 18px; }
  .scada-clock strong { font-size: 28px; }
  .scada-kpi-strip article { min-height: 110px; padding: 14px 18px; }
  .scada-kpi-strip article > span { font-size: 11px; }
  .scada-kpi-strip article p { font-size: 10px; }
  .scada-primary-grid { min-height: 600px; }
  .scada-sld { min-height: 560px; padding: 24px 20px 42px; }
  .sld-pv-row, .sld-inverter { min-height: 102px; }
  .scada-trends > article { min-height: 280px; }
  .scada-trends .recharts-responsive-container { height: 235px !important; }
  .scada-status-footer { min-height: 85px; }
  .scada-alarm-inspector { top: 92px; width: 520px; }
  .scada-telemetry-head { min-height: 70px; padding: 10px 14px; }
  .scada-telemetry-head > div:first-child > strong { font-size: 21px; }
  .scada-inverter-summary > div { padding: 12px 14px; }
  .scada-inverter-summary strong { font-size: 17px; }
  .scada-mppt-strip { max-height: 138px; }
  .scada-mppt-strip article { padding: 10px 12px; }
  .scada-string-table article { min-height: 45px; font-size: 11px; }
  .scada-phase-grid > article { padding: 16px; }
  .scada-phase-grid strong { font-size: 21px; }
  .scada-trend-wall-head { min-height: 70px; padding: 12px 18px; }
  .scada-trend-wall-head > div:first-child strong { font-size: 21px; }
  .scada-trend-summary article { padding: 12px 16px; }
  .scada-trend-summary strong { font-size: 34px; }
  .scada-trend-card > header { min-height: 54px; padding: 8px 14px; }
  .scada-trend-card > header strong { font-size: 12px; }
}

@media (max-width: 1400px) {
  .scada-root { grid-template-columns: 158px minmax(0, 1fr); }
  .scada-topbar { grid-template-columns: minmax(190px, 1.2fr) 160px minmax(280px, 1.4fr) minmax(235px, 1fr) auto; }
  .scada-nav > button { padding: 0 10px; font-size: 8px; }
  .scada-comms > div { grid-template-columns: repeat(2, 1fr); }
  .scada-alarm-annunciator b { grid-template-columns: 18px 1fr; padding: 0 4px; font-size: 12px; }
  .scada-sld { grid-template-columns: 1fr 20px 1.1fr 20px 1.2fr 20px .9fr; padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 1050px) {
  .scada-root { display: block; min-height: 100vh; overflow: auto; }
  .scada-nav { position: sticky; top: 0; height: 54px; display: flex; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--sc-line); }
  .scada-brand { min-width: 170px; height: 54px; flex-basis: 170px; }
  .scada-solar-glyph { width: 34px; height: 34px; }
  .scada-nav > button { min-width: 50px; width: 50px; min-height: 54px; display: grid; place-items: center; padding: 0; border: 0; border-bottom: 3px solid transparent; }
  .scada-nav > button span, .scada-nav-summary, .scada-nav .scada-kiosk-button { display: none; }
  .scada-nav > button.active { border-left: 0; border-bottom-color: var(--sc-green); }
  .scada-topbar { display: grid; grid-template-columns: 1fr 150px auto; min-height: 72px; }
  .scada-comms, .scada-alarm-annunciator { display: none; }
  .scada-workspace { height: auto; overflow: visible; }
  .scada-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scada-primary-grid { grid-template-columns: 1fr; }
  .scada-sld { min-width: 920px; }
  .scada-process-panel { overflow-x: auto; }
  .scada-alarm-console { min-height: 360px; }
  .scada-trends { grid-template-columns: 1fr; }
  .scada-trend-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scada-trend-grid { grid-template-columns: 1fr; }
  .scada-trend-card, .scada-trend-card.generation, .scada-trend-card.grid-flow { grid-column: 1; }
  .scada-status-footer { grid-template-columns: 1fr; }
  .scada-status-footer > div { border-right: 0; border-bottom: 1px solid var(--sc-line); }
  .scada-scene-table > div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .scada-kiosk .scada-workspace { padding-top: 76px; }
  .scada-kiosk .scada-kiosk-toolbar { left: 6px; right: 6px; top: 42px; justify-content: flex-start; }
  .scada-kiosk-toolbar strong { min-width: 72px; }
  .scada-kiosk-toolbar > label { padding: 0 4px; }
  .scada-kiosk-toolbar .scada-kiosk-exit { display: none; }
}

@media (max-width: 620px) {
  .scada-brand { min-width: 148px; flex-basis: 148px; padding: 0 8px; }
  .scada-brand strong { font-size: 13px; }
  .scada-nav > button { min-width: 45px; width: 45px; }
  .scada-topbar { grid-template-columns: 1fr auto; }
  .scada-clock { display: none; }
  .scada-plant-select { border-right: 1px solid var(--sc-line); }
  .scada-kpi-strip { grid-template-columns: 1fr; }
  .scada-kpi-strip article { min-height: 72px; }
  .scada-alarm-table-head, .scada-alarm-list button { grid-template-columns: 58px 36px minmax(0, 1fr); }
  .scada-alarm-table-head span:last-child, .scada-alarm-list button > b { display: none; }
  .scada-status-footer section { display: grid; grid-template-columns: 1fr; }
}

/* SCADA operator login console */
.scada-login-shell .plant-terminal-screen {
  padding: 12px;
  place-items: stretch;
}
.scada-login-shell .plant-terminal {
  width: 100%;
  min-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  border-color: #344751;
  background: #050a0d;
}
.scada-login-shell .terminal-nameplate {
  min-height: 78px;
  grid-template-columns: minmax(320px, 1fr) auto auto auto;
  gap: 0;
  padding: 0;
  color: #d9e6eb;
  border: 0;
  border-bottom: 1px solid #344751;
  background: #091116;
  box-shadow: none;
}
.scada-login-shell .terminal-brand {
  min-height: 77px;
  gap: 14px;
  padding: 12px 20px;
  border-right: 1px solid #273840;
}
.scada-login-shell .terminal-brand-mark {
  width: 48px;
  height: 48px;
  color: #59e68b;
  border: 1px solid #3c5b50;
  border-radius: 0;
  background: #07100d;
}
.scada-login-shell .terminal-brand h1 {
  font-family: var(--sc-font);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scada-login-shell .terminal-brand p {
  margin-top: 5px;
  font-family: var(--sc-font);
  font-size: 9px;
  letter-spacing: .28em;
}
.terminal-system-block,
.terminal-clock,
.scada-login-shell .terminal-ready {
  min-width: 156px;
  min-height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 18px;
  border-right: 1px solid #273840;
  text-align: left;
}
.terminal-system-block span,
.terminal-clock span,
.scada-login-shell .terminal-ready span {
  color: #71838b;
  font-family: var(--sc-font);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.terminal-system-block strong,
.terminal-clock strong,
.scada-login-shell .terminal-ready strong {
  margin-top: 6px;
  color: #dbe7eb;
  font-family: var(--sc-font);
  font-size: 15px;
  letter-spacing: .06em;
}
.scada-login-shell .terminal-ready {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 9px;
}
.scada-login-shell .terminal-ready i {
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #45df79;
  box-shadow: 0 0 9px rgba(69, 223, 121, .7);
}
.scada-login-shell .terminal-ready.offline i,
.scada-login-shell .terminal-ready.unavailable i,
.scada-login-shell .terminal-ready.producing i {
  background: #e4a63a;
  box-shadow: 0 0 8px rgba(228, 166, 58, .65);
}
.scada-login-shell .terminal-ready.offline strong,
.scada-login-shell .terminal-ready.unavailable strong,
.scada-login-shell .terminal-ready.producing strong { color: #f2b84e; }
.scada-login-shell .terminal-ready.producing i {
  background: #45df79;
  box-shadow: 0 0 9px rgba(69, 223, 121, .7), 0 0 0 3px rgba(228, 166, 58, .16);
}
.scada-login-shell .terminal-clock {
  min-width: 178px;
  border-right: 0;
}
.scada-login-shell .terminal-clock strong {
  color: #6de6ff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.scada-login-shell .terminal-console {
  min-height: 0;
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, .72fr);
  gap: 1px;
  margin: 0;
  background: #344751;
}
.scada-login-shell .terminal-monitor,
.scada-login-shell .terminal-auth {
  min-height: 0;
  border: 0 !important;
  background: #071014 !important;
  box-shadow: none !important;
}
.scada-login-shell .terminal-monitor {
  display: grid;
  grid-template-rows: auto minmax(210px, 1fr) auto auto;
  padding: 20px;
  color: #d9e6eb;
}
.scada-login-shell .terminal-screen-head {
  align-items: flex-start;
  padding-bottom: 13px;
  color: #d9e6eb;
  border-bottom: 1px solid #263941;
  text-shadow: none;
}
.scada-login-shell .terminal-screen-head > div {
  display: grid;
  gap: 5px;
}
.scada-login-shell .terminal-screen-head span {
  color: #e6eff2;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
}
.scada-login-shell .terminal-screen-head small,
.scada-login-shell .terminal-screen-head strong {
  color: #71858e;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .1em;
}
.scada-plant-mimic {
  position: relative;
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(40px, .65fr) minmax(92px, 1fr) minmax(40px, .65fr) minmax(92px, 1fr) 34px minmax(150px, 1.4fr);
  align-items: center;
  gap: 8px;
  padding: 30px 20px 42px;
  overflow: hidden;
  border-bottom: 1px solid #263941;
  background:
    linear-gradient(rgba(43, 67, 77, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 67, 77, .16) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mimic-node {
  min-height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 12px 8px;
  color: #83949b;
  border: 1px solid #38505a;
  background: #081318;
}
.mimic-node span {
  color: #cbd9de;
  font-family: var(--sc-font);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
}
.mimic-node small {
  color: #6d818a;
  font-family: var(--sc-font);
  font-size: 7px;
  letter-spacing: .1em;
}
.mimic-link {
  display: flex;
  align-items: center;
  color: #546a73;
}
.mimic-link i {
  width: 100%;
  height: 2px;
  background: #40545d;
}
.mimic-link svg { flex: 0 0 auto; margin-left: -3px; }
.mimic-branch {
  position: relative;
  height: 132px;
}
.mimic-branch i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 17px;
  height: 2px;
  background: #40545d;
}
.mimic-branch b {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 16px;
  width: 2px;
  background: #40545d;
}
.mimic-loads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mimic-loads .mimic-node { min-height: 82px; }
.scada-plant-mimic.energized .mimic-node {
  color: #62e58e;
  border-color: #33714c;
}
.scada-plant-mimic.energized .mimic-link,
.scada-plant-mimic.energized .mimic-node small { color: #51dff8; }
.scada-plant-mimic.energized .mimic-link i,
.scada-plant-mimic.energized .mimic-branch i,
.scada-plant-mimic.energized .mimic-branch b {
  background: #51dff8;
  box-shadow: 0 0 7px rgba(81, 223, 248, .58);
}
.mimic-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  color: #71858e;
  font-size: 7px;
  letter-spacing: .1em;
}
.mimic-legend span { display: flex; align-items: center; gap: 6px; }
.mimic-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.mimic-legend .flow-online { background: #45df79; box-shadow: 0 0 7px #45df79; }
.mimic-legend .flow-offline { background: #e4a63a; }
.scada-login-shell .terminal-readouts {
  gap: 1px;
  margin: 12px 0 0;
  background: #263941;
}
.scada-login-shell .terminal-readouts span {
  min-width: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 0;
  background: #091318;
  box-shadow: none;
}
.scada-login-shell .terminal-readouts small { color: #71858e; text-align: left; }
.scada-login-shell .terminal-readouts strong {
  color: #67e796;
  font-size: clamp(24px, 3vw, 40px);
  text-shadow: none;
}
.scada-login-shell .terminal-readouts b {
  color: #71858e;
  font-size: 9px;
}
.terminal-event-strip {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 7px 10px;
  color: #9eb0b7;
  border-left: 3px solid #45df79;
  background: #0a1715;
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.terminal-event-strip.warning {
  color: #d7b770;
  border-left-color: #e4a63a;
  background: #17140c;
}
.terminal-event-strip .event-code { color: #71858e; }
.terminal-event-strip strong { margin-left: auto; color: #45df79; }
.terminal-event-strip.warning strong { color: #f2b84e; }
.scada-login-shell .terminal-auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 46px);
  color: #d9e6eb !important;
}
.scada-login-shell .terminal-auth .login-panel-title {
  grid-template-columns: 40px minmax(0, 1fr);
  padding-bottom: 18px;
  border-bottom-color: #263941;
}
.scada-login-shell .terminal-auth .login-lock {
  width: 38px;
  height: 38px;
  color: #65e592 !important;
  border: 1px solid #35594a;
}
.auth-console-id {
  display: block;
  margin-bottom: 5px;
  color: #5ddff6;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
}
.scada-login-shell .terminal-auth h2 {
  font-family: var(--sc-font);
  font-size: 23px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-confidence-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 15px 0 2px;
  background: #263941;
}
.login-confidence-strip span {
  min-height: 33px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  overflow: hidden;
  color: #9eb0b7;
  background: #091318;
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.login-confidence-strip i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e4a63a;
}
.login-confidence-strip .online i,
.login-confidence-strip .producing i { background: #45df79; box-shadow: 0 0 6px rgba(69,223,121,.6); }
.login-confidence-strip .online,
.login-confidence-strip .producing { color: #d6f7de; }
.login-confidence-strip .unavailable,
.login-confidence-strip .offline { color: #f2d08b; }
.scada-login-shell .terminal-auth .login-form { margin-top: 18px; }
.scada-login-shell .terminal-auth label > span {
  color: #9cafb7;
  font-family: var(--sc-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.scada-login-shell .terminal-auth .phone-field,
.scada-login-shell .terminal-auth .otp-field {
  border: 1px solid #39515b;
  border-radius: 0;
  background: #050b0e;
}
.scada-login-shell .terminal-auth input {
  font-family: var(--sc-font);
  font-variant-numeric: tabular-nums;
}
.scada-login-shell .terminal-auth .login-primary,
.scada-login-shell .terminal-auth .login-verify {
  border-radius: 0;
  font-family: var(--sc-font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scada-login-shell .terminal-auth .login-primary {
  border-color: #2d9f57;
  background: #158341;
}
.scada-login-shell .terminal-auth .login-verify {
  border-color: #3b6876;
  color: #64dff6;
}
.scada-login-shell .terminal-auth .login-divider::before,
.scada-login-shell .terminal-auth .login-divider::after { background: #263941; }
.scada-login-shell .terminal-auth .login-divider span {
  color: #64777f;
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.scada-login-shell .terminal-auth .login-status {
  border: 1px solid #263941;
  border-left: 3px solid #50717e;
  border-radius: 0;
  background: #091318;
  font-size: 9px;
}
.scada-login-shell .terminal-auth .login-allowlist {
  color: #74878f;
  border-top-color: #263941;
  font-size: 8px;
}
.auth-role-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: #263941;
}
.auth-role-matrix div {
  min-width: 0;
  padding: 8px 7px;
  background: #081115;
  border-top: 2px solid #2b5865;
}
.auth-role-matrix strong,
.auth-role-matrix span { display: block; font-family: var(--sc-font); text-transform: uppercase; }
.auth-role-matrix strong { color: #dbe7eb; font-size: 8px; letter-spacing: .08em; }
.auth-role-matrix span { margin-top: 3px; color: #71858e; font-size: 6px; letter-spacing: .04em; }
.auth-role-matrix div:first-child { border-top-color: #45df79; }
.auth-role-matrix div:nth-child(2) { border-top-color: #51dff8; }
.auth-role-matrix div:nth-child(3) { border-top-color: #e4a63a; }
.auth-role-matrix div:nth-child(4) { border-top-color: #6f8fff; }

.auth-system-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 12px;
  background: #263941;
}
.auth-system-checks span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 5px;
  color: #71858e;
  background: #081115;
  font-size: 7px;
  letter-spacing: .06em;
}
.auth-system-checks i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.auth-system-checks i.ok { background: #45df79; box-shadow: 0 0 6px rgba(69,223,121,.55); }
.auth-system-checks i.warn { background: #e4a63a; }
.scada-login-shell .terminal-footer {
  min-height: 34px;
  align-items: center;
  padding: 0 14px;
  color: #61757d;
  border-top: 1px solid #344751;
  background: #071014;
  font-size: 7px;
}
.scada-login-shell .terminal-footer span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.scada-login-shell .terminal-footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #45df79;
  box-shadow: 0 0 6px rgba(69,223,121,.6);
}

@media (max-width: 1050px) {
  .scada-login-shell .terminal-nameplate {
    grid-template-columns: minmax(280px, 1fr) auto auto;
  }
  .scada-login-shell .terminal-system-block { display: none; }
  .scada-login-shell .terminal-console {
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  }
  .scada-plant-mimic {
    grid-template-columns: repeat(3, minmax(75px, 1fr));
    gap: 10px;
    padding: 20px 10px 40px;
  }
  .mimic-link,
  .mimic-branch { display: none; }
  .mimic-loads { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .scada-login-shell .plant-terminal-screen { padding: 0; }
  .scada-login-shell .plant-terminal { min-height: 100dvh; }
  .scada-login-shell .terminal-nameplate {
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .scada-login-shell .terminal-brand,
  .scada-login-shell .terminal-clock {
    min-height: 65px;
  }
  .scada-login-shell .terminal-brand { padding: 8px 11px; }
  .scada-login-shell .terminal-brand-mark { width: 39px; height: 39px; }
  .scada-login-shell .terminal-brand h1 { font-size: clamp(13px, 4vw, 18px); }
  .scada-login-shell .terminal-brand p { font-size: 6px; }
  .scada-login-shell .terminal-ready { display: none; }
  .scada-login-shell .terminal-clock {
    min-width: 110px;
    padding: 8px 10px;
  }
  .scada-login-shell .terminal-clock span { font-size: 6px; }
  .scada-login-shell .terminal-clock strong { font-size: 13px; }
  .scada-login-shell .terminal-console { grid-template-columns: 1fr; }
  .scada-login-shell .terminal-auth {
    order: 1;
    justify-content: flex-start;
    padding: 16px 14px;
  }
  .scada-login-shell .terminal-auth .login-panel-title {
    padding-bottom: 12px;
  }
  .login-confidence-strip {
    margin-top: 10px;
  }
  .scada-login-shell .terminal-monitor {
    order: 2;
  }
  .scada-login-shell .terminal-monitor {
    grid-template-rows: auto auto auto auto;
    padding: 12px;
  }
  .scada-login-shell .terminal-screen-head { padding-bottom: 9px; }
  .scada-plant-mimic {
    min-height: 180px;
    grid-template-columns: repeat(3, 1fr);
    padding: 14px 4px 34px;
  }
  .mimic-node { min-height: 69px; padding: 7px 3px; }
  .mimic-node svg { width: 20px; height: 20px; }
  .mimic-node span { font-size: 7px; }
  .mimic-node small { font-size: 6px; }
  .mimic-loads .mimic-node { min-height: 58px; }
  .scada-login-shell .terminal-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scada-login-shell .terminal-readouts span { padding: 7px 5px; }
  .scada-login-shell .terminal-readouts strong { font-size: clamp(18px, 6vw, 26px); }
  .terminal-event-strip { font-size: 6px; }
  .terminal-event-strip .event-code { display: none; }
  .scada-login-shell .terminal-auth { padding: 20px 16px; }
  .scada-login-shell .terminal-footer { display: none; }
}

@media (max-width: 430px) {
  .scada-login-shell .terminal-brand-mark { display: none; }
  .scada-login-shell .terminal-clock { min-width: 100px; }
  .scada-login-shell .terminal-screen-head strong { display: none; }
  .login-confidence-strip { grid-template-columns: 1fr; }
  .login-confidence-strip span { min-height: 29px; }
  .scada-plant-mimic { min-height: 160px; }
  .scada-login-shell .terminal-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-system-checks, .auth-role-matrix { grid-template-columns: 1fr; }
  .auth-system-checks span { justify-content: flex-start; padding-left: 10px; }
}

/* --------------------------------------------------------------------------
   SCADA v10 shared operations shell
   Extends the control-room visual language to every authenticated route.
---------------------------------------------------------------------------- */
.scada-operations-shell,
.scada-login-shell {
  --sc-bg: #030608;
  --sc-bg-2: #071014;
  --sc-panel: #0a1217;
  --sc-panel-2: #0d181e;
  --sc-line: #26343b;
  --sc-line-strong: #40515a;
  --sc-text: #e7eef1;
  --sc-muted: #82939c;
  --sc-green: #46e17b;
  --sc-cyan: #27c6df;
  --sc-amber: #ffb224;
  --sc-red: #ff3b3b;
  --sc-blue: #4a8fff;
  --sc-font: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
}

.scada-operations-shell.scada-light {
  --sc-bg: #e9eef0;
  --sc-bg-2: #dfe6e9;
  --sc-panel: #f7f9fa;
  --sc-panel-2: #edf2f4;
  --sc-line: #bdc9ce;
  --sc-line-strong: #8b9da5;
  --sc-text: #102027;
  --sc-muted: #53676f;
  --sc-green: #087d35;
  --sc-cyan: #007b91;
  --sc-amber: #a25c00;
  --sc-red: #c81e1e;
  --sc-blue: #185eb8;
}

.scada-operations-shell {
  --canvas: var(--sc-bg);
  --canvas-deep: #010304;
  --rail: #050b0e;
  --surface: var(--sc-panel);
  --surface-2: var(--sc-panel-2);
  --surface-3: #122027;
  --line: var(--sc-line);
  --line-soft: color-mix(in srgb, var(--sc-line) 68%, transparent);
  --line-strong: var(--sc-line-strong);
  --text: var(--sc-text);
  --muted: var(--sc-muted);
  --faint: color-mix(in srgb, var(--sc-muted) 78%, transparent);
  --primary: var(--sc-green);
  --primary-strong: var(--sc-green);
  --primary-soft: color-mix(in srgb, var(--sc-green) 9%, transparent);
  --primary-line: color-mix(in srgb, var(--sc-green) 42%, transparent);
  --page-accent: var(--sc-green);
  --page-accent-soft: color-mix(in srgb, var(--sc-green) 8%, transparent);
  --page-accent-line: color-mix(in srgb, var(--sc-green) 42%, transparent);
  --green: var(--sc-green);
  --green-soft: color-mix(in srgb, var(--sc-green) 9%, transparent);
  --red: var(--sc-red);
  --red-soft: color-mix(in srgb, var(--sc-red) 10%, transparent);
  --amber: var(--sc-amber);
  --amber-soft: color-mix(in srgb, var(--sc-amber) 10%, transparent);
  --info: var(--sc-cyan);
  --info-soft: color-mix(in srgb, var(--sc-cyan) 9%, transparent);
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 100vh;
  color: var(--sc-text);
  background:
    linear-gradient(rgba(38, 52, 59, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 52, 59, .09) 1px, transparent 1px),
    var(--sc-bg);
  background-size: 32px 32px;
  font-family: var(--sc-font);
  font-variant-numeric: tabular-nums;
}

.scada-operations-shell.scada-light {
  --canvas-deep: #d7e0e4;
  --rail: #18272d;
  --surface-3: #e2eaed;
}

.scada-operations-shell.sidebar-collapsed { grid-template-columns: 62px minmax(0, 1fr); }
.scada-operations-shell > main { padding: 0; background: transparent; }

.scada-operations-shell .scada-ops-nav {
  padding: 0;
  color: #a7b5bb;
  background: rgba(5, 11, 14, .985);
  border-right: 1px solid var(--sc-line);
  box-shadow: none;
  scrollbar-color: var(--sc-line-strong) var(--sc-bg);
}
.scada-operations-shell.scada-light .scada-ops-nav { color: #dbe7eb; background: #18272d; }
.scada-operations-shell .brand {
  min-height: 72px;
  padding: 0 12px;
  gap: 9px;
  border-bottom: 1px solid var(--sc-line);
}
.scada-operations-shell .brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--sc-amber);
  border: 1px solid #574717;
  border-radius: 0;
  background: #171609;
}
.scada-operations-shell .brand strong {
  color: #f2f7f8;
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 14px;
  letter-spacing: .08em;
}
.scada-operations-shell .brand span { color: var(--sc-green); font-size: 8px; letter-spacing: .2em; }
.scada-operations-shell .sidebar-toggle {
  width: 25px;
  height: 25px;
  color: var(--sc-muted);
  border: 1px solid var(--sc-line);
  border-radius: 0;
  background: var(--sc-panel);
}
.scada-operations-shell .sidebar nav { gap: 0; padding: 6px 0 88px; }
.scada-operations-shell .nav-group { gap: 0; padding: 6px 0 4px; border-bottom: 1px solid rgba(64, 81, 90, .35); }
.scada-operations-shell .nav-group-label {
  padding: 3px 13px 6px;
  color: #60747d;
  font-size: 7px;
  letter-spacing: .16em;
}
.scada-operations-shell .sidebar nav button {
  min-height: 39px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(64, 81, 90, .25);
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #a7b5bb;
  background: transparent;
  font-size: 9px;
  letter-spacing: .035em;
}
.scada-operations-shell .sidebar nav button:hover { color: #fff; background: rgba(39, 198, 223, .07); }
.scada-operations-shell .sidebar nav button.active {
  color: #fff;
  border-color: transparent;
  border-left-color: var(--sc-green);
  background: rgba(70, 225, 123, .09);
  box-shadow: none;
}
.scada-operations-shell .sidebar nav button.active svg { color: var(--sc-green); }
.scada-operations-shell .side-foot {
  margin: auto 9px 10px;
  padding: 9px 10px;
  color: var(--sc-muted);
  border: 1px solid var(--sc-line);
  border-radius: 0;
  background: var(--sc-panel);
  font-size: 8px;
}
.scada-operations-shell .side-foot strong { color: var(--sc-green); }

.scada-operations-shell .scada-ops-topbar {
  min-height: 72px;
  margin: 0;
  padding: 8px 10px 8px 14px;
  gap: 12px;
  color: var(--sc-text);
  border-bottom: 1px solid var(--sc-line-strong);
  background: rgba(7, 16, 20, .98);
  box-shadow: none;
}
.scada-operations-shell.scada-light .scada-ops-topbar { background: rgba(247, 249, 250, .98); }
.scada-operations-shell .page-heading { min-width: 250px; }
.scada-operations-shell .page-kicker {
  margin-bottom: 3px;
  color: var(--sc-green);
  font-size: 7px;
  letter-spacing: .16em;
}
.scada-operations-shell .page-heading h1 {
  color: var(--sc-text);
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 18px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.scada-operations-shell .page-heading p { margin-top: 3px; color: var(--sc-muted); font-size: 8px; }
.scada-operations-shell .top-actions { gap: 4px; }
.scada-operations-shell .top-actions label {
  min-width: 178px;
  padding: 4px 7px;
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: var(--sc-panel);
}
.scada-operations-shell .top-actions label > span { color: var(--sc-muted); font-size: 7px; letter-spacing: .14em; }
.scada-operations-shell .top-actions select { min-height: 23px; color: var(--sc-text); font-size: 9px; }
.scada-operations-shell .top-actions button,
.scada-operations-shell .top-actions .status-badge {
  min-height: 33px;
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: var(--sc-panel);
  color: var(--sc-muted);
  box-shadow: none;
  font-size: 8px;
}
.scada-operations-shell .top-actions button:hover { color: var(--sc-cyan); border-color: var(--sc-cyan); }
.scada-operations-shell .top-actions .refresh-button { color: var(--sc-green); border-color: color-mix(in srgb, var(--sc-green) 48%, var(--sc-line)); background: rgba(70, 225, 123, .06); }
.scada-operations-shell .top-actions .logout-button { color: var(--sc-red); }
.scada-operations-shell .top-actions .notification-bell.has-issues {
  color: #fff;
  border-color: var(--sc-red);
  background: color-mix(in srgb, var(--sc-red) 55%, var(--sc-panel));
}

.scada-operations-shell .scada-ops-workspace {
  max-width: none;
  min-height: calc(100vh - 72px);
  margin: 0;
  padding: 8px;
  color: var(--sc-text);
  background:
    linear-gradient(rgba(38, 52, 59, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 52, 59, .07) 1px, transparent 1px);
  background-size: 32px 32px;
}

.scada-operations-shell .panel,
.scada-operations-shell .page-intro,
.scada-operations-shell .step-row,
.scada-operations-shell .metric-card,
.scada-operations-shell .stat-card,
.scada-operations-shell .summary-card,
.scada-operations-shell .settings-card,
.scada-operations-shell .report-card,
.scada-operations-shell .health-card,
.scada-operations-shell .weather-card,
.scada-operations-shell .ai-section,
.scada-operations-shell .connection-card,
.scada-operations-shell .inverter-card,
.scada-operations-shell .meter-card,
.scada-operations-shell .benchmark-card,
.scada-operations-shell .worker-card,
.scada-operations-shell .data-status-panel {
  color: var(--sc-text);
  border: 1px solid var(--sc-line);
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--sc-panel) 98%, transparent) !important;
  box-shadow: none !important;
}
.scada-operations-shell .intro-mark,
.scada-operations-shell .mini-metric,
.scada-operations-shell .safe-note,
.scada-operations-shell .report-state,
.scada-operations-shell .maintenance-action,
.scada-operations-shell .primary-action,
.scada-operations-shell .report-save-action,
.scada-operations-shell .export-row button {
  border-radius: 0 !important;
}
.scada-operations-shell .panel:hover,
.scada-operations-shell .metric-card:hover,
.scada-operations-shell .stat-card:hover,
.scada-operations-shell .summary-card:hover {
  border-color: var(--sc-line-strong);
  box-shadow: inset 2px 0 var(--page-accent);
}
.scada-operations-shell .panel-head,
.scada-operations-shell .section-header,
.scada-operations-shell .page-section-head {
  min-height: 34px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-operations-shell .panel-head h2,
.scada-operations-shell .panel-head h3,
.scada-operations-shell .section-header h2,
.scada-operations-shell .section-header h3 {
  color: var(--sc-text);
  font-family: var(--sc-font);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scada-operations-shell .card-value,
.scada-operations-shell .metric-value,
.scada-operations-shell .stat-value,
.scada-operations-shell .live-value {
  color: var(--sc-text);
  font-family: var(--sc-font);
  letter-spacing: -.02em;
}
.scada-operations-shell .card-icon,
.scada-operations-shell .metric-icon,
.scada-operations-shell .summary-icon,
.scada-operations-shell .stat-icon {
  color: var(--page-accent);
  border: 1px solid var(--page-accent-line);
  border-radius: 0;
  background: var(--page-accent-soft);
}
.scada-operations-shell .source-badge,
.scada-operations-shell .status-badge,
.scada-operations-shell .chip,
.scada-operations-shell .pill,
.scada-operations-shell .tag {
  border-radius: 0;
  font-family: var(--sc-font);
  font-size: 8px;
  text-transform: uppercase;
}
.scada-operations-shell table { border: 1px solid var(--sc-line); background: var(--sc-panel); }
.scada-operations-shell th {
  color: var(--sc-muted);
  border-color: var(--sc-line);
  background: var(--sc-panel-2);
  font-family: var(--sc-font);
  font-size: 8px;
  letter-spacing: .09em;
}
.scada-operations-shell td { color: var(--sc-text); border-color: var(--sc-line); font-family: var(--sc-font); font-size: 9px; }
.scada-operations-shell tbody tr:hover { background: color-mix(in srgb, var(--page-accent) 7%, var(--sc-panel)); }
.scada-operations-shell input,
.scada-operations-shell select,
.scada-operations-shell textarea {
  color: var(--sc-text);
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: var(--sc-panel);
  font-family: var(--sc-font);
}
.scada-operations-shell button { border-radius: 0 !important; font-family: var(--sc-font); }
.scada-operations-shell button:focus-visible,
.scada-operations-shell input:focus-visible,
.scada-operations-shell select:focus-visible,
.scada-operations-shell textarea:focus-visible {
  outline: 2px solid var(--sc-cyan);
  outline-offset: 1px;
}
.scada-operations-shell .recharts-cartesian-grid line { stroke: var(--sc-line); }
.scada-operations-shell .recharts-text { fill: var(--sc-muted); font-family: var(--sc-font); font-size: 8px; }
.scada-operations-shell .api-issue-strip { border-radius: 0; font-family: var(--sc-font); }

.scada-login-shell {
  min-height: 100vh;
  color: var(--sc-text);
  background:
    linear-gradient(rgba(38, 52, 59, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 52, 59, .11) 1px, transparent 1px),
    var(--sc-bg);
  background-size: 32px 32px;
  font-family: var(--sc-font);
}
.scada-login-shell .auth-loading { color: var(--sc-text); background: transparent; font-family: var(--sc-font); }
.scada-login-shell .plant-terminal-screen { background: transparent; }
.scada-login-shell .plant-terminal {
  border: 1px solid var(--sc-line-strong);
  border-radius: 0;
  background: #050b0e;
  box-shadow: 0 0 0 1px #010203, 0 22px 70px rgba(0,0,0,.55);
}
.scada-login-shell .terminal-nameplate,
.scada-login-shell .terminal-monitor,
.scada-login-shell .terminal-auth {
  border-radius: 0;
}
.scada-login-shell .terminal-brand p { color: var(--sc-green); }

@media (min-width: 2200px) {
  .scada-operations-shell { grid-template-columns: 242px minmax(0, 1fr); }
  .scada-operations-shell.sidebar-collapsed { grid-template-columns: 78px minmax(0, 1fr); }
  .scada-operations-shell .brand { min-height: 92px; padding: 0 18px; }
  .scada-operations-shell .sidebar nav button { min-height: 51px; padding: 0 18px; font-size: 12px; }
  .scada-operations-shell .scada-ops-topbar { min-height: 92px; padding: 12px 18px; }
  .scada-operations-shell .page-heading h1 { font-size: 23px; }
  .scada-operations-shell .scada-ops-workspace { min-height: calc(100vh - 92px); padding: 12px; }
  .scada-operations-shell td { font-size: 12px; }
  .scada-operations-shell th { font-size: 10px; }
}

@media (max-width: 1180px) {
  .scada-operations-shell { grid-template-columns: 158px minmax(0, 1fr); }
  .scada-operations-shell .sidebar nav button { padding: 0 9px; font-size: 8px; }
  .scada-operations-shell .page-heading { min-width: 190px; }
  .scada-operations-shell .page-heading p { display: none; }
}

@media (max-width: 900px) {
  .scada-operations-shell { display: block; padding-bottom: 74px; }
  .scada-operations-shell .scada-ops-nav { display: none; }
  .scada-operations-shell .scada-ops-topbar { min-height: 64px; padding: 7px 9px; }
  .scada-operations-shell .page-kicker { display: none; }
  .scada-operations-shell .page-heading h1 { font-size: 16px; }
  .scada-operations-shell .top-actions label { min-width: 126px; }
  .scada-operations-shell .scada-ops-workspace { min-height: calc(100vh - 64px); padding: 6px; }
  .scada-operations-shell .mobile-nav {
    color: var(--sc-muted);
    border-top: 1px solid var(--sc-line-strong);
    background: rgba(5, 11, 14, .985);
  }
  .scada-operations-shell .mobile-nav button { border-radius: 0; }
  .scada-operations-shell .mobile-nav button.active { color: var(--sc-green); background: rgba(70, 225, 123, .08); }
  .scada-operations-shell .mobile-more-sheet {
    color: var(--sc-text);
    border: 1px solid var(--sc-line-strong);
    border-radius: 0;
    background: var(--sc-panel);
  }
  .scada-login-shell .terminal-monitor {
    display: block;
    padding: 12px;
  }
  .scada-login-shell .terminal-wave { display: none; }
  .scada-login-shell .terminal-screen-head {
    gap: 10px;
    font-size: 9px;
  }
  .scada-login-shell .terminal-screen-head strong {
    max-width: 48%;
    color: var(--sc-muted);
    font-size: 8px;
    text-align: right;
  }
  .scada-login-shell .terminal-readouts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px;
  }
  .scada-login-shell .terminal-readouts span { padding: 7px 5px; }
  .scada-login-shell .terminal-readouts strong { font-size: clamp(18px, 5vw, 25px); }
  .scada-login-shell .terminal-readouts small { font-size: 7px; }
  .scada-login-shell .terminal-readouts b { padding-bottom: 3px; font-size: 7px; }
  .scada-login-shell .terminal-agent-strip { margin-top: 8px; padding: 7px 5px; font-size: 7px; }
}

@media (max-width: 620px) {
  .scada-login-shell .terminal-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scada-login-shell .terminal-agent-strip {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .scada-login-shell .terminal-agent-strip strong {
    grid-column: 1 / -1;
    margin: 2px 0 0;
  }
}

/* SCADA v11 command-centre overrides
   ISA-101-inspired hierarchy: quiet normal state, color reserved for exceptions. */
.scada-root {
  --sc-bg: #11171a;
  --sc-bg-2: #161e22;
  --sc-panel: #1a2327;
  --sc-panel-2: #202b30;
  --sc-line: #344248;
  --sc-line-strong: #526269;
  --sc-text: #eef2f3;
  --sc-muted: #9aa8ad;
  --sc-green: #4fc17a;
  --sc-cyan: #65b8c7;
  --sc-amber: #e5a43d;
  --sc-red: #df5151;
  --sc-blue: #7299bf;
  grid-template: 76px minmax(0, 1fr) / 238px minmax(0, 1fr);
  background: var(--sc-bg);
}
.scada-root.scada-light {
  --sc-bg: #d9dfe1;
  --sc-bg-2: #e4e8ea;
  --sc-panel: #f2f4f4;
  --sc-panel-2: #e7ebec;
  --sc-line: #aeb9bd;
  --sc-line-strong: #78898f;
  --sc-text: #172125;
  --sc-muted: #536369;
  --sc-green: #197443;
  --sc-cyan: #276f7d;
  --sc-amber: #965b08;
  --sc-red: #ad3030;
  --sc-blue: #37688f;
}
.scada-nav {
  background: #121a1e;
  border-right-color: #405057;
}
.scada-light .scada-nav { background: #202c31; }
.scada-brand {
  height: 76px;
  flex-basis: 76px;
  padding: 0 16px;
  background: #0d1316;
}
.scada-brand strong { font-size: 15px; }
.scada-brand span { color: #a6b2b7; letter-spacing: .16em; }
.scada-solar-glyph {
  width: 38px;
  height: 38px;
  color: #d6a347;
  border-color: #586168;
  background: #182126;
}
.scada-solar-glyph svg:last-child { color: var(--sc-green); }
.scada-portfolio { border-bottom: 1px solid var(--sc-line); }
.scada-portfolio > header {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #89989e;
  background: #182126;
  font-size: 7px;
  letter-spacing: .12em;
}
.scada-portfolio > header b { color: #cbd3d6; font-size: 7px; font-weight: 500; }
.scada-portfolio > div { max-height: 174px; overflow: auto; }
.scada-portfolio button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  color: #b8c3c7;
  border: 0;
  border-top: 1px solid rgba(82, 98, 105, .38);
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.scada-portfolio button:hover { background: #1b272c; }
.scada-portfolio button.selected {
  color: #fff;
  border-left-color: var(--sc-cyan);
  background: #233138;
}
.scada-portfolio button > i,
.scada-command-head dd i,
.scada-equipment-health article > i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--sc-amber);
  box-shadow: none;
}
.scada-portfolio button > i.ok,
.scada-command-head dd.ok i,
.scada-equipment-health article > i.ok { background: var(--sc-green); }
.scada-portfolio button strong { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.scada-portfolio button small { display: block; margin-top: 3px; color: #7e9097; font-size: 7px; font-weight: 400; }
.scada-portfolio button > span { color: #8fa0a6; font-size: 6px; }
.scada-nav-label {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #71838a;
  border-bottom: 1px solid rgba(82, 98, 105, .45);
  background: #10171a;
  font-size: 7px;
  letter-spacing: .15em;
}
.scada-nav > button {
  min-height: 38px;
  padding: 0 13px;
  color: #95a4aa;
  border-bottom-color: rgba(82, 98, 105, .28);
  font-size: 8px;
}
.scada-nav > button:hover { color: #edf2f3; background: #1b272c; }
.scada-nav > button.active {
  color: #fff;
  border-left-color: var(--sc-cyan);
  background: #233138;
}
.scada-nav > button.active svg { color: var(--sc-cyan); }
.scada-nav-summary { padding: 9px 13px; }
.scada-nav .scada-kiosk-button {
  min-height: 34px;
  color: #eef2f3;
  border-color: #60737a;
  background: #25343a;
}
.scada-topbar {
  grid-column: 2;
  grid-template-columns: minmax(210px, .95fr) 155px minmax(255px, 1.1fr) minmax(225px, 1fr) auto;
  min-height: 76px;
  background: var(--sc-panel);
}
.scada-topbar > * { padding: 10px 12px; }
.scada-top-actions .scada-top-kiosk {
  width: auto;
  min-width: 68px;
  display: flex;
  gap: 6px;
  padding: 0 10px;
  color: #fff;
  border-color: var(--sc-cyan);
  background: color-mix(in srgb, var(--sc-cyan) 18%, var(--sc-panel));
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}
.scada-top-actions .scada-top-kiosk:hover {
  color: #fff;
  background: color-mix(in srgb, var(--sc-cyan) 28%, var(--sc-panel));
}
.scada-alarm-annunciator b {
  color: var(--sc-muted);
  border: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-alarm-annunciator b.critical,
.scada-alarm-annunciator b.high,
.scada-alarm-annunciator b.medium,
.scada-alarm-annunciator b.low {
  color: var(--sc-muted);
  background: var(--sc-panel-2);
  animation: none;
}
.scada-alarm-annunciator b.critical.active { color: #fff; border-color: var(--sc-red); background: #a63535; animation: scada-pulse 1.5s infinite; }
.scada-alarm-annunciator b.high.active { color: #fff; border-color: #ce762e; background: #9f5722; }
.scada-alarm-annunciator b.medium.active { color: #201404; border-color: var(--sc-amber); background: var(--sc-amber); }
.scada-alarm-annunciator b.low.active { color: #fff; border-color: var(--sc-blue); background: #426c94; }
.scada-comms i,
.scada-status-footer i,
.scada-scene-table article > i { box-shadow: none; }
.scada-workspace {
  height: calc(100vh - 76px);
  padding: 8px 9px;
  background: var(--sc-bg);
}
.scada-command-head {
  min-height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 7px;
  padding: 9px 13px;
  border: 1px solid var(--sc-line);
  border-left: 4px solid var(--sc-cyan);
  background: var(--sc-panel);
}
.scada-command-head > div > span { color: var(--sc-cyan); font-size: 7px; letter-spacing: .15em; }
.scada-command-head h1 {
  margin: 3px 0 0;
  color: var(--sc-text);
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
}
.scada-command-head p { margin: 2px 0 0; color: var(--sc-muted); font-size: 8px; }
.scada-command-head dl { display: grid; grid-template-columns: repeat(3, minmax(100px, auto)); margin: 0; }
.scada-command-head dl > div { min-width: 112px; padding: 3px 12px; border-left: 1px solid var(--sc-line); }
.scada-command-head dt { color: var(--sc-muted); font-size: 6px; letter-spacing: .12em; }
.scada-command-head dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--sc-text);
  font-size: 9px;
  text-transform: uppercase;
}
.scada-kpi-strip { gap: 5px; }
.scada-kpi-strip article {
  min-height: 74px;
  grid-template-columns: 34px 1fr;
  padding: 8px 10px;
  border-left: 1px solid var(--sc-line);
  background: var(--sc-panel);
}
.scada-kpi-strip article.amber { border-left-color: var(--sc-amber); background: var(--sc-panel); }
.scada-kpi-strip article > svg { width: 19px; color: #8ba0a8; }
.scada-kpi-strip article.amber > svg { color: var(--sc-amber); }
.scada-kpi-strip article strong { font-size: clamp(17px, 1.25vw, 25px); }
.scada-kpi-strip article > i { width: 4px; height: 100%; background: #526269; }
.scada-kpi-strip article.amber > i { background: var(--sc-amber); }
.scada-primary-grid {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 28%);
  min-height: 390px;
  height: clamp(390px, 47vh, 780px);
  gap: 5px;
}
.scada-command-side {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(235px, 1.45fr) minmax(190px, 1fr);
  gap: 5px;
}
.scada-command-side .scada-alarm-console { min-height: 0; }
.scada-equipment-health {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
}
.scada-equipment-health > header {
  min-height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-equipment-health > header strong { font-size: 9px; letter-spacing: .1em; }
.scada-equipment-health > header span { color: var(--sc-muted); font-size: 7px; }
.scada-equipment-health > div { display: grid; grid-template-columns: 1fr 1fr; }
.scada-equipment-health article {
  min-height: 49px;
  display: grid;
  grid-template-columns: 8px 1fr;
  align-content: center;
  gap: 3px 7px;
  padding: 7px 9px;
  border-right: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
}
.scada-equipment-health article:nth-child(even) { border-right: 0; }
.scada-equipment-health article > i { grid-row: 1 / 3; align-self: center; }
.scada-equipment-health article span { color: var(--sc-muted); font-size: 7px; }
.scada-equipment-health article strong { color: var(--sc-text); font-size: 9px; font-weight: 500; text-transform: uppercase; }
.scada-process-panel,
.scada-alarm-console,
.scada-scene-table,
.scada-trends > article { background: var(--sc-panel); }
.scada-process-panel > header,
.scada-alarm-console > header,
.scada-scene-table > header,
.scada-trends article > header { background: var(--sc-panel-2); }
.scada-sld { padding-top: 14px; }
.sld-stage { background: #182125; }
.scada-light .sld-stage { background: #edf0f1; }
.sld-pv-row,
.sld-inverter { background: color-mix(in srgb, var(--sc-panel-2) 80%, transparent); }
.sld-inverter svg,
.grid-stage > svg,
.sld-meter-values strong { color: var(--sc-text); }
.sld-bus.energized i { box-shadow: none; }
.sld-alarm-marker { color: var(--sc-muted); border-color: var(--sc-line-strong); }
.scada-alarm-list button:hover,
.scada-alarm-list button.selected { background: color-mix(in srgb, var(--sc-cyan) 9%, var(--sc-panel)); }
.scada-trends { gap: 5px; margin-top: 5px; }
.scada-trends > article { min-height: 184px; }
.scada-analytics-deck {
  min-width: 0;
  margin-top: 7px;
  border: 1px solid var(--sc-line);
  background: var(--sc-bg);
}
.scada-analytics-head {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--sc-line);
  border-left: 4px solid var(--sc-cyan);
  background: var(--sc-panel-2);
}
.scada-analytics-head span {
  display: block;
  color: var(--sc-cyan);
  font-size: 7px;
  letter-spacing: .14em;
}
.scada-analytics-head strong {
  display: block;
  margin-top: 4px;
  color: var(--sc-text);
  font-size: 10px;
  font-weight: 500;
}
.scada-analytics-head > b {
  color: var(--sc-muted);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .12em;
}
.scada-analytics-deck > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
}
.scada-analytics-deck article {
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
}
.scada-analytics-deck article.wide { grid-column: span 2; }
.scada-analytics-deck article > header {
  min-height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-panel-2);
}
.scada-analytics-deck article > header strong { font-size: 9px; letter-spacing: .08em; }
.scada-analytics-deck article > header span { color: var(--sc-muted); font-size: 7px; }
.scada-chart-body { min-height: 260px; padding: 6px 5px 0; }
.scada-analytics-deck .recharts-wrapper { font-family: var(--sc-font); }
.scada-analytics-deck .recharts-cartesian-grid line { stroke: var(--sc-line); }
.scada-analytics-deck .recharts-text { fill: var(--sc-muted); font-size: 8px; }
.scada-analytics-deck .recharts-legend-item-text { color: var(--sc-muted) !important; font-size: 8px; }
.scada-analytics-deck .chart-empty {
  display: grid;
  place-items: center;
  color: var(--sc-muted);
  font-size: 9px;
  letter-spacing: .08em;
}
.scada-status-footer { margin-top: 5px; background: var(--sc-panel); }
.scada-kiosk {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  background: #101619;
}
.scada-kiosk .scada-workspace { padding: 43px 9px 8px; }
.scada-kiosk .scada-command-head { display: none; }
.scada-kiosk .scada-primary-grid {
  grid-template-columns: minmax(0, 1fr);
  height: clamp(520px, 69vh, 1400px);
}
.scada-kiosk .scada-kiosk-toolbar {
  top: 7px;
  border-color: #5a6b72;
  background: #1a2429;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.scada-kiosk-toolbar .scada-kiosk-exit { background: #9b3434; }

@media (min-width: 2200px) {
  .scada-root { grid-template: 96px minmax(0, 1fr) / 292px minmax(0, 1fr); }
  .scada-brand { height: 96px; flex-basis: 96px; }
  .scada-portfolio > div { max-height: 230px; }
  .scada-portfolio button { min-height: 61px; }
  .scada-nav > button { min-height: 50px; }
  .scada-workspace { height: calc(100vh - 96px); padding: 12px; }
  .scada-command-head { min-height: 84px; }
  .scada-command-head h1 { font-size: 28px; }
  .scada-primary-grid { min-height: 650px; }
  .scada-equipment-health article { min-height: 70px; }
  .scada-analytics-deck article { min-height: 390px; }
  .scada-chart-body { min-height: 350px; }
}

@media (max-width: 1400px) {
  .scada-root { grid-template-columns: 205px minmax(0, 1fr); }
  .scada-topbar { grid-template-columns: minmax(178px, 1fr) 135px minmax(210px, 1.15fr) minmax(190px, 1fr) auto; }
  .scada-top-select { min-width: 86px; }
  .scada-portfolio button { padding-inline: 8px; }
  .scada-command-head dl > div { min-width: 94px; padding-inline: 8px; }
  .scada-primary-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 30%); }
  .scada-analytics-deck > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scada-analytics-deck article.wide { grid-column: span 2; }
}

@media (max-width: 1050px) {
  .scada-root { display: block; }
  .scada-nav { height: 56px; }
  .scada-brand { height: 56px; flex-basis: 178px; }
  .scada-portfolio,
  .scada-nav-label { display: none; }
  .scada-nav > button { min-height: 56px; }
  .scada-workspace { height: auto; }
  .scada-command-head { align-items: flex-start; }
  .scada-command-head dl { grid-template-columns: 1fr; }
  .scada-command-head dl > div { border-left: 0; }
  .scada-command-head dl > div:not(:first-child) { display: none; }
  .scada-top-select { display: none; }
  .scada-primary-grid { height: auto; }
  .scada-command-side { min-height: 650px; }
  .scada-analytics-deck > div { grid-template-columns: 1fr; }
  .scada-analytics-deck article.wide { grid-column: 1; }
}

@media (max-width: 620px) {
  .scada-command-head h1 { font-size: 17px; }
  .scada-command-head p { display: none; }
  .scada-command-head dl { display: none; }
  .scada-equipment-health > div { grid-template-columns: 1fr; }
  .scada-equipment-health article { border-right: 0; }
  .scada-kiosk-toolbar > label { display: none; }
  .scada-kiosk-toolbar > label:first-of-type { display: grid; }
  .scada-kiosk-toolbar .scada-kiosk-exit span { display: none; }
  .scada-kiosk-toolbar .scada-kiosk-exit { min-width: 36px; padding: 0 9px; }
  .scada-top-actions .scada-top-kiosk { min-width: 36px; padding: 0 8px; }
  .scada-top-actions .scada-top-kiosk span { display: none; }
  .scada-analytics-head > b { display: none; }
  .scada-analytics-deck article { min-height: 280px; }
}

@media (max-height: 800px) and (min-width: 1051px) {
  .scada-portfolio > div { max-height: 104px; }
  .scada-portfolio button { min-height: 42px; }
  .scada-nav > button { min-height: 32px; }
  .scada-nav-summary { padding-block: 6px; }
  .scada-nav-summary dl { margin-top: 4px; }
  .scada-nav-summary dl div { padding-block: 2px; }
}

/* Viewport containment: keep every control-room scene reachable at the bottom. */
.scada-root {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
}

.scada-root:not(.scada-kiosk) .scada-workspace {
  height: calc(100dvh - 76px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 28px;
  scrollbar-gutter: stable;
}

.scada-root:not(.scada-kiosk) .scada-primary-grid {
  height: auto;
  min-height: 500px;
  align-items: stretch;
}

.scada-root:not(.scada-kiosk) .scada-process-panel,
.scada-root:not(.scada-kiosk) .scada-command-side {
  min-height: 500px;
}

.scada-root:not(.scada-kiosk) .scada-sld {
  height: auto;
  min-height: 464px;
}

.scada-kiosk {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.scada-kiosk .scada-workspace,
.scada-kiosk[data-scene="trends"] .scada-workspace {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-gutter: stable;
}

.scada-kiosk .scada-primary-grid {
  height: auto;
  min-height: calc(100dvh - 145px);
}

.scada-kiosk .scada-process-panel,
.scada-kiosk .scada-scene-table,
.scada-kiosk .scada-alarm-console,
.scada-kiosk .scada-inverter-telemetry {
  min-height: calc(100dvh - 145px);
}

.scada-kiosk[data-scene="trends"] .scada-trend-wall {
  min-height: calc(100dvh - 67px);
}

@media (max-width: 1050px) {
  .scada-root,
  .scada-kiosk {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .scada-root:not(.scada-kiosk) .scada-workspace,
  .scada-kiosk .scada-workspace,
  .scada-kiosk[data-scene="trends"] .scada-workspace {
    height: auto;
    min-height: calc(100dvh - 56px);
    overflow: visible;
    padding-bottom: 32px;
  }

  .scada-root:not(.scada-kiosk) .scada-primary-grid,
  .scada-kiosk .scada-primary-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .scada-root:not(.scada-kiosk) .scada-process-panel,
  .scada-root:not(.scada-kiosk) .scada-command-side,
  .scada-kiosk .scada-process-panel,
  .scada-kiosk .scada-scene-table,
  .scada-kiosk .scada-alarm-console,
  .scada-kiosk .scada-inverter-telemetry {
    min-height: 0;
  }

  .scada-process-panel {
    overflow: visible;
  }

  .scada-sld,
  .scada-root:not(.scada-kiosk) .scada-sld {
    min-width: 0;
    min-height: 0;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
    overflow: visible;
  }

  .sld-stage {
    min-height: 0;
  }

  .sld-bus {
    min-height: 28px;
  }

  .sld-bus i {
    width: calc(100% - 34px);
    height: 3px;
  }

  .sld-bus span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: horizontal-tb;
  }

  .scada-command-side {
    min-height: 0;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .scada-command-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* V41 SCADA operator upgrades */
.scada-priority-strip {
  position: sticky;
  top: 0;
  z-index: 32;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(84px, 1fr)) minmax(120px, .8fr);
  gap: 1px;
  margin: 0 8px;
  border: 1px solid var(--sc-line-strong);
  background: var(--sc-line-strong);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.scada-priority-strip button {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 0;
  border-radius: 0;
  color: var(--sc-text);
  background: var(--sc-panel-2);
  font-size: 8px;
  letter-spacing: .1em;
}
.scada-priority-strip strong { font-size: 15px; line-height: 1; }
.scada-priority-strip .critical { color: #ff7575; }
.scada-priority-strip .warning { color: var(--sc-amber); }
.scada-priority-strip .ack { color: var(--sc-cyan); }
.scada-priority-strip .shelved { color: #b8a7ff; }
.scada-priority-strip .normal { color: var(--sc-green); }
.scada-priority-strip .mute { justify-content: center; color: var(--sc-muted); }
.scada-priority-strip.siren .critical { animation: scada-alarm-flash 1.1s infinite; }
.scada-kiosk .scada-priority-strip { grid-column: 1; margin: 0; }

.scada-plant-oneline-portfolio { margin-top: 8px; padding: 8px; border-top: 1px solid var(--sc-line); }
.scada-plant-oneline-portfolio > header,
.scada-plant-scene > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scada-plant-oneline-portfolio > header strong,
.scada-plant-scene > header strong { display: block; font-size: 10px; letter-spacing: .1em; }
.scada-plant-oneline-portfolio > header span,
.scada-plant-scene > header span { color: var(--sc-muted); font-size: 7px; letter-spacing: .12em; }
.scada-plant-oneline-portfolio > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.scada-plant-oneline {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--sc-line);
  border-radius: 0;
  color: var(--sc-text);
  background: rgba(5, 18, 30, .72);
  text-align: left;
}
.scada-plant-oneline.active { border-color: rgba(79,193,122,.7); box-shadow: inset 0 0 0 1px rgba(79,193,122,.15); }
.scada-plant-oneline > strong { font-size: 9px; letter-spacing: .07em; }
.scada-plant-oneline > div { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 5px; }
.scada-plant-oneline.large { padding: 18px; min-height: 330px; }
.scada-plant-oneline.large > div { gap: 12px; }
.scada-oneline-node {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 5px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  text-align: center;
}
.scada-oneline-node svg { color: var(--sc-cyan); }
.scada-oneline-node b { font-size: 7px; letter-spacing: .12em; }
.scada-oneline-node small { color: var(--sc-muted); font-size: 7px; }
.scada-oneline-wire { height: 3px; background: var(--sc-line-strong); }
.scada-oneline-wire.live { background: var(--sc-cyan); box-shadow: 0 0 10px rgba(101,184,199,.8); animation: scada-flow 1.4s linear infinite; }
.scada-plant-oneline.flowing .scada-oneline-node { border-color: rgba(101,184,199,.5); }
.scada-plant-scene { grid-column: 1 / -1; min-height: 0; padding: 14px; border: 1px solid var(--sc-line); background: var(--sc-panel); }
.scada-plant-scene header button { padding: 7px 10px; border: 1px solid var(--sc-line-strong); color: var(--sc-cyan); background: var(--sc-panel-2); font-size: 8px; }
.scada-plant-scene-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }

.scada-data-quality,
.scada-deployment-status { padding: 9px; border: 1px solid var(--sc-line); background: var(--sc-panel); }
.scada-data-quality header,
.scada-deployment-status header { margin-bottom: 7px; }
.scada-data-quality header strong,
.scada-deployment-status header strong { display: block; font-size: 9px; letter-spacing: .1em; }
.scada-data-quality header span,
.scada-deployment-status header span { color: var(--sc-muted); font-size: 7px; letter-spacing: .1em; }
.scada-data-quality article { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; padding: 6px 0; border-top: 1px solid var(--sc-line); font-size: 8px; }
.scada-data-quality i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-amber); }
.scada-data-quality .ok i { background: var(--sc-green); box-shadow: 0 0 8px var(--sc-green); }
.scada-data-quality b { color: var(--sc-muted); font-weight: 700; }
.scada-deployment-status dl { display: grid; gap: 5px; margin: 0; }
.scada-deployment-status div { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 8px; }
.scada-deployment-status dt { color: var(--sc-muted); }
.scada-deployment-status dd { margin: 0; color: var(--sc-amber); }
.scada-deployment-status dd.ok { color: var(--sc-green); }

.scada-scene-table button {
  width: 100%;
  display: grid;
  grid-template-columns: 12px 1.3fr repeat(4, minmax(70px, .5fr));
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--sc-line);
  border-radius: 0;
  color: var(--sc-text);
  background: transparent;
  text-align: left;
}
.scada-scene-table button:hover { background: rgba(101,184,199,.08); }
.scada-scene-table button > i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-red); }
.scada-scene-table button > i.ok { background: var(--sc-green); box-shadow: 0 0 8px var(--sc-green); }

.scada-inverter-drilldown {
  position: fixed;
  inset: 54px 18px 18px auto;
  z-index: 42;
  width: min(980px, calc(100vw - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--sc-line-strong);
  background: rgba(3, 13, 24, .98);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.scada-inverter-drilldown > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.scada-inverter-drilldown > header span { color: var(--sc-cyan); font-size: 8px; letter-spacing: .15em; }
.scada-inverter-drilldown > header strong { display: block; margin-top: 4px; font-size: 16px; }
.scada-inverter-drilldown > header small { display: block; color: var(--sc-muted); font-size: 8px; }
.scada-inverter-drilldown > header button { width: 28px; height: 28px; border: 1px solid var(--sc-line); color: var(--sc-text); background: var(--sc-panel-2); font-size: 18px; }
.scada-drilldown-grid { min-height: 0; display: grid; grid-template-columns: 1.35fr .85fr; gap: 10px; overflow: hidden; }
.scada-drilldown-grid > article { min-height: 0; overflow: auto; border: 1px solid var(--sc-line); background: var(--sc-panel); }
.scada-drilldown-grid header { padding: 8px 10px; border-bottom: 1px solid var(--sc-line); }
.scada-string-table.compact > div,
.scada-string-table.compact > article { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.scada-phase-detail { display: grid; gap: 7px; padding: 10px; }
.scada-phase-detail section { display: grid; grid-template-columns: 38px repeat(4, 1fr); gap: 7px; padding: 9px; border: 1px solid var(--sc-line); font-size: 8px; }
.scada-phase-detail strong { color: var(--sc-cyan); }
.scada-drilldown-alarms { display: grid; gap: 6px; padding: 10px; }
.scada-drilldown-alarms div { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--sc-line); font-size: 8px; }
.scada-drilldown-alarms .critical { border-color: rgba(255,91,91,.55); color: #ff8585; }
.scada-drilldown-alarms .ok { color: var(--sc-green); }
.scada-trend-focus { display: grid; grid-template-columns: auto minmax(170px, 1fr); align-items: center; gap: 6px; color: var(--sc-muted); font-size: 7px; letter-spacing: .1em; }
.scada-trend-focus select { min-height: 28px; border: 1px solid var(--sc-line-strong); color: var(--sc-text); background: var(--sc-panel-2); font-size: 8px; }

@keyframes scada-alarm-flash {
  0%, 100% { background: rgba(120, 20, 25, .72); }
  50% { background: rgba(220, 55, 55, .92); color: #fff; }
}

@keyframes scada-flow {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (max-width: 980px) {
  .scada-priority-strip { grid-template-columns: repeat(3, 1fr); grid-column: 1; margin: 0; }
  .scada-plant-oneline-portfolio > div,
  .scada-plant-scene-metrics,
  .scada-drilldown-grid { grid-template-columns: 1fr; }
  .scada-inverter-drilldown { inset: 48px 8px 8px; width: auto; }
}

/* --------------------------------------------------------------------------
   V11 role-based login pages
   Each role keeps the same OTP security, but presents a dedicated login page.
---------------------------------------------------------------------------- */
.scada-login-shell .role-login-admin {
  --role-accent: #45df79;
  --role-accent-soft: rgba(69, 223, 121, .13);
  --role-accent-strong: rgba(69, 223, 121, .34);
  --role-panel: #06130c;
}
.scada-login-shell .role-login-manager {
  --role-accent: #51dff8;
  --role-accent-soft: rgba(81, 223, 248, .13);
  --role-accent-strong: rgba(81, 223, 248, .34);
  --role-panel: #061219;
}
.scada-login-shell .role-login-operator {
  --role-accent: #ffb224;
  --role-accent-soft: rgba(255, 178, 36, .13);
  --role-accent-strong: rgba(255, 178, 36, .34);
  --role-panel: #160f04;
}
.scada-login-shell .role-login-customer {
  --role-accent: #6f8fff;
  --role-accent-soft: rgba(111, 143, 255, .14);
  --role-accent-strong: rgba(111, 143, 255, .34);
  --role-panel: #080d1d;
}
.scada-login-shell .role-page-surface {
  border-color: color-mix(in srgb, var(--role-accent) 44%, #40515a);
  box-shadow: 0 0 0 1px #010203, 0 22px 70px rgba(0,0,0,.58), 0 0 42px var(--role-accent-soft);
}
.scada-login-shell .role-specific-auth {
  border-left: 1px solid color-mix(in srgb, var(--role-accent) 28%, #26343b);
  background:
    linear-gradient(135deg, var(--role-accent-soft), transparent 34%),
    linear-gradient(180deg, var(--role-panel), #050b0e 42%, #050b0e);
}
.role-login-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid #263941;
  background: #263941;
}
.role-login-switcher button,
.auth-role-matrix button {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: 0;
  color: #81949d;
  background: #071014;
  font-family: var(--sc-font);
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.role-login-switcher button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}
.role-login-switcher button:hover,
.auth-role-matrix button:hover {
  color: #dbe7eb;
  background: rgba(255,255,255,.035);
}
.role-login-switcher button.active {
  color: var(--role-accent);
  background: var(--role-accent-soft);
  box-shadow: inset 0 -2px 0 var(--role-accent);
}
.role-login-title .login-lock,
.scada-login-shell .role-specific-auth .login-lock {
  color: var(--role-accent) !important;
  border-color: var(--role-accent-strong);
  background: var(--role-accent-soft);
  box-shadow: 0 0 22px var(--role-accent-soft);
}
.scada-login-shell .role-specific-auth .auth-console-id,
.scada-login-shell .role-specific-auth h2,
.scada-login-shell .role-specific-auth .login-verify,
.scada-login-shell .role-specific-auth .login-status.success {
  color: var(--role-accent) !important;
}
.scada-login-shell .role-specific-auth .login-primary {
  border-color: var(--role-accent-strong);
  color: #061014;
  background: var(--role-accent);
  box-shadow: 0 0 22px var(--role-accent-soft);
}
.scada-login-shell .role-specific-auth .login-verify {
  border-color: var(--role-accent-strong);
  background: rgba(0,0,0,.14);
}
.scada-login-shell .role-specific-auth .phone-field:focus-within,
.scada-login-shell .role-specific-auth .otp-field:focus-within {
  border-color: var(--role-accent);
  box-shadow: 0 0 0 1px var(--role-accent-soft);
}
.role-login-copy {
  display: grid;
  gap: 5px;
  margin: 13px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--role-accent);
  background: rgba(0,0,0,.22);
}
.role-login-copy strong {
  color: var(--role-accent);
  font-family: var(--sc-font);
  font-size: 8px;
  letter-spacing: .14em;
}
.role-login-copy span {
  color: #9cafb7;
  font-size: 10px;
  line-height: 1.45;
}
.role-login-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 12px;
  background: #263941;
}
.role-login-metrics div {
  min-width: 0;
  padding: 8px 9px;
  background: #081115;
}
.role-login-metrics span,
.role-login-metrics strong,
.role-access-preview small,
.role-access-preview strong,
.role-access-list span {
  display: block;
  font-family: var(--sc-font);
  text-transform: uppercase;
}
.role-login-metrics span {
  color: #71858e;
  font-size: 6px;
  letter-spacing: .08em;
}
.role-login-metrics strong {
  margin-top: 4px;
  color: #dbe7eb;
  font-size: 9px;
  letter-spacing: .06em;
}
.role-auth-note {
  border-left: 2px solid var(--role-accent) !important;
  background: var(--role-accent-soft) !important;
}
.role-access-preview {
  display: grid;
  grid-template-columns: minmax(105px, .38fr) minmax(0, 1fr);
  gap: 1px;
  margin-top: 12px;
  background: #263941;
}
.role-landing-pill,
.role-access-list {
  min-width: 0;
  background: #081115;
}
.role-landing-pill { padding: 10px; }
.role-landing-pill small {
  color: #71858e;
  font-size: 6px;
  letter-spacing: .1em;
}
.role-landing-pill strong {
  margin-top: 5px;
  color: var(--role-accent);
  font-size: 9px;
  letter-spacing: .07em;
}
.role-access-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
}
.role-access-list span {
  padding: 5px 7px;
  color: #9cafb7;
  border: 1px solid #263941;
  background: rgba(255,255,255,.025);
  font-size: 6px;
  letter-spacing: .05em;
}
.auth-role-matrix button {
  padding: 8px 7px;
  text-align: left;
  border-top: 2px solid #2b5865;
}
.auth-role-matrix button strong,
.auth-role-matrix button span {
  display: block;
  font-family: var(--sc-font);
  text-transform: uppercase;
}
.auth-role-matrix button strong { color: #dbe7eb; font-size: 8px; letter-spacing: .08em; }
.auth-role-matrix button span { margin-top: 3px; color: #71858e; font-size: 6px; letter-spacing: .04em; }
.auth-role-matrix button:first-child { border-top-color: #45df79; }
.auth-role-matrix button:nth-child(2) { border-top-color: #51dff8; }
.auth-role-matrix button:nth-child(3) { border-top-color: #e4a63a; }
.auth-role-matrix button:nth-child(4) { border-top-color: #6f8fff; }
.auth-role-matrix button.active {
  color: var(--role-accent);
  background: var(--role-accent-soft);
  box-shadow: inset 0 0 0 1px var(--role-accent-strong);
}
.auth-role-matrix button.active strong { color: var(--role-accent); }

@media (max-width: 760px) {
  .role-login-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-login-switcher button { justify-content: flex-start; min-height: 40px; }
  .role-login-metrics { grid-template-columns: 1fr; }
  .role-access-preview { grid-template-columns: 1fr; }
}

/* V56 Hybrid Web SCADA system page */
.scada-system-page { animation: fadeIn .24s ease both; }
.scada-system-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text);
}
.scada-system-loading span,
.scada-system-loading small { color: var(--muted); }
.scada-system-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, .16), transparent 34%),
    linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(15, 23, 42, .92));
  box-shadow: var(--shadow-md);
}
.scada-system-hero h2 {
  margin: 6px 0 8px;
  max-width: 780px;
  color: var(--text);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.scada-system-hero p { max-width: 880px; color: var(--muted); }
.scada-system-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.scada-system-hero-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-2);
}
.scada-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}
.scada-type-card {
  min-height: 150px;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.scada-type-card.suitable { border-color: rgba(34, 197, 94, .25); }
.scada-type-card.limited { opacity: .82; }
.scada-type-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.scada-type-card svg { color: var(--live); }
.scada-type-card p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.scada-flow-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px;
}
.scada-flow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 215px;
}
.scada-flow-item article {
  min-height: 128px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), rgba(15, 23, 42, .72));
}
.scada-flow-item span {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  color: var(--live);
  background: rgba(34, 211, 238, .1);
  font-size: 10px;
  font-weight: 800;
}
.scada-flow-item small { color: var(--muted); line-height: 1.45; }
.scada-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
  gap: 14px;
  padding: 14px;
}
.scada-live-sld {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 23, .28);
}
.sld-node {
  min-height: 110px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: rgba(15, 23, 42, .72);
  text-align: center;
}
.sld-node svg { color: var(--live); }
.sld-node span { color: var(--muted); font-size: 11px; }
.sld-node strong { color: var(--text); font-size: 13px; }
.sld-bus { display: none; }
.scada-snapshot-list {
  display: grid;
  gap: 10px;
}
.scada-snapshot-list div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.scada-snapshot-list span,
.scada-table-list small { color: var(--muted); font-size: 11px; }
.scada-snapshot-list strong { color: var(--text); }
.scada-module-list,
.scada-workflow-list,
.scada-table-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.scada-module-list article,
.scada-workflow-list article,
.scada-table-list article {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.scada-workflow-list article { grid-template-columns: 20px minmax(0, 1fr); }
.scada-table-list article { grid-template-columns: 20px minmax(0, 1fr) minmax(95px, auto); }
.scada-module-list svg.ok { color: var(--healthy); }
.scada-module-list svg.warn { color: var(--caution); }
.scada-module-list svg.bad { color: var(--critical); }
.scada-module-list strong,
.scada-workflow-list strong,
.scada-table-list strong { display: block; color: var(--text); font-size: 13px; }
.scada-module-list span,
.scada-workflow-list span,
.scada-table-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.scada-workflow-list svg { color: var(--caution); }
.scada-table-list svg { color: var(--live); }
@media (max-width: 900px) {
  .scada-system-hero,
  .scada-live-layout { grid-template-columns: 1fr; display: grid; }
  .scada-live-sld { grid-template-columns: 1fr 1fr; }
  .scada-module-list article,
  .scada-table-list article { grid-template-columns: 20px minmax(0, 1fr); }
  .scada-module-list article > .status-badge,
  .scada-table-list small { justify-self: start; grid-column: 2; }
}

/* V57 post-login mode selection */
.app-mode-page {
  display: grid;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.app-mode-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 30px;
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 197, 94, 0.18), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(56, 189, 248, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.92));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}

.app-mode-hero::after {
  content: '';
  position: absolute;
  inset: auto -20% -55% 42%;
  height: 220px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 65%);
  pointer-events: none;
}

.app-mode-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: rgb(125, 211, 252);
}

.app-mode-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: rgb(248, 250, 252);
}

.app-mode-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 1rem;
  line-height: 1.65;
}

.app-mode-status-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.app-mode-status-row span,
.app-mode-quick-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(15, 23, 42, 0.62);
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.82rem;
}

.app-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.app-mode-card {
  text-align: left;
  display: grid;
  gap: 18px;
  min-height: 390px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 30px;
  padding: 28px;
  color: rgb(248, 250, 252);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.72));
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.app-mode-card:hover:not(:disabled) {
  transform: translateY(-5px);
  border-color: rgba(34, 197, 94, 0.48);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.app-mode-card.normal:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.5);
}

.app-mode-card:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-mode-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, 0.32);
  color: rgb(134, 239, 172);
  background: rgba(34, 197, 94, 0.12);
}

.app-mode-card.normal .app-mode-icon {
  border-color: rgba(56, 189, 248, 0.32);
  color: rgb(125, 211, 252);
  background: rgba(56, 189, 248, 0.12);
}

.app-mode-card span {
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(148, 163, 184, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-mode-card h3 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
}

.app-mode-card p {
  margin: 12px 0 0;
  color: rgba(203, 213, 225, 0.8);
  line-height: 1.6;
}

.app-mode-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(226, 232, 240, 0.86);
}

.app-mode-card li,
.app-mode-card > strong {
  display: flex;
  align-items: center;
  gap: 9px;
}

.app-mode-card li svg {
  color: rgb(34, 197, 94);
}

.app-mode-card.normal li svg {
  color: rgb(56, 189, 248);
}

.app-mode-card > strong {
  align-self: end;
  justify-content: space-between;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 18px;
  color: rgb(248, 250, 252);
  font-size: 1rem;
}

.app-mode-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-mode-quick-actions button {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease;
}

.app-mode-quick-actions button:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.45);
}

.theme-light .app-mode-hero,
.scada-light .app-mode-hero,
.theme-light .app-mode-card,
.scada-light .app-mode-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.82));
  color: rgb(15, 23, 42);
}

.theme-light .app-mode-hero h2,
.scada-light .app-mode-hero h2,
.theme-light .app-mode-card h3,
.scada-light .app-mode-card h3,
.theme-light .app-mode-card > strong,
.scada-light .app-mode-card > strong {
  color: rgb(15, 23, 42);
}

.theme-light .app-mode-hero p,
.scada-light .app-mode-hero p,
.theme-light .app-mode-card p,
.scada-light .app-mode-card p,
.theme-light .app-mode-card ul,
.scada-light .app-mode-card ul {
  color: rgba(51, 65, 85, 0.86);
}

@media (max-width: 900px) {
  .app-mode-grid {
    grid-template-columns: 1fr;
  }
  .app-mode-card {
    min-height: unset;
  }
}
/* V58 page restructure: card-first navigation, SCADA screen selection, TV responsive sizing */
:root {
  --v58-radius: clamp(18px, 2vw, 30px);
  --v58-title: clamp(2rem, 4vw, 4.8rem);
  --v58-card-title: clamp(1.1rem, 1.55vw, 1.8rem);
  --v58-number: clamp(1.55rem, 3.2vw, 4.2rem);
}

.app-shell.premium-shell {
  grid-template-columns: 1fr !important;
}

.app-shell.premium-shell > .sidebar {
  display: none !important;
}

.app-shell.premium-shell > main {
  min-height: 100vh;
  width: 100%;
}

.mobile-menu-button {
  display: inline-flex !important;
}

.switch-mode-button {
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.mode-hub,
.scada-page-shell,
.whatsapp-reports-page {
  width: min(1800px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 34px);
}

.mode-hub-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--v58-radius);
  padding: clamp(22px, 3vw, 50px);
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.20), transparent 34%),
    radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.16), transparent 32%),
    rgba(15, 23, 42, 0.76);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.30);
}

.webapp-hero {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.20), transparent 34%),
    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.05);
}

.mode-eyebrow,
.scada-page-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  font-weight: 800;
  color: #67e8f9;
}

.mode-hub-hero h2,
.scada-page-head h2 {
  margin: 12px 0 10px;
  font-size: var(--v58-title);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.mode-hub-hero p,
.scada-page-head p {
  max-width: 940px;
  color: rgba(226, 232, 240, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  line-height: 1.55;
}

.mode-hub-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(16px, 2vw, 26px);
}

.mode-hub-status span,
.metric-strip > div,
.tv-bottom-strip {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 13px 15px;
  background: rgba(15, 23, 42, 0.46);
  color: rgba(226, 232, 240, 0.72);
}

.mode-hub-status strong,
.metric-strip strong {
  color: #fff;
}

.mode-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  margin-top: clamp(18px, 2.2vw, 34px);
}

.mode-tile {
  min-height: clamp(230px, 23vw, 340px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: var(--v58-radius);
  padding: clamp(18px, 2vw, 28px);
  color: #e5f4ff;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.58)),
    radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.18), transparent 30%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.mode-tile:hover:not(:disabled),
.mode-tile:focus-visible:not(:disabled) {
  transform: translateY(-4px);
  border-color: rgba(103, 232, 249, 0.58);
  box-shadow: 0 30px 90px rgba(8, 47, 73, 0.36);
}

.mode-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mode-tile .tile-icon {
  width: clamp(54px, 5vw, 78px);
  height: clamp(54px, 5vw, 78px);
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #22d3ee;
  background: rgba(8, 145, 178, 0.16);
  border: 1px solid rgba(103, 232, 249, 0.24);
}

.mode-tile span {
  margin-top: 15px;
  color: #67e8f9;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}

.mode-tile h3 {
  margin: 8px 0;
  font-size: var(--v58-card-title);
  letter-spacing: -0.03em;
}

.mode-tile p {
  color: rgba(226, 232, 240, 0.70);
  line-height: 1.5;
}

.mode-tile strong,
.webapp-quick-row button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
}

.webapp-tile {
  color: #172033;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(248,250,252,0.82)),
    radial-gradient(circle at 20% 10%, rgba(245, 158, 11, 0.18), transparent 30%);
}

.theme-dark .webapp-tile,
.scada-dark .webapp-tile {
  color: #e5f4ff;
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.82)),
    radial-gradient(circle at 20% 10%, rgba(245, 158, 11, 0.16), transparent 30%);
}

.webapp-tile .tile-icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.24);
}

.webapp-tile span {
  color: #f59e0b;
}

.scada-page-head {
  margin-bottom: clamp(16px, 2vw, 28px);
}

.sld-canvas,
.energy-flow-board {
  min-height: clamp(300px, 34vw, 560px);
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: clamp(10px, 1vw, 18px);
  align-items: center;
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: var(--v58-radius);
  padding: clamp(16px, 2vw, 28px);
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  background-color: rgba(2, 6, 23, 0.55);
}

.energy-flow-board {
  grid-template-columns: repeat(5, minmax(110px, 1fr));
}

.sld-node {
  min-height: clamp(140px, 14vw, 220px);
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(103, 232, 249, 0.26);
  background: radial-gradient(circle at top, rgba(34, 211, 238, 0.20), rgba(15, 23, 42, 0.72));
}

.sld-node svg {
  width: clamp(28px, 4vw, 58px);
  height: clamp(28px, 4vw, 58px);
  color: #67e8f9;
}

.sld-node strong {
  font-size: clamp(1rem, 1.5vw, 2rem);
}

.flow-line {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #facc15);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.7);
  animation: v58-flow 1.5s linear infinite;
}

.flow-line.reverse {
  background: linear-gradient(270deg, #22d3ee, #facc15);
}

.flow-line span {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.76rem;
  font-weight: 900;
  color: #fde68a;
}

@keyframes v58-flow {
  0% { filter: hue-rotate(0deg); opacity: 0.72; }
  50% { opacity: 1; }
  100% { filter: hue-rotate(12deg); opacity: 0.72; }
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.metric-strip.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-strip span {
  display: block;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-strip strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1rem, 1.4vw, 1.8rem);
}

.scada-card-grid,
.phase-board,
.report-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.small-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.scada-equipment-card,
.phase-card,
.report-action-grid button {
  border-radius: var(--v58-radius);
  border: 1px solid rgba(148, 163, 184, 0.18);
  padding: clamp(16px, 1.5vw, 24px);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.equipment-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.equipment-head em {
  margin-left: auto;
  font-style: normal;
  color: rgba(226, 232, 240, 0.62);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 18px currentColor;
}

.status-dot.ok { color: #22c55e; background: #22c55e; }
.status-dot.warn { color: #f59e0b; background: #f59e0b; }
.status-dot.danger { color: #ef4444; background: #ef4444; }
.status-pill { border-radius: 999px; padding: 5px 10px; font-weight: 800; }
.status-pill.ok { color: #22c55e; background: rgba(34,197,94,0.12); }
.status-pill.warn { color: #f59e0b; background: rgba(245,158,11,0.12); }
.status-pill.danger { color: #ef4444; background: rgba(239,68,68,0.12); }
.equipment-note { color: rgba(226, 232, 240, 0.66); }

.scada-table-wrap {
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.scada-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.scada-table-wrap th,
.scada-table-wrap td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
}

.scada-table-wrap th {
  color: #67e8f9;
  background: rgba(15, 23, 42, 0.72);
}

.alarm-wall-list {
  display: grid;
  gap: 10px;
}

.alarm-wall-row {
  display: grid;
  grid-template-columns: 120px 1fr 180px 180px;
  gap: 12px;
  align-items: center;
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.66);
}

.alarm-wall-row span {
  text-transform: uppercase;
  font-weight: 900;
}

.alarm-wall-row.critical,
.alarm-wall-row.high {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.30);
}

.alarm-wall-row.medium {
  border-color: rgba(245, 158, 11, 0.35);
}

.scada-empty {
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 22px;
  padding: 28px;
  color: rgba(226, 232, 240, 0.72);
  text-align: center;
}

.tv-dashboard-page {
  min-height: calc(100vh - 110px);
  width: min(1900px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 2.2vw, 44px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 30px);
}

.tv-dashboard-page header,
.tv-bottom-strip,
.webapp-quick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tv-dashboard-page header h2 {
  font-size: clamp(2.4rem, 5.6vw, 7rem);
  letter-spacing: -0.07em;
  line-height: 0.9;
  margin: 5px 0 0;
}

.tv-dashboard-page header button,
.webapp-quick-row button,
.report-action-grid button {
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 18px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.70);
  color: #fff;
}

.tv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

.tv-kpi {
  display: grid;
  align-content: center;
  min-height: clamp(150px, 20vw, 280px);
  border-radius: var(--v58-radius);
  border: 1px solid rgba(103, 232, 249, 0.20);
  padding: clamp(18px, 2vw, 34px);
  background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), rgba(15, 23, 42, 0.78));
}

.tv-kpi span {
  color: rgba(226, 232, 240, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.tv-kpi strong {
  font-size: var(--v58-number);
  letter-spacing: -0.07em;
  line-height: 1;
  margin-top: 10px;
}

.tv-kpi.danger {
  border-color: rgba(239, 68, 68, 0.42);
  background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.22), rgba(15, 23, 42, 0.78));
}

.report-action-grid button {
  min-height: 190px;
  display: grid;
  justify-items: start;
  gap: 8px;
  text-align: left;
}

.report-action-grid button strong {
  font-size: var(--v58-card-title);
}

.report-action-grid button span {
  color: rgba(226, 232, 240, 0.68);
}

.report-action-grid button em {
  color: #facc15;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 980px) {
  .mode-hub-status,
  .tv-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sld-canvas,
  .energy-flow-board {
    grid-template-columns: 1fr;
  }
  .flow-line {
    min-height: 44px;
    width: 6px;
    justify-self: center;
  }
  .flow-line span {
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
  }
  .alarm-wall-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .mode-hub-status,
  .tv-kpi-grid,
  .metric-strip.compact {
    grid-template-columns: 1fr;
  }
}

/* V59 separate Plants page */
.plants-page-v59 {
  width: min(1800px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 34px);
}

.plants-toolbar-v59 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: clamp(16px, 2vw, 28px) 0;
}

.plants-toolbar-v59 button,
.plant-actions-v59 button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  padding: 11px 14px;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
}

.plants-grid-v59 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(14px, 1.5vw, 24px);
}

.plant-card-v59 {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--v58-radius);
  padding: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(248,250,252,0.82)),
    radial-gradient(circle at 20% 10%, rgba(34, 197, 94, 0.16), transparent 30%);
  color: #172033;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.13);
}

.theme-dark .plant-card-v59,
.scada-dark .plant-card-v59 {
  color: #e5f4ff;
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.82)),
    radial-gradient(circle at 20% 10%, rgba(34, 197, 94, 0.16), transparent 30%);
}

.plant-card-v59.selected {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 26px 90px rgba(22, 163, 74, 0.18);
}

.plant-card-head-v59 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.plant-card-head-v59 h3 {
  margin: 4px 0 0;
  font-size: clamp(1.2rem, 1.7vw, 2rem);
  letter-spacing: -0.04em;
}

.plant-card-head-v59 span,
.plant-metrics-v59 span,
.plant-health-strip-v59 span {
  color: rgba(100, 116, 139, 0.92);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.theme-dark .plant-card-head-v59 span,
.theme-dark .plant-metrics-v59 span,
.theme-dark .plant-health-strip-v59 span,
.scada-dark .plant-card-head-v59 span,
.scada-dark .plant-metrics-v59 span,
.scada-dark .plant-health-strip-v59 span {
  color: rgba(226, 232, 240, 0.64);
}

.plant-card-head-v59 em {
  margin-left: auto;
  border-radius: 999px;
  padding: 7px 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.plant-card-head-v59 em.online {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.plant-card-head-v59 em.offline {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

.plant-icon-v59 {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.24);
}

.plant-metrics-v59 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.plant-metrics-v59 div {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 13px;
  background: rgba(15, 23, 42, 0.06);
}

.theme-dark .plant-metrics-v59 div,
.scada-dark .plant-metrics-v59 div {
  background: rgba(15, 23, 42, 0.42);
}

.plant-metrics-v59 strong {
  display: block;
  margin-top: 7px;
  font-size: clamp(1.15rem, 1.5vw, 1.75rem);
  letter-spacing: -0.05em;
}

.plant-health-strip-v59 {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.plant-health-strip-v59 span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  letter-spacing: 0;
}

.plant-actions-v59 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.plants-empty-v59 {
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 24px;
  padding: 34px;
  color: rgba(226, 232, 240, 0.72);
  text-align: center;
}

@media (max-width: 620px) {
  .plant-metrics-v59 {
    grid-template-columns: 1fr;
  }
}
:root {
  --ux-radius-sm: 12px;
  --ux-radius-md: 18px;
  --ux-radius-lg: 24px;
  --ux-radius-xl: 32px;
  --ux-gap: clamp(14px, 1.4vw, 26px);
  --ux-font-xs: clamp(0.72rem, 0.72rem + 0.15vw, 0.88rem);
  --ux-font-sm: clamp(0.84rem, 0.78rem + 0.22vw, 1rem);
  --ux-font-md: clamp(0.96rem, 0.86rem + 0.34vw, 1.18rem);
  --ux-font-lg: clamp(1.15rem, 0.94rem + 0.75vw, 1.65rem);
  --ux-font-xl: clamp(1.65rem, 1.15rem + 1.9vw, 3.2rem);
  --ux-font-tv: clamp(2.6rem, 5vw, 5.6rem);
  --ux-card-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  --ux-web-bg: #f8f4ed;
  --ux-web-panel: rgba(255, 255, 255, 0.88);
  --ux-web-border: rgba(100, 116, 139, 0.18);
  --ux-scada-bg: #07111e;
  --ux-scada-panel: rgba(9, 20, 36, 0.86);
  --ux-scada-border: rgba(72, 207, 255, 0.18);
  --ux-amber: #f59e0b;
  --ux-green: #10b981;
  --ux-blue: #2563eb;
  --ux-cyan: #06b6d4;
  --ux-red: #ef4444;
  --ux-violet: #7c3aed;
  --ux-slate: #64748b;
}
.ux-page-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--ux-gap);
  border-radius: var(--ux-radius-xl);
  padding: clamp(18px, 2.4vw, 34px);
  margin-bottom: var(--ux-gap);
  position: relative;
  overflow: hidden;
}
.ux-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.92;
}
.ux-page-title-row {
  display: flex;
  gap: clamp(12px, 1.1vw, 20px);
  min-width: 0;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.ux-page-icon, .ux-back-button {
  width: clamp(42px, 4vw, 62px);
  height: clamp(42px, 4vw, 62px);
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  flex: 0 0 auto;
}
.ux-back-button { cursor: pointer; background: transparent; }
.ux-page-title-copy { min-width: 0; }
.ux-eyebrow, .ux-section-head span, .ux-tile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
  font-size: var(--ux-font-xs);
}
.ux-page-header h2 {
  margin: 6px 0 7px;
  font-size: var(--ux-font-xl);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.ux-page-header p {
  margin: 0;
  font-size: var(--ux-font-md);
  max-width: 840px;
  line-height: 1.55;
}
.ux-page-header-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}
.ux-header-badges, .ux-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}
.ux-tile-section {
  margin: var(--ux-gap) 0;
}
.ux-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--ux-gap);
  margin-bottom: 13px;
}
.ux-section-head h3 {
  margin: 4px 0 0;
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.55rem);
}
.ux-section-head p {
  margin: 0;
  max-width: 680px;
  font-size: var(--ux-font-sm);
  line-height: 1.55;
}
.ux-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: clamp(12px, 1.25vw, 22px);
}
.ux-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}
.ux-tile-card, .ux-metric-card, .ux-state-panel {
  border: 1px solid var(--ux-web-border);
  border-radius: var(--ux-radius-lg);
  background: var(--ux-web-panel);
  box-shadow: var(--ux-card-shadow);
  position: relative;
  overflow: hidden;
}
.ux-tile-card {
  min-height: clamp(210px, 21vw, 300px);
  padding: clamp(17px, 1.7vw, 26px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.ux-tile-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at top right, rgba(245, 158, 11, .18), transparent 34%), radial-gradient(circle at bottom left, rgba(37, 99, 235, .1), transparent 32%);
  pointer-events: none;
}
.ux-tile-card > * { position: relative; z-index: 1; }
.ux-tile-card:hover:not(:disabled) { transform: translateY(-5px); box-shadow: 0 26px 72px rgba(15, 23, 42, 0.18); }
.ux-tile-card:active:not(:disabled) { transform: translateY(-1px) scale(.992); }
.ux-tile-card:disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.35); }
.ux-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ux-tile-icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(15, 23, 42, .06); }
.ux-tile-card h3 { margin: 0; font-size: clamp(1.05rem, .9rem + .58vw, 1.55rem); letter-spacing: -0.03em; }
.ux-tile-card p { margin: 0; color: #64748b; line-height: 1.52; font-size: var(--ux-font-sm); }
.ux-tile-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.ux-tile-meta span { border-radius: 999px; padding: 6px 10px; background: rgba(15, 23, 42, .06); font-size: .78rem; font-weight: 800; }
.ux-tile-action { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #0f172a; font-size: var(--ux-font-sm); }
.ux-metric-card { padding: clamp(14px, 1.4vw, 22px); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ux-metric-card span { display: block; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.ux-metric-card strong { display: block; margin-top: 7px; font-size: clamp(1.25rem, 1rem + 1vw, 2.35rem); letter-spacing: -.04em; line-height: 1; }
.ux-metric-card p { margin: 9px 0 0; color: #64748b; font-size: .82rem; }
.ux-status-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 11px; font-size: .76rem; font-weight: 900; border: 1px solid rgba(100, 116, 139, .22); background: rgba(255, 255, 255, .72); color: #334155; }
.ux-status-chip i { width: 8px; height: 8px; border-radius: 999px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.ux-status-chip strong { font-size: .82rem; }
.ux-tone-amber { color: var(--ux-amber); }
.ux-tone-green { color: var(--ux-green); }
.ux-tone-blue { color: var(--ux-blue); }
.ux-tone-cyan { color: var(--ux-cyan); }
.ux-tone-red { color: var(--ux-red); }
.ux-tone-violet { color: var(--ux-violet); }
.ux-tone-slate { color: var(--ux-slate); }
.scada-console-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--ux-gap);
}
.scada-console-meta .ux-status-chip { max-width: 100%; }
.v60-action-grid button {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.v60-action-grid button:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(15,23,42,.14); }
.v60-equipment-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.v60-equipment-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.34); box-shadow: 0 22px 60px rgba(0,0,0,.24); }
.v60-table-wrap table { font-size: clamp(.86rem, .75rem + .35vw, 1.1rem); }
.v60-table-wrap th { position: sticky; top: 0; z-index: 1; }
.ux-page-actions button, .ux-action-button, .ux-back-button {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(100, 116, 139, .22);
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.ux-page-actions button:hover, .ux-action-button:hover, .ux-back-button:hover { transform: translateY(-2px); }
.ux-page-actions button:active, .ux-action-button:active, .ux-back-button:active { transform: translateY(0) scale(.99); }
.ux-tile-card:focus-visible, .ux-page-actions button:focus-visible, .ux-action-button:focus-visible, .ux-back-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .34);
  outline-offset: 3px;
}
.ux-state-panel { padding: clamp(22px, 3vw, 44px); display: grid; place-items: center; text-align: center; gap: 10px; min-height: 220px; }
.ux-state-panel strong { font-size: var(--ux-font-lg); }
.ux-state-panel p { margin: 0; max-width: 560px; color: #64748b; line-height: 1.55; }
.ux-state-error, .ux-state-permission { border-color: rgba(239, 68, 68, .28); }
.ux-state-offline { border-color: rgba(245, 158, 11, .3); }
.ux-spin { animation: ux-spin 1s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
@keyframes ux-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.ux-page-header.ux-webapp {
  color: #0f172a;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,237,.88));
  border: 1px solid rgba(245, 158, 11, .22);
  box-shadow: 0 24px 70px rgba(146, 64, 14, .12);
}
.ux-page-header.ux-webapp::before { background: radial-gradient(circle at 90% 0%, rgba(245, 158, 11, .2), transparent 34%), radial-gradient(circle at 12% 90%, rgba(16, 185, 129, .12), transparent 26%); }
.ux-page-header.ux-webapp .ux-page-icon, .ux-page-header.ux-webapp .ux-back-button { color: #d97706; background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .24); }
.ux-webapp .ux-section-head { color: #0f172a; }
.ux-webapp .ux-section-head p { color: #64748b; }
.ux-tile-card.ux-webapp.ux-tone-amber { border-color: rgba(245,158,11,.28); }
.ux-tile-card.ux-webapp.ux-tone-green { border-color: rgba(16,185,129,.25); }
.ux-tile-card.ux-webapp.ux-tone-blue { border-color: rgba(37,99,235,.2); }
.webapp-hub.v60-upgrade, .plants-page-v59 { max-width: 1680px; margin: 0 auto; }
.ux-webapp-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-bottom: var(--ux-gap); }
.app-mode-page {
  max-width: 1680px;
  margin: 0 auto;
}
.app-mode-hero {
  border-radius: var(--ux-radius-xl) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,237,.9)) !important;
  border: 1px solid rgba(245, 158, 11, .24) !important;
  box-shadow: 0 28px 80px rgba(146, 64, 14, .13) !important;
}
.app-mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(16px, 2vw, 32px) !important;
}
.app-mode-card {
  min-height: clamp(360px, 30vw, 520px) !important;
  border-radius: var(--ux-radius-xl) !important;
  position: relative;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}
.app-mode-card:hover:not(:disabled) { transform: translateY(-7px); }
.app-mode-card.scada { background: radial-gradient(circle at 75% 10%, rgba(34,211,238,.18), transparent 30%), linear-gradient(145deg, #07111e, #0f1f31) !important; }
.app-mode-card.normal { background: radial-gradient(circle at 75% 10%, rgba(245,158,11,.18), transparent 30%), linear-gradient(145deg, #fffaf2, #fff) !important; }
.plants-page-v59 .mode-hub-hero { display: none; }
.plants-page-v59::before {
  content: "Plants Portfolio";
  display: block;
  font-size: var(--ux-font-xl);
  font-weight: 950;
  letter-spacing: -.045em;
  padding: clamp(18px, 2.4vw, 34px);
  margin-bottom: var(--ux-gap);
  border-radius: var(--ux-radius-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,244,.9));
  border: 1px solid rgba(16,185,129,.24);
  box-shadow: 0 24px 70px rgba(21,128,61,.12);
  color: #0f172a;
}
.plants-toolbar-v59, .plant-actions-v59 { gap: 10px !important; }
.plants-toolbar-v59 button, .plant-actions-v59 button, .webapp-quick-row button {
  border-radius: 14px !important;
  min-height: 43px;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.plants-toolbar-v59 button:hover, .plant-actions-v59 button:hover, .webapp-quick-row button:hover { transform: translateY(-2px); }
.plant-card-v59 { border-radius: var(--ux-radius-xl) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; }
.plant-card-v59:hover { transform: translateY(-4px); box-shadow: 0 26px 66px rgba(15,23,42,.16) !important; }
.ux-page-header.ux-scada, .ux-tile-card.ux-scada, .ux-metric-card.ux-scada, .ux-state-panel.ux-scada {
  color: #e5f7ff;
  background: linear-gradient(145deg, rgba(7, 17, 30, .96), rgba(9, 20, 36, .9));
  border-color: var(--ux-scada-border);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .28);
}
.ux-page-header.ux-scada::before { background: linear-gradient(rgba(72,207,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(72,207,255,.055) 1px, transparent 1px), radial-gradient(circle at 80% 12%, rgba(6,182,212,.2), transparent 30%); background-size: 34px 34px, 34px 34px, auto; }
.ux-page-header.ux-scada .ux-page-icon, .ux-page-header.ux-scada .ux-back-button { color: #22d3ee; background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .35); }
.ux-scada .ux-section-head, .ux-tile-section.ux-scada { color: #e5f7ff; }
.ux-scada .ux-section-head p, .ux-tile-card.ux-scada p { color: #9fb9c9; }
.ux-tile-card.ux-scada::before { background: radial-gradient(circle at top right, rgba(34,211,238,.16), transparent 34%), radial-gradient(circle at bottom left, rgba(16,185,129,.12), transparent 30%); }
.ux-tile-card.ux-scada .ux-tile-icon { background: rgba(34,211,238,.09); border: 1px solid rgba(34,211,238,.16); }
.ux-tile-card.ux-scada .ux-tile-action { color: #c9fbff; }
.ux-tile-card.ux-scada:hover:not(:disabled) { border-color: rgba(34,211,238,.48); box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 32px 88px rgba(0,0,0,.38); }
.ux-tile-card.ux-scada .ux-tile-meta span { color: #d9f8ff; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.14); }
.ux-metric-card.ux-scada span { color: #93c5fd; }
.ux-status-chip.ux-scada, .ux-scada .ux-status-chip { color: #d9f8ff; background: rgba(15, 23, 42, .65); border-color: rgba(148, 163, 184, .2); }
.scada-hub.v60-upgrade { max-width: 1840px; margin: 0 auto; }
.scada-console-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-bottom: var(--ux-gap); }
.scada-console-strip .ux-metric-card { min-height: 114px; }
.scada-page-shell.v60-upgrade { max-width: 1840px; margin: 0 auto; }
.v60-sld, .v60-energy-flow {
  border-radius: var(--ux-radius-xl) !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  background: linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px), rgba(2,6,23,.32) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}
.v60-phase-board .phase-card { min-height: clamp(220px, 20vw, 360px); }
.v60-alarm-wall .alarm-wall-row { font-size: clamp(.9rem, .85rem + .35vw, 1.25rem); }
.metric-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important; }
.metric-strip strong { font-size: clamp(1.05rem, .95rem + .75vw, 2rem) !important; }
.tv-dashboard-page.v60-tv {
  min-height: calc(100vh - 30px);
  padding: clamp(18px, 2.4vw, 44px);
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(34,211,238,.18), transparent 24%), #050c16;
  color: #e6fbff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 34px);
}
.tv-dashboard-page.v60-tv header h2 { font-size: clamp(2rem, 3.8vw, 5rem); }
.tv-dashboard-page.v60-tv .tv-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(14px, 2vw, 28px); }
.tv-dashboard-page.v60-tv .tv-kpi { min-height: clamp(170px, 19vw, 280px); display: flex; flex-direction: column; justify-content: center; }
.tv-dashboard-page.v60-tv .tv-kpi strong { font-size: var(--ux-font-tv); line-height: .95; }
.tv-dashboard-page.v60-tv .tv-bottom-strip { font-size: clamp(1rem, 1.6vw, 2rem); }
@media (max-width: 980px) {
  .ux-page-header, .ux-section-head { flex-direction: column; align-items: stretch; }
  .ux-page-header-side, .ux-header-badges, .ux-page-actions { align-items: flex-start; justify-content: flex-start; }
  .ux-tile-card { min-height: 190px; }
}
@media (min-width: 1500px) {
  .ux-tile-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .ux-tile-card { min-height: 270px; }
}
@media (min-width: 2100px) {
  .page-content { max-width: 2200px; margin-inline: auto; }
  .ux-tile-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .ux-page-header { padding: 44px; }
  .topbar { min-height: 120px; }
  .topbar h1 { font-size: clamp(2rem, 2.2vw, 4.2rem); }
}
@media (hover: none) {
  .ux-tile-card:hover:not(:disabled), .ux-page-actions button:hover, .ux-action-button:hover { transform: none; }
}
/* =====================================================================
   V61 color correction layer
   Purpose: improve contrast/readability for V60 UI kit without changing routes,
   API logic, or page behavior.
   ===================================================================== */
:root {
  --ux-web-text-strong: #0f172a;
  --ux-web-text-muted: #475569;
  --ux-web-amber-strong: #92400e;
  --ux-web-green-strong: #065f46;
  --ux-web-blue-strong: #1e3a8a;
  --ux-web-cyan-strong: #155e75;
  --ux-web-red-strong: #991b1b;
  --ux-web-violet-strong: #5b21b6;
  --ux-web-slate-strong: #334155;
}
/* Web app tiles: keep titles/body dark and use tone only for icons/actions.
   This prevents amber/green/cyan headings becoming low-contrast on white cards. */
.ux-tile-card.ux-webapp,
.ux-metric-card.ux-webapp,
.ux-state-panel.ux-webapp {
  color: var(--ux-web-text-strong);
}
.ux-tile-card.ux-webapp p,
.ux-metric-card.ux-webapp p,
.ux-state-panel.ux-webapp p,
.ux-webapp .ux-section-head p {
  color: var(--ux-web-text-muted);
}
.ux-tile-card.ux-webapp.ux-tone-amber .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-amber .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-amber .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-amber strong,
.ux-metric-card.ux-webapp.ux-tone-amber svg { color: var(--ux-web-amber-strong); }
.ux-tile-card.ux-webapp.ux-tone-green .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-green .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-green .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-green strong,
.ux-metric-card.ux-webapp.ux-tone-green svg { color: var(--ux-web-green-strong); }
.ux-tile-card.ux-webapp.ux-tone-blue .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-blue .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-blue .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-blue strong,
.ux-metric-card.ux-webapp.ux-tone-blue svg { color: var(--ux-web-blue-strong); }
.ux-tile-card.ux-webapp.ux-tone-cyan .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-cyan .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-cyan .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-cyan strong,
.ux-metric-card.ux-webapp.ux-tone-cyan svg { color: var(--ux-web-cyan-strong); }
.ux-tile-card.ux-webapp.ux-tone-red .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-red .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-red .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-red strong,
.ux-metric-card.ux-webapp.ux-tone-red svg { color: var(--ux-web-red-strong); }
.ux-tile-card.ux-webapp.ux-tone-violet .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-violet .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-violet .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-violet strong,
.ux-metric-card.ux-webapp.ux-tone-violet svg { color: var(--ux-web-violet-strong); }
.ux-tile-card.ux-webapp.ux-tone-slate .ux-tile-icon,
.ux-tile-card.ux-webapp.ux-tone-slate .ux-tile-kicker,
.ux-tile-card.ux-webapp.ux-tone-slate .ux-tile-action,
.ux-metric-card.ux-webapp.ux-tone-slate strong,
.ux-metric-card.ux-webapp.ux-tone-slate svg { color: var(--ux-web-slate-strong); }
/* Light status chips: use darker semantic text on tinted backgrounds. */
.ux-status-chip.ux-tone-amber {
  color: var(--ux-web-amber-strong);
  background: rgba(255, 251, 235, 0.94);
  border-color: rgba(146, 64, 14, 0.28);
}
.ux-status-chip.ux-tone-green {
  color: var(--ux-web-green-strong);
  background: rgba(236, 253, 245, 0.94);
  border-color: rgba(6, 95, 70, 0.24);
}
.ux-status-chip.ux-tone-blue {
  color: var(--ux-web-blue-strong);
  background: rgba(239, 246, 255, 0.94);
  border-color: rgba(30, 58, 138, 0.22);
}
.ux-status-chip.ux-tone-cyan {
  color: var(--ux-web-cyan-strong);
  background: rgba(236, 254, 255, 0.94);
  border-color: rgba(21, 94, 117, 0.24);
}
.ux-status-chip.ux-tone-red {
  color: var(--ux-web-red-strong);
  background: rgba(254, 242, 242, 0.94);
  border-color: rgba(153, 27, 27, 0.24);
}
.ux-status-chip.ux-tone-violet {
  color: var(--ux-web-violet-strong);
  background: rgba(245, 243, 255, 0.94);
  border-color: rgba(91, 33, 182, 0.24);
}
.ux-status-chip.ux-tone-slate {
  color: var(--ux-web-slate-strong);
  background: rgba(248, 250, 252, 0.94);
  border-color: rgba(51, 65, 85, 0.20);
}
/* SCADA chips: use high-contrast neon/tinted states on dark panels. */
.ux-scada .ux-status-chip.ux-tone-amber,
.ux-status-chip.ux-scada.ux-tone-amber {
  color: #fde68a;
  background: rgba(146, 64, 14, 0.32);
  border-color: rgba(253, 230, 138, 0.32);
}
.ux-scada .ux-status-chip.ux-tone-green,
.ux-status-chip.ux-scada.ux-tone-green {
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.34);
  border-color: rgba(187, 247, 208, 0.30);
}
.ux-scada .ux-status-chip.ux-tone-blue,
.ux-status-chip.ux-scada.ux-tone-blue {
  color: #bfdbfe;
  background: rgba(30, 64, 175, 0.34);
  border-color: rgba(191, 219, 254, 0.30);
}
.ux-scada .ux-status-chip.ux-tone-cyan,
.ux-status-chip.ux-scada.ux-tone-cyan {
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.30);
  border-color: rgba(165, 243, 252, 0.30);
}
.ux-scada .ux-status-chip.ux-tone-red,
.ux-status-chip.ux-scada.ux-tone-red {
  color: #fecaca;
  background: rgba(153, 27, 27, 0.34);
  border-color: rgba(254, 202, 202, 0.30);
}
.ux-scada .ux-status-chip.ux-tone-violet,
.ux-status-chip.ux-scada.ux-tone-violet {
  color: #ddd6fe;
  background: rgba(91, 33, 182, 0.34);
  border-color: rgba(221, 214, 254, 0.30);
}
.ux-scada .ux-status-chip.ux-tone-slate,
.ux-status-chip.ux-scada.ux-tone-slate {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.42);
  border-color: rgba(226, 232, 240, 0.20);
}
/* Post-login mode selection: in light theme, keep the SCADA card readable on
   its dark industrial background. */
.app-mode-card.scada,
.theme-light .app-mode-card.scada,
.scada-light .app-mode-card.scada {
  color: #e5f7ff !important;
  border-color: rgba(34, 211, 238, 0.34) !important;
}
.app-mode-card.scada h3,
.app-mode-card.scada > strong,
.theme-light .app-mode-card.scada h3,
.theme-light .app-mode-card.scada > strong,
.scada-light .app-mode-card.scada h3,
.scada-light .app-mode-card.scada > strong {
  color: #f8fdff !important;
}
.app-mode-card.scada p,
.app-mode-card.scada ul,
.theme-light .app-mode-card.scada p,
.theme-light .app-mode-card.scada ul,
.scada-light .app-mode-card.scada p,
.scada-light .app-mode-card.scada ul {
  color: rgba(218, 242, 255, 0.88) !important;
}
.app-mode-card.scada span,
.theme-light .app-mode-card.scada span,
.scada-light .app-mode-card.scada span {
  color: #a5f3fc !important;
}
.app-mode-card.scada .app-mode-icon,
.theme-light .app-mode-card.scada .app-mode-icon,
.scada-light .app-mode-card.scada .app-mode-icon {
  color: #67e8f9 !important;
  background: rgba(34, 211, 238, 0.14) !important;
  border-color: rgba(103, 232, 249, 0.38) !important;
}
.app-mode-card.normal,
.theme-light .app-mode-card.normal,
.scada-light .app-mode-card.normal {
  color: #0f172a !important;
}
.app-mode-card.normal h3,
.app-mode-card.normal > strong {
  color: #111827 !important;
}
.app-mode-card.normal p,
.app-mode-card.normal ul {
  color: rgba(51, 65, 85, 0.88) !important;
}
.app-mode-card.normal span {
  color: #92400e !important;
}
/* Stronger focus ring visible on both light and dark cards. */
.ux-tile-card:focus-visible,
.app-mode-card:focus-visible,
.ux-page-actions button:focus-visible,
.ux-action-button:focus-visible,
.ux-back-button:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.72);
  outline-offset: 4px;
}
/* V62 SCADA text sizing and overlap fixes
   Purpose: prevent KPI/status/text overlap on tablets, PCs, and TV/control-room screens. */
.scada-page-shell.v60-upgrade,
.scada-hub.v60-upgrade,
.tv-dashboard-page.v60-tv,
.ux-page-header,
.ux-tile-section,
.ux-tile-grid,
.ux-tile-card,
.ux-metric-card,
.metric-strip,
.scada-card-grid,
.phase-board,
.sld-canvas,
.energy-flow-board {
  box-sizing: border-box;
}
.scada-page-shell.v60-upgrade *,
.scada-hub.v60-upgrade *,
.tv-dashboard-page.v60-tv *,
.ux-page-header *,
.ux-tile-card *,
.ux-metric-card * {
  box-sizing: border-box;
  min-width: 0;
}
/* Page header: long plant names, integration labels and badges should wrap instead of crossing over. */
.ux-page-header {
  align-items: flex-start;
}
.ux-page-title-row {
  flex: 1 1 520px;
}
.ux-page-title-copy h2,
.ux-page-title-copy p,
.ux-section-head h3,
.ux-section-head p,
.ux-tile-card h3,
.ux-tile-card p,
.ux-metric-card strong,
.metric-strip strong,
.sld-node strong,
.sld-node span,
.tv-kpi strong,
.tv-kpi span {
  overflow-wrap: anywhere;
  word-break: normal;
}
.ux-page-header h2 {
  font-size: clamp(1.65rem, 2.7vw, 3.6rem);
  line-height: 1.04;
  max-width: 100%;
}
.ux-page-header p {
  font-size: clamp(.94rem, .72rem + .55vw, 1.22rem);
  max-width: 78ch;
}
.ux-page-header-side {
  flex: 0 1 560px;
  max-width: 100%;
}
.ux-header-badges,
.scada-console-meta,
.ux-page-actions {
  max-width: 100%;
}
.ux-status-chip {
  max-width: 100%;
  min-height: 34px;
  white-space: normal;
  flex-wrap: wrap;
  line-height: 1.15;
  text-align: left;
}
.ux-status-chip strong {
  overflow-wrap: anywhere;
  max-width: min(100%, 42ch);
}
.scada-console-meta .ux-status-chip {
  flex: 1 1 260px;
  align-items: center;
}
/* Tile cards: prevent title/subtitle/status/meta/action from sitting on top of each other. */
.ux-tile-grid {
  align-items: stretch;
}
.ux-tile-card {
  min-height: clamp(225px, 18vw, 310px);
  height: auto;
  gap: clamp(8px, .8vw, 12px);
}
.ux-tile-card h3 {
  font-size: clamp(1.02rem, .85rem + .5vw, 1.42rem);
  line-height: 1.14;
}
.ux-tile-card p {
  font-size: clamp(.88rem, .78rem + .22vw, 1rem);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ux-tile-top {
  align-items: flex-start;
}
.ux-tile-meta {
  margin-top: auto;
  max-width: 100%;
}
.ux-tile-meta span {
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}
.ux-tile-action {
  margin-top: 0;
  padding-top: 4px;
}
/* KPI cards: use readable but bounded number sizes. */
.scada-console-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
}
.scada-console-strip .ux-metric-card,
.ux-metric-card {
  min-height: auto;
}
.ux-metric-card strong {
  font-size: clamp(1.28rem, 1.05rem + .9vw, 2.15rem);
  line-height: 1.04;
}
.ux-metric-card p {
  font-size: clamp(.78rem, .7rem + .18vw, .92rem);
  line-height: 1.35;
}
/* SCADA diagram: avoid the 7-column layout on smaller laptops/tablets where nodes overlap. */
.sld-canvas,
.energy-flow-board {
  width: 100%;
  overflow: hidden;
  grid-auto-rows: auto;
}
.sld-node {
  min-height: clamp(128px, 11vw, 190px);
  padding: clamp(12px, 1.2vw, 20px);
  align-content: center;
}
.sld-node span {
  font-size: clamp(.76rem, .66rem + .22vw, .98rem);
  line-height: 1.2;
}
.sld-node strong {
  font-size: clamp(.95rem, .78rem + .55vw, 1.55rem);
  line-height: 1.15;
}
.flow-line {
  min-width: 42px;
  align-self: center;
}
.flow-line span {
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .92);
  border: 1px solid rgba(250, 204, 21, .24);
  white-space: nowrap;
}
/* Equipment and phase cards: compact metric grids must not force two columns in narrow cards. */
.metric-strip,
.metric-strip.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)) !important;
  align-items: stretch;
}
.metric-strip > div {
  min-width: 0;
  padding: clamp(10px, 1vw, 14px);
}
.metric-strip span {
  font-size: clamp(.68rem, .62rem + .16vw, .8rem);
  line-height: 1.15;
}
.metric-strip strong {
  font-size: clamp(.98rem, .8rem + .55vw, 1.48rem) !important;
  line-height: 1.12;
}
.scada-equipment-card,
.phase-card {
  min-height: auto;
  overflow: hidden;
}
.scada-equipment-card h3,
.equipment-head strong,
.equipment-head em,
.equipment-note,
.phase-card > strong {
  overflow-wrap: anywhere;
  line-height: 1.18;
}
.equipment-head {
  align-items: flex-start;
  flex-wrap: wrap;
}
.equipment-head em {
  margin-left: 0;
  flex: 1 1 auto;
  text-align: right;
}
.phase-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v60-phase-board .phase-card {
  min-height: clamp(190px, 16vw, 300px);
}
/* Alarm wall rows: switch to responsive grid before text starts overlapping. */
.alarm-wall-row {
  grid-template-columns: minmax(90px, 120px) minmax(220px, 1fr) minmax(140px, 180px) minmax(120px, 170px);
  overflow: hidden;
}
.alarm-wall-row strong,
.alarm-wall-row em,
.alarm-wall-row small,
.alarm-wall-row span {
  overflow-wrap: anywhere;
  line-height: 1.22;
}
/* TV mode: keep values big but bounded, and prevent grid overflow. */
.tv-dashboard-page.v60-tv {
  width: min(100%, 1920px);
  overflow: hidden;
}
.tv-dashboard-page.v60-tv header {
  align-items: flex-start;
}
.tv-dashboard-page.v60-tv header h2 {
  font-size: clamp(1.9rem, 3vw, 4.2rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.tv-dashboard-page.v60-tv .tv-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
}
.tv-dashboard-page.v60-tv .tv-kpi {
  min-height: clamp(145px, 14vw, 240px);
  overflow: hidden;
}
.tv-dashboard-page.v60-tv .tv-kpi strong {
  font-size: clamp(2.05rem, 4.2vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.tv-dashboard-page.v60-tv .tv-kpi span,
.tv-dashboard-page.v60-tv .tv-bottom-strip {
  font-size: clamp(.9rem, 1.05vw, 1.45rem);
  line-height: 1.2;
}
.tv-bottom-strip {
  align-items: flex-start;
}
.tv-bottom-strip span {
  overflow-wrap: anywhere;
}
@media (max-width: 1280px) {
  .sld-canvas,
  .energy-flow-board {
    grid-template-columns: 1fr !important;
    min-height: auto;
    gap: 14px;
  }

  .flow-line {
    min-height: 54px;
    width: 6px;
    min-width: 6px;
    justify-self: center;
    background: linear-gradient(180deg, #22d3ee, #facc15);
  }

  .flow-line.reverse {
    background: linear-gradient(0deg, #22d3ee, #facc15);
  }

  .flow-line span {
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
  }

  .alarm-wall-row {
    grid-template-columns: minmax(90px, 120px) minmax(180px, 1fr);
  }
}
@media (max-width: 980px) {
  .mode-hub,
  .scada-page-shell,
  .whatsapp-reports-page {
    padding-inline: clamp(12px, 3vw, 22px);
  }

  .ux-page-header {
    padding: clamp(16px, 4vw, 24px);
  }

  .ux-page-header h2 {
    font-size: clamp(1.45rem, 5.5vw, 2.65rem);
  }

  .ux-page-title-row {
    flex-basis: auto;
  }

  .ux-page-header-side {
    flex-basis: auto;
    align-items: stretch;
  }

  .ux-header-badges,
  .ux-page-actions,
  .scada-console-meta {
    justify-content: flex-start;
  }

  .ux-status-chip {
    font-size: .72rem;
    padding: 7px 9px;
  }

  .ux-tile-card {
    min-height: 205px;
  }

  .ux-tile-card p {
    -webkit-line-clamp: 4;
  }

  .scada-console-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  }

  .alarm-wall-row {
    grid-template-columns: 1fr;
  }

  .equipment-head em {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .ux-page-title-row {
    flex-direction: column;
  }

  .ux-page-icon,
  .ux-back-button {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .ux-tile-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .ux-tile-card {
    min-height: auto;
  }

  .metric-strip,
  .metric-strip.compact,
  .phase-board,
  .scada-card-grid,
  .tv-dashboard-page.v60-tv .tv-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .tv-dashboard-page.v60-tv header,
  .tv-bottom-strip {
    flex-direction: column;
  }
}
/* =====================================================================
   V63 font-size audit and readability layer
   Purpose: normalize text sizes across SCADA, TV, tablet and Web App pages.
   Imported last so it safely overrides older fixed 0.68rem/0.72rem labels.
   ===================================================================== */
:root {
  /* Minimums raised for tablet/control-room readability. Maximums are bounded
     so KPI values and chip text do not overlap on 1366px laptops or TVs. */
  --ux-font-xs: clamp(0.80rem, 0.74rem + 0.16vw, 0.95rem);
  --ux-font-sm: clamp(0.92rem, 0.84rem + 0.20vw, 1.08rem);
  --ux-font-md: clamp(1.02rem, 0.92rem + 0.30vw, 1.24rem);
  --ux-font-lg: clamp(1.20rem, 1.02rem + 0.62vw, 1.72rem);
  --ux-font-xl: clamp(1.70rem, 1.20rem + 1.55vw, 3.10rem);
  --ux-font-tv: clamp(2.40rem, 3.85vw, 5.10rem);
  --ux-font-kpi: clamp(1.45rem, 1.12rem + 0.95vw, 2.35rem);
  --ux-font-control-value: clamp(1.05rem, 0.88rem + 0.42vw, 1.55rem);
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body,
button,
input,
select,
textarea {
  font-size: var(--ux-font-sm);
  line-height: 1.45;
}
/* Headers: readable from distance, but capped to avoid wrapping over badges. */
.ux-page-header h2,
.mode-hub-hero h2,
.app-mode-hero h2 {
  font-size: clamp(1.72rem, 2.25vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em;
}
.ux-page-header p,
.mode-hub-hero p,
.app-mode-hero p {
  font-size: clamp(0.96rem, 0.84rem + 0.34vw, 1.24rem) !important;
  line-height: 1.45 !important;
}
.ux-eyebrow,
.ux-tile-kicker,
.ux-section-kicker {
  font-size: clamp(0.78rem, 0.72rem + 0.14vw, 0.92rem) !important;
  line-height: 1.18;
  letter-spacing: 0.11em;
}
.ux-section-head h3 {
  font-size: clamp(1.20rem, 1.02rem + 0.56vw, 1.85rem) !important;
  line-height: 1.12 !important;
}
.ux-section-head p {
  font-size: clamp(0.92rem, 0.82rem + 0.26vw, 1.12rem) !important;
  line-height: 1.45 !important;
}
/* Navigation cards: titles and descriptions should be consistent between
   SCADA and Web App mode, and should not shrink below 15px. */
.ux-tile-card h3,
.mode-card h3,
.app-mode-card h3 {
  font-size: clamp(1.08rem, 0.92rem + 0.42vw, 1.48rem) !important;
  line-height: 1.15 !important;
}
.ux-tile-card p,
.mode-card p,
.app-mode-card p {
  font-size: clamp(0.92rem, 0.82rem + 0.22vw, 1.06rem) !important;
  line-height: 1.42 !important;
}
.ux-tile-meta span,
.ux-tile-action,
.ux-page-actions button,
.ux-action-button,
.ux-back-button {
  font-size: clamp(0.82rem, 0.76rem + 0.14vw, 0.98rem) !important;
  line-height: 1.18;
}
/* Status chips: previous versions allowed 0.72rem chips, which were hard to
   read and could appear uneven between pages. */
.ux-status-chip,
.status-chip,
.source-badge,
.pill,
.status-pill,
.badge {
  font-size: clamp(0.82rem, 0.76rem + 0.16vw, 0.98rem) !important;
  line-height: 1.18 !important;
}
.ux-status-chip strong {
  font-size: clamp(0.84rem, 0.78rem + 0.16vw, 1rem) !important;
}
/* KPI cards: make values readable but capped. */
.ux-metric-card span,
.metric-card span,
.metric-strip span,
.tv-kpi span {
  font-size: clamp(0.80rem, 0.74rem + 0.16vw, 0.95rem) !important;
  line-height: 1.18 !important;
}
.ux-metric-card strong,
.metric-card strong {
  font-size: var(--ux-font-kpi) !important;
  line-height: 1.04 !important;
}
.metric-strip strong,
.metric-strip.compact strong,
.phase-card strong,
.sld-node strong {
  font-size: var(--ux-font-control-value) !important;
  line-height: 1.12 !important;
}
/* SCADA screens: keep operational values consistent and stop labels becoming
   tiny inside dense cards. */
.scada-page-shell,
.scada-hub,
.scada-equipment-card,
.phase-card,
.alarm-wall-row,
.sld-node,
.energy-flow-board,
.sld-canvas {
  font-size: var(--ux-font-sm);
}
.equipment-head strong,
.equipment-head em,
.equipment-note,
.alarm-wall-row strong,
.alarm-wall-row em,
.alarm-wall-row small,
.alarm-wall-row span {
  font-size: clamp(0.88rem, 0.80rem + 0.20vw, 1.08rem) !important;
  line-height: 1.22 !important;
}
.sld-node span,
.flow-line span {
  font-size: clamp(0.82rem, 0.76rem + 0.16vw, 0.98rem) !important;
  line-height: 1.16 !important;
}
/* Tables: readable on tablets and control-room PCs. */
.scada-table-wrap table,
.v60-table-wrap table,
.data-table,
table {
  font-size: clamp(0.88rem, 0.80rem + 0.20vw, 1.06rem) !important;
  line-height: 1.35 !important;
}
.scada-table-wrap th,
.scada-table-wrap td,
.v60-table-wrap th,
.v60-table-wrap td {
  font-size: inherit !important;
  line-height: 1.35 !important;
}
/* TV dashboard: large enough for display, capped so four KPI cards still fit. */
.tv-dashboard-page.v60-tv header h2 {
  font-size: clamp(2.05rem, 3.25vw, 4.65rem) !important;
  line-height: 1.02 !important;
}
.tv-dashboard-page.v60-tv .tv-kpi strong {
  font-size: var(--ux-font-tv) !important;
  line-height: 0.98 !important;
}
.tv-dashboard-page.v60-tv .tv-kpi span,
.tv-dashboard-page.v60-tv .tv-bottom-strip {
  font-size: clamp(1.00rem, 1.05vw, 1.55rem) !important;
  line-height: 1.22 !important;
}
/* Laptop/tablet caps: reduce titles slightly where horizontal space is limited. */
@media (max-width: 1280px) {
  :root {
    --ux-font-tv: clamp(2.10rem, 4.2vw, 4.40rem);
    --ux-font-kpi: clamp(1.35rem, 1.00rem + 0.90vw, 2.05rem);
    --ux-font-control-value: clamp(1.00rem, 0.84rem + 0.38vw, 1.35rem);
  }

  .ux-page-header h2,
  .mode-hub-hero h2,
  .app-mode-hero h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.65rem) !important;
  }

  .ux-tile-card h3,
  .mode-card h3,
  .app-mode-card h3 {
    font-size: clamp(1.02rem, 1.15vw, 1.30rem) !important;
  }
}
@media (max-width: 760px) {
  :root {
    --ux-font-xs: 0.82rem;
    --ux-font-sm: 0.94rem;
    --ux-font-md: 1rem;
    --ux-font-lg: 1.18rem;
    --ux-font-xl: 1.55rem;
    --ux-font-tv: clamp(2rem, 9vw, 3.25rem);
  }

  .ux-page-header h2,
  .mode-hub-hero h2,
  .app-mode-hero h2 {
    font-size: clamp(1.42rem, 6.2vw, 2.20rem) !important;
  }

  .ux-status-chip,
  .status-chip,
  .source-badge,
  .pill,
  .status-pill,
  .badge {
    font-size: 0.82rem !important;
  }

  .ux-tile-card p,
  .mode-card p,
  .app-mode-card p {
    -webkit-line-clamp: 4;
  }
}
@media (min-width: 1920px) {
  :root {
    --ux-font-xs: clamp(0.88rem, 0.45vw, 1.05rem);
    --ux-font-sm: clamp(1.00rem, 0.55vw, 1.20rem);
    --ux-font-md: clamp(1.12rem, 0.65vw, 1.38rem);
    --ux-font-lg: clamp(1.38rem, 0.95vw, 2rem);
    --ux-font-xl: clamp(2.10rem, 1.55vw, 3.50rem);
    --ux-font-kpi: clamp(1.85rem, 1.65vw, 3rem);
    --ux-font-control-value: clamp(1.28rem, 1vw, 1.95rem);
    --ux-font-tv: clamp(3.10rem, 3.80vw, 6.20rem);
  }

  .ux-page-header h2,
  .mode-hub-hero h2,
  .app-mode-hero h2 {
    font-size: clamp(2.20rem, 2.25vw, 4.10rem) !important;
  }

  .ux-tile-card h3,
  .mode-card h3,
  .app-mode-card h3 {
    font-size: clamp(1.28rem, 0.82vw, 1.85rem) !important;
  }
}
/* =====================================================================
   V64 dashboard button resize and density layer
   Purpose: make dashboard/menu buttons balanced on mobile, tablets, PCs
   and TV screens without text overlap or oversized cards.
   Imported last after V63 font scaling.
   ===================================================================== */
:root {
  --ux-button-min-touch: 46px;
  --ux-dashboard-tile-min: 176px;
  --ux-dashboard-tile-max: 244px;
  --ux-dashboard-tile-pad: clamp(15px, 1.15vw, 22px);
  --ux-dashboard-tile-gap: clamp(8px, 0.65vw, 12px);
  --ux-dashboard-icon-size: clamp(44px, 3vw, 54px);
}
/* Normal Web App dashboard/menu tiles: reduce height and keep a clean grid. */
.webapp-hub .ux-tile-grid,
.mode-hub.webapp-hub .ux-tile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: clamp(12px, 1vw, 18px);
}
.webapp-hub .ux-tile-card,
.mode-hub.webapp-hub .ux-tile-card,
.ux-tile-card.ux-webapp {
  min-height: clamp(var(--ux-dashboard-tile-min), 13.5vw, var(--ux-dashboard-tile-max));
  padding: var(--ux-dashboard-tile-pad);
  gap: var(--ux-dashboard-tile-gap);
  border-radius: clamp(20px, 1.5vw, 26px);
}
.webapp-hub .ux-tile-card h3,
.ux-tile-card.ux-webapp h3 {
  font-size: clamp(1.02rem, 0.86rem + 0.34vw, 1.28rem) !important;
  line-height: 1.12 !important;
}
.webapp-hub .ux-tile-card p,
.ux-tile-card.ux-webapp p {
  font-size: clamp(0.88rem, 0.80rem + 0.16vw, 0.99rem) !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2;
}
.webapp-hub .ux-tile-icon,
.ux-tile-card.ux-webapp .ux-tile-icon {
  width: var(--ux-dashboard-icon-size);
  height: var(--ux-dashboard-icon-size);
  border-radius: clamp(14px, 1.1vw, 18px);
  flex: 0 0 auto;
}
.webapp-hub .ux-tile-icon svg,
.ux-tile-card.ux-webapp .ux-tile-icon svg {
  width: clamp(21px, 1.7vw, 26px);
  height: clamp(21px, 1.7vw, 26px);
}
.webapp-hub .ux-tile-top,
.ux-tile-card.ux-webapp .ux-tile-top {
  gap: 10px;
  min-width: 0;
}
.webapp-hub .ux-status-chip,
.ux-tile-card.ux-webapp .ux-status-chip {
  max-width: 100%;
  padding: 7px 10px;
  font-size: clamp(0.78rem, 0.72rem + 0.12vw, 0.90rem) !important;
  white-space: normal;
}
.webapp-hub .ux-tile-meta,
.ux-tile-card.ux-webapp .ux-tile-meta {
  gap: 6px;
}
.webapp-hub .ux-tile-meta span,
.ux-tile-card.ux-webapp .ux-tile-meta span {
  padding: 5px 9px;
  font-size: clamp(0.74rem, 0.70rem + 0.10vw, 0.84rem) !important;
}
.webapp-hub .ux-tile-action,
.ux-tile-card.ux-webapp .ux-tile-action {
  padding-top: 2px;
  font-size: clamp(0.82rem, 0.76rem + 0.12vw, 0.94rem) !important;
}
/* SCADA screen-selection tiles: slightly shorter, but still control-room readable. */
.scada-hub .ux-tile-grid,
.mode-hub.scada-hub .ux-tile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(12px, 1.1vw, 20px);
}
.scada-hub .ux-tile-card,
.ux-tile-card.ux-scada {
  min-height: clamp(188px, 14.2vw, 260px);
  padding: clamp(16px, 1.2vw, 23px);
  gap: clamp(8px, 0.7vw, 12px);
}
.scada-hub .ux-tile-card h3,
.ux-tile-card.ux-scada h3 {
  font-size: clamp(1.05rem, 0.90rem + 0.35vw, 1.36rem) !important;
  line-height: 1.12 !important;
}
.scada-hub .ux-tile-card p,
.ux-tile-card.ux-scada p {
  font-size: clamp(0.90rem, 0.82rem + 0.16vw, 1.02rem) !important;
  line-height: 1.36 !important;
  -webkit-line-clamp: 2;
}
.scada-hub .ux-tile-icon,
.ux-tile-card.ux-scada .ux-tile-icon {
  width: clamp(46px, 3vw, 56px);
  height: clamp(46px, 3vw, 56px);
}
/* Main post-login mode cards: keep them big enough for touch, but no longer tall. */
.app-mode-grid {
  grid-template-columns: repeat(2, minmax(min(100%, 360px), 1fr));
  gap: clamp(14px, 1.35vw, 22px);
  align-items: stretch;
}
.app-mode-card {
  min-height: clamp(300px, 25vw, 360px) !important;
  padding: clamp(20px, 1.7vw, 28px) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  border-radius: clamp(24px, 2vw, 30px) !important;
}
.app-mode-card h3 {
  font-size: clamp(1.28rem, 1.10rem + 0.70vw, 1.90rem) !important;
  line-height: 1.08 !important;
}
.app-mode-card p {
  font-size: clamp(0.92rem, 0.84rem + 0.18vw, 1.05rem) !important;
  line-height: 1.42 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-mode-card ul {
  gap: 7px !important;
}
.app-mode-card li,
.app-mode-card > strong {
  font-size: clamp(0.88rem, 0.80rem + 0.16vw, 1rem) !important;
  line-height: 1.22 !important;
}
.app-mode-icon {
  width: clamp(50px, 3.4vw, 58px) !important;
  height: clamp(50px, 3.4vw, 58px) !important;
}
/* Dashboard quick buttons and report buttons: consistent touch target sizing. */
.webapp-quick-row button,
.app-mode-quick-actions button,
.quick-actions button,
.action-grid button,
.report-action-grid button,
.v60-action-grid button,
.plants-toolbar-v59 button,
.plant-actions-v59 button,
.tv-dashboard-page header button {
  min-height: var(--ux-button-min-touch);
  min-width: 0;
  padding: clamp(10px, 0.9vw, 14px) clamp(12px, 1vw, 16px) !important;
  border-radius: clamp(14px, 1vw, 18px) !important;
  gap: 8px;
}
.quick-actions,
.action-grid,
.webapp-quick-row,
.app-mode-quick-actions {
  gap: clamp(8px, 0.9vw, 12px) !important;
}
.action-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
}
.report-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}
.report-action-grid button,
.v60-action-grid button {
  min-height: clamp(138px, 11vw, 176px) !important;
}
.report-action-grid button strong {
  font-size: clamp(1rem, 0.88rem + 0.28vw, 1.22rem) !important;
  line-height: 1.16 !important;
}
.report-action-grid button span,
.report-action-grid button em {
  font-size: clamp(0.84rem, 0.78rem + 0.14vw, 0.96rem) !important;
  line-height: 1.28 !important;
}
/* Tablet: two readable columns, not oversized cards. */
@media (max-width: 1180px) {
  .webapp-hub .ux-tile-grid,
  .scada-hub .ux-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  }

  .webapp-hub .ux-tile-card,
  .scada-hub .ux-tile-card,
  .ux-tile-card.ux-webapp,
  .ux-tile-card.ux-scada {
    min-height: clamp(168px, 17vw, 220px);
  }
}
@media (max-width: 900px) {
  .app-mode-grid {
    grid-template-columns: 1fr;
  }

  .app-mode-card {
    min-height: auto !important;
  }

  .webapp-hub .ux-tile-grid,
  .scada-hub .ux-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Mobile: full-width buttons with enough tap area and wrapped status. */
@media (max-width: 640px) {
  :root {
    --ux-dashboard-tile-min: 158px;
    --ux-dashboard-tile-max: 210px;
    --ux-dashboard-tile-pad: 15px;
  }

  .webapp-hub .ux-tile-grid,
  .scada-hub .ux-tile-grid,
  .report-action-grid,
  .action-grid {
    grid-template-columns: 1fr !important;
  }

  .webapp-hub .ux-tile-card,
  .scada-hub .ux-tile-card,
  .ux-tile-card.ux-webapp,
  .ux-tile-card.ux-scada {
    min-height: auto !important;
  }

  .webapp-hub .ux-tile-top,
  .scada-hub .ux-tile-top {
    flex-direction: row;
    align-items: flex-start;
  }

  .webapp-hub .ux-tile-card p,
  .scada-hub .ux-tile-card p,
  .app-mode-card p {
    -webkit-line-clamp: 3;
  }

  .webapp-quick-row button,
  .app-mode-quick-actions button,
  .quick-actions button,
  .action-grid button,
  .report-action-grid button,
  .v60-action-grid button {
    width: 100%;
    justify-content: center;
  }
}
/* Large TVs/control-room PCs: more columns, but cap tile height to avoid giant buttons. */
@media (min-width: 1500px) {
  .webapp-hub .ux-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .scada-hub .ux-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  }

  .webapp-hub .ux-tile-card,
  .ux-tile-card.ux-webapp {
    min-height: clamp(190px, 12vw, 240px) !important;
  }

  .scada-hub .ux-tile-card,
  .ux-tile-card.ux-scada {
    min-height: clamp(205px, 12vw, 262px) !important;
  }
}
@media (min-width: 2100px) {
  .webapp-hub .ux-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  }

  .scada-hub .ux-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
  }

  .webapp-hub .ux-tile-card,
  .scada-hub .ux-tile-card,
  .ux-tile-card.ux-webapp,
  .ux-tile-card.ux-scada {
    min-height: clamp(215px, 10vw, 275px) !important;
  }
}