/* LiverCare AI — Patient flow · Patient Login
   Values in reference px (approved design scaled to a 720 px canvas). */

.dr-page { --card-w: 555; --ref-h: 770; }

.pl-card { padding: calc(34 * var(--au)) calc(46 * var(--au)) calc(34 * var(--au)); }

.pl-head .dr-logo__mark { width: calc(42 * var(--au)); height: calc(33 * var(--au)); }
.pl-head__alt { font-size: calc(13.5 * var(--au)); color: var(--sub); }
.pl-head__alt a { font-size: calc(15.5 * var(--au)); }

/* top user icon */
.pl-avatar {
  display: grid;
  place-items: center;
  width: calc(114 * var(--au));
  height: calc(114 * var(--au));
  margin: calc(4 * var(--au)) auto 0;
  border-radius: 50%;
  color: var(--blue);
  background: radial-gradient(circle at 50% 45%, #eaf2fd 0%, #dce8f8 62%, #d3e3f7 100%);
  box-shadow:
    0 0 0 calc(7 * var(--au)) rgba(214, 229, 248, 0.45),
    0 calc(10 * var(--au)) calc(24 * var(--au)) rgba(22, 112, 240, 0.10);
}

.pl-avatar svg { width: calc(52 * var(--au)); height: calc(52 * var(--au)); }

.pl-title {
  margin-top: calc(6 * var(--au));
  font-size: calc(37 * var(--au));
  text-align: center;
}

.pl-sub {
  margin-top: calc(6 * var(--au));
  font-size: calc(17 * var(--au));
  text-align: center;
  color: var(--navy-2);
}

.pl-group--first { margin-top: calc(32 * var(--au)); }
.pl-group--pw { margin-top: calc(20 * var(--au)); }
.pl-group .dr-label { margin-bottom: calc(7 * var(--au)); font-size: calc(15.5 * var(--au)); }

.pl-field { --fh: 46; }
.pl-field .dr-ico { width: calc(22 * var(--au)); height: calc(22 * var(--au)); margin-inline-start: calc(17 * var(--au)); }
.pl-field input { font-size: calc(15 * var(--au)); padding-inline-start: calc(15 * var(--au)); }

.pl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(19 * var(--au));
}

.pl-remember { font-size: calc(15 * var(--au)); color: var(--navy-2); gap: calc(14 * var(--au)); }
.pl-remember input { width: calc(21 * var(--au)); height: calc(21 * var(--au)); }

.pl-forgot { font-size: calc(15 * var(--au)); }

.pl-submit { margin-top: calc(23 * var(--au)); }

.pl-btn { height: calc(51 * var(--au)); font-size: calc(17.5 * var(--au)); }

.pl-or .dr-or { margin-top: calc(19 * var(--au)); }
.pl-or .dr-or span { font-size: calc(13.5 * var(--au)); }
.pl-or .dr-btn--google {
  margin-top: calc(15 * var(--au));
  height: calc(48 * var(--au));
  font-size: calc(16.5 * var(--au));
}

.pl-foot {
  margin: calc(33 * var(--au)) 0 0;
  font-size: calc(15 * var(--au));
  text-align: center;
  color: var(--sub);
}

.pl-foot .dr-link { margin-inline-start: calc(6 * var(--au)); }

.pl-card .dr-alert { margin: calc(12 * var(--au)) 0 calc(4 * var(--au)); }

/* soft, slow "breathing" halo around the user icon */
@media (prefers-reduced-motion: no-preference) {
  .pl-avatar { animation: plHalo 5s ease-in-out 1.6s infinite; }
}

@keyframes plHalo {
  0%, 100% { box-shadow: 0 0 0 calc(7 * var(--au)) rgba(214, 229, 248, 0.45), 0 calc(10 * var(--au)) calc(24 * var(--au)) rgba(22, 112, 240, 0.10); }
  50%      { box-shadow: 0 0 0 calc(11 * var(--au)) rgba(214, 229, 248, 0.30), 0 calc(10 * var(--au)) calc(24 * var(--au)) rgba(22, 112, 240, 0.12); }
}

@media (max-width: 640px) {
  .pl-card { padding-top: 26px; padding-bottom: 26px; }
  .pl-title { font-size: 30px; }
  .pl-avatar { width: 96px; height: 96px; }
  .pl-avatar svg { width: 44px; height: 44px; }
}