:root { --liq-shell-bg:#0b0f19; --liq-shell-panel:#111827; --liq-shell-line:#253044; --liq-shell-ink:#e5e7eb; --liq-shell-sub:#9ca3af; --liq-shell-accent:#4c6ef5; }
.liq-shell { min-height:100vh; display:grid; grid-template-columns:232px minmax(0,1fr); background:var(--liq-shell-bg); color:var(--liq-shell-ink); }
.liq-sidebar { border-right:1px solid var(--liq-shell-line); background:#0e1520; padding:14px 10px; display:flex; flex-direction:column; gap:14px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.liq-brand { display:flex; align-items:center; gap:9px; padding:4px 8px 14px; border-bottom:1px solid var(--liq-shell-line); color:#fff; text-decoration:none; font-weight:700; font-size:14px; }
.liq-brand img { width:28px; height:28px; border-radius:7px; }
.liq-side-label { color:#64748b; font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:0 9px; margin-top:2px; }
.liq-side-nav { display:flex; flex-direction:column; gap:3px; }
.liq-side-link { display:flex; align-items:center; gap:9px; color:var(--liq-shell-sub); text-decoration:none; padding:9px 10px; border-radius:6px; font-size:13px; }
.liq-side-link:hover { color:#fff; background:#162237; }
.liq-side-link.active { color:#fff; background:rgba(76,110,245,.2); box-shadow:inset 2px 0 0 var(--liq-shell-accent); }
.liq-side-icon { width:18px; text-align:center; color:#94a3b8; font-size:13px; }
.liq-shell-spacer { flex:1; }
.liq-env { border-top:1px solid var(--liq-shell-line); padding:11px 9px 3px; color:#64748b; font-size:10px; line-height:1.5; }
.liq-shell-main { min-width:0; }
.liq-shell-top { height:56px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 22px; border-bottom:1px solid var(--liq-shell-line); background:var(--liq-shell-panel); }
.liq-shell-title { font-size:14px; font-weight:650; }
.liq-shell-context { color:var(--liq-shell-sub); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.liq-shell-menu { display:none; border:1px solid var(--liq-shell-line); background:#162237; color:#fff; border-radius:6px; padding:7px 9px; cursor:pointer; }
.liq-app-content { min-width:0; }
@media (max-width:760px) {
  .liq-shell { display:block; }
  .liq-sidebar { position:fixed; z-index:50; inset:56px auto 0 0; width:242px; transform:translateX(-102%); transition:transform .18s ease; box-shadow:12px 0 30px rgba(0,0,0,.3); }
  .liq-shell.open .liq-sidebar { transform:translateX(0); }
  .liq-shell-top { padding:0 14px; }
  .liq-shell-menu { display:block; }
  .liq-shell-context { max-width:42vw; }
}

/* ── Subsurface Maps theme ────────────────────────────────────────
   Same shell, marking-paint RED instead of LocateIQ yellow/blue —
   an SSM customer should feel they're in the SSM product, not a
   reskinned LocateIQ. */
.liq-shell.ssm-theme { --liq-shell-accent: rgb(184,30,46); }
.liq-shell.ssm-theme .liq-side-link.active { background: rgba(184,30,46,.18); box-shadow: inset 2px 0 0 rgb(184,30,46); }
.liq-shell.ssm-theme .liq-side-link:hover { color: #fff; }
.liq-shell.ssm-theme .liq-brand img { border-radius: 6px; }
.liq-shell.ssm-theme .liq-shell-top { border-top: 3px solid rgb(184,30,46); }

/* ── No horizontal page scroll, ever ─────────────────────────────
   Decorative absolutes (hero glows at right:-200px, centered megamenu
   panels, wide shadows) each pad the document's scrollable width a
   little — on phones that reads as the page "extending past the right
   edge". `clip` cuts the overflow WITHOUT creating a scroll container,
   so position:sticky keeps working (hidden is only the legacy fallback). */
html { overflow-x: hidden; overflow-x: clip; }