/*
 * Runtime-only additions. The authoritative Obsidian theme and each page's
 * visual rules are injected verbatim from the ThinkMCP design payloads.
 */
:root {
  --bs-body-color: var(--color-text, #fafafa);
  --bs-body-color-rgb: 250, 250, 250;
  --bs-emphasis-color: var(--color-text, #fafafa);
  --bs-secondary-color: var(--color-text-secondary, #a1a1aa);
  --bs-tertiary-color: var(--color-text-muted, #71717a);
  --bs-body-bg: var(--color-background, #09090b);
  --bs-border-color: var(--color-border, #27272a);
}

/* Bootstrap's component defaults must inherit the authoritative dark theme. */
.card {
  color: var(--color-text, #fafafa);
}

/* Run-scoped E2E and real corporate addresses must not change table row
   height merely because an identifier is one character longer. */
#user-tbody .user-cell-text,
#user-tbody .user-email {
  max-width: 22rem;
}

#user-tbody .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The design's decorative switch track follows the transparent native input
   in DOM order. Keep the track visual-only so a real pointer reaches the
   checkbox instead of being intercepted by the absolutely positioned <i>. */
html[data-page-id='user_management'] .switch input {
  z-index: 1;
}

html[data-page-id='user_management'] .switch i {
  pointer-events: none;
}

@media (max-width: 768px) {
  /* The acquisition title needs two lines at 390px. Keep its controls and
     title inside an auto-sized header, and keep the action bar in document
     flow so it cannot cover the first KPI cards. */
  html[data-page-id='dash_acquisition'] .topbar {
    position: relative;
    height: auto;
    min-height: 64px;
    padding-block: 8px;
    gap: 8px;
  }

  html[data-page-id='dash_acquisition'] .topbar .page-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  html[data-page-id='dash_acquisition'] .action-bar {
    position: relative;
    bottom: auto;
  }

  /* Live churn cohorts and warning rows can contain more columns than the
     390px design viewport. Keep those surfaces horizontally scrollable inside
     their own bounds, and keep the fixed action rail from widening the page. */
  html[data-page-id='dash_churn'] .cohort-grid,
  html[data-page-id='dash_churn'] .action-inner {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

[hidden],
.tm-access-hidden {
  display: none !important;
}

/*
 * Real-data pages arrive with inert ThinkMCP example values in their compiled
 * markup. Keep that markup out of the paint tree until the owned runtime has
 * synchronously cleared it and started API hydration.
 */
html[data-demo-mode='false'][data-hydration-required='true']
  body[data-hydration-state='booting']
  > :not(#tm-hydration-screen):not(script) {
  visibility: hidden !important;
}

.tm-hydration-screen {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--color-text-secondary, #9f9fa8);
  background: var(--color-background, #09090b);
  font: 500 13px/1.5 var(--font-body, 'Inter', system-ui, sans-serif);
}

.tm-hydration-screen-brand {
  color: var(--color-text, #fafafa);
  font: 700 18px/1.2 var(--font-body, 'Inter', system-ui, sans-serif);
  letter-spacing: -0.02em;
}

.tm-hydration-screen-bar {
  position: relative;
  width: min(240px, 62vw);
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.tm-hydration-screen-bar::after {
  position: absolute;
  inset: 0;
  width: 42%;
  background: var(--grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
  border-radius: inherit;
  content: '';
  animation: tm-hydration-progress 1.1s ease-in-out infinite alternate;
}

@keyframes tm-hydration-progress {
  from {
    transform: translateX(-20%);
  }

  to {
    transform: translateX(158%);
  }
}

body:not([data-hydration-state='booting']) > .tm-hydration-screen {
  display: none;
}

html:not([data-role='admin']) .admin-only,
html[data-role='operator'] .nav-item[data-page='user_management'],
html[data-role='operator'] .nav-item[data-page='environment_config'],
html[data-role='operator'] .nav-item[data-page='schedule_settings'],
html[data-role='operator'] .nav-item[data-page='tier_mapping'],
html[data-role='user'] .nav-item[data-page='ops_overview'],
html[data-role='user'] .nav-item[data-page='connection_status'],
html[data-role='user'] .nav-item[data-page='refresh_operations'],
html[data-role='user'] .nav-item[data-page='user_management'],
html[data-role='user'] .nav-item[data-page='environment_config'],
html[data-role='user'] .nav-item[data-page='schedule_settings'],
html[data-role='user'] .nav-item[data-page='tier_mapping'],
html[data-role='user'] .nav-item[data-page='audit_history'] {
  display: none !important;
}

/* Manual refresh is an Admin/Operator capability in the concept flow. */
html[data-role='user'] #btn-refresh-now,
html[data-role='user'] #cu-refresh-now,
html[data-role='user'] #acq_refresh_now,
html[data-role='user'] #rev_refresh_now,
html[data-role='user'] #exp_refresh_now,
html[data-role='user'] #btn-refresh,
html[data-role='user'] [data-role-gate*='admin'],
html[data-role='user'] button[onclick*='refreshNow'],
html[data-role='user'] button[onclick*='RefreshNow'] {
  display: none !important;
}

.tm-runtime-busy {
  cursor: wait !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

.tm-runtime-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: tm-runtime-spin 0.75s linear infinite;
}

@keyframes tm-runtime-spin {
  to {
    transform: rotate(360deg);
  }
}

.tm-runtime-toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10050;
  display: grid;
  width: min(380px, calc(100vw - 36px));
  gap: 10px;
  pointer-events: none;
}

.tm-runtime-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: var(--color-text, #fafafa);
  background: var(--color-surface-2, #1a1a1f);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-pop, 0 8px 30px rgba(0, 0, 0, 0.45));
  font: 500 13px/1.45 var(--font-body, 'Inter', system-ui, sans-serif);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.tm-runtime-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tm-dashboard-account-scope {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  color: var(--color-text-secondary, #a1a1aa);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 32%, transparent);
  border-radius: var(--radius-md, 8px);
  font-size: 12px;
  line-height: 1.5;
}

.tm-dashboard-account-scope strong {
  flex: 0 0 auto;
  color: var(--color-text, #fafafa);
}

.tm-dashboard-account-scope[data-account-scope-status='invalid'],
.tm-dashboard-account-scope[data-account-scope-status='unsupported'] {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 36%, transparent);
}

@media (max-width: 768px) {
  .tm-dashboard-account-scope {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }
}

.tm-runtime-toast::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-accent, #22d3ee);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.tm-runtime-toast[data-type='success']::before {
  background: var(--color-success, #34d399);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}

.tm-runtime-toast[data-type='error']::before {
  background: var(--color-error, #f87171);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.tm-runtime-toast[data-type='warning']::before {
  background: var(--color-warning, #fbbf24);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

/* The Audit History design names its mobile navigation backdrop differently
   from the shared theme. Keep the source markup intact while supplying the
   same closed/open geometry and treatment as every other sidebar backdrop. */
.sb-backdrop,
#sb-backdrop {
  display: none;
}

@media (max-width: 768px) {
  body.tm-sidebar-open {
    overflow: hidden;
  }

  body.tm-sidebar-open .sidebar {
    display: flex !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  body.tm-sidebar-open .sidebar-backdrop,
  body.tm-sidebar-open .sidebar-overlay,
  body.tm-sidebar-open .sb-backdrop,
  body.tm-sidebar-open #sidebar-backdrop,
  body.tm-sidebar-open #sidebarBackdrop,
  body.tm-sidebar-open #sidebar-overlay,
  body.tm-sidebar-open #sb-backdrop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.tm-sidebar-open .sb-backdrop,
  body.tm-sidebar-open #sb-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 199;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-runtime-spinner,
  .tm-runtime-toast {
    animation: none !important;
    transition: none !important;
  }
}
.tm-runtime-environment {
  align-items: center;
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid rgba(113, 113, 122, 0.45);
  border-radius: 999px;
  color: #d4d4d8;
  display: inline-flex;
  flex: 0 0 auto;
  font: 600 11px/1 system-ui, sans-serif;
  gap: 6px;
  letter-spacing: 0.035em;
  margin-left: 10px;
  padding: 6px 9px;
  text-transform: uppercase;
}

.tm-runtime-environment-dot {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
  height: 6px;
  width: 6px;
}

.tm-config-sync-state {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 12px 14px;
  color: var(--color-text-secondary, #a1a1aa);
  background: rgba(24, 24, 27, 0.76);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 10px);
  font: 500 12px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-config-sync-state strong { color: var(--color-text, #fafafa); }
.tm-config-sync-error { color: var(--color-error, #f87171); }

.tm-custom-cron {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  padding: 8px 10px;
  color: var(--color-text, #fafafa);
  background: var(--color-surface-2, #18181b);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 7px);
  font: 500 12px/1.4 var(--font-mono, ui-monospace, monospace);
}

.tm-custom-cron[hidden] {
  display: none !important;
}

.tm-hydration-notice {
  position: relative;
  z-index: 5;
  margin: 0 0 14px;
  padding: 9px 12px;
  color: var(--color-text-muted, #a1a1aa);
  background: rgba(39, 39, 42, 0.82);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 7px);
  font: 500 12.5px/1.45 var(--font-body, 'Inter', system-ui, sans-serif);
}

.tm-hydration-notice.tm-hydration-loading {
  border-color: rgba(34, 211, 238, 0.3);
}

.tm-hydration-notice.tm-hydration-unavailable {
  color: #fcd34d;
  background: rgba(120, 53, 15, 0.18);
  border-color: rgba(251, 191, 36, 0.38);
}

.tm-unavailable-row td,
.tm-unavailable-placeholder {
  padding: 22px !important;
  color: var(--color-text-muted, #a1a1aa) !important;
  text-align: center !important;
  font: 500 12.5px/1.45 var(--font-body, 'Inter', system-ui, sans-serif) !important;
}

.tm-metric-unavailable {
  color: var(--color-text-muted, #a1a1aa) !important;
}

.tm-data-surface-unavailable {
  position: relative;
  min-height: 54px;
  opacity: 1 !important;
  filter: none;
  pointer-events: none;
}

.tm-data-surface-unavailable > * {
  visibility: hidden !important;
}

.tm-data-surface-unavailable::after {
  content: 'Live metric unavailable';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--color-text-muted, #71717a);
  background: rgba(9, 9, 11, 0.12);
  border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
  visibility: visible;
  font: 500 11.5px/1.4 var(--font-body, Inter, system-ui, sans-serif);
  text-align: center;
}

svg.tm-data-surface-unavailable,
canvas.tm-data-surface-unavailable {
  visibility: hidden !important;
}

.drawer-kv .kv-val.muted {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tm-runtime-line-chart {
  display: block;
  width: 100%;
  min-height: 210px;
}

.tm-runtime-bars {
  display: grid;
  width: 100%;
  gap: 11px;
}

.tm-runtime-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 2fr) minmax(64px, auto);
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

.tm-runtime-bar-label,
.tm-runtime-bar-value {
  color: var(--color-text-secondary, #a1a1aa);
  font: 500 12px/1.3 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-bar-value {
  color: var(--color-text, #fafafa);
  font-family: var(--font-mono, ui-monospace, monospace);
  text-align: right;
}

.tm-runtime-bar-track {
  height: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 999px;
}

.tm-runtime-bar-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  opacity: 0.82;
}

.tm-runtime-bar-unavailable,
.tm-runtime-row-unavailable {
  opacity: 0.5;
}

.tm-runtime-note {
  margin-top: 14px;
  color: var(--color-text-muted, #71717a);
  font: 500 11.5px/1.45 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 180px;
  align-content: center;
}

.tm-runtime-summary-item {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
}

.tm-runtime-summary-item > span,
.tm-runtime-summary-item > small {
  color: var(--color-text-muted, #71717a);
  font: 500 11px/1.35 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-summary-item > strong {
  color: var(--color-text, #fafafa);
  font: 650 20px/1.15 var(--font-mono, ui-monospace, monospace);
}

.tm-runtime-movement {
  min-height: 215px;
  padding: 8px 0;
}

.tm-runtime-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 16px;
  padding-top: 12px;
  color: var(--color-text-muted, #71717a);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  font: 500 11px/1.35 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-reasons > b {
  flex-basis: 100%;
  color: var(--color-text-secondary, #a1a1aa);
}

.tm-runtime-reasons strong {
  color: var(--color-text, #fafafa);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.cohort-grid.tm-runtime-cohort-grid {
  grid-template-columns: minmax(110px, 1.35fr) minmax(90px, 1fr) repeat(5, minmax(78px, 0.8fr));
  overflow-x: auto;
}

@media (max-width: 680px) {
  .tm-runtime-bar-row {
    grid-template-columns: minmax(88px, 0.8fr) minmax(70px, 1fr) minmax(54px, auto);
    gap: 8px;
  }

  .tm-runtime-summary {
    grid-template-columns: 1fr;
  }
}

/* Application-owned interaction layer for sanitized ThinkMCP markup. */
[data-action]:focus-visible,
.tm-runtime-surface button:focus-visible,
.tm-runtime-surface input:focus-visible,
.tm-runtime-surface textarea:focus-visible,
.tm-context-menu button:focus-visible {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

[data-action="unsupported"],
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.58;
}

body.tm-runtime-surface-open {
  overflow: hidden;
}

/* Design-authored modals sometimes start with an extracted `display:none`
   utility class. The owned runtime is the sole authority for opening them. */
.modal-backdrop.open,
.modal-backdrop.show {
  display: flex !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop.open > .modal,
.modal-backdrop.show > .modal,
.modal-backdrop.open > [role='dialog'],
.modal-backdrop.show > [role='dialog'] {
  display: block !important;
}

.modal-backdrop[hidden] {
  display: none !important;
}

/* The Audit History design starts its empty state with an extracted
   display:none class. Only the owned renderer may override that static
   initial state after an authoritative empty response. */
.empty-state.tm-runtime-visible:not([hidden]) {
  display: flex;
}

.tm-runtime-surface[hidden],
.tm-context-menu[hidden] {
  display: none !important;
}

.tm-runtime-surface {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 4, 9, 0.74);
  backdrop-filter: blur(6px);
}

.tm-notification-surface {
  place-items: stretch end;
  padding: 0;
  background: rgba(3, 4, 9, 0.54);
}

.tm-runtime-surface-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  color: var(--color-text, #fafafa);
  background: var(--color-surface, #111116);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
}

.tm-drawer-card {
  width: min(430px, calc(100vw - 24px));
  height: 100vh;
  max-height: none;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

.tm-runtime-surface-head,
.tm-runtime-surface-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.tm-runtime-surface-head {
  justify-content: space-between;
}

.tm-runtime-surface-head h2 {
  margin: 0;
  color: var(--color-text, #fafafa);
  font: 650 17px/1.3 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-surface-head p {
  margin: 4px 0 0;
  color: var(--color-text-muted, #71717a);
  font: 400 12px/1.45 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-surface-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-bottom: 0;
}

.tm-runtime-spacer {
  flex: 1;
}

.tm-runtime-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--color-text-secondary, #a1a1aa);
  font: 400 24px/1 sans-serif;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.tm-runtime-close:hover {
  color: var(--color-text, #fafafa);
  background: rgba(255, 255, 255, 0.06);
}

.tm-form-card {
  display: grid;
  gap: 16px;
}

.tm-form-card > .tm-runtime-field,
.tm-form-card > .tm-runtime-check {
  margin-inline: 20px;
}

.tm-runtime-field {
  display: grid;
  gap: 7px;
  color: var(--color-text-secondary, #a1a1aa);
  font: 500 12px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-field input,
.tm-runtime-field textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--color-text, #fafafa);
  background: var(--color-background, #09090b);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  font: 400 13px/1.45 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-runtime-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary, #a1a1aa);
  font: 500 12px var(--font-body, Inter, system-ui, sans-serif);
}

.tm-search-card {
  align-self: start;
  margin-top: min(90px, 10vh);
}

.tm-search-card > .tm-runtime-field {
  margin: 16px 20px;
}

.tm-search-results {
  display: grid;
  max-height: min(460px, 50vh);
  overflow: auto;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.tm-search-result {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 2px 12px;
  padding: 12px 20px;
  color: var(--color-text, #fafafa);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
  cursor: pointer;
}

.tm-search-result:hover,
.tm-search-result[aria-selected="true"] {
  background: rgba(99, 102, 241, 0.12);
}

/* ThinkMCP's embedded SVG select arrows are removed at compile time. Recreate
   the same compact chevron without loading or embedding an external resource. */
select:not([multiple]) {
  background-image:
    linear-gradient(45deg, transparent 50%, #6f6f78 50%),
    linear-gradient(135deg, #6f6f78 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.tm-search-result-type {
  grid-row: span 2;
  color: var(--color-primary, #818cf8);
  font: 650 10px/1.4 var(--font-body, Inter, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tm-search-result strong {
  font: 600 13px/1.35 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-search-result small {
  overflow: hidden;
  color: var(--color-text-muted, #71717a);
  font: 400 11.5px/1.4 var(--font-body, Inter, system-ui, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-notification-count {
  position: absolute;
  inset: -5px -7px auto auto;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  color: #fff;
  background: var(--color-error, #f87171);
  border: 2px solid var(--color-background, #09090b);
  border-radius: 999px;
  font: 700 9px/13px var(--font-body, Inter, system-ui, sans-serif);
  text-align: center;
}

[data-action="notifications-open"] {
  position: relative;
}

.tm-notification-list {
  display: grid;
  overflow: auto;
}

.tm-notification-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
}

.tm-notification-item.tm-unread {
  background: rgba(99, 102, 241, 0.08);
  box-shadow: inset 3px 0 var(--color-primary, #6366f1);
}

.tm-notification-item strong,
.tm-notification-item p,
.tm-notification-item time {
  display: block;
  margin: 0;
}

.tm-notification-item strong {
  font: 600 12.5px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-notification-item p,
.tm-notification-item time {
  margin-top: 4px;
  color: var(--color-text-muted, #71717a);
  font: 400 11.5px/1.45 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-notification-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
}

.tm-context-menu {
  position: fixed;
  z-index: 4200;
  display: grid;
  width: 190px;
  padding: 6px;
  color: var(--color-text, #fafafa);
  background: var(--color-surface, #111116);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: 9px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
}

.tm-context-menu-title {
  padding: 7px 9px 5px;
  color: var(--color-text-muted, #71717a);
  font: 650 10px/1.3 var(--font-body, Inter, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tm-context-menu button {
  padding: 9px;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 500 12px/1.3 var(--font-body, Inter, system-ui, sans-serif);
  cursor: pointer;
}

.tm-context-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tm-runtime-empty {
  padding: 26px 20px;
  color: var(--color-text-muted, #71717a);
  font: 500 12px/1.5 var(--font-body, Inter, system-ui, sans-serif);
  text-align: center;
}

.tm-data-card {
  width: min(900px, 100%);
}

.tm-data-view-table {
  max-height: 62vh;
  overflow: auto;
  padding: 0 20px 20px;
}

.tm-data-view-table table {
  width: 100%;
  border-collapse: collapse;
}

.tm-data-view-table th,
.tm-data-view-table td {
  padding: 8px 10px;
  color: var(--color-text-secondary, #a1a1aa);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
  font: 500 11.5px/1.4 var(--font-mono, ui-monospace, monospace);
  text-align: left;
}

.tm-data-view-table th {
  color: var(--color-text, #fafafa);
}

.tm-account-overlay-summary,
.tm-access-requests-panel {
  margin-top: 14px;
  padding: 14px;
  color: var(--color-text-secondary, #a1a1aa);
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 9px;
  font: 400 12px/1.5 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-account-overlay-summary > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tm-account-overlay-summary p {
  margin: 7px 0 0;
}

.tm-account-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tm-account-tags span {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.tm-definition-detail {
  display: grid;
  gap: 8px;
  padding: 20px;
}

.tm-definition-detail h3,
.tm-definition-detail p {
  margin: 0;
}

.tm-definition-detail h3 {
  margin-top: 8px;
  color: var(--color-text, #fafafa);
  font: 600 12px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-definition-detail p,
.tm-definition-detail code {
  color: var(--color-text-secondary, #a1a1aa);
  font: 400 12px/1.55 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-definition-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tm-connection-recovery-control[hidden] {
  display: none !important;
}

.summary-card[data-status='critical'] .summary-pulse .dot {
  background: var(--color-danger, #fb7185);
}

.summary-card[data-status='critical'] .summary-pulse .ring {
  border-color: var(--color-danger, #fb7185);
}

.summary-card[data-status='warning'] .summary-pulse .dot {
  background: var(--color-warning, #fbbf24);
}

.summary-card[data-status='warning'] .summary-pulse .ring {
  border-color: var(--color-warning, #fbbf24);
}

.tm-connection-recovery-control {
  display: grid;
  min-width: min(230px, 100%);
  gap: 5px;
}

.tm-connection-recovery-control > .btn {
  width: 100%;
}

.tm-connection-recovery-control > [role='status'] {
  max-width: 250px;
  color: var(--color-text-muted, #71717a);
  font: 400 11px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-connection-recovery-card {
  width: min(540px, 100%);
}

.tm-connection-recovery-components {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border: 0;
}

.tm-connection-recovery-components legend {
  margin-bottom: 8px;
  color: var(--color-text, #fafafa);
  font: 600 13px/1.4 var(--font-body, Inter, system-ui, sans-serif);
}

#tm-connection-recovery-components {
  display: grid;
  gap: 9px;
}

.tm-connection-recovery-option {
  min-height: 38px;
  padding: 9px 11px;
  background: var(--color-background, #09090b);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
}

#tm-connection-recovery-selection {
  min-height: 18px;
  margin: 2px 0 0;
  color: var(--color-text-muted, #71717a);
  font: 400 12px/1.45 var(--font-body, Inter, system-ui, sans-serif);
}

.tm-comparison-unavailable {
  border-color: rgba(251, 191, 36, 0.3);
}

@media (max-width: 680px) {
  .tm-runtime-surface {
    padding: 12px;
  }

  .tm-runtime-surface-card {
    max-height: calc(100vh - 24px);
  }

  .tm-search-result {
    grid-template-columns: 1fr;
  }

  .tm-search-result-type {
    grid-row: auto;
  }
}

@media print {
  .sidebar,
  .topbar,
  .drawer-backdrop,
  .drawer-close,
  .drawer-foot,
  #tm-runtime-shell {
    display: none !important;
  }

  .detail-drawer.open {
    position: static;
    width: 100%;
    color: #111;
    background: #fff;
    transform: none;
  }
}

/* CSP-safe dynamic presentation. Browser code changes reviewed attributes,
   while all executable styling remains in this same-origin stylesheet. */
.tm-runtime-busy-sized { min-width: 7rem; }
.tm-runtime-scroll-locked { overflow: hidden; }
.tm-clipboard-proxy {
  position: fixed;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tm-text-right { text-align: right; }
.tm-context-menu { top: 64px; right: 16px; left: auto; }
.tm-context-menu[data-tm-anchor-side='left'] { right: auto; left: 16px; }
[data-tm-tone='primary'] { --tm-runtime-tone: var(--color-primary, #6366f1); }
[data-tm-tone='danger'] { --tm-runtime-tone: var(--color-error, #fb7185); }
[data-tm-tone='warning'] { --tm-runtime-tone: var(--color-warning, #fbbf24); }
[data-tm-tone='success'] { --tm-runtime-tone: var(--color-success, #34d399); }
[data-tm-tone='purple'] { --tm-runtime-tone: #a78bfa; }
[data-tm-tone='info'] { --tm-runtime-tone: #38bdf8; }
.risk-value[data-tm-tone] { color: var(--tm-runtime-tone) !important; }
.risk-bar i[data-tm-tone],
.tm-runtime-bar-track i[data-tm-tone],
.swatch[data-tm-tone],
#cx_bar[data-tm-tone] { background-color: var(--tm-runtime-tone) !important; }
[data-tm-width='0'] { width: 0% !important; }
[data-tm-width='1'] { width: 1% !important; }
[data-tm-width='2'] { width: 2% !important; }
[data-tm-width='3'] { width: 3% !important; }
[data-tm-width='4'] { width: 4% !important; }
[data-tm-width='5'] { width: 5% !important; }
[data-tm-width='6'] { width: 6% !important; }
[data-tm-width='7'] { width: 7% !important; }
[data-tm-width='8'] { width: 8% !important; }
[data-tm-width='9'] { width: 9% !important; }
[data-tm-width='10'] { width: 10% !important; }
[data-tm-width='11'] { width: 11% !important; }
[data-tm-width='12'] { width: 12% !important; }
[data-tm-width='13'] { width: 13% !important; }
[data-tm-width='14'] { width: 14% !important; }
[data-tm-width='15'] { width: 15% !important; }
[data-tm-width='16'] { width: 16% !important; }
[data-tm-width='17'] { width: 17% !important; }
[data-tm-width='18'] { width: 18% !important; }
[data-tm-width='19'] { width: 19% !important; }
[data-tm-width='20'] { width: 20% !important; }
[data-tm-width='21'] { width: 21% !important; }
[data-tm-width='22'] { width: 22% !important; }
[data-tm-width='23'] { width: 23% !important; }
[data-tm-width='24'] { width: 24% !important; }
[data-tm-width='25'] { width: 25% !important; }
[data-tm-width='26'] { width: 26% !important; }
[data-tm-width='27'] { width: 27% !important; }
[data-tm-width='28'] { width: 28% !important; }
[data-tm-width='29'] { width: 29% !important; }
[data-tm-width='30'] { width: 30% !important; }
[data-tm-width='31'] { width: 31% !important; }
[data-tm-width='32'] { width: 32% !important; }
[data-tm-width='33'] { width: 33% !important; }
[data-tm-width='34'] { width: 34% !important; }
[data-tm-width='35'] { width: 35% !important; }
[data-tm-width='36'] { width: 36% !important; }
[data-tm-width='37'] { width: 37% !important; }
[data-tm-width='38'] { width: 38% !important; }
[data-tm-width='39'] { width: 39% !important; }
[data-tm-width='40'] { width: 40% !important; }
[data-tm-width='41'] { width: 41% !important; }
[data-tm-width='42'] { width: 42% !important; }
[data-tm-width='43'] { width: 43% !important; }
[data-tm-width='44'] { width: 44% !important; }
[data-tm-width='45'] { width: 45% !important; }
[data-tm-width='46'] { width: 46% !important; }
[data-tm-width='47'] { width: 47% !important; }
[data-tm-width='48'] { width: 48% !important; }
[data-tm-width='49'] { width: 49% !important; }
[data-tm-width='50'] { width: 50% !important; }
[data-tm-width='51'] { width: 51% !important; }
[data-tm-width='52'] { width: 52% !important; }
[data-tm-width='53'] { width: 53% !important; }
[data-tm-width='54'] { width: 54% !important; }
[data-tm-width='55'] { width: 55% !important; }
[data-tm-width='56'] { width: 56% !important; }
[data-tm-width='57'] { width: 57% !important; }
[data-tm-width='58'] { width: 58% !important; }
[data-tm-width='59'] { width: 59% !important; }
[data-tm-width='60'] { width: 60% !important; }
[data-tm-width='61'] { width: 61% !important; }
[data-tm-width='62'] { width: 62% !important; }
[data-tm-width='63'] { width: 63% !important; }
[data-tm-width='64'] { width: 64% !important; }
[data-tm-width='65'] { width: 65% !important; }
[data-tm-width='66'] { width: 66% !important; }
[data-tm-width='67'] { width: 67% !important; }
[data-tm-width='68'] { width: 68% !important; }
[data-tm-width='69'] { width: 69% !important; }
[data-tm-width='70'] { width: 70% !important; }
[data-tm-width='71'] { width: 71% !important; }
[data-tm-width='72'] { width: 72% !important; }
[data-tm-width='73'] { width: 73% !important; }
[data-tm-width='74'] { width: 74% !important; }
[data-tm-width='75'] { width: 75% !important; }
[data-tm-width='76'] { width: 76% !important; }
[data-tm-width='77'] { width: 77% !important; }
[data-tm-width='78'] { width: 78% !important; }
[data-tm-width='79'] { width: 79% !important; }
[data-tm-width='80'] { width: 80% !important; }
[data-tm-width='81'] { width: 81% !important; }
[data-tm-width='82'] { width: 82% !important; }
[data-tm-width='83'] { width: 83% !important; }
[data-tm-width='84'] { width: 84% !important; }
[data-tm-width='85'] { width: 85% !important; }
[data-tm-width='86'] { width: 86% !important; }
[data-tm-width='87'] { width: 87% !important; }
[data-tm-width='88'] { width: 88% !important; }
[data-tm-width='89'] { width: 89% !important; }
[data-tm-width='90'] { width: 90% !important; }
[data-tm-width='91'] { width: 91% !important; }
[data-tm-width='92'] { width: 92% !important; }
[data-tm-width='93'] { width: 93% !important; }
[data-tm-width='94'] { width: 94% !important; }
[data-tm-width='95'] { width: 95% !important; }
[data-tm-width='96'] { width: 96% !important; }
[data-tm-width='97'] { width: 97% !important; }
[data-tm-width='98'] { width: 98% !important; }
[data-tm-width='99'] { width: 99% !important; }
[data-tm-width='100'] { width: 100% !important; }
[data-tm-intensity='0'] { background-color: rgba(99, 102, 241, 0.04) !important; }
[data-tm-tone='success'][data-tm-intensity='0'] { background-color: rgba(52, 211, 153, 0.040) !important; }
[data-tm-intensity='1'] { background-color: rgba(99, 102, 241, 0.08) !important; }
[data-tm-tone='success'][data-tm-intensity='1'] { background-color: rgba(52, 211, 153, 0.085) !important; }
[data-tm-intensity='2'] { background-color: rgba(99, 102, 241, 0.12) !important; }
[data-tm-tone='success'][data-tm-intensity='2'] { background-color: rgba(52, 211, 153, 0.130) !important; }
[data-tm-intensity='3'] { background-color: rgba(99, 102, 241, 0.16) !important; }
[data-tm-tone='success'][data-tm-intensity='3'] { background-color: rgba(52, 211, 153, 0.175) !important; }
[data-tm-intensity='4'] { background-color: rgba(99, 102, 241, 0.20) !important; }
[data-tm-tone='success'][data-tm-intensity='4'] { background-color: rgba(52, 211, 153, 0.220) !important; }
[data-tm-intensity='5'] { background-color: rgba(99, 102, 241, 0.24) !important; }
[data-tm-tone='success'][data-tm-intensity='5'] { background-color: rgba(52, 211, 153, 0.265) !important; }
[data-tm-intensity='6'] { background-color: rgba(99, 102, 241, 0.28) !important; }
[data-tm-tone='success'][data-tm-intensity='6'] { background-color: rgba(52, 211, 153, 0.310) !important; }
[data-tm-intensity='7'] { background-color: rgba(99, 102, 241, 0.32) !important; }
[data-tm-tone='success'][data-tm-intensity='7'] { background-color: rgba(52, 211, 153, 0.355) !important; }
[data-tm-intensity='8'] { background-color: rgba(99, 102, 241, 0.36) !important; }
[data-tm-tone='success'][data-tm-intensity='8'] { background-color: rgba(52, 211, 153, 0.400) !important; }
[data-tm-intensity='9'] { background-color: rgba(99, 102, 241, 0.40) !important; }
[data-tm-tone='success'][data-tm-intensity='9'] { background-color: rgba(52, 211, 153, 0.445) !important; }
[data-tm-intensity='10'] { background-color: rgba(99, 102, 241, 0.44) !important; }
[data-tm-tone='success'][data-tm-intensity='10'] { background-color: rgba(52, 211, 153, 0.490) !important; }
:root {
  /* Preserve the ThinkMCP muted hierarchy while meeting WCAG AA on both
     application background surfaces used by the shared shell. */
  --color-text-muted: #8b8b95;
}

/* The design compiler marks pointer-styled data marks that have no product
   action. Removing the pointer prevents a visual promise the runtime cannot
   fulfil while preserving the underlying chart/table values. */
.tm-noninteractive-control {
  cursor: default !important;
}