.hub .hub-tools { padding: 24px; margin-bottom: 28px; border: 1px solid #dddad5; border-radius: 12px; background: #ffffff80; }
.hub .hub-tool-heading h2 { font-size: 18px; letter-spacing: -.04em; }
.hub .hub-tool-heading p { font-size: 12px; color: #696372; margin-top: 7px; word-break: keep-all; }
.hub .hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.hub .hub-filters button, .hub #featured-filter { border: 1px solid #dcd7e3; border-radius: 25px; background: white; color: #51495c; padding: 10px 15px; font: inherit; font-size: 13px; min-height: 42px; }
.hub .hub-filters button span { margin-left: 6px; opacity: .75; font-size: 11px; }
.hub .hub-filters button[aria-pressed="true"], .hub #featured-filter[aria-pressed="true"] { background: #6545b7; border-color: #6545b7; color: white; }
.hub .hub-search-row { display: flex; align-items: end; gap: 14px; }
.hub .hub-search { flex: 1; max-width: 440px; min-width: 0; }
.hub .hub-search label { display: block; font-size: 12px; color: #51495c; margin-bottom: 7px; }
.hub .hub-search input { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #dcd7e3; border-radius: 6px; color: #202126; background: white; font: inherit; font-size: 14px; }
.hub .hub-search input::placeholder { color: #77717d; }
.hub .hub-results { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.hub .hub-results p { font-size: 12px; color: #696372; }
.hub #portfolio-reset { border: 0; background: transparent; padding: 8px 0; text-decoration: underline; color: #655374; font-size: 12px; }
.hub .hub-card[hidden], .hub .hub-tools[hidden], .hub .hub-empty[hidden] { display: none; }
.hub .hub-detail .hub-featured { display: inline-block; padding: 4px 8px; margin-top: 10px; border-radius: 4px; background: #eee8fb; color: #6242a9; letter-spacing: 0; font-size: 11px; }
.hub .hub-detail>span:first-child { display: block; }
.hub .hub-detail .hub-try { padding-top: 16px; margin-top: 16px; border-top: 1px solid #eeeaf1; color: #665e6e; line-height: 1.8; word-break: keep-all; }
.hub .hub-try strong { display: block; color: #3f354c; font-size: 11px; margin-bottom: 5px; }
.hub .hub-empty { padding: 45px 20px; text-align: center; background: white; border: 1px solid #e6e3dd; border-radius: 12px; margin-bottom: 24px; }
.hub .hub-empty h2 { font-size: 20px; }
.hub .hub-empty p { font-size: 13px; color: #696372; margin: 10px 0 20px; }
.hub #empty-reset { border: 1px solid #6545b7; border-radius: 5px; background: #6545b7; color: white; padding: 11px 18px; }
.hub :is(button, input, a):focus-visible { outline: 2px solid #6545b7; outline-offset: 4px; }
@media (max-width: 600px) {
  .hub .hub-tools { padding: 18px; }
  .hub .hub-search-row { flex-wrap: wrap; }
  .hub .hub-search { flex-basis: 100%; max-width: none; }
  .hub .hub-filters button { padding: 10px 12px; font-size: 12px; }
}