.topnav { background: #000; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; }
.topnav .logo { display: flex; align-items: center; gap: 10px; margin-left: 24px; color: #fff; }
.topnav img { height: 32px; }
.topnav .search { flex: 1; margin: 0 24px; }
.topnav input[type="search"] { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 1em; }
.topnav .user { margin-right: 24px; font-weight: 600; color: #fff; }
/* Accessible focus styles */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #FFDC00; outline-offset: 2px; border-radius: 8px; }
@media (max-width: 600px) {
  .topnav { flex-direction: column; gap: 8px; }
  .topnav .search, .topnav .user { margin: 0; }
}