/* ── CDChoot – shared styles ── */
:root {
  --teal:     #00B4B0;
  --teal-dk:  #006B8A;
  --navy:     #0A2D5A;
  --navy-lt:  #1A4A80;
  --white:    #FFFFFF;
  --gray:     #F4F6F8;
  --gray-dk:  #CBD5E0;
  --shadow:   0 4px 20px rgba(0,0,0,.18);
  --radius:   14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--gray);
  color: var(--navy);
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }

.logo-img {
  max-width: 220px;
  width: 100%;
  display: block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .15s;
  letter-spacing: .4px;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary   { background: var(--teal);    color: var(--white); }
.btn-secondary { background: var(--navy);    color: var(--white); }
.btn-outline   { background: transparent; border: 2px solid var(--teal); color: var(--teal); }
.btn-danger    { background: #e63946; color: var(--white); }
.btn-lg { font-size: 1.2rem; padding: 18px 42px; border-radius: 18px; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.badge-teal  { background: var(--teal);   color: var(--white); }
.badge-navy  { background: var(--navy);   color: var(--white); }
.badge-green { background: #2dc653;       color: var(--white); }
.badge-red   { background: #e63946;       color: var(--white); }
.badge-gray  { background: var(--gray-dk); color: var(--navy); }

/* spinner */
.spinner {
  width: 48px; height: 48px;
  border: 5px solid var(--gray-dk);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* hidden helper */
.hidden { display: none !important; }

/* toast */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: var(--white);
  padding: 12px 28px; border-radius: 50px;
  font-weight: 600; font-size: .95rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
  z-index: 9999;
}
#toast.show { opacity: 1; }