/* ============================================================
 * Themed panel primitives — Pass B.
 *
 * Replaces hardcoded Tailwind colors (bg-gray-900, text-gray-300,
 * border-gray-700, etc) on legacy panels. Each helper reads from
 * theme tokens so a theme switch reskins everything.
 *
 * Naming: k- prefix to avoid collisions with Tailwind.
 * ============================================================ */

/* ── Surfaces ──────────────────────────────────────────────── */

.k-panel {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  font-family: var(--font);
}
.k-panel-deep { background: var(--panel-deep); }
.k-panel-hi { background: var(--panel-hi); }

.k-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.k-panel-title {
  font-family: var(--font-header);
  font-weight: var(--header-weight, 600);
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-dim);
}
.k-panel-body { padding: 8px 12px; }

.k-panel-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ── Text ──────────────────────────────────────────────────── */
.k-text { color: var(--text); }
.k-text-dim { color: var(--text-dim); }
.k-text-faint { color: var(--text-faint); }
.k-text-accent { color: var(--accent); }
.k-text-warn { color: var(--warn); }
.k-text-good { color: var(--good); }
.k-text-bad { color: var(--bad); }
.k-mono { font-family: var(--font-mono); }
.k-header {
  font-family: var(--font-header);
  font-weight: var(--header-weight, 600);
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
}

/* ── Buttons ───────────────────────────────────────────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s, background 0.12s;
}
.k-btn:hover {
  filter: brightness(1.15);
  border-color: var(--border-strong);
}
.k-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.k-btn-primary {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.k-btn-warn {
  background: var(--warn-dim);
  border-color: var(--warn);
  color: var(--warn);
}
.k-btn-good {
  background: rgba(82, 200, 140, 0.10);
  border-color: var(--good);
  color: var(--good);
}
.k-btn-bad {
  background: rgba(255, 80, 90, 0.10);
  border-color: var(--bad);
  color: var(--bad);
}
.k-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}
.k-btn-ghost:hover { color: var(--text); border-color: var(--border); }
.k-btn-sm { padding: 4px 8px; font-size: 10px; }
.k-btn-xs { padding: 2px 6px; font-size: 9px; }

/* ── Inputs ────────────────────────────────────────────────── */
.k-input,
.k-select,
.k-textarea {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 12px;
  outline: none;
}
.k-input:focus,
.k-select:focus,
.k-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.k-input::placeholder { color: var(--text-faint); }

/* ── Dividers / chips / dots ───────────────────────────────── */
.k-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--text-dim);
}
.k-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.k-dot-good { background: var(--good); }
.k-dot-warn { background: var(--warn); }
.k-dot-bad  { background: var(--bad); }
.k-dot-dim  { background: var(--text-faint); }

/* ── Bars (HP/shield/AP-style) ─────────────────────────────── */
.k-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--panel-deep);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.k-bar-fill { height: 100%; background: var(--accent); }
.k-bar-fill.warn { background: var(--warn); }
.k-bar-fill.bad  { background: var(--bad); }
.k-bar-fill.good { background: var(--good); }

/* ============================================================
 * Chat Panel — two columns: chat (left) + roster (right).
 * ============================================================ */
.k-chat-panel {
  position: fixed;
  bottom: 268px;            /* clear of #shell-bottom (248h + 12 gap + 8) */
  left: 304px;              /* right of #shell-outliner (280w + 12 gap) */
  width: 460px;
  max-width: calc(100vw - 620px); /* keep clear of #shell-minimap */
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font);
  z-index: 35;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.k-chat-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.k-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.k-chat-title {
  font-family: var(--font-header);
  font-weight: var(--header-weight, 600);
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-dim);
}
.k-chat-title #k-chat-online {
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0.4px;
}
.k-chat-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.k-chat-close:hover { color: var(--text); }

.k-chat-cols {
  display: grid;
  grid-template-columns: 1fr 140px;
  min-height: 0;
}
.k-chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.k-chat-body {
  flex: 1;
  height: 200px;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-chat-empty {
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  padding-top: 30px;
}
.k-chat-row { color: var(--text); }
.k-chat-row--system { color: var(--text-dim); font-size: 10px; font-style: italic; }
.k-chat-row--error { color: var(--bad); }
.k-chat-name { color: var(--text-dim); font-weight: 600; }
.k-chat-name--you { color: var(--accent); }
.k-chat-form {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}
.k-chat-form .k-input { flex: 1; min-width: 0; }

/* Roster column */
.k-chat-roster {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-deep);
}
.k-chat-roster-head {
  font-family: var(--font-header);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.k-chat-roster-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-chat-roster-empty {
  color: var(--text-faint);
  font-style: italic;
  font-size: 11px;
  padding: 8px 6px;
}
.k-chat-roster-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text);
}
.k-chat-roster-row.is-you {
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}
.k-chat-roster-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ============================================================
 * Top-strip status block
 * ============================================================ */
.k-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font);
}
.k-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: default;
}
button.k-status-cell { cursor: pointer; }
button.k-status-cell:hover { border-color: var(--border-strong); }
.k-status-icon { color: var(--text-dim); font-size: 11px; }
.k-status-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; }
.k-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-faint);
}
.k-status-dot[data-state="connected"] { background: var(--good); box-shadow: 0 0 6px var(--good); }
.k-status-dot[data-state="connecting"] { background: var(--warn); animation: k-pulse 1.4s ease-in-out infinite; }
.k-status-dot[data-state="disconnected"],
.k-status-dot[data-state="error"] { background: var(--bad); }

@keyframes k-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.k-status-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  /* Anchor for the notification badge inside the bell button. */
  position: relative;
}
/* Override the badge's stock Tailwind classes so it pins to the
 * top-right corner of the bell button regardless of other class
 * conflicts. */
#kethran-top-right #notification-bell #notification-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background-color: var(--bad) !important;
  color: var(--panel-deep) !important;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  pointer-events: none;
}
#kethran-top-right #notification-bell #notification-badge.hidden {
  display: none !important;
}
.k-status-icon-btn:hover {
  color: var(--accent);
  border-color: var(--border-strong);
}
.k-status-icon-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ============================================================
 * Minimap zone-fit overrides
 * (MinimapPanel still constructs its own DOM but sits inside
 * #shell-minimap; cancel its hardcoded fixed positioning so it
 * fills the zone.)
 * ============================================================ */
#shell-minimap > #minimap-panel {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
#shell-minimap > #minimap-panel #minimap-header {
  border-bottom: 1px solid var(--border);
}
#shell-minimap > #minimap-panel #minimap-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shell-minimap > #minimap-panel canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
 * Energy detail panel — clicking the top-strip energy block
 * pops this open. Floating modal with region cards + structures.
 * ============================================================ */
.k-energy-panel {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font);
  z-index: 70;
  overflow: hidden;
}
.k-ep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.k-ep-head-l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.k-ep-head-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.k-ep-back {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1;
}
.k-ep-back:hover { color: var(--accent); border-color: var(--border-strong); }
.k-ep-title {
  font-family: var(--font-header);
  font-size: 12px;
  font-weight: var(--header-weight, 600);
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
  color: var(--accent);
}
.k-ep-empire-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: var(--text-dim);
}
.k-ep-empire-stat .k-mono {
  font-size: 12px;
  color: var(--accent);
}
.k-ep-empire-spark {
  width: 160px;
  height: 32px;
}
.k-ep-empire-spark .k-ep-spark-svg { height: 32px; }
.k-ep-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.k-ep-close:hover { color: var(--text); }
.k-ep-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.k-ep-empty {
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  padding: 24px 0;
}

/* Region cards grid */
.k-ep-regions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.k-ep-region {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.12s, filter 0.12s;
}
.k-ep-region:hover {
  border-color: var(--accent);
  filter: brightness(1.08);
}
.k-ep-region:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Detail / focused-region view */
.k-ep-region-detail {
  background: var(--panel-hi);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-ep-region-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.k-ep-region-detail-id {
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
}
.k-ep-region-detail-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.k-ep-region-detail-bar .k-bar { flex: 1; height: 8px; }
.k-ep-region-detail-bar .k-mono { font-size: 11px; color: var(--text); }
.k-ep-region-detail-spark .k-ep-spark-svg { height: 80px; }
.k-ep-region-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
  font-size: 11px;
}
.k-ep-region-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Collapsed-tile strip when a region is focused */
.k-ep-region-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.k-ep-region-tile {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 6px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  min-width: 140px;
  transition: border-color 0.12s, filter 0.12s;
}
.k-ep-region-tile:hover {
  border-color: var(--accent);
  filter: brightness(1.08);
}
.k-ep-region-tile-id {
  font-family: var(--font-header);
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text);
}
.k-ep-region-tile .k-bar { height: 4px; }
.k-ep-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.k-ep-region-id {
  font-family: var(--font-header);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
}
.k-ep-region-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.k-ep-region-bar .k-bar { flex: 1; }
.k-ep-region-bar-text {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}
.k-ep-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
  font-size: 10px;
  color: var(--text);
}
.k-ep-region-grid > div {
  line-height: 1.3;
}
.k-ep-spark {
  margin-top: 2px;
}
.k-ep-spark-svg {
  display: block;
  width: 100%;
  height: 28px;
}
.k-ep-spark-mid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.k-ep-spark-good { stroke: var(--good); stroke-width: 1.5; }
.k-ep-spark-bad  { stroke: var(--bad);  stroke-width: 1.5; }

/* Structures list */
.k-ep-structures {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.k-ep-structures-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.k-ep-section-title {
  font-family: var(--font-header);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.k-ep-structures-cols,
.k-ep-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 70px 80px minmax(0, 1.4fr) 70px;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
}
.k-ep-structures-cols {
  font-family: var(--font-header);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.k-ep-structures-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-ep-row {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s;
}
.k-ep-row:hover {
  filter: brightness(1.1);
  border-color: var(--border-strong);
}
.k-ep-row-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-ep-row-meta {
  font-size: 10px;
  color: var(--text-faint);
}
.k-ep-row-drain {
  font-size: 11px;
  color: var(--text);
  text-align: right;
}
.k-ep-row-tier {
  font-size: 10px;
  color: var(--text-dim);
}
.k-ep-row-state {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.k-ep-row-action {
  display: flex;
  justify-content: flex-end;
}

/* Top-strip energy block as button */
.k-top-id {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: -4px;
}
.k-top-id:hover { background: var(--panel-hi); }

/* ============================================================
 * Themed notification toasts. The toast type drives the accent
 * border via the k-toast--{tone} modifier; chrome reads tokens.
 * ============================================================ */
.k-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 340px;
  min-width: 240px;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  font-family: var(--font);
  cursor: pointer;
}
.k-toast--bad    { border-left-color: var(--bad); }
.k-toast--good   { border-left-color: var(--good); }
.k-toast--warn   { border-left-color: var(--warn); }
.k-toast--accent { border-left-color: var(--accent); }
.k-toast--info   { border-left-color: var(--text-dim); }
.k-toast:hover { filter: brightness(1.1); }
.k-toast-icon {
  font-size: 16px;
  line-height: 1.25;
  flex-shrink: 0;
}
.k-toast-body {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  min-width: 0;
}

/* ============================================================
 * Top-right cluster — sibling of the TopStrip's left cluster.
 * Holds alerts (NotificationManager bell), StatusBar, theme cog.
 * Themed panel with the same chrome as the strip.
 * ============================================================ */
#kethran-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  font-family: var(--font);
  color: var(--text);
}
#kethran-top-right .k-top-alerts {
  flex-shrink: 0;
}

/* ============================================================
 * Notification dropdown — re-parented to body when bell is in the
 * top-strip alerts area. Anchored to viewport top-right.
 * ============================================================ */
.k-notif-panel {
  position: fixed;
  top: 88px; /* clear of #shell-top (12 + 64 + 12) */
  right: 12px;
  width: 320px;
  max-height: calc(100vh - 110px);
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow) !important;
  z-index: 60;
}
.k-notif-panel #notification-list {
  max-height: calc(100vh - 170px) !important;
}

/* ============================================================
 * Panel host containers — for body-mounted floating panels.
 * Cancels their hardcoded Tailwind colors when the .k-themed class
 * is added (Pass B). Goal: switching themes recolors panels even
 * though they still construct with Tailwind class strings.
 * ============================================================ */

.k-themed {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow) !important;
}

/* Headings / panel titles */
.k-themed h1, .k-themed h2, .k-themed h3, .k-themed h4, .k-themed h5,
.k-themed .panel-title {
  color: var(--text);
  font-family: var(--font-header);
}

/* Override Tailwind grayscale text classes to dim/text/faint based on
 * which shade was used. This lets panels recolor without rewriting
 * every className. */
.k-themed [class~="text-white"],
.k-themed [class~="text-gray-100"],
.k-themed [class~="text-gray-200"],
.k-themed [class~="text-zinc-100"],
.k-themed [class~="text-stone-100"],
.k-themed [class~="text-slate-100"],
.k-themed [class~="text-gray-50"] { color: var(--text) !important; }

.k-themed [class~="text-gray-300"],
.k-themed [class~="text-gray-400"],
.k-themed [class~="text-zinc-300"],
.k-themed [class~="text-zinc-400"],
.k-themed [class~="text-stone-300"],
.k-themed [class~="text-stone-400"],
.k-themed [class~="text-slate-300"],
.k-themed [class~="text-slate-400"] { color: var(--text-dim) !important; }

.k-themed [class~="text-gray-500"],
.k-themed [class~="text-gray-600"],
.k-themed [class~="text-zinc-500"],
.k-themed [class~="text-stone-500"],
.k-themed [class~="text-slate-500"] { color: var(--text-faint) !important; }

/* Accent / role colors map to tokens */
.k-themed [class~="text-blue-300"],
.k-themed [class~="text-blue-400"],
.k-themed [class~="text-cyan-300"],
.k-themed [class~="text-cyan-400"],
.k-themed [class~="text-sky-300"],
.k-themed [class~="text-sky-400"],
.k-themed [class~="text-primary-300"],
.k-themed [class~="text-primary-400"] { color: var(--accent) !important; }

.k-themed [class~="text-green-300"],
.k-themed [class~="text-green-400"],
.k-themed [class~="text-emerald-300"],
.k-themed [class~="text-emerald-400"],
.k-themed [class~="text-lime-300"],
.k-themed [class~="text-lime-400"] { color: var(--good) !important; }

.k-themed [class~="text-red-300"],
.k-themed [class~="text-red-400"],
.k-themed [class~="text-red-500"],
.k-themed [class~="text-rose-400"] { color: var(--bad) !important; }

.k-themed [class~="text-amber-300"],
.k-themed [class~="text-amber-400"],
.k-themed [class~="text-yellow-300"],
.k-themed [class~="text-yellow-400"],
.k-themed [class~="text-orange-300"],
.k-themed [class~="text-orange-400"] { color: var(--warn) !important; }

.k-themed [class~="text-purple-300"],
.k-themed [class~="text-purple-400"],
.k-themed [class~="text-fuchsia-400"],
.k-themed [class~="text-violet-400"] { color: var(--purple) !important; }

/* Background overrides — kill hardcoded grays so the panel
 * background shows through. Tinted backgrounds (red-900, etc) keep
 * their semantic meaning by mapping to dim variants. */
.k-themed [class~="bg-gray-700"],
.k-themed [class~="bg-gray-800"],
.k-themed [class~="bg-gray-900"],
.k-themed [class~="bg-zinc-700"],
.k-themed [class~="bg-zinc-800"],
.k-themed [class~="bg-zinc-900"],
.k-themed [class~="bg-stone-700"],
.k-themed [class~="bg-stone-800"],
.k-themed [class~="bg-stone-900"],
.k-themed [class~="bg-slate-700"],
.k-themed [class~="bg-slate-800"],
.k-themed [class~="bg-slate-900"] { background-color: var(--panel-hi) !important; }

.k-themed [class~="bg-black"] { background-color: var(--panel-deep) !important; }

.k-themed [class~="bg-red-800"],
.k-themed [class~="bg-red-900"] { background-color: rgba(255, 80, 90, 0.18) !important; }
.k-themed [class~="bg-green-800"],
.k-themed [class~="bg-green-900"],
.k-themed [class~="bg-emerald-800"],
.k-themed [class~="bg-emerald-900"] { background-color: rgba(82, 200, 140, 0.18) !important; }
.k-themed [class~="bg-blue-800"],
.k-themed [class~="bg-blue-900"] { background-color: var(--accent-dim) !important; }
.k-themed [class~="bg-amber-800"],
.k-themed [class~="bg-amber-900"],
.k-themed [class~="bg-yellow-800"],
.k-themed [class~="bg-yellow-900"] { background-color: var(--warn-dim) !important; }

/* Borders — gray family maps to --border, accent family to --accent. */
.k-themed [class*="border-gray-"],
.k-themed [class*="border-zinc-"],
.k-themed [class*="border-stone-"],
.k-themed [class*="border-slate-"] { border-color: var(--border) !important; }

.k-themed [class*="border-blue-"],
.k-themed [class*="border-cyan-"],
.k-themed [class*="border-sky-"],
.k-themed [class*="border-primary-"] { border-color: var(--accent) !important; }

.k-themed [class*="border-red-"] { border-color: var(--bad) !important; }
.k-themed [class*="border-green-"],
.k-themed [class*="border-emerald-"] { border-color: var(--good) !important; }
.k-themed [class*="border-amber-"],
.k-themed [class*="border-yellow-"],
.k-themed [class*="border-orange-"] { border-color: var(--warn) !important; }
.k-themed [class*="border-purple-"] { border-color: var(--purple) !important; }

/* Inputs */
.k-themed input:not(.k-input),
.k-themed select:not(.k-select),
.k-themed textarea:not(.k-textarea) {
  background: var(--panel-hi) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
.k-themed input:focus,
.k-themed select:focus,
.k-themed textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-dim) !important;
}
.k-themed input::placeholder,
.k-themed textarea::placeholder { color: var(--text-faint) !important; }

/* Buttons (not already k-btn / k-status) — reskin the common
 * Tailwind primary/secondary patterns. */
.k-themed button:not(.k-btn):not(.k-status-icon-btn):not(.k-status-cell):not(.k-chat-close) {
  background: var(--panel-hi) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
.k-themed button:hover:not(:disabled):not(.k-btn):not(.k-status-icon-btn) {
  filter: brightness(1.15);
  border-color: var(--border-strong) !important;
}

/* btn-primary / btn-secondary that other pages define */
.k-themed .btn-primary {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.k-themed .btn-secondary {
  background: var(--panel-hi) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Themed scrollbars. Applies inside the SelectionBand body, the
 * ChatPanel, the theme picker, the cargo tab, and any element
 * tagged .k-themed-scroll. Both Webkit and Firefox (`scrollbar-*`)
 * styles. Browsers that don't support either fall back gracefully. */
body[data-theme] #kethran-selection .k-detail-body,
body[data-theme] #kethran-selection .k-detail-body *,
body[data-theme] .k-themed-scroll,
body[data-theme] .k-chat-body,
body[data-theme] .k-chat-roster-list,
body[data-theme] .k-tp-list,
body[data-theme] .k-theme-picker,
body[data-theme] .k-notif-panel,
body[data-theme] #cargo-panel-items,
body[data-theme] .cargo-grid,
body[data-theme] .k-themed,
body[data-theme] .k-themed * {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
body[data-theme] #kethran-selection .k-detail-body::-webkit-scrollbar,
body[data-theme] #kethran-selection .k-detail-body *::-webkit-scrollbar,
body[data-theme] .k-themed-scroll::-webkit-scrollbar,
body[data-theme] .k-chat-body::-webkit-scrollbar,
body[data-theme] .k-chat-roster-list::-webkit-scrollbar,
body[data-theme] .k-tp-list::-webkit-scrollbar,
body[data-theme] .k-theme-picker::-webkit-scrollbar,
body[data-theme] .k-notif-panel::-webkit-scrollbar,
body[data-theme] #cargo-panel-items::-webkit-scrollbar,
body[data-theme] .cargo-grid::-webkit-scrollbar,
body[data-theme] .k-themed::-webkit-scrollbar,
body[data-theme] .k-themed *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body[data-theme] #kethran-selection .k-detail-body::-webkit-scrollbar-track,
body[data-theme] #kethran-selection .k-detail-body *::-webkit-scrollbar-track,
body[data-theme] .k-themed-scroll::-webkit-scrollbar-track,
body[data-theme] .k-chat-body::-webkit-scrollbar-track,
body[data-theme] .k-chat-roster-list::-webkit-scrollbar-track,
body[data-theme] .k-tp-list::-webkit-scrollbar-track,
body[data-theme] .k-theme-picker::-webkit-scrollbar-track,
body[data-theme] .k-notif-panel::-webkit-scrollbar-track,
body[data-theme] #cargo-panel-items::-webkit-scrollbar-track,
body[data-theme] .cargo-grid::-webkit-scrollbar-track,
body[data-theme] .k-themed::-webkit-scrollbar-track,
body[data-theme] .k-themed *::-webkit-scrollbar-track {
  background: var(--panel-deep);
  border-radius: 99px;
}
body[data-theme] #kethran-selection .k-detail-body::-webkit-scrollbar-thumb,
body[data-theme] #kethran-selection .k-detail-body *::-webkit-scrollbar-thumb,
body[data-theme] .k-themed-scroll::-webkit-scrollbar-thumb,
body[data-theme] .k-chat-body::-webkit-scrollbar-thumb,
body[data-theme] .k-chat-roster-list::-webkit-scrollbar-thumb,
body[data-theme] .k-tp-list::-webkit-scrollbar-thumb,
body[data-theme] .k-theme-picker::-webkit-scrollbar-thumb,
body[data-theme] .k-notif-panel::-webkit-scrollbar-thumb,
body[data-theme] #cargo-panel-items::-webkit-scrollbar-thumb,
body[data-theme] .cargo-grid::-webkit-scrollbar-thumb,
body[data-theme] .k-themed::-webkit-scrollbar-thumb,
body[data-theme] .k-themed *::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: 99px;
}
body[data-theme] #kethran-selection .k-detail-body::-webkit-scrollbar-thumb:hover,
body[data-theme] #kethran-selection .k-detail-body *::-webkit-scrollbar-thumb:hover,
body[data-theme] .k-themed-scroll::-webkit-scrollbar-thumb:hover,
body[data-theme] .k-themed::-webkit-scrollbar-thumb:hover,
body[data-theme] .k-themed *::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
body[data-theme] #kethran-selection .k-detail-body::-webkit-scrollbar-corner,
body[data-theme] .k-themed-scroll::-webkit-scrollbar-corner,
body[data-theme] .k-themed::-webkit-scrollbar-corner,
body[data-theme] .k-themed *::-webkit-scrollbar-corner {
  background: var(--panel-deep);
}

/* ── Pass C: hide the legacy host wrappers (EntityPanel +
 * UnitControlsPanel) entirely. Their child sub-section DOM is
 * relocated into SelectionBand tabs by the band itself; the host
 * wrapper has nothing useful to show. Legacy mode (?legacy-ui=1)
 * doesn't add this class so the old popup behavior survives. */
.k-legacy-host-hidden {
  display: none !important;
}

/* ── Control groups bar — floats just above #shell-bottom; only
 * bound slots render. Hidden entirely when the player has no
 * groups. Centered horizontally over the band. ──────────────── */
body:not([data-legacy-ui="true"]) #control-groups-bar {
  bottom: 268px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.k-cg-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 64px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  font-family: var(--font);
  text-align: center;
  transition: filter 0.12s, border-color 0.12s;
}
/* Tailwind .hidden is a single-class rule; our .k-cg-slot rule
 * (also single-class) loaded later, so .hidden lost to inline-flex.
 * Higher-specificity collapse wins. */
.k-cg-slot.hidden {
  display: none !important;
}
.k-cg-slot:hover {
  filter: brightness(1.15);
  border-color: var(--accent);
}
.k-cg-slot-key {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--accent);
  line-height: 1;
}
.k-cg-slot-label {
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stash for legacy sub-section DOM that's not currently mounted
 * into a SelectionBand tab. Must stay rendered (display: none on
 * the parent) so attached event listeners persist. */
#legacy-section-stash { display: none; }

/* ── SelectionBand body — make it the theme scope for relocated
 * sub-sections. The body shows tab content; descendants pick up
 * .k-themed token overrides. ───────────────────────────────── */
#kethran-selection .k-detail-body {
  --k-themed-scope: 1;
}
#kethran-selection .k-detail-body,
#kethran-selection .k-detail-body * {
  font-family: var(--font);
}

/* The .k-themed scope overrides we already wrote target descendants
 * of any .k-themed root. Tag the body so legacy sections theme
 * automatically when rehosted. */
#kethran-selection .k-detail-body { /* selector duplicated in JS via class */ }

/* ── Re-rule legacy sub-section structure for horizontal living.
 * The sections were designed for a vertical right-side popup; in
 * the SelectionBand they live in a ~240h × wide area. Override
 * their wrapper so they no longer carry the top-border-divider
 * styling and let their internals lay out wide. ──────────────── */
#kethran-selection .k-detail-body > [id$="-section"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  width: 100%;
  max-height: 100%;
  overflow: auto;
}

/* CargoPanel — inline cargo display inside the SelectionBand cargo
 * tab. Multi-column grid that reflows based on available width. */
#cargo-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
  font-family: var(--font);
}
#cargo-panel.hidden { display: none !important; }
.cargo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 6px;
}
.cargo-head-title {
  font-family: var(--font-header);
  font-size: 11px;
  font-weight: var(--header-weight, 600);
  letter-spacing: var(--header-letter, 0.6px);
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cargo-head-volume {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}
.cargo-bar {
  height: 4px;
  background: var(--panel-deep);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.cargo-bar-fill {
  height: 100%;
  background: var(--warn);
  transition: width 0.18s ease;
}
.cargo-empty {
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  font-size: 11px;
  padding: 12px 0;
}
.cargo-empty.hidden { display: none; }
.cargo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-content: start;
  padding: 4px 2px;
}
.cargo-card {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cargo-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cargo-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cargo-card-qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.cargo-card-actions {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
}
.cargo-card-actions .cargo-qty {
  padding: 4px 6px;
  font-size: 11px;
  height: 26px;
  min-width: 0;
}
.cargo-card-actions .cargo-transfer-target {
  padding: 4px 6px;
  font-size: 11px;
  height: 26px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.cargo-card-actions .k-btn-xs {
  height: 26px;
  padding: 0 10px;
  font-size: 10px;
}
/* Without a transfer target the action row is a single line:
 *   [ qty | drop (stretches) | trash ]
 * Plain auto-flow placement — no template-areas needed. */
.cargo-card-actions:not(:has(.cargo-transfer-target)) {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
.cargo-card-actions:not(:has(.cargo-transfer-target)) .cargo-drop-btn {
  justify-self: stretch;
}
.cargo-card-actions:not(:has(.cargo-transfer-target)) .cargo-discard-btn {
  justify-self: end;
  min-width: 32px;
}
/* With a transfer target the action row wraps to two visual rows:
 *   [ qty | target select       | send ]
 *   [           drop | trash           ]
 * The grid-template-areas keep alignment stable even as content
 * updates so nothing jumps while a dropdown is open. */
.cargo-card-actions:has(.cargo-transfer-target) {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas:
    "qty target send"
    "drop drop trash";
  row-gap: 6px;
}
.cargo-card-actions:has(.cargo-transfer-target) .cargo-qty            { grid-area: qty; }
.cargo-card-actions:has(.cargo-transfer-target) .cargo-transfer-target { grid-area: target; }
.cargo-card-actions:has(.cargo-transfer-target) .cargo-transfer-btn   { grid-area: send; }
.cargo-card-actions:has(.cargo-transfer-target) .cargo-drop-btn       { grid-area: drop; justify-self: stretch; }
.cargo-card-actions:has(.cargo-transfer-target) .cargo-discard-btn    { grid-area: trash; justify-self: end; min-width: 32px; }

/* ── Recipe tile grid — used by the Production tab's available
 * recipes and the Research tab's available research. Mirrors the
 * constructor build menu so the surfaces feel consistent. */
.k-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  align-content: start;
}
.k-recipe-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  transition: filter 0.12s, border-color 0.12s;
}
.k-recipe-tile:hover {
  filter: brightness(1.1);
  border-color: var(--accent);
}
.k-recipe-tile.unaffordable { opacity: 0.55; }
.k-recipe-tile.unaffordable:hover { border-color: var(--bad); }
.k-recipe-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.k-recipe-tile-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.k-recipe-tile-name.tone-good   { color: var(--good); }
.k-recipe-tile-name.tone-warn   { color: var(--warn); }
.k-recipe-tile-name.tone-bad    { color: var(--bad); }
.k-recipe-tile-name.tone-accent { color: var(--accent); }
.k-recipe-tile-name.tone-purple { color: var(--purple); }
.k-recipe-tile-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.k-recipe-tile-cost {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-recipe-tile-cost.afford-bad { color: var(--bad); }
.k-recipe-tile-out {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-recipe-tile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 1px;
}

/* ── Logistics section multi-column when inside the SelectionBand.
 * The legacy panel was a single tall column (transports → orders →
 * form); inside the band that wastes the horizontal space. Lay it
 * out as a 3-column grid so transports + assigned ships + orders /
 * order-form can sit side-by-side. Selectors are scoped to inside
 * the band so the legacy ?legacy-ui=1 popup keeps its original
 * stacked layout. */
#kethran-selection .k-detail-body > #logistics-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: start;
}
#kethran-selection .k-detail-body > #logistics-section > .text-gray-400 {
  grid-column: 1 / -1;
}
#kethran-selection .k-detail-body > #logistics-section > #logistics-no-orders,
#kethran-selection .k-detail-body > #logistics-section > #logistics-order-form {
  grid-column: 3 / 4;
}

/* UnitControlsPanel: cancel its absolute floating styles so it
 * lays out as inline tab content. */
#kethran-selection .k-detail-body > #unit-controls-panel {
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}
#kethran-selection .k-detail-body > #unit-controls-panel > #uc-buttons {
  /* Buttons stack better in two columns within the wide tab body. */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px !important;
}

/* Section internals — let scrolling sub-lists fit inside the band. */
#kethran-selection .k-detail-body [class*="max-h-40"],
#kethran-selection .k-detail-body [class*="max-h-48"],
#kethran-selection .k-detail-body [class*="max-h-60"] {
  max-height: 180px !important;
}

/* ── DebugPanel — sits in the right rail above the minimap so it
 * doesn't sit on top of the empire mark / energy / region pills.
 * Theme its inner card with token colors. ──────────────────── */
body:not([data-legacy-ui="true"]) #debug-panel {
  top: auto !important;
  bottom: 272px !important;
  right: 12px !important;
  left: auto !important;
  max-width: 300px;
}
body:not([data-legacy-ui="true"]) #debug-panel > div {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

/* ── SectorResourcePanel — top of right rail, below top strip. ── */
body:not([data-legacy-ui="true"]) #sector-resource-panel {
  top: 88px !important;
  right: 12px !important;
}

/* Bell badge — keep the alert tone but use --bad token */
.k-themed #notification-badge,
.k-notif-panel ~ #notification-bell #notification-badge,
#notification-badge {
  background-color: var(--bad) !important;
  color: var(--panel-deep) !important;
  border: 1px solid var(--border-strong);
}