/* The goods screens have their own palettes. Keep their shared site controls in the dashboard palette. */
.masthead, .updates-dialog {
  --canvas: oklch(97.5% .004 255);
  --surface: #fff;
  --surface-2: oklch(95.7% .006 255);
  --ink: oklch(22% .018 255);
  --muted: oklch(48% .018 255);
  --line: oklch(89% .008 255);
  --accent: oklch(56% .18 255);
  --accent-strong: oklch(49% .19 255);
  --accent-soft: oklch(94% .035 255);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}
:root[data-theme="dark"] :is(.masthead, .updates-dialog) {
  --canvas: #10151e;
  --surface: #192230;
  --surface-2: #222e3f;
  --ink: #edf2fa;
  --muted: #afbed2;
  --line: #40516a;
  --accent: #91b8ff;
  --accent-strong: #b4ceff;
  --accent-soft: #253b5d;
}
.masthead {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1440px; margin: auto;
  border-bottom: 1px solid var(--line); background: var(--canvas);
}
.masthead button { font: inherit; }
.masthead .identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.masthead .logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.masthead .brand-wordmark { display: block; width: clamp(150px, 16vw, 210px); height: auto; }
.masthead .subtitle { margin: 5px 0 0; color: var(--muted); }
.masthead .header-actions { display: flex; align-items: center; gap: 8px; }
.masthead .qq-group-link {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid color-mix(in oklch, var(--accent) 42%, var(--line)); border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); text-decoration: none;
}
.masthead .qq-icon { width: 25px; height: 25px; fill: currentColor; }
@media (max-width: 760px) {
  .masthead { gap: 8px; }
  .masthead .identity, .masthead .header-actions { gap: 6px; }
  .masthead .header-actions { flex: none; }
  .masthead .identity > div { min-width: 0; }
  .masthead .logo { width: 32px; height: 32px; border-radius: 8px; }
  .masthead .brand-wordmark { width: 112px; max-width: 100%; }
  .masthead .subtitle { display: none; }
  .masthead .qq-group-link { width: 36px; height: 36px; border-radius: 9px; }
  .masthead .qq-icon { width: 23px; height: 23px; }
}