/* Shared styling for the login and register pages — WhatsApp-matching palette (dark teal
   brand panel, WhatsApp green primary action). Extracted so no auth page carries its own
   inline <style> block. */
:root {
  --primary: #075e54;
  --primary-dark: #054c44;
  --accent: #25d366;
  --accent-dark: #1da851;
  --side-bg: #075e54;
  --border: #d1d7db;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh; margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  background: #fff;
}
.brand-panel {
  background: var(--side-bg);
  color: #ffffff;
  width: 42%;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  border-right: 1px solid var(--primary-dark);
  opacity: 0;
  transform: translateX(-16px);
  animation: auth-fade-in .5s ease-out forwards;
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(155deg, var(--accent), var(--primary));
  display: flex; align-items: center; justify-content: center;
}
.brand-panel h2 { color: #ffffff; font-weight: 700; font-size: 26px; margin: 1.5rem 0 .6rem; letter-spacing: -0.01em; }
.brand-panel p { color: #d7ece8; font-size: 14.5px; line-height: 1.6; max-width: 340px; }
.brand-foot { color: #a9d2cb; font-size: 12.5px; }
.brand-features { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 340px; }
.brand-features li {
  display: flex; align-items: flex-start; gap: .6rem;
  color: #e7f5f1; font-size: 13.5px; line-height: 1.5;
  margin-bottom: .85rem;
  opacity: 0; transform: translateX(-8px);
  animation: auth-fade-in .4s ease-out forwards;
}
.brand-features li:nth-child(1) { animation-delay: .18s; }
.brand-features li:nth-child(2) { animation-delay: .28s; }
.brand-features li:nth-child(3) { animation-delay: .38s; }
.brand-features li:nth-child(4) { animation-delay: .48s; }
.brand-features i {
  width: 18px; height: 18px; flex: none; margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37, 211, 102, .22); color: var(--accent);
  border-radius: 50%; font-size: 10px;
}
.capslock-warning {
  color: #b54708; font-size: 12px; margin-top: .4rem;
  display: flex; align-items: center;
}
.form-panel {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0;
  transform: translateY(12px);
  animation: auth-fade-in .5s ease-out .12s forwards;
}
.form-card { width: 100%; max-width: 360px; }
.form-card h1 { font-size: 21px; font-weight: 700; margin-bottom: .3rem; }
.form-card .lead { color: #667085; font-size: 13.5px; margin-bottom: 1.75rem; }
label.form-label { font-size: 12.5px; font-weight: 600; color: #3a4150; }
.form-control { border-color: var(--border); font-size: 13.5px; border-radius: 7px; padding: .55rem .75rem; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #d9fdd3; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.6rem; }
.password-toggle {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: #667085; cursor: pointer;
}
.password-toggle:hover { color: var(--primary); }
.btn-primary-custom {
  background: var(--accent); border: none; color: #052e19; font-weight: 700;
  font-size: 13.5px; border-radius: 7px; padding: .6rem 1rem; width: 100%;
  transition: background .15s ease;
}
.btn-primary-custom:hover { background: var(--accent-dark); color: #052e19; }
.alert { font-size: 13px; border-radius: 8px; }

@keyframes auth-fade-in {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-panel, .form-panel, .brand-features li { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 820px) { .brand-panel { display: none; } }