*, *::before, *::after { box-sizing: border-box; }

:root {
  --pharma-navy-950: #061725;
  --pharma-navy-900: #082033;
  --pharma-navy-800: #0e304b;
  --pharma-blue: #2f80ed;
  --pharma-cyan: #36c7d5;
  --pharma-teal: #21b79f;
  --pharma-mint: #8ae2cf;
  --pharma-ice: #f4f9fc;
  --pharma-ink: #17324b;
  --pharma-muted: #6e8295;
  --pharma-line: #d9e6ee;
  --pharma-shadow: 0 30px 80px rgba(6, 31, 49, .16);
}

html { min-height: 100%; background: var(--pharma-navy-950); }
body.auth-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #eef6fa;
  color: var(--pharma-ink);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
body.auth-page::before {
  content: '';
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #21b79f 0%, #36c7d5 38%, #468cf2 72%, #8ae2cf 100%);
  box-shadow: 0 1px 18px rgba(54, 199, 213, .32);
}

.pharma-ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.pharma-ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: linear-gradient(rgba(30, 107, 145, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 107, 145, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to left, transparent 38%, #000 100%);
}
.pharma-orb { position: absolute; display: block; border-radius: 50%; filter: blur(1px); opacity: .62; }
.pharma-orb--one { width: 470px; height: 470px; top: -220px; right: 31%; background: radial-gradient(circle, rgba(54,199,213,.18), rgba(54,199,213,0) 67%); animation: pharma-float 13s ease-in-out infinite; }
.pharma-orb--two { width: 390px; height: 390px; bottom: -190px; right: -90px; background: radial-gradient(circle, rgba(33,183,159,.19), rgba(33,183,159,0) 68%); animation: pharma-float 16s ease-in-out -5s infinite reverse; }
.pharma-orb--three { width: 330px; height: 330px; top: 28%; left: -170px; background: radial-gradient(circle, rgba(70,140,242,.13), rgba(70,140,242,0) 70%); animation: pharma-float 14s ease-in-out -2s infinite; }

.pharma-molecule { position: absolute; width: 150px; height: 120px; opacity: .18; animation: molecule-drift 18s ease-in-out infinite; }
.pharma-molecule--one { top: 12%; right: 4%; }
.pharma-molecule--two { bottom: 8%; left: 4%; transform: scale(.78) rotate(35deg); animation-delay: -7s; }
.pharma-molecule i { position: absolute; width: 12px; height: 12px; border: 2px solid rgba(77,214,199,.88); border-radius: 50%; background: rgba(6,31,49,.65); box-shadow: 0 0 0 5px rgba(77,214,199,.05); }
.pharma-molecule i:nth-child(1) { top: 9px; right: 14px; }
.pharma-molecule i:nth-child(2) { top: 75px; right: 62px; width: 17px; height: 17px; }
.pharma-molecule i:nth-child(3) { top: 24px; left: 12px; width: 9px; height: 9px; }
.pharma-molecule b { position: absolute; height: 1px; transform-origin: right center; background: linear-gradient(90deg, rgba(77,214,199,.08), rgba(77,214,199,.95)); }
.pharma-molecule b:nth-of-type(1) { width: 72px; top: 52px; right: 20px; transform: rotate(38deg); }
.pharma-molecule b:nth-of-type(2) { width: 69px; top: 65px; right: 70px; transform: rotate(142deg); }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr);
}

.auth-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 72px) clamp(36px, 6vw, 92px);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 14%, rgba(54,199,213,.16), transparent 27rem),
    radial-gradient(circle at 88% 70%, rgba(33,183,159,.12), transparent 23rem),
    linear-gradient(145deg, #071826 0%, #0b2a42 54%, #0b3548 100%);
  color: #fff;
}
.auth-story::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(149,236,222,.20) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: .12;
  mask-image: radial-gradient(circle at 55% 48%, #000, transparent 68%);
}
.auth-story::after {
  content: '';
  position: absolute;
  width: 430px;
  height: 430px;
  left: -205px;
  bottom: -155px;
  border: 1px solid rgba(102,226,207,.11);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(102,226,207,.025), 0 0 0 116px rgba(102,226,207,.018), 0 0 0 176px rgba(102,226,207,.012);
  animation: orbital-breathe 8s ease-in-out infinite;
}
.story-brand, .story-content, .story-footnote { position: relative; z-index: 2; }
.story-brand { display: flex; align-items: center; gap: 13px; }
.story-brand__mark { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 15px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7); animation: logo-float 5s ease-in-out infinite; }
.story-brand__mark img { width: 47px; height: 47px; object-fit: contain; }
.story-brand__copy { display: grid; gap: 2px; }
.story-brand__copy strong { font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
.story-brand__copy small { color: rgba(211,238,242,.64); font-size: 8px; font-weight: 750; letter-spacing: 1.25px; direction: ltr; }

.story-content { max-width: 690px; margin: auto 0; padding: 52px 0 46px; }
.story-eyebrow { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 11px; border: 1px solid rgba(122,224,211,.2); border-radius: 999px; background: rgba(14,57,71,.46); color: #b9eee5; font-size: 11px; font-weight: 760; backdrop-filter: blur(8px); }
.story-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #66e2cf; box-shadow: 0 0 0 5px rgba(102,226,207,.10), 0 0 18px rgba(102,226,207,.5); animation: status-pulse 2.3s ease-in-out infinite; }
.story-content h1 { margin: 22px 0 16px; font-size: clamp(2.8rem, 5.4vw, 5.3rem); font-weight: 900; line-height: 1.14; letter-spacing: -2.3px; }
.story-content h1 span { color: #82e1d0; text-shadow: 0 7px 28px rgba(74,218,194,.11); }
.story-content > p { max-width: 640px; margin: 0; color: rgba(225,240,244,.76); font-size: clamp(13px, 1.1vw, 15px); line-height: 2.05; }

.pharma-pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 32px; }
.pharma-pillar { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.045); backdrop-filter: blur(8px); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.pharma-pillar:hover { border-color: rgba(118,225,211,.24); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.pharma-pillar > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(91,218,201,.11); color: #82dfd0; }
.pharma-pillar svg { width: 20px; height: 20px; }
.pharma-pillar div { min-width: 0; display: grid; gap: 2px; }
.pharma-pillar strong { color: #f3fbfc; font-size: 11px; white-space: nowrap; }
.pharma-pillar small { overflow: hidden; color: rgba(214,236,239,.54); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: rgba(217,237,240,.5); font-size: 9px; letter-spacing: .1px; }
.story-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #67dec9; box-shadow: 0 0 12px rgba(103,222,201,.5); }
.story-footnote i { opacity: .4; font-style: normal; }

.auth-panel {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(34px, 5vw, 74px);
  background: linear-gradient(155deg, rgba(248,252,254,.97), rgba(236,246,250,.98));
}
.auth-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(54,199,213,.11), transparent 20rem), radial-gradient(circle at 16% 88%, rgba(47,128,237,.07), transparent 18rem);
  pointer-events: none;
}
.auth-panel__glow { position: absolute; width: min(74%, 510px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(33,183,159,.12), transparent 67%); filter: blur(10px); animation: pharma-float 12s ease-in-out infinite reverse; }
.auth-card {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  padding: clamp(32px, 4vw, 48px);
  border: 1px solid rgba(201,220,231,.86);
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--pharma-shadow), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(22px) saturate(125%);
  animation: auth-card-enter .75s cubic-bezier(.2,.8,.2,1) both;
}
.auth-card::before { content: ''; position: absolute; inset: 0 auto auto 48px; width: 88px; height: 3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--pharma-teal), var(--pharma-cyan)); box-shadow: 0 5px 16px rgba(33,183,159,.24); }
.auth-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.35), transparent 28%); }
.auth-mobile-brand { display: none; }
.auth-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; padding: 7px 10px; border: 1px solid #dcebea; border-radius: 999px; background: #f5fbfa; color: #447267; font-size: 9px; font-weight: 800; }
.auth-badge__icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e1f6f1; color: #169b83; }
.auth-badge svg { width: 13px; height: 13px; }
.auth-title { position: relative; z-index: 1; margin: 0 0 6px; color: #102f49; font-size: clamp(1.7rem, 3vw, 2.15rem); font-weight: 900; letter-spacing: -.8px; }
.subtitle { position: relative; z-index: 1; margin: 0 0 30px; color: #72869a; font-size: 11px; line-height: 1.95; }

.auth-error { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 11px 12px; border: 1px solid #f0cdcd; border-radius: 13px; background: #fff7f7; color: #993f46; box-shadow: 0 8px 18px rgba(153,63,70,.05); }
.auth-error > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; background: #fde4e5; font-size: 12px; font-weight: 900; }
.auth-error div { display: grid; gap: 2px; }
.auth-error strong { font-size: 10px; }
.auth-error small { color: #ac686c; font-size: 9px; line-height: 1.7; }
#loginForm { position: relative; z-index: 2; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin: 0 0 8px; color: #38536b; font-size: 10px; font-weight: 800; }
.auth-input-shell { position: relative; }
.auth-input-icon { position: absolute; z-index: 2; top: 50%; right: 14px; width: 21px; height: 21px; display: grid; place-items: center; color: #7890a3; transform: translateY(-50%); pointer-events: none; transition: color .2s ease, transform .2s ease; }
.auth-input-icon svg { width: 18px; height: 18px; }
.form-group input {
  width: 100%;
  min-height: 52px;
  padding: 11px 46px 11px 14px;
  border: 1px solid #d5e2ea;
  border-radius: 14px;
  outline: 0;
  background: rgba(249,252,253,.92);
  color: #17324b;
  caret-color: var(--pharma-teal);
  font: 500 12px 'Vazirmatn', Tahoma, sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.auth-input-shell--password input { padding-left: 48px; }
.form-group input::placeholder { color: #9aabba; }
.form-group input:hover { border-color: #c4d7e2; background: #fff; }
.form-group input:focus { border-color: rgba(33,183,159,.66); background: #fff; box-shadow: 0 0 0 4px rgba(33,183,159,.09), 0 10px 24px rgba(26,81,104,.06); transform: translateY(-1px); }
.auth-input-shell:focus-within .auth-input-icon { color: #1aa78f; transform: translateY(-50%) scale(1.06); }
.password-toggle { position: absolute; z-index: 3; top: 50%; left: 10px; width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #8296a8; cursor: pointer; transform: translateY(-50%); transition: background .18s, color .18s; }
.password-toggle:hover { background: #edf6f7; color: #2c7f78; }
.password-toggle svg { width: 17px; height: 17px; }
.password-toggle .eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }

.btn {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 7px;
  padding: 10px 18px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(110deg, #0f5d79 0%, #14869a 48%, #1aaa94 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(18,129,143,.22), inset 0 1px 0 rgba(255,255,255,.2);
  cursor: pointer;
  font: 800 12px 'Vazirmatn', Tahoma, sans-serif;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn::before { content: ''; position: absolute; inset: -80% auto -80% -22%; width: 22%; background: rgba(255,255,255,.22); transform: skewX(-18deg); transition: left .55s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(18,129,143,.28), inset 0 1px 0 rgba(255,255,255,.2); filter: saturate(1.06); }
.btn:hover::before { left: 112%; }
.btn:active { transform: translateY(0); }
.btn-arrow { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.12); transition: transform .22s ease; }
.btn:hover .btn-arrow { transform: translateX(-3px); }
.btn-arrow svg { width: 15px; height: 15px; }
.btn-loader { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-copy, .btn.is-loading .btn-arrow { display: none; }
.btn.is-loading .btn-loader { display: block; }

.auth-trust { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #e8eff3; color: #8598a8; }
.auth-trust > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; background: #eff8f6; color: #37947f; }
.auth-trust svg { width: 15px; height: 15px; }
.auth-trust p { margin: 0; font-size: 8.5px; line-height: 1.7; }
.auth-copyright { position: absolute; z-index: 2; bottom: 18px; margin: 0; color: #9aabb8; font-size: 8px; text-align: center; }

.btn:focus-visible, input:focus-visible, .password-toggle:focus-visible { outline: 3px solid rgba(33,183,159,.22); outline-offset: 3px; }

@keyframes auth-card-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pharma-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0); } }
@keyframes molecule-drift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(16px,-18px,0) rotate(7deg); } }
@keyframes logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes orbital-breathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes status-pulse { 0%,100% { box-shadow: 0 0 0 5px rgba(102,226,207,.10), 0 0 10px rgba(102,226,207,.3); } 50% { box-shadow: 0 0 0 8px rgba(102,226,207,.04), 0 0 20px rgba(102,226,207,.6); } }
@keyframes button-spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .auth-shell { grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr); }
  .auth-story { padding-inline: 42px; }
  .story-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
  .pharma-pillars { grid-template-columns: 1fr; max-width: 350px; }
}

@media (max-width: 820px) {
  body.auth-page { background: linear-gradient(160deg, #071a2a, #0d3b4c 48%, #edf7f9 48.1%, #f4f9fb 100%); }
  .auth-shell { display: block; min-height: 100vh; padding: 28px 18px 38px; }
  .auth-story { display: none; }
  .auth-panel { min-height: calc(100vh - 66px); padding: 34px 0 56px; background: transparent; }
  .auth-panel::before { display: none; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
  .auth-mobile-brand > span { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #dce8ee; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(11,54,74,.09); }
  .auth-mobile-brand img { width: 39px; height: 39px; object-fit: contain; }
  .auth-mobile-brand div { display: grid; gap: 1px; }
  .auth-mobile-brand strong { color: #15344c; font-size: 13px; }
  .auth-mobile-brand small { color: #8499a9; font-size: 7px; letter-spacing: .8px; direction: ltr; }
  .auth-card { border-radius: 24px; }
  .auth-copyright { bottom: 10px; }
  .pharma-ambient::before { mask-image: none; opacity: .14; }
}

@media (max-width: 480px) {
  .auth-shell { padding-inline: 13px; }
  .auth-panel { padding-top: 25px; }
  .auth-card { padding: 28px 22px; border-radius: 22px; }
  .auth-title { font-size: 1.65rem; }
  .subtitle { margin-bottom: 24px; font-size: 10px; }
  .form-group input { min-height: 50px; }
  .btn { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =========================================================
   DORSA PHARMA EXPERIENCE V2 — interaction + resilience
   ========================================================= */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.auth-panel { grid-template-rows: minmax(0, 1fr) auto; align-items: center; }
.auth-card { align-self: center; isolation: isolate; }
.auth-card::after {
  z-index: -1;
  background:
    radial-gradient(230px circle at var(--spot-x, 72%) var(--spot-y, 16%), rgba(54,199,213,.13), transparent 68%),
    linear-gradient(125deg, rgba(255,255,255,.38), transparent 28%);
}
.auth-copyright { position: relative; bottom: auto; align-self: end; margin: 18px 0 0; }

.story-biomed { position: absolute; z-index: 0; width: 210px; height: 160px; left: clamp(28px,4vw,70px); bottom: 90px; opacity: .30; pointer-events: none; }
.story-capsule { position: absolute; width: 104px; height: 43px; left: 3px; bottom: 9px; overflow: hidden; border: 1px solid rgba(135,232,218,.38); border-radius: 999px; transform: rotate(-24deg); box-shadow: 0 0 34px rgba(78,218,198,.08); }
.story-capsule::before, .story-capsule::after { content: ''; position: absolute; inset-block: 0; width: 50%; }
.story-capsule::before { right: 0; background: rgba(79,216,196,.22); }
.story-capsule::after { left: 0; background: rgba(71,142,231,.18); }
.story-capsule i { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(203,251,244,.36); }
.story-helix { position: absolute; width: 110px; height: 145px; top: 0; right: 0; }
.story-helix i { position: absolute; right: 50%; width: 9px; height: 9px; border: 1px solid rgba(132,231,217,.68); border-radius: 50%; background: rgba(7,31,47,.62); box-shadow: 0 0 11px rgba(75,221,201,.13); animation: helix-node 4.8s ease-in-out infinite; }
.story-helix i::after { content: ''; position: absolute; top: 4px; right: 8px; width: 42px; height: 1px; transform-origin: right; background: linear-gradient(90deg, rgba(132,231,217,.08), rgba(132,231,217,.45)); }
.story-helix i:nth-child(1){top:2px;transform:translateX(-22px)} .story-helix i:nth-child(2){top:17px;transform:translateX(9px);animation-delay:-.45s} .story-helix i:nth-child(3){top:32px;transform:translateX(25px);animation-delay:-.9s} .story-helix i:nth-child(4){top:47px;transform:translateX(4px);animation-delay:-1.35s} .story-helix i:nth-child(5){top:62px;transform:translateX(-24px);animation-delay:-1.8s} .story-helix i:nth-child(6){top:77px;transform:translateX(-9px);animation-delay:-2.25s} .story-helix i:nth-child(7){top:92px;transform:translateX(22px);animation-delay:-2.7s} .story-helix i:nth-child(8){top:107px;transform:translateX(18px);animation-delay:-3.15s} .story-helix i:nth-child(9){top:122px;transform:translateX(-13px);animation-delay:-3.6s} .story-helix i:nth-child(10){top:137px;transform:translateX(-25px);animation-delay:-4.05s}

.caps-lock-warning { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; color: #ad6b2c; font-size: 9px; font-weight: 700; }
.caps-lock-warning[hidden] { display: none; }
.caps-lock-warning > span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; background: #fff3de; color: #a96120; font-size: 10px; }

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus { -webkit-text-fill-color: #17324b; box-shadow: 0 0 0 1000px #f9fcfd inset, 0 0 0 4px rgba(33,183,159,.08); transition: background-color 9999s ease-out 0s; }
.btn:disabled { cursor: wait; opacity: .96; }

body.auth-page.dark-mode .auth-panel { background: linear-gradient(155deg, #0a2233, #0d2b3c); }
body.auth-page.dark-mode .auth-panel::before { background: radial-gradient(circle at 78% 18%, rgba(54,199,213,.13), transparent 20rem), radial-gradient(circle at 16% 88%, rgba(47,128,237,.09), transparent 18rem); }
body.auth-page.dark-mode .auth-card { border-color: rgba(116,166,183,.23); background: rgba(9,35,51,.88); box-shadow: 0 30px 80px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04); }
body.auth-page.dark-mode .auth-title { color: #f3fbfc; }
body.auth-page.dark-mode .subtitle { color: #9cb3c2; }
body.auth-page.dark-mode .auth-badge { border-color: rgba(86,182,172,.22); background: rgba(38,142,133,.10); color: #9cd9d0; }
body.auth-page.dark-mode .form-group label { color: #b4c7d3; }
body.auth-page.dark-mode .form-group input { border-color: rgba(123,163,180,.24); background: rgba(4,26,40,.68); color: #edf8fa; }
body.auth-page.dark-mode .form-group input::placeholder { color: #6f899a; }
body.auth-page.dark-mode .form-group input:hover, body.auth-page.dark-mode .form-group input:focus { background: rgba(6,31,46,.92); }
body.auth-page.dark-mode .auth-trust { border-top-color: rgba(132,169,183,.17); color: #809aaa; }
body.auth-page.dark-mode .auth-trust > span { background: rgba(38,151,137,.12); color: #76d9c9; }
body.auth-page.dark-mode .auth-copyright { color: #6f8797; }
body.auth-page.dark-mode .password-toggle:hover { background: rgba(45,143,138,.12); color: #76d9c9; }
body.auth-page.dark-mode .form-group input:-webkit-autofill { -webkit-text-fill-color: #edf8fa; box-shadow: 0 0 0 1000px #092436 inset, 0 0 0 4px rgba(33,183,159,.08); }

@keyframes helix-node { 0%,100% { margin-right: -4px; opacity: .55; } 50% { margin-right: 5px; opacity: 1; } }

@media (max-height: 760px) and (min-width: 821px) {
  .auth-story { padding-block: 28px; }
  .story-content h1 { font-size: clamp(2.5rem,5vw,4.1rem); }
  .story-content p { margin-top: 13px; }
  .pharma-pillars { margin-top: 20px; }
  .auth-panel { padding-block: 24px 14px; }
  .auth-card { padding-block: 29px; }
  .auth-copyright { margin-top: 10px; }
}

@media (max-width: 820px) {
  .story-biomed { display: none; }
  .auth-panel { grid-template-rows: 1fr auto; }
  .auth-copyright { margin-top: 13px; }
}

@media (hover: none) {
  .pharma-pillar:hover, .btn:hover { transform: none; }
}

@supports not (backdrop-filter: blur(2px)) {
  .auth-card { background: #fff; }
  body.auth-page.dark-mode .auth-card { background: #0c293a; }
}


/* =========================================================
   DORSA CORPORATE BRAND V3 — derived from the official logo
   Primary: #353E66 | Accent: #BA20A6
   ========================================================= */
:root {
  --dorsa-brand-navy: #353E66;
  --dorsa-brand-navy-deep: #252B4A;
  --dorsa-brand-navy-soft: #EEF0F7;
  --dorsa-brand-magenta: #BA20A6;
  --dorsa-brand-magenta-dark: #971685;
  --dorsa-brand-magenta-soft: #F9E8F7;
  --pharma-navy-950: #202640;
  --pharma-navy-900: #2A3153;
  --pharma-navy-800: #353E66;
  --pharma-blue: #515D91;
  --pharma-cyan: #C447B1;
  --pharma-teal: #BA20A6;
  --pharma-mint: #E29AD8;
  --pharma-ice: #F8F7FB;
  --pharma-ink: #2A3153;
  --pharma-muted: #68708A;
  --pharma-line: #E0DEEA;
  --pharma-shadow: 0 30px 80px rgba(39, 35, 72, .18);
}
html { background: var(--dorsa-brand-navy-deep); }
body.auth-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(186,32,166,.095), transparent 25rem),
    radial-gradient(circle at 92% 84%, rgba(53,62,102,.10), transparent 28rem),
    linear-gradient(180deg, #F2F1F7 0%, #FBFAFC 48%, #F5F3F8 100%);
  color: #2A3153;
}
body.auth-page::before {
  background: linear-gradient(90deg, #353E66 0 63%, #BA20A6 63% 100%);
  box-shadow: 0 1px 18px rgba(186,32,166,.22);
}
.pharma-ambient::before {
  background-image: linear-gradient(rgba(53,62,102,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(53,62,102,.04) 1px, transparent 1px);
}
.pharma-orb--one { background: radial-gradient(circle, rgba(186,32,166,.16), rgba(186,32,166,0) 68%); }
.pharma-orb--two { background: radial-gradient(circle, rgba(53,62,102,.17), rgba(53,62,102,0) 68%); }
.pharma-orb--three { background: radial-gradient(circle, rgba(186,32,166,.10), rgba(186,32,166,0) 68%); }
.auth-story {
  background:
    radial-gradient(circle at 18% 16%, rgba(186,32,166,.22), transparent 26rem),
    radial-gradient(circle at 84% 75%, rgba(255,255,255,.07), transparent 23rem),
    linear-gradient(145deg, #272D4D 0%, #353E66 58%, #414A74 100%);
}
.auth-story::before { border-color: rgba(230,154,216,.15); box-shadow: 0 0 0 55px rgba(186,32,166,.035), 0 0 0 110px rgba(255,255,255,.018); }
.story-brand__mark {
  width: 148px;
  height: 64px;
  padding: 7px 11px;
  border-color: rgba(255,255,255,.22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,18,45,.2);
}
.story-brand__mark img { width: 100% !important; height: 100% !important; object-fit: contain; }
.story-brand__copy strong { color: #fff; }
.story-brand__copy small { color: #E9C3E5; }
.story-eyebrow { color: #F1D4ED; }
.story-eyebrow i { background: #E567D3; box-shadow: 0 0 0 5px rgba(186,32,166,.12), 0 0 18px rgba(229,103,211,.4); }
.story-content h1 span { color: #F18DDF; }
.story-content > p { color: rgba(247,244,250,.76); }
.pharma-pillar { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
.pharma-pillar > span { background: rgba(186,32,166,.16); color: #F09CE3; }
.story-capsule { border-color: rgba(232,144,219,.30); }
.story-capsule::before { background: rgba(186,32,166,.18); }
.story-capsule::after { background: rgba(255,255,255,.08); }
.story-helix i { border-color: rgba(240,156,227,.55); }
.story-helix i::after { background: linear-gradient(90deg, rgba(240,156,227,.06), rgba(240,156,227,.38)); }
.auth-card { border-color: #E3DFEA; box-shadow: 0 28px 70px rgba(43,39,77,.14); }
.auth-kicker { color: #9B238D; background: #FAEDF8; border-color: #F0CDEB; }
.auth-title { color: #2B3152; }
.subtitle { color: #71758B; }
.form-group label { color: #4D546F; }
.form-group input { border-color: #DCD9E6; background: #FCFBFD; color: #272D4D; }
.form-group input:hover { border-color: #BFC0D1; }
.form-group input:focus { border-color: #BA20A6; box-shadow: 0 0 0 4px rgba(186,32,166,.11); background: #fff; }
.password-toggle { color: #69708A; }
.password-toggle:hover { color: #BA20A6; background: #F9E8F7; }
.btn {
  background: linear-gradient(110deg, #353E66 0%, #414A77 52%, #BA20A6 150%);
  box-shadow: 0 12px 26px rgba(53,62,102,.24);
}
.btn:hover { background: linear-gradient(110deg, #2E365B 0%, #3D4672 46%, #BA20A6 145%); box-shadow: 0 16px 32px rgba(53,62,102,.3); }
.btn::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.security-note i, .login-footnote i { color: #BA20A6; }
.auth-card a, .auth-card button:focus-visible, .form-group input:focus-visible { outline-color: rgba(186,32,166,.34); }

@media (max-width: 960px) {
  .story-brand__mark { width: 124px; height: 56px; }
}
@media (max-width: 640px) {
  .story-brand__mark { width: 112px; height: 52px; }
}

/* Dorsa-brand recolor for pharmaceutical ambient artwork. */
.pharma-molecule i { border-color: rgba(232,104,213,.82); background: rgba(37,43,74,.72); box-shadow: 0 0 0 5px rgba(186,32,166,.055); }
.pharma-molecule b { background: linear-gradient(90deg, rgba(186,32,166,.08), rgba(232,104,213,.92)); }

/* DORSA DELIGHT MOTION V4 */
body.auth-page {
  --dorsa-motion-x: 0px;
  --dorsa-motion-y: 0px;
}
.auth-story { overflow: hidden; }
.story-brand { animation: dorsa-brand-arrive .9s cubic-bezier(.16,1,.3,1) .05s both; }
.story-eyebrow { animation: dorsa-copy-arrive .72s cubic-bezier(.16,1,.3,1) .18s both; }
.story-content h1 { animation: dorsa-title-arrive .88s cubic-bezier(.16,1,.3,1) .24s both; }
.story-content > p { animation: dorsa-copy-arrive .78s cubic-bezier(.16,1,.3,1) .34s both; }
.story-biomed { animation: dorsa-biomed-arrive 1.05s cubic-bezier(.16,1,.3,1) .4s both; transition: transform .22s ease-out; }
.pharma-pillars { animation: dorsa-copy-arrive .82s cubic-bezier(.16,1,.3,1) .48s both; }
.story-footnote { animation: dorsa-copy-arrive .75s cubic-bezier(.16,1,.3,1) .58s both; }
.auth-card { animation: dorsa-login-card-arrive .9s cubic-bezier(.16,1,.3,1) .14s both; }
.auth-copyright { animation: dorsa-copy-arrive .72s ease .55s both; }

body.auth-page.motion-enhanced .story-biomed {
  translate: var(--dorsa-motion-x) var(--dorsa-motion-y);
}
body.auth-page.motion-enhanced .pharma-molecule--one {
  translate: var(--dorsa-motion-back-x) var(--dorsa-motion-back-y);
}
body.auth-page.motion-enhanced .pharma-molecule--two {
  translate: var(--dorsa-motion-front-x) var(--dorsa-motion-front-y);
}

.story-brand__mark {
  animation: dorsa-logo-breathe 5.6s ease-in-out 1.2s infinite;
  will-change: transform, box-shadow;
}
.story-brand__mark::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(232,108,213,.0);
  pointer-events: none;
  animation: dorsa-logo-halo 4.8s ease-in-out 1.5s infinite;
}
.story-eyebrow i, .story-status-dot {
  animation: dorsa-magenta-pulse 2.8s ease-in-out infinite;
}
.story-content h1 span {
  background: linear-gradient(90deg,#F18DDF 0%,#fff 48%,#E567D3 76%,#F18DDF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dorsa-text-glint 7s ease-in-out 1.4s infinite;
}
.story-capsule { animation: dorsa-capsule-float 7.8s ease-in-out infinite; }
.story-helix { animation: dorsa-helix-drift 9.5s ease-in-out infinite; }
.pharma-pillar { transition: transform .32s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pharma-pillar:hover {
  transform: translateY(-5px) scale(1.018);
  border-color: rgba(229,103,211,.30);
  background: rgba(255,255,255,.095);
  box-shadow: 0 16px 32px rgba(17,18,45,.12);
}
.pharma-pillar:hover > span { animation: dorsa-icon-pop .58s cubic-bezier(.16,1,.3,1); }

.auth-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,45%), rgba(186,32,166,.055), transparent 64%);
  opacity: .9;
  transition: opacity .25s ease;
}
.auth-card > * { position: relative; z-index: 1; }
.auth-input-shell { transition: transform .22s ease, filter .22s ease; }
.form-group:focus-within .auth-input-shell { transform: translateY(-2px); filter: drop-shadow(0 8px 15px rgba(53,62,102,.075)); }
.form-group:focus-within .auth-input-icon { animation: dorsa-input-icon .45s cubic-bezier(.16,1,.3,1); color: #BA20A6; }

.btn { isolation: isolate; }
.btn::before { animation: dorsa-button-sheen 5.8s ease-in-out 1.8s infinite; }
.btn:active { transform: translateY(0) scale(.985); }
.btn .btn-arrow { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .btn-arrow { transform: translateX(-4px); }
.btn-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  pointer-events: none;
  animation: dorsa-ripple .65s ease-out forwards;
}

@keyframes dorsa-brand-arrive { from { opacity: 0; transform: translateY(-18px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dorsa-copy-arrive { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dorsa-title-arrive { from { opacity: 0; transform: translateY(28px) scale(.965); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dorsa-biomed-arrive { from { opacity: 0; transform: translate3d(-26px,22px,0) rotate(-4deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes dorsa-login-card-arrive { 0% { opacity: 0; transform: translateY(28px) scale(.965); filter: blur(8px); } 68% { opacity: 1; transform: translateY(-3px) scale(1.004); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes dorsa-logo-breathe { 0%,100% { transform: translateY(0) scale(1); box-shadow: 0 12px 28px rgba(17,18,45,.2); } 50% { transform: translateY(-4px) scale(1.015); box-shadow: 0 18px 38px rgba(186,32,166,.19); } }
@keyframes dorsa-logo-halo { 0%,100% { inset: -2px; opacity: 0; border-color: rgba(232,108,213,0); } 45% { inset: -7px; opacity: .8; border-color: rgba(232,108,213,.25); } 70% { inset: -10px; opacity: 0; } }
@keyframes dorsa-magenta-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(186,32,166,.08),0 0 8px rgba(229,103,211,.18); } 50% { box-shadow: 0 0 0 8px rgba(186,32,166,.025),0 0 22px rgba(229,103,211,.42); } }
@keyframes dorsa-text-glint { 0%,65%,100% { background-position: 100% 50%; } 82% { background-position: 0% 50%; } }
@keyframes dorsa-capsule-float { 0%,100% { transform: translate3d(0,0,0) rotate(-14deg); } 50% { transform: translate3d(9px,-12px,0) rotate(-8deg); } }
@keyframes dorsa-helix-drift { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-7px,-10px,0) rotate(2deg); } }
@keyframes dorsa-icon-pop { 0% { transform: scale(1) rotate(0); } 55% { transform: scale(1.14) rotate(-5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes dorsa-input-icon { 0% { transform: scale(.86); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes dorsa-button-sheen { 0%,72%,100% { left: -28%; opacity: 0; } 78% { opacity: .9; } 91% { left: 116%; opacity: .7; } 92% { opacity: 0; } }
@keyframes dorsa-ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(32); opacity: 0; } }

@media (hover: none), (pointer: coarse) {
  .pharma-pillar:hover { transform: none; box-shadow: none; }
  .story-brand__mark { animation-duration: 8s; }
}
@media (prefers-reduced-motion: reduce) {
  .story-brand, .story-eyebrow, .story-content h1, .story-content > p, .story-biomed, .pharma-pillars, .story-footnote, .auth-card, .auth-copyright,
  .story-brand__mark, .story-brand__mark::after, .story-eyebrow i, .story-status-dot, .story-content h1 span, .story-capsule, .story-helix, .btn::before {
    animation: none !important;
  }
  body.auth-page.motion-enhanced .story-biomed, body.auth-page.motion-enhanced .pharma-molecule { translate: 0 0 !important; }
}


/* =========================================================
   DORSA VIVID BRAND PALETTE
   Dorsa navy and magenta match the portal and account shell.
   ========================================================= */
:root {
  --dorsa-brand-navy: #353E66;
  --dorsa-brand-navy-deep: #202858;
  --dorsa-brand-navy-mid: #384BC0;
  --dorsa-brand-navy-soft: #E6EDFF;
  --dorsa-brand-magenta: #BA20A6;
  --dorsa-brand-magenta-soft: #F8EDF6;
  --pharma-navy-950: #202541;
  --pharma-navy-900: #293052;
  --pharma-navy-800: #353E66;
  --pharma-blue: #3157CC;
  --pharma-cyan: #537BEB;
  --pharma-teal: #3157CC;
  --pharma-mint: #C8CDE1;
  --pharma-ice: #F7F8FB;
  --pharma-ink: #293052;
  --pharma-muted: #69718A;
  --pharma-line: #DEE1EB;
  --pharma-shadow: 0 30px 80px rgba(37,43,74,.18);
}
html { background:#202541; }
body.auth-page {
  background:
    radial-gradient(circle at 8% 10%, rgba(53,62,102,.14), transparent 28rem),
    radial-gradient(circle at 94% 84%, rgba(49,87,204,.16), transparent 30rem),
    radial-gradient(circle at 78% 16%, rgba(186,32,166,.04), transparent 17rem),
    linear-gradient(180deg,#EAF0FF 0%,#FAFAFC 50%,#F4F5F9 100%);
  color:#293052;
}
body.auth-page::before {
  background:linear-gradient(90deg,#202858 0%,#353E66 52%,#384BC0 92%,#BA20A6 100%);
  box-shadow:0 1px 18px rgba(53,62,102,.24);
}
.pharma-ambient::before { background-image:linear-gradient(rgba(53,62,102,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(53,62,102,.045) 1px,transparent 1px); }
.pharma-orb--one { background:radial-gradient(circle,rgba(53,62,102,.18),rgba(53,62,102,0) 68%); }
.pharma-orb--two { background:radial-gradient(circle,rgba(70,81,124,.16),rgba(70,81,124,0) 68%); }
.pharma-orb--three { background:radial-gradient(circle,rgba(186,32,166,.06),rgba(186,32,166,0) 68%); }
.auth-story {
  background:
    radial-gradient(circle at 17% 15%,rgba(83,123,235,.32),transparent 25rem),
    radial-gradient(circle at 84% 76%,rgba(255,255,255,.055),transparent 24rem),
    radial-gradient(circle at 72% 20%,rgba(186,32,166,.08),transparent 16rem),
    linear-gradient(145deg,#222844 0%,#293C8A 42%,#304CB2 70%,#3157CC 100%);
}
.auth-story::before { border-color:rgba(194,200,226,.13); box-shadow:0 0 0 55px rgba(83,96,145,.035),0 0 0 110px rgba(255,255,255,.015); }
.story-brand__copy small { color:#CDD2E7; }
.story-eyebrow { color:#DDE1EF; }
.story-eyebrow i { background:#BA20A6; box-shadow:0 0 0 4px rgba(186,32,166,.07),0 0 12px rgba(186,32,166,.16); }
.story-content h1 span {
  color:#E5E8F4;
  background:linear-gradient(90deg,#D9E2FA 0%,#fff 46%,#B8C8F0 74%,#E3E9FA 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.story-content > p { color:rgba(245,246,251,.78); }
.pharma-pillar { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.pharma-pillar > span { background:#3157CC; color:#fff; }
.pharma-pillar:hover { border-color:rgba(174,184,219,.28); background:rgba(255,255,255,.085); box-shadow:0 16px 32px rgba(20,24,50,.15); }
.story-capsule { border-color:rgba(176,184,216,.30); }
.story-capsule::before { background:rgba(83,96,145,.22); }
.story-capsule::after { background:rgba(255,255,255,.075); }
.story-capsule i { background:rgba(186,32,166,.16); }
.story-helix i { border-color:rgba(176,186,220,.56); }
.story-helix i::after { background:linear-gradient(90deg,rgba(165,175,212,.06),rgba(165,175,212,.40)); }
.pharma-molecule i { border-color:rgba(142,154,198,.78); background:rgba(37,43,74,.74); box-shadow:0 0 0 5px rgba(94,106,154,.06); }
.pharma-molecule b { background:linear-gradient(90deg,rgba(95,107,156,.08),rgba(151,163,207,.88)); }
.auth-card { border-color:#E0E1EA; box-shadow:0 28px 70px rgba(37,43,74,.14); }
.auth-kicker { color:#353E66; background:#E6EDFF; border-color:#D9DCE8; }
.auth-title { color:#293052; }
.subtitle { color:#6B7289; }
.form-group label { color:#4D5570; }
.form-group input { border-color:#D9DCE7; background:#FCFCFD; color:#272D4D; }
.form-group input:hover { border-color:#B8BDD0; }
.form-group input:focus { border-color:#3157CC; box-shadow:0 0 0 4px rgba(53,62,102,.11); }
.password-toggle:hover { color:#353E66; background:#E6EDFF; }
.btn { background:linear-gradient(110deg,#202858 0%,#304CB2 55%,#3157CC 100%); box-shadow:0 12px 26px rgba(53,62,102,.24); }
.btn:hover { background:linear-gradient(110deg,#202640 0%,#293C8A 52%,#2545AD 100%); box-shadow:0 17px 34px rgba(53,62,102,.31); }
.security-note i, .login-footnote i { color:#3157CC; }
.auth-card a, .auth-card button:focus-visible, .form-group input:focus-visible { outline-color:rgba(53,62,102,.34); }
.auth-card::after { background:radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,45%),rgba(53,62,102,.07),transparent 66%); }
.form-group:focus-within .auth-input-icon { color:#384BC0; }
.story-brand__mark::after { border-color:rgba(121,133,180,.0); animation:dorsa-violet-logo-halo 4.8s ease-in-out 1.5s infinite; }
.story-eyebrow i, .story-status-dot { animation:dorsa-violet-pulse 2.8s ease-in-out infinite; }
@keyframes dorsa-violet-logo-halo { 0%,100% { box-shadow:0 0 0 0 rgba(83,96,145,0); border-color:rgba(121,133,180,0); } 50% { box-shadow:0 0 0 7px rgba(83,96,145,.045),0 0 24px rgba(83,96,145,.14); border-color:rgba(142,154,198,.18); } }
@keyframes dorsa-violet-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 4px rgba(186,32,166,.08),0 0 10px rgba(186,32,166,.10); } 50% { transform:scale(1.10); box-shadow:0 0 0 7px rgba(186,32,166,.04),0 0 15px rgba(186,32,166,.16); } }
@keyframes dorsa-logo-breathe { 0%,100% { transform:translateY(0) scale(1); box-shadow:0 12px 28px rgba(23,26,55,.20); } 50% { transform:translateY(-3px) scale(1.012); box-shadow:0 18px 38px rgba(53,62,102,.24); } }
body.auth-page.dark-mode { background:radial-gradient(circle at 10% 8%,rgba(83,96,145,.16),transparent 24rem),linear-gradient(180deg,#1D223A,#202858); }
body.auth-page.dark-mode .auth-card { border-color:rgba(132,143,184,.20); background:rgba(31,36,61,.92); box-shadow:0 30px 72px rgba(8,10,24,.30); }
body.auth-page.dark-mode .auth-title { color:#F3F4F9; }
body.auth-page.dark-mode .subtitle, body.auth-page.dark-mode .security-note { color:#B6BCD3; }
body.auth-page.dark-mode .form-group label { color:#D0D4E3; }
body.auth-page.dark-mode .form-group input { border-color:#414A6E; background:#272D4B; color:#F5F6FA; }
body.auth-page.dark-mode .form-group input:focus { border-color:#D76BC7; box-shadow:0 0 0 4px rgba(106,119,168,.15); }

/* Executive Control Tower palette for the public entry page. */
html { background: var(--dorsa-primary-active); }
body.auth-page { color: var(--dorsa-text-primary); background: radial-gradient(circle at 8% 10%,rgba(49,92,145,.08),transparent 28rem),linear-gradient(180deg,#eef2f7,#fafbfc 50%,var(--dorsa-bg)); }
body.auth-page::before { background: linear-gradient(90deg,var(--dorsa-primary-active),var(--dorsa-primary) 65%,#6f8fb9); box-shadow:0 1px 18px rgba(49,92,145,.2); }
.pharma-orb--one { background:radial-gradient(circle,rgba(49,92,145,.13),transparent 68%); }
.pharma-orb--two { background:radial-gradient(circle,rgba(47,118,98,.09),transparent 68%); }
.pharma-orb--three { background:radial-gradient(circle,rgba(111,143,185,.10),transparent 68%); }
.auth-story { background:radial-gradient(circle at 17% 15%,rgba(111,143,185,.2),transparent 25rem),linear-gradient(145deg,var(--dorsa-primary-active),#294f7e 62%,var(--dorsa-primary)); }
.story-eyebrow i,.story-status-dot { background:var(--dorsa-accent); animation:none; }
.pharma-pillar > span { background:var(--dorsa-primary); }
.story-capsule i { background:rgba(47,118,98,.18); }
.auth-card { border-color:var(--dorsa-border); box-shadow:0 28px 70px rgba(32,63,101,.11); }
.auth-kicker,.auth-badge { color:var(--dorsa-primary); background:var(--dorsa-primary-soft); border-color:var(--dorsa-border); }
.auth-title { color:var(--dorsa-text-primary); }
.subtitle { color:var(--dorsa-text-muted); }
.form-group label { color:var(--dorsa-text-secondary); }
.form-group input { border-color:var(--dorsa-border); color:var(--dorsa-text-primary); }
.form-group input:focus { border-color:var(--dorsa-primary); box-shadow:var(--dorsa-focus); }
.form-group:focus-within .auth-input-icon { color:var(--dorsa-primary); }
.password-toggle:hover { color:var(--dorsa-primary); background:var(--dorsa-primary-soft); }
.btn,.btn:hover { background:linear-gradient(110deg,var(--dorsa-primary-active),var(--dorsa-primary)); box-shadow:0 12px 26px rgba(32,63,101,.2); }
.security-note i,.login-footnote i { color:var(--dorsa-primary); }
body.auth-page.dark-mode { background:radial-gradient(circle at 10% 8%,rgba(111,143,185,.14),transparent 24rem),linear-gradient(180deg,#18283b,#203f65); }
body.auth-page.dark-mode .form-group input:focus { border-color:#8fb0d4; box-shadow:0 0 0 4px rgba(111,143,185,.2); }