/**
 * Unified brand logo sizing — uploaded logos match system defaults
 */

:root {
  --brand-logo-header-height: 2.25rem;
  --brand-logo-header-max-width: 8.5rem;
  --brand-logo-auth-width: 50%;
  --brand-logo-auth-max-width: 12rem;
  --brand-logo-auth-max-height: 3.5rem;
}

/* Header chrome (home, start, records, music) */
[data-v-ac6bab4d] .w-\[var\(--header-logo-width\)\],
.bg-\[var\(--header-bg\)\] .w-\[var\(--header-logo-width\)\] {
  display: flex;
  align-items: center;
  min-height: var(--brand-logo-header-height);
  padding: 0.2rem 0.45rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.app-brand-logo-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.app-brand-logo-link--auth {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

[data-v-ac6bab4d] .w-\[var\(--header-logo-width\)\] .app-brand-logo-link,
.bg-\[var\(--header-bg\)\] .w-\[var\(--header-logo-width\)\] .app-brand-logo-link {
  min-height: var(--brand-logo-header-height);
}

[data-v-ac6bab4d] .w-\[var\(--header-logo-width\)\] .app-brand-logo,
.bg-\[var\(--header-bg\)\] .app-brand-logo,
.header-logo.app-brand-logo {
  display: block;
  width: auto !important;
  max-width: var(--brand-logo-header-max-width) !important;
  max-height: var(--brand-logo-header-height) !important;
  height: auto !important;
  object-fit: contain;
}

/* Login / register */
.auth-logo.app-brand-logo {
  width: var(--brand-logo-auth-width);
  max-width: var(--brand-logo-auth-max-width);
  max-height: var(--brand-logo-auth-max-height);
  height: auto;
  object-fit: contain;
}