/* ── Reset & base ──────────────────────────────────────────── */

/* ── SORA ────────────────────────────────────────────── */

@font-face {
  font-family: "Sora";
  src: url("/fonts/sora/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Manrope ExtraLight */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Manrope Light */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Manrope Regular */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Manrope Medium */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Manrope SemiBold */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Manrope Bold */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Manrope ExtraBold */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg:   #000619;
  --bg2:  #0D1526;
  --bg3:  #131E33;
  --bgg: radial-gradient(circle at top left, rgba(25, 211, 255, 0.08), transparent 42%), linear-gradient(180deg, rgba(13, 21, 38, 0.98), rgba(6, 11, 22, 0.98));
  --bgop: #00061965; 


  --glass:  #0D1526;
  --glass2: #131E33;

  --border:  rgba(255, 255, 255, 0.06);
  --border2: rgba(255, 255, 255, 0.12);

  --blue:  #1E7BFF;
  --blue2: #155FDB;
  --cyan:  #19D3FF;
  --blue-glow: rgba(30, 123, 255, 0.24);
  --cyan-glow: rgba(25, 211, 255, 0.22);

  --green: #17C964;
  --green-bg: rgba(23, 201, 100, 0.10);

  --red: #F31260;
  --red-bg: rgba(243, 18, 96, 0.10);

  --amber: #F5A524;
  --amber-bg: rgba(245, 165, 36, 0.10);

  /* Keep old gold variables as aliases so the rest of your CSS still works */
  --gold:     #19D3FF;
  --gold-dim: rgba(25, 211, 255, 0.12);
  --gold-glow: rgba(25, 211, 255, 0.24);

  --text:  #F5F7FA;
  --text1: #F5F7FA;
  --text2: #A9B4C7;
  --text3: #6B7890;

  --mono: 'Sora', sans-serif;
  --sans: 'Inter', 'Segoe UI', sans-serif;
  --font-metric: 'Space Grotesk', sans-serif;
  --manrope: 'Manrope', sans-serif;


  --r:  6px;
  --r2: 6px;

  --pos: #17C964;
  --neg: #F31260;

  /* BrokerCNC tactical accents */
  --gold-bracket:  rgba(30, 123, 255, 0.24);
  --gold-line:     rgba(30, 123, 255, 0.18);
  --grid-overlay:  rgba(30, 123, 255, 0.35);

  --cut: 12px;
}

html,
body {
  height: 100%;
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  overflow-x: hidden
}

#visual-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* Pale constellation GLOW overlaid on top of the UI (the blue backdrop is the
     body background below). Screen blend so it adds light over opaque cards. */
  z-index: 90;
  opacity: 0;
  transition: opacity .25s ease;
  mix-blend-mode: screen;
}

body.visual-bg-enabled #visual-bg-canvas {
  opacity: .85;
}

body.light.visual-bg-enabled #visual-bg-canvas {
  opacity: .45;
  mix-blend-mode: multiply;
}

/* The blue field itself — the actual page background, like the pen. Panels
   float on it; it shows through the header, gutters and any transparent areas. */
body.visual-bg-enabled {
  background-color: #1a0710;
  background-image:
    linear-gradient(var(--grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay) 1px, transparent 1px),
    radial-gradient(140% 120% at 50% -10%, #4a1020 0%, #2a0a12 45%, #140407 100%);
  background-size: 40px 40px, 40px 40px, cover;
  background-attachment: fixed;
}
body.light.visual-bg-enabled {
  background-color: #fbeaed;
  background-image:
    linear-gradient(var(--grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay) 1px, transparent 1px),
    radial-gradient(140% 120% at 50% -10%, #fdecef 0%, #f6d7dd 55%, #eec6cd 100%);
  background-size: 40px 40px, 40px 40px, cover;
  background-attachment: fixed;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px
}

::-webkit-scrollbar-track {
  background: var(--bg2)
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 166, 35, 0.35);
  border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold)
}

/* ── LOGIN PAGE ────────────────────────────────────────────── */
#login-page {

  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000619;
  background-image:
    linear-gradient(rgba(0, 6, 25, 0.35), rgba(0, 6, 25, 0.65)),
    url("/img/BrokerCNC_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.login-box {
  background-color: #000619;
  border: 1px solid rgba(25, 211, 255, 0.16);
  border-radius: 10px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(25, 211, 255, 0.05),
    0 0 32px rgba(25, 211, 255, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  z-index: 2;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px
}

.login-logo h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: var(--mono);
}

.login-logo h1 span {
  color: var(--gold);
}

.login-logo p {
  color: var(--text3);
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--mono);
}

.login-box label {
  display: block;
  color: var(--text3);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--mono);
  margin-bottom: 6px;
}

.login-box input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border2);
  border-radius: 1px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--mono);
  outline: none;
  transition: border .2s, box-shadow .2s;
  margin-bottom: 20px;
}

.login-box input:focus {
  border-color: var(--gold);
  border-left-width: 2px;
  box-shadow: inset 3px 0 0 var(--gold-dim);
}

.btn-login {
  width: 100%;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 1px;
  padding: 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn-login:hover {
  background: var(--blue2)
}

.btn-login:active {
  transform: scale(.98)
}

.login-err {
  color: var(--red);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 20px
}

/* ── APP LAYOUT ────────────────────────────────────────────── */
#app {
  display: none;
  flex-direction: column;
  height: 100vh
}


/* Header */
/* ── HEADER: logo left, controls top, nav bottom ───────────── */

.header {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* grid-template-rows: 56px 42px; */
  /* min-height: 98px; */
  padding: 0;
  /* background: var(--bg); */
  /* border-bottom: 1px solid rgba(25, 211, 255, 0.12); */
  /* box-shadow:
    0 1px 0 rgba(25, 211, 255, 0.05),
    0 8px 30px rgba(0, 0, 0, 0.45); */
  position: relative;
  z-index: 100;
  overflow: visible;
}
.metric-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 1px solid rgba(25, 211, 255, 0.22);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
  cursor: help;
  opacity: 0.7;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.metric-info:hover {
  opacity: 1;
  background: rgba(25, 211, 255, 0.08);
  border-color: rgba(25, 211, 255, 0.45);
}

/* Tooltip */
.metric-info::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(13, 21, 38, 0.98),
      rgba(6, 11, 22, 0.98)
    );
  border: 1px solid rgba(25, 211, 255, 0.16);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.03);
  color: var(--text2);
  font-size: 11px;
  line-height: 1.45;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.2px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 99999;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}

/* Tooltip arrow */
.metric-info::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color:
    rgba(13, 21, 38, 0.98)
    transparent
    transparent
    transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease;
  z-index: 99999;
}

.metric-info:hover::after,
.metric-info:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.metric-info.tooltip-down::after {
  top: calc(100% + 10px);
  bottom: auto;
}

.metric-info.tooltip-down::before {
  top: calc(100% + 4px);
  bottom: auto;

  border-color:
    transparent
    transparent
    rgba(13, 21, 38, 0.98)
    transparent;
}

/* Logo spans both rows */
.header-logo {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  /* border-right: 1px solid rgba(25, 211, 255, 0.10); */
  /* max-width: 300px; */
}

.header-logo-img {
  width: 100%;
  max-width: 270px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  display: none;
}
body.light .logo-light{
  display: block;
}
body:not(.light) .logo-dark{
  display: block;
}
/* Top row */
.header-top {
  grid-column: 2 / 3;
  grid-row: 1;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.04); */
  background: linear-gradient(to bottom, rgba(255,255,255,0.015), rgba(255,255,255,0));
  padding-left: 10px;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

/* Navigation row */
.header-nav {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 0 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.012), rgba(255,255,255,0));
}

.header-nav::-webkit-scrollbar {
  height: 3px;
}

.header-nav::-webkit-scrollbar-track {
  background: transparent;
}

.header-nav::-webkit-scrollbar-thumb {
  background: rgba(25, 211, 255, 0.28);
  border-radius: 999px;
}

.header-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(25, 211, 255, 0.55);
}

/* ── TOP COMMAND NAVIGATION ─────────────────────────────────── */

.top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  min-width: max-content;
  height: 100%;
  overflow: visible;
  position: relative;
}

.nav-group {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-group::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 10px;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.nav-group:last-child::after {
  display: none;
}

.nav-trigger {
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.nav-trigger:hover {
  color: var(--text2);
  background: rgba(25, 211, 255, 0.05);
  border-color: rgba(25, 211, 255, 0.12);
}

.nav-trigger.active {
  color: var(--cyan);
  background: rgba(25, 211, 255, 0.08);
  border-color: rgba(25, 211, 255, 0.22);
  box-shadow:
    inset 0 0 12px rgba(25, 211, 255, 0.05),
    0 0 14px rgba(25, 211, 255, 0.08);
}

/* ── DROPDOWNS ──────────────────────────────────────────────── */

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 245px;
  padding: 8px;

  display: flex;
  flex-direction: column;
  gap: 2px;

  border: 1px solid rgba(25, 211, 255, 0.14);
  border-radius: 2px;

  background: var(--bgg);

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;

  z-index: 5000;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown items */
.nav-dropdown button {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;

  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 9px;

  transition:
    color 0.13s ease,
    background 0.13s ease,
    border-color 0.13s ease,
    transform 0.13s ease;
}

.nav-dropdown button:hover {
  color: var(--text);
  background: rgba(25, 211, 255, 0.06);
  border-color: rgba(25, 211, 255, 0.10);
  transform: translateX(2px);
}

.nav-dropdown button.active {
  color: var(--cyan);
  background: rgba(25, 211, 255, 0.10);
  border-color: rgba(25, 211, 255, 0.18);
}

/* Icons */
.nav-trigger i,
.nav-dropdown button i {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  flex: 0 0 auto;
  opacity: 0.78;
}

.nav-trigger:hover i,
.nav-trigger.active i,
.nav-dropdown button:hover i,
.nav-dropdown button.active i {
  opacity: 1;
  color: var(--cyan);
}

/* Alert badge inside menu */
.nav-dropdown .alerts-badge,
.top-nav .alerts-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

/* Optional dropdown label */
.nav-dropdown-label {
  padding: 5px 10px 8px;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .header {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .server-time,
  #tab-refresh-stamp {
    display: none;
  }

  .header-top {
    padding: 0 12px;
  }

  .nav-trigger {
    padding: 0 10px;
    font-size: 10px;
  }

  .header-logo-img {
    max-width: 145px;
  }
}

@media (max-width: 900px) {
  .header {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: 52px 40px;
    min-height: 92px;
  }

  .header-logo-img {
    max-width: 125px;
    max-height: 70px;
  }

  .header-top {
    height: 52px;
    padding: 0 10px;
  }

  .header-nav {
    height: 40px;
  }

  .feed-indicator span {
    display: none;
  }

  .header-right {
    gap: 6px;
  }

  .nav-trigger {
    height: 30px;
    padding: 0 9px;
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  .header {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-rows: 50px 38px;
    min-height: 88px;
  }

  .header-logo {
    padding: 0 10px;
  }

  .header-logo-img {
    max-width: 100px;
    max-height: 62px;
  }

  .header-top {
    height: 50px;
  }

  .header-nav {
    height: 38px;
  }

  .nav-dropdown {
    position: fixed;
    top: 88px;
    left: 10px;
    right: 10px;
    min-width: auto;
  }
}

/* End Header */

/* App layout without sidebar */
#app {
  display: grid;
  grid-template-rows: 72px 1fr;
  grid-template-columns: 1fr;
  height: 100vh;
  overflow: hidden;
}

.main-content {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  min-width: 0;
}

.feed-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-family: var(--mono)
}

.feed-indicator.warning {
  color: var(--amber);
  cursor: help;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite
}

.pulse.live {
  background: var(--green);
  box-shadow: 0 0 8px var(--green)
}

.pulse.offline {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: none
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .4
  }
}

.server-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2)
}

.btn-logout {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 1px;
  padding: 5px 12px;
  color: var(--text2);
  font-size: 12px;
  font-family: var(--mono);
  cursor: pointer;
  transition: all .2s;
}

.btn-logout:hover {
  border-color: var(--red);
  color: var(--red)
}

.profile-menu-wrap {
  position: relative;
}

.profile-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid rgba(245, 166, 35, 0.35);
  background: var(--bg3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.profile-avatar-btn:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}

.profile-menu {
  position: fixed;
  top: 54px;
  left: auto;
  width: 210px;
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-radius: 2px;
  background: var(--bg2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 166, 35, 0.06);
  padding: 8px;
  z-index: 9999;
}

.profile-menu-head {
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.profile-menu-head div:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu-head div:last-child {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
  text-transform: uppercase;
}

.profile-menu button {
  width: 100%;
  border: none;
  border-radius: 1px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
  padding: 8px 9px;
  font-size: 13px;
}

.profile-menu button:hover {
  background: var(--bg3);
  color: var(--text1);
}

.profile-menu button.danger {
  color: var(--red);
  opacity: 0.7;
  margin-top: 4px;
  border-top: 1px solid var(--border) !important;
  padding-top: 10px;
}

.profile-menu button.danger:hover {
  opacity: 1;
  color: var(--red);
}

.profile-modal-card {
  width: min(900px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket));
  background-size: 1px 18px, 18px 1px, 1px 18px, 18px 1px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-radius: 2px;
  padding: 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 166, 35, 0.06);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-grid section,
.profile-security-grid {
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-line);
  border-radius: 2px;
  padding: 12px;
  background: var(--bg2);
}

.profile-label {
  display: block;
  color: var(--text3);
  font-size: 11px;
  margin: 9px 0 4px;
  text-transform: uppercase;
}

.profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.profile-security-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 10px;
}

@media (max-width: 780px) {
  .profile-grid,
  .profile-security-grid {
    grid-template-columns: 1fr;
  }
}

.btn-settings {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 1px;
  padding: 5px 10px;
  color: var(--text2);
  cursor: pointer;
  font-size: 15px;
  transition: all .2s;
}

.btn-settings:hover {
  border-color: var(--gold);
  color: var(--gold)
}

.btn-theme {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 1px;
  padding: 5px 10px;
  color: var(--text2);
  cursor: pointer;
  font-size: 14px;
}

/* ── TABS ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.tab {
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text2)
}

.tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── CONTENT ────────────────────────────────────────────────── */
.tab-content {
  display: none;
  flex: 1;
  padding: 10px 5px
}

.tab-content.active {
  display: block
}

/* ── GLASS CARD ─────────────────────────────────────────────── */
.card {
  /* Corner bracket decoration via layered gradients */
  background-color: var(--glass);
  background-image:
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket));
  background-size: 1px 14px, 14px 1px, 1px 14px, 14px 1px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-bottom-color: rgba(245, 166, 35, 0.09);
  border-right-color:  rgba(245, 166, 35, 0.07);
  border-radius: var(--r);
  padding: 20px;
  transition: border-color .2s, box-shadow .2s, transform .2s, background-image .2s;
}

.card:hover {
  --gold-bracket: rgba(25, 211, 255, 0.75);
  border-color: rgba(25, 211, 255, 0.18);
  background-image:
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket));
  background-size: 1px 14px, 14px 1px, 1px 14px, 14px 1px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border-bottom-color: rgba(25, 211, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(25, 211, 255, 0.08),
    0 0 22px rgba(25, 211, 255, 0.06),
    0 6px 28px rgba(0, 0, 0, 0.38);
}

.drill-card {
  cursor: pointer;
}

.drill-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.card .card {
  box-shadow: none;
}

.card .card:hover {
  border-color: var(--border);
  box-shadow: none;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 12px;
  font-family: var(--mono);
}

.card-title::before {
  content: '';
  display: block;
  width: 2px;
  height: 11px;
  background: var(--gold);
  opacity: 0.55;
  flex-shrink: 0;
  border-radius: 1px;
}

.card-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600
}

.card-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 4px
}

/* ── GRID HELPERS ───────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px
}

.mb16 {
  margin-bottom: 16px
}

.mb24 {
  margin-bottom: 24px
}

/* ── POSITIVE / NEGATIVE ────────────────────────────────────── */
.pos {
  color: var(--green)
}

.neg {
  color: var(--red)
}

.neu {
  color: var(--text2)
}

/* ── HERO NUMBER ─────────────────────────────────────────────── */
.hero-number {
  font-family: var(--manrope);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

/* ── PROGRESS BAR ────────────────────────────────────────────── */
.progress-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .5s
}

/* ── TABLE ───────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed
}

thead th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text3);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--mono);
  border-bottom: 1px solid rgba(245, 166, 35, 0.22);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

thead th:hover {
  color: var(--text)
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .15s
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.018)
}

tbody tr:hover {
  background: rgba(245, 166, 35, 0.04);
  box-shadow: inset 2px 0 0 rgba(245, 166, 35, 0.4);
}

tbody td {
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0
}

/* ── uPlot legend — opt OUT of everything above ──────────────────────────────
   uPlot builds its legend as a real <table><tbody><tr><th>+<td>, so every rule
   in this section lands on it. Two of them are destructive: `max-width: 0` above
   (the truncate-to-fit hack, which uPlot's own `.u-inline *{ display:inline-block }`
   turns into a genuine zero-width box) collapsed every legend VALUE to a couple
   of characters, and the row border / zebra / hover painted table stripes across
   the legend. `.u-legend` only ever exists inside a uPlot chart, so scoping the
   reset to it is safe everywhere. */
.u-legend {
  width: auto;
  table-layout: auto;
  border-collapse: separate;
}

.u-legend tr,
.u-legend tr:nth-child(even),
.u-legend tr:hover {
  border-bottom: 0;
  background: none;
  box-shadow: none;
}

.u-legend th,
.u-legend td {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 12px;
}

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: .6px;
}

.badge-red {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(243,18,96,0.25);
}

.badge-green {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(23,201,100,0.25);
}

.badge-amber {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid rgba(245,165,36,0.25);
}

.badge-blue {
  background: rgba(30,123,255,0.12);
  color: var(--blue);
  border: 1px solid rgba(30,123,255,0.25);
}

/* The only purple badge (IC Incidents → CONFIRMED). Unlike its siblings it cannot
   resolve through a theme var — there is no --purple — so it hard-codes the dark
   value and needs an explicit light override below. */
.badge-purple {
  background: rgba(167,139,250,0.12);
  color: #a78bfa;
  border: 1px solid rgba(167,139,250,0.25);
}

/* body.light retunes --red/--green/--amber/--blue, which carries the other badges
   across themes automatically; .badge-purple has no var to retune, so its dark
   #a78bfa stayed on the light card and measured 2.25:1 — unreadable at 10px/600.
   Same hue taken down to violet-700. Measured (composited badge bg over surface,
   AA body = 4.5:1): #6D28D9 = 5.52:1 on the --bg2 card, 5.02:1 on --bg,
   4.56:1 on --bg3 — passes on every surface a badge can land on.
   Dark is deliberately untouched (it already measures 5.61:1). */
body.light .badge-purple {
  background: rgba(109,40,217,0.10);
  color: #6D28D9;
  border: 1px solid rgba(109,40,217,0.28);
}

/* ── SECTION LABEL — small gold category label above a section title ── */
.section-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.8;
  line-height: 1;
}

/* ── CARD HEADER BAR — panel-within-card header with optional status dot ── */
.card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: -20px -20px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.018);
  border-radius: var(--r) var(--r) 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  letter-spacing: 0.3px;
}

.card-hdr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-hdr-dot.green  { background: var(--green);  box-shadow: 0 0 6px rgba(23,201,100,0.5); }
.card-hdr-dot.red    { background: var(--red);    box-shadow: 0 0 6px rgba(243,18,96,0.5); }
.card-hdr-dot.amber  { background: var(--amber);  box-shadow: 0 0 6px rgba(245,165,36,0.5); }
.card-hdr-dot.blue   { background: var(--blue);   box-shadow: 0 0 6px rgba(30,123,255,0.4); }
.card-hdr-dot.cyan   { background: var(--cyan);   box-shadow: 0 0 6px rgba(25,211,255,0.4); }
.card-hdr-dot.pulse  { animation: pulse 2s infinite; }

/* ── KPI MINI CARD — compact metric box for use inside panels ── */
.kpi-mini {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}

.kpi-mini .kn {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--mono);
  letter-spacing: -0.4px;
}

.kpi-mini .kl {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  font-family: var(--mono);
}

.kpi-mini-grid {
  display: grid;
  gap: 8px;
}

/* ── PROGRESS BAR ── */
.bar-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 6px;
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── TABLE NUMERIC COLOR UTILITIES ── */
.cn-g { color: var(--green); }
.cn-r { color: var(--red); }
.cn-a { color: var(--amber); }
.cn-3 { color: var(--text3); font-size: 11px; }

/* ── GAUGE ───────────────────────────────────────────────────── */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.gauge-val {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700
}

.gauge-label {
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 1px;
  text-transform: uppercase
}

.gauge-bar {
  width: 100%;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden
}

.gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .5s
}

/* ── SECTION HEADER ─────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text)
}

/* ── PERIOD TOGGLE ──────────────────────────────────────────── */
.period-toggle {
  display: flex;
  gap: 4px
}

.period-btn {
  padding: 4px 12px;
  border-radius: 1px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text3);
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all .2s;
}

.period-btn.active {
  background: var(--gold-dim);
  border-color: rgba(245, 166, 35, 0.4);
  color: var(--gold);
}

/* Session count in CP > Users. Sits inline beside the ONLINE / SESSION badge and must read as a
   control without becoming a second button competing with the row's real actions — hence link
   affordance (dotted underline, pointer) rather than a bordered button. --text2, not --text3:
   this is now interactive, and interactive text has to clear AA on the row ground. */
.sess-count-btn {
  margin-left: 5px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 1px dotted var(--text3);
  line-height: 1.2;
}
.sess-count-btn:hover { color: var(--gold); border-bottom-color: var(--gold); }
.sess-count-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* ── SEARCH ──────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.search-bar input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 9px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.search-bar input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-dim)
}

.btn-search {
  background: var(--blue);
  border: none;
  border-radius: 1px;
  padding: 9px 18px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.5px;
}

/* ── CHART WRAPPER ──────────────────────────────────────────── */
.chart-wrap {
  position: relative;
  height: 220px
}

.chart-wrap-lg {
  position: relative;
  height: 300px
}

/* ── LIGHT MODE ───────────────────────────────────────────── */
/* ── LIGHT THEME ─────────────────────────────────────────────────────────────
   Warm paper neutrals rather than blue-white. The glare came from the surfaces
   themselves: the card was #FFFFFF (100% luminance) on a #F5F8FC page (94%).
   These sit at 91% and 82%, which is a real reduction rather than a tint, while
   keeping cards lighter than the page so they still read as raised.

   Measured against the new card surface: --text 13.6:1, --text2 7.2:1,
   --text3 3.7:1 (it was 3.65:1 before, so muted text is marginally better off).
   Nothing here is pure white. */
body.light {
  --bg:  #EDE9E1;
  --bg2: #F7F4EE;
  --bg3: #E3DED4;
  --bgg: radial-gradient(
      circle at top left,
      rgba(22, 104, 227, 0.05),
      transparent 38%
    ),
    radial-gradient(
      circle at top right,
      rgba(22, 104, 227, 0.04),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #F7F4EE,
      #EDE9E1
    );
  --bgop:  #EDE9E165;
  --glass:  rgba(247, 244, 238, 0.94);
  --glass2: rgba(251, 249, 245, 0.97);
  /* warm-toned borders — a cool grey line reads as dirt on a warm surface */
  --border:  rgba(72, 58, 38, 0.14);
  --border2: rgba(72, 58, 38, 0.24);
  --text:  #2B2621;
  --text1: #2B2621;
  --text2: #575049;
  /* --text3 carries 10-11px column labels and captions. The old #7B8798 was
     3.65:1 on white — below AA body at exactly the sizes that need it most.
     This clears 4.5:1 and still reads as muted against --text2. */
  --text3: #736A5E;

  /* The dark-theme accents are unreadable on ANY light surface and always were:
     against the old white card, green measured 2.19:1 and amber 2.04:1 — on P&L
     figures. Same hues, taken down to >= 4.5:1 (AA body text) on the new card. */
  --green: #0A7C3C;
  --green-bg: rgba(10, 124, 60, 0.12);
  --red:   #DC0F55;
  --red-bg: rgba(220, 15, 85, 0.10);
  --amber: #9C5D00;
  --amber-bg: rgba(156, 93, 0, 0.12);
  --cyan:  #0B7098;
  --blue:  #1668E3;
  --blue2: #1259C6;
  --blue-glow: rgba(22, 104, 227, 0.18);
  --cyan-glow: rgba(11, 112, 152, 0.18);

  --gold:     #1668E3;
  --gold-dim: rgba(22, 104, 227, 0.10);
  --gold-glow: rgba(22, 104, 227, 0.20);
  --gold-bracket: rgba(22, 104, 227, 0.32);
  --gold-line: rgba(22, 104, 227, 0.16);
  /* warm grid instead of blue — it sits under every page */
  --grid-overlay: rgba(72, 58, 38, 0.035);
}

body.light .card {
  background-color: var(--bg2);
  background-image:
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket)),
    linear-gradient(var(--gold-bracket), var(--gold-bracket));
  background-size: 1px 14px, 14px 1px, 1px 14px, 14px 1px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-bottom-color: rgba(217, 119, 6, 0.12);
}

body.light .card:hover {
  --gold-bracket: rgba(217, 119, 6, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: rgba(217, 119, 6, 0.28);
}

body.light .header {
  background: var(--bg2);
  border-bottom-color: rgba(217, 119, 6, 0.28);
  box-shadow: 0 1px 0 rgba(217, 119, 6, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.light .tabs {
  background: var(--bg);
  border-bottom-color: var(--border2);
}
body.light .v-menu{
  /* was #FFF — the sidebar is the single largest surface on screen, so a literal
     white here defeated the token palette on every page */
  background: var(--bg2);
  box-shadow: none;
}
body.light .v-menu-item.active{
  box-shadow: none;
}
body.light .header-context {
    border-left: 2px solid #ececee;
}
body.light .v-menu-toggle {
  background: var(--bg3);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text2);
}

body.light .v-menu-toggle:hover {
  background: var(--gold-dim);
  color: var(--gold);
}

body.light .header-logo h1,
body.light .feed-indicator,
body.light .server-time {
  color: var(--text)
}

body.light .btn-logout,
body.light .btn-theme {
  color: var(--text2);
  border-color: var(--border2);
  background: transparent;
}

body.light .btn-logout:hover,
body.light .btn-theme:hover {
  background: var(--bg3);
  color: var(--text);
}

body.light input,
body.light select,
body.light .stream-filter {
  background: var(--bg2);
  border: 1px solid var(--border2);
}

body.light input:focus,
body.light select:focus,
body.light .stream-filter:focus {
  background: var(--bg2);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:768px) {

  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr 1fr
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr
  }

  .hero-number {
    font-size: 24px
  }
}

@media(max-width:480px) {

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr
  }

  .tabs {
    overflow-x: auto
  }
}

/* ── FLASH ANIMATION ─────────────────────────────────────────── */
.flash-green {
  animation: flashGreen .4s ease
}

.flash-red {
  animation: flashRed .4s ease
}

@keyframes flashGreen {
  0% {
    background: rgba(34, 197, 94, 0.25)
  }

  100% {
    background: transparent
  }
}

@keyframes flashRed {
  0% {
    background: rgba(239, 68, 68, 0.25)
  }

  100% {
    background: transparent
  }
}

/* ── DEEP-LINK TARGET FLASH ───────────────────────────────────
   Applied by flashTarget() (core-utils.js) to the row a Live-Feed click drilled into.
   Cyan = neutral "this is what you came for" (green/red already mean P/L direction).
   Deliberately NO animation-fill-mode so the background reverts to the cascade and
   :hover keeps working afterwards; the inset left bar lingers only for the animation. */
.hl-flash {
  animation: hlFlash 1.6s ease-out;
  box-shadow: inset 2px 0 0 var(--cyan, #19D3FF)
}

/* table rows paint their background on the cells, so flash those too */
.hl-flash>td {
  animation: hlFlash 1.6s ease-out
}

@keyframes hlFlash {
  0% {
    background: rgba(25, 211, 255, 0.22)
  }

  100% {
    background: transparent
  }
}

@media (prefers-reduced-motion: reduce) {

  .hl-flash,
  .hl-flash>td {
    animation: none
  }

  .hl-flash {
    outline: 1px solid var(--cyan, #19D3FF)
  }
}

/* ── SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  border-right-color: rgba(245, 166, 35, 0.35);
  border-radius: 0;
  animation: spin .6s linear infinite;
  margin: 40px auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ── OFFLINE BANNER ─────────────────────────────────────────── */
.offline-banner {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--r2);
  padding: 10px 16px;
  text-align: center;
  color: var(--red);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* ── STREAMING TAB ───────────────────────────────────────────── */
.stream-filter {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 5px 10px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  width: 150px;
}

.stream-filter:focus {
  border-color: var(--blue)
}

.stream-currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px
}

.stream-currency-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 15px;
  border-left-width: 3px;
  transition: border-color 0.3s;
}

.stream-currency-val {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 800;
  word-break: break-all;
  line-height: 1.15;
  margin: 4px 0 3px;
  letter-spacing: -0.5px;
}

.stream-tbl-wrap {
  max-height: 100%;
  min-height: 0;
}

/* Only create an internal scroll container when max-height or explicit overflow
   is set via inline style — avoids a phantom scroll container that would break
   position:sticky on unbounded page-level tables. */
.stream-tbl-wrap[style*="max-height"],
.stream-tbl-wrap[style*="overflow"],
.tbl-wrap[style*="max-height"],
.tbl-wrap[style*="overflow"] {
  overflow-y: auto;
}

.stream-tbl-wrap thead th,
.tbl-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(245,166,35,0.22);
  border-bottom: none;
}

th[data-sort-col] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th[data-sort-col]:hover { color: var(--text); }
th[data-sort-col]::after { content: ' \21C5'; opacity: 0.25; font-size: 10px; }
th[data-sort-active="asc"]::after  { content: ' \25B2'; color: var(--gold); opacity: 1; font-size: 9px; }
th[data-sort-active="desc"]::after { content: ' \25BC'; color: var(--gold); opacity: 1; font-size: 9px; }

.badge-stream {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-left: 10px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.badge-stream.live {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.25)
}

.stream-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block
}

.stream-dot.live {
  animation: pulse 1.5s infinite
}

/* ── DEAL LOG ────────────────────────────────────────────────── */
.deal-log-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto
}

.deal-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--glass2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  animation: slideIn .15s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.de-time {
  color: var(--text3);
  min-width: 76px
}

.de-badge {
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  min-width: 58px;
  text-align: center
}

.de-add {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue)
}

.de-update {
  background: var(--amber-bg);
  color: var(--amber)
}

.de-delete {
  background: var(--red-bg);
  color: var(--red)
}

.de-perform {
  background: var(--green-bg);
  color: var(--green)
}

/* ── CONTROL PANEL (sub-nav layout, reused inside the tab card) ── */
.settings-body {
  display: flex;
  flex: 1;
  overflow: hidden
}

.settings-nav {
  width: 160px;
  border-right: 1px solid var(--border);
  padding: 10px 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}

.settings-nav-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text2);
  border-radius: 6px;
  transition: all .15s;
}

.settings-nav-item:hover {
  background: var(--bg3);
  color: var(--text)
}

.settings-nav-item.active {
  background: var(--gold-dim);
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding-left: 10px
}

/* CP > System — horizontal sub-tabs grouping the settings blocks (must live in an external
   stylesheet, not an inline <style>: the CSP style-src carries a nonce, which disables
   'unsafe-inline' for <style> elements). */
#sys-tab-bar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
#sys-tab-bar .systab-btn {
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: .3px;
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
#sys-tab-bar .systab-btn:hover {
  color: var(--text2);
}
#sys-tab-bar .systab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
#cp-section-system .systab-hidden {
  display: none !important;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px
}

.settings-section {
  display: none
}

.settings-section.active {
  display: block
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center
}

.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border2);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
}

.toggle-slider:before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.toggle input:checked+.toggle-slider {
  background: var(--blue)
}

.toggle input:checked+.toggle-slider:before {
  transform: translateX(16px)
}

/* Class badge pill in tables */
.sym-class-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
}

.sym-class-badge.Forex {
  background: rgba(59, 130, 246, .15);
  color: var(--blue)
}

.sym-class-badge.Stocks {
  background: rgba(16, 185, 129, .15);
  color: var(--green)
}

.sym-class-badge.Indices {
  background: rgba(245, 158, 11, .15);
  color: var(--amber)
}

.sym-class-badge.Commodities {
  background: rgba(249, 115, 22, .15);
  color: #f97316
}

.sym-class-badge.Crypto {
  background: rgba(139, 92, 246, .15);
  color: #8b5cf6
}

.metric-label {
  gap: 5px;
}

.metric-label:not(th):not(td) {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
}

.metric-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, .45);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  flex: 0 0 auto;
  cursor: help;
}

.metric-info:hover {
  color: var(--gold);
  border-color: rgba(245, 158, 66, .7);
  background: rgba(245, 158, 66, .08);
}

.chart-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
}

.chart-mode-btn {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1;
}

.chart-mode-btn.active {
  background: var(--gold-dim);
  color: var(--gold);
}

.dq-guide {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(220px, .85fr);
  gap: 12px;
  margin-bottom: 16px;
}

.dq-guide-panel {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  padding: 12px 14px;
}

.dq-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.dq-guide-title,
.dq-summary-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dq-guide-copy,
.dq-table-note {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}

.dq-guide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.dq-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dq-summary-card {
  min-height: 76px;
  padding: 12px 16px;
}

.dq-summary-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--mono);
  margin-top: 6px;
}

.dq-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .dq-guide,
  .dq-split-grid {
    grid-template-columns: 1fr;
  }
}

.quality-list {
  display: grid;
  gap: 8px;
}

.quality-item {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
}

.quality-item small {
  grid-column: 1 / -1;
  color: var(--text3);
  line-height: 1.45;
}

.quality-pill {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border2);
}

.quality-pill.ok {
  color: var(--green);
  background: var(--green-bg);
}

.quality-pill.warn {
  color: var(--amber);
  background: var(--amber-bg);
}

.quality-pill.danger {
  color: var(--red);
  background: var(--red-bg);
}

.quality-pill.info {
  color: var(--blue);
  background: rgba(59, 130, 246, .12);
}

.sym-class-badge.Other {
  background: rgba(148, 163, 184, .15);
  color: var(--text2)
}

/* Market Watch session status */
.mw-open-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  background: rgba(34, 197, 94, .15);
  color: var(--green)
}

.mw-closed-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  background: rgba(239, 68, 68, .12);
  color: var(--red)
}

/* ── PHASE 3 FEATURE STYLES ─────────────────────────────────────────────── */

/* Popout modal button */
.popout-modal-btn {
  background: var(--gold-dim);
  border: 1px solid rgba(245, 166, 35, .35);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.popout-modal-btn:hover {
  background: rgba(245, 166, 35, .28);
  border-color: rgba(245, 166, 35, .6);
}

/* Context menu */
.ctx-menu {
  position: fixed;
  z-index: 9900;
  min-width: 180px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  padding: 4px 0;
  animation: slideIn .1s ease;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.ctx-item:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.ctx-item.danger:hover {
  background: var(--red-bg);
  color: var(--red);
}
.ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Chart annotation modal */
.ann-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}
.ann-modal-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, .15), 0 24px 64px rgba(0, 0, 0, .7);
  padding: 24px 28px;
  width: 420px;
  max-width: 95vw;
}
.ann-modal-box h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 16px;
}
.ann-modal-box textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  color: var(--text);
  font-size: 13px;
  font-family: var(--sans);
  padding: 10px 12px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.ann-modal-box textarea:focus {
  border-color: rgba(245, 166, 35, .5);
}
.ann-modal-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
  margin: 12px 0;
  cursor: pointer;
}
.ann-modal-box label input[type=checkbox] {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
}
.ann-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.ann-save-btn {
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 18px;
  cursor: pointer;
  transition: opacity .15s;
}
.ann-save-btn:hover { opacity: .85; }
.ann-cancel-btn {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  font-size: 13px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .15s;
}
.ann-cancel-btn:hover { color: var(--text); }

/* ── Account hover-card — compressed dossier preview (app-shell.js showHoverCard) ──────────────
   Reuses the dossier's own classes (.ai-kpi2 / .ai-hero / .ai-tag / .ai-chip from
   account-intelligence.css, which is loaded app-wide) so the card looks native and can never show a
   different band colour/label than the dossier. Everything that resizes those classes is DESCENDANT-
   scoped (`.acct-hover-card .ai-*`), so the dossier originals are provably untouched. Both themes come
   free from the shared CSS vars; the only literal hues are the dossier-matching KPI accents (set
   inline per tile) and the band hex (set inline per hero). */
.acct-hover-card {
  position: fixed;
  z-index: 10000;   /* above the 9998 evidence/deal/network/routing modals — the card can be
                       triggered from account numbers INSIDE those modals (roster cells AND the
                       title bar), so it must sit above them; still below toasts / force-2FA /
                       session-expired (99999+). */
  width: 360px;
  max-width: calc(100vw - 16px);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  padding: 13px 14px;
  pointer-events: auto;   /* was `none`, which killed the footer button AND made the mouseout
                             keep-alive (card.matches(':hover')) permanently false */
  animation: fadeIn .15s ease;
}
.ahc-loading { font-size: 12px; color: var(--text3); padding: 6px 2px; }

/* Header — two lines: login + status + activity + server, then country/group/registered/last-seen */
.ahc2-hd { margin-bottom: 11px; }
.ahc2-hd-r1 { display: flex; align-items: center; gap: 7px; }
.ahc2-login { font-size: 15px; font-weight: 700; color: var(--gold); font-family: var(--mono); }
.ahc2-act { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text3); }
.ahc2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); opacity: .5; flex: 0 0 auto; }
.ahc2-dot.on { background: var(--green, #17C964); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #17C964) 22%, transparent); }
.ahc2-server { margin-left: auto; font-size: 10.5px; color: var(--text3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ahc2-hd-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: var(--text3); }
.ahc2-hd-r2 .ahc2-grp { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahc2-sep { opacity: .4; }

/* KPI grid — 7 tiles packed into 4 tight columns */
.ahc2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 11px; }
.acct-hover-card .ai-kpi2 { padding: 7px 8px; border-radius: 9px; }
.acct-hover-card .ai-kpi2-head { gap: 5px; margin-bottom: 4px; }
.acct-hover-card .ai-kpi2-icon { width: 20px; height: 20px; border-radius: 6px; }
.acct-hover-card .ai-kpi2-icon svg { width: 12px; height: 12px; }
.acct-hover-card .ai-kpi2-lbl { font-size: 8.5px; letter-spacing: .03em; }
.acct-hover-card .ai-kpi2-val { font-size: 14px; }

/* Two score heroes side by side, shrunk */
.ahc2-heroes { display: flex; margin-bottom: 11px; }
.acct-hover-card .ahc2-hero { flex: 1 1 0; padding: 0 14px; }
.acct-hover-card .ahc2-hero:first-child { padding-left: 2px; }
.acct-hover-card .ai-hero-lbl { margin-bottom: 8px; font-size: 9.5px; letter-spacing: .05em; }
.acct-hover-card .ai-hero-body { gap: 10px; }
.acct-hover-card .ai-hero-badge { width: 36px; height: 36px; }
.acct-hover-card .ai-hero-badge svg { width: 17px; height: 17px; }
.acct-hover-card .ai-hero-val { font-size: 22px; }
.acct-hover-card .ai-hero-unit { font-size: 11px; }
.acct-hover-card .ai-hero-seg { margin: 6px 0 5px; gap: 3px; }
.acct-hover-card .ai-hero-seg i { height: 5px; }
.acct-hover-card .ai-hero-cap { font-size: 9.5px; margin-top: 6px; }

/* Tag columns — auto (short codes) + manual (labels), each capped with a "+N" pill */
.ahc2-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 11px; }
.ahc2-tags-h { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.ahc2-tags-h svg { width: 12px; height: 12px; }
.acct-hover-card .ai-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.acct-hover-card .ai-tag { font-size: 10px; padding: 2px 6px; }
.ahc2-more { color: var(--text3); cursor: default; }

/* Footer deep-link */
.ahc2-foot { display: flex; }
.ahc-btn {
  flex: 1 1 auto; font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 7px;
  cursor: pointer; text-align: center; transition: filter .12s ease;
  border: 1px solid var(--accent, #1E7BFF);
  background: color-mix(in srgb, var(--accent, #1E7BFF) 14%, transparent);
  color: var(--accent, #4fc3f7);
}
.ahc-btn:hover { filter: brightness(1.12); }

/* Account-login hyperlinks (acctLink → Account Intelligence). Inherit the
   surrounding cell's font so tables stay aligned; only colour + hover cue. */
.acct-link {
  color: var(--accent, #4fc3f7);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted transparent;
  transition: border-color .12s ease, color .12s ease;
}
.acct-link:hover,
.acct-link:focus-visible {
  color: var(--gold, #f5a623);
  border-bottom-color: currentColor;
  outline: none;
}

/* Auto-refresh badge */
.ar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  transition: color .3s, border-color .3s;
}
.ar-badge.active {
  color: var(--green);
  border-color: rgba(34, 197, 94, .3);
}
.ar-badge.soon {
  color: var(--amber);
  border-color: rgba(245, 158, 11, .35);
}
[id^="ar-cd-"] {
  display: inline-block;
  width: 3.8em;
  text-align: center;
  overflow: visible;
}
.ar-select {
  font-size: 10px;
  font-family: var(--mono);
  color: inherit;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  padding: 0 2px 0 5px;
  margin-left: 3px;
  cursor: pointer;
  outline: none;
  max-width: 48px;
}
.ar-select option {
  background: var(--bg2, #1a1b1e);
  color: var(--text2, #e2e8f0);
}

/* ── AI Agent chat widget ───────────────────────────────────── */
/* AI Analyst launcher — a tab on the RIGHT EDGE at mid-height, not a bottom-right
   FAB. Every paginated table puts its pager in the bottom-right corner, so a
   floating circle there sat directly on top of the next-page button and there is
   no offset that fixes it for all of them. The right edge at mid-height is the one
   strip of the viewport page content never occupies. */
#agent-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  min-height: 132px;
  padding: 13px 0 11px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--accent, #6366f1);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: -4px 0 16px rgba(0,0,0,.4);
  z-index: 1100;
  transition: transform .15s, box-shadow .15s;
}
/* the base translate has to be repeated — a hover transform replaces it, it does not add */
#agent-btn:hover { transform: translateY(-50%) translateX(-3px); box-shadow: -6px 0 22px rgba(0,0,0,.5); }
#agent-btn svg { width: 18px; height: 18px; fill: #fff; flex: none; }
.agent-btn-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);          /* reads bottom-to-top, the side-tab convention */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-btn-chev { font-size: 15px; line-height: 1; opacity: .9; }
.agent-btn-chev::before { content: '\2039'; }              /* ‹ — opens leftward */
#agent-btn.open .agent-btn-chev::before { content: '\203A'; }   /* › — click to close */

#agent-panel {
  position: fixed;
  top: 50%;
  right: 42px;                        /* clears the 34px tab */
  width: 380px;
  max-width: calc(100vw - 54px);
  height: 520px;
  max-height: calc(100vh - 80px);
  background: var(--bg2, #1a1b1e);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 1099;
  overflow: hidden;
  /* -50% is the vertical centring and must survive both states; the second
     translate is the slide-in, which now comes FROM the tab (rightward) rather
     than from below. */
  transform: translateY(-50%) translateX(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
#agent-panel.open { transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: all; }

#agent-panel-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#agent-panel-hdr .agent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
  transition: background .3s;
}
#agent-panel-hdr .agent-dot.online { background: var(--green, #22c55e); }
#agent-panel-title { font-size: 13px; font-weight: 600; color: var(--text1); flex: 1; }
#agent-panel-model { font-size: 10px; color: var(--text3); font-family: var(--mono); }
#agent-panel-close {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 16px; padding: 0 2px; line-height: 1;
}
#agent-panel-close:hover { color: var(--text1); }

#agent-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Arbitrage Toxicity Heatmap — text colour on HOT cells (score ≥ 50). Dark theme: white on the
   red-over-dark cell. Light theme: dark text on the salmon-over-white cell (white would be ~2:1,
   unreadable). Kept in CSS (not inline) so it stays correct across a live theme toggle. */
.arb-hm-hot { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
body.light .arb-hm-hot { color: var(--text1); text-shadow: none; }

.agent-msg {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-word;
  /* answers are plain text (textContent) — preserve the agent's line breaks so
     structured reports ("Label: value" rows, "- " bullets) don't collapse into
     one run-on paragraph */
  white-space: pre-wrap;
}
.agent-msg.user {
  align-self: flex-end;
  background: var(--accent, #6366f1);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.agent-msg.assistant {
  align-self: flex-start;
  background: var(--bg3, #242529);
  color: var(--text1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.agent-msg.thinking {
  align-self: flex-start;
  background: transparent;
  color: var(--text3);
  font-style: italic;
  padding: 4px 2px;
  border: none;
}
.agent-steps {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-step {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
}
.agent-step:hover { color: var(--text2); border-color: rgba(255,255,255,.15); }
.agent-step-query { margin-top: 4px; white-space: pre-wrap; color: var(--text2); display: none; }
.agent-step.expanded .agent-step-query { display: block; }

#agent-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg2);
}
#agent-input {
  flex: 1;
  background: var(--bg3, #242529);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text1);
  font-size: 12px;
  padding: 7px 10px;
  resize: none;
  font-family: inherit;
  outline: none;
  min-height: 36px;
  max-height: 100px;
}
#agent-input:focus { border-color: var(--accent, #6366f1); }
#agent-send {
  background: var(--accent, #6366f1);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 0 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: opacity .15s;
}
#agent-send:disabled { opacity: .4; cursor: default; }
#agent-send:hover:not(:disabled) { opacity: .85; }

/* Filter preset bar */
.preset-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.preset-save-btn {
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--text3);
  border-radius: var(--r2);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.preset-save-btn:hover {
  color: var(--gold);
  border-color: rgba(245, 166, 35, .5);
}
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text2);
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.preset-chip:hover {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(245, 166, 35, .4);
}
.preset-chip-del {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
}
.preset-chip-del:hover { color: var(--red); }

/* Bulk alert action bar */
.bulk-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border2);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  border-radius: 0 0 var(--r) var(--r);
  animation: slideIn .15s ease;
}
.bulk-action-bar span {
  font-size: 13px;
  color: var(--text2);
  flex: 1;
}
.bulk-action-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--r2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bulk-action-btn:hover {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(245, 166, 35, .4);
}
.bulk-action-btn.danger:hover {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(239, 68, 68, .4);
}

/* Row highlight rules (applied via inline style; these are the checkbox cells) */
.hl-rule-check {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}
tr.hl-row-warn  { background: rgba(245, 158, 11, .08)  !important; }
tr.hl-row-danger { background: rgba(239, 68, 68, .08)   !important; }
tr.hl-row-good  { background: rgba(34, 197, 94, .07)   !important; }
tr.hl-row-info  { background: rgba(59, 130, 246, .08)  !important; }

/* Print stylesheet */
@media print {
  .sidebar, .header-actions, .btn-settings, .btn-notif,
  .btn-theme, .notif-drawer, #notif-drawer-backdrop,
  .breadcrumb-bar, .tab-nav, .session-warn-overlay,
  .bulk-action-bar, .preset-bar, .ctx-menu,
  .ann-modal-backdrop, .acct-hover-card,
  #feed-lag-dot, #chart-zoom-hint {
    display: none !important;
  }
  .main-content { margin-left: 0 !important; }
  .header { position: static !important; box-shadow: none !important; border-bottom: 1px solid #ccc !important; }
  body { background: #fff !important; color: #000 !important; }
  .card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  table { border-collapse: collapse !important; }
  th, td {
    border: 1px solid #ddd !important;
    color: #000 !important;
    background: transparent !important;
  }
  thead th { background: #f5f5f5 !important; font-weight: 700 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  @page { margin: 1.5cm; }
}

.sym-class-badge.Unclassified {
  background: transparent;
  color: var(--text3);
  border: 1px solid var(--border)
}

/* Dislocation direction badges */
.dloc-up-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  background: rgba(34, 197, 94, .15);
  color: var(--green)
}

.dloc-down-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  background: rgba(239, 68, 68, .12);
  color: var(--red)
}

/* Market Watch — Stale column badge */
.mw-stale-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(239, 68, 68, .18);
  color: var(--red);
  animation: pulse-stale 1.4s ease-in-out infinite
}

@keyframes pulse-stale {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .55
  }
}

/* ── ALERTS TAB ──────────────────────────────────────────────── */
.alert-chip {
  padding: 4px 10px;
  border-radius: 1px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all .15s;
}

.alert-chip.active {
  background: var(--gold-dim);
  border-color: rgba(245, 166, 35, 0.5);
  border-left-width: 2px;
  color: var(--gold);
  font-weight: 600;
}

.alert-chip:hover:not(.active) {
  border-color: var(--gold);
  color: var(--gold)
}

.alerts-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

.chip-unread {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 14px;
}

.alert-chip.active .chip-unread {
  background: rgba(245, 166, 35, 0.25);
  color: var(--gold);
}

.alerts-row {
  cursor: default;
  transition: background .15s
}

.alerts-row[onclick] {
  cursor: pointer
}

.alerts-row:hover {
  background: var(--gold-dim)
}

.alert-status-active {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  background: rgba(239, 68, 68, .18);
  color: var(--red);
  animation: pulse-stale 1.4s ease-in-out infinite;
}

.alert-status-resolved {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-family: var(--mono);
  background: var(--bg3);
  color: var(--text3);
}

/* ── CREATE ALERT MODAL form fields ─────────────────────────── */
.ca-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.ca-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500
}

.ca-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .15s;
}

.ca-input:focus {
  border-color: var(--gold)
}
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: dark;
}

/* ── PANEL COMPONENT ─────────────────────────────────────────── */
.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px
}

.panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px
}

.panel-body {
  padding: 18px;
  padding-bottom: 50px;
}

/* ── STAT CARD COMPONENT ─────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  gap: 12px
}

.stat-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px
}

.stat-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px
}

.stat-val {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text)
}

/* ── FORM CONTROL ────────────────────────────────────────────── */
.form-control {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--sans);
  outline: none;
  transition: border-color .15s, box-shadow .15s
}

.form-control:focus {
  border-color: var(--gold);
  border-left-width: 2px;
  box-shadow: inset 3px 0 0 var(--gold-dim);
  outline: none;
}

.form-control::placeholder {
  color: var(--text3)
}

/* ── BUTTON SYSTEM ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 1px;
    border: 1px solid var(--bg3);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--mono);
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
    white-space: nowrap;
    background: var(--bg);
    color: var(--text);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.btn-primary:hover {
  background: var(--blue2);
  border-color: var(--blue2)
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 1px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--mono);
  line-height: 1
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold)
}

.btn-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.35)
}

.btn-success:hover {
  background: rgba(34, 197, 94, 0.18)
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.35)
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2)
}

.btn-warning {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.35)
}

.btn-outline-info {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 1px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--mono)
}

.btn-outline-info:hover {
  background: rgba(74, 144, 226, 0.12)
}

/* ── STATUS BADGE ────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 1px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border2);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-family: var(--mono)
}

/* ── BOOTSTRAP UTILITY SHIMS ─────────────────────────────────── */
.text-muted   { color: var(--text2) }
.text-white   { color: var(--text) }
.text-danger  { color: var(--red) }
.text-warning { color: var(--amber) }
.text-center  { text-align: center }

.mb-2 { margin-bottom: 8px }
.mb-3 { margin-bottom: 12px }
.mb-4 { margin-bottom: 16px }
.mt-2 { margin-top: 8px }
.mt-3 { margin-top: 12px }
.mt-4 { margin-top: 16px }
.ms-2 { margin-left: 8px }
.p-3  { padding: 12px }
.p-4  { padding: 16px }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px
}

.col-12  { flex: 0 0 100% }
.col-md-3 { flex: 1 1 calc(25% - 12px); min-width: 160px }
.col-md-6 { flex: 1 1 calc(50% - 8px);  min-width: 240px }
.h-100   { height: 100% }
.shadow  { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) }
.bg-dark { background: var(--bg2) }
.bg-secondary { background: var(--bg3) }
.border-secondary { border-color: var(--border2) }

.table-responsive { overflow-x: auto }
.table-hover tbody tr:hover { background: var(--bg3) }

.input-group {
  display: flex;
  gap: 0
}

.input-group .form-control {
  border-radius: var(--r2) 0 0 var(--r2)
}

.input-group .btn,
.input-group .btn-primary,
.input-group .btn-secondary {
  border-radius: 0 var(--r2) var(--r2) 0
}

.input-group-text {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-right: none;
  padding: 8px 12px;
  color: var(--text2);
  font-size: 13px;
  border-radius: var(--r2) 0 0 var(--r2)
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px
}

.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer
}

.form-check-label {
  font-size: 13px;
  color: var(--text2);
  cursor: pointer
}

.form-switch .form-check-input {
  width: 32px;
  height: 18px;
  accent-color: var(--blue)
}

.chart-tip {
  max-width: min(340px, calc(100% - 12px));
  overflow-wrap: anywhere;
}

.chart-tip-title {
  color: var(--text2);
  font-weight: 700;
  margin-bottom: 6px;
}

.chart-tip-row {
  display: grid;
  grid-template-columns: 9px minmax(54px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chart-tip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.chart-tip-label {
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-tip-value {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.chart-tip-more {
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 5px;
  padding-top: 4px;
}

.event-risk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.55fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .event-risk-layout {
    grid-template-columns: 1fr;
    overflow: auto !important;
  }

  #event-risk-panel {
    min-height: 320px;
  }
}

@media (max-width: 1200px) {
  #markout-stats,
  .routing-attr-grid,
  .markout-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── ALIEN-TECH STRUCTURAL EXTRAS ────────────────────────────── */

/* Section titles — monospace technical label style */
.section-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

/* Card values — keep mono clean */
.card-value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
}

/* Progress bars — angular */
.progress-bar-wrap {
  border-radius: 1px;
  overflow: hidden;
}
.progress-bar {
  border-radius: 0;
}

/* Modal overlays — corner bracket treatment for all modal-card variants */
.modal-card,
[class*="modal-card"] {
  border-radius: 2px;
}

/* Panel component angular */
.panel {
  border-radius: 2px;
}
.panel-header {
  border-radius: 0;
}

/* Stat card angular */
.stat-card {
  border-radius: 2px;
}

/* Search bar inputs — angular focus */
.search-bar input:focus {
  border-color: var(--gold);
  border-left-width: 2px;
  box-shadow: inset 3px 0 0 var(--gold-dim);
  outline: none;
}

/* Settings nav items — sharper */
.settings-nav-item {
  border-radius: 1px;
}

/* Profile label — monospace technical */
.profile-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.2px;
}

/* Feed pulse indicator — diamond shape */
.pulse {
  border-radius: 0;
  transform: rotate(45deg);
  width: 7px;
  height: 7px;
}

/* Server time — stronger mono feel */
.server-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.5px;
}

/* Active alerts badge — rectangular */
.alerts-badge,
.chip-unread {
  border-radius: 1px;
}

/* Tooltip — angular */
.info-tooltip-content {
  border-radius: 2px;
}

/* Offline banner — angular */
.offline-banner {
  border-radius: 0;
  border-left: 3px solid var(--red);
}

/* Gauge elements — angular */
.gauge-bar {
  border-radius: 0;
}
.gauge-fill {
  border-radius: 0;
}

/* Drill card focus — gold instead of default */
.drill-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Tab load overlay — label styling */
#tab-load-overlay .tlo-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
}

/* Scan animation — used for loading states */
@keyframes scanPulse {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* Quality pills — angular */
.quality-pill {
  border-radius: 1px;
}

/* Symbol class badge — angular */
.sym-class-badge {
  border-radius: 1px;
}

/* Tab content area — no extra padding on the main grid bg */
.tab-content.active {
  background: transparent;
}

/* Light mode: fix grid overlay on body */
body.light {
  background-image:
    linear-gradient(var(--grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── TAB LOAD OVERLAY ─────────────────────────────────────────── */
#tab-load-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(13, 14, 17, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#tab-load-overlay.active {
  opacity: 1;
  pointer-events: all;
}

#tab-load-overlay .tlo-spinner {
  width: 60px;
  height: 60px;
  background: url("/img/BrokerCNC_Icon.png") center center / contain no-repeat;
  border: none;
  animation: none;
  animation: spin .55s linear infinite;
}

#tab-load-overlay .tlo-label {
  color: var(--text2);
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* ── PER-WIDGET LOADER ───────────────────────────────────────── */
.widget-loader {
  position: fixed;
  background: var(--bgop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: all;
  border-radius: 8px;
}
.widget-loader .wl-icon {
  width: 50px;
  height: 50px;
  background: url("/img/BrokerCNCtm_favico.png") center center / contain no-repeat;
  animation: spin 0.55s linear infinite;
}

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  animation: toastIn .2s ease;
  line-height: 1.4;
}

.toast.hiding {
  animation: toastOut .2s ease forwards;
}

.toast-icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

.toast.toast-error   { border-left: 3px solid var(--red); }
.toast.toast-success { border-left: 3px solid var(--green); }
.toast.toast-warning { border-left: 3px solid var(--amber); }
.toast.toast-info    { border-left: 3px solid var(--blue); }

.toast.toast-error   .toast-icon { color: var(--red); }
.toast.toast-success .toast-icon { color: var(--green); }
.toast.toast-warning .toast-icon { color: var(--amber); }
.toast.toast-info    .toast-icon { color: var(--blue); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ═══════════════════════════════════════════════════════════════
   ── SESSION TIMEOUT WARNING ────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.session-warn-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99990;
}

.session-warn-box {
  background: var(--bg2);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  padding: 32px 36px;
  text-align: center;
  max-width: 360px;
  width: 90vw;
  box-shadow: 0 0 0 1px rgba(245,166,35,0.2), 0 0 32px rgba(245,166,35,0.12), 0 24px 48px rgba(0,0,0,0.7);
}

.session-warn-title {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.session-warn-body {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 24px;
  line-height: 1.6;
}

.session-warn-body strong {
  color: var(--text);
  font-size: 15px;
  font-family: var(--mono);
}

.session-warn-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   ── TAB REFRESH STAMP ─────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.tab-refresh-stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text3);
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 1px;
  transition: color 0.3s, border-color 0.3s;
}

.tab-refresh-stamp.stale {
  color: var(--amber);
  border-color: rgba(245,158,11,0.25);
}

.tab-refresh-stamp.old {
  color: var(--red);
  border-color: rgba(239,68,68,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   ── EMPTY STATE ───────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.empty-state-cell {
  padding: 48px 24px !important;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text3);
}

.empty-state-msg {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text3);
}

.empty-state-sub {
  font-size: 11px;
  color: var(--text3);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   ── FEED LAG INDICATOR ────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.pulse.lagging {
  background: var(--amber) !important;
  box-shadow: 0 0 6px var(--amber) !important;
  animation: pulse-amber 1.2s ease-in-out infinite;
}

@keyframes pulse-amber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════
   ── NOTIFICATION BELL BUTTON ──────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.btn-notif {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 1px;
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}

.btn-notif:hover {
  background: rgba(245,166,35,0.08);
  color: var(--gold);
  border-color: rgba(245,166,35,0.3);
}

.notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  border: 1px solid var(--bg);
}

/* ═══════════════════════════════════════════════════════════════
   ── NOTIFICATION HISTORY DRAWER ───────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.notif-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2990;
}

.notif-drawer {
  position: fixed;
  top: 56px;
  right: 0;
  width: 320px;
  max-width: 90vw;
  height: calc(100vh - 56px);
  background: var(--bg2);
  border-left: 1px solid rgba(245,166,35,0.12);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}

.notif-drawer.open {
  transform: translateX(0);
}

.notif-drawer.open ~ .notif-drawer-backdrop {
  display: block;
}

.notif-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(245,166,35,0.1);
  flex-shrink: 0;
  background: var(--bg);
}

.notif-drawer-title {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text2);
  text-transform: uppercase;
}

.notif-drawer-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 1px;
  color: var(--text3);
  font-size: 10px;
  font-family: var(--mono);
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.notif-drawer-clear:hover { color: var(--text2); border-color: var(--border2); }

.notif-drawer-close {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}

.notif-drawer-close:hover { color: var(--text); }

.notif-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.notif-empty {
  text-align: center;
  color: var(--text3);
  font-size: 12px;
  font-family: var(--mono);
  padding: 40px 20px;
}

.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.notif-item:hover { background: rgba(255,255,255,0.02); }

.notif-icon {
  font-size: 12px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-content { flex: 1; min-width: 0; }

.notif-msg {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.notif-time {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--mono);
  margin-top: 3px;
}

.notif-item.notif-error .notif-icon  { color: var(--red); }
.notif-item.notif-success .notif-icon { color: var(--green); }
.notif-item.notif-warning .notif-icon { color: var(--amber); }
.notif-item.notif-info .notif-icon    { color: var(--blue); }
.notif-item.notif-alert .notif-icon   { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   ── BREADCRUMB BAR ────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: rgba(245,166,35,0.04);
  border-bottom: 1px solid rgba(245,166,35,0.08);
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--mono);
}

.bc-item {
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 11px;
  font-family: var(--mono);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 1px;
  transition: background 0.12s;
  opacity: 0.75;
}

.bc-item:hover { background: rgba(245,166,35,0.1); opacity: 1; }

.bc-sep {
  color: var(--text3);
  font-size: 11px;
  pointer-events: none;
}

.bc-current {
  color: var(--text2);
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════
   ── CHART ZOOM HINT ───────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.chart-zoom-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,14,17,0.9);
  border: 1px solid rgba(245,166,35,0.2);
  border-radius: 1px;
  padding: 5px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 9000;
}

/* ═══════════════════════════════════════════════════════════════
   ── LIGHT MODE OVERRIDES ──────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
body.light .notif-drawer { background: var(--bg2); border-left-color: rgba(217,119,6,0.15); }
body.light .notif-drawer-header { background: var(--bg3); }
body.light .notif-item { border-bottom-color: var(--border); }
body.light .breadcrumb-bar { background: rgba(217,119,6,0.04); border-bottom-color: rgba(217,119,6,0.1); }

/* ═══════════════════════════════════════════════════════════════
   ── CENTERED FLASH MESSAGE ────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
.centered-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  padding: 14px 28px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  animation: centeredFlashIn 0.18s ease forwards;
  white-space: nowrap;
}

.centered-flash.error   { border-left: 3px solid var(--red);   color: var(--red); }
.centered-flash.warning { border-left: 3px solid var(--amber); color: var(--amber); }
.centered-flash.success { border-left: 3px solid var(--green); color: var(--green); }

.centered-flash.fading {
  animation: centeredFlashOut 0.35s ease forwards;
}

@keyframes centeredFlashIn {
  from { opacity: 0; transform: translate(-50%, -44%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes centeredFlashOut {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, -56%); }
}

/* ═══════════════════════════════════════════════════════════════
   ── ACCOUNT SEARCH MULTI-TAB STRIP ────────────────────────────
   ═══════════════════════════════════════════════════════════════ */
#sr-tab-wrap {
  display: none;
  align-items: stretch;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
  margin-bottom: 0;
}

#sr-tab-bar {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  margin-bottom: 0;
  scrollbar-width: none;
}
#sr-tab-bar::-webkit-scrollbar { display: none; }

.sr-tab-arrow {
  flex-shrink: 0;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.sr-tab-arrow:hover:not(:disabled) { color: var(--text1); background: var(--bg3); }
.sr-tab-arrow:disabled { opacity: 0.25; cursor: default; }
#sr-tab-prev { border-radius: var(--r) 0 0 0; border-right: 1px solid var(--border); }
#sr-tab-next { border-radius: 0 var(--r) 0 0; border-left:  1px solid var(--border); }

.sr-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  color: var(--text3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  outline: none;
}

.sr-tab-btn:hover { color: var(--text2); }

.sr-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.sr-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  color: var(--text3);
  border-radius: 2px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.sr-tab-close:hover {
  color: var(--text);
  background: var(--bg3);
}

#sr-tab-panels {
  display: none;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  padding: 16px 0 0;
  margin-bottom: 0;
}

.sr-panel {
  display: none;
}

.sr-panel.active {
  display: block;
}
#overlay-stats{
  min-width: 300px;
}

.network-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
}

.network-canvas-wrap {
  position: relative;
  min-height: 580px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.network-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 580px;
}

/* ── Info-tip bubble ───────────────────────────────────────── */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: rgba(148,163,184,0.10);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 50%;
  font-size: 10px;
  color: var(--text3);
  cursor: help;
  margin-left: 6px;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  font-style: normal;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-transform: none;
}
.info-tip:hover {
  background: rgba(96,165,250,0.18);
  color: var(--text);
  border-color: rgba(96,165,250,0.40);
}
.tip-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 9999;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 10px 13px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
  width: 270px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  font-weight: normal;
  font-family: var(--sans);
  pointer-events: none;
  white-space: normal;
  text-align: left;
}
.tip-content.tip-above {
  top: auto;
  bottom: calc(100% + 8px);
}
.info-tip:hover .tip-content { display: block; }
.tip-formula {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

.network-legend {
  position: absolute;
  bottom: 10px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  z-index: 10;
  pointer-events: none;
}
.network-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text2);
  font-family: var(--mono);
}
.nl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.88;
}

.network-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 13px;
}

.network-side,
.cascade-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}

.network-cluster-list,
.cascade-corr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.network-cluster-item,
.cascade-corr-item {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 9px 10px;
  background: rgba(255,255,255,0.025);
}

.network-cluster-item strong,
.cascade-corr-item strong {
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}

.network-cluster-meta,
.cascade-corr-meta {
  margin-top: 5px;
  color: var(--text3);
  font-size: 11px;
  font-family: var(--mono);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cascade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}

.cascade-table-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.cascade-path-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 180px;
}

.cascade-path-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.cascade-path-bar {
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(239,68,68,0.92), rgba(245,158,11,0.7));
  border: 1px solid rgba(239,68,68,0.22);
}

.cascade-path-label {
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .network-layout,
  .cascade-grid,
  .cascade-table-grid {
    grid-template-columns: 1fr;
  }
}

.adverse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .adverse-grid {
    grid-template-columns: 1fr;
  }
}
#heatmap-wrapper{
  background: #1f2937;
}

/* My Dashboard workspace */
.mydash-controls {
  padding: 0;
  overflow: hidden;
}

.mydash-library-header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.mydash-library-summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mydash-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.mydash-library-card {
  background: var(--glass);
  border: 1px solid var(--border);
  min-height: 162px;
  position: relative;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.mydash-library-card:hover {
  border-color: rgba(25, 211, 255, .32);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

.mydash-library-card-link {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 18px 18px 15px;
  text-decoration: none;
}

.mydash-library-card-link:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: -1px;
}

.mydash-card-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  padding-right: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mydash-card-details {
  color: var(--text2);
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
}

.mydash-card-detail-value {
  color: var(--text);
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}

.mydash-card-updated {
  border-top: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.mydash-card-accessed {
  color: var(--text2);
  margin-bottom: 5px;
}

.mydash-card-delete {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 9px;
  position: absolute;
  right: 7px;
  top: 8px;
  z-index: 1;
}

.mydash-card-delete:hover {
  color: var(--red);
}

.mydash-library-empty {
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, .11);
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 310px;
  padding: 35px;
  text-align: center;
}

.mydash-library-empty.visible {
  display: flex;
}

.mydash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 9px 20px 8px;
}

.mydash-workspace-heading {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.mydash-back-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  margin: 0;
  padding: 0 12px 0 0;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mydash-back-btn:hover {
  color: var(--gold);
}

.mydash-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mydash-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px;
}

.mydash-tabs::-webkit-scrollbar {
  display: none;
}

.mydash-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mydash-tab:hover {
  background: var(--bg3, rgba(255,255,255,.07));
  color: var(--text);
}

.mydash-tab.active {
  background: var(--blue, #3b82f6);
  color: #fff;
}

.mydash-subtitle {
  display: none;
  font-size: 12px;
  margin-top: 5px;
}

.mydash-primary {
  background: var(--gold-dim);
  border-color: rgba(245, 166, 35, .42);
  color: var(--gold);
  font-weight: 600;
}

.mydash-primary:hover {
  border-color: var(--gold);
  color: var(--text);
}

.mydash-toolbar {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 7px 20px;
}

.mydash-meta,
.mydash-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.mydash-widget-count {
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .025);
}

.mydash-hint {
  color: var(--text3);
  font-size: 11px;
}

.mydash-status {
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  max-width: 230px;
  min-height: 25px;
  min-width: 116px;
  overflow: hidden;
  padding: 5px 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mydash-status:empty {
  visibility: hidden;
}

.mydash-status.unsaved {
  background: rgba(245, 166, 35, .08);
  border-color: rgba(245, 166, 35, .26);
  color: var(--amber);
}

.mydash-status.saved {
  background: rgba(23, 201, 100, .07);
  border-color: rgba(23, 201, 100, .24);
  color: var(--green);
}

.mydash-status.saving {
  color: var(--text2);
}

.mydash-status.error {
  background: rgba(243, 18, 96, .08);
  border-color: rgba(243, 18, 96, .25);
  color: var(--red);
}

#my-dashboard-save-btn:disabled {
  cursor: default;
  opacity: .45;
}

#my-dashboard-save-btn.is-dirty {
  background: var(--gold-dim);
  border-color: rgba(245, 166, 35, .42);
  color: var(--gold);
}

.mydash-canvas {
  min-height: 340px;
  position: relative;
}

.mydash-canvas .grid-stack {
  min-height: 340px;
}

.mydash-empty {
  align-items: center;
  background: radial-gradient(circle at center, rgba(25, 211, 255, .045), transparent 58%);
  border: 1px dashed rgba(255, 255, 255, .11);
  display: none;
  flex-direction: column;
  inset: 18px;
  justify-content: center;
  padding: 28px;
  position: absolute;
  text-align: center;
}

.mydash-empty.visible {
  display: flex;
}

.mydash-empty-icon {
  align-items: center;
  border: 1px solid rgba(245, 166, 35, .36);
  color: var(--gold);
  display: flex;
  font-size: 24px;
  height: 42px;
  justify-content: center;
  margin-bottom: 15px;
  width: 42px;
}

.mydash-empty-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}

.mydash-empty-copy {
  color: var(--text2);
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 19px;
  max-width: 430px;
}

@media (max-width: 780px) {
  .mydash-library-header,
  .mydash-header,
  .mydash-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .mydash-actions {
    flex-wrap: wrap;
  }

  .mydash-hint {
    display: none;
  }
}

/* ── My Dashboard — sharing & visibility additions ─────────── */
.mydash-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mydash-card-name-row .mydash-card-name {
  margin-bottom: 0;
}

.mydash-vis-badge {
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mydash-vis-private {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text3);
}

.mydash-vis-shared {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.mydash-vis-edit {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.mydash-card-owner {
  color: var(--text3);
  font-size: 11px;
  margin-top: 2px;
}

.mydash-card-edited-by {
  color: var(--text3);
  font-size: 11px;
  margin-top: 1px;
}

.mydash-library-section-title {
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  grid-column: 1 / -1;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  margin-top: 8px;
  padding-bottom: 6px;
  text-transform: uppercase;
}

.mydash-library-section-title:first-child {
  margin-top: 0;
}

/* Settings modal — radio option rows */
.mydash-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mydash-radio-option {
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}

.mydash-radio-option:hover {
  border-color: rgba(245, 166, 35, 0.4);
}

.mydash-radio-option input[type="radio"] {
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

.mydash-radio-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.mydash-radio-desc {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Eagle View */
.eagle-view {
  padding: 10px 10px 14px;
  min-height: 100%;
  color: var(--text);
}

.eagle-view * {
  letter-spacing: 0;
}

.eagle-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 6px;
}

.eagle-title-block {
  display: none;
}

.eagle-eyebrow {
  color: var(--cyan);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
}

.eagle-header h1 {
  margin: 1px 0 0;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
}

.eagle-subtitle,
.eagle-updated {
  color: var(--text3);
  font-size: 12px;
  font-family: var(--mono);
}

.eagle-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.eagle-icon-btn,
.eagle-link-btn {
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .16s, color .16s, background .16s;
}

.eagle-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.eagle-icon-btn svg {
  width: 16px;
  height: 16px;
}

.eagle-link-btn {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--mono);
}

.eagle-icon-btn:hover,
.eagle-link-btn:hover {
  border-color: rgba(25, 211, 255, 0.34);
  color: var(--cyan);
  background: rgba(25, 211, 255, 0.07);
}

.eagle-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.eagle-kpi,
.eagle-panel {
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(19, 30, 51, 0.92), rgba(7, 13, 26, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.eagle-kpi {
  min-height: 82px;
  padding: 11px 13px;
}

.eagle-kpi-label,
.eagle-panel-head h2,
.eagle-book-label {
  color: var(--text2);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
}

.eagle-kpi-value {
  margin-top: 6px;
  color: var(--text1);
  font-family: var(--mono);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.eagle-kpi-sub,
.eagle-book-sub {
  margin-top: 6px;
  color: var(--text3);
  font-size: 11px;
  font-family: var(--mono);
}

.eagle-delta {
  margin-left: 6px;
  font-weight: 800;
}

.eagle-delta.pos,
.eagle-pos {
  color: var(--green);
}

.eagle-delta.neg,
.eagle-neg {
  color: var(--red);
}

.eagle-delta.neu,
.eagle-neu {
  color: var(--text3);
}

.eagle-health-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 5px;
}

.eagle-health-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  background: conic-gradient(var(--green) 0deg, var(--green) 270deg, rgba(255,255,255,0.09) 270deg 360deg);
  position: relative;
}

.eagle-health-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bg2);
}

.eagle-health-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
}

.eagle-health-label {
  color: var(--green);
  font-size: 15px;
  font-weight: 800;
}

.eagle-main-grid {
  display: grid;
  grid-template-columns: minmax(410px, 1.02fr) minmax(430px, 1fr) minmax(300px, .72fr);
  gap: 10px;
  margin-bottom: 8px;
}

.eagle-alert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.eagle-bottom-grid {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(290px, .95fr) minmax(330px, 1.15fr) minmax(240px, .8fr);
  gap: 10px;
}

/* Exposure by Symbol moved up to the hero side column, so the bottom row holds
   the remaining three panels (Risk / Liquidity / System). */
.eagle-bottom-grid-3 {
  grid-template-columns: minmax(290px, 1fr) minmax(330px, 1.2fr) minmax(240px, .9fr);
}

.eagle-panel {
  min-width: 0;
  overflow: hidden;
  padding: 10px 12px;
}

.eagle-panel-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.eagle-panel-head h2 {
  margin: 0;
  color: var(--text1);
  font-size: 13px;
  line-height: 1.2;
}

.eagle-panel-head svg {
  width: 16px;
  height: 16px;
  color: var(--text3);
}

.eagle-panel-head.danger h2 {
  color: var(--red);
}

.eagle-panel-head.warning h2 {
  color: var(--amber);
}

.eagle-panel-stat {
  text-align: right;
  font-family: var(--mono);
}

.eagle-panel-stat span {
  display: block;
  color: var(--text3);
  font-size: 10px;
}

.eagle-panel-stat strong {
  color: var(--text1);
  font-size: 20px;
}

.eagle-book-grid {
  display: grid;
  grid-template-columns: minmax(124px, 1fr) 136px minmax(124px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 162px;
}

.eagle-book-label.a {
  color: var(--blue);
}

.eagle-book-label.b,
.eagle-book-value.b {
  color: var(--red);
}

.eagle-book-value {
  margin-top: 6px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.eagle-book-ring {
  width: 136px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--red) 0deg 90deg, var(--blue) 90deg 360deg);
  position: relative;
  justify-self: center;
}

.eagle-book-ring::after {
  content: '';
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
}

.eagle-book-ring div {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 10px;
}

.eagle-book-ring strong {
  display: block;
  color: var(--text1);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.05;
  font-weight: 400;
}

.eagle-book-ring span {
  display: block;
  color: var(--text3);
  font-size: 10px;
  margin-top: 4px;
}

/* ── A-Book vs B-Book — compact command card (Eagle hero + widget) ── */
.eagle-main-grid-2 {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
}

/* Eagle View places the card on the left of a row; Real-Time Revenue + Scam
   Radar stack in the right column. The widget reuses every .ebh-* rule but
   fills its own grid cell. */
.eagle-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  align-items: stretch;
}

.eagle-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.eagle-hero-side > .eagle-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Real-Time Revenue keeps its natural height; the Scam Radar and the Exposure
   split share the leftover height under it and scroll internally. */
.eagle-revenue-panel {
  flex: 0 0 auto;
}

/* Scam Radar takes its natural height (capped); Exposure grows to fill the
   leftover white space beneath it. */
.eagle-side-scam {
  flex: 0 1 auto;
}

.eagle-side-exposure {
  flex: 1 1 0;
  min-height: 170px;
}

.eagle-side-scam .ev-scam-host {
  flex: 1;
  min-height: 0;
  max-height: 240px;
  overflow: auto;
}

/* The last panel in the right column (Important Actions) grows to fill the
   leftover height so there's no white space under it. */
.eagle-hero-side > .eagle-alert-panel:last-child {
  flex: 1 1 0;
  min-height: 150px;
}

.eagle-hero-side > .eagle-alert-panel:last-child .eagle-signal-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Exposure by Symbol split into two even columns so twice as many symbols are
   visible without scrolling. The split container scrolls as one unit. */
.eagle-side-exposure .eagle-exposure-split {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.eagle-side-exposure .eagle-table-wrap {
  overflow: visible;
  max-height: none;
}

/* Tighten the split tables so both columns fit the narrow side column. */
.eagle-side-exposure .eagle-table th,
.eagle-side-exposure .eagle-table td {
  padding: 4px 6px;
  font-size: 11px;
}

.eagle-book-hero {
  margin-bottom: 0;
  padding: 11px 13px;
}

.ebh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.ebh-title h2 {
  margin: 0;
  color: var(--text1);
  font-size: 14px;
  font-weight: 700;
}

.ebh-sub {
  margin-top: 2px;
  color: var(--text3);
  font-size: 10px;
}

.ebh-routing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

.ebh-routing:hover { border-color: var(--blue); }

.ebh-routing-eyebrow {
  color: var(--text3);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.ebh-routing svg { width: 12px; height: 12px; color: var(--blue); }
.ebh-routing-mode { color: var(--text1); font-weight: 700; }

.ebh-routing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
}

.ebh-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.ebh-book {
  border: 1px solid;
  border-radius: 9px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}

.ebh-book.a {
  border-color: rgba(30, 123, 255, 0.4);
  background: linear-gradient(160deg, rgba(30, 123, 255, 0.1), rgba(30, 123, 255, 0.01));
}

.ebh-book.b {
  border-color: rgba(243, 18, 96, 0.4);
  background: linear-gradient(160deg, rgba(243, 18, 96, 0.1), rgba(243, 18, 96, 0.01));
}

.ebh-book-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.ebh-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.ebh-badge svg { width: 13px; height: 13px; }
.ebh-badge.a { background: rgba(30, 123, 255, 0.16); color: var(--blue); }
.ebh-badge.b { background: rgba(243, 18, 96, 0.16); color: var(--red); }

.ebh-book-name {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ebh-book-name.a { color: var(--blue); }
.ebh-book-name.b { color: var(--red); }
.ebh-book-head .eagle-delta { margin-left: auto; }

.ebh-book-value {
  font-family: var(--mono);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1;
  color: var(--text1);
  overflow-wrap: anywhere;
}

.ebh-book-sub {
  margin-top: 4px;
  color: var(--text3);
  font-size: 10px;
  font-family: var(--mono);
}

.ebh-spark { height: 22px; margin: 7px 0 2px; }
.ebh-spark svg { width: 100%; height: 100%; display: block; }

.ebh-book-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ebh-book-foot span {
  display: block;
  color: var(--text3);
  font-size: 9px;
  text-transform: uppercase;
}

.ebh-book-foot strong { font-family: var(--mono); font-size: 12px; color: var(--text1); }

.ebh-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ebh-ring { width: 108px; }
.ebh-ring::after { inset: 13px; }
.ebh-ring strong { font-size: 13px; }
.ebh-ring span { font-size: 9px; margin-top: 2px; }

.ebh-ring div i {
  display: block;
  margin: 3px auto 0;
  width: 12px;
  height: 12px;
  color: var(--text3);
}

.ebh-center-pill {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
}

.ebh-breakdown-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
  padding: 9px 11px;
  margin-bottom: 10px;
}

.ebh-bd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.ebh-bd-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
}

.ebh-bd-title svg { width: 13px; height: 13px; color: var(--blue); }

.ebh-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.ebh-toggle button {
  padding: 3px 11px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text3);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
}

.ebh-toggle button.active { background: var(--blue); color: #fff; }

.ebh-bd-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ebh-bd-table th, .ebh-bd-table td { padding: 4px 7px; }

.ebh-bd-table thead .grp {
  text-align: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
}

.ebh-bd-table thead .grp.a { color: var(--blue); }
.ebh-bd-table thead .grp.b { color: var(--red); }
.ebh-bd-table thead .grp.t { color: var(--text2); }

.ebh-bd-table thead .leg {
  color: var(--text3);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: right;
}

.ebh-bd-table thead .leg.metric { text-align: left; }

.ebh-bd-table tbody td {
  text-align: right;
  font-family: var(--mono);
  color: var(--text1);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ebh-bd-table tbody td.metric { text-align: left; color: var(--text2); }
.ebh-bd-metric { display: inline-flex; align-items: center; gap: 7px; }
.ebh-bd-metric svg { width: 13px; height: 13px; color: var(--text3); }

.ebh-bd-table tr.sub td {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 800;
  background: rgba(25, 211, 255, 0.05);
}

.ebh-bd-table .grp-div { border-left: 1px solid rgba(255, 255, 255, 0.07); }

.ebh-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.ebh-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
  padding: 9px 10px;
  min-width: 0;
}

.ebh-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text2);
}

.ebh-tile-icon svg { width: 15px; height: 15px; }
.ebh-tile-icon.a { background: rgba(30, 123, 255, 0.14); color: var(--blue); }
.ebh-tile-icon.b { background: rgba(243, 18, 96, 0.14); color: var(--red); }

.ebh-tile-body { display: flex; flex-direction: column; min-width: 0; }

.ebh-tile-label {
  color: var(--text3);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 700;
}

.ebh-tile-value {
  font-family: var(--mono);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  color: var(--text1);
  line-height: 1.2;
}

.ebh-tile-value.a { color: var(--blue); }
.ebh-tile-value.b { color: var(--red); }

.ebh-tile-body .eagle-delta,
.ebh-tile-delta { font-size: 10px; margin-left: 0; }

.ebh-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.ebh-foot svg { width: 12px; height: 12px; }

@media (max-width: 1280px) {
  .eagle-hero-row { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .ebh-top { grid-template-columns: 1fr; }
  .ebh-tiles { grid-template-columns: repeat(2, 1fr); }
}

.eagle-mini-row,
.eagle-status-list > div,
.eagle-signal-item,
.eagle-table th,
.eagle-table td {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.eagle-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  margin-top: 6px;
  color: var(--text3);
  font-size: 11px;
}

.eagle-mini-row strong {
  color: var(--text1);
  font-family: var(--mono);
}

.eagle-chart-wrap {
  height: 176px;
  min-height: 176px;
}

.eagle-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.eagle-status-list {
  display: flex;
  flex-direction: column;
}

.eagle-status-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  min-height: 29px;
}

.eagle-status-list span {
  color: var(--text3);
  font-size: 12px;
}

.eagle-status-list strong {
  color: var(--text1);
  font-size: 13px;
  font-family: var(--mono);
  text-align: right;
  overflow-wrap: anywhere;
}

.eagle-status-list.compact > div {
  padding: 6px 0;
}

.eagle-behavior-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 154px;
}

.eagle-donut-wrap {
  width: 150px;
  height: 150px;
  position: relative;
}

.eagle-donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.eagle-donut-center {
  position: absolute;
  inset: 0;
  display: block;
  place-items: center;
  pointer-events: none;
  text-align: center;
  margin-top: 38%;
}

.eagle-donut-center strong {
  display: block;
  color: var(--text1);
  font-family: var(--mono);
  font-size: 21px;
}

.eagle-donut-center span {
  display: block;
  color: var(--text3);
  font-size: 11px;
}

.eagle-legend-list,
.eagle-signal-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.eagle-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  font-size: 12px;
  color: var(--text2);
}

.eagle-legend-dot,
.eagle-signal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.eagle-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eagle-legend-value {
  color: var(--text1);
  font-family: var(--mono);
}

.eagle-signal-list {
  gap: 0;
}

.eagle-alert-panel .eagle-signal-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 2px;
}

.eagle-signal-list.compact {
  margin-top: 7px;
}

/* ── Scam / Toxic Radar — purpose-built inner layout. The card height is content-driven
   (no min-height floor) so the alert row matches the main grid row above; the
   scroll lives inside .ev-scam-rows. ── */
.ev-scam-host {
  display: block;
}

.ev-scam {
  display: flex;
  flex-direction: column;
}

.ev-scam-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.ev-scam-count strong {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}

.ev-scam-count span {
  font-size: 11px;
  color: var(--text3);
  margin-left: 6px;
}

.ev-scam-window {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
}

.ev-scam-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 5px;
  max-height: 46px;
  overflow: hidden;
  flex-shrink: 0;
}

.ev-scam-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.ev-scam-chip b {
  font-weight: 800;
}

.ev-scam-chip-more {
  font-size: 10px;
  color: var(--text3);
  align-self: center;
}

.ev-scam-rows {
  max-height: 140px;
  overflow-y: auto;
  padding-right: 3px;
}

.ev-scam-row {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}

.ev-scam-row:last-child {
  border-bottom: 0;
}

.ev-scam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ev-scam-login {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  cursor: pointer;
}

.ev-scam-login:hover {
  text-decoration: underline;
}

.ev-scam-pats {
  color: var(--text3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-scam-score {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  min-width: 26px;
}

.eagle-signal-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 31px;
  padding: 5px 0;
}

.eagle-signal-main {
  min-width: 0;
}

.eagle-signal-title {
  color: var(--text1);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eagle-signal-sub {
  color: var(--text3);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eagle-signal-meta {
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.eagle-table-wrap {
  overflow: auto;
  max-height: 210px;
}

.eagle-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.eagle-table th,
.eagle-table td {
  padding: 6px 6px;
  color: var(--text2);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.eagle-table th {
  color: var(--text3);
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
}

.eagle-table td {
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eagle-trend {
  height: 18px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.eagle-trend i {
  display: block;
  width: 4px;
  min-height: 3px;
  border-radius: 1px;
  background: var(--green);
  opacity: .8;
}

.eagle-trend-empty {
  color: var(--text3);
  font-size: 11px;
  font-family: var(--mono);
}

.eagle-gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.eagle-gauge {
  min-height: 68px;
  padding: 7px 6px 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.eagle-gauge::before,
.eagle-gauge::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.eagle-gauge::before {
  top: 27px;
  width: 58px;
  height: 29px;
  border-radius: 58px 58px 0 0;
  background: conic-gradient(from 270deg at 50% 100%, var(--green) 0deg 66deg, var(--amber) 66deg 128deg, var(--red) 128deg 180deg, transparent 180deg 360deg);
  opacity: .95;
}

.eagle-gauge::after {
  top: 36px;
  width: 38px;
  height: 19px;
  border-radius: 38px 38px 0 0;
  background: var(--bg2);
}

.eagle-gauge span {
  display: block;
  color: var(--text3);
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}

.eagle-gauge strong {
  display: block;
  margin-top: 44px;
  color: var(--text1);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

.eagle-empty {
  color: var(--text3);
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}

.eagle-system-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--green);
  font-size: 12px;
  font-family: var(--mono);
  text-align: center;
}

body.light .eagle-kpi,
body.light .eagle-panel {
  background: var(--bg2);
  border-color: rgba(15, 23, 42, 0.10);
}

body.light .eagle-health-ring::after,
body.light .eagle-book-ring::after,
body.light .eagle-gauge::after {
  background: #f8fafc;
}

@media (max-width: 1480px) {
  .eagle-kpi-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .eagle-main-grid,
  .eagle-alert-grid,
  .eagle-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .eagle-main-grid,
  .eagle-alert-grid,
  .eagle-bottom-grid,
  .eagle-kpi-grid {
    grid-template-columns: 1fr;
  }

  .eagle-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .eagle-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .eagle-book-grid,
  .eagle-behavior-grid {
    grid-template-columns: 1fr;
  }

  .eagle-book-ring,
  .eagle-donut-wrap {
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .eagle-view {
    padding: 10px;
  }

  .eagle-gauge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
    /* App Layout — columns: menu | toggle-strip | content */
    #app {
    display: grid;
    grid-template-columns: 206px minmax(0, 1fr);
    grid-template-rows: 72px 1fr;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 211, 255, 0.08), transparent 38%),
        radial-gradient(circle at 85% 15%, rgba(30, 123, 255, 0.08), transparent 30%),
        var(--bg);
    }

    .header {
    grid-column-start: 1;
    grid-column-end: 3;
    position: relative;
    z-index: 20;
    min-height: 72px;
    }

    .header-nav {
    display: none !important;
    }

    .header-spacer {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    }

    .header-context {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
    border-left: 2px solid #273041;
    padding-left: 20px;
    }

    .header-context-eyebrow {
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    display: none;
    }

    .header-context-title {
    color: var(--text1);
    font-family: var(--manrope);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    .header-context-subtitle {
    color: var(--text3);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.2;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    @media (max-width: 1180px) {
    /* The subtitle used to be display:none here to reclaim header width. It is now the
       ONLY place a page's description lives — the duplicate in-page title blocks were
       removed — so hiding it would delete the information rather than defer it. It
       already truncates with an ellipsis, which is the right degradation. mobile.css
       still hides it below 1024px, where the compact header genuinely has no room. */
    .header-context-title {
        font-size: 21px;
    }
    }

    @media (max-width: 820px) {
    .header-context-eyebrow {
        display: none;
    }

    .header-context-title {
        font-size: 18px;
    }
    }

    .main-content {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 0;
    min-width: 0;
    }

    /* Vertical Menu */
    .v-menu {
    grid-column: 1;
    grid-row: 2 / 3;
    position: relative;   /* anchor the right-edge collapse handle */
    width: 206px;
    background-color: rgba(6, 11, 22, 0.96);
    background-image:
        linear-gradient(rgba(25, 211, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 211, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(30, 123, 255, 0.10), transparent 55%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    border-right: 1px solid rgba(25, 211, 255, 0.10);
    padding: 12px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.025),
        8px 0 32px rgba(0, 0, 0, 0.28);
    }

    /* Sleek scrollbar for menu */
    .v-menu::-webkit-scrollbar {
    width: 3px;
    }

    .v-menu::-webkit-scrollbar-track {
    background: transparent;
    }

    .v-menu::-webkit-scrollbar-thumb {
    background: rgba(25, 211, 255, 0.35);
    border-radius: 6px;
    }

    .v-menu::-webkit-scrollbar-thumb:hover {
    background: var(--cyan);
    }

    body.menu-collapsed .v-menu {
    width: 72px;
    }

    body.menu-collapsed #app {
    grid-template-columns: 72px minmax(0, 1fr);
    }

    /* Collapse handle — a thin clickable strip spanning the whole right edge of the sidebar. Transparent
       at rest (subtle), reveals a cyan highlight + a ‹ / › chevron on hover; click toggles the icon-rail. */
    .v-menu-collapse-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 9px;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    }
    /* The chevron is always on — it is the only thing advertising that the rail can be
       collapsed, and at opacity:0 you had to find it by accident. It rests in the muted
       text colour and hover is what adds the accent + glow, rather than what reveals it. */
    .v-menu-collapse-edge::before {
    content: '\2039';   /* ‹ — collapse (menu shrinks left) */
    color: var(--text3, #6B7890);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.15s ease, text-shadow 0.15s ease;
    }
    body.menu-collapsed .v-menu-collapse-edge::before { content: '\203A'; }   /* › — expand */
    .v-menu-collapse-edge:hover { background: linear-gradient(90deg, transparent, rgba(25, 211, 255, 0.20)); }
    .v-menu-collapse-edge:hover::before,
    .v-menu-collapse-edge:focus-visible::before {
    color: var(--cyan, #19D3FF);
    text-shadow: 0 0 8px rgba(25, 211, 255, 0.55);
    }
    .v-menu-collapse-edge:focus-visible { outline: 2px solid var(--cyan, #19D3FF); outline-offset: -2px; }

    .v-menu-logo {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(25, 211, 255, 0.10);
    display: none;
    }

    .v-menu-logo img {
    width: 100%;
    max-width: 172px;
    max-height: 52px;
    object-fit: contain;
    display: none;
    }

    body.light .v-menu-logo .logo-light {
    display: block;
    }

    body:not(.light) .v-menu-logo .logo-dark {
    display: block;
    }

    body.menu-collapsed .v-menu-logo img {
    max-width: 38px;
    }

    .v-menu-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 0 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    }

    .v-menu-group:last-child {
    border-bottom: none;
    }

    /* ── Menu customisation (Customize button, edit mode, hidden states) ── */
    .v-menu-customize-bar {
    padding: 2px 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    }

    .v-menu-customize-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--mono);
    }

    .v-menu-customize-btn:hover {
    background: rgba(25, 211, 255, 0.07);
    color: var(--text2);
    }

    .v-menu-customize-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 2px 0;
    }

    .v-menu-cust-hint {
    color: var(--text3);
    font-size: 9px;
    font-family: var(--mono);
    }

    .v-menu-cust-buttons {
    display: flex;
    gap: 5px;
    }

    .v-menu-cust-btn {
    flex: 1;
    padding: 5px 6px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 700;
    }

    .v-menu-cust-save {
    border-color: rgba(96, 175, 255, 0.55);
    color: #fff;
    background: linear-gradient(180deg, #2e8cff 0%, #1f6fff 100%);
    }

    .v-menu-cust-reset {
    color: var(--red);
    border-color: rgba(243, 18, 96, 0.4);
    }

    .v-menu-cust-btn:hover {
    filter: brightness(1.1);
    }

    body.menu-collapsed .v-menu-customize-btn .v-menu-text {
    display: none;
    }

    /* Edit-mode affordances */
    body.menu-customizing .v-menu-item,
    body.menu-customizing .menu-cat-handle {
    cursor: grab;
    }

    body.menu-customizing .v-menu-item {
    user-select: none;
    }

    body.menu-customizing .v-menu-label {
    display: flex;
    align-items: center;
    }

    .menu-cat-handle::before {
    content: '⋮⋮';
    margin-right: 6px;
    letter-spacing: -3px;
    color: var(--text3);
    }

    .menu-dragging {
    opacity: 0.5;
    outline: 1px dashed var(--gold);
    border-radius: 6px;
    }

    .menu-eye-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    }

    .menu-eye-toggle:hover {
    color: var(--text1);
    }

    .menu-eye-toggle svg {
    width: 14px;
    height: 14px;
    }

    /* Item tools cluster (set-home + hide), right-aligned within the item */
    .menu-item-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    }

    .menu-item-tools .menu-eye-toggle {
    margin-left: 0;
    }

    .menu-home-toggle {
    background: transparent;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    }

    .menu-home-toggle:hover {
    color: var(--text1);
    }

    .menu-home-toggle svg {
    width: 14px;
    height: 14px;
    }

    .menu-home-toggle.active {
    color: var(--gold);
    }

    .menu-home-toggle.active svg {
    fill: var(--gold);
    }

    /* Access-restricted page view (blocked by menu access control) */
    .access-denied-panel {
    display: none;
    place-items: center;
    min-height: 60vh;
    }
    .access-denied-panel.active {
    display: grid;
    }
    .access-denied-box {
    text-align: center;
    color: var(--text2);
    max-width: 420px;
    padding: 28px;
    }
    .access-denied-box svg {
    width: 40px;
    height: 40px;
    color: var(--amber);
    margin-bottom: 12px;
    }
    .access-denied-box h2 {
    margin: 0 0 8px;
    color: var(--text1);
    font-size: 18px;
    }
    .access-denied-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    }
    .access-denied-box code {
    font-family: var(--mono);
    color: var(--amber);
    }

    /* ── Menu Builder (Control Panel) ─────────────────────────────── */
    .mb-loading, .mb-error { color: var(--text3); font-size: 13px; padding: 12px 0; }
    .mb-error { color: var(--red); }
    .mb-list { display: flex; flex-direction: column; gap: 10px; }
    .mb-cat {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg2);
    }
    .mb-cat.mb-hidden { opacity: 0.5; }
    .mb-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3, var(--bg));
    border-radius: 8px 8px 0 0;
    cursor: grab;
    }
    .mb-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 10px 26px;
    min-height: 18px;
    }
    .mb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    cursor: grab;
    }
    .mb-item.mb-hidden { opacity: 0.45; }
    .mb-handle { color: var(--text3); letter-spacing: -3px; cursor: grab; user-select: none; }
    .mb-ico-preview { width: 15px; height: 15px; color: var(--text2); flex-shrink: 0; }
    .mb-cat-label { font-weight: 700; }
    .mb-label {
    flex: 1;
    min-width: 80px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text1);
    padding: 4px 8px;
    font-size: 12px;
    }
    .mb-icon {
    width: 92px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text2);
    padding: 4px 8px;
    font-size: 11px;
    font-family: var(--mono);
    }
    .mb-slug { font-family: var(--mono); font-size: 10px; color: var(--text3); white-space: nowrap; }
    .mb-add-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text2);
    font-size: 11px;
    padding: 3px 6px;
    max-width: 130px;
    }
    .mb-eye, .mb-del {
    background: transparent;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    }
    .mb-eye:hover, .mb-del:hover { color: var(--text1); }
    .mb-eye.off { color: var(--amber); }
    .mb-del:hover { color: var(--red); }
    .mb-eye svg, .mb-del svg, .mb-lock svg { width: 14px; height: 14px; }
    .mb-lock { color: var(--text3); display: inline-flex; align-items: center; padding: 3px; }
    .mb-dragging { opacity: 0.5; outline: 1px dashed var(--gold); }
    .mb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    }
    .mb-btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text1);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    }
    .mb-btn.mb-save { border-color: var(--gold); color: var(--gold); }
    .mb-btn:hover { filter: brightness(1.1); }
    .mb-hint { color: var(--text3); font-size: 11px; flex: 1; min-width: 200px; }

    /* Deleted-entries restore panel */
    .mb-deleted {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: var(--bg2);
    }
    .mb-deleted-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); margin-bottom: 8px; }
    .mb-deleted-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text3); }
    .mb-deleted-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
    .mb-deleted-kind {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text3); border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 6px; min-width: 54px; text-align: center;
    }
    .mb-deleted-lbl { flex: 1; color: var(--text1); font-size: 13px; }
    .mb-btn.mb-restore { padding: 4px 12px; font-size: 11px; }

    /* Hidden categories / items (normal mode) */
    .menu-cat-hidden,
    .menu-item-hidden,
    .menu-cat-empty {
    display: none !important;
    }

    /* In edit mode, reveal hidden entries (dimmed) so they can be toggled back */
    body.menu-customizing .v-menu-group.menu-cat-hidden,
    body.menu-customizing .v-menu-group.menu-cat-empty {
    display: flex !important;
    }

    body.menu-customizing .v-menu-item.menu-item-hidden {
    display: flex !important;
    }

    body.menu-customizing .menu-cat-hidden > .v-menu-label,
    body.menu-customizing .v-menu-item.menu-item-hidden {
    opacity: 0.45;
    }

    .v-menu-label,
    .v-menu-sub-label {
    color: var(--text3);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    .v-menu-label {
    padding: 7px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    }

    .v-menu-sub-label {
    padding: 8px 10px 3px 22px;
    font-size: 9px;
    opacity: 0.76;
    }

    body.menu-collapsed .v-menu-label,
    body.menu-collapsed .v-menu-sub-label {
    max-width: 0;
    opacity: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    }

    .v-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 9px;
    border: none;
    border-radius: 6px;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--text3);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--mono);
    letter-spacing: 0;
    /* transition:
        background-color 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease,
        padding 0.28s cubic-bezier(0.4, 0, 0.2, 1); */
    }

    .v-menu-item .alerts-badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-family: var(--mono);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    }

    .v-menu-item:hover {
    background-color: rgba(25, 211, 255, 0.07);
    color: var(--text2);
    /* border-left-color: rgba(25, 211, 255, 0.38); */
    box-shadow: inset 0 0 0 1px rgba(25, 211, 255, 0.04);
    }

    .v-menu-item.active {
    font-weight: 600;
    position: relative;
    background: linear-gradient(180deg, #2e8cff 0%, #1f6fff 100%);
    border: 1px solid rgba(96, 175, 255, 0.45);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(70, 150, 255, 0.15) inset, 0 4px 18px rgba(0, 110, 255, 0.25);
    transition: all 0.2s ease;
    }

    /* Per-dashboard entries nested under "My Dashboard" in the Custom group. */
    .v-menu-subitem {
    padding-left: 24px;
    font-size: 11px;
    color: var(--text3);
    }

    .v-menu-subitem .v-menu-icon {
    width: 15px;
    height: 15px;
    opacity: 0.85;
    }

    .v-menu-sub-label-shared {
    padding-top: 6px;
    }

    body.menu-collapsed .v-menu-subitem {
    padding-left: 9px;
    }

    .v-menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
    text-align: center;
    color: inherit;
    transition: margin 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
    }

    .v-menu-item:hover .v-menu-icon,
    .v-menu-item.active .v-menu-icon {
    transform: translateX(1px);
    }

    body.menu-collapsed .v-menu-icon {
    margin-right: 0;
    }

    .v-menu-text {
    max-width: 146px;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.18s ease;
    }

    body.menu-collapsed .v-menu-text {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    }

    body.menu-collapsed .v-menu-item {
    justify-content: center;
    border-left-color: transparent;
    padding-left: 8px;
    padding-right: 8px;
    }

    body.menu-collapsed .v-menu-item.active {
    border-left-color: transparent;
    border-bottom: 2px solid var(--cyan);
    box-shadow: inset 0 -1px 0 rgba(25, 211, 255, 0.25);
    }

    /* Icon-rail hover label — positioned by wireMenuRailTips in app-shell.js. Lives on
       <body>, not inside .v-menu, because the rail's overflow would clip it. No
       transition: the point is that it appears the moment the pointer lands. */
    .v-menu-tip {
    display: none;
    position: fixed;
    z-index: 4200;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg2);
    border: 1px solid var(--border2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
    pointer-events: none;
    }

    @media (max-width: 900px) {
    #app {
    grid-template-columns: 72px minmax(0, 1fr);
    }

    .v-menu {
    width: 72px;
    }

    .v-menu-logo img {
    max-width: 38px;
    }

    .v-menu-label,
    .v-menu-sub-label,
    .v-menu-text {
    max-width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    }

    .v-menu-item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    }

    .v-menu-icon {
    margin-right: 0;
    }
    }

    /* BrokerCNC typography */
    h1,
    h2,
    h3,
    .header-logo h1,
    .login-logo h1,
    .section-title,
    .card-value,
    .hero-number {
    font-family: 'Manrope', var(--sans);
    }

    /* BrokerCNC global background */
    body {
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 211, 255, 0.08), transparent 38%),
        radial-gradient(circle at 85% 15%, rgba(30, 123, 255, 0.08), transparent 30%),
        var(--bg);
    }

/* ── field info bubbles (core-utils.js infoDot) ─────────────────────────────
   Icon glyph is drawn via ::after so it never enters the host's textContent
   (column-chooser idents key off header text). The tip itself is ONE shared
   body-level position:fixed panel — immune to overflow-x table wraps and
   sticky theads, unlike the in-cell .info-tip/.metric-info patterns. */
.info-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 5px;
    vertical-align: middle;
    border: 1px solid rgba(139, 148, 167, 0.55);
    border-radius: 50%;
    cursor: help;
    opacity: 0.6;
    flex: none;
}
.info-dot::after {
    content: 'i';
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 9px;
    line-height: 11px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text3, #8b94a7);
}
.info-dot:hover,
.info-dot:focus {
    opacity: 1;
    border-color: var(--cyan, #22d3ee);
}
.info-dot:hover::after,
.info-dot:focus::after {
    color: var(--cyan, #22d3ee);
}
th .info-dot { margin-left: 4px; }
.info-dot-tip {
    position: fixed;
    z-index: 100000;
    display: none;
    max-width: 320px;
    padding: 8px 11px;
    background: var(--bg2, #141a26);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text, #dbe2f0);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: left;
    pointer-events: none;
}