/* Client sign-in: native controls share the site's TDesign tokens. */
* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; }
body { margin: 0; color: var(--td-text-color-primary); background: var(--td-bg-color-page); font: var(--td-font-body-medium); font-family: var(--td-font-family); }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 400px); align-items: center; align-content: center; justify-content: center; column-gap: 80px; row-gap: 24px; padding: 48px 24px 24px; }
.brand-panel, .access-panel { width: min(100%, 400px); }
.brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--td-text-color-primary); text-decoration: none; }
.brand-logo-layer { display: block; width: 176px; max-width: 100%; height: auto; animation: brand-reveal 1100ms cubic-bezier(.2,.7,.2,1) both; }
.access-panel {
  --td-brand-color: #E99413;
  --td-brand-color-hover: #E99413;
  --td-brand-color-active: #E99413;
  --td-brand-color-focus: rgb(233 148 19 / 20%);
  --td-brand-color-disabled: rgb(233 148 19 / 40%);
  animation: form-reveal 750ms cubic-bezier(.2,.7,.2,1) both; }
.login-card { box-shadow: 0 16px 48px rgb(15 23 42 / 6%); padding: 32px; background: var(--td-bg-color-container); border: 1px solid var(--td-component-stroke); border-radius: var(--td-radius-medium); }
.login-card-header { margin-bottom: 24px; }
.login-card-header h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { min-width: 0; }
.field > label:not(.remember) { display: block; margin-bottom: 8px; line-height: 22px; }
.field-control { min-width: 0; height: 40px; padding: 0 12px; }
.field-control:focus-within { border-color: var(--td-brand-color); box-shadow: 0 0 0 2px var(--td-brand-color-focus); }
.field-control input { min-width: 0; width: 100%; }
.password-toggle { align-self: stretch; flex: 0 0 auto; margin-left: 8px; padding: 0 4px; border: 0; background: transparent; color: var(--td-brand-color); cursor: pointer; }
.password-toggle:focus-visible, .forgot-link:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: 2px; }
.remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--td-brand-color); }
.form-row { display: flex; justify-content: flex-end; }
.forgot-link { color: var(--td-brand-color); text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.feedback { display: none; margin: 0; color: var(--td-error-color); line-height: 22px; overflow-wrap: anywhere; }
.feedback.is-visible { display: block; }
.access-panel .submit-button { width: 100%; color: #0F172A; background: var(--td-brand-color); border-color: var(--td-brand-color); }
.access-panel .submit-button:disabled { cursor: not-allowed; background: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); }
.login-footer { grid-column: 1 / -1; margin-top: 24px; color: var(--td-text-color-secondary); text-align: center; font-size: 12px; line-height: 20px; }
.login-footer p { margin: 0; }
.loading-overlay { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: var(--td-bg-color-container); }
.loading-overlay.is-active { display: flex; }
.loading-logo { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; }
.loading-logo-img { display: block; width: 112px; height: auto; }
.loading-overlay.is-active .loading-logo-img { animation: brand-reveal 400ms ease-out both; }
.loading-ring { position: absolute; inset: 28px; border: 1px solid #CBD5E1; border-radius: 50%; }
.loading-ring::after { content: ''; position: absolute; inset: -1px; border: 2px solid transparent; border-top-color: #E99413; border-radius: 50%; }
.loading-ring-outer { inset: 0; }
.loading-overlay.is-active .loading-ring::after { animation: loading-orbit 1800ms linear infinite; }
.loading-overlay.is-active .loading-ring-outer::after { animation-direction: reverse; animation-duration: 2600ms; }
@keyframes loading-orbit { to { transform: rotate(360deg); } }
@keyframes brand-reveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px) scale(.94); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}
@keyframes form-reveal {
  from { opacity: .35; transform: translateX(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.brand-panel { position: relative; isolation: isolate; min-height: 440px; display: grid; align-items: center; }
.brand-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage-ring { transition: border-color 350ms ease, opacity 350ms ease; position: absolute; width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); border: 1px solid #CBD5E1; border-radius: 50%; opacity: .45; animation: stage-expand 1500ms cubic-bezier(.2,.7,.2,1) both; }
.stage-ring-outer { width: 388px; height: 388px; left: calc(50% - 194px); top: calc(50% - 194px); border-color: #2F67C7; opacity: .12; animation-delay: 120ms; }
.brand-panel:focus-within .stage-ring, .brand-panel:hover .stage-ring, .login-shell:has(.login-form:focus-within) .stage-ring { border-color: #E99413; opacity: .5; }
.brand-lockup { transition: transform 400ms cubic-bezier(.2,.7,.2,1); }
.brand-lockup:hover { transform: translateY(-4px) scale(1.025); }
.stage-ring::after { content: ''; position: absolute; inset: -1px; border: 2px solid transparent; border-top-color: #E99413; border-radius: 50%; animation: ring-orbit 2600ms cubic-bezier(.2,.7,.2,1) both; }
.stage-ring-outer::after { animation-delay: 160ms; animation-direction: reverse; }
@keyframes ring-orbit {
  from { transform: rotate(-100deg); opacity: 0; }
  20% { opacity: .8; }
  80% { opacity: .6; }
  to { transform: rotate(260deg); opacity: 0; }
}
.submit-button { transition: box-shadow 200ms ease, transform 200ms ease; }
.submit-button:hover:not(:disabled) { box-shadow: 0 6px 20px rgb(233 148 19 / 22%); transform: translateY(-1px); }
.submit-button:active:not(:disabled) { transform: translateY(0); }
@keyframes stage-expand {
  from { transform: scale(.5) rotateX(65deg); opacity: 0; }
  to { transform: scale(1) rotateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo-layer, .access-panel, .loading-overlay.is-active .loading-logo-img, .loading-overlay.is-active .loading-ring::after, .stage-ring, .stage-ring::after { animation: none; }
  .submit-button, .brand-lockup, .stage-ring { transition: none; }
  .brand-lockup:hover { transform: none; }
  .stage-ring::after { display: none; }

}