/* ── Page layout ── */
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--tn-bg);
      background-image:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(79, 107, 255, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 110%, rgba(0, 229, 200, 0.08) 0%, transparent 55%);
      padding: var(--tn-space-6);
    }

    /* ── Card ── */
    .login-card {
      position: relative;
      width: 100%;
      max-width: 420px;
      background: var(--tn-grad-card);
      border: 1px solid var(--tn-border);
      border-radius: var(--tn-radius-xl);
      padding: var(--tn-space-10) var(--tn-space-10) var(--tn-space-8);
      box-shadow: var(--tn-shadow-lg), var(--tn-shadow-glow);
      animation: card-enter var(--tn-dur-xslow) var(--tn-ease-out) both;
    }
    .login-card--org-badge { text-align: center; }
    .login-view--hidden {
      display: none;
    }

    /* Top glow line */
    .login-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 20%;
      right: 20%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--tn-primary), transparent);
      border-radius: var(--tn-radius-full);
    }

    @keyframes card-enter {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Logo mark ── */
    .logo-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--tn-space-3);
      margin-bottom: var(--tn-space-8);
    }

    .logo-mark {
      width: 52px;
      height: 52px;
      background: var(--tn-grad-primary);
      border-radius: var(--tn-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 24px rgba(79, 107, 255, 0.45);
      flex-shrink: 0;
    }

    .logo-mark span {
      font-family: var(--tn-font-heading);
      font-size: 1.6rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .org-name-badge {
      text-align: center;
      margin: 0 0 16px;
      font-size: 0.88rem;
      color: #a5b4fc;
      background: rgba(99,102,241,0.15);
      border: 1px solid rgba(99,102,241,0.35);
      border-radius: 20px;
      padding: 5px 18px;
      display: inline-block;
    }
    .required-mark { color: var(--tn-danger); }

    .logo-name {
      font-family: var(--tn-font-heading);
      font-size: var(--tn-text-2xl);
      font-weight: 800;
      color: var(--tn-text-on-dark);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .logo-tagline {
      font-size: var(--tn-text-sm);
      color: var(--tn-text-muted);
      font-family: var(--tn-font-body);
      letter-spacing: 0.03em;
      margin-top: calc(var(--tn-space-1) * -1);
    }

    /* ── Form ── */
    .login-form {
      display: flex;
      flex-direction: column;
      gap: var(--tn-space-5);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--tn-space-2);
    }

    /* Reuse token utility classes and extend locally */
    input[type="email"],
    input[type="password"] {
      width: 100%;
      background: rgba(15, 22, 40, 0.7);
      border: 1.5px solid var(--tn-border);
      border-radius: var(--tn-radius-md);
      padding: 13px 16px;
      color: var(--tn-text);
      font-family: var(--tn-font-body);
      font-size: var(--tn-text-base);
      outline: none;
      transition:
        border-color var(--tn-dur-fast) var(--tn-ease-out),
        box-shadow   var(--tn-dur-fast) var(--tn-ease-out),
        background   var(--tn-dur-fast) var(--tn-ease-out);
    }

    input[type="email"]:focus,
    input[type="password"]:focus {
      border-color: var(--tn-primary);
      box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.2);
      background: rgba(15, 22, 40, 0.95);
    }

    input[type="email"]::placeholder,
    input[type="password"]::placeholder {
      color: var(--tn-text-muted);
    }

    /* ── Submit button ── */
    .btn-login {
      margin-top: var(--tn-space-2);
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: var(--tn-radius-md);
      background: var(--tn-grad-primary);
      color: #fff;
      font-family: var(--tn-font-heading);
      font-weight: 700;
      font-size: var(--tn-text-md);
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(79, 107, 255, 0.4);
      transition:
        transform    var(--tn-dur-normal) var(--tn-ease-out),
        box-shadow   var(--tn-dur-normal) var(--tn-ease-out),
        filter       var(--tn-dur-normal) var(--tn-ease-out),
        opacity      var(--tn-dur-normal) var(--tn-ease-out);
    }

    .btn-login:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(79, 107, 255, 0.55);
      filter: brightness(1.06);
    }

    .btn-login:active:not(:disabled) {
      transform: translateY(0);
    }

    .btn-login:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* ── Error message ── */
    .error-message {
      min-height: 1.4em;
      font-size: var(--tn-text-sm);
      color: var(--tn-danger);
      text-align: center;
      margin-top: var(--tn-space-1);
    }

    /* ── Footer links ── */
    .card-footer {
      margin-top: var(--tn-space-6);
      padding-top: var(--tn-space-5);
      border-top: 1px solid var(--tn-border-subtle);
      text-align: center;
    }

    .card-footer a {
      font-size: var(--tn-text-sm);
      color: var(--tn-text-muted);
      text-decoration: none;
      transition: color var(--tn-dur-fast) var(--tn-ease-out);
      border-bottom: 1px solid transparent;
    }

    .card-footer a:hover {
      color: var(--tn-primary-light);
      border-bottom-color: rgba(122, 145, 255, 0.5);
    }

    /* ── Page footer ── */
    .page-footer {
      margin-top: var(--tn-space-8);
      font-size: var(--tn-text-xs);
      color: var(--tn-text-muted);
      text-align: center;
    }

    /* ── Apply form specific inputs ── */
    input[type="text"] {
      width: 100%;
      background: rgba(15, 22, 40, 0.7);
      border: 1.5px solid var(--tn-border);
      border-radius: var(--tn-radius-md);
      padding: 13px 16px;
      color: var(--tn-text);
      font-family: var(--tn-font-body);
      font-size: var(--tn-text-base);
      outline: none;
      transition:
        border-color var(--tn-dur-fast) var(--tn-ease-out),
        box-shadow   var(--tn-dur-fast) var(--tn-ease-out),
        background   var(--tn-dur-fast) var(--tn-ease-out);
      box-sizing: border-box;
    }

    input[type="text"]:focus {
      border-color: var(--tn-primary);
      box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.2);
      background: rgba(15, 22, 40, 0.95);
    }

    input[type="text"]::placeholder {
      color: var(--tn-text-muted);
    }

    select.apply-select {
      width: 100%;
      background: rgba(15, 22, 40, 0.7);
      border: 1.5px solid var(--tn-border);
      border-radius: var(--tn-radius-md);
      padding: 13px 16px;
      color: var(--tn-text);
      font-family: var(--tn-font-body);
      font-size: var(--tn-text-base);
      outline: none;
      box-sizing: border-box;
    }

    select.apply-select:focus {
      border-color: var(--tn-primary);
      box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.2);
    }

    /* ── Apply button ── */
    .btn-apply {
      margin-top: var(--tn-space-2);
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: var(--tn-radius-md);
      background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
      color: #fff;
      font-family: var(--tn-font-heading);
      font-weight: 700;
      font-size: var(--tn-text-md);
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
      transition:
        transform    var(--tn-dur-normal) var(--tn-ease-out),
        box-shadow   var(--tn-dur-normal) var(--tn-ease-out),
        filter       var(--tn-dur-normal) var(--tn-ease-out),
        opacity      var(--tn-dur-normal) var(--tn-ease-out);
    }

    .btn-apply:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(14, 165, 233, 0.55);
      filter: brightness(1.06);
    }

    .btn-apply:active:not(:disabled) {
      transform: translateY(0);
    }

    .btn-apply:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* ── Register CTA ── */
    .btn-register-cta {
      width: 100%;
      padding: 11px;
      border: 1.5px solid rgba(14, 165, 233, 0.5);
      border-radius: var(--tn-radius-md);
      background: rgba(14, 165, 233, 0.08);
      color: #38BDF8;
      font-family: var(--tn-font-body);
      font-weight: 600;
      font-size: var(--tn-text-sm);
      cursor: pointer;
      transition: all var(--tn-dur-fast) var(--tn-ease-out);
    }

    .btn-register-cta:hover {
      background: rgba(14, 165, 233, 0.18);
      border-color: rgba(14, 165, 233, 0.8);
    }

    /* ── Apply form header ── */
    .apply-form-header {
      font-size: var(--tn-text-sm);
      color: var(--tn-text-muted);
      margin-bottom: var(--tn-space-5);
      text-align: center;
      line-height: 1.6;
    }

    /* ── Success message ── */
    .success-panel {
      text-align: center;
      padding: var(--tn-space-6) 0;
    }

    .success-icon {
      font-size: 3rem;
      margin-bottom: var(--tn-space-4);
    }

    .success-title {
      font-family: var(--tn-font-heading);
      font-size: var(--tn-text-lg);
      font-weight: 700;
      color: var(--tn-text-on-dark);
      margin-bottom: var(--tn-space-3);
    }

    .success-desc {
      font-size: var(--tn-text-sm);
      color: var(--tn-text-muted);
      line-height: 1.7;
    }

    /* ── Mobile ── */
    @media (max-width: 480px) {
      .login-card {
        padding: var(--tn-space-8) var(--tn-space-6) var(--tn-space-6);
      }
    }

/* ── Password reset confirmation (UX improvement) ── */
.info-message {
  text-align: center;
  font-size: 0.88rem;
  color: var(--tn-success, #2dbf81);
  margin: var(--tn-space-3) 0 0;
  min-height: 1em;
  line-height: 1.5;
  padding: 0 var(--tn-space-3);
}

.card-footer a + a {
  margin-left: var(--tn-space-3);
}

#forgotPasswordLink {
  display: inline-block;
  font-weight: 500;
}