/* Shared form controls for merchant and platform sign-in. Scene layout lives separately. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--cj-graphite);
  background: var(--cj-environment);
  font-synthesis: none;
  color-scheme: light;
  --accent: #6753ad;
}
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent), white 27%);
  outline-offset: 3px;
}
.login-content { width: 100%; max-width: 390px; }
.form-kicker { display: block; margin-bottom: 18px; color: #716185; font-size: 12px; font-weight: 650; letter-spacing: .11em; }
h1 { margin: 0; color: var(--cj-graphite); font-size: clamp(31px, 2.7vw, 40px); font-weight: 660; line-height: 1.22; letter-spacing: -.055em; }
.intro { margin: 11px 0 37px; color: var(--cj-secondary); font-size: 14px; line-height: 1.65; }
form label { display: block; margin: 0 0 10px; color: #334049; font-size: 13px; font-weight: 600; line-height: 1.4; }
form input:not([type=checkbox]) {
  display: block; width: 100%; height: 54px; min-width: 0; padding: 0 16px;
  border: 1px solid #9dabb378; border-radius: var(--cj-radius-control);
  background: rgb(255 255 255 / 75%); color: var(--cj-graphite); font-size: 16px;
  box-shadow: none;
  transition: background-color var(--cj-motion-fast), border-color var(--cj-motion-fast), box-shadow var(--cj-motion-fast);
}
form input::placeholder { color: #68747b; opacity: 1; }
form input:not([type=checkbox]):hover { border-color: #8799a4; }
form input:not([type=checkbox]):focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 83%); outline: 0; }
#access-account { margin-bottom: 22px; }
.password-field { position: relative; }
.password-field input { padding-right: 75px !important; }
#toggle-password {
  position: absolute; top: 5px; right: 5px; min-width: 60px; min-height: 44px;
  padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--accent); font-size: 13px; font-weight: 650;
  transition: background-color var(--cj-motion-fast);
}
#toggle-password:hover, #toggle-password:focus-visible { background: rgb(103 83 173 / 9%); }
.remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 15px 0 12px; color: #3c4951; font-size: 13px; font-weight: 450; cursor: pointer; }
.remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.remember span { margin-left: auto; color: var(--cj-secondary); font-size: 12px; }
.login-submit {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 56px; padding: 0 19px; border: 0;
  border-radius: var(--cj-radius-control); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 650; letter-spacing: .02em;
  transition: background-color var(--cj-motion-fast), transform var(--cj-motion-fast), opacity var(--cj-motion-fast);
}
.login-submit span { font-size: 22px; font-weight: 400; line-height: 1; }
.login-submit:hover { background: #58449e; }
.login-submit:active { transform: scale(.99); }
.login-submit:disabled { cursor: wait; opacity: .67; }
#message { min-height: 21px; margin: 12px 0 0; color: #96384b; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
form:has(.login-submit:disabled) #message { color: var(--cj-secondary); }
.note, .license-note { margin: 14px 0 0; color: var(--cj-secondary); text-align: center; font-size: 12px; line-height: 1.6; }
.license-note { margin-top: 4px; }
.login-success .login-submit { transform: scale(.98); }
.login-success .login-content { animation: login-depart .52s ease both; }
@keyframes login-depart { 0%, 65% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } }
/* License expiry uses the same public stylesheet without a login scene. */
body > main { max-width: 520px; margin: 12vh auto; padding: 40px 28px; line-height: 1.8; }
body > main a { color: var(--accent); }
@media (max-width: 767px) {
  .login-content { max-width: 450px; margin: auto; }
  h1 { font-size: 29px; }
  .intro { margin: 7px 0 22px; }
  #access-account { margin-bottom: 17px; }
  .remember { margin: 9px 0; }
  .note { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .login-success .login-submit { transform: none; }
}