/* PokeTradeBabes brand: shared by the business website and the bot dashboard. */
:root {
  --night: #0A0610;
  --plum: #150C21;
  --plum-2: #20132F;
  --plum-3: #2C1B40;
  --peach: #FFAE89;
  --pink: #F26BB5;
  --violet: #C04BF2;
  --text: #FAF0FF;
  --dim: #B7A5C9;
  --danger: #FF5C7A;
  --ok: #7FE0B0;
  --brand-gradient: linear-gradient(90deg, var(--peach) 0%, var(--pink) 50%, var(--violet) 100%);
  --script: 'Kaushan Script', 'Brush Script MT', cursive;
  --ui: 'Nunito', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

/* Night sky with faint embers, like the logo background */
.brand-bg {
  background-color: var(--night);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,174,137,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(242,107,181,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 72%, rgba(192,75,242,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 84%, rgba(255,174,137,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 58%, rgba(242,107,181,.4) 50%, transparent 51%),
    radial-gradient(60vw 50vh at 0% 0%, rgba(242,107,181,.10), transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(192,75,242,.12), transparent 70%);
  background-attachment: fixed;
}

/* ---------- The logo, rebuilt so it stays sharp at any size ---------- */
.ptb-logo {
  --size: 64px;
  display: inline-flex; align-items: center; gap: calc(var(--size) * 0.18);
  color: var(--pink); max-width: 100%;
}
.ptb-logo__side { display: flex; align-items: center; gap: calc(var(--size) * 0.12); flex: 1 1 calc(var(--size) * 2.4); min-width: 0; }
.ptb-logo__side--right { flex-direction: row-reverse; }
.ptb-logo__line {
  flex: 1; height: 2px; min-width: calc(var(--size) * 0.6); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--peach));
  box-shadow: 0 0 8px var(--pink);
}
.ptb-logo__side--right .ptb-logo__line { background: linear-gradient(270deg, transparent, var(--violet)); box-shadow: 0 0 8px var(--violet); }
.ptb-logo__spark { font-size: calc(var(--size) * 0.28); color: #FFE3F2; text-shadow: 0 0 6px var(--pink); line-height: 1; }
.ptb-logo__heart { width: calc(var(--size) * 0.36); height: calc(var(--size) * 0.36); flex: none; filter: drop-shadow(0 0 4px currentColor); }
.ptb-logo__side--left .ptb-logo__heart { color: var(--pink); }
.ptb-logo__side--right .ptb-logo__heart { color: var(--violet); }
.ptb-logo__word { position: relative; white-space: nowrap; padding: calc(var(--size) * 0.28) 0 calc(var(--size) * 0.26); }
.ptb-logo__text {
  font-family: var(--script); font-size: var(--size); line-height: 1; font-weight: 400;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--size) * 0.08) rgba(242,107,181,.65)) drop-shadow(0 0 calc(var(--size) * 0.3) rgba(192,75,242,.35));
  display: block;
}
.ptb-logo__crown {
  position: absolute; top: 0; left: 39%; width: calc(var(--size) * 0.5); height: calc(var(--size) * 0.36);
  color: #F7B98F; filter: drop-shadow(0 0 5px rgba(255,174,137,.8)); transform: rotate(-6deg);
}
.ptb-logo__swoosh { position: absolute; left: 8%; right: 4%; bottom: 0; height: calc(var(--size) * 0.3); width: 88%; overflow: visible; }

/* Compact version for headers and the dashboard sidebar */
.ptb-logo--compact .ptb-logo__side { display: none; }
@media (max-width: 560px) {
  .ptb-logo .ptb-logo__side { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ptb-logo--glow .ptb-logo__text { animation: ptb-flicker 6s ease-in-out 1s 1 both; }
  @keyframes ptb-flicker {
    0%, 100% { opacity: 1; }
    4% { opacity: .55; } 6% { opacity: 1; } 9% { opacity: .7; } 11% { opacity: 1; }
  }
}