.hub-theme {
  position: relative;
}
.hub-theme summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.hub-theme summary::-webkit-details-marker {
  display: none;
}
.hub-theme summary:hover, .hub-theme[open] summary {
  border-color: var(--lime);
  color: var(--lime);
}
.hub-theme summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.hub-theme summary svg {
  flex: none;
  color: var(--lime);
}
.hub-theme-options {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 3px;
  width: 164px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 28px #0007;
}
.hub-theme:not([open]) .hub-theme-options {
  display: none;
}
.hub-theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}
.hub-theme-option:hover, .hub-theme-option[aria-pressed="true"] {
  background: var(--panel2);
  border-color: var(--line);
}
.hub-theme-option::before {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  border: 1px solid #fff4;
  border-radius: 50%;
  background: var(--swatch);
}
.hub-theme-option[aria-pressed="true"]::after {
  content: '✓';
  margin-left: auto;
  color: var(--lime);
}
.hub-theme [role="status"] {
  color: var(--red);
  padding: 0 6px;
}
.hub-theme [role="status"]:empty {
  display: none;
}
@media (max-width: 780px) {
  .hub-theme summary {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .hub-theme summary span {
    display: none;
  }
}

:root[data-hub-theme="black"] {
  --bg: #0d0d10; --panel: #19191e; --panel2: #232329; --line: #35353e;
  --text: #f2f2f5; --muted: #abaab3; --lime: #e2e2e9;
}
:root[data-hub-theme="blue"] {
  --bg: #0e1323; --panel: #171f35; --panel2: #222d49; --line: #354466;
  --text: #eff2ff; --muted: #a6b3d1; --lime: #9ab5ff;
}
:root[data-hub-theme="orange"] {
  --bg: #1b120d; --panel: #292018; --panel2: #35281e; --line: #4a382b;
  --text: #fff4e9; --muted: #c6b09c; --lime: #ffc27f;
}
:root[data-hub-theme="sky"] {
  --bg: #0c171f; --panel: #14232e; --panel2: #1d2e3b; --line: #304654;
  --text: #edf8ff; --muted: #a5bdcd; --lime: #82dafb;
}
:root[data-hub-theme="purple"] {
  --bg: #161120; --panel: #21192f; --panel2: #2b2140; --line: #423456;
  --text: #f8f1ff; --muted: #baa9ce; --lime: #d7aaff;
}
:root[data-hub-theme="rose"] {
  --bg: #1a1118; --panel: #291c25; --panel2: #352531; --line: #4e3546;
  --text: #fff1f8; --muted: #c6aaba; --lime: #fda8ce;
}
:root[data-hub-theme] {
  --theme-tint: color-mix(in srgb, var(--lime) 14%, var(--panel));
  --theme-edge: color-mix(in srgb, var(--lime) 32%, var(--line));
}
[data-hub-theme] .hero {
  background: linear-gradient(108deg, var(--theme-tint), var(--panel));
  border-color: var(--theme-edge);
}
[data-hub-theme] .hero p,
[data-hub-theme] nav a,
[data-hub-theme] nav .nav-group > summary.nav-label {
  color: var(--muted);
}
[data-hub-theme] nav a.active,
[data-hub-theme] .icon-button:hover {
  background: var(--theme-tint);
  color: var(--lime);
}
[data-hub-theme] .tag,
[data-hub-theme] .hero-art .ring,
[data-hub-theme] .quick-link:hover,
[data-hub-theme] .service-shortcut:hover {
  border-color: var(--theme-edge);
}
[data-hub-theme] .brand-mark,
[data-hub-theme] .button.primary,
[data-hub-theme] .hero-art b {
  color: var(--bg);
}
[data-hub-theme] .hero-art .hero-electron {
  box-shadow: 0 0 10px var(--lime);
}
[data-hub-theme] input,
[data-hub-theme] select,
[data-hub-theme] .quick-link {
  background: var(--bg);
  border-color: var(--line);
}
[data-hub-theme] input::placeholder {
  color: var(--muted);
}
[data-hub-theme] nav a small {
  background: var(--line);
}