.family-launcher { position: relative; flex: 0 0 auto; font-family: inherit; }
.family-launcher summary { display: flex; height: 36px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dce2e7; border-radius: 12px; background: #fff; color: #202b33; cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; }
.family-launcher summary::-webkit-details-marker { display: none; }
.family-launcher summary:hover, .family-launcher[open] summary { border-color: #94a3ad; background: #f8fafb; }
.family-launcher summary:focus-visible, .family-card:focus-visible { outline: 2px solid #1769aa; outline-offset: 2px; }
.family-launcher summary svg { width: 17px; height: 17px; flex: 0 0 auto; }
.family-panel { position: absolute; z-index: 100; top: calc(100% + 8px); left: 0; width: min(432px, calc(100vw - 24px)); padding: 16px; border: 1px solid #e3e7eb; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgb(23 42 58 / 18%); color: #17212b; }
.family-heading { margin-bottom: 15px; }
.family-heading strong, .family-heading small { display: block; }
.family-heading strong { font-size: 14px; }
.family-heading small { margin-top: 3px; color: #687783; font-size: 12px; }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.family-card { display: flex; min-height: 132px; min-width: 0; flex-direction: column; align-items: center; padding: 10px; border: 1px solid #dce2e7; border-radius: 12px; background: #f9fafb; color: #17212b; text-align: center; text-decoration: none; box-sizing: border-box; }
.family-card.is-current { border-color: var(--family-accent); background: #fbfcfd; }
a.family-card:hover { border-color: var(--family-accent); background: #fff; }
.family-logo { display: flex; width: 100%; height: 72px; align-items: center; justify-content: center; margin-bottom: 8px; padding: 4px; overflow: hidden; border-radius: 8px; background: #fff; box-sizing: border-box; }
.family-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.family-card strong { font-size: 12px; line-height: 1.2; }
.family-card small { margin-top: 4px; color: #687783; font-size: 11px; line-height: 1.2; }
@media (max-width: 600px) { .family-launcher summary span { display: none; } .family-launcher summary { width: 36px; justify-content: center; padding: 0; } .family-panel { left: -45px; } .family-card { min-height: 122px; padding: 7px; } .family-logo { height: 64px; } }