/* ==========================================================
   Tool Hub Retheme 5
   Based on Zac's "Alta Video dashboard design" package.
   Keeps current Tool Hub data/auth/runtime; replaces the visual shell.
   ========================================================== */

:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  color-scheme: dark;
  --r5-bg: #050c1c;
  --r5-page: radial-gradient(1300px 820px at 80% -8%, #12285a 0%, #0a1737 42%, #060e21 72%, #050b1a 100%);
  --r5-text: #e9f0fb;
  --r5-muted: #8fa2c4;
  --r5-muted-2: #8093b5;
  --r5-faint: #6f82a6;
  --r5-card: rgba(13,24,48,.66);
  --r5-card-hover: rgba(20,36,72,.82);
  --r5-panel: rgba(14,26,52,.70);
  --r5-section: rgba(13,24,48,.60);
  --r5-border: rgba(120,150,210,.14);
  --r5-border-strong: rgba(43,139,255,.48);
  --r5-divider: rgba(120,150,210,.10);
  --r5-chip: rgba(120,150,210,.10);
  --r5-row-hover: rgba(30,50,92,.55);
  --r5-accent: #2b8bff;
  --r5-accent-2: #34c2df;
  --r5-lime: #a6da4c;
  --r5-accent-soft: rgba(43,139,255,.12);
  --r5-success: #48d178;
  --r5-warn: #ffb84d;
  --r5-danger: #ff6574;
  --r5-card-shadow: none;
  --r5-card-hover-shadow: 0 14px 32px rgba(0,0,0,.32);
  --r5-glow: rgba(43,139,255,.28);
  --r5-geo-opacity: .50;
  --r5-geo-stroke: #3f6cc8;
}

:root[data-theme="light"] {
  color-scheme: light;
  --r5-bg: #ffffff;
  --r5-page: #ffffff;
  --r5-text: #1c1f24;
  --r5-muted: #6b7280;
  --r5-muted-2: #7a8290;
  --r5-faint: #8b93a1;
  --r5-card: #f4f6f9;
  --r5-card-hover: #eef1f6;
  --r5-panel: #f4f6f9;
  --r5-section: #ffffff;
  --r5-border: #e2e6ec;
  --r5-border-strong: rgba(11,111,232,.35);
  --r5-divider: #eaedf2;
  --r5-chip: #eef1f5;
  --r5-row-hover: #f2f5f9;
  --r5-accent: #0b6fe8;
  --r5-accent-2: #0b6fe8;
  --r5-lime: #6da51d;
  --r5-accent-soft: rgba(11,111,232,.10);
  --r5-success: #2ea86a;
  --r5-warn: #a86b00;
  --r5-danger: #c83d4a;
  --r5-card-shadow: 0 1px 2px rgba(20,40,80,.04);
  --r5-card-hover-shadow: 0 6px 18px rgba(20,40,80,.07);
  --r5-glow: rgba(11,111,232,.07);
  --r5-geo-opacity: .13;
  --r5-geo-stroke: #c3d2ee;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--r5-bg) !important;
  color: var(--r5-text) !important;
  font-family: Figtree, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: normal !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: var(--r5-page);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: var(--r5-geo-opacity);
  background:
    radial-gradient(circle at 83% -12%, var(--r5-glow), transparent 34rem),
    linear-gradient(60deg, transparent 0 47.5%, color-mix(in srgb, var(--r5-geo-stroke) 45%, transparent) 48% 48.4%, transparent 49% 100%),
    linear-gradient(120deg, transparent 0 47.5%, color-mix(in srgb, var(--r5-geo-stroke) 35%, transparent) 48% 48.4%, transparent 49% 100%);
  background-size: auto, 360px 208px, 360px 208px;
  mask-image: linear-gradient(90deg, transparent 0%, black 38%, black 100%);
}
::selection { background: rgba(43,139,255,.28); }

.ambient-bg,
.ambient-bg canvas {
  opacity: .16 !important;
  mix-blend-mode: screen !important;
}
[data-theme="light"] .ambient-bg,
[data-theme="light"] .ambient-bg canvas { opacity: .04 !important; }

/* Package-style top nav */
.topbar {
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 82px !important;
  margin: 0 !important;
  padding: 20px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--r5-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.brand {
  min-width: 210px !important;
  gap: 14px !important;
  padding: 0 !important;
}
.brand-logo {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  position: relative !important;
}
.brand-logo::before,
.brand-logo::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, var(--r5-accent), var(--r5-accent-2) 52%, var(--r5-lime));
}
.brand-logo::after {
  inset: 7px 8px 6px;
  background: var(--r5-bg);
}
.brand-title {
  font-family: Archivo, Figtree, sans-serif !important;
  color: var(--r5-text) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}
.brand-sub {
  color: var(--r5-faint) !important;
  font-size: 10px !important;
  letter-spacing: .20em !important;
  line-height: 1.2 !important;
}
.search {
  flex: 0 1 300px !important;
  width: 300px !important;
  max-width: 34vw !important;
  margin-left: auto !important;
}
.search::before { color: var(--r5-faint) !important; opacity: 1 !important; }
.search input {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid var(--r5-border) !important;
  border-radius: 11px !important;
  background: var(--r5-panel) !important;
  color: var(--r5-text) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  padding: 9px 14px 9px 42px !important;
  box-shadow: none !important;
}
.search input::placeholder { color: var(--r5-muted-2) !important; }
.search input:focus,
.operator-form input:focus {
  outline: 2px solid color-mix(in srgb, var(--r5-accent) 50%, transparent) !important;
  outline-offset: 2px !important;
}
.spacer { display: none !important; }
.theme-toggle,
.operator-button,
.status {
  width: auto !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 11px !important;
  border: 1px solid var(--r5-border) !important;
  background: var(--r5-panel) !important;
  color: var(--r5-muted) !important;
  box-shadow: none !important;
  transition: background .16s, color .16s, border-color .16s !important;
}
.theme-toggle:hover,
.operator-button:hover,
.status:hover {
  background: var(--r5-card-hover) !important;
  color: var(--r5-text) !important;
  border-color: var(--r5-border-strong) !important;
}
.theme-toggle {
  width: 42px !important;
  padding: 0 !important;
  margin-left: auto !important;
}
.theme-toggle-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.theme-toggle-text {
  display: none !important;
  font-family: Figtree, sans-serif !important;
  font-size: 0 !important;
}
.theme-toggle-text span { display:none !important; }
.operator-button {
  padding: 0 14px !important;
  font-family: Figtree, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  color: var(--r5-text) !important;
  background: var(--r5-panel) !important;
}
.status {
  width: auto !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.status .mono,
.status #statusLabel {
  font-family: Figtree, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.status-dot {
  width: 8px !important;
  height: 8px !important;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
}
.status.ok { color: var(--r5-success) !important; }
.status.issue,
.status.checking { color: var(--r5-warn) !important; }
.status.down { color: var(--r5-danger) !important; }

main {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 42px 40px 64px !important;
}
.layout-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0 22px !important;
}
.hub-section { grid-column: span var(--span,12) !important; }

/* Greeting becomes package title block */
.greeting-section {
  margin-bottom: 34px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.greeting-section::before,
.greeting-section::after { display: none !important; }
.greeting {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.greeting::before,
.greeting::after { display: none !important; }
.greeting > div:first-child { max-width: 720px !important; padding: 0 !important; }
.greeting .date {
  margin: 0 0 8px !important;
  color: var(--r5-accent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.greeting h1 {
  margin: 0 !important;
  color: var(--r5-text) !important;
  font-family: Archivo, Figtree, sans-serif !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  font-weight: 700 !important;
}
.greeting p {
  margin: 8px 0 0 !important;
  color: var(--r5-muted) !important;
  font-size: 15px !important;
  max-width: none !important;
}
.clock {
  display: none !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid var(--r5-border) !important;
  border-radius: 999px !important;
  background: var(--r5-panel) !important;
  box-shadow: none !important;
}
.clock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r5-success);
  box-shadow: 0 0 8px var(--r5-success);
}
.clock-time,
.clock-tz {
  display: none !important;
}
.clock::after {
  content: "All systems operational";
  color: var(--r5-muted) !important;
  font-size: 13px !important;
}

/* Section headers */
.section-heading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}
.section-heading .label {
  color: var(--r5-text) !important;
  font-family: Archivo, Figtree, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
}
.section-heading .label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -4px;
  background: currentColor;
  color: var(--r5-accent);
  opacity: .95;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5" fill="black"/><rect x="14" y="3" width="7" height="7" rx="1.5" fill="black"/><rect x="14" y="14" width="7" height="7" rx="1.5" fill="black"/><rect x="3" y="14" width="7" height="7" rx="1.5" fill="black"/></svg>') center/contain no-repeat;
}
.section-heading .rule { display: none !important; }
.section-heading .count {
  padding: 3px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--r5-faint) !important;
  background: var(--r5-chip) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

/* App switcher: package card grid */
.hub-section[data-section="applications"] { margin-bottom: 44px !important; }
.app-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.app-card {
  grid-column: auto !important;
  min-height: 152px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 16px !important;
  background: var(--r5-card) !important;
  border: 1px solid var(--r5-border) !important;
  box-shadow: var(--r5-card-shadow) !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
  overflow: hidden !important;
}
.app-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--r5-accent) !important;
  background: var(--r5-card-hover) !important;
  box-shadow: var(--r5-card-hover-shadow) !important;
}
.app-card[data-health="down"],
.app-card.is-offline {
  filter: grayscale(.95) saturate(.34) !important;
  opacity: .62 !important;
  cursor: not-allowed !important;
  border-color: color-mix(in srgb, var(--r5-danger) 40%, var(--r5-border)) !important;
  background: color-mix(in srgb, var(--r5-section) 82%, #6B7280) !important;
  box-shadow: none !important;
}
.app-card[data-health="down"]:hover,
.app-card.is-offline:hover {
  transform: none !important;
  background: color-mix(in srgb, var(--r5-section) 82%, #6B7280) !important;
  border-color: color-mix(in srgb, var(--r5-danger) 54%, var(--r5-border)) !important;
  box-shadow: none !important;
}
.app-card[data-health="down"] .external,
.app-card.is-offline .external {
  display: none !important;
}
.app-card[data-health="down"] .app-code,
.app-card.is-offline .app-code {
  color: var(--r5-danger) !important;
  background: color-mix(in srgb, var(--r5-danger) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--r5-danger) 34%, transparent) !important;
}
.app-card::before,
.app-card::after { display: none !important; }
.app-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}
.app-code {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(150deg, rgba(43,139,255,.22), rgba(52,194,223,.12)) !important;
  border: 1px solid rgba(120,160,230,.20) !important;
  color: var(--r5-accent) !important;
  font-family: Archivo, Figtree, sans-serif !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.app-code svg { width: 22px; height: 22px; stroke: currentColor; }
.app-top .external {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  opacity: .9 !important;
  background: var(--r5-faint) !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 7h10v10" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 17 17 7" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
.app-card h3 {
  margin: 0 !important;
  color: var(--r5-text) !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
.app-card p {
  margin: 3px 0 0 !important;
  color: var(--r5-muted-2) !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
.app-health {
  display: none !important;
}
/* AI calculator centrepiece */
.hub-section[data-section="calculator"] { margin-bottom: 22px !important; }
.cta {
  min-height: 160px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 26px 30px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--r5-accent-2) 36%, var(--r5-border)) !important;
  background:
    linear-gradient(90deg, rgba(52,194,223,.18), transparent 45%),
    var(--r5-section) !important;
  box-shadow: var(--r5-card-shadow) !important;
  overflow: hidden !important;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--r5-accent) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--r5-accent) 18%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cta::after { display: none !important; }
.cta-copy {
  position: relative;
  z-index: 1;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}
.cta-copy + .cta-copy {
  padding-left: 24px !important;
  border-left: 1px solid color-mix(in srgb, var(--r5-accent-2) 24%, transparent) !important;
}
.eyebrow {
  display: inline-flex !important;
  width: auto !important;
  margin-bottom: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--r5-accent-2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  padding: 0 !important;
}
.cta h2 {
  margin: 0 !important;
  color: var(--r5-text) !important;
  font-family: Archivo, Figtree, sans-serif !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
}
.cta p {
  max-width: 620px !important;
  margin: 8px 0 0 !important;
  color: var(--r5-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
.cta .launch { align-self: flex-start !important; margin-top: 18px !important; }
.cta-side {
  position: relative !important;
  z-index: 1 !important;
  display: contents !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.metrics {
  display: flex !important;
  gap: 26px !important;
  align-items: center !important;
  width: auto !important;
}
.metric {
  min-width: 70px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
.metric strong {
  display: block !important;
  color: var(--r5-text) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}
.metric strong span { color: var(--r5-accent-2) !important; font-size: 13px !important; margin-left: 1px; }
.metric div {
  margin-top: 5px !important;
  color: var(--r5-faint) !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
}
.launch,
.operator-submit,
.secondary-launch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--r5-accent-2), var(--r5-accent)) !important;
  color: #061020 !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--r5-accent-2) 30%, transparent) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
[data-theme="light"] .launch,
[data-theme="light"] .operator-submit,
[data-theme="light"] .secondary-launch { color: #fff !important; }
.launch:hover,
.operator-submit:hover,
.secondary-launch:hover { filter: brightness(1.06); }

/* Resource panels */
.hub-section[data-section="downloads"],
.hub-section[data-section="documentation"] { margin-bottom: 22px !important; }
.hub-section[data-section="announcements"] { margin-top: 0 !important; }
.panel,
.docs-panel,
.operator-card {
  border-radius: 18px !important;
  border: 1px solid var(--r5-border) !important;
  background: var(--r5-section) !important;
  box-shadow: none !important;
  padding: 24px !important;
  overflow: hidden !important;
}
.panel::after,
.docs-panel::after,
.operator-card::after { display: none !important; }
.hub-section[data-section="downloads"] .panel,
.hub-section[data-section="documentation"] .panel,
.hub-section[data-section="announcements"] .panel {
  background:
    linear-gradient(90deg, rgba(43,139,255,.08), transparent 38%),
    color-mix(in srgb, var(--r5-card) 88%, var(--r5-bg)) !important;
}
.doc-list,
.news-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.doc-row,
.news-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 13px 12px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .14s !important;
}
.news-item { align-items: flex-start !important; }
.doc-row:hover,
.news-item:hover { background: var(--r5-row-hover) !important; transform: none !important; box-shadow: none !important; }
.kind,
.news-date,
.tag {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--r5-accent-soft) !important;
  color: var(--r5-accent) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  padding: 3px 6px !important;
}
.kind { color: #e8703f !important; background: rgba(232,112,63,.14) !important; }
.news-meta {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--r5-faint) !important;
  margin-bottom: 5px !important;
}
.doc-title,
.news-title {
  display: block !important;
  color: var(--r5-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
.doc-host,
.news-meta {
  color: var(--r5-faint) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.doc-row .external,
.news-item .external { display: none !important; }
.footer {
  grid-column: 1 / -1 !important;
  margin-top: 40px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--r5-divider) !important;
  color: var(--r5-faint) !important;
}

/* Operator modal */
.operator-modal {
  overflow-y: auto !important;
  background: color-mix(in srgb, var(--r5-bg) 58%, rgba(0,0,0,.50)) !important;
  backdrop-filter: blur(10px) !important;
}
.operator-card {
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
  color: var(--r5-text) !important;
}
.operator-eyebrow {
  display: inline-flex !important;
  border: 0 !important;
  background: var(--r5-accent-soft) !important;
  color: var(--r5-accent) !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 6px !important;
}
.operator-card h2 { color: var(--r5-text) !important; font-family: Archivo, Figtree, sans-serif !important; }
.operator-card p,
.operator-card label { color: var(--r5-muted) !important; }
.operator-form input {
  border: 1px solid var(--r5-border) !important;
  border-radius: 11px !important;
  background: var(--r5-panel) !important;
  color: var(--r5-text) !important;
}
.operator-close { color: var(--r5-muted) !important; background: var(--r5-chip) !important; border-radius: 10px !important; }

/* Proxy/detail pages inherit package language */
.tool-page,
.tool-hero,
.instruction-panel,
.setup-list li,
.note-list li,
.tool-facts div {
  border-color: var(--r5-border) !important;
  background-color: var(--r5-section) !important;
  color: var(--r5-text) !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}
.tool-hero h1,
.instruction-panel h2 { color: var(--r5-text) !important; font-family: Archivo, Figtree, sans-serif !important; }
.tool-hero p,
.setup-list p,
.note-list p,
.tool-facts span { color: var(--r5-muted) !important; }
code { color: var(--r5-accent-2) !important; overflow-wrap: anywhere; }
.proxy-detail-page {
  max-width: 1100px !important;
}
.proxy-detail-page .tool-hero,
.proxy-detail-page .instruction-panel {
  background:
    linear-gradient(90deg, rgba(43,139,255,.08), transparent 38%),
    color-mix(in srgb, var(--r5-card) 88%, var(--r5-bg)) !important;
}
.proxy-detail-page .tool-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.proxy-detail-page .tool-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
.proxy-detail-page .tool-facts {
  display: grid !important;
  gap: 10px !important;
}
.proxy-detail-page .tool-facts div {
  border: 1px solid var(--r5-border) !important;
  background: color-mix(in srgb, var(--r5-bg) 58%, transparent) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}
.proxy-detail-page .tool-facts code {
  display: block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.proxy-detail-page .setup-list,
.proxy-detail-page .note-list {
  margin: 0 !important;
}
.proxy-detail-page .setup-list li,
.proxy-detail-page .note-list p {
  background: transparent !important;
  border-radius: 10px !important;
}
.proxy-detail-page .nav-link { margin-left: 0 !important; }

@media (max-width: 1120px) {
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cta { grid-template-columns: 1fr !important; align-items: start !important; }
  .cta-copy + .cta-copy { padding-left: 0 !important; padding-top: 22px !important; border-left: 0 !important; border-top: 1px solid color-mix(in srgb, var(--r5-accent-2) 24%, transparent) !important; }
  .cta-side { display: flex !important; flex-direction: column !important; gap: 18px !important; align-items: start !important; }
  .metrics { gap: 18px !important; }
  .proxy-detail-page .tool-hero { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  .topbar { height: auto !important; padding: 16px 18px !important; flex-wrap: wrap !important; }
  .brand { min-width: auto !important; }
  .search { order: 10 !important; flex-basis: 100% !important; width: 100% !important; max-width: none !important; }
  .status { display: none !important; }
  main { padding: 28px 18px 48px !important; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hub-section[data-section="downloads"],
  .hub-section[data-section="documentation"] { grid-column: 1 / -1 !important; }
  .cta { padding: 22px !important; }
}
@media (max-width: 520px) {
  .app-grid { grid-template-columns: 1fr !important; }
  .clock { display: none !important; }
}

/* In-Dev switcher-only landing page */
body.tool-hub-switcher-only main {
  min-height: calc(100dvh - 82px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}
body.tool-hub-switcher-only .switcher-only-layout {
  width: min(100%, 980px) !important;
  display: block !important;
}
body.tool-hub-switcher-only .hub-section[data-section="applications"] {
  width: 100% !important;
  margin: 0 !important;
}
body.tool-hub-switcher-only .section-heading {
  margin-bottom: 18px !important;
}
body.tool-hub-switcher-only .app-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 820px) {
  body.tool-hub-switcher-only main {
    min-height: calc(100dvh - 82px) !important;
    padding: 32px 18px !important;
  }
  body.tool-hub-switcher-only .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  body.tool-hub-switcher-only main {
    align-items: flex-start !important;
    min-height: auto !important;
  }
  body.tool-hub-switcher-only .app-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Development identity: Apple-like badge with restrained green accents */
body.tool-hub-switcher-only {
  --dev-green: #9BEA86;
  --dev-green-soft: rgba(155, 234, 134, .11);
  --dev-green-border: rgba(155, 234, 134, .28);
}
[data-theme="light"] body.tool-hub-switcher-only {
  --dev-green: #2F8A4C;
  --dev-green-soft: rgba(47, 138, 76, .10);
  --dev-green-border: rgba(47, 138, 76, .24);
}
.brand-title-wrap {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  position: relative !important;
}
.dev-environment-badge {
  min-width: 44px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transform: translateY(-9px);
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  background: #BDF4B0;
  color: #153A1D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 4px 14px rgba(111, 220, 121, .18);
  font-family: IBM Plex Mono, monospace;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
}
body.tool-hub-switcher-only .section-heading .label::before {
  color: var(--dev-green) !important;
}
body.tool-hub-switcher-only .section-heading .count {
  color: var(--dev-green) !important;
  background: var(--dev-green-soft) !important;
}
body.tool-hub-switcher-only .app-card {
  border-top-color: var(--dev-green-border) !important;
}
body.tool-hub-switcher-only .app-code {
  color: var(--dev-green) !important;
  border-color: var(--dev-green-border) !important;
  background: var(--dev-green-soft) !important;
}
body.tool-hub-switcher-only .app-card:hover {
  border-color: color-mix(in srgb, var(--dev-green) 58%, var(--r5-accent)) !important;
  box-shadow: 0 15px 38px rgba(28, 109, 65, .11) !important;
}
body.tool-hub-switcher-only .app-card[data-health="down"] .app-code,
body.tool-hub-switcher-only .app-card.is-offline .app-code {
  color: var(--r5-danger) !important;
  border-color: color-mix(in srgb, var(--r5-danger) 34%, transparent) !important;
  background: color-mix(in srgb, var(--r5-danger) 14%, transparent) !important;
}