:root {
  --cream: #fff8fc;
  --pink: #ff8fb8;
  --rose: #ff6b9d;
  --berry: #ef5b8c;
  --lilac: #d4a5ff;
  --grape: #b57bff;
  --sky: #8ec5ff;
  --blue: #6aa8ff;
  --ink: #4a3a6b;
}

html,
body {
  height: 100%;
}

body.app-body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 65% 50% at 12% 18%, rgba(255, 143, 184, 0.5), transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 22%, rgba(142, 197, 255, 0.45), transparent 50%),
    radial-gradient(ellipse 60% 50% at 78% 82%, rgba(181, 123, 255, 0.4), transparent 52%),
    linear-gradient(155deg, #fff0f6 0%, #f3f0ff 40%, #eef6ff 70%, var(--cream) 100%);
  background-attachment: fixed;
}

.brand-script {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  background: linear-gradient(115deg, var(--rose) 0%, var(--lilac) 45%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rose);
}

.login-shell {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.login-panel {
  width: min(420px, 100%);
  padding: 2rem 1.75rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 40px rgba(106, 168, 255, 0.18);
}

.login-panel .brand-script {
  font-size: clamp(2.75rem, 10vw, 3.5rem);
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.btn-crmeee {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  background: linear-gradient(125deg, var(--rose) 0%, var(--grape) 50%, var(--blue) 100%);
  background-size: 160% 160%;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(181, 123, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.3s ease;
}

.btn-crmeee:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(106, 168, 255, 0.4);
}

.app-shell {
  min-height: 100%;
}

.app-topbar {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.app-topbar .brand-script {
  font-size: 1.75rem;
  line-height: 1;
}