/* 登录方式切换：隐藏非当前表单 */
[data-auth-panel][hidden] {
  display: none !important;
}

.hc-auth-tabs,
.hc-admin-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0 20px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.08);
}

.hc-auth-tab,
.hc-admin-auth-tab {
  appearance: none;
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: 0.65;
}

.hc-auth-tab.is-active,
.hc-admin-auth-tab.is-active {
  background: rgba(90, 120, 255, 0.12);
  opacity: 1;
  font-weight: 700;
}

.hc-admin-auth-tab.is-active {
  background: rgba(130, 239, 210, 0.12);
  color: var(--admin-accent);
}

.hc-sms-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: stretch;
}

.hc-sms-button {
  min-height: 44px;
  white-space: nowrap;
}

.hc-auth-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
}

.hc-auth-links a {
  text-decoration: none;
}

.hc-auth-success {
  display: none;
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(48, 180, 120, 0.11);
  color: #15915f;
  font-size: 13px;
}

.hc-auth-success.is-visible {
  display: block;
}

.hc-admin-login-message.is-success {
  color: var(--admin-success);
}

@media (max-width: 560px) {
  .hc-sms-field {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .hc-auth-links {
    flex-direction: column;
    gap: 8px;
  }
}


/* PASSWORD_TOGGLE_V1 */
.hc-password-field {
  position: relative;
  width: 100%;
}

.hc-password-field .hc-input,
.hc-password-field .hc-admin-input {
  width: 100%;
  padding-right: 48px;
}

.hc-password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8fa1ad;
  cursor: pointer;
  opacity: 0.82;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.hc-password-toggle:hover {
  color: #82efd2;
  background: rgba(130, 239, 210, 0.08);
  opacity: 1;
}

.hc-password-toggle:focus-visible {
  outline: 2px solid rgba(130, 239, 210, 0.65);
  outline-offset: 1px;
}

.hc-password-eye {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-eye-off {
  display: none;
}

.hc-password-toggle.is-visible .hc-eye-open {
  display: none;
}

.hc-password-toggle.is-visible .hc-eye-off {
  display: block;
}

.hc-password-field input::-ms-reveal,
.hc-password-field input::-ms-clear {
  display: none;
}