/* BearAI.RED shared brand layer — logo lockup, wordmark and tokens used on bearai.red, account.bearai.red and app.bearai.red */
:root {
  --brand-bg: #070708;
  --brand-surface: #0f0c0e;
  --brand-line: #2c1b21;
  --brand-red: #ff2848;
  --brand-red-bright: #ff5067;
  --brand-white: #f7f3f3;
  --brand-muted: #91858b;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: "Kanit", var(--sans);
  font-stretch: normal;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-white);
}
.brand-lockup > span {
  color: var(--brand-red);
  text-shadow: 0 0 14px rgba(255, 40, 72, .55);
  width: auto !important;
}
.brand-mark {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-right: .7rem;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 40, 72, .28));
}
.site-header .brand.brand-lockup { font-size: 1.85rem; line-height: 1; }
.site-footer .footer-brand.brand-lockup { font-size: 1.05rem; letter-spacing: 0; }
.site-footer .footer-brand .brand-mark { width: 30px; height: 30px; margin-right: .5rem; filter: none; }

@media (max-width: 760px) {
  .site-header .brand.brand-lockup { font-size: 1.5rem; }
  .site-header .brand-mark { width: 40px; height: 40px; margin-right: .5rem; }
}

/* Public navigation: dedicated Login action, kept at the far right. */
.site-header { grid-template-columns: auto minmax(180px, 1fr) auto auto; gap: clamp(1rem, 2vw, 2rem); }
.site-header .brand { justify-self: center; }
.site-header nav { gap: clamp(1rem, 2vw, 2rem); }
.site-header .login-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.5rem; border: 1px solid rgba(255,255,255,.88); border-radius: 14px; color: #fff; background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.24); font-size: .94rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background .18s ease, box-shadow .18s ease; }
.site-header .login-button:hover { background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(0,0,0,.3); }
.site-header .login-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 1000px) {
 .site-header { grid-template-columns: 1fr auto; gap: .8rem; }
 .site-header .brand { grid-column: 1; grid-row: 1; justify-self: start; }
 .site-header .login-button { grid-column: 2; grid-row: 1; justify-self: end; padding: .55rem 1.25rem; }
 .site-header .nav-left { grid-column: 1; grid-row: 2; }
 .site-header .nav-right { grid-column: 2; grid-row: 2; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .site-header .login-button { transition: none; } }
@media (max-width: 760px) {
 .site-header { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .site-header .brand { grid-column: 1 / 4; }
 .site-header .login-button { grid-column: 4; padding-inline: 1rem; }
 .site-header .nav-left { grid-column: 1; }
 .site-header .nav-right { grid-column: 2 / -1; }
}