:root {
  color-scheme: light;
  --navy: #0d2c3c;
  --navy-2: #12394b;
  --teal: #0b8b7a;
  --teal-dark: #087467;
  --teal-soft: #e7f5f2;
  --accent-rgb: 11, 139, 122;
  --accent-light: #66d3c4;
  --accent-bright: #5ed5c5;
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --text: #15252c;
  --muted: #65777f;
  --line: #d8e1e5;
  --line-strong: #c5d1d6;
  --green: #198754;
  --amber: #e48a18;
  --red: #d94a4a;
  --blue: #2f7fd4;
  --cyan: #1b93aa;
  --shadow: 0 8px 24px rgba(18, 43, 54, .08);
  --radius: 10px;
}

:root[data-color-theme="servicetec"] {
  --navy: #2d171a;
  --navy-2: #451d22;
  --teal: #c51d28;
  --teal-dark: #99151e;
  --teal-soft: #fff0f1;
  --accent-rgb: 197, 29, 40;
  --accent-light: #ff7b82;
  --accent-bright: #ff666d;
}

:root[data-color-theme="blue"] {
  --navy: #15273a;
  --navy-2: #1c3954;
  --teal: #2f6fb2;
  --teal-dark: #245786;
  --teal-soft: #edf4fb;
  --accent-rgb: 47, 111, 178;
  --accent-light: #78a8d8;
  --accent-bright: #6ea4da;
}

:root[data-color-theme="graphite"] {
  --navy: #20262b;
  --navy-2: #303941;
  --teal: #586a75;
  --teal-dark: #3f4e57;
  --teal-soft: #eef1f3;
  --accent-rgb: 88, 106, 117;
  --accent-light: #9cabb3;
  --accent-bright: #aab7bd;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.4; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .22); outline-offset: 1px; }
h1, h2, p { margin: 0; }
h1 { font-size: 22px; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: 14px; line-height: 1.25; }

body:not(.is-authenticated) .server-app { display: none; }
body.is-authenticated .auth-screen { display: none; }
.auth-screen { width: 100vw; min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.12fr) minmax(420px, .88fr); background: var(--surface); }
.auth-visual { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 42px 54px; color: #fff; background:
  radial-gradient(circle at 82% 74%, rgba(44, 202, 178, .29), transparent 24%),
  radial-gradient(circle at 18% 18%, rgba(36, 135, 150, .32), transparent 31%),
  linear-gradient(145deg, #082938 0%, #0d4350 54%, #0a655f 100%); }
:root[data-color-theme="servicetec"] .auth-visual { background:
  radial-gradient(circle at 82% 74%, rgba(255, 71, 82, .28), transparent 24%),
  radial-gradient(circle at 18% 18%, rgba(169, 37, 49, .32), transparent 31%),
  linear-gradient(145deg, #241215 0%, #4b1c22 54%, #7f111a 100%); }
:root[data-color-theme="blue"] .auth-visual { background:
  radial-gradient(circle at 82% 74%, rgba(73, 146, 218, .29), transparent 24%),
  radial-gradient(circle at 18% 18%, rgba(54, 111, 167, .32), transparent 31%),
  linear-gradient(145deg, #12263a 0%, #1b4669 54%, #245f92 100%); }
:root[data-color-theme="graphite"] .auth-visual { background:
  radial-gradient(circle at 82% 74%, rgba(151, 169, 179, .22), transparent 24%),
  radial-gradient(circle at 18% 18%, rgba(99, 118, 129, .28), transparent 31%),
  linear-gradient(145deg, #1c2328 0%, #303b42 54%, #46545c 100%); }
.auth-visual::before { content: ""; width: 540px; height: 540px; position: absolute; right: -210px; bottom: -245px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255,255,255,.025), 0 0 0 128px rgba(255,255,255,.018); }
.auth-visual::after { content: ""; width: 100%; height: 42%; position: absolute; left: 0; bottom: 0; opacity: .23; background: repeating-linear-gradient(106deg, transparent 0 48px, rgba(255,255,255,.18) 49px 50px), repeating-linear-gradient(14deg, transparent 0 36px, rgba(255,255,255,.12) 37px 38px); clip-path: polygon(0 55%, 100% 10%, 100% 100%, 0 100%); }
.auth-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; }
.auth-brand .brand-mark { width: 42px; height: 42px; font-size: 25px; box-shadow: 0 9px 24px rgba(0,0,0,.16); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 18px; letter-spacing: -.03em; }
.auth-brand small { margin-top: 1px; color: var(--accent-light); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.auth-message { max-width: 630px; position: relative; z-index: 2; margin: auto 0; padding: 80px 0 120px; }
.auth-kicker { display: inline-flex; align-items: center; gap: 8px; color: #9ee7dd; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.auth-kicker i { width: 22px; height: 1px; background: #65d6c8; }
.auth-message h1 { margin-top: 20px; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -.055em; }
.auth-message h1 em { color: var(--accent-bright); font-style: normal; }
.auth-message p { max-width: 500px; margin-top: 24px; color: #c4dadd; font-size: 14px; line-height: 1.7; }
.auth-status { width: fit-content; position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(5,31,42,.34); backdrop-filter: blur(8px); }
.auth-status > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #70ded0; background: rgba(85,213,197,.12); font-size: 18px; }
.auth-status strong, .auth-status small { display: block; }
.auth-status strong { font-size: 10px; }
.auth-status small { margin-top: 2px; color: #9dbcc1; font-size: 8px; }
.solar-orbit { width: 230px; height: 230px; position: absolute; z-index: 1; right: 8%; bottom: 14%; display: grid; place-items: center; border: 1px solid rgba(115,224,208,.16); border-radius: 50%; }
.solar-orbit::before, .solar-orbit::after { content: ""; position: absolute; border: 1px solid rgba(115,224,208,.1); border-radius: 50%; }
.solar-orbit::before { inset: 31px; }
.solar-orbit::after { inset: 70px; }
.solar-orbit > i { color: rgba(112,222,208,.28); font-size: 66px; }
.solar-orbit span { width: 7px; height: 7px; position: absolute; border-radius: 50%; background: #66d8ca; box-shadow: 0 0 13px #55cbbc; }
.solar-orbit span:nth-child(2) { top: 23px; left: 44px; }
.solar-orbit span:nth-child(3) { right: 13px; bottom: 71px; }
.solar-orbit span:nth-child(4) { left: 64px; bottom: 48px; }
.auth-panel { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px clamp(34px, 6vw, 92px) 24px; }
.auth-form-wrap { width: 100%; max-width: 410px; margin: auto 0; }
.auth-mobile-brand { display: none; }
.auth-eyebrow { color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.auth-panel h2 { margin-top: 12px; font-size: 35px; line-height: 1.1; letter-spacing: -.045em; }
.auth-intro { margin-top: 11px; color: var(--muted); font-size: 12px; }
#loginForm { margin-top: 34px; transition: opacity .18s ease; }
body.auth-pending #loginForm { opacity: .5; pointer-events: none; }
.auth-field { display: grid; gap: 7px; margin-bottom: 17px; color: #31464e; font-size: 10px; font-weight: 700; }
.auth-field[hidden] { display: none !important; }
.auth-input { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 8px; color: #829198; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); }
.auth-input > i { font-size: 17px; }
.auth-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.auth-input input::placeholder { color: #9aa7ac; }
.auth-input button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #76878e; background: transparent; font-size: 17px; }
.auth-input button:hover { color: var(--teal-dark); background: var(--teal-soft); }
.auth-profile-field { margin-bottom: 14px; }
.auth-select { position: relative; }
.auth-select select { min-width: 0; flex: 1; appearance: none; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.auth-select-caret { color: #76878e; font-size: 14px !important; pointer-events: none; }
.auth-field-hint { margin-top: -1px; color: #839299; font-size: 8px; font-weight: 500; line-height: 1.35; }
.auth-options { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 20px; }
.auth-options label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; cursor: pointer; }
.auth-options input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.auth-error { min-height: 18px; margin: -8px 0 8px; color: #bd3232; font-size: 10px; }
.login-button { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; color: #fff; background: var(--teal); box-shadow: 0 8px 18px rgba(var(--accent-rgb),.19); font-size: 11px; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.login-button:hover { background: var(--teal-dark); }
.login-button:active { transform: translateY(1px); }
.login-button:disabled { cursor: wait; opacity: .7; }
.login-button.loading i { animation: spin .8s linear infinite; }
.auth-download { min-height: 50px; display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 8px; color: var(--teal-dark); background: var(--teal-soft); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.auth-download:hover { border-color: rgba(var(--accent-rgb),.42); background: #fff; transform: translateY(-1px); }
.auth-download > i:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--teal); font-size: 17px; }
.auth-download > i:last-child { font-size: 16px; }
.auth-download strong, .auth-download small { display: block; }
.auth-download strong { font-size: 10px; }
.auth-download small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.auth-help { display: flex; align-items: flex-start; gap: 7px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #e9eef0; color: #829198; font-size: 9px; line-height: 1.5; }
.auth-help i { margin-top: 1px; color: var(--teal); font-size: 14px; }
.auth-panel > footer { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: #9aa7ac; font-size: 8px; }

.server-app { display: grid; grid-template-columns: 184px minmax(0, 1fr); width: 100vw; height: 100vh; }
.sidebar { display: grid; grid-template-rows: 76px minmax(0,1fr) auto; overflow: hidden; color: #edf7f7; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #d9fffa; background: var(--teal); font-size: 22px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--accent-light); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.primary-nav { min-height: 0; overflow-y: auto; padding: 12px 8px; scrollbar-width: thin; }
.nav-item { width: 100%; min-height: 42px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; margin-bottom: 2px; padding: 0 10px; border: 0; border-radius: 7px; color: #e1edf0; background: transparent; text-align: left; }
.nav-item i { font-size: 18px; }
.nav-item span { font-size: 12px; font-weight: 600; }
.nav-item em { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.nav-item:hover { background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: var(--teal); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.nav-item[href] { text-decoration: none; }
.nav-download { margin-top: 9px; border-top: 1px solid rgba(255,255,255,.09); border-radius: 0 0 7px 7px; color: var(--accent-light); }
.nav-download:hover { color: #fff; }
.sidebar-footer { padding: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.collapse-button { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 6px; color: #dbe9ec; background: rgba(255,255,255,.06); font-size: 11px; }
.profile { width: 100%; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; padding: 11px 4px 3px; border: 0; color: inherit; background: transparent; text-align: left; }
.profile:hover { color: #fff; }
.avatar, .top-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.avatar { width: 35px; height: 35px; background: #405e6d; }
.profile strong, .profile small { display: block; }
.profile strong { font-size: 11px; }
.profile small { margin-top: 2px; color: #9fb3bb; font-size: 9px; }
.profile > i { color: #a8bcc3; }

.app-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 76px minmax(0,1fr) 32px; overflow: hidden; }
.topbar { min-width: 0; display: grid; grid-template-columns: minmax(180px, .9fr) 195px 175px minmax(260px, 1.2fr) auto 38px 38px 42px; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.view-heading p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.top-select, .global-search { min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.top-select select { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; font-weight: 600; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); }
.global-search kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--surface-soft); font-family: inherit; font-size: 9px; }
.top-date { display: grid; gap: 2px; justify-items: end; white-space: nowrap; }
.top-date strong { font-size: 11px; }
.top-date small { color: var(--muted); font-size: 9px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; position: relative; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); font-size: 17px; }
.icon-button:hover { color: var(--teal-dark); background: var(--teal-soft); }
.notification-button em { min-width: 16px; height: 16px; display: grid; place-items: center; position: absolute; top: -5px; right: -5px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--red); font-size: 8px; font-style: normal; }
.top-avatar { width: 34px; height: 34px; position: relative; border: 0; color: #fff; background: var(--teal-dark); font-size: 11px; }
.top-avatar > span { display: contents; }
.top-avatar i { width: 8px; height: 8px; position: absolute; right: -1px; bottom: 0; border: 2px solid #fff; border-radius: 50%; background: var(--green); }

.workspace { min-width: 0; min-height: 0; overflow: hidden; }
.view { display: none; width: 100%; height: 100%; min-height: 0; }
.view.active { display: grid; }
#operationsView { grid-template-rows: 87px minmax(0,1fr) 142px; }
#mapView { grid-template-rows: 87px minmax(0,1fr) 211px; }
.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-bottom: 1px solid var(--line); background: var(--surface); }
.metric-strip article { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-right: 1px solid var(--line); }
.metric-strip article:last-child { border-right: 0; }
.metric-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 18px; }
.metric-icon.teal { color: var(--teal-dark); background: var(--teal-soft); }
.metric-icon.blue { color: var(--blue); background: #eaf2fc; }
.metric-icon.cyan { color: var(--cyan); background: #e8f5f7; }
.metric-icon.green { color: var(--green); background: #ebf7f1; }
.metric-icon.amber { color: var(--amber); background: #fff4e3; }
.metric-strip small, .metric-strip strong, .metric-strip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-strip small { color: var(--muted); font-size: 9px; }
.metric-strip strong { margin: 2px 0; font-size: 17px; line-height: 1.2; }
.metric-strip strong em { font-size: 10px; font-style: normal; font-weight: 600; }
.metric-strip b { color: #87979d; font-size: 8px; font-weight: 500; }

.operations-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 292px; background: var(--surface); }
.matrix-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 68px minmax(0,1fr) 42px; border-right: 1px solid var(--line); }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.panel-toolbar > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.panel-toolbar h2 { grid-column: 2; font-size: 15px; }
.panel-toolbar p { grid-column: 2; color: var(--muted); font-size: 9px; }
.live-tag { grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 5px; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; font-weight: 700; }
.live-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.toolbar-actions { display: flex; gap: 8px; }
.toolbar-actions label, .secondary-button { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); }
.toolbar-actions select { border: 0; outline: 0; background: transparent; font-size: 10px; }
.secondary-button { font-size: 10px; font-weight: 600; }
.secondary-button:hover { background: var(--surface-soft); }
.table-wrap { min-height: 0; overflow: auto; }
.fleet-table { width: 100%; min-width: 970px; border-collapse: collapse; table-layout: fixed; }
.fleet-table th, .fleet-table td { height: 49px; padding: 6px 8px; border-bottom: 1px solid #e4eaed; text-align: left; vertical-align: middle; }
.fleet-table th { height: 36px; position: sticky; z-index: 2; top: 0; color: #41535a; background: #f7f9fa; font-size: 8px; font-weight: 700; white-space: nowrap; }
.fleet-table th:nth-child(1) { width: 180px; }
.fleet-table th:nth-child(2) { width: 52px; text-align: center; }
.fleet-table th:nth-child(3) { width: 143px; }
.fleet-table th:nth-child(4) { width: 78px; }
.fleet-table th:nth-child(5) { width: 118px; }
.fleet-table th:nth-child(6) { width: 105px; }
.fleet-table th:nth-child(7) { width: 92px; }
.fleet-table th:nth-child(8) { width: 67px; }
.fleet-table th:nth-child(9) { width: 70px; }
.fleet-table th:nth-child(10) { width: 91px; }
.fleet-table tbody tr { cursor: pointer; transition: background .12s ease; }
.fleet-table tbody tr:hover { background: #f5faf9; }
.fleet-table tbody tr.selected { background: #eef8f6; box-shadow: inset 3px 0 0 var(--teal); }
.plant-name { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 7px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; }
.plant-name > span:last-child { min-width: 0; }
.plant-name strong, .plant-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-name strong { font-size: 9px; }
.plant-name small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.plant-symbol { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #cde5e1; border-radius: 6px; color: var(--teal-dark); background: var(--teal-soft); font-size: 14px; }
.plant-cell { display: grid; grid-template-columns: 20px 1fr; column-gap: 4px; }
.plant-index { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 10px; }
.plant-cell strong, .plant-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-cell strong { font-size: 10px; }
.plant-cell small { color: var(--muted); font-size: 8px; }
.state-cell { text-align: center !important; }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.status-dot.healthy { background: var(--green); }
.status-dot.warning { background: var(--amber); }
.status-dot.critical { background: var(--red); }
.production-cell { display: grid; grid-template-columns: 42px minmax(44px,1fr); align-items: center; gap: 6px; }
.production-cell strong { font-size: 9px; }
.sparkline { width: 58px; height: 24px; display: block; }
.value-tone { font-size: 9px; font-weight: 700; }
.value-tone.good { color: #26724a; }
.value-tone.warn { color: #ad6710; }
.value-tone.bad { color: #b13e38; }
.instant-power { color: var(--teal-dark); font-size: 10px; font-weight: 700; white-space: nowrap; }
.telemetry { display: inline-flex; align-items: center; gap: 4px; color: #45575e; font-size: 8px; white-space: nowrap; }
.telemetry i { color: var(--teal); font-size: 12px; }
.anomaly-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; }
.anomaly-count.clear { color: #26724a; background: #e8f5ed; }
.anomaly-count.healthy { color: #26724a; background: #e8f5ed; }
.anomaly-count.warning { color: #ad6710; background: #fff4e3; }
.anomaly-count.critical { color: #b13e38; background: #fff0ef; }
.value-cell { font-size: 10px; font-weight: 600; }
.progress-cell { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 5px; }
.progress-cell span { height: 3px; overflow: hidden; border-radius: 3px; background: #e2e8ea; }
.progress-cell i { height: 100%; display: block; border-radius: inherit; background: var(--teal); }
.progress-cell.warning i { background: var(--amber); }
.progress-cell.critical i { background: var(--red); }
.progress-cell b { font-size: 9px; font-weight: 500; }
.telemetry-cell { color: #45575e; font-size: 9px; }
.anomaly-cell { display: flex; align-items: center; gap: 4px; font-size: 9px; }
.anomaly-cell i { font-size: 13px; }
.anomaly-cell.healthy i { color: var(--green); }
.anomaly-cell.warning i { color: var(--amber); }
.anomaly-cell.critical i { color: var(--red); }
.priority-chip { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border: 1px solid; border-radius: 5px; font-size: 8px; font-style: normal; font-weight: 600; }
.priority-chip.high { border-color: #f0c0bd; color: #b13e38; background: #fff0ef; }
.priority-chip.critical { border-color: #e89da3; color: #a8202e; background: #ffe9eb; }
.priority-chip.medium { border-color: #f3d3a6; color: #ad6710; background: #fff7ea; }
.priority-chip.low { border-color: #cbe3d4; color: #26724a; background: #edf7f1; }
.operator { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 8px; }
.operator i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #42535a; background: #dce4e7; font-style: normal; font-weight: 700; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: var(--muted); background: var(--surface); font-size: 9px; }
.table-footer span { display: flex; align-items: center; gap: 8px; }
.table-footer select { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.table-footer button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; color: var(--muted); background: transparent; }

.plant-inspector { min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px 39px minmax(0,1fr) 52px; background: #fbfcfc; }
.plant-inspector > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.plant-inspector > header small { color: var(--muted); font-size: 8px; }
.plant-inspector > header h2 { margin-top: 2px; font-size: 15px; }
.status-chip { padding: 4px 8px; border-radius: 5px; font-size: 8px; font-weight: 600; }
.status-chip.healthy { color: var(--green); background: #e8f5ed; }
.status-chip.warning { color: #9a5c0e; background: #fff4e3; }
.status-chip.critical { color: #ac3b3b; background: #fff0f0; }
.inspector-tabs { display: flex; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.inspector-tabs button { height: 39px; position: relative; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 8px; font-weight: 600; }
.inspector-tabs button.active { color: var(--teal-dark); }
.inspector-tabs button.active::after { content: ""; height: 2px; position: absolute; right: 0; bottom: -1px; left: 0; background: var(--teal); }
.inspector-content { min-height: 0; overflow-y: auto; padding: 9px; }
.inspector-content > section { margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.section-heading small, .section-heading strong { display: block; }
.section-heading small { color: var(--muted); font-size: 8px; }
.section-heading strong { margin-top: 3px; font-size: 11px; }
.section-heading strong b { font-size: 17px; }
.latest-reading { text-align: right; }
.teal-text { color: var(--teal-dark); }
.inspector-chart-grid { display: grid; gap: 10px; margin-top: 10px; }
.inspector-series { min-width: 0; padding-top: 7px; border-top: 1px solid #e7edef; }
.inspector-series header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.inspector-series header strong { color: #284149; font-size: 9px; }
.inspector-series header span { color: var(--teal-dark); font-size: 8px; font-weight: 700; }
.inspector-series.energy header span { color: #2f63c7; }
.inspector-series canvas { width: 100% !important; height: 108px !important; }
.plant-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.inspector-chart .plant-chart-toolbar { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e7edef; }
.chart-zoom-controls { max-width: 100%; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.chart-zoom-controls button { min-height: 25px; padding: 4px 7px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 7px; font-weight: 800; white-space: nowrap; }
.chart-zoom-controls button:hover:not(:disabled) { color: var(--teal-dark); background: var(--teal-soft); }
.chart-zoom-controls button:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.25); outline-offset: 1px; }
.chart-zoom-controls button:disabled { opacity: .35; cursor: default; }
.chart-zoom-controls > span { min-width: 78px; padding: 0 4px; color: var(--teal-dark); font-size: 7px; font-weight: 800; text-align: center; white-space: nowrap; }
.chart-zoom-help { color: var(--muted); font-size: 7px; font-weight: 600; white-space: nowrap; }
.inspector-chart .chart-zoom-controls { width: 100%; overflow-x: auto; }
.inspector-chart .chart-zoom-help { display: none; }
.inspector-series canvas, .plant-room-telemetry-chart canvas { cursor: crosshair; touch-action: none; }
.chart-select-active { cursor: crosshair !important; user-select: none !important; }
.chart-pan-active { cursor: grabbing !important; user-select: none !important; }
.priority-issue p { margin: 5px 0; color: var(--muted); font-size: 8px; }
.link-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: var(--teal-dark); background: transparent; font-size: 9px; font-weight: 600; }
.device-health-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 9px; }
.device-health-grid span { display: grid; justify-items: center; gap: 1px; border-right: 1px solid var(--line); }
.device-health-grid span:last-child { border-right: 0; }
.device-health-grid i { font-size: 15px; }
.device-health-grid .good { color: var(--green); }
.device-health-grid .warn { color: var(--amber); }
.device-health-grid .bad { color: var(--red); }
.muted-icon { color: #82939a; }
.device-health-grid b { font-size: 11px; }
.device-health-grid small { color: var(--muted); font-size: 7px; }
.primary-action { height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 10px; border: 0; border-radius: 7px; color: #fff; background: var(--teal); font-size: 10px; font-weight: 700; }
.primary-action:hover { background: var(--teal-dark); }
.inspector-list { padding: 0 !important; overflow: hidden; }
.inspector-list > header { display: flex; align-items: center; justify-content: space-between; padding: 11px; border-bottom: 1px solid var(--line); }
.inspector-list > header small, .inspector-list > header strong { display: block; }
.inspector-list > header small { color: var(--muted); font-size: 8px; }
.inspector-list > header strong { font-size: 11px; }
.inspector-list > button { width: 100%; display: grid; grid-template-columns: 26px minmax(0,1fr) 14px; align-items: center; gap: 7px; padding: 10px; border: 0; border-bottom: 1px solid #edf1f2; color: var(--text); background: #fff; text-align: left; }
.inspector-list > button:hover { background: var(--teal-soft); }
.inspector-list > button > i:first-child { color: var(--teal-dark); font-size: 17px; }
.inspector-list > button strong, .inspector-list > button small { display: block; }
.inspector-list > button strong { font-size: 9px; }
.inspector-list > button small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--green); text-align: center; }
.empty-state i { font-size: 28px; }
.empty-state strong { font-size: 11px; }
.empty-state small { color: var(--muted); font-size: 8px; }

.activity-strip { min-width: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); border-top: 1px solid var(--line); background: var(--surface); }
.activity-strip > header { display: flex; align-items: center; gap: 11px; padding: 18px; border-right: 1px solid var(--line); }
.activity-heading-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--teal-dark); background: var(--teal-soft); font-size: 19px; }
.activity-strip header h2 { font-size: 16px; }
.activity-strip header p { max-width: 110px; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.activity-items { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 10px; align-items: stretch; padding: 12px; overflow-x: auto; background: var(--surface-soft); }
.activity-items article { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 7px rgba(18,43,54,.04); }
.activity-items article.activity-critical, .activity-items article.activity-high { border-left-color: var(--red); }
.activity-card-meta, .activity-card-meta > span, .activity-card-plant { display: flex; align-items: center; }
.activity-card-meta { justify-content: space-between; gap: 10px; }
.activity-card-meta > span { gap: 7px; }
.activity-card-plant { min-width: 0; gap: 7px; }
.activity-card-plant i { color: var(--teal-dark); font-size: 15px; }
.activity-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.activity-dot.critical { background: var(--red); }
.activity-dot.warning { background: var(--amber); }
.activity-items time { color: var(--muted); font-size: 11px; font-weight: 600; }
.activity-items strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.activity-items article p { min-height: 32px; display: -webkit-box; overflow: hidden; color: #4f626a; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.activity-items .priority-chip { flex: 0 0 auto; padding: 3px 8px; font-size: 10px; }
.activity-items > .empty-state { min-height: 0; grid-column: 1 / -1; align-self: center; }

.map-layout { min-height: 0; display: grid; grid-template-columns: 220px minmax(0,1fr) 255px; border-bottom: 1px solid var(--line); background: var(--surface); }
.map-plant-list, .incident-queue { min-height: 0; display: grid; background: var(--surface); }
.map-plant-list { grid-template-rows: 47px 43px minmax(0,1fr) 28px; border-right: 1px solid var(--line); }
.map-plant-list header, .incident-queue header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); }
.map-plant-list header button { border: 0; color: var(--muted); background: transparent; }
.map-plant-list > label { display: flex; align-items: center; gap: 7px; margin: 7px 10px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.map-plant-list > label input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 9px; }
#mapPlantItems { min-height: 0; overflow-y: auto; }
.map-plant-item, .map-plant-card { width: 100%; min-height: 48px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; padding: 5px 10px; border: 0; border-bottom: 1px solid #e9edef; background: transparent; color: var(--text); text-align: left; }
.map-plant-item:hover, .map-plant-item.selected, .map-plant-card:hover, .map-plant-card.selected { background: var(--teal-soft); }
.map-plant-item strong, .map-plant-item small, .map-plant-card strong, .map-plant-card small { display: block; }
.map-plant-item strong, .map-plant-card strong { font-size: 9px; }
.map-plant-item small, .map-plant-card small { color: var(--muted); font-size: 7px; }
.map-plant-item b, .map-plant-card b { color: var(--teal-dark); font-size: 9px; }
.map-plant-list footer { display: flex; align-items: center; gap: 5px; padding: 0 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 6px; }
.map-plant-list footer .status-dot { width: 5px; height: 5px; margin-left: 3px; }
.map-stage { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #e9f0f2; }
#fleetMap { width: 100%; height: 100%; min-height: 350px; }
.leaflet-control-attribution { font-size: 7px !important; }
.fleet-marker-wrap { border: 0 !important; background: transparent !important; }
.fleet-marker { width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--teal); box-shadow: 0 3px 9px rgba(15,45,56,.24); font-size: 14px; }
.fleet-marker.small { transform: scale(.76); }
.fleet-marker.medium { transform: scale(.9); }
.fleet-marker.large { transform: scale(1.08); }
.fleet-marker.warning { background: var(--amber); }
.fleet-marker.critical { background: var(--red); }
.map-legend { display: grid; gap: 3px; position: absolute; z-index: 500; bottom: 12px; left: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); font-size: 7px; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { display: inline-block; border-radius: 50%; background: var(--teal); }
.legend-dot.small { width: 5px; height: 5px; }
.legend-dot.medium { width: 8px; height: 8px; }
.legend-dot.large { width: 11px; height: 11px; }
.map-popover { width: 210px; position: absolute; z-index: 500; right: 12px; bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.map-popover header { display: flex; align-items: center; justify-content: space-between; }
.map-popover header small, .map-popover header strong { display: block; }
.map-popover header small { color: var(--muted); font-size: 6px; }
.map-popover header strong { margin-top: 2px; font-size: 11px; }
.map-popover p { margin: 3px 0 7px; color: var(--muted); font-size: 7px; }
.map-popover dl { margin: 0; }
.map-popover dl div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #edf1f2; font-size: 7px; }
.map-popover dd { margin: 0; color: var(--teal-dark); font-weight: 700; }
.map-popover button { width: 100%; margin-top: 8px; padding: 7px; border: 0; border-radius: 5px; color: #fff; background: var(--teal); font-size: 8px; font-weight: 700; }
.incident-queue { grid-template-rows: 47px 43px minmax(0,1fr) 30px; border-left: 1px solid var(--line); }
.incident-queue header span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #a93737; background: #ffe9e9; font-size: 8px; font-weight: 700; }
.incident-queue > label { display: flex; align-items: center; justify-content: space-between; margin: 7px 10px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 8px; }
.incident-queue > label select { border: 0; outline: 0; background: transparent; font-size: 8px; }
#mapIncidents { min-height: 0; overflow-y: auto; }
.incident-item, #mapIncidents button { width: 100%; display: grid; grid-template-columns: 10px 1fr auto; align-items: start; gap: 7px; padding: 10px; border: 0; border-bottom: 1px solid #e7edef; color: var(--text); background: #fff; text-align: left; }
#mapIncidents button:hover { background: #fafcfc; }
.incident-level { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--amber); }
.incident-level.critical, .incident-level.high { background: var(--red); }
.incident-level.medium { background: var(--amber); }
#mapIncidents button strong, #mapIncidents button small { display: block; }
#mapIncidents button strong { font-size: 8px; }
#mapIncidents button small { margin-top: 2px; color: var(--muted); font-size: 7px; }
#mapIncidents button em { color: var(--muted); font-size: 7px; font-style: normal; }
.incident-item > i { margin-top: 1px; color: var(--amber); font-size: 15px; }
.incident-item.critical > i { color: var(--red); }
.incident-item strong, .incident-item small { display: block; }
.incident-item strong { font-size: 9px; }
.incident-item small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.incident-item em { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #4d5f66; background: #eef2f3; font-size: 7px; font-style: normal; font-weight: 700; }
.incident-queue footer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 9px; color: var(--muted); font-size: 7px; }
.incident-queue footer button { border: 0; color: var(--muted); background: transparent; }

.map-analytics { display: grid; grid-template-columns: 1.45fr .8fr .75fr; gap: 8px; padding: 8px; background: var(--bg); }
.map-analytics > article { min-width: 0; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.map-analytics header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.map-analytics canvas { width: 100% !important; height: 145px !important; }
.segmented { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); }
.segmented button { padding: 3px 7px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 7px; }
.segmented button.active { color: var(--teal-dark); background: #fff; box-shadow: 0 1px 2px rgba(20,45,54,.08); }
.top-plants ol { margin: 0; padding: 0; list-style: none; }
.top-plants li { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; padding: 7px 0; border-bottom: 1px solid #edf1f2; font-size: 8px; }
.top-plants li b { color: var(--teal-dark); }
.top-plants li > span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); font-size: 7px; }
.top-plants li button { min-width: 0; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; }
.top-plants li button strong, .top-plants li button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-plants li button strong { font-size: 8px; }
.top-plants li button small { color: var(--muted); font-size: 7px; }

.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
#teamView { grid-template-rows: 87px minmax(0,1fr); padding: 0 10px 10px; background: var(--bg); }
.team-summary, .catalog-summary, .device-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 -10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.team-summary article, .catalog-summary article, .device-summary article { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-right: 1px solid var(--line); }
.team-summary article:last-child, .catalog-summary article:last-child, .device-summary article:last-child { border-right: 0; }
.team-summary small, .team-summary strong, .team-summary b, .catalog-summary small, .catalog-summary strong, .catalog-summary b, .device-summary small, .device-summary strong, .device-summary b { display: block; }
.team-summary small, .catalog-summary small, .device-summary small { color: var(--muted); font-size: 9px; }
.team-summary strong, .catalog-summary strong, .device-summary strong { margin: 1px 0; font-size: 19px; }
.catalog-summary strong em { font-size: 9px; font-style: normal; }
.team-summary b, .catalog-summary b, .device-summary b { color: #87979d; font-size: 8px; font-weight: 500; }
.team-panel { min-height: 0; display: grid; grid-template-rows: 72px 52px minmax(0,1fr) 40px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(18,43,54,.03); }
.team-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.team-toolbar h2 { margin-top: 1px; font-size: 16px; }
.team-toolbar p { margin-top: 2px; color: var(--muted); font-size: 9px; }
.team-kicker { color: var(--teal); font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.team-add-button { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 7px; color: #fff; background: var(--teal); box-shadow: 0 5px 12px rgba(var(--accent-rgb),.16); font-size: 10px; font-weight: 700; }
.team-add-button:hover { background: var(--teal-dark); }
.team-filters { display: grid; grid-template-columns: minmax(220px,1fr) auto 175px; align-items: center; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.team-search, .team-role-filter { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; }
.team-search { max-width: 360px; }
.team-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 9px; }
.team-role-filter select { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 9px; }
.team-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #f4f7f8; }
.team-tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 8px; font-weight: 600; }
.team-tabs button span { margin-left: 3px; padding: 2px 5px; border-radius: 8px; background: #e2e8ea; font-size: 7px; }
.team-tabs button.active { color: var(--teal-dark); background: #fff; box-shadow: 0 1px 3px rgba(20,45,54,.1); }
.team-tabs button.active span { color: #fff; background: var(--teal); }
.team-table-wrap { min-height: 0; position: relative; overflow: auto; }
.team-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.team-table th, .team-table td { height: 55px; padding: 7px 12px; border-bottom: 1px solid #e7edef; text-align: left; vertical-align: middle; }
.team-table th { height: 36px; position: sticky; z-index: 2; top: 0; color: #4c5d64; background: #f7f9fa; font-size: 8px; font-weight: 700; white-space: nowrap; }
.team-table th:first-child { width: 25%; }
.team-table th:last-child { width: 76px; }
.team-table tbody tr:hover { background: #f8fbfb; }
.member-identity { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; }
.member-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--navy-2); font-size: 9px; font-weight: 700; }
.member-avatar.installer { background: #397f91; }
.member-avatar.client { background: #57865e; }
.member-identity strong, .member-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-identity strong { font-size: 9px; }
.member-identity small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.member-type, .member-role, .member-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.member-type.team { color: #345c87; background: #edf3fa; }
.member-type.installer { color: #256b7c; background: #e9f6f8; }
.member-type.client { color: #397345; background: #edf7ef; }
.member-role { color: #4c5c63; background: #f0f3f4; }
.member-role.owner, .member-role.admin { color: #6e5219; background: #fff5df; }
.member-state { color: var(--green); background: #e9f6ee; }
.member-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.member-state.archived { color: #7f8d92; background: #eef1f2; }
.member-organization strong, .member-organization small { display: block; }
.member-organization strong { font-size: 8px; }
.member-organization small, .member-last-login { margin-top: 2px; color: var(--muted); font-size: 7px; }
.member-actions { display: flex; justify-content: flex-end; gap: 3px; }
.member-actions button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; }
.member-actions button:hover { border-color: var(--line); color: var(--teal-dark); background: var(--teal-soft); }
.member-actions button.remove:hover { color: var(--red); background: #fff0f0; }
.member-actions button:disabled { opacity: .25; pointer-events: none; }
.team-empty, .team-loading { min-height: 250px; place-content: center; justify-items: center; gap: 5px; color: var(--muted); text-align: center; }
.team-empty:not([hidden]), .team-loading:not([hidden]) { display: grid; }
.team-empty i { color: #9eafb5; font-size: 34px; }
.team-empty strong { color: var(--text); font-size: 11px; }
.team-empty small, .team-loading { font-size: 8px; }
.team-loading i { color: var(--teal); font-size: 20px; }
.team-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: var(--muted); background: #fbfcfc; font-size: 8px; }
.team-footer span { display: flex; align-items: center; gap: 5px; }
.team-footer i { color: var(--teal); font-size: 13px; }

#devicesView { grid-template-rows: 76px minmax(0,1fr); padding: 0 10px 10px; background: var(--bg); }
.device-workspace { min-height: 0; display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 10px; padding-top: 10px; }
.device-plant-panel, .device-main-panel { min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(18,43,54,.03); }
.device-plant-panel { display: grid; grid-template-rows: 58px 47px minmax(0,1fr) 40px; }
.device-plant-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.device-plant-panel > header small { display: block; color: var(--teal); font-size: 6px; font-weight: 700; letter-spacing: .13em; }
.device-plant-panel > header h2 { margin-top: 2px; font-size: 14px; }
.device-plant-panel > header em { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 12px; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; font-style: normal; font-weight: 700; }
.device-plant-panel > label { height: 32px; display: flex; align-items: center; gap: 6px; margin: 7px 9px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.device-plant-panel > label input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 8px; }
#devicePlantList { min-height: 0; overflow-y: auto; padding: 4px 7px; }
#devicePlantList button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; margin-bottom: 4px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; color: var(--text); background: transparent; text-align: left; }
#devicePlantList button:hover { background: #f5f8f8; }
#devicePlantList button.active { border-color: #bfe0da; background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
#devicePlantList button > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 6px; color: var(--teal-dark); background: #e8f5f3; font-size: 15px; }
#devicePlantList strong, #devicePlantList small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#devicePlantList strong { font-size: 8px; }
#devicePlantList small { margin-top: 2px; color: var(--muted); font-size: 7px; }
#devicePlantList b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; color: #53666d; background: #edf1f2; font-size: 7px; }
.device-plant-panel > footer { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-top: 1px solid var(--line); color: var(--muted); background: #fbfcfc; font-size: 7px; line-height: 1.35; }
.device-plant-panel > footer i { flex: 0 0 auto; color: var(--teal); font-size: 13px; }
.device-main-panel { display: grid; grid-template-rows: 69px 126px minmax(0,1fr); }
.device-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.device-toolbar h2 { margin-top: 1px; font-size: 15px; }
.device-toolbar p { margin-top: 2px; color: var(--muted); font-size: 8px; }
.activation-token-panel { min-height: 0; display: grid; grid-template-rows: 42px minmax(0,1fr); border-bottom: 1px solid var(--line); background: #fbfcfc; }
.activation-token-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 5px; }
.activation-token-panel > header > span { display: flex; align-items: center; gap: 8px; }
.activation-token-panel > header > span > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: #375f8e; background: #edf3fa; font-size: 14px; }
.activation-token-panel h3 { font-size: 9px; }
.activation-token-panel p { margin-top: 1px; color: var(--muted); font-size: 7px; }
.activation-token-panel > header button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; }
#activationTokenRows { min-width: 0; display: flex; gap: 7px; overflow-x: auto; padding: 3px 12px 9px; }
.activation-token-card { min-width: 215px; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.activation-token-card strong, .activation-token-card small { display: block; }
.activation-token-card strong { max-width: 160px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.activation-token-card small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.activation-token-card .token-state { align-self: start; padding: 3px 5px; border-radius: 4px; color: #28704c; background: #eaf6ef; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.activation-token-card .token-state.used { color: #51646b; background: #edf1f2; }
.activation-token-card .token-state.expired { color: #9a5c0e; background: #fff4e3; }
.activation-token-card .token-state.revoked { color: #8f3732; background: #fff0ef; }
.activation-token-card .token-state.legacy { color: #9a5c0e; background: #fff4e3; }
.activation-token-card button { grid-column: 2; width: 24px; height: 24px; display: grid; place-items: center; align-self: end; border: 0; border-radius: 5px; color: var(--muted); background: transparent; }
.activation-token-card button:hover { color: var(--red); background: #fff0f0; }
.activation-token-empty { min-width: 100%; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 7px; }
.activation-token-empty i { color: #8da0a7; font-size: 16px; }
.device-table-panel { min-height: 0; display: grid; grid-template-rows: 48px minmax(0,1fr) 39px; }
.device-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border-bottom: 1px solid var(--line); }
.device-filters .team-search { width: min(420px,55%); max-width: none; }
.device-filters .team-role-filter { width: 165px; }
.device-table-wrap { min-height: 0; position: relative; overflow: auto; }
.device-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.device-table th, .device-table td { height: 53px; padding: 7px 10px; border-bottom: 1px solid #e7edef; text-align: left; vertical-align: middle; }
.device-table th { height: 34px; position: sticky; z-index: 2; top: 0; color: #4c5d64; background: #f7f9fa; font-size: 8px; font-weight: 700; white-space: nowrap; }
.device-table th:first-child { width: 23%; }
.device-table th:last-child { width: 50px; }
.device-table tbody tr:hover { background: #f8fbfb; }
.device-identity { display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 8px; }
.device-identity > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); font-size: 16px; }
.device-identity strong, .device-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-identity strong { font-size: 8px; }
.device-identity small, .device-meta { margin-top: 2px; color: var(--muted); font-size: 7px; }
.device-hardware { color: #40545c; font-family: ui-monospace, monospace; font-size: 7px; }
.device-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 5px; font-size: 7px; font-weight: 700; }
.device-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.device-status.online { color: #28704c; background: #eaf6ef; }
.device-status.offline { color: #a16416; background: #fff4e3; }
.device-status.disabled { color: #77868c; background: #edf1f2; }
.device-actions button { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; }
.device-actions button:hover { border-color: #f0caca; color: var(--red); background: #fff0f0; }
.device-actions button:disabled { opacity: .25; pointer-events: none; }
.activation-dialog { width: min(620px,calc(100vw - 30px)); }
.token-security-note { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 10px 11px; border: 1px solid #f0ddb7; border-radius: 7px; color: #8e5d19; background: #fff9ed; }
.token-security-note > i { font-size: 20px; }
.token-security-note strong, .token-security-note small { display: block; }
.token-security-note strong { font-size: 8px; }
.token-security-note small { margin-top: 2px; color: #987747; font-size: 7px; }
.generated-token { padding: 8px 0 4px; text-align: center; }
.generated-token-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: var(--green); background: #eaf6ef; font-size: 24px; }
.generated-token h3 { margin-top: 9px; font-size: 14px; }
.generated-token > p { margin-top: 4px; color: var(--muted); font-size: 8px; }
.generated-token-value { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; margin-top: 14px; padding: 7px; border: 1px solid #bfe0da; border-radius: 8px; background: #f1faf8; }
.generated-token-value code { min-width: 0; overflow: hidden; color: #164d46; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.generated-token-value button { height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 6px; color: #fff; background: var(--teal); font-size: 8px; font-weight: 700; }
.generated-token dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; text-align: left; }
.generated-token dl div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; }
.generated-token dt { color: var(--muted); font-size: 6px; font-weight: 700; text-transform: uppercase; }
.generated-token dd { margin: 3px 0 0; font-size: 8px; font-weight: 700; }

#settingsView { min-height: 0; overflow: hidden; background: var(--bg); }
.settings-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: 88px minmax(0,1fr); overflow: hidden; }
.settings-hero { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.settings-hero-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); font-size: 23px; }
.settings-eyebrow { color: var(--teal); font-size: 7px; font-weight: 700; letter-spacing: .14em; }
.settings-hero h2 { margin-top: 2px; font-size: 17px; letter-spacing: -.02em; }
.settings-hero p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.settings-state { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #cce4dc; border-radius: 7px; color: #28674c; background: #eff8f4; }
.settings-state > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(55,150,99,.12); }
.settings-state strong, .settings-state small { display: block; white-space: nowrap; }
.settings-state strong { font-size: 8px; }
.settings-state small { margin-top: 2px; color: #648375; font-size: 7px; }
.settings-layout { min-height: 0; display: grid; grid-template-columns: 210px minmax(0,1fr); overflow: hidden; }
.settings-nav { min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 17px 11px; border-right: 1px solid var(--line); background: #f8fafb; }
.settings-nav > span { margin: 0 8px 5px; color: #839299; font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.settings-nav > button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 7px; padding: 6px 9px; border: 0; border-radius: 7px; color: #4e626a; background: transparent; text-align: left; }
.settings-nav > button > i { font-size: 18px; }
.settings-nav > button strong, .settings-nav > button small { display: block; }
.settings-nav > button strong { font-size: 9px; }
.settings-nav > button small { margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 400; }
.settings-nav > button:hover { background: #edf3f4; }
.settings-nav > button.active { color: var(--teal-dark); background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.settings-nav-note { display: flex; align-items: flex-start; gap: 7px; margin-top: auto; padding: 10px; border: 1px solid #dfe8ea; border-radius: 7px; color: #63777e; background: #fff; }
.settings-nav-note i { flex: 0 0 auto; color: var(--teal); font-size: 14px; }
.settings-nav-note p { font-size: 7px; line-height: 1.5; }
.settings-form { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; }
.settings-form-content { min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; overflow-y: auto; padding: 13px 16px 10px; scroll-behavior: smooth; }
.settings-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(18,43,54,.03); }
.settings-card > header { min-height: 60px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid var(--line); }
.settings-card > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); font-size: 18px; }
.settings-card > header h3 { font-size: 11px; }
.settings-card > header p { margin-top: 3px; color: var(--muted); font-size: 8px; }
.settings-card > header em { padding: 4px 7px; border-radius: 5px; color: #28704c; background: #eaf6ef; font-size: 7px; font-style: normal; font-weight: 700; }
.settings-card > header em.warning { color: #9a5c0e; background: #fff4e3; }
.settings-card > header em.error { color: #ab3c3c; background: #fff0f0; }
.settings-card-body { padding: 14px; }
.appearance-applied-badge { display: inline-flex; align-items: center; gap: 4px; }
.theme-picker { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.theme-picker legend { margin-bottom: 7px; color: #34474f; font-size: 8px; font-weight: 700; }
.theme-picker label { min-width: 0; position: relative; cursor: pointer; }
.theme-picker input { position: absolute; opacity: 0; pointer-events: none; }
.theme-picker label > span { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.theme-picker label:hover > span { border-color: var(--line-strong); background: var(--surface-soft); }
.theme-picker input:checked + span { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal), 0 0 0 2px rgba(var(--accent-rgb),.07); }
.theme-picker input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.theme-picker label > span > span { min-width: 0; }
.theme-picker strong, .theme-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker strong { color: var(--text); font-size: 9px; }
.theme-picker small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.theme-picker u { grid-column: 1 / -1; width: fit-content; margin: -4px 0 0 47px; padding: 2px 5px; border-radius: 999px; color: #9a151e; background: #ffe2e4; font-size: 6px; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.theme-preview { width: 38px; height: 38px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 9px; box-shadow: 0 0 0 1px rgba(20,35,42,.12); }
.theme-preview::before, .theme-preview::after, .theme-preview b { content: ""; position: absolute; border-radius: 50%; }
.theme-preview::before { width: 18px; height: 18px; left: -5px; bottom: -5px; background: rgba(255,255,255,.25); }
.theme-preview::after { width: 6px; height: 6px; right: 7px; top: 7px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.theme-preview b { width: 22px; height: 4px; right: -3px; bottom: 7px; background: rgba(255,255,255,.55); transform: rotate(-28deg); }
.theme-preview.servicetec { background: linear-gradient(145deg,#ff0000,#99151e); }
.theme-preview.solar { background: linear-gradient(145deg,#11a590,#087467); }
.theme-preview.blue { background: linear-gradient(145deg,#4e8dcc,#245786); }
.theme-preview.graphite { background: linear-gradient(145deg,#7b8a93,#3f4e57); }
.theme-picker-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding: 9px 10px; border: 1px solid #e1e7e9; border-radius: 7px; color: var(--muted); background: #fafcfc; font-size: 7px; line-height: 1.5; }
.theme-picker-hint i { flex: 0 0 auto; color: var(--teal); font-size: 14px; }
.theme-picker-hint b { color: #d40000; }
.database-provider-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 0 0 14px; padding: 0; border: 0; }
.database-provider-picker legend { margin-bottom: 7px; color: #34474f; font-size: 8px; font-weight: 700; }
.database-provider-picker label { min-width: 0; position: relative; cursor: pointer; }
.database-provider-picker input { position: absolute; opacity: 0; pointer-events: none; }
.database-provider-picker label > span { min-height: 58px; display: grid; grid-template-columns: 32px 1fr 15px; align-content: center; column-gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.database-provider-picker label > span > i { grid-column: 1; grid-row: 1 / span 2; align-self: center; color: #7d8e95; font-size: 22px; }
.database-provider-picker b, .database-provider-picker small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.database-provider-picker b { grid-column: 2; grid-row: 1; align-self: end; font-size: 9px; }
.database-provider-picker small { grid-column: 2; grid-row: 2; align-self: start; color: var(--muted); font-size: 7px; }
.database-provider-picker u { width: 14px; height: 14px; grid-column: 3; grid-row: 1 / span 2; align-self: center; position: relative; border: 1px solid #b8c5ca; border-radius: 50%; text-decoration: none; }
.database-provider-picker input:checked + span { border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.07); }
.database-provider-picker input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.database-provider-picker input:checked + span > i { color: var(--teal-dark); }
.database-provider-picker input:checked + span u { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px #fff; }
.database-provider-picker label.unavailable { cursor: not-allowed; }
.database-provider-picker label.unavailable > span { opacity: .55; background: #f7f9f9; }
.settings-field-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(125px,.65fr); gap: 12px 14px; }
.settings-field-grid > label { min-width: 0; display: grid; gap: 5px; align-content: start; color: #34474f; font-size: 8px; font-weight: 700; }
.settings-field-grid > label > span:first-child em { color: var(--red); font-style: normal; }
.settings-field-grid > label > small { margin-top: -2px; color: var(--muted); font-size: 7px; font-weight: 400; }
.settings-input { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: #7b8c93; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.settings-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.settings-input.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(193,67,61,.07); }
.settings-input > i { flex: 0 0 auto; font-size: 15px; }
.settings-input input, .settings-input select { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 9px; }
.settings-input input::placeholder { color: #9aa8ad; }
.settings-input button { width: 28px; height: 28px; display: grid; place-items: center; margin-right: -6px; border: 0; border-radius: 5px; color: #76888e; background: transparent; font-size: 14px; }
.settings-input button:hover { color: var(--teal-dark); background: var(--teal-soft); }
.settings-select select { appearance: none; }
.settings-select > i:last-child { font-size: 12px; pointer-events: none; }
.settings-switch-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: #fafcfc; }
.settings-switch-row > span { display: flex; align-items: center; gap: 9px; }
.settings-switch-row > span > i { color: var(--teal); font-size: 18px; }
.settings-switch-row strong, .settings-switch-row small { display: block; }
.settings-switch-row strong { font-size: 8px; }
.settings-switch-row small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.switch-control { position: relative; cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; }
.switch-control > span { width: 32px; height: 18px; display: block; position: relative; border-radius: 10px; background: #bdc9cd; transition: background .15s ease; }
.switch-control > span::after { content: ""; width: 14px; height: 14px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s ease; }
.switch-control input:checked + span { background: var(--teal); }
.switch-control input:checked + span::after { transform: translateX(14px); }
.switch-control input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.settings-paths .settings-field-grid { grid-template-columns: 1fr 1fr; }
.database-transfer-route { display: grid; grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); align-items: stretch; gap: 8px; }
.database-transfer-route > section { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafcfc; }
.database-transfer-route > section > i { width: 36px; height: 36px; display: grid; grid-row: 2; place-items: center; border-radius: 8px; color: var(--teal-dark); background: var(--teal-soft); font-size: 19px; }
.database-transfer-route > section > div { min-width: 0; grid-row: 2; }
.database-transfer-route strong, .database-transfer-route small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.database-transfer-route strong { font-size: 9px; }
.database-transfer-route small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.database-transfer-route section > em { grid-row: 2; padding: 4px 6px; border-radius: 5px; color: #28704c; background: #eaf6ef; font-size: 7px; font-style: normal; font-weight: 700; white-space: nowrap; }
.transfer-step { grid-column: 1 / -1; color: var(--teal); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.transfer-arrow { display: grid; place-items: center; color: var(--teal); font-size: 19px; }
.transfer-destination-editor { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafcfc; }
.transfer-destination-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.transfer-destination-heading > span { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); font-size: 15px; }
.transfer-destination-heading strong, .transfer-destination-heading small { display: block; }
.transfer-destination-heading strong { font-size: 9px; }
.transfer-destination-heading small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.transfer-provider-picker { margin-bottom: 12px; }
.transfer-destination-fields { grid-template-columns: minmax(0,1.35fr) minmax(125px,.65fr); }
.transfer-provider-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 9px; border: 1px solid #dfe8ea; border-radius: 6px; color: var(--muted); background: #fff; font-size: 7px; line-height: 1.45; }
.transfer-provider-note i { flex: 0 0 auto; color: var(--teal); font-size: 14px; }
.transfer-provider-note.warning { color: #80540c; border-color: #efd9b2; background: #fff8eb; }
.transfer-provider-note.warning i { color: var(--amber); }
.database-transfer-safety { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.database-transfer-safety > span { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #dfe8ea; border-radius: 7px; }
.database-transfer-safety > span > i { flex: 0 0 auto; color: var(--teal); font-size: 18px; }
.database-transfer-safety strong, .database-transfer-safety small { display: block; }
.database-transfer-safety strong { font-size: 8px; }
.database-transfer-safety small { margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.database-transfer-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.database-transfer-footer > span { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.database-transfer-footer > span > i { flex: 0 0 auto; color: var(--teal); font-size: 18px; }
.database-transfer-footer strong, .database-transfer-footer small { display: block; }
.database-transfer-footer strong { color: var(--text); font-size: 8px; }
.database-transfer-footer small { margin-top: 2px; font-size: 7px; }
.database-transfer-footer > div { display: flex; gap: 7px; }
.database-transfer-footer button { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 6px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.database-transfer-footer button:disabled { opacity: .5; cursor: not-allowed; }
.database-transfer-dialog { width: min(450px,calc(100vw - 30px)); }
.database-transfer-dialog form > label { display: flex; align-items: flex-start; gap: 8px; margin: -5px 0 18px; color: var(--text); font-size: 8px; line-height: 1.45; text-align: left; }
.database-transfer-dialog form > label input { flex: 0 0 auto; margin-top: 1px; accent-color: var(--teal); }
.database-transfer-dialog .danger-button:disabled { opacity: .45; cursor: not-allowed; }
.settings-savebar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; z-index: 5; padding: 9px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -5px 18px rgba(18,43,54,.08); backdrop-filter: blur(7px); }
.settings-savebar > span { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.settings-savebar > span > i { flex: 0 0 auto; color: var(--teal); font-size: 17px; }
.settings-savebar > span strong, .settings-savebar > span small { display: block; }
.settings-savebar > span strong { color: var(--text); font-size: 8px; }
.settings-savebar > span small { margin-top: 2px; font-size: 7px; }
.settings-savebar > div { display: flex; gap: 7px; }
.settings-savebar button { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 6px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.settings-reset-button, .settings-test-button { border: 1px solid var(--line); color: var(--text); background: #fff; }
.settings-reset-button:hover, .settings-test-button:hover { background: var(--surface-soft); }
.settings-save-button { border: 0; color: #fff; background: var(--teal); box-shadow: 0 4px 10px rgba(var(--accent-rgb),.17); }
.settings-save-button:hover { background: var(--teal-dark); }
.settings-save-button:disabled { opacity: .55; cursor: wait; }

#catalogView { grid-template-rows: 76px minmax(0,1fr); padding: 0 10px 10px; background: #f4f7f8; }
.catalog-panel { min-height: 0; display: grid; grid-template-rows: 72px 52px minmax(0,1fr) 40px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(18,43,54,.03); }
.catalog-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.catalog-filters .team-search { width: min(430px,55%); max-width: none; }
.catalog-filters .team-role-filter { width: 180px; }
.catalog-table-wrap { min-height: 0; position: relative; overflow: auto; }
.catalog-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.catalog-table th, .catalog-table td { height: 57px; padding: 7px 12px; border-bottom: 1px solid #e7edef; text-align: left; vertical-align: middle; }
.catalog-table th { height: 36px; position: sticky; z-index: 2; top: 0; color: #4c5d64; background: #f7f9fa; font-size: 8px; font-weight: 700; white-space: nowrap; }
.catalog-table th:first-child { width: 22%; }
.catalog-table th:nth-child(5) { width: 23%; }
.catalog-table th:last-child { width: 76px; }
.catalog-table tbody tr:hover { background: #f8fbfb; }
.catalog-plant { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; }
.catalog-plant > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); font-size: 17px; }
.catalog-plant strong, .catalog-plant small, .catalog-location strong, .catalog-location small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-plant strong, .catalog-location strong { font-size: 9px; }
.catalog-plant small, .catalog-location small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.catalog-code { padding: 4px 6px; border-radius: 4px; color: #40545c; background: #f0f3f4; font-family: ui-monospace, monospace; font-size: 8px; font-weight: 700; }
.catalog-power { font-size: 9px; }
.catalog-power small { color: var(--muted); font-size: 7px; }
.client-chips { display: flex; align-items: center; gap: 4px; min-width: 0; }
.client-chip { max-width: 105px; padding: 4px 7px; overflow: hidden; border-radius: 10px; color: #397345; background: #edf7ef; font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.client-chip.more { flex: 0 0 auto; color: #4a5b62; background: #edf1f2; }
.client-empty { display: inline-flex; align-items: center; gap: 4px; color: #a56718; font-size: 8px; }
.catalog-device-count { display: inline-flex; align-items: center; gap: 4px; color: #4a5b62; font-size: 8px; }
.catalog-device-count i { color: var(--teal); font-size: 13px; }
.plant-form-context { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 9px 11px; border: 1px solid #dce8e8; border-radius: 7px; color: var(--teal-dark); background: #f3faf9; }
.plant-form-context > i { font-size: 20px; }
.plant-form-context small, .plant-form-context strong { display: block; }
.plant-form-context small { font-size: 6px; font-weight: 700; letter-spacing: .12em; }
.plant-form-context strong { margin-top: 2px; color: var(--text); font-size: 9px; }
.plant-form-grid .wide-field { grid-column: 1 / -1; }
.plant-location-field { min-width: 0; display: grid; gap: 6px; color: #34474f; font-size: 8px; font-weight: 700; }
.plant-location-field > small { margin-top: -3px; color: var(--muted); font-size: 7px; font-weight: 400; }
.plant-location-entry { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; }
.plant-location-entry input { border-radius: 6px 0 0 6px; }
.plant-location-entry button { height: 39px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--teal); border-left: 0; border-radius: 0 6px 6px 0; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; font-weight: 700; white-space: nowrap; }
.plant-location-entry button:hover { color: #fff; background: var(--teal); }
.plant-location-entry button i { font-size: 14px; }
.member-form-grid textarea { width: 100%; min-height: 68px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; color: var(--text); background: #fff; font: inherit; font-size: 9px; }
.member-form-grid textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.plant-client-picker { margin: 16px 0 0; padding: 0; border: 0; }
.plant-client-picker legend { margin-bottom: 8px; color: #34474f; font-size: 8px; font-weight: 700; }
.plant-client-picker legend small { margin-left: 5px; color: var(--muted); font-weight: 400; }
#plantClientOptions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#plantClientOptions label { min-width: 0; display: grid; grid-template-columns: 16px 30px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
#plantClientOptions label:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
#plantClientOptions input { width: 14px; height: 14px; accent-color: var(--teal); }
#plantClientOptions .member-avatar { width: 28px; height: 28px; }
#plantClientOptions strong, #plantClientOptions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plantClientOptions strong { font-size: 8px; }
#plantClientOptions small { color: var(--muted); font-size: 7px; }
.plant-client-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 7px; color: var(--muted); font-size: 8px; }
.plant-client-empty i { color: var(--teal); font-size: 17px; }

dialog { color: var(--text); font-family: inherit; }
dialog::backdrop { background: rgba(7,30,40,.5); backdrop-filter: blur(2px); }
.member-dialog { width: min(690px,calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: hidden; border: 0; border-radius: 11px; box-shadow: 0 24px 70px rgba(5,28,38,.28); }
.member-dialog form { display: grid; grid-template-rows: 67px minmax(0,1fr) 58px; max-height: calc(100vh - 30px); }
.member-dialog header { display: grid; grid-template-columns: 38px 1fr 32px; align-items: center; gap: 10px; padding: 11px 17px; border-bottom: 1px solid var(--line); }
.dialog-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--teal-dark); background: var(--teal-soft); font-size: 19px; }
.member-dialog header small { color: var(--teal); font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.member-dialog header h2 { margin-top: 2px; font-size: 16px; }
.member-dialog header button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 17px; }
.member-dialog header button:hover { background: var(--surface-soft); }
.member-form-body { min-height: 0; overflow-y: auto; padding: 16px 18px 8px; }
.member-type-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 15px; padding: 0; border: 0; }
.member-type-picker legend { margin-bottom: 7px; color: #34474f; font-size: 8px; font-weight: 700; }
.member-type-picker label { position: relative; cursor: pointer; }
.member-type-picker input { position: absolute; opacity: 0; }
.member-type-picker label > span { min-height: 58px; display: grid; grid-template-columns: 30px 1fr; align-content: center; column-gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.member-type-picker label > span > i { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 22px; }
.member-type-picker strong, .member-type-picker small { display: block; }
.member-type-picker strong { font-size: 9px; }
.member-type-picker small { color: var(--muted); font-size: 7px; }
.member-type-picker input:checked + span { border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.08); }
.member-type-picker input:checked + span > i { color: var(--teal-dark); }
.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.member-form-grid > label { min-width: 0; display: grid; gap: 6px; color: #34474f; font-size: 8px; font-weight: 700; }
.member-form-grid input, .member-form-grid select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; color: var(--text); background: #fff; font-size: 9px; }
.member-form-grid input:focus, .member-form-grid select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.member-form-grid label > small { margin-top: -3px; color: var(--muted); font-size: 7px; font-weight: 400; }
.password-field { display: flex; position: relative; }
.password-field input { padding-right: 38px; }
.password-field button { width: 34px; height: 34px; position: absolute; right: 3px; top: 3px; border: 0; color: var(--muted); background: transparent; }
.member-form-error { min-height: 16px; margin-top: 8px; color: #b43d3d; font-size: 8px; }
.member-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 17px; border-top: 1px solid var(--line); background: #fafcfc; }
.member-dialog footer button { height: 36px; padding: 0 14px; border-radius: 6px; font-size: 9px; font-weight: 700; }
.dialog-cancel { border: 1px solid var(--line); color: var(--text); background: #fff; }
.dialog-submit { display: flex; align-items: center; gap: 6px; border: 0; color: #fff; background: var(--teal); }
.dialog-submit:disabled { opacity: .6; cursor: wait; }
.location-dialog { width: min(760px,calc(100vw - 30px)); }
.location-dialog form { height: min(720px,calc(100vh - 30px)); }
.location-dialog-body { min-height: 0; display: grid; grid-template-rows: auto auto minmax(260px,1fr) auto auto auto; gap: 9px; overflow-y: auto; padding: 14px 17px 9px; }
.location-search-row { grid-row: 1; }
.location-search-row label { display: grid; gap: 6px; color: #34474f; font-size: 8px; font-weight: 700; }
.location-search-row label > div { height: 42px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; }
.location-search-row label > div:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.location-search-row label i { justify-self: center; color: var(--muted); font-size: 15px; }
.location-search-row input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.location-search-row button { height: 32px; display: flex; align-items: center; gap: 5px; margin-right: 4px; padding: 0 11px; border: 0; border-radius: 5px; color: #fff; background: var(--teal); font-size: 8px; font-weight: 700; }
.location-search-row button:disabled { opacity: .55; cursor: wait; }
.location-search-row button i { color: inherit; font-size: 12px; }
.location-search-results { grid-row: 2; max-height: 142px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 6px 18px rgba(18,43,54,.08); }
.location-search-results button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-bottom: 1px solid #edf1f2; color: var(--text); background: #fff; text-align: left; }
.location-search-results button:last-child { border-bottom: 0; }
.location-search-results button:hover { background: var(--teal-soft); }
.location-search-results button > i:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--teal-dark); background: var(--teal-soft); font-size: 14px; }
.location-search-results button span { min-width: 0; overflow: hidden; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.location-search-results button > i:last-child { color: var(--muted); font-size: 12px; }
.plant-location-map-wrap { min-height: 260px; grid-row: 3; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #e9eeec; }
#plantLocationMap { width: 100%; height: 100%; min-height: 260px; z-index: 1; }
.location-map-hint { max-width: calc(100% - 24px); display: flex; align-items: center; gap: 5px; position: absolute; z-index: 500; top: 10px; left: 50%; padding: 6px 9px; border: 1px solid rgba(197,209,214,.9); border-radius: 14px; color: #41545c; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(18,43,54,.12); font-size: 7px; font-weight: 600; transform: translateX(-50%); white-space: nowrap; }
.use-current-location { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 500; right: 10px; bottom: 10px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--teal-dark); background: rgba(255,255,255,.96); box-shadow: 0 3px 10px rgba(18,43,54,.12); font-size: 8px; font-weight: 700; }
.use-current-location:hover { background: var(--teal-soft); }
.use-current-location:disabled { opacity: .65; cursor: wait; }
.selected-location-card { min-width: 0; grid-row: 4; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #cfe5e1; border-radius: 8px; background: #f1faf8; }
.selected-location-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-size: 17px; }
.selected-location-card small, .selected-location-card strong, .selected-location-card em { display: block; }
.selected-location-card small { color: var(--teal-dark); font-size: 6px; font-weight: 700; letter-spacing: .11em; }
.selected-location-card strong { margin-top: 2px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.selected-location-card em { margin-top: 2px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 7px; font-style: normal; }
.location-form-error { min-height: 12px; grid-row: 5; color: #b43d3d; font-size: 8px; }
.map-attribution { grid-row: 6; color: var(--muted); font-size: 6px; text-align: center; }
.confirm-dialog { width: min(390px,calc(100vw - 30px)); padding: 24px; border: 0; border-radius: 10px; text-align: center; box-shadow: 0 24px 70px rgba(5,28,38,.28); }
.confirm-dialog form { display: grid; justify-items: center; }
.confirm-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: #fff0f0; font-size: 22px; }
.confirm-dialog h2 { margin-top: 12px; font-size: 16px; }
.confirm-dialog p { margin: 7px 0 20px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.confirm-dialog form > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-dialog button { height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 9px; font-weight: 700; }
.confirm-dialog .danger-button { border-color: var(--red); color: #fff; background: var(--red); }

/* Operational feature areas */
.feature-view { min-height: 0; padding: 14px; gap: 12px; overflow: auto; background: var(--bg); }
#alarmsView, #maintenanceView { grid-template-rows: 84px minmax(460px,1fr); }
#analyticsView { grid-template-rows: 84px minmax(520px,1fr); }
#reportsView, #comparisonsView { grid-template-rows: auto minmax(0,1fr); }
#plantRoomView { grid-template-rows: auto 84px auto minmax(470px,1fr); }
.feature-panel, .feature-hero { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 13px rgba(18,43,54,.035); }
.feature-hero { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; }
.feature-hero h2 { margin-top: 2px; font-size: 18px; }
.feature-hero p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.feature-hero > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); font-size: 25px; }
.plant-room-hero { display: grid; grid-template-columns: auto 1fr auto; }
.feature-back { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); font-size: 9px; font-weight: 700; }
.feature-metrics { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.feature-metrics article { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 14px; border-right: 1px solid var(--line); }
.feature-metrics article:last-child { border-right: 0; }
.feature-metrics article > i { width: 35px; height: 35px; display: grid; place-items: center; grid-row: 1 / span 3; border-radius: 9px; color: var(--teal-dark); background: var(--teal-soft); font-size: 18px; }
.feature-metrics article.warn > i { color: #a6640d; background: #fff3df; }
.feature-metrics article.bad > i { color: #ad3b3b; background: #fff0f0; }
.feature-metrics article.good > i { color: var(--green); background: #eaf7f0; }
.feature-metrics small, .feature-metrics strong, .feature-metrics span { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-metrics small { color: var(--muted); font-size: 8px; }
.feature-metrics strong { font-size: 17px; }
.feature-metrics span { color: #89979c; font-size: 7px; }
.feature-toolbar, .feature-panel > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.feature-toolbar h2, .feature-panel > header h2 { margin-top: 2px; font-size: 14px; }
.feature-toolbar p { margin-top: 3px; color: var(--muted); font-size: 8px; }
.feature-filters { display: flex; align-items: center; gap: 7px; }
.feature-filters label, .comparison-metric, .feature-search { min-width: 155px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; }
.feature-filters select, .comparison-metric select, .feature-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 9px; }
.feature-table-panel { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) 40px; overflow: hidden; }
.feature-table-wrap { min-height: 0; position: relative; overflow: auto; }
.feature-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.feature-table th, .feature-table td { height: 49px; padding: 8px 11px; border-bottom: 1px solid #e5ebed; text-align: left; }
.feature-table th { height: 35px; position: sticky; z-index: 2; top: 0; color: #4b5d64; background: #f7f9fa; font-size: 8px; }
.feature-table td { font-size: 9px; }
.feature-table td strong, .feature-table td small { display: block; }
.feature-table td small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.feature-table tbody tr:hover { background: #f5faf9; }
.feature-table .row-action { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--teal-dark); background: #fff; font-size: 8px; font-weight: 700; }
.feature-footer { min-height: 40px !important; padding: 0 12px !important; color: var(--muted); border-bottom: 0 !important; background: #fafcfc; font-size: 8px; }
.feature-footer span { display: flex; align-items: center; gap: 5px; }
.feature-footer i { color: var(--teal); }
.feature-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.88); font-size: 10px; }
.feature-empty { padding: 34px 16px !important; color: var(--muted); text-align: center !important; }
.feature-empty i { display: block; margin-bottom: 5px; color: var(--teal); font-size: 24px; }
.panel-link { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; color: var(--teal-dark); background: transparent; font-size: 8px; font-weight: 700; }
.feature-chart { min-height: 0; position: relative; padding: 12px; }
.feature-chart canvas { width: 100% !important; height: 100% !important; }

.plant-console-window { min-width: 0; height: 300px; overflow: hidden; border: 1px solid #183c49; border-radius: 10px; background: #fff; box-shadow: 0 7px 22px rgba(9,37,48,.10); }
.plant-console-bar { min-height: 54px; display: grid; grid-template-columns: minmax(220px,.8fr) auto minmax(120px,.45fr); align-items: center; gap: 12px; padding: 8px 12px; color: #dcebea; background: #102f3b; }
.plant-console-heading { min-width: 0; display: flex; align-items: center; gap: 9px; }
.plant-console-heading > span:last-child { min-width: 0; }
.plant-console-heading small, .plant-console-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-console-heading small { color: #6fcbbb; font-size: 6px; font-weight: 700; letter-spacing: .12em; }
.plant-console-heading strong { margin-top: 1px; font-size: 10px; }
.plant-console-icon { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #315663; border-radius: 7px; color: #68d1be; background: #173d49; font-size: 17px; }
.plant-console-tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #31515c; border-radius: 7px; background: #0b2731; }
.plant-console-tabs button { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 5px; color: #9eb9b8; background: transparent; font-size: 7px; font-weight: 700; white-space: nowrap; }
.plant-console-tabs button:hover { color: #e8f4f2; background: #173c47; }
.plant-console-tabs button.active { color: #0d423b; background: #70d1bf; }
.plant-console-tabs button i { font-size: 11px; }
.plant-console-live { justify-self: end; display: flex; align-items: center; gap: 5px; color: #9fb6b5; font-size: 7px; font-weight: 700; white-space: nowrap; }
.plant-console-live i { color: #d8a249; font-size: 9px; }
.plant-console-live.healthy i { color: #54c496; }
.plant-console-live.critical i { color: #ef7777; }
.plant-console-body { height: 246px; overflow: auto; background: #f9fbfb; }
.console-overview { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.35fr); min-height: 190px; }
.console-plant-card { padding: 15px 16px; border-right: 1px solid var(--line); background: #f1f7f6; }
.console-plant-card > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--teal-dark); background: #dcefeb; font-size: 18px; }
.console-plant-card h3 { margin: 9px 0 2px; font-size: 16px; }
.console-plant-card p { color: var(--muted); font-size: 8px; line-height: 1.55; }
.console-plant-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; margin: 13px 0 0; }
.console-plant-card dt, .console-detail-grid dt { color: #71838a; font-size: 6px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.console-plant-card dd, .console-detail-grid dd { min-width: 0; margin: 2px 0 0; overflow-wrap: anywhere; font-size: 8px; font-weight: 700; }
.console-plant-card .console-detail-grid > div:nth-child(2n) { border-right: 0; }
.console-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(105px,1fr)); align-content: stretch; }
.console-metric-grid article { min-width: 0; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.console-metric-grid article:nth-child(4n) { border-right: 0; }
.console-metric-grid article:nth-last-child(-n+4) { border-bottom: 0; }
.console-metric-grid small, .console-metric-grid strong, .console-metric-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-metric-grid small { color: var(--muted); font-size: 7px; }
.console-metric-grid strong { margin-top: 5px; font-size: 16px; font-variant-numeric: tabular-nums; }
.console-metric-grid span { margin-top: 3px; color: #819096; font-size: 6px; }
.console-detail-section { min-height: 190px; padding: 14px 16px; }
.console-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.console-section-heading span { display: flex; align-items: center; gap: 7px; }
.console-section-heading i { color: var(--teal); font-size: 16px; }
.console-section-heading h3 { margin: 0; font-size: 11px; }
.console-section-heading small { color: var(--muted); font-size: 7px; }
.console-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(125px,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.console-detail-grid > div { min-width: 0; min-height: 57px; padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.console-detail-grid > div:nth-child(4n) { border-right: 0; }
.console-detail-grid code { color: #174a55; font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; }
.console-device-stack { display: grid; gap: 9px; }
.console-device-config { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.console-device-config > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.console-device-config > header span { min-width: 0; }
.console-device-config > header strong, .console-device-config > header small { display: block; }
.console-device-config > header strong { font-size: 9px; }
.console-device-config > header small { color: var(--muted); font-size: 7px; }
.console-device-config > header em { padding: 4px 7px; border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); font-size: 7px; font-style: normal; font-weight: 700; }
.console-device-config .console-detail-grid { border: 0; border-radius: 0; }
.console-measurements { width: 100%; border-collapse: collapse; background: #fff; }
.console-measurements th, .console-measurements td { height: 34px; padding: 7px 11px; border-bottom: 1px solid #e7edef; text-align: left; white-space: nowrap; }
.console-measurements th { position: sticky; z-index: 1; top: 0; color: #6c7e85; background: #edf3f3; font-size: 6px; letter-spacing: .07em; text-transform: uppercase; }
.console-measurements td { font-size: 8px; }
.console-measurements td code { color: #315963; font-family: "Cascadia Code", Consolas, monospace; font-size: 7px; }
.console-measurements td:nth-child(3) { font-weight: 700; font-variant-numeric: tabular-nums; }
.console-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 24px; color: var(--muted); text-align: center; }
.console-empty i { color: var(--teal); font-size: 25px; }
.console-empty strong { color: var(--text); font-size: 10px; }
.console-empty small { max-width: 440px; font-size: 7px; }

.plant-room-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.75fr); grid-template-rows: 1fr 1fr; gap: 12px; }
.plant-room-grid .plant-room-chart { min-height: 1360px; grid-row: 1 / span 2; display: grid; grid-template-rows: 70px minmax(0,1fr); overflow: hidden; }
.plant-room-chart > header p { margin-top: 3px; color: var(--muted); font-size: 8px; }
.plant-room-chart-stack { min-height: 0; display: grid; grid-template-rows: repeat(4,minmax(290px,1fr)); gap: 10px; padding: 10px; background: #f7fafa; }
.plant-room-telemetry-chart { min-height: 0; display: grid; grid-template-rows: 62px minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.plant-room-telemetry-chart > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.plant-room-telemetry-chart > header > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.plant-room-telemetry-chart > header > span > b { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cfe1dd; border-radius: 6px; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; }
.plant-room-telemetry-chart > header span span { min-width: 0; }
.plant-room-telemetry-chart > header strong, .plant-room-telemetry-chart > header small { display: block; }
.plant-room-telemetry-chart > header strong { font-size: 10px; }
.plant-room-telemetry-chart > header small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.plant-room-telemetry-chart > header > strong { color: var(--teal-dark); font-size: 14px; white-space: nowrap; }
.plant-room-telemetry-chart.energy > header > span > b { border-color: #d6def2; color: #2f63c7; background: #eef2fb; }
.plant-room-telemetry-chart.energy > header > strong { color: #2f63c7; }
.plant-room-telemetry-chart .feature-chart { padding: 8px 10px 10px; }
.chart-title-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.chart-title-actions > strong { color: var(--teal-dark); font-size: 12px; white-space: nowrap; }
.chart-title-actions .chart-zoom-controls { flex: 0 0 auto; }
.chart-title-actions .chart-zoom-help { color: var(--muted); font-size: 6px; white-space: nowrap; }
.chart-fullscreen-button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: #40565e; background: #fff; font-size: 7px; font-weight: 800; white-space: nowrap; }
.chart-fullscreen-button:hover, .chart-fullscreen-button.active { color: var(--teal-dark); border-color: #9bcfc6; background: var(--teal-soft); }
.chart-fullscreen-button i { font-size: 13px; }
.chart-wheel-zoom-hint { display: none; }
.chart-live-values { display: flex; align-items: center; gap: 5px; }
.chart-live-values > span { padding: 3px 5px; border-radius: 5px; color: var(--muted); background: #f4f7f8; font-size: 6px; font-weight: 700; white-space: nowrap; }
.chart-live-values strong { margin-left: 2px; color: var(--text); font-size: 7px; }
.plant-room-telemetry-chart.flows > header > span > b { border-color: #e2d6ef; color: #6b21a8; background: #f5effa; }
.plant-room-telemetry-chart.strings > header > span > b { border-color: #edd9bd; color: #9a5b16; background: #fff7e9; }
.plant-room-telemetry-chart canvas { cursor: crosshair; }
.plant-room-telemetry-chart canvas.chart-pan-active { cursor: grabbing; }
.plant-room-telemetry-chart:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; display: grid; grid-template-rows: 70px minmax(0,1fr); border: 0; border-radius: 0; background: #fff; }
.plant-room-telemetry-chart:fullscreen > header { padding: 10px 16px; }
.plant-room-telemetry-chart:fullscreen .feature-chart { min-height: 0; padding: 14px 18px 18px; }
.plant-room-telemetry-chart:fullscreen .chart-wheel-zoom-hint { display: inline; }
.plant-room-telemetry-chart:fullscreen .chart-title-actions .chart-zoom-help { font-size: 7px; }
.plant-room-current, #plantRoomCurrentPower { color: var(--teal-dark); font-size: 17px; }
.plant-room-list { padding: 7px 12px; overflow: auto; }
.plant-room-list article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 43px; border-bottom: 1px solid #edf1f2; }
.plant-room-list article:last-child { border-bottom: 0; }
.plant-room-list article > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); font-size: 14px; }
.plant-room-list strong, .plant-room-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plant-room-list strong { font-size: 8px; }
.plant-room-list small { color: var(--muted); font-size: 7px; }

.analytics-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,.8fr); grid-template-rows: 1fr 1fr; gap: 12px; }
.analytics-trend { grid-row: 1 / span 2; display: grid; grid-template-rows: 62px minmax(0,1fr); }
.analytics-ranking { display: grid; grid-template-rows: 54px minmax(0,1fr); }
.analytics-insights { overflow: hidden; }
.analytics-insights > div { padding: 4px 12px; }
.analytics-insights article { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf1f2; }
.analytics-insights article:last-child { border-bottom: 0; }
.analytics-insights article i { grid-row: 1 / span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); }
.analytics-insights strong { font-size: 8px; }
.analytics-insights small { color: var(--muted); font-size: 7px; }

.report-layout { min-height: 0; display: grid; grid-template-columns: minmax(250px,.72fr) minmax(370px,1.25fr) minmax(245px,.7fr); gap: 12px; }
.report-builder, .report-preview, .report-history { overflow: hidden; }
.report-builder form { display: grid; gap: 12px; padding: 14px; }
.report-builder form label { display: grid; gap: 5px; color: #405259; font-size: 8px; font-weight: 700; }
.report-builder select, .report-builder input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: #fff; font-size: 9px; }
.report-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.report-builder .team-add-button { justify-content: center; margin-top: 3px; }
.report-ready { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; font-weight: 700; }
#reportPreview { padding: 14px; }
.report-preview-card { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fafcfc; }
.report-preview-card h3 { margin: 0 0 9px; font-size: 12px; }
.report-preview-card dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 0; }
.report-preview-card dl div { padding: 9px; border-radius: 7px; background: #fff; }
.report-preview-card dt { color: var(--muted); font-size: 7px; }
.report-preview-card dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; }
.report-preview-card p { margin-top: 11px; color: var(--muted); font-size: 8px; line-height: 1.55; }
#reportHistory { padding: 7px 12px; }
#reportHistory article { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #edf1f2; }
#reportHistory article > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-dark); background: var(--teal-soft); }
#reportHistory strong, #reportHistory small { display: block; }
#reportHistory strong { font-size: 8px; }
#reportHistory small { color: var(--muted); font-size: 7px; }

.comparison-metric { width: 205px; height: auto; display: grid; gap: 3px; padding: 7px 10px; }
.comparison-metric span { color: var(--muted); font-size: 7px; font-weight: 700; }
.comparison-layout { min-height: 0; display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 12px; }
.comparison-picker { min-height: 0; display: grid; grid-template-rows: 55px 48px minmax(0,1fr); overflow: hidden; }
.comparison-picker header em { min-width: 44px; padding: 4px 7px; border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; font-style: normal; text-align: center; }
.comparison-picker .feature-search { min-width: 0; margin: 7px 10px; }
#comparisonPlantList { overflow: auto; padding: 0 10px 8px; }
#comparisonPlantList label { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 7px; min-height: 44px; border-bottom: 1px solid #edf1f2; cursor: pointer; }
#comparisonPlantList input { width: 14px; height: 14px; accent-color: var(--teal); }
#comparisonPlantList strong, #comparisonPlantList small { display: block; }
#comparisonPlantList strong { font-size: 8px; }
#comparisonPlantList small { color: var(--muted); font-size: 7px; }
#comparisonPlantList em { color: var(--teal-dark); font-size: 8px; font-style: normal; font-weight: 700; }
.comparison-results { min-height: 0; display: grid; grid-template-rows: minmax(260px,1fr) auto; gap: 12px; }
.comparison-chart { min-height: 0; display: grid; grid-template-rows: 55px minmax(0,1fr); }
.comparison-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.comparison-cards article { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.comparison-cards article > span { display: flex; align-items: center; gap: 6px; }
.comparison-cards article > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--card-color); }
.comparison-cards h3 { margin: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.comparison-cards dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 0; }
.comparison-cards dt { color: var(--muted); font-size: 6px; }
.comparison-cards dd { margin: 2px 0 0; font-size: 9px; font-weight: 700; }
.maintenance-dialog { width: min(620px,calc(100vw - 30px)); }
.maintenance-dialog textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; resize: vertical; font: inherit; font-size: 9px; }
.maintenance-dialog .wide-field { grid-column: 1 / -1; }
.maintenance-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 11px; color: #53656c; background: #edf2f3; font-size: 7px; font-weight: 700; }
.maintenance-state.in_progress { color: #126477; background: #e6f4f7; }
.maintenance-state.completed { color: #1e6e47; background: #e8f6ee; }
.maintenance-state.open, .maintenance-state.planned { color: #9a5b0c; background: #fff3df; }

.statusbar { display: flex; align-items: center; gap: 20px; padding: 0 14px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface); font-size: 8px; }
.statusbar span { display: flex; align-items: center; gap: 5px; }
.statusbar > span:first-child { color: var(--green); }
.statusbar-spacer { flex: 1; }
.toast { min-width: 250px; display: flex; align-items: center; gap: 8px; position: fixed; z-index: 2000; right: 22px; bottom: 46px; padding: 11px 14px; border: 1px solid #b9ded4; border-radius: 8px; color: #155c4f; background: #effaf7; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.spinning { display: inline-block; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sidebar-collapsed .server-app { grid-template-columns: 58px minmax(0,1fr); }
.sidebar-collapsed .brand { padding: 0 11px; }
.sidebar-collapsed .brand > span:last-child, .sidebar-collapsed .nav-item span, .sidebar-collapsed .nav-item em, .sidebar-collapsed .collapse-button span, .sidebar-collapsed .profile > span:not(.avatar), .sidebar-collapsed .profile > i { display: none; }
.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.sidebar-collapsed .profile { grid-template-columns: 1fr; justify-items: center; }
.sidebar-collapsed .collapse-button i { transform: rotate(180deg); }

@media (max-width: 1180px) {
  .server-app { grid-template-columns: 58px minmax(0,1fr); }
  .brand { padding: 0 11px; }
  .brand > span:last-child, .nav-item span, .nav-item em, .collapse-button span, .profile > span:not(.avatar), .profile > i { display: none; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .profile { grid-template-columns: 1fr; justify-items: center; }
  .topbar { grid-template-columns: 190px 180px minmax(230px,1fr) auto 36px 38px; }
  .view-preset, .top-date { display: none; }
  .metric-strip article { padding: 12px 8px; }
  .metric-icon { display: none; }
  .operations-grid { grid-template-columns: minmax(0,1fr) 270px; }
  .map-layout { grid-template-columns: 190px minmax(0,1fr) 220px; }
  .team-summary article, .catalog-summary article, .device-summary article { padding-inline: 10px; }
}

@media (max-width: 900px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .auth-screen { display: block; background: linear-gradient(155deg, #eef7f6, #fff 42%); }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; padding: 34px max(28px, 8vw) 22px; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 68px; color: var(--navy); }
  .auth-mobile-brand .brand-mark { color: #e8fffb; }
  .auth-mobile-brand strong { font-size: 16px; }
  .auth-panel > footer { margin-top: 68px; }
  .server-app { width: 100%; min-height: 100vh; height: auto; grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .app-column { min-height: 100vh; grid-template-rows: auto 1fr 32px; overflow: visible; }
  .topbar { grid-template-columns: 1fr auto auto auto; min-height: 68px; }
  .top-select, .global-search, .top-date { display: none; }
  .workspace { overflow: visible; }
  .view.active { height: auto; }
  #operationsView, #mapView, #teamView, #catalogView, #devicesView { grid-template-rows: auto auto auto; }
  #settingsView { overflow: visible; }
  .settings-shell { height: auto; display: block; overflow: visible; }
  .settings-layout { display: block; overflow: visible; }
  .settings-nav { display: grid; grid-template-columns: repeat(2,1fr); padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-nav > span, .settings-nav-note { display: none; }
  .settings-form { display: block; overflow: visible; }
  .settings-form-content { overflow: visible; padding-bottom: 10px; }
  .theme-picker { grid-template-columns: 1fr 1fr; }
  .settings-savebar { margin: 0 16px 20px; border: 1px solid var(--line); border-radius: 8px; }
  .metric-strip { grid-template-columns: repeat(3,1fr); }
  .operations-grid { grid-template-columns: 1fr; }
  .matrix-panel { min-height: 640px; border-right: 0; }
  .plant-inspector { min-height: 560px; border-top: 1px solid var(--line); }
  .activity-strip { grid-template-columns: 1fr; }
  .activity-items { grid-template-columns: 1fr; }
  .activity-strip > header { border-right: 0; border-bottom: 1px solid var(--line); }
  .activity-strip header p { max-width: none; }
  .activity-items article { min-height: 112px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-plant-list, .incident-queue { display: none; }
  .map-stage { height: 560px; }
  .map-analytics { grid-template-columns: 1fr; }
  #teamView { padding-bottom: 16px; }
  .team-summary { grid-template-columns: repeat(2,1fr); }
  .catalog-summary { grid-template-columns: repeat(2,1fr); }
  .device-summary { grid-template-columns: repeat(2,1fr); }
  .team-panel { min-height: 620px; }
  .catalog-panel { min-height: 620px; }
  .device-workspace { grid-template-columns: 1fr; }
  .device-plant-panel { min-height: 240px; }
  .device-main-panel { min-height: 720px; }
  .team-filters { grid-template-columns: 1fr; }
  .team-search { max-width: none; }
  .team-tabs { overflow-x: auto; }
  .team-role-filter { display: none; }
  .catalog-filters .team-search { width: 100%; }
  .catalog-filters .team-role-filter { display: flex; width: 170px; }
  .database-transfer-route { grid-template-columns: 1fr; }
  .transfer-arrow { height: 26px; transform: rotate(90deg); }
  .database-transfer-safety { grid-template-columns: 1fr; }
  .database-transfer-footer { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .auth-panel { padding-inline: 22px; }
  .auth-mobile-brand { margin-bottom: 46px; }
  .auth-panel h2 { font-size: 31px; }
  .auth-panel > footer span { display: none; }
  .team-summary { grid-template-columns: 1fr; }
  .catalog-summary { grid-template-columns: 1fr; }
  .device-summary { grid-template-columns: 1fr; }
  .team-summary article, .catalog-summary article, .device-summary article { border-right: 0; border-bottom: 1px solid var(--line); }
  .member-form-grid { grid-template-columns: 1fr; }
  .member-type-picker { grid-template-columns: 1fr; }
  .catalog-filters { align-items: stretch; flex-direction: column; }
  .catalog-filters .team-role-filter { width: 100%; }
  #plantClientOptions { grid-template-columns: 1fr; }
  .plant-location-entry { grid-template-columns: 1fr; gap: 6px; }
  .plant-location-entry input { border-radius: 6px; }
  .plant-location-entry button { justify-content: center; border-left: 1px solid var(--teal); border-radius: 6px; }
  .location-dialog form { height: calc(100vh - 20px); max-height: calc(100vh - 20px); }
  .location-dialog-body { grid-template-rows: auto auto minmax(230px,1fr) auto auto auto; padding-inline: 11px; }
  .location-search-row button span, .use-current-location span { display: none; }
  .location-search-row button { width: 32px; justify-content: center; padding: 0; }
  .location-map-hint { top: 8px; }
  .selected-location-card strong { white-space: normal; }
  .device-filters { align-items: stretch; flex-direction: column; }
  .device-filters .team-search, .device-filters .team-role-filter { width: 100%; }
  .device-table-panel { grid-template-rows: auto minmax(0,1fr) 39px; }
  .generated-token dl { grid-template-columns: 1fr; }
  .settings-hero { grid-template-columns: 42px 1fr; padding-inline: 14px; }
  .settings-state { display: none; }
  .settings-nav { grid-template-columns: 1fr 1fr; }
  .theme-picker { grid-template-columns: 1fr; }
  .database-provider-picker, .settings-field-grid, .settings-paths .settings-field-grid { grid-template-columns: 1fr; }
  .transfer-destination-fields { grid-template-columns: 1fr; }
  .settings-savebar { align-items: stretch; flex-direction: column; }
  .settings-savebar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-save-button { grid-column: 1 / -1; justify-content: center; }
  .database-transfer-route > section { grid-template-columns: 38px minmax(0,1fr); }
  .database-transfer-route section > em { grid-column: 1 / -1; grid-row: 3; width: fit-content; }
  .database-transfer-footer > div { display: grid; grid-template-columns: 1fr; }
  .database-transfer-footer button { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.device-actions .remote-device { color: var(--teal); }
.remote-desktop-dialog { width: min(96vw, 1500px); max-width: none; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #0b1519; box-shadow: 0 28px 90px #00191fb3; }
.remote-desktop-dialog::backdrop { background: #071317d9; backdrop-filter: blur(5px); }
.remote-desktop-dialog > section { display: grid; grid-template-rows: 58px minmax(360px, calc(92vh - 102px)) 44px; }
.remote-desktop-dialog header, .remote-desktop-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; color: #d9e8e8; background: #132329; }
.remote-desktop-dialog header > span, .remote-desktop-dialog header > div, .remote-desktop-dialog header > span > span { display: flex; align-items: center; gap: 10px; }
.remote-desktop-dialog header > span > i { color: #54cbb8; font-size: 25px; }
.remote-desktop-dialog header small, .remote-desktop-dialog header h2 { display: block; margin: 0; }
.remote-desktop-dialog header small { color: #7ea29e; font-size: 8px; letter-spacing: .08em; }
.remote-desktop-dialog header h2 { max-width: 46vw; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.remote-desktop-dialog header label { display: flex; align-items: center; gap: 7px; color: #b9cecc; font-size: 11px; }
.remote-desktop-dialog header input { accent-color: #21aa94; }
.remote-desktop-dialog header button { width: 32px; height: 32px; border: 1px solid #385158; border-radius: 6px; color: #d9e8e8; background: transparent; cursor: pointer; }
.remote-desktop-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: #071014; }
#remoteDesktopCanvas { display: block; max-width: 100%; max-height: 100%; outline: none; background: #050a0c; cursor: default; }
#remoteDesktopCanvas:focus { box-shadow: inset 0 0 0 2px #26b9a0; }
.remote-desktop-state { position: absolute; display: grid; place-items: center; gap: 6px; padding: 20px 28px; border: 1px solid #294148; border-radius: 10px; color: #dbe8e8; background: #102026e8; text-align: center; }
.remote-desktop-state[hidden] { display: none; }
.remote-desktop-state i { color: #45c6b1; font-size: 30px; }
.remote-desktop-state strong { font-size: 13px; }
.remote-desktop-state small { color: #8eaaa8; font-size: 10px; }
.remote-desktop-dialog footer { color: #8eaaa8; font-size: 9px; }
.remote-desktop-dialog footer span { display: flex; align-items: center; gap: 6px; }
.remote-desktop-dialog footer i { color: #41bea9; font-size: 15px; }

@media (max-width: 700px) {
  .remote-desktop-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }
  .remote-desktop-dialog > section { grid-template-rows: 58px minmax(300px, calc(100vh - 102px)) 44px; }
  .remote-desktop-dialog header label { display: none; }
  .remote-desktop-dialog footer span:first-child { display: none; }
}

@media (max-width: 1180px) {
  .report-layout { grid-template-columns: minmax(245px,.75fr) minmax(360px,1.25fr); }
  .report-history { display: none; }
  .feature-filters label { min-width: 130px; }
  .comparison-layout { grid-template-columns: 225px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .feature-view.active { height: auto; min-height: calc(100vh - 100px); display: block; }
  .feature-view > * { margin-bottom: 12px; }
  .feature-metrics { grid-template-columns: repeat(2,1fr); }
  .feature-metrics article:nth-child(2) { border-right: 0; }
  .feature-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .feature-table-panel { min-height: 560px; }
  .analytics-grid, .plant-room-grid, .report-layout, .comparison-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }
  .analytics-trend { min-height: 380px; grid-row: auto; }
  .plant-room-grid .plant-room-chart { min-height: 1320px; grid-row: auto; }
  .plant-room-telemetry-chart { grid-template-rows: auto minmax(220px,1fr); }
  .plant-room-telemetry-chart > header { align-items: flex-start; flex-direction: column; }
  .chart-title-actions { width: 100%; justify-content: flex-start; }
  .analytics-ranking { min-height: 280px; }
  .plant-room-grid > .feature-panel { min-height: 260px; }
  .report-layout > .feature-panel { min-height: 300px; }
  .report-history { display: block; }
  .comparison-picker { min-height: 310px; }
  .comparison-chart { min-height: 360px; }
  .feature-filters { align-items: stretch; flex-wrap: wrap; }
  .feature-filters label { min-width: 150px; flex: 1; }
  .plant-console-bar { grid-template-columns: 1fr auto; }
  .plant-console-tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .console-overview { grid-template-columns: 1fr; }
  .console-plant-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .console-detail-grid { grid-template-columns: repeat(2,minmax(125px,1fr)); }
  .console-detail-grid > div:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
  .feature-view { padding: 9px; }
  .feature-hero, .plant-room-hero { display: grid; grid-template-columns: 1fr auto; }
  .feature-hero > div { grid-column: 1; }
  .plant-room-hero .feature-back { grid-column: 1 / -1; width: fit-content; }
  .feature-metrics { grid-template-columns: 1fr; }
  .feature-metrics article { border-right: 0; border-bottom: 1px solid var(--line); }
  .feature-metrics article:last-child { border-bottom: 0; }
  .feature-toolbar { align-items: stretch; flex-direction: column; }
  .feature-filters { display: grid; grid-template-columns: 1fr; }
  .feature-filters label { min-width: 0; }
  .comparison-cards { grid-template-columns: 1fr 1fr; }
  .report-dates { grid-template-columns: 1fr; }
  .plant-console-bar { grid-template-columns: 1fr; }
  .plant-console-live { justify-self: start; }
  .plant-console-tabs { width: 100%; }
  .plant-console-tabs button { flex: 1 0 auto; }
  .console-metric-grid { grid-template-columns: repeat(2,minmax(105px,1fr)); }
  .console-metric-grid article:nth-child(2n) { border-right: 0; }
  .console-metric-grid article:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .console-metric-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .console-detail-grid { grid-template-columns: 1fr; }
  .console-detail-grid > div { border-right: 0; }
}