:root {
  --bg: #0a1424;
  --bg-2: #0e1a2e;
  --panel: #111f36;
  --panel-2: #152541;
  --panel-3: #1a2c4b;
  --line: #22344f;
  --line-2: #2c4162;
  --text: #e7eef9;
  --text-2: #b4c2d8;
  --muted: #7f91ad;
  --muted-2: #5f7291;
  --green: #7fd323;
  --green-2: #4ec256;
  --blue: #3fa2ff;
  --cyan: #38c8e8;
  --yellow: #f5c518;
  --amber: #ff9f1a;
  --orange: #ff7a2f;
  --red: #ff4d57;
  --purple: #b07cf2;
  --pink: #ff6ab1;
  --grey: #8a97ad;
  --white: #ffffff;
  --accent: #e6322e;
  --radius: calc(var(--u) * 0.417);
  --header-h: calc(var(--u) * 3.4);
  --side-w: calc(var(--u) * 6.4);
  --footer-h: calc(var(--u) * 3.4);
  --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* one viewport unit: 1 % of the width of a 16:9 fit. calc(var(--u) * 1.0) on Full HD, calc(var(--u) * 2.0) on 4K, calc(var(--u) * 0.714) on 1366 wide */
  --u: min(1vw, 1.7778vh);
  --fs: max(9px, calc(var(--u) * 0.66));
  --fs-kpi: calc(var(--u) * 1.3);
  --fs-big: calc(var(--u) * 1.4);
  --gauge-w: calc(var(--u) * 8.2);
  --gauge-sm: calc(var(--u) * 6.4);
  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
a { color: var(--blue); }
svg text { font-family: var(--font); }

/* ---------------------------------------------------------------- layout */
#app { display: grid; grid-template-rows: var(--header-h) 1fr var(--footer-h); grid-template-columns: var(--side-w) 1fr; height: 100vh; }
#header { grid-column: 1 / 3; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-2); }
#sidebar { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; overflow: hidden; }
#main { overflow: hidden; padding: calc(var(--u) * 0.625) calc(var(--u) * 0.729) calc(var(--u) * 0.729); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; }
/* the page fills the viewport: fixed-height blocks (tabs, KPI row) keep their size, grid rows share the rest */
.page { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.page > .grid { flex: 1 1 0; min-height: 0; align-items: stretch; }
.page > .panel { min-height: 0; }
.page > .grid:last-child { margin-bottom: 0; }
.page > .panel:last-child { flex: 1 1 0; }
#footer { grid-column: 1 / 3; display: flex; align-items: stretch; border-top: 1px solid var(--line); background: var(--bg-2); }

/* ---------------------------------------------------------------- header */
.hdr-brand { display: flex; align-items: center; gap: calc(var(--u) * 0.729); padding: 0 calc(var(--u) * 0.938); min-width: calc(var(--u) * 17.188); border-right: 1px solid var(--line); }
.hdr-brand .op-logo { width: calc(var(--u) * 3.229); height: calc(var(--u) * 2.083); }
.hdr-brand .vname { font-size: 1.6em; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.hdr-brand .vop { color: var(--text-2); font-size: calc(var(--u) * 0.625); }
.hdr-cells { display: flex; align-items: center; flex: 1; padding: 0 calc(var(--u) * 0.729); gap: calc(var(--u) * 0.417); }
.hdr-cell { display: flex; align-items: center; gap: calc(var(--u) * 0.521); padding: calc(var(--u) * 0.417) calc(var(--u) * 0.729); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-height: calc(var(--u) * 2.292); }
.hdr-cell .ico { width: calc(var(--u) * 1.042); height: calc(var(--u) * 1.042); color: var(--text-2); flex: none; }
.hdr-cell .lbl { font-size: calc(var(--u) * 0.495); letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.hdr-cell .val { font-size: 1.04em; font-weight: 600; white-space: nowrap; }
.hdr-cell .sub { font-size: calc(var(--u) * 0.573); color: var(--text-2); white-space: nowrap; }
.hdr-cell.status .val { color: var(--green); display: flex; align-items: center; gap: calc(var(--u) * 0.365); }
.hdr-cell.status .val.port { color: var(--blue); }
.dot { width: calc(var(--u) * 0.469); height: calc(var(--u) * 0.469); border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 calc(var(--u) * 0.312) var(--green); }
.dot.blue { background: var(--blue); box-shadow: 0 0 calc(var(--u) * 0.312) var(--blue); }
.dot.red { background: var(--red); box-shadow: 0 0 calc(var(--u) * 0.312) var(--red); }
.dot.amber { background: var(--amber); box-shadow: 0 0 calc(var(--u) * 0.312) var(--amber); }
.dot.grey { background: var(--muted-2); box-shadow: none; }
.hdr-user { display: flex; align-items: center; gap: calc(var(--u) * 0.6); padding: 0 calc(var(--u) * 0.8); border-left: 1px solid var(--line); font-size: 0.92em; }
.hdr-user .hu-name { display: flex; align-items: center; gap: calc(var(--u) * 0.35); white-space: nowrap; }
.hdr-user .hu-name .muted { font-size: 0.85em; text-transform: capitalize; }
.hdr-user .link-btn { display: inline-flex; align-items: center; gap: 5px; }
.hdr-user .link-btn svg { width: 1em; height: 1em; }
.hdr-indusolve { display: flex; align-items: center; padding: 0 calc(var(--u) * 1.042); border-left: 1px solid var(--line); }
.hdr-indusolve svg { height: calc(var(--u) * 1.771); width: auto; }

/* --------------------------------------------------------------- sidebar */
.nav { display: flex; flex-direction: column; padding: calc(var(--u) * 0.521) calc(var(--u) * 0.417); gap: 2px; }
.nav a { display: flex; align-items: center; gap: calc(var(--u) * 0.521); padding: 0.7em calc(var(--u) * 0.521); border-radius: calc(var(--u) * 0.312); color: var(--text-2); text-decoration: none; font-size: 0.85em; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; border: 1px solid transparent; }
.nav a svg { width: calc(var(--u) * 0.885); height: calc(var(--u) * 0.885); flex: none; }
.nav a:hover { background: var(--panel); color: var(--text); }
.nav a.active { color: var(--accent); background: var(--panel); border-color: var(--line); }
.nav a .badge { margin-left: auto; background: var(--red); color: #fff; font-size: calc(var(--u) * 0.469); padding: 1px calc(var(--u) * 0.26); border-radius: calc(var(--u) * 0.417); }
.side-vessel { margin-top: auto; padding: calc(var(--u) * 0.729) calc(var(--u) * 0.625) calc(var(--u) * 0.625); border-top: 1px solid var(--line); font-size: calc(var(--u) * 0.547); color: var(--text-2); }
.side-vessel .vs-name { font-weight: 700; color: var(--text); font-size: calc(var(--u) * 0.599); margin: calc(var(--u) * 0.312) 0 calc(var(--u) * 0.312); letter-spacing: 0.4px; }
.side-vessel .row { display: flex; justify-content: space-between; gap: calc(var(--u) * 0.312); padding: 1.5px 0; }
.side-vessel .row span:last-child { color: var(--text); }
.side-vessel svg { width: calc(var(--u) * 4.792); height: calc(var(--u) * 1.875); display: block; }

/* ---------------------------------------------------------------- footer */
.ftr-cell { padding: calc(var(--u) * 0.469) calc(var(--u) * 0.833); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 0.208); min-width: 0; }
.ftr-cell:last-child { border-right: 0; }
.ftr-cell .lbl { font-size: calc(var(--u) * 0.521); letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.ftr-cell .row { display: flex; align-items: center; gap: calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.599); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftr-cell .row .t { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ftr-alarms { min-width: calc(var(--u) * 14.583); }
.ftr-events { flex: 1; }
.ftr-status { min-width: calc(var(--u) * 15.625); }
.ftr-status .row { gap: calc(var(--u) * 1.25); }
.link-btn { background: none; border: 1px solid var(--line-2); border-radius: calc(var(--u) * 0.26); padding: calc(var(--u) * 0.156) calc(var(--u) * 0.469); color: var(--text); font-size: calc(var(--u) * 0.573); cursor: pointer; white-space: nowrap; }
.link-btn:hover { background: var(--panel-2); }
.ok { color: var(--green); }
.warn { color: var(--amber); }
.crit { color: var(--red); }
.notice { color: var(--yellow); }
.info { color: var(--blue); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ page chrome */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 calc(var(--u) * 0.625); overflow-x: auto; }
.tabs a { padding: 0.7em calc(var(--u) * 0.833); color: var(--text-2); text-decoration: none; font-size: 0.88em; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs.blue a.active { color: var(--blue); border-bottom-color: var(--blue); }
.page-top { display: grid; grid-template-columns: calc(var(--u) * 21) 1fr; gap: calc(var(--u) * 0.625); margin-bottom: calc(var(--u) * 0.625); flex: 0 0 auto; }
.hero { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); min-height: 0; }
.hero svg { width: 100%; height: 100%; display: block; }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.kpi { padding: calc(var(--u) * 0.729) calc(var(--u) * 0.833); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(var(--u) * 0.208); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .lbl { display: flex; align-items: center; gap: calc(var(--u) * 0.365); font-size: 0.78em; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.kpi .lbl svg { width: calc(var(--u) * 0.833); height: calc(var(--u) * 0.833); color: var(--text-2); }
.kpi .val { font-size: var(--fs-kpi); font-weight: 700; margin-top: calc(var(--u) * 0.208); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .val small { font-size: calc(var(--u) * 0.625); font-weight: 500; color: var(--text-2); margin-left: calc(var(--u) * 0.208); }
.kpi .delta { font-size: 0.92em; font-weight: 600; }
.kpi .sub { font-size: 0.85em; color: var(--text-2); }
.delta.good { color: var(--green); }
.delta.bad { color: var(--red); }
.delta.neutral { color: var(--text-2); }

.grid { display: grid; gap: calc(var(--u) * 0.625); margin-bottom: calc(var(--u) * 0.625); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: calc(var(--u) * 0.55) calc(var(--u) * 0.7); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.panel > .ph { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.521); margin-bottom: calc(var(--u) * 0.521); }
.panel > .ph h3 { margin: 0; font-size: 0.92em; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; color: var(--text); }
.panel > .ph h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: calc(var(--u) * 0.547); margin-left: calc(var(--u) * 0.208); }
.panel > .ph .pr { display: flex; align-items: center; gap: calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.547); color: var(--muted); }
.panel > .chart-box, .panel > .kv, .panel > .gauges, .panel > .schem, .panel > .map, .panel > .radar, .panel > .rose, .panel > .cyl-bars, .panel > .tile-grid, .panel > .fill, .panel > .tbl-wrap, .panel > div[style*="display:grid"] { flex: 1 1 auto; min-height: 0; }
.tbl-wrap { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.radar { position: relative; min-height: calc(var(--u) * 6); overflow: hidden; }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rose { display: flex; align-items: center; justify-content: center; }
.rose svg { max-width: calc(var(--u) * 9); }
.panel > .kv { display: flex; flex-direction: column; justify-content: space-evenly; }
.panel > .gauges { align-items: center; align-content: center; }
.panel > div[style*="display:grid"] { align-content: space-evenly; }
.panel > .chart-box { flex: 1 1 0; min-height: calc(var(--u) * 3); }
.panel .pf { margin-top: auto; padding-top: calc(var(--u) * 0.417); display: flex; justify-content: center; }
.panel .pf a { color: var(--text-2); text-decoration: none; font-size: calc(var(--u) * 0.573); }
.panel .pf a:hover { color: var(--text); }
.chart-box { position: relative; flex: 1 1 0; min-height: calc(var(--u) * 3); }
.chart-box canvas { position: absolute; inset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.208) calc(var(--u) * 0.729); font-size: 0.85em; color: var(--text-2); margin-top: calc(var(--u) * 0.417); }
.legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.312); }
.legend i { width: calc(var(--u) * 0.729); height: 2px; background: currentColor; display: inline-block; border-radius: 1px; }
.legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 calc(var(--u) * 0.156), transparent calc(var(--u) * 0.156) calc(var(--u) * 0.312)); }
.legend i.sq { width: calc(var(--u) * 0.469); height: calc(var(--u) * 0.469); border-radius: 2px; }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: calc(var(--u) * 0.26); overflow: hidden; }
.seg button { background: transparent; border: 0; padding: calc(var(--u) * 0.156) calc(var(--u) * 0.521); font-size: calc(var(--u) * 0.547); color: var(--text-2); cursor: pointer; }
.seg button.active { background: var(--panel-3); color: var(--text); }
.seg button:hover { color: var(--text); }
select.sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: calc(var(--u) * 0.26); padding: calc(var(--u) * 0.156) calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.573); }

/* ---------------------------------------------------------------- gauges */
.gauges { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(var(--u) * 0.417); }
.gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.gauge .g-title { font-size: calc(var(--u) * 0.521); color: var(--text-2); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; min-height: calc(var(--u) * 1.25); display: flex; align-items: center; justify-content: center; }
.gauge .g-sub { font-size: calc(var(--u) * 0.521); color: var(--muted); }
.gauge svg { width: 100%; max-width: var(--gauge-w); height: auto; display: block; }
.gauge .g-status { font-size: calc(var(--u) * 0.573); font-weight: 600; }
.gauge .g-limit { font-size: calc(var(--u) * 0.521); color: var(--muted); }
.gauge.sm svg { max-width: var(--gauge-sm); }

/* ----------------------------------------------------------------- tables */
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.92em; }
table.tbl th { text-align: left; font-size: calc(var(--u) * 0.495); letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: calc(var(--u) * 0.208) calc(var(--u) * 0.312); border-bottom: 1px solid var(--line); }
table.tbl td.nw, table.tbl td.num { white-space: nowrap; }
table.tbl td { padding: calc(var(--u) * 0.26) calc(var(--u) * 0.312); border-bottom: 1px solid rgba(34, 52, 79, 0.6); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.r, table.tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl.compact td { padding: calc(var(--u) * 0.156) calc(var(--u) * 0.312); }
.kv { display: flex; flex-direction: column; }
.kv .row { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 0.417); padding: 0.38em 0; border-bottom: 1px solid rgba(34, 52, 79, 0.6); font-size: 0.92em; }
.kv .row:last-child { border-bottom: 0; }
.kv .row .k { color: var(--text-2); display: flex; align-items: center; gap: calc(var(--u) * 0.417); }
.kv .row .k svg { width: calc(var(--u) * 0.781); height: calc(var(--u) * 0.781); color: var(--muted); }
.kv .row .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 0.417); }
.bar { height: calc(var(--u) * 0.312); border-radius: calc(var(--u) * 0.156); background: var(--panel-3); overflow: hidden; width: calc(var(--u) * 4.688); display: inline-block; vertical-align: middle; }
.bar i { display: block; height: 100%; background: var(--green); }
.chk { width: calc(var(--u) * 0.729); height: calc(var(--u) * 0.729); color: var(--green); }
.status-pill { font-size: calc(var(--u) * 0.521); padding: 2px calc(var(--u) * 0.417); border-radius: calc(var(--u) * 0.208); background: var(--panel-3); color: var(--text); font-weight: 600; }
.status-pill.ok { color: var(--green); }
.status-pill.active { background: rgba(255, 77, 87, 0.15); color: var(--red); }
.status-pill.ack { background: rgba(255, 159, 26, 0.15); color: var(--amber); }
.status-pill.cleared { background: rgba(127, 211, 35, 0.12); color: var(--green); }
.prio { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.312); font-weight: 600; }
.prio svg { width: calc(var(--u) * 0.729); height: calc(var(--u) * 0.729); }

/* ----------------------------------------------------------- cylinder bars */
.cyl-bars { display: grid; grid-template-columns: calc(var(--u) * 1.771) repeat(12, 1fr); gap: calc(var(--u) * 0.208); align-items: end; }
.cyl-bars .axis { font-size: calc(var(--u) * 0.495); color: var(--muted); display: flex; flex-direction: column; justify-content: space-between; height: calc(var(--u) * 8.5); text-align: right; padding-right: calc(var(--u) * 0.208); }
.cyl { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.156); font-size: calc(var(--u) * 0.547); }
.cyl .n { color: var(--text-2); font-weight: 600; }
.cyl .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.cyl .tube { width: calc(var(--u) * 0.625); height: calc(var(--u) * 8.5); border-radius: calc(var(--u) * 0.312); background: linear-gradient(180deg, var(--red) 0 12%, var(--orange) 12% 24%, var(--yellow) 24% 40%, var(--green) 40% 100%); position: relative; overflow: hidden; }
.cyl .tube .mask { position: absolute; left: 0; right: 0; top: 0; background: var(--panel-3); }
.cyl .tube .mark { position: absolute; left: -calc(var(--u) * 0.156); right: -calc(var(--u) * 0.156); height: 2px; background: var(--white); opacity: 0.9; }
.cyl .st { font-size: calc(var(--u) * 0.521); color: var(--green); display: flex; align-items: center; gap: calc(var(--u) * 0.156); }
.cyl .st.warn { color: var(--amber); }
.cyl .st.crit { color: var(--red); }
.cyl .st svg { width: calc(var(--u) * 0.573); height: calc(var(--u) * 0.573); }
.vcol { display: grid; grid-template-rows: auto 1fr; }

/* ----------------------------------------------------------- misc blocks */
.big { font-size: var(--fs-big); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.big small { font-size: calc(var(--u) * 0.625); color: var(--text-2); font-weight: 500; margin-left: calc(var(--u) * 0.156); }
.mid { font-size: 1.45em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; gap: calc(var(--u) * 0.156); }
.stat .lbl { font-size: calc(var(--u) * 0.495); letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat .val { font-size: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .val small { font-size: calc(var(--u) * 0.547); color: var(--text-2); font-weight: 500; margin-left: 2px; }
.stat .sub { font-size: calc(var(--u) * 0.547); color: var(--text-2); }
.row-stats { display: flex; gap: calc(var(--u) * 0.938); flex-wrap: wrap; }
.hr { border-top: 1px solid var(--line); margin: calc(var(--u) * 0.417) 0; }
.schem svg { width: 100%; height: auto; display: block; }
.icon-stat { display: flex; align-items: center; gap: calc(var(--u) * 0.521); }
.icon-stat svg { width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); color: var(--text-2); flex: none; }
.stars span { color: var(--yellow); font-size: calc(var(--u) * 0.729); letter-spacing: 1px; }
.stars span.off { color: var(--muted-2); }
.toolbar { display: flex; gap: calc(var(--u) * 0.521); align-items: center; flex-wrap: wrap; font-size: calc(var(--u) * 0.573); color: var(--muted); }
.btn { background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); border-radius: calc(var(--u) * 0.312); padding: calc(var(--u) * 0.312) calc(var(--u) * 0.625); font-size: calc(var(--u) * 0.599); cursor: pointer; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.312); }
.btn:hover { background: var(--line-2); }
.btn.primary { background: #1d5bd6; border-color: #2a6ae8; }
.btn.primary:hover { background: #2a6ae8; }
.btn svg { width: calc(var(--u) * 0.729); height: calc(var(--u) * 0.729); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.573); color: var(--muted); }
.pager .pg { display: flex; gap: calc(var(--u) * 0.208); }
.pager .pg button { min-width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); border-radius: calc(var(--u) * 0.208); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; font-size: calc(var(--u) * 0.573); }
.pager .pg button.active { background: var(--panel-3); color: var(--text); }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 0.521); }
.tile { border: 1px solid var(--line); border-radius: calc(var(--u) * 0.312); padding: calc(var(--u) * 0.521) calc(var(--u) * 0.625); background: var(--panel-2); display: flex; flex-direction: column; gap: calc(var(--u) * 0.156); min-height: calc(var(--u) * 4.479); }
.tile-grid { flex: 1; align-content: stretch; }
.map { flex: 1 1 auto; position: relative; min-height: calc(var(--u) * 8); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.schem { flex: 1; display: flex; align-items: center; }
.cyl-bars { flex: 1; align-content: center; }
.tile .t-h { display: flex; align-items: center; gap: calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.547); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.tile .t-h svg { width: calc(var(--u) * 0.833); height: calc(var(--u) * 0.833); color: var(--text-2); }
.tile .t-b { font-size: calc(var(--u) * 0.547); color: var(--text-2); }
.toggle { width: calc(var(--u) * 1.771); height: calc(var(--u) * 0.938); border-radius: calc(var(--u) * 0.469); background: #1d5bd6; position: relative; display: inline-block; }
.toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: calc(var(--u) * 0.729); height: calc(var(--u) * 0.729); border-radius: 50%; background: #fff; }
.compass svg { width: 100%; max-width: var(--gauge-w); height: auto; display: block; margin: 0 auto; }

.flash { animation: flash 1.2s ease-in-out infinite; }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.alarm-banner { flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 0.521); padding: calc(var(--u) * 0.417) calc(var(--u) * 0.625); border-radius: calc(var(--u) * 0.312); background: rgba(255, 77, 87, 0.12); border: 1px solid rgba(255, 77, 87, 0.4); color: var(--red); font-weight: 600; font-size: calc(var(--u) * 0.599); margin-bottom: calc(var(--u) * 0.521); }
.sim-ctl { display: flex; align-items: center; gap: calc(var(--u) * 0.312); font-size: calc(var(--u) * 0.547); color: var(--muted); }
.sim-ctl .seg button { padding: 2px calc(var(--u) * 0.365); font-size: calc(var(--u) * 0.521); }
.empty { color: var(--muted); font-size: calc(var(--u) * 0.599); padding: calc(var(--u) * 0.729) 0; text-align: center; }
.input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: calc(var(--u) * 0.26); padding: calc(var(--u) * 0.26) calc(var(--u) * 0.417); font-size: calc(var(--u) * 0.599); width: 100%; }
label.fl { display: flex; flex-direction: column; gap: calc(var(--u) * 0.208); font-size: calc(var(--u) * 0.547); color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.521) calc(var(--u) * 0.729); }
/* ---------------------------------------------------------- phones / narrow */
@media (max-width: 900px) {
  :root { --u: 4.1vw; --fs: max(13px, calc(var(--u) * 0.66)); --header-h: auto; --footer-h: auto; --side-w: 0px; }
  body { overflow: auto; }
  #app { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
  #header { flex-wrap: wrap; padding-bottom: calc(var(--u) * 0.5); }
  .hdr-brand { min-width: 0; width: 100%; border-right: 0; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.8); }
  .hdr-cells { flex-wrap: wrap; padding: 0 calc(var(--u) * 0.8); }
  .hdr-cell { flex: 1 1 45%; }
  .hdr-indusolve { display: none; }
  .hdr-user { width: 100%; border-left: 0; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.8) 0; }
  #sidebar { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; }
  .nav { flex-direction: row; padding: calc(var(--u) * 0.4); gap: calc(var(--u) * 0.3); }
  .nav a { white-space: nowrap; }
  .side-vessel { display: none; }
  #main { overflow: visible; display: block; padding: calc(var(--u) * 0.8); }
  .page { display: block; }
  .page-top { grid-template-columns: 1fr !important; }
  .hero { display: none; }
  .kpis { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
  .grid, .page > .grid { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
  .grid > * { width: 100%; }
  .panel { overflow: visible; }
  .chart-box { min-height: calc(var(--u) * 14) !important; }
  .map, .radar { min-height: calc(var(--u) * 18); }
  .gauges { flex-wrap: wrap; display: flex; justify-content: center; gap: calc(var(--u) * 1); }
  .gauge { flex: 0 0 calc(50% - var(--u)); }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .tbl-wrap { overflow-x: auto; }
  .tabs { position: sticky; top: 0; background: var(--bg); z-index: 2; }
  #footer { flex-wrap: wrap; }
  .ftr-cell { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; }
  .sim-ctl { display: none; }
}
}
@media print { #header, #sidebar, #footer { display: none; } }

.alarm-banner > svg { width: 1.1em; height: 1.1em; flex: none; }
.toast-slot { flex: 0 0 auto; }