*, *::before, *::after { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; }

.top-bar {
  background: white;
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 8px;
}
.top-bar h1 { margin: 0; color: #433F66; font-size: 22px; }
.top-bar a { font-size: 13px; color: #766FB3; text-decoration: none; }
.top-bar a:hover { text-decoration: underline; }

body.dark .top-bar { background: #1a1a27; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
body.dark .top-bar h1 a img { filter: brightness(0) invert(1); }
body.dark .top-bar a { color: #a89de0; }

@media (max-width: 600px) {
  .top-bar { padding: 12px 16px; }
}