/* ============================================================
   登录 / 注册页（苹果式居中表单）
   ============================================================ */

.auth-page {
    max-width: 420px;
    margin: 0 auto;
    padding: 96px 22px 64px;
    text-align: center;
}
.auth-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auth-sub {
    margin-top: 8px;
    font-size: 15px;
    color: var(--color-text-sub);
}

.auth-form { margin-top: 36px; }

/* 输入框组：多个输入框共用一个圆角外框，中间细分隔线 */
.auth-inputs {
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    text-align: left;
}
.auth-field { position: relative; }
.auth-field + .auth-field { border-top: 1px solid #e8e8ed; }
/* 收起中的字段必须连分隔线一起归零：上面分隔线规则的特异性 (0,2,0) 高于
   .auth-password 的 (0,1,0)，不覆盖的话收起栏会残留 1px 的 border-top，
   把分组框内容区撑高——聚焦描边就贴不到分组框底缘（Playwright 实测踩坑） */
.auth-inputs .auth-password:not(.visible),
.auth-inputs .auth-captcha:not(.visible) {
    border-top: none;
}

.auth-field input {
    width: 100%;
    height: 52px;
    border: none;
    outline: none;
    padding: 0 84px 0 16px;      /* 右侧给箭头/眼睛按钮留位 */
    font-size: 15px;
    font-family: inherit;
    background: transparent;
}
/* 聚焦高亮：描边只画在激活字段自己的区域上（inset box-shadow，画在分组框内部不会被裁切）。
   圆角按字段位置贴合，13px = 分组框外径 14px - 边框 1px（即分组框的内径圆角），
   这样描边曲线和分组框/分隔线严丝合缝，不再出现"悬浮圆角矩形" */
.auth-field:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
/* --- 静态位置：适用于所有字段常驻可见的页面（注册/改密/资料/找回密码） --- */
.auth-field:first-child:focus-within {
    border-radius: 13px 13px 0 0;      /* 首字段：上两角贴分组框内角，下两角直角贴分隔线 */
}
.auth-field:last-child:focus-within {
    border-radius: 0 0 13px 13px;      /* 尾字段：上两角直角贴分隔线，下两角贴分组框内角 */
}
.auth-field:first-child:last-child:focus-within {
    border-radius: 13px;               /* 单字段页（找回密码）：四角都贴分组框内角 */
}
/* --- 登录页专属：字段随三步式动态显隐，按可见状态覆盖位置。
     不能只靠 :first-child/:last-child——加入验证码栏后密码栏夹在中间，
     不再是 last-child，会漏掉圆角规则变成直角描边（Playwright 实测踩坑） --- */
/* 密码框收起时（验证码必收起）：用户名是唯一可见字段 → 四角都圆。
   :has(.auth-password) 把这条限定在登录页，防止误伤没有此结构的注册页等分组 */
.auth-inputs:has(.auth-password):not(:has(.auth-password.visible)) .auth-field:first-child:focus-within {
    border-radius: 13px;
}
/* 密码框已展开、验证码栏还收着：密码是可见的尾字段（后面只有收起的验证码）→ 上直角下圆 */
.auth-inputs:has(.auth-password.visible):not(:has(.auth-captcha.visible)) .auth-password:focus-within {
    border-radius: 0 0 13px 13px;
}
/* 验证码栏展开后：密码夹在中间（上下都是分隔线）→ 不设圆角即四角直角，天然贴合；
   验证码栏自己是 last-child，命中上面的尾字段规则 → 上直角下圆 */

/* ---------- 空输入框的伪光标 ----------
   防自动填充机制（input 初始 readonly，按键/粘贴才解锁）有个副作用：
   Chromium 对只读输入框不画文本光标 → 聚焦空框时看起来"光标不见了"。
   这里用一条闪烁竖线补上：空框时光标本就固定在文字起点，位置已知可画；
   敲第一个字符解锁 readonly 后系统光标自然接管，伪光标随 [readonly] 消失自动退场 */
.auth-field::after {
    content: '';
    position: absolute;
    left: 16px;                  /* 与 input 的 padding-left 对齐，即文字起点 */
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 20px;
    border-radius: 1px;
    background: var(--color-text);
    opacity: 0;
    pointer-events: none;        /* 不挡鼠标，不影响点击定位 */
}
.auth-field:focus-within:has(input[readonly])::after {
    opacity: 1;
    animation: auth-caret-blink 1.1s steps(1) infinite;   /* steps(1) 硬切闪烁，模拟系统光标节奏 */
}
@keyframes auth-caret-blink {
    50% { opacity: 0; }
}

/* 编辑资料页的简介框（textarea）：与 input 同款无边框风格 */
.auth-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    background: transparent;
    resize: none;                /* 去掉右下角拖拽把手，保持苹果式干净外观 */
    display: block;
    min-height: 76px;            /* 3 行左右的高度 */
}
/* textarea 的聚焦高亮同样由上面 .auth-field:focus-within 规则统一负责（编辑资料页） */

/* 密码框：默认收起（高度0），输入用户名回车后展开 */
.auth-password {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: none;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}
.auth-password.visible {
    max-height: 60px;
    opacity: 1;
    border-top: 1px solid #e8e8ed;
}

/* 第三步：图形验证码栏（默认收起，密码框回车/点下一步后展开，机制与密码框相同） */
.auth-captcha {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: none;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}
.auth-captcha.visible {
    max-height: 60px;
    opacity: 1;
    border-top: 1px solid #e8e8ed;
}
/* 验证码图片：贴在提交箭头左侧，圆角小图，点击换一张 */
.auth-captcha-img {
    position: absolute;
    right: 48px;                 /* 与眼睛按钮同位次：12px(箭头边距) + 28px(箭头宽) + 8px */
    top: 50%;
    transform: translateY(-50%);
    height: 34px;                /* 52px 栏高内留边距 */
    border-radius: 6px;
    cursor: pointer;
    display: block;
    background: #f5f5f7;         /* 图片加载完成前的占位底色 */
}
/* 验证码输入框右侧给 140px 宽的图片留位，文字不能钻到图下 */
.auth-captcha input {
    padding-right: 196px;        /* 48px(图右距) + 140px(图宽) + 8px 余量 */
}

/* 输入框右端的圆形箭头按钮 */
.auth-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #e8e8ed;
    color: var(--color-text);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.auth-arrow:hover { background: #d2d2d7; }
.auth-arrow svg {
    display: block;              /* SVG 默认按 inline 排版会带基线空隙，改块级让图标在圆钮内完全居中 */
}
/* JS 隐藏用户名框箭头用的是 hidden 属性；.auth-arrow 自带 display:flex 会压过 hidden 的
   默认 display:none，这里补一条让 hidden 真正生效 */
.auth-arrow[hidden] { display: none; }

/* 隐藏 Edge 浏览器给密码框自带的原生"显示密码"小眼（::-ms-reveal）和清除×钮（::-ms-clear）——
   它们与页面上自定义的眼睛按钮重复，会出现两只眼 */
.auth-field input[type="password"]::-ms-reveal,
.auth-field input[type="password"]::-ms-clear {
    display: none;
}

/* 密码框圆点放大：圆点大小跟随 input 字号，框内只有圆点没有正文，直接加大字号即可；
   placeholder"密码"两字用伪元素调回正常字号，避免跟着变大 */
.auth-field input[type="password"] {
    font-size: 22px;
}
.auth-field input[type="password"]::placeholder {
    font-size: 15px;
}

/* 密码显隐按钮：无圆底的裸图标，淡灰、hover 加深；位于提交箭头左侧 8px */
.auth-eye {
    position: absolute;
    right: 48px;                 /* 12px(箭头右边距) + 28px(箭头宽) + 8px(间距) */
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.auth-eye:hover { color: var(--color-text); }
.auth-eye svg { display: block; }
/* 图标表达"当前状态"：密文（看不见）→ 划线眼；明文（看得见）→ 睁眼 */
.auth-eye .icon-eye { display: none; }               /* 默认密文态：显示划线眼 */
.auth-eye.is-showing .icon-eye { display: block; }   /* 明文态：换成睁眼 */
.auth-eye.is-showing .icon-eye-off { display: none; }

/* 错误提示 */
.auth-error {
    color: #d70015;
    font-size: 13px;
    margin-top: 12px;
    text-align: left;
}
.errorlist {
    list-style: none;
    color: #d70015;
    font-size: 13px;
    padding: 4px 16px 8px;
}

/* 隐藏 Django 自带的密码规则帮助文本，保持页面干净 */
.helptext { display: none; }

.auth-submit {
    width: 100%;
    margin-top: 24px;
}

/* 底部链接 */
.auth-links {
    margin-top: 28px;
    font-size: 13px;
    color: var(--color-text-sub);
}
.auth-links a { color: var(--color-accent); }
.auth-links p { margin-top: 10px; }

/* ============================================================
   邮箱验证码行（2026-10-16）：注册页 / 更换邮箱页共用
   ============================================================ */
/* 「发送验证码」按钮：贴在邮箱输入框行右端（auth-field 已是 relative 定位） */
.code-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 15px;
    background: #e8e8ed;
    color: var(--color-text);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;           /* 倒计时文案变宽也保持一行 */
    transition: background 0.2s ease, opacity 0.2s ease;
}
.code-btn:hover { background: #d2d2d7; }
.code-btn:disabled { opacity: 0.45; cursor: default; }
/* 邮箱输入框右侧给按钮留位：:has 与上方登录页三步式同款用法 */
.auth-field:has(.code-btn) input {
    padding-right: 104px;
}
/* 发送状态小字：显示在邮箱行下方；:empty 时隐藏不占高 */
.code-msg {
    display: block;
    padding: 2px 16px 6px;
    font-size: 12px;
    text-align: left;
    color: #0f7b34;
}
.code-msg:empty { display: none; }
.code-msg-error { color: #d70015; }

/* ============================================================
   注册成功弹窗（signup_done.html 中转页，2026-10-16）
   ============================================================ */
/* 全屏遮罩：毛玻璃磨砂盖住整页（backdrop-filter ≤ 16px，项目规范），
   倒计时结束整页自动跳走，遮罩随之消失 */
.auth-toast {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);   /* Safari 兼容前缀 */
    animation: auth-toast-in 0.3s ease both;
}
@keyframes auth-toast-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* 居中卡片：淡入 + 轻微回弹上浮，苹果式弹窗节奏 */
.auth-toast-card {
    padding: 44px 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
    text-align: center;
    animation: auth-toast-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}
@keyframes auth-toast-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 对勾圆标：绿底白勾，成功语义 */
.auth-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: #34c759;
    color: #fff;
}
.auth-toast-title {
    margin-top: 18px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auth-toast-sub {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-text-sub);
}
.auth-toast-sub a { color: var(--color-accent); }
/* 倒计时数字：等宽数字（tabular-nums），2→1 切换时不抖动 */
.auth-toast-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}
/* 小屏收窄卡片内边距，避免文字贴边 */
@media (max-width: 480px) {
    .auth-toast-card { padding: 36px 40px; }
}