/* akong-auth-login · Web 样式 · 用 var(--ak-*) 接 @aily-ui/tokens
 * 视觉跟 xiaoxi-app 旧版 LoginPage 一致 (深底 + 居中 + 大 input + 大按钮)
 */

.ak-login-flow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 1.5rem 2.5rem;
  background: var(--ak-bg);
  color: var(--ak-fg);
  font-family: var(--ak-font-sans, inherit);
  box-sizing: border-box;
}

.ak-login-flow__header {
  text-align: center;
  margin-bottom: 3rem;
}

.ak-login-flow__title {
  font-size: 2.25rem;
  font-weight: var(--ak-weight-semibold, 600);
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
  color: var(--ak-fg);
}

.ak-login-flow__subtitle {
  font-size: 0.875rem;
  color: var(--ak-fg-secondary, var(--ak-fg-muted));
  margin: 0;
}

.ak-login-flow__panel {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* phone / code input · 共用样式 */
.ak-login-flow__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--ak-radius-md, 0.375rem);
  background: var(--ak-bg-elevated);
  border: 1px solid var(--ak-border);
  color: var(--ak-fg);
  font: inherit;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease);
  -webkit-appearance: none;
}

.ak-login-flow__input::placeholder {
  color: var(--ak-fg-secondary, var(--ak-fg-subtle));
}

.ak-login-flow__input:focus {
  border-color: var(--ak-accent, var(--ak-border-strong));
}

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

/* code step · phone 灰显示 (mask phase 文案) */
.ak-login-flow__phone-display {
  font-size: 0.875rem;
  color: var(--ak-fg-secondary, var(--ak-fg-muted));
  text-align: center;
  margin: 0;
}

/* OTP step 底栏 · 换手机号 / 重发 */
.ak-login-flow__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.ak-login-flow__link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ak-fg-secondary, var(--ak-fg-muted));
  font: inherit;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease);
}

.ak-login-flow__link:hover:not(:disabled) {
  color: var(--ak-fg);
}

.ak-login-flow__link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* tabs · password-based 真切 */
.ak-login-flow__tabs {
  width: 100%;
  max-width: 24rem;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ak-border-subtle, var(--ak-border));
}

.ak-login-flow__tab {
  background: transparent;
  border: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--ak-fg-secondary, var(--ak-fg-muted));
  font: inherit;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease),
    border-color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease);
  -webkit-tap-highlight-color: transparent;
}

.ak-login-flow__tab:hover {
  color: var(--ak-fg);
}

.ak-login-flow__tab--active {
  color: var(--ak-fg);
  border-bottom-color: var(--ak-accent, var(--ak-fg));
}

/* divider · "其他登录方式" */
.ak-login-flow__divider {
  width: 100%;
  max-width: 24rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--ak-fg-secondary, var(--ak-fg-muted));
  font-size: 0.8125rem;
}

.ak-login-flow__divider::before,
.ak-login-flow__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ak-border-subtle, var(--ak-border));
}

.ak-login-flow__divider-label {
  white-space: nowrap;
}

/* oauth row · Google / 微信 / QQ button row */
.ak-login-flow__oauth-row {
  width: 100%;
  max-width: 24rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ak-login-flow__oauth-btn {
  flex: 1;
  min-width: 6rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: var(--ak-radius-md, 0.375rem);
  background: var(--ak-bg-elevated);
  border: 1px solid var(--ak-border);
  color: var(--ak-fg);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease),
    border-color var(--ak-duration-fast, 120ms) var(--ak-ease-out, ease);
}

.ak-login-flow__oauth-btn:hover:not(:disabled) {
  background: var(--ak-bg-hover, var(--ak-bg-elevated));
  border-color: var(--ak-border-strong, var(--ak-border));
}

.ak-login-flow__oauth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ak-login-flow__oauth-icon {
  flex-shrink: 0;
}