#lab-launcher {
  position: fixed;
  z-index: 10030;
  width: 250px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 10px 12px;
  animation: lab-pop 0.14s ease both;
}
.lab-lnch-grp {
  padding: 12px 8px 5px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lab-gold-dim);
}
.lab-lnch-grp:first-child { padding-top: 2px; }
.lab-lnch-items { display: flex; flex-direction: column; gap: 2px; }
.lab-lnch-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--lab-gold);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lab-lnch-item:hover {
  background: linear-gradient(180deg, rgba(244, 207, 139, 0.14), rgba(60, 40, 66, 0.4));
  border-color: var(--lab-edge);
  color: var(--lab-gold-bright);
}
.lab-lnch-ico { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.92; }

#lab-pg-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  background: rgba(8, 4, 11, 0.70);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: lab-fade 0.2s ease both;
}
#lab-pg {
  width: 92vw;
  height: 88vh;
  max-width: 1040px;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  animation: lab-pop 0.2s ease both;
}
#lab-pg.lab-pg-wide { max-width: 1300px; }
#lab-pg.lab-pg-narrow { max-width: 720px; }

.lab-pg-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lab-edge-soft);
  background: linear-gradient(180deg, rgba(244, 207, 139, 0.06), transparent);
}
.lab-pg-headico { width: 22px; height: 22px; color: var(--lab-gold); }
.lab-pg-title {
  flex: 1 1 auto;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--lab-gold-bright);
}
/* One close button for the whole lab. The panel close, the person sheet, and the city-dock modal
   were three near-identical copies that had drifted apart (different sizes, borders, and hovers);
   they are aliases of this now, so a new X is styled by naming it. */
.lab-x,
.lab-pg-close,
.ct-sheet-x,
.lc-m-x {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 0;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--lab-edge-soft);
  border-radius: 8px;
  color: var(--lab-gold);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.lab-x [data-lucide], .lab-x svg,
.lab-pg-close [data-lucide], .lab-pg-close svg,
.ct-sheet-x [data-lucide], .ct-sheet-x svg,
.lc-m-x [data-lucide], .lc-m-x svg { width: 15px; height: 15px; }
.lab-x:hover,
.lab-pg-close:hover,
.ct-sheet-x:hover,
.lc-m-x:hover { border-color: var(--lab-bad); color: var(--lab-bad); background: rgba(229, 115, 115, 0.12); }
.lab-x:focus-visible,
.lab-pg-close:focus-visible,
.ct-sheet-x:focus-visible,
.lc-m-x:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 2px; }

/* The panel close is the one that carries the whole window, so it stays the larger of the two. */
.lab-pg-close { width: 36px; height: 36px; border-radius: 9px; }
.lab-pg-close [data-lucide], .lab-pg-close svg { width: 19px; height: 19px; }

.lab-pg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #0d0710; }
.lab-pg-pad { padding: 22px 26px 30px; }

.lab-hub-sec { margin: 24px 0 13px; }
.lab-hub-sec:first-child { margin-top: 2px; }
.lab-hub-sec-t {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lab-gold);
}
.lab-hub-sec-s { margin-top: 3px; font-size: 0.8rem; color: var(--lab-gold-dim); }

.lab-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.lab-stat-card {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(40, 24, 47, 0.55), rgba(15, 8, 19, 0.6));
  border: 1px solid var(--lab-edge-soft);
  border-radius: 13px;
}
.lab-stat-card-ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--lab-gold-deep); }
.lab-stat-card-val { font-size: 1.18rem; font-weight: 700; color: var(--lab-gold-bright); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lab-stat-card-lbl { margin-top: 3px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lab-gold-dim); }
.lab-stat-card.is-good .lab-stat-card-ico { color: var(--lab-good); }
.lab-stat-card.is-warn .lab-stat-card-ico { color: var(--lab-warn); }
.lab-stat-card.is-bad .lab-stat-card-ico { color: var(--lab-bad); }

.lab-hc {
  background: linear-gradient(180deg, rgba(40, 24, 47, 0.5), rgba(15, 8, 19, 0.55));
  border: 1px solid var(--lab-edge-soft);
  border-radius: 14px;
  overflow: hidden;
}
.lab-hc-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--lab-edge-soft); }
.lab-hc-ico { width: 18px; height: 18px; color: var(--lab-gold-deep); }
.lab-hc-title { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.04em; color: var(--lab-gold-bright); }
.lab-hc-sub { margin-left: auto; font-size: 0.74rem; color: var(--lab-gold-dim); }
.lab-hc-body { padding: 16px; }

.lab-tabbar {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--lab-edge-soft);
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #160c1b, rgba(13, 7, 16, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--lab-edge) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lab-tabbar::-webkit-scrollbar { height: 6px; }
.lab-tabbar::-webkit-scrollbar-track { background: transparent; }
.lab-tabbar::-webkit-scrollbar-thumb { background: var(--lab-edge); border-radius: 999px; }
.lab-tabbar::-webkit-scrollbar-thumb:hover { background: var(--lab-gold-dim); }
.lab-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: var(--lab-gold-dim);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.lab-tab:hover { color: var(--lab-gold); }
.lab-tab.is-active {
  color: var(--lab-gold-bright);
  background: linear-gradient(180deg, rgba(244, 207, 139, 0.14), rgba(244, 207, 139, 0.03));
  border-color: var(--lab-edge-soft);
}
.lab-tab-ico { width: 16px; height: 16px; }
.lab-tab-sep { align-self: center; width: 1px; height: 18px; margin: 0 8px; background: var(--lab-edge-soft); flex: 0 0 auto; }
.lab-tab-count {
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--lab-gold-deep);
  color: #1a1014;
  font-size: 0.66rem;
  font-weight: 800;
}

.lab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: linear-gradient(180deg, rgba(64, 42, 70, 0.55), rgba(22, 13, 26, 0.7));
  border: 1px solid var(--lab-edge-soft);
  border-radius: 9px;
  color: var(--lab-gold);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.lab-btn:hover { border-color: var(--lab-gold); color: var(--lab-gold-bright); transform: translateY(-1px); }
.lab-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.lab-btn-ico { width: 15px; height: 15px; }
.lab-btn-primary {
  background: linear-gradient(180deg, rgba(244, 207, 139, 0.26), rgba(199, 154, 79, 0.32));
  border-color: var(--lab-edge);
  color: var(--lab-gold-bright);
}
.lab-btn-primary:hover { background: linear-gradient(180deg, rgba(244, 207, 139, 0.4), rgba(199, 154, 79, 0.42)); }
.lab-btn-danger { color: var(--lab-bad); border-color: rgba(229, 115, 115, 0.3); }
.lab-btn-danger:hover { border-color: var(--lab-bad); color: #ffb4b4; background: rgba(229, 115, 115, 0.12); }
.lab-btn-ghost { background: transparent; }

.lab-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--lab-edge-soft);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lab-gold);
}
.lab-badge-good { color: var(--lab-good); border-color: rgba(121, 211, 155, 0.4); background: rgba(121, 211, 155, 0.1); }
.lab-badge-warn { color: var(--lab-warn); border-color: rgba(236, 188, 91, 0.4); background: rgba(236, 188, 91, 0.1); }
.lab-badge-bad { color: var(--lab-bad); border-color: rgba(229, 115, 115, 0.4); background: rgba(229, 115, 115, 0.1); }
.lab-badge-info { color: #8fc7e6; border-color: rgba(143, 199, 230, 0.4); background: rgba(143, 199, 230, 0.1); }

/* ── The one dropdown ────────────────────────────────────────────────────────────────────────
   Matched structurally as well: any <select> inside a lab panel is a lab select, so a page that
   hand-rolls one with its own class (est-input, lab-sel) no longer falls through to the raw system
   control with a system arrow beside our gold one. */
.lab-select,
.lab-sel,
.lab-panel select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  padding: 7px 30px 7px 11px;
  background: #2a1830 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4cf8b' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--lab-edge-soft);
  border-radius: 9px;
  color: var(--lab-gold-bright);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  text-overflow: ellipsis;                        /* a long realm or seat name truncates, never overflows */
}
.lab-select:focus, .lab-sel:focus, .lab-panel select:focus { outline: none; border-color: var(--lab-gold); }
.lab-select:focus-visible, .lab-sel:focus-visible, .lab-panel select:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 1px; }
.lab-select:disabled, .lab-sel:disabled, .lab-panel select:disabled { opacity: 0.5; cursor: not-allowed; }

/* The open list is drawn by the browser, so it is only reachable through option colors plus
   color-scheme (set on the map page). Without both, a themed select still drops open a white list
   with a light scrollbar running down it. */
.lab-select option, .lab-sel option, .lab-panel select option,
.lab-select optgroup, .lab-sel optgroup, .lab-panel select optgroup {
  background: #1f1226;
  color: var(--lab-gold-bright);
  font-style: normal;
}
.lab-select option:disabled, .lab-sel option:disabled, .lab-panel select option:disabled { color: var(--lab-gold-dim); }

.lab-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 11px;
  background: #2a1830;
  border: 1px solid var(--lab-edge-soft);
  border-radius: 9px;
  color: var(--lab-gold-bright);
  font-family: inherit;
  font-size: 0.84rem;
}
.lab-input::placeholder { color: var(--lab-gold-dim); opacity: 0.75; }
.lab-input:focus { outline: none; border-color: var(--lab-gold); }
.lab-input[type="number"] { -moz-appearance: textfield; }
.lab-input[type="number"]::-webkit-outer-spin-button,
.lab-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lab-hub-empty { padding: 40px 20px; text-align: center; color: var(--lab-gold-dim); font-size: 0.9rem; }

.lab-loader { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 50px 20px; color: var(--lab-gold-dim); font-size: 0.88rem; }
.lab-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--lab-edge-soft);
  border-top-color: var(--lab-gold);
  border-radius: 50%;
  animation: lab-spin 0.8s linear infinite;
}
@keyframes lab-spin { to { transform: rotate(360deg); } }

.lab-toast {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  padding: 11px 18px;
  background: linear-gradient(180deg, #2a1830, #160b1b);
  border: 1px solid var(--lab-edge);
  border-radius: 10px;
  color: var(--lab-gold-bright);
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease;
  z-index: 10050;
}
.lab-toast.show { opacity: 1; transform: translate(-50%, 0); }
.lab-toast-good { border-color: rgba(121, 211, 155, 0.5); color: #b9efce; }
.lab-toast-bad { border-color: rgba(229, 115, 115, 0.5); color: #ffb4b4; }

.lab-pg-legacy { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lab-pg-legacy-note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(244, 207, 139, 0.10), rgba(40, 24, 47, 0.4));
  border-bottom: 1px solid var(--lab-edge-soft);
  color: var(--lab-gold);
  font-size: 0.78rem;
}
.lab-pg-legacy-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lab-gold-deep); }
.lab-pg-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #0d0710; min-height: 0; }

/* ── The one scrollbar ───────────────────────────────────────────────────────────────────────
   Matched STRUCTURALLY, not by naming each scrolling surface. The previous approach listed the
   scrollers it knew about by id, so every panel added since shipped with the default browser bar
   until someone remembered to extend the list. Anything inside a lab panel, the launcher, or the
   city dock now inherits the gold bar for free, including surfaces that do not exist yet.
   Every map HUD popover is itself a .lab-panel, so they are covered by the same rule. */
#lab-launcher,
.lab-panel,
.lc-body,
.lab-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--lab-gold-deep) rgba(0, 0, 0, 0.22);    /* inherited, so descendants get it */
}
/* scrollbar-color inherits; scrollbar-width does NOT. Without this a scroller nested inside a card
   picks up the gold thumb but keeps the browser's full-width bar, which is worse than either. */
#lab-launcher *,
.lab-panel *,
.lc-body * { scrollbar-width: thin; }
#lab-launcher::-webkit-scrollbar,
.lab-panel::-webkit-scrollbar,
.lab-panel ::-webkit-scrollbar,
.lc-body::-webkit-scrollbar,
.lc-body ::-webkit-scrollbar,
.lab-scroll::-webkit-scrollbar { width: 9px; height: 9px; }

#lab-launcher::-webkit-scrollbar-track,
.lab-panel::-webkit-scrollbar-track,
.lab-panel ::-webkit-scrollbar-track,
.lc-body::-webkit-scrollbar-track,
.lc-body ::-webkit-scrollbar-track,
.lab-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.22); border-radius: 8px; }

#lab-launcher::-webkit-scrollbar-thumb,
.lab-panel::-webkit-scrollbar-thumb,
.lab-panel ::-webkit-scrollbar-thumb,
.lc-body::-webkit-scrollbar-thumb,
.lc-body ::-webkit-scrollbar-thumb,
.lab-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--lab-gold), var(--lab-gold-deep));
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
}
#lab-launcher::-webkit-scrollbar-thumb:hover,
.lab-panel::-webkit-scrollbar-thumb:hover,
.lab-panel ::-webkit-scrollbar-thumb:hover,
.lc-body::-webkit-scrollbar-thumb:hover,
.lc-body ::-webkit-scrollbar-thumb:hover,
.lab-scroll::-webkit-scrollbar-thumb:hover { background: var(--lab-gold-bright); }

/* Where a surface scrolls on both axes the browser draws a corner square; left alone it renders
   white, which is the one bit of default chrome that survives a themed track and thumb. */
#lab-launcher::-webkit-scrollbar-corner,
.lab-panel::-webkit-scrollbar-corner,
.lab-panel ::-webkit-scrollbar-corner,
.lc-body::-webkit-scrollbar-corner,
.lc-body ::-webkit-scrollbar-corner,
.lab-scroll::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.22); }

/* The tab strip is the deliberate exception: a horizontal rail wants a hairline, not the full gold
   bar. It sits after the canonical rule and outranks it, so the strip keeps its own treatment. */
.lab-panel .lab-tabbar::-webkit-scrollbar { height: 6px; width: 6px; }
.lab-panel .lab-tabbar::-webkit-scrollbar-track { background: transparent; }
.lab-panel .lab-tabbar::-webkit-scrollbar-thumb { background: var(--lab-edge); border: 0; border-radius: 999px; }
.lab-panel .lab-tabbar::-webkit-scrollbar-thumb:hover { background: var(--lab-gold-dim); }
.lab-panel .lab-tabbar { scrollbar-color: var(--lab-edge) transparent; }

@media (max-width: 820px) {
  #lab-pg { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .lab-pg-pad { padding: 16px 14px 26px; }
  .lab-tab { padding: 9px 12px; font-size: 0.8rem; }
  #lab-launcher { width: min(88vw, 340px); }
  .lab-pg-close { width: 44px; height: 44px; }
  .lab-tabbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .lab-stat-grid { grid-template-columns: 1fr; }
}