:root {
  --howler-bg: #f6f6f6;
  --howler-panel: #ffffff;
  --howler-black: #111111;
  --howler-red: #c1121f;
  --howler-red-dark: #9c1019;
}

body {
  background: var(--howler-bg);
  min-height: 100vh;
  color: var(--howler-black);
}

.howler-card {
  background: var(--howler-panel);
  border: 2px solid #e6e6e6;
  border-radius: 0.75rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.howler-banner {
  background: var(--howler-red);
  border-radius: 0.75rem;
  color: #fff;
  padding: 0.9rem 1rem;
}

.howler-banner-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.howler-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.howler-brand-large {
  font-size: 2rem;
}

.howl-text {
  white-space: pre-wrap;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f1f1f1;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  text-decoration: none;
  color: var(--howler-black);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

.user-chip img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.auth-shell {
  max-width: 760px;
}

.new-howl-panel {
  max-width: 760px;
}

.howler-navbar {
  background: var(--howler-red);
  border: 0;
}

.howler-nav-links {
  text-align: right;
}

.howler-nav-links .btn {
  margin: 0.2rem;
}

@media (max-width: 767px) {
  .howler-brand-large {
    font-size: 1.6rem;
  }
}

.btn {
  border-width: 0;
}

.btn-solid-red {
  background: var(--howler-red);
  color: #fff;
}

.btn-solid-red:hover,
.btn-solid-red:focus {
  background: var(--howler-red-dark);
  color: #fff;
}

.btn-solid-black {
  background: var(--howler-black);
  color: #fff;
}

.btn-solid-black:hover,
.btn-solid-black:focus {
  background: #2a2a2a;
  color: #fff;
}

.form-control:focus {
  border-color: var(--howler-red);
  box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.16);
}

.alert-danger {
  background: #fbe8ea;
  border-color: #f5c3c8;
  color: #61141b;
}