﻿:root {
  --auth-ink: #102a43;
  --auth-ink-soft: #486581;
  --auth-navy: #0b1f33;
  --auth-teal: #0f8b8d;
  --auth-teal-dark: #076b70;
  --auth-gold: #d6ad60;
  --auth-surface: #ffffff;
  --auth-surface-soft: #f5fbfb;
  --auth-border: #c9e2e3;
  --auth-shadow: 0 30px 90px rgba(3, 24, 43, .34);
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 15%, rgba(15, 139, 141, .22), transparent 34%),
    radial-gradient(circle at 85% 82%, rgba(214, 173, 96, .16), transparent 30%),
    rgba(5, 22, 39, .78);
  backdrop-filter: blur(14px) saturate(125%);
}

.auth-modal {
  position: relative;
  width: min(460px, 100%);
  overflow: hidden;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 251, 251, .98));
  box-shadow: var(--auth-shadow), 0 0 0 1px rgba(214, 173, 96, .16);
  color: var(--auth-ink);
}

.auth-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--auth-teal), var(--auth-gold), var(--auth-teal));
}

.auth-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--auth-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: var(--auth-ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: .2s ease;
}

.auth-close:hover { border-color: var(--auth-teal); color: var(--auth-teal-dark); transform: rotate(90deg); }

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand img { width: 48px; height: 48px; object-fit: cover; border: 2px solid rgba(214, 173, 96, .55); border-radius: 13px; box-shadow: 0 7px 16px rgba(11, 31, 51, .16); }
.auth-brand div { display: grid; gap: 3px; }
.auth-brand strong { color: var(--auth-navy); font-size: 19px; letter-spacing: .08em; line-height: 1; }
.auth-brand span { color: var(--auth-teal-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.auth-kicker {
  color: var(--auth-teal-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.auth-modal h2 {
  margin: 12px 0 9px;
  color: var(--auth-navy);
  font-size: clamp(23px, 4vw, 29px);
  letter-spacing: -.035em;
}

.auth-intro { margin: 0; color: var(--auth-ink-soft); line-height: 1.7; }.auth-approval-note { display: block; margin-top: 5px; color: #e2762b; font-weight: 900; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 26px 0 20px;
  padding: 5px;
  border: 1px solid var(--auth-border);
  border-radius: 13px;
  background: #eaf5f5;
}

.auth-tabs button {
  padding: 11px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--auth-ink-soft);
  font-weight: 850;
  cursor: pointer;
  transition: .2s ease;
}

.auth-tabs button:hover { color: var(--auth-teal-dark); }
.auth-tabs button.active { background: var(--auth-navy); color: #fff; box-shadow: 0 5px 14px rgba(11, 31, 51, .18); }

.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; color: var(--auth-ink); font-size: 13px; font-weight: 800; }
.auth-form label[hidden] { display: none; }
.auth-access-code input { text-transform: uppercase; letter-spacing: .12em; }

.auth-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--auth-border);
  border-radius: 11px;
  outline: 0;
  background: var(--auth-surface);
  color: var(--auth-navy);
  font: inherit;
  transition: .2s ease;
}

.auth-form input::placeholder { color: #829ab1; }
.auth-form input:hover { border-color: #8bc7c8; }
.auth-form input:focus { border-color: var(--auth-teal); box-shadow: 0 0 0 4px rgba(15, 139, 141, .14); }

.auth-footer { margin: 30px -38px -38px; padding: 20px 38px 18px; border-top: 1px solid rgba(214, 173, 96, .32); background: linear-gradient(135deg, #0b1f33, #123c52); color: #fff; }
.auth-footer > div:first-child { display: grid; gap: 4px; }
.auth-footer strong { font-size: 13px; letter-spacing: .02em; }
.auth-footer span, .auth-footer small { color: #a9c6cf; font-size: 9px; letter-spacing: .12em; }
.auth-footer-status { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.auth-footer-status i { width: 7px; height: 7px; border-radius: 50%; background: #5ee0b2; box-shadow: 0 0 0 4px rgba(94, 224, 178, .12); }
.auth-footer-status span { color: #d9f7ed; font-size: 9px; font-weight: 900; }
.auth-footer > small { display: block; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(201, 226, 227, .16); }
.auth-modal.signup-mode { padding-top: 28px; padding-bottom: 24px; }
.auth-modal.signup-mode .auth-brand { margin-bottom: 14px; }
.auth-modal.signup-mode h2 { margin-top: 8px; font-size: 25px; }
.auth-modal.signup-mode .auth-intro { line-height: 1.45; }
.auth-modal.signup-mode .auth-tabs { margin: 17px 0 13px; }
.auth-modal.signup-mode .auth-form { gap: 9px; }
.auth-modal.signup-mode .auth-form input { padding: 10px 12px; }
.auth-modal.signup-mode .auth-footer { margin-top: 20px; padding-top: 14px; padding-bottom: 13px; }
.auth-modal.signup-mode .auth-footer-status { margin-top: 8px; }
.auth-modal.signup-mode .auth-footer > small { margin-top: 9px; padding-top: 8px; }
.auth-resend { padding: 0; border: 0; background: transparent; color: var(--auth-teal-dark); font-size: 12px; font-weight: 850; text-align: left; text-decoration: underline; cursor: pointer; }
.auth-resend:hover { color: var(--auth-navy); }
.auth-resend:disabled { opacity: .6; cursor: wait; }
.auth-submit {
  margin-top: 4px;
  padding: 14px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--auth-teal-dark), var(--auth-teal));
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 139, 141, .24);
  transition: .2s ease;
}

.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 27px rgba(15, 139, 141, .3); }
.auth-submit:disabled { opacity: .62; cursor: wait; transform: none; }
.auth-message { min-height: 20px; margin: 0; color: var(--auth-ink-soft); font-size: 12px; line-height: 1.55; }
.auth-message.error { color: #a83d43; }
.auth-message.success { color: #08775f; }

@media (max-width: 520px) {
  .auth-backdrop { padding: 16px; }
  .auth-modal { padding: 32px 20px 24px; border-radius: 21px; }.auth-footer { margin-left: -20px; margin-right: -20px; margin-bottom: -24px; padding-left: 20px; padding-right: 20px; }
}


.auth-access-code{color:#e67e22!important}


.required-mark{color:#e67e22;font-style:normal;font-weight:900;margin-left:3px}


.auth-modal.signup-mode{padding-top:18px;padding-bottom:14px}.auth-modal.signup-mode .auth-brand{margin-bottom:8px}.auth-modal.signup-mode .auth-brand img{width:38px;height:38px}.auth-modal.signup-mode h2{margin:4px 0 5px;font-size:22px}.auth-modal.signup-mode .auth-intro{font-size:12px;line-height:1.3}.auth-modal.signup-mode .auth-tabs{margin:10px 0 8px;padding:3px}.auth-modal.signup-mode .auth-tabs button{padding:7px 8px}.auth-modal.signup-mode .auth-form{gap:5px}.auth-modal.signup-mode .auth-form label{gap:3px;font-size:12px}.auth-modal.signup-mode .auth-form input{padding:7px 10px;border-radius:8px}.auth-modal.signup-mode .auth-submit{margin-top:1px;padding:10px}.auth-modal.signup-mode .auth-footer{margin-top:12px;padding-top:9px;padding-bottom:8px}.auth-modal.signup-mode .auth-footer-status{margin-top:5px}.auth-modal.signup-mode .auth-footer>small{margin-top:5px;padding-top:5px}

