/* IBM Plex via the same CDN as the positioning page */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap');

/* ---- Bank of the World (customer · finance · light · calm) ---- */
:root[data-brand="bow"]{
  --bg:#faf8f3; --surface:#ffffff; --surface-2:#f3efe6; --line:#e5e0d5;
  --primary:#0a1f44; --accent:#c8a24b; --text:#1a2238; --muted:#5b6478;
  --ok:#1f7a4d; --warn:#b4690e; --bad:#a2191f;
  --display:'IBM Plex Serif',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --chat-theme:light;
}
/* ---- MSPInternational (provider · telco/NOC · dark · data-forward) ---- */
:root[data-brand="msp"]{
  --bg:#0b0e14; --surface:#11161f; --surface-2:#161d28; --line:#1c2430;
  --primary:#0f62fe; --accent:#08bdba; --text:#dde1e6; --muted:#8d96a0;
  --ok:#42be65; --warn:#f1c21b; --bad:#fa4d56;
  --display:'IBM Plex Sans',system-ui,sans-serif; --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --chat-theme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* primitives shared by both brands; brand differences come only from the variables above */
.brand-header{display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand-mark{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--primary)}
.brand-mark .accent{color:var(--accent)}
.brand-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(320px,420px) 1fr;grid-template-rows:minmax(0,1fr);flex:1 1 auto;min-height:0}
@media(max-width:880px){body{height:auto;height:auto;overflow:auto}.layout{grid-template-columns:1fr;grid-template-rows:auto;flex:0 1 auto}.chat-wrap{min-height:75vh}}
.rail{padding:28px;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:20px;overflow:auto;min-height:0}
.panel{background:var(--surface);border:1px solid var(--line);padding:20px 22px}
.panel h3{font-size:13px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .v{font-family:var(--mono);color:var(--text)}
.tile{background:var(--surface-2);border:1px solid var(--line);padding:16px}
.tile .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile .big{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:8px}
.state-ok{color:var(--ok)} .state-warn{color:var(--warn)} .state-bad{color:var(--bad)}
.chat-wrap{position:relative;background:var(--surface)}
#ini-chat{position:absolute;inset:0}
.lf-strip{display:flex;align-items:center;gap:12px;padding:12px 28px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.lf-strip a{color:var(--primary);text-decoration:none;font-weight:600}
.lf-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}