/* ============================================================================
 * fgss_lng.css — Layout & page-structure styling for the LNG (X-DF) FGSS
 * simulator. Colours/typography come from the shared theme; this file only
 * lays out the header/nav/grid/pages and adds a few page-specific helpers.
 * ==========================================================================*/

/* Scenario modal stays hidden — the sim auto-starts Normal Ops, and scenarios
   are also selectable from the Instructor station. Prevents a load-time flash
   (and a stray pre-init click on its buttons). */
#modal-bg { display: none !important; }

/* Audio / mute button — slightly darker than the default faint header icon. */
#sf-mute-btn { color: rgba(255,255,255,0.85); filter: brightness(0.8); }

/* Service colour legend (matches the manual P&ID key) — bottom-left of the display. */
#pid-legend { position:absolute; left:14px; bottom:12px; display:flex; gap:14px;
  padding:6px 12px; background:rgba(20,30,45,0.72); border:1px solid var(--line,#2c3e50);
  border-radius:6px; font-family:'Share Tech Mono',monospace; font-size:11px; z-index:20; pointer-events:none; }
#pid-legend span { display:flex; align-items:center; gap:5px; color:var(--muted,#9ab1c8); }
#pid-legend i { width:20px; height:3px; display:inline-block; border-radius:2px; }

/* ============================================================================
 * LIGHT THEME (white background) — overrides the shared dark palette for THIS
 * simulator only (other sims keep the shared dark theme).
 * ==========================================================================*/
:root {
  --bg:      #ffffff;
  --bg2:     #eef3f9;
  --bg3:     #e2eaf3;
  --panel:   #ffffff;
  --border:  rgba(20,50,90,0.16);
  --border2: rgba(20,50,90,0.32);
  --white:   #15202e;        /* primary text — dark on light */
  --muted:   #54667d;
  --cyan:    #0c6f9e;
  --green:   #138a52;
  --amber:   #b0690f;
  --red:     #cf2740;
  --red2:    #b21f33;
  --blue:    #245ec9;
  --orange:  #c75a17;
  --glass:        rgba(255,255,255,0.86);
  --glass-border: rgba(20,50,90,0.10);
}
/* hardcoded dark surfaces in the shared theme → light */
#hdr, #header { background: linear-gradient(180deg, #f2f6fb 0%, #e7eef6 100%) !important;
  border-bottom: 1px solid var(--border2); box-shadow: 0 1px 6px rgba(20,50,90,0.08); }
#hclock, #clock { color: var(--green); text-shadow: none; }
/* Soft blue-grey canvas tint (instead of pure white) so pipelines — especially light media — stand out. */
#display-area, #ctr, .pid { background: #e7edf4; }
.split-2 > .pid, .split-2 > div:last-child { background: #eef2f7; }
/* light equipment-box panels (override the shared dark defaults) */
.pid-eqbox       { fill: #ffffff; stroke: #5a82ad; }
.pid-eqbox-title { fill: #15202e; }
.pid-eqbox-sub   { fill: #54667d; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden;
  background: var(--bg); color: var(--white);
  font-family: var(--font-ui); }

/* ---- App shell: header / nav / main rows ------------------------------- */
body { display: flex; flex-direction: column; }
#nav-bar { display: none !important; }   /* holds hidden shared nav bars only */
/* Header in 3 zones: 1) MENU (left)  2) SIM INFO (center)  3) everything else (right) */
#hdr { justify-content: flex-start; }
.hdr-menu { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hdr-info { flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; }
.hdr-info .h-title, .hdr-info .h-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Time-warp & pause are available in the Instructor (DNV) station — hide from top row */
.sf-tw-group { display: none !important; }
#sf-pause-btn { display: none !important; }
/* 2-panel layout: LEFT = simulator (P&ID), RIGHT = controls + gauges + scenario + alarms */
#main { flex: 1 1 0; min-height: 0; display: grid;
  grid-template-columns: 1fr 340px; gap: 4px;
  /* reserve a thin strip on the far right (just the 26px tab width + 1px) so the
     CONTROLS / DEVELOPER tabs sit snug BESIDE the panel with no dead band */
  padding: 4px 27px 4px 4px;
  background: var(--bg); }
/* Right panel collapse-to-right */
#main.rp-collapsed { grid-template-columns: 1fr 0 !important; }
#main.rp-collapsed #rp { display: none; }
#rp-tab { position: fixed; right: 0; top: 56px; z-index: 9001; writing-mode: vertical-rl;
  background: #103247; color: #cfe6f5; border: 1px solid #2a6a8a; border-right: none;
  border-radius: 6px 0 0 6px; padding: 12px 6px; cursor: pointer; letter-spacing: 1px;
  font: 700 11px "Share Tech Mono", monospace; box-shadow: -2px 2px 8px rgba(0,0,0,.25); }
#rp-tab:hover { background: #15394f; }

/* ---- Menu button + popup navigation ------------------------------------ */
/* Shared two-level bars are kept in the DOM but hidden (shared nav JS uses them) */
#nav-groups, #nav-pages { display: none !important; }

#menu-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; padding: 5px 14px; cursor: pointer; color: var(--cyan);
  background: var(--bg3); border: 1px solid var(--cyan); border-radius: 5px;
  flex-shrink: 0; white-space: nowrap; }
#menu-btn:hover { background: rgba(43,184,224,.15); }
#nav-current { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase; }
#nav-current b { color: var(--white); }

#nav-popup { display: none; position: fixed; top: 46px; left: 10px; z-index: 200;
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border2); border-radius: 12px;
  padding: 14px; box-shadow: 0 18px 48px rgba(20,50,90,.28);
  /* MASONRY: cards flow & pack by height so single-item groups don't leave ragged gaps */
  column-width: 200px; column-count: 3; column-gap: 12px;
  max-width: 94vw; max-height: 86vh; overflow: auto; }
#nav-popup.open { display: block; }
/* Menu header spanning the whole popup */
#nav-popup::before { content: 'NAVIGATION'; display: block; column-span: all;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--cyan); padding: 0 2px 9px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.nav-pop-grp { background: linear-gradient(180deg, #fbfdff, var(--bg2));
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 8px;
  box-shadow: 0 1px 3px rgba(20,50,90,.06);
  break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 12px; }
.nav-pop-grp h4 { margin: 0 0 8px; padding-left: 8px; line-height: 1;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--cyan); letter-spacing: .1em; text-transform: uppercase;
  border-left: 3px solid var(--cyan); }
.nav-pop-pg { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  margin: 3px 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--white); background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 7px 9px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s; }
.nav-pop-pg::before { content: '▸'; color: var(--muted); font-size: 10px;
  transition: color .12s, transform .12s; }
.nav-pop-pg:hover { background: rgba(12,111,158,.09); border-color: var(--border2);
  transform: translateX(2px); }
.nav-pop-pg:hover::before { color: var(--cyan); }
.nav-pop-pg.active { color: var(--green); background: rgba(19,138,82,.12);
  border-color: var(--green); font-weight: 700; }
.nav-pop-pg.active::before { content: '●'; color: var(--green); }
.nav-pop-pn { display: inline-block; min-width: 24px; text-align: center; margin-left: auto;
  padding: 1px 6px; border-radius: 5px; background: var(--cyan); color: #fff;
  font-weight: 700; font-size: 9.5px; letter-spacing: .04em; }

/* ---- Panels ------------------------------------------------------------ */
#rp { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* collapsible SYSTEM CONTROLS section (top of right panel) */
.rp-hd-toggle { cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; user-select: none; }
#ctrl-chev { color: var(--muted); font-size: 10px; }
#controls-sec.collapsed #side-body { display: none; }
.s-hd, .rp-hd { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--cyan); padding: 7px 10px;
  border-bottom: 1px solid var(--border); background: var(--bg3);
  flex-shrink: 0; text-transform: uppercase; }
#side-body { max-height: 52vh; overflow-y: auto; padding: 8px; }
/* While the simulation is PAUSED, freeze flow (marching-dash) animations everywhere — e.g. the bunkering
   liquid/vapour overlays — so nothing appears to flow when the plant is stopped. Status blinks/pulses keep
   running. (Driven by html.fgss-paused set from S.paused in the tick loop.) */
html.fgss-paused #page-shore .liq-flow,
html.fgss-paused #page-shore .vap-flow,
html.fgss-paused #page-shore .hose-draw,
html.fgss-paused .flow-line { animation-play-state: paused !important; }
.rp-scroll { overflow-y: auto; }
.rp-scroll::-webkit-scrollbar, #side-body::-webkit-scrollbar,
.alarm-list::-webkit-scrollbar { width: 8px; }
.rp-scroll::-webkit-scrollbar-thumb, #side-body::-webkit-scrollbar-thumb,
.alarm-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

#rp { }
.rp-sec { display: flex; flex-direction: column; border-bottom: 1px solid var(--border);
  min-height: 0; }
.rp-sec.rp-grow { flex: 1 1 0; }
.rp-body { padding: 8px; overflow-y: auto; }
#gauges { max-height: 230px; }
.alarm-list { flex: 1 1 0; min-height: 80px; overflow-y: auto; padding: 6px; }

/* ---- Center column ----------------------------------------------------- */
#ctr { display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative; }

/* ---- Pan/zoom widget + semantic level-of-detail ------------------------ */
#zoom-ctl { position: absolute; right: 12px; bottom: 12px; z-index: 40;
  display: flex; flex-direction: column; gap: 4px; }
#zoom-ctl button { width: 30px; height: 30px; font-size: 16px; font-weight: 700;
  cursor: pointer; border-radius: 6px; border: 1px solid var(--border2);
  background: var(--panel); color: var(--white); line-height: 1;
  box-shadow: 0 2px 8px rgba(20,50,90,0.18); }
#zoom-ctl button:hover { border-color: var(--cyan); color: var(--cyan); }
/* semantic zoom: hide fine sub-detail when zoomed out (fit); reveal as you zoom in */
.pid.zoom-low .pid-eqbox-sub { visibility: hidden; }
#op-bar { display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg3);
  flex-shrink: 0; }
#op-bar .op-right { margin-left: auto; }
#page-num-badge { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: #07344a; background: #2bb6e6; border-radius: 5px;
  padding: 2px 8px; min-width: 26px; text-align: center; }
#page-num-badge:empty { display: none; }
.op-title { font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--amber); }
#display-area { flex: 1 1 0; min-height: 0; min-width: 0; position: relative;
  display: flex; }
.disp-page { display: none; flex: 1 1 0; min-height: 0; min-width: 0;
  overflow: hidden; padding: 6px; }
.disp-page.active { display: flex; flex-direction: column; }

/* ---- P&ID container ---------------------------------------------------- */
.pid { flex: 1 1 0; min-height: 0; min-width: 0; display: flex;
  align-items: stretch; justify-content: center; overflow: hidden; }
.pid svg { width: 100%; height: 100%; }

/* ---- Split layout for component pages (display + controls) ------------- */
.split-2 { flex: 1 1 0; min-height: 0; display: grid;
  grid-template-columns: 1fr 300px; gap: 6px; }
.split-2 > .pid { background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); }
.split-2 > div:last-child { overflow-y: auto; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }

/* ---- Status overview page --------------------------------------------- */
.status-grid { flex: 1 1 0; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(0, 1fr);
  gap: 6px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; display: flex;
  flex-direction: column; min-height: 0; overflow: hidden; }
.stat-card h3 { font-family: var(--font-mono); font-size: 11px; color: var(--cyan);
  margin: 0 0 8px; letter-spacing: .05em; text-transform: uppercase; }
.stat-line { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px; padding: 3px 0;
  border-bottom: 1px dotted var(--border); }
.stat-line .k { color: var(--muted); }
.stat-line .v { color: var(--white); font-weight: 700; }
.stat-line .v.warn { color: var(--amber); }
.stat-line .v.alarm { color: var(--red); }
.stat-line .v.ok { color: var(--green); }
.big-readout { font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  color: var(--cyan); text-align: center; margin: 6px 0; }
.big-readout small { display: block; font-size: 11px; color: var(--muted);
  letter-spacing: .08em; }

/* ---- Side control widgets --------------------------------------------- */
.ctrl-sec { margin-bottom: 12px; }
.ctrl-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: .05em; margin: 6px 0 4px; text-transform: uppercase; }
.big-btn { width: 100%; padding: 9px; margin: 3px 0; border-radius: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; border: 1px solid var(--border2);
  background: var(--bg3); color: var(--white); }
.big-btn:hover { border-color: var(--cyan); }
.big-btn.start { border-color: var(--green); color: var(--green); }
.big-btn.stop  { border-color: var(--amber); color: var(--amber); }
.big-btn.esd   { border-color: var(--red); color: var(--red); background: rgba(239,68,88,.08); }
.big-btn.esd.fired { background: var(--red); color: #fff; }
.big-btn.on    { background: rgba(37,198,133,.16); border-color: var(--green); color: var(--green); }
.big-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Difficulty badges (modal) ---------------------------------------- */
.diff { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 700;
  letter-spacing: .05em; margin-left: 6px; }
.diff.beginner    { background: rgba(37,198,133,.2); color: var(--green); }
.diff.intermediate{ background: rgba(230,165,50,.2); color: var(--amber); }
.diff.advanced    { background: rgba(239,68,88,.2); color: var(--red); }

/* ---- Hot links between pages ------------------------------------------ */
.hotlink { display: inline-block; font-family: var(--font-mono); font-size: 10px;
  color: var(--cyan); cursor: pointer; padding: 3px 8px; margin: 2px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg3); }
.hotlink:hover { border-color: var(--cyan); background: rgba(43,184,224,.1); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1366px) {
  #main { grid-template-columns: 1fr 290px; }
  .split-2 { grid-template-columns: 1fr 240px; }
}

/* ---- Valve set popup (Open / Close / Intermediate) --------------------- */
#vv-popup { display: none; position: fixed; z-index: 210; width: 204px;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20,50,90,0.28); padding: 10px; }
#vv-popup.open { display: block; }
.vv-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--cyan); margin-bottom: 8px; letter-spacing: .04em; }
.vv-row { display: flex; gap: 6px; margin-bottom: 8px; }
.vv-b { padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  cursor: pointer; border-radius: 5px; border: 1px solid var(--border2);
  background: var(--bg3); color: var(--white); }
.vv-row .vv-b { flex: 1; }
.vv-b.vv-open  { border-color: var(--green); color: var(--green); }
.vv-b.vv-close { border-color: var(--red); color: var(--red); }
.vv-inter { display: flex; align-items: center; gap: 6px; }
.vv-inter input[type=range] { flex: 1; min-width: 0; }
.vv-val { font-family: var(--font-mono); font-size: 11px; color: var(--white);
  width: 36px; text-align: right; }
.vv-b.vv-set { flex: 0 0 auto; padding: 5px 9px; border-color: var(--cyan); color: var(--cyan); }

/* Inline-symbol labels (valve / NRV / spool / blank flange) enlarged to 200% for readability.
   !important beats the components' inline/base font-size. */
.sv-label, .nrv-label, .sp-label, .bf-label { font-size: 20px !important; letter-spacing: 1px; }

/* ============================================================================
 * VISUAL POLISH — cohesive UI refresh of the app shell (header, panels, buttons,
 * cards, tables). Loaded last so it tops the cascade. The P&ID drawing itself
 * (.pid svg and all SVG symbol/pipe classes) is deliberately NOT touched.
 * ==========================================================================*/

/* Header: a touch more presence + crisper title hierarchy */
#hdr, #header { box-shadow: 0 2px 10px rgba(20,50,90,0.10) !important; }
.hdr-info .h-title { font-weight: 800; letter-spacing: .12em; color: var(--white); }
.hdr-info .h-sub   { color: var(--muted); letter-spacing: .06em; }

/* Menu button: pill with a subtle gradient + smooth hover */
#menu-btn { background: linear-gradient(180deg,#ffffff,var(--bg3));
  border-radius: 7px; box-shadow: 0 1px 2px rgba(20,50,90,.10);
  transition: background .12s, box-shadow .12s, transform .12s; }
#menu-btn:hover { background: linear-gradient(180deg,#ffffff,#dbe7f4);
  box-shadow: 0 2px 8px rgba(12,111,158,.22); }
#menu-btn:active { transform: translateY(1px); }

/* Right panel + center column: softer corners and a gentle lift */
#rp, #ctr { box-shadow: 0 2px 12px rgba(20,50,90,0.07); }

/* Section headers (SYSTEM CONTROLS, gauges, alarms, op-bar): accent bar + gradient */
.s-hd, .rp-hd, #op-bar { background: linear-gradient(180deg,#f4f8fc,var(--bg3)); }
.s-hd, .rp-hd { border-left: 3px solid var(--cyan); }

/* Control-panel section headers: matching cyan accent bar */
.ctrl-section-hdr { padding-left: 8px; border-left: 3px solid var(--cyan);
  border-bottom: 1px solid var(--border); }

/* Buttons in the control panels: rounded, springy hover, clear active state */
.ctrl-btn { border-radius: 6px; transition: background .12s, border-color .12s,
  color .12s, box-shadow .12s, transform .08s; }
.ctrl-btn:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan);
  background: rgba(12,111,158,.08); box-shadow: 0 1px 4px rgba(12,111,158,.16); }
.ctrl-btn:active:not(:disabled) { transform: translateY(1px); }
.ctrl-btn.active { box-shadow: inset 0 0 0 1px rgba(19,138,82,.35); }

/* Status / overview cards: soft elevation + accented titles */
.stat-card { background: linear-gradient(180deg,#ffffff,var(--bg2));
  box-shadow: 0 2px 8px rgba(20,50,90,0.07); transition: box-shadow .15s, transform .15s; }
.stat-card:hover { box-shadow: 0 4px 16px rgba(20,50,90,0.12); }
.stat-card h3 { padding-left: 8px; border-left: 3px solid var(--cyan); }

/* Zoom + value popups: consistent springy buttons */
#zoom-ctl button, .vv-b { transition: background .12s, border-color .12s, color .12s, transform .08s; }
#zoom-ctl button:active, .vv-b:active { transform: translateY(1px); }

/* Page-number badge in the op-bar: pill matching the menu badge */
#page-num-badge { background: var(--cyan); color: #fff; border-radius: 5px; }

/* NET FLOW DIRECTION toggle button in the op-bar (all users) */
.op-fdbtn { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; color: var(--cyan);
  background: linear-gradient(180deg,#ffffff,var(--bg3)); border: 1px solid var(--cyan);
  box-shadow: 0 1px 2px rgba(20,50,90,.1); transition: background .12s, box-shadow .12s, transform .08s; }
.op-fdbtn:hover { background: linear-gradient(180deg,#ffffff,#dbe7f4); box-shadow: 0 2px 8px rgba(12,111,158,.22); }
.op-fdbtn:active { transform: translateY(1px); }
.op-fdbtn.on { background: var(--cyan); color: #fff; border-color: var(--cyan); }

/* Custom scrollbars everywhere in the panels (lighter, rounded) */
#side-body::-webkit-scrollbar, .rp-body::-webkit-scrollbar,
.alarm-list::-webkit-scrollbar, #nav-popup::-webkit-scrollbar { width: 9px; height: 9px; }
#side-body::-webkit-scrollbar-thumb, .rp-body::-webkit-scrollbar-thumb,
.alarm-list::-webkit-scrollbar-thumb, #nav-popup::-webkit-scrollbar-thumb {
  background: var(--border2); border-radius: 5px; }
#side-body::-webkit-scrollbar-thumb:hover, .rp-body::-webkit-scrollbar-thumb:hover {
  background: var(--cyan); }

/* ============================================================================
 * MULTI-THEME FUTURISTIC CHROME — variable-driven so one structural block
 * serves 6 palettes (3 light + 3 dark). The active palette's variables are set
 * on <html> by fgss_lng_theme.js; defaults below = "Light · Aqua" (light-1).
 * Dark palettes additionally remap the P&ID's hard-coded SVG colours (scoped by
 * html[data-fgss-theme^="dark"]). Loaded last → tops the cascade.
 * ==========================================================================*/
:root {
  --bg:#e9eff8; --ink:#15324c; --muted:#5d7591;
  --acc:#0a93b8; --acc-ink:#0a7390; --on:#0e9d62; --on-ink:#0a7a4c;
  --danger:#dd3a5b; --warn:#bd7d0c;
  --surf1:#ffffff; --surf2:#eef5fc;
  --line:rgba(11,135,166,0.20); --line2:rgba(11,135,166,0.42);
  --glass:rgba(255,255,255,0.82); --pid-bg:#eef4fc; --shadow:rgba(20,60,90,0.12);
  --glowA:rgba(11,147,184,0.10); --glowB:rgba(14,157,98,0.07);
  --hdr1:#ffffff; --hdr2:#eef4fb; --tab1:#ffffff; --tab2:#e9f2fa;
  /* keep legacy names other code may reference */
  --cyan:var(--acc); --green:var(--on); --red:var(--danger); --white:var(--ink); --border:var(--line); --border2:var(--line2);
}
html, body { background:var(--bg) !important; color:var(--ink); }
#main { background:
   radial-gradient(1200px 620px at 72% -12%, var(--glowA), transparent 60%),
   radial-gradient(900px 520px at -5% 112%, var(--glowB), transparent 60%),
   var(--bg) !important; }

/* schematic canvas */
#display-area, #ctr, .pid, .split-2 > .pid { background:var(--pid-bg) !important; }
.pid-eqbox       { fill:var(--surf1) !important; stroke:var(--line2) !important; }
.pid-eqbox-title { fill:var(--ink) !important; }
.pid-eqbox-sub   { fill:var(--muted) !important; }
.sv-label, .nrv-label, .sp-label, .bf-label, .prv-label {
  color:var(--ink) !important; text-shadow:0 0 3px var(--pid-bg), 0 0 2px var(--pid-bg) !important; }
.pid-label, .cp-label, .eq-label { color:var(--ink) !important; }

/* Header — glass with accent underline */
#hdr, #header { background:linear-gradient(180deg,var(--hdr1),var(--hdr2)) !important;
  border-bottom:1px solid var(--line2) !important;
  box-shadow:0 3px 18px var(--shadow), inset 0 -1px 0 var(--line2) !important; }
.hdr-info .h-title { color:var(--ink) !important; letter-spacing:.14em; }
.hdr-info .h-sub { color:var(--muted) !important; }
#hclock, #clock { color:var(--acc-ink) !important; }

/* header action pills */
#fs-btn, #exit-btn, #help-btn, #dnv-open-btn, #fgss-theme-pick, #pgd-hdr-btn {
  font:700 11px 'Share Tech Mono', monospace !important; letter-spacing:.06em; text-decoration:none;
  padding:5px 12px !important; border-radius:7px !important; cursor:pointer;
  display:inline-flex; align-items:center; margin-left:8px;
  background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important; color:var(--acc-ink) !important;
  border:1px solid var(--line2) !important; transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
#fs-btn:hover, #help-btn:hover, #dnv-open-btn:hover, #fgss-theme-pick:hover, #pgd-hdr-btn:hover {
  border-color:var(--acc) !important; box-shadow:0 0 10px var(--line2) !important; }
/* Portable gas-detector header switch — pill carrying an LED status dot; glows + pulses green while armed (ON). */
#pgd-hdr-btn { position:relative; padding-left:26px !important; text-shadow:0 1px 0 rgba(0,0,0,.25); }
#pgd-hdr-btn::before { content:''; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:#5b6b7a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.25); transition:background .15s, box-shadow .15s; }
#pgd-hdr-btn:hover { border-color:var(--acc) !important; box-shadow:0 0 10px var(--line2) !important; }
#pgd-hdr-btn.on { color:#04231a !important; border-color:#2ad08a !important; text-shadow:none;
  background:linear-gradient(180deg,#bff8da,#3ec98a) !important;
  box-shadow:0 0 12px rgba(60,201,138,.55), inset 0 1px 0 rgba(255,255,255,.5) !important; }
#pgd-hdr-btn.on::before { background:#0bf08a;
  box-shadow:0 0 8px #19ff9e, inset 0 0 0 1px rgba(0,80,40,.35); animation:pgd-pulse 1.6s ease-in-out infinite; }
@keyframes pgd-pulse { 0%,100% { box-shadow:0 0 5px #19ff9e, inset 0 0 0 1px rgba(0,80,40,.35); }
  50% { box-shadow:0 0 13px #19ff9e, 0 0 3px #7dffc6, inset 0 0 0 1px rgba(0,80,40,.35); } }
#exit-btn { color:var(--danger) !important; border-color:var(--danger) !important; }
#exit-btn:hover { background:var(--danger) !important; color:var(--surf1) !important; }
#hclock { margin-left:14px !important; padding-left:14px !important; border-left:1px solid var(--line2) !important; }
#fs-btn { margin-left:14px !important; }
.rp-sec { padding-bottom:1px; }

/* Centre frame + op-bar */
#ctr { border:1px solid var(--line) !important; box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px var(--shadow) !important; }
#op-bar { background:linear-gradient(180deg,var(--surf2),var(--bg)) !important; border-bottom:1px solid var(--line) !important; }

/* Right panel */
#rp { background:var(--glass) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line) !important; box-shadow:0 10px 30px var(--shadow) !important; }
.rp-sec, #side-body { border-color:var(--line) !important; }

/* Section headers */
.s-hd, .rp-hd, .ctrl-section-hdr, .stat-card h3 {
  background:linear-gradient(180deg,var(--surf2),var(--bg)) !important; color:var(--acc-ink) !important;
  border-left:3px solid var(--acc) !important; }

/* Buttons */
.big-btn, .ctrl-btn, .vv-b, #zoom-ctl button, .hotlink, .op-fdbtn {
  background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important; color:var(--ink) !important;
  border:1px solid var(--line2) !important; }
.big-btn:hover, .ctrl-btn:hover:not(:disabled), .vv-b:hover, #zoom-ctl button:hover,
.hotlink:hover, .op-fdbtn:hover { border-color:var(--acc) !important; color:var(--acc-ink) !important;
  box-shadow:0 0 12px var(--line2) !important; }
.ctrl-btn.active, .big-btn.on, .op-fdbtn.on {
  background:color-mix(in srgb, var(--on) 14%, transparent) !important; border-color:var(--on) !important; color:var(--on-ink) !important; }
.big-btn.esd { border-color:var(--danger) !important; color:var(--danger) !important; background:color-mix(in srgb, var(--danger) 9%, transparent) !important; }
.big-btn.esd.fired { background:var(--danger) !important; color:var(--surf1) !important; }

/* Status cards */
.stat-card { background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important;
  border:1px solid var(--line) !important; box-shadow:0 6px 18px var(--shadow) !important; }
.stat-card:hover { box-shadow:0 8px 24px var(--shadow), 0 0 14px var(--line2) !important; }
.stat-line { border-bottom:1px dotted var(--line) !important; }
.big-readout { color:var(--acc-ink) !important; }

.split-2 > div:last-child { background:var(--surf2) !important; border:1px solid var(--line) !important; }

/* Menu + nav popup */
#menu-btn { background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important; color:var(--acc-ink) !important;
  border:1px solid var(--acc) !important; box-shadow:0 0 8px var(--line2) !important; }
#nav-current b { color:var(--ink) !important; }
#nav-popup { background:var(--surf1) !important; border:1px solid var(--line2) !important; box-shadow:0 22px 60px var(--shadow) !important; }
.nav-pop-grp { background:linear-gradient(180deg,var(--surf2),var(--bg)) !important; border:1px solid var(--line) !important; }
.nav-pop-pg { color:var(--ink) !important; }
.nav-pop-pg:hover { background:color-mix(in srgb, var(--acc) 10%, transparent) !important; border-color:var(--line2) !important; }
.nav-pop-pg.active { color:var(--on-ink) !important; background:color-mix(in srgb, var(--on) 12%, transparent) !important; border-color:var(--on) !important; }

/* Side tabs */
#instr-fab, #rp-tab, #rp-tab-pgd, #dev-fab, #simlogic-fab, #ses-launch, #rp-hide-fab {
  background:linear-gradient(180deg,var(--tab1),var(--tab2)) !important; color:var(--acc-ink) !important;
  border:1px solid var(--line2) !important; box-shadow:-2px 2px 12px var(--shadow) !important; }
#instr-fab:hover, #rp-tab:hover, #rp-tab-pgd:hover, #dev-fab:hover, #simlogic-fab:hover, #ses-launch:hover, #rp-hide-fab:hover {
  box-shadow:-2px 2px 14px var(--shadow), 0 0 14px var(--line2) !important; }

/* Badges */
#page-num-badge { background:var(--acc) !important; color:var(--surf1) !important; }
#tabsync-badge { color:var(--on-ink) !important; }

/* Developer view (shares #rp) — adapts to theme */
#dev-panel { background:var(--surf2) !important; color:var(--ink) !important; }
#dev-panel .dp-hd, #dev-panel .sec-hd { color:var(--acc-ink) !important; }
#dev-panel label, #dev-panel span { color:var(--ink); }
#dev-panel .dp-hint, #dev-panel .dnv-note { color:var(--muted) !important; }
#dev-panel input[type=text], #dev-panel input[type=number], #dev-panel select {
  background:var(--surf1) !important; color:var(--ink) !important; border:1px solid var(--line2) !important; }
#dev-panel .dp-foot button { background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important; color:var(--ink) !important; border:1px solid var(--line2) !important; }

/* Scrollbars */
#side-body::-webkit-scrollbar-thumb, .rp-body::-webkit-scrollbar-thumb,
.alarm-list::-webkit-scrollbar-thumb, #nav-popup::-webkit-scrollbar-thumb { background:var(--line2) !important; }
#side-body::-webkit-scrollbar-thumb:hover, .rp-body::-webkit-scrollbar-thumb:hover { background:var(--acc) !important; }

/* ── DARK palettes: remap the P&ID's hard-coded light SVG colours so the
 *    schematic reads on a dark canvas (light themes keep the original colours). */
html[data-fgss-theme^="dark"] .pid rect[fill="#e2e8f0"],
html[data-fgss-theme^="dark"] .pid rect[fill="#eef6ef"],
html[data-fgss-theme^="dark"] .pid rect[fill="#f3eef9"] { fill:#142136 !important; }
html[data-fgss-theme^="dark"] .pid text[fill="#23303a"], html[data-fgss-theme^="dark"] .pid text[fill="#37485a"],
html[data-fgss-theme^="dark"] .pid text[fill="#15512f"], html[data-fgss-theme^="dark"] .pid text[fill="#1a1a1a"],
html[data-fgss-theme^="dark"] .pid text[fill="#143247"], html[data-fgss-theme^="dark"] .pid text[fill="#22333f"],
html[data-fgss-theme^="dark"] .pid text[fill="#000000"], html[data-fgss-theme^="dark"] .pid text[fill="#000"],
html[data-fgss-theme^="dark"] .pid text[fill="black"], html[data-fgss-theme^="dark"] .pid text[fill="#222"],
html[data-fgss-theme^="dark"] .pid text[fill="#333"], html[data-fgss-theme^="dark"] .pid text[fill="#2a2a2a"] { fill:#cfe2f4 !important; }
html[data-fgss-theme^="dark"] .pid text[fill="#8a9097"] { fill:#8fa6c4 !important; }
html[data-fgss-theme^="dark"] .pid text[fill="#1f6f9c"] { fill:#3fc6f0 !important; }
html[data-fgss-theme^="dark"] .pid text[fill="#1f6f4a"], html[data-fgss-theme^="dark"] .pid text[fill="#15512f"] { fill:#37e0a0 !important; }
html[data-fgss-theme^="dark"] .pid text[fill="#c46a18"] { fill:#ffb259 !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#33414e"], html[data-fgss-theme^="dark"] .pid line[stroke="#33414e"] { stroke:#16243a !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#f0f4f8"], html[data-fgss-theme^="dark"] .pid line[stroke="#f0f4f8"] { stroke:#acc6e2 !important; }
html[data-fgss-theme^="dark"] .pid line[stroke="#4a6a8a"], html[data-fgss-theme^="dark"] .pid line[stroke="#5a7a9a"], html[data-fgss-theme^="dark"] .pid line[stroke="#5a6b7a"] { stroke:#9fbcdc !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#0000ff"], html[data-fgss-theme^="dark"] .pid line[stroke="#0000ff"] { stroke:#6fb0ff !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#02b3b3"], html[data-fgss-theme^="dark"] .pid line[stroke="#02b3b3"] { stroke:#4fe3e3 !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#ffa500"], html[data-fgss-theme^="dark"] .pid line[stroke="#ffa500"] { stroke:#ffc46b !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#4caf50"], html[data-fgss-theme^="dark"] .pid line[stroke="#4caf50"],
html[data-fgss-theme^="dark"] .pid path[stroke="#6fb06f"], html[data-fgss-theme^="dark"] .pid line[stroke="#6fb06f"] { stroke:#74e69a !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#b8860b"] { stroke:#e9c25a !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#949494"] { stroke:#9fb2c6 !important; }

/* ── DARK palettes: brighten the marine SERVICE pipe colours so every line reads
 *    on the dark P&ID canvas (light themes keep the catalogue colours). Targets the
 *    coloured "outer" pipe stroke drawn by FlowPipeRenderer.createSvgPipe. ── */
html[data-fgss-theme^="dark"] .pid path[stroke="#9b27b0"], html[data-fgss-theme^="dark"] .pid line[stroke="#9b27b0"] { stroke:#cf63e6 !important; }  /* LNG / Spray */
html[data-fgss-theme^="dark"] .pid path[stroke="#00a6d6"], html[data-fgss-theme^="dark"] .pid line[stroke="#00a6d6"] { stroke:#46d4f7 !important; }  /* Cold NG */
html[data-fgss-theme^="dark"] .pid path[stroke="#d4202a"], html[data-fgss-theme^="dark"] .pid line[stroke="#d4202a"] { stroke:#ff5b64 !important; }  /* Warm NG / Vapour */
html[data-fgss-theme^="dark"] .pid path[stroke="#7f7f7f"], html[data-fgss-theme^="dark"] .pid line[stroke="#7f7f7f"] { stroke:#aab6c4 !important; }  /* Inert Gas */
html[data-fgss-theme^="dark"] .pid path[stroke="#8a8f96"], html[data-fgss-theme^="dark"] .pid line[stroke="#8a8f96"] { stroke:#b3c2d4 !important; }  /* Nitrogen */
html[data-fgss-theme^="dark"] .pid path[stroke="#8a8f96"] { stroke:#b3c2d4 !important; }
html[data-fgss-theme^="dark"] .pid path[stroke="#8b4513"], html[data-fgss-theme^="dark"] .pid line[stroke="#8b4513"] { stroke:#cf8a4a !important; }  /* Diesel Oil */
html[data-fgss-theme^="dark"] .pid path[stroke="#800000"], html[data-fgss-theme^="dark"] .pid line[stroke="#800000"] { stroke:#e25b5b !important; }  /* Fuel Oil */
html[data-fgss-theme^="dark"] .pid path[stroke="#f0a526"], html[data-fgss-theme^="dark"] .pid line[stroke="#f0a526"] { stroke:#ffc15a !important; }  /* Hydraulic Oil */
html[data-fgss-theme^="dark"] .pid path[stroke="#ff8c00"], html[data-fgss-theme^="dark"] .pid line[stroke="#ff8c00"] { stroke:#ffab47 !important; }  /* Lubricating Oil */
html[data-fgss-theme^="dark"] .pid path[stroke="#16b21f"], html[data-fgss-theme^="dark"] .pid line[stroke="#16b21f"] { stroke:#3ee84a !important; }  /* Sea Water */
html[data-fgss-theme^="dark"] .pid path[stroke="#1f6feb"], html[data-fgss-theme^="dark"] .pid line[stroke="#1f6feb"] { stroke:#5fa0ff !important; }  /* Fresh Water */
html[data-fgss-theme^="dark"] .pid path[stroke="#2e9e3a"], html[data-fgss-theme^="dark"] .pid line[stroke="#2e9e3a"] { stroke:#50d75e !important; }  /* Glycol Water */
html[data-fgss-theme^="dark"] .pid path[stroke="#202020"], html[data-fgss-theme^="dark"] .pid line[stroke="#202020"] { stroke:#6b7787 !important; }  /* Bilge Water */
html[data-fgss-theme^="dark"] .pid path[stroke="#0747a6"], html[data-fgss-theme^="dark"] .pid line[stroke="#0747a6"] { stroke:#5a8fe6 !important; }  /* Condensate */
html[data-fgss-theme^="dark"] .pid path[stroke="#aeb6bf"], html[data-fgss-theme^="dark"] .pid line[stroke="#aeb6bf"] { stroke:#c8d2de !important; }  /* Air */
html[data-fgss-theme^="dark"] .pid path[stroke="#e60000"], html[data-fgss-theme^="dark"] .pid line[stroke="#e60000"] { stroke:#ff4d4d !important; }  /* Fire Fighting */
/* Custom per-pipe colours actually used on the P&ID that read too dark on the dark canvas */
html[data-fgss-theme^="dark"] .pid path[stroke="#a42b2b"], html[data-fgss-theme^="dark"] .pid line[stroke="#a42b2b"] { stroke:#ff5b64 !important; }  /* dark red line */
html[data-fgss-theme^="dark"] .pid path[stroke="#8a8f98"], html[data-fgss-theme^="dark"] .pid line[stroke="#8a8f98"] { stroke:#b3c2d4 !important; }  /* grey line */
html[data-fgss-theme^="dark"] .pid path[stroke="#2e7d32"], html[data-fgss-theme^="dark"] .pid line[stroke="#2e7d32"] { stroke:#4fd05c !important; }  /* dark green line */
html[data-fgss-theme^="dark"] .pid path[stroke="#378ADD"], html[data-fgss-theme^="dark"] .pid line[stroke="#378ADD"] { stroke:#5fb0ff !important; }  /* LNG blue line */

/* ── Header ergonomics (fgss_lng_ergonomics.js): unified pills + task-group separators ── */
#hdr .hdr-pill {
  font:700 11px 'Share Tech Mono', monospace !important; letter-spacing:.06em !important; text-decoration:none !important;
  padding:5px 12px !important; border-radius:7px !important; cursor:pointer; white-space:nowrap;
  display:inline-flex !important; align-items:center; margin-left:8px !important;
  background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important; color:var(--acc-ink) !important;
  border:1px solid var(--line2) !important;
  transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
#hdr .hdr-pill:hover { border-color:var(--acc) !important; box-shadow:0 0 10px var(--line2) !important; }
/* INSTRUCTOR station = the hub that hosts the assessor tools: subtle emphasis */
#dnv-open-btn.hdr-pill { border-color:var(--acc) !important; font-weight:800 !important;
  box-shadow:inset 0 0 0 1px var(--line2) !important; }
/* vertical separator between task groups (Status | Tools | View | Exit) */
#hdr .hdr-sep { width:1px; align-self:center; height:20px; margin:0 3px 0 9px;
  background:var(--line2); opacity:.6; flex:0 0 auto; border-radius:1px; }

/* ── Scenario modal: task-grouped sections ── */
#modal .mg-sec { margin-bottom:16px; }
#modal .mg-glabel { font:700 12px 'Share Tech Mono', monospace; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acc-ink,#1f6f9c); margin:2px 2px 9px; padding-bottom:5px; border-bottom:1px solid var(--line2,#cdd9e6); }

/* ── Right-side TOOLS menu (fgss_lng_ergonomics.js): one button → dropdown of facility buttons ── */
#hdr-tools-btn { font:700 11px 'Share Tech Mono', monospace !important; letter-spacing:.06em; cursor:pointer;
  padding:5px 12px !important; border-radius:7px !important; margin-left:8px;
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(180deg,var(--surf1),var(--surf2)); color:var(--acc-ink);
  border:1px solid var(--acc); box-shadow:0 0 8px var(--line2);
  transition:background .12s, border-color .12s, box-shadow .12s; }
#hdr-tools-btn:hover, #hdr-tools-btn.open {
  background:color-mix(in srgb, var(--acc) 12%, transparent); box-shadow:0 0 12px var(--line2); }
#hdr-tools-menu { position:fixed; z-index:9500; min-width:224px; max-width:300px;
  background:var(--surf1,#fff); border:1px solid var(--line2,#cdd9e6); border-radius:10px;
  box-shadow:0 22px 60px var(--shadow,rgba(20,50,90,.28)); padding:8px; }
#hdr-tools-menu .htm-label { font:700 9.5px 'Share Tech Mono', monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted,#6c829a); padding:8px 8px 4px; margin-top:2px; }
#hdr-tools-menu .htm-label:first-child { margin-top:0; }
#hdr-tools-menu .hdr-menu-item {
  display:flex !important; width:100% !important; box-sizing:border-box; margin:2px 0 !important;
  justify-content:flex-start !important; align-items:center;
  padding:9px 12px !important; border-radius:7px !important; text-align:left !important;
  font:700 12px 'Share Tech Mono', monospace !important; letter-spacing:.04em !important;
  border:1px solid var(--line2) !important; background:linear-gradient(180deg,var(--surf1),var(--surf2)) !important;
  color:var(--acc-ink) !important; cursor:pointer; }
#hdr-tools-menu .hdr-menu-item:hover {
  border-color:var(--acc) !important; background:color-mix(in srgb, var(--acc) 10%, transparent) !important; }
#hdr-tools-menu #pgd-hdr-btn { padding-left:30px !important; }   /* clear the LED dot */

/* EXIT at the foot of the TOOLS menu — keep it red + set apart by a divider */
#hdr-tools-menu #exit-btn { color:var(--danger) !important; border-color:var(--danger) !important;
  margin-top:8px !important; }
#hdr-tools-menu #exit-btn:hover { border-color:var(--danger) !important;
  background:color-mix(in srgb, var(--danger) 12%, transparent) !important; }

/* Separate-tab tool view (?panel=…): full-page, ONLY the launched tool — no P&ID / header / side rail */
/* overlay tools (Debrief, Checklist, Calc, Exercise, Ref, DNV station): hide the WHOLE sim — the overlay shows on a clean bg */
html.fgss-panel-only #hdr, html.fgss-panel-only #ctr, html.fgss-panel-only #rp { display:none !important; }
html.fgss-panel-only #main { height:100vh !important; padding:0 !important; background:#eef3f8 !important; }
/* right-panel tools (Developer, Sim Logic, Trainer): keep the right panel full-width, drop P&ID + header */
html.fgss-panel-rp #hdr, html.fgss-panel-rp #ctr { display:none !important; }
html.fgss-panel-rp #main { height:100vh !important; padding:0 !important; }
html.fgss-panel-rp #rp { width:100% !important; flex:1 1 100% !important; max-width:none !important; }
html.fgss-panel-only #rp-tab, html.fgss-panel-only #rp-hide-fab, html.fgss-panel-only #nav-popup, html.fgss-panel-only #modal-bg,
html.fgss-panel-rp   #rp-tab, html.fgss-panel-rp   #rp-hide-fab, html.fgss-panel-rp   #nav-popup, html.fgss-panel-rp   #modal-bg { display:none !important; }

/* In a tool-only popup tab, the tool's overlay card uses the FULL screen (no centered modal) */
html.fgss-panel-only [id$="-overlay"] { padding:0 !important; background:#eef3f8 !important; }
html.fgss-panel-only [id$="-overlay"] > div {
  width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important;
  border-radius:0 !important; margin:0 !important; box-shadow:none !important; }

/* POPUP TAB override: keep the HEADER + MENU usable to switch pages; the tool fills the screen BELOW the header.
   (Restores the page area that the earlier panel-only rules hid, since the overlay covers it while open.) */
html.fgss-panel-only #hdr, html.fgss-panel-rp #hdr { display:flex !important; z-index:99999 !important; }
html.fgss-panel-only #ctr, html.fgss-panel-rp #ctr { display:block !important; }
html.fgss-panel-only #rp,  html.fgss-panel-rp #rp  { display:flex !important; }
html.fgss-panel-only #nav-popup.open, html.fgss-panel-rp #nav-popup.open { display:block !important; z-index:100000 !important; }
html.fgss-panel-only [id$="-overlay"]       { top:48px !important; height:calc(100vh - 48px) !important; }
html.fgss-panel-only [id$="-overlay"] > div { height:calc(100vh - 48px) !important; }