/* ============================================================
   app/static/css/auth.css — 认证页专属布局（登录 / 注册）

   职责边界（契约第 6 节）：
     只写「只有认证页才存在的东西」——
       页面骨架     .auth-page / .auth-card
       几何装饰     .auth-decoration / .auth-decoration-left / -right
       页脚         .auth-footer
       页内新元素   .auth-remember / .auth-invite / .auth-hint / .auth-form-error
       页面级覆盖   .auth-page .card / .btn-primary 等（一律带 .auth-page 前缀）

   刻意不写：
     :root 令牌                      → theme.css 是唯一来源
     .card / .card-header / .form-* / .btn* / .field-error
                                     → layout.css 定义的共享原子类。
       在这里重定义基类 = 全局所有页面跟着变，原子类就失去了单一来源。
       确需微调时只允许「圈定本页」的覆盖（见文件末尾）。

   视觉语言（沿用既有冷色调设计系统，见 [[frontend-design-system]]）：
     冷静、单调、留白充足；装饰只用两种几何形——虚线圆环与旋转圆角方块；
     动效只有一次缓慢的呼吸，不做位移、不做渐变闪烁。
   ============================================================ */

/* ============================================================
   一、页面骨架
   ── 认证页没有侧边栏目，用 min-height 把卡片顶到视口视觉重心附近。
      为什么是 60vh 而不是 100vh 减去页头页脚？
      本页嵌在 layout.css 的 .app-main 里，那一层已经有
      min-height: calc(100vh - var(--header-h) - 72px) 和上下 padding。
      再按视口算一遍会双重计数，短屏上白白多出一条滚动条。
      用相对自己内容的 60vh，卡片始终落在偏上一点的视觉重心，
      也不去耦合别人随时会调的 padding 数值。
   ============================================================ */

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px 20px 48px;
    /* 裁剪几何装饰的横向溢出，免得窄屏出现横向滚动条。
       高度是 auto（min-height 撑开），所以纵向不会裁到内容 */
    overflow: hidden;
}

.auth-card {
    position: relative;   /* 几何装饰的定位原点 */
    width: 100%;
    max-width: 400px;
}

/* ============================================================
   二、几何装饰
   ── 一虚一实、一圆一方，压在卡片下层（z-index: 0）。
      卡片自身是定位元素且 DOM 在后，自然盖在装饰之上，无需额外层级。
   ============================================================ */

.auth-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;   /* 纯装饰，不抢点击、不进焦点链 */
    animation: auth-breathe 7s ease-in-out infinite;
}

/* 左下：虚线圆环。::before 套一个内缩的同心实线环，做出「刻度」层次 */
.auth-decoration-left {
    bottom: -46px;
    left: -40px;
    width: 116px;
    height: 116px;
    border: 1.5px dashed #cfdbee;
    border-radius: 50%;
    opacity: 0.7;
}

.auth-decoration-left::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid #e1e9f5;
    border-radius: 50%;
}

/* 右上：旋转的圆角方块。暖色来自既有 --accent-light，只做一点点温度点缀 */
.auth-decoration-right {
    top: -34px;
    right: -30px;
    width: 68px;
    height: 68px;
    background: var(--accent-light);
    border-radius: 16px;
    transform: rotate(30deg);
    opacity: 0.5;
    animation-delay: -3.5s;   /* 与左环错峰，避免两边同时亮 */
}

/* 呼吸：只动透明度，不动位置、不动 transform（右块已占用 transform: rotate）。
   7 秒一个周期，慢到不注意时几乎看不见——这是"克制"的量化标准。 */
@keyframes auth-breathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.8; }
}

/* ============================================================
   三、页脚（「还没有账号？立即注册」/「已有账号？立即登录」）
   ============================================================ */

.auth-footer {
    margin-top: 22px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.auth-footer a {
    position: relative;
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

/* 下划线由中心向外展开，比直接 text-decoration 更安静 */
.auth-footer a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
}

.auth-footer a:hover { color: var(--primary-dark); }
.auth-footer a:hover::after { transform: scaleX(1); }

/* ============================================================
   四、页内专属元素
   ============================================================ */

/* 「保持登录状态」行：复选框与文字基线对齐 */
.auth-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -4px 0 20px;
}

.auth-remember__box {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-remember__label {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

/* 邀请码区：与上面的账号字段用一条虚线分隔，呼应装饰里的虚线圆。
   邀请码是「另一类东西」——账号是你的，邀请码是站长给的，视觉上也分开。 */
.auth-invite {
    margin-top: 2px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

/* 字段下方的说明文字（比 .field-error 轻，不抢注意力） */
.auth-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* 表单级错误（errors['_form']）：整块留白内的一个浅红底条 */
.auth-form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
}

/* ============================================================
   五、对共享原子类的页面级覆盖
   ── 全部带 .auth-page 前缀：作用域锁在本页，不影响其他页面。
   ============================================================ */

/* 卡片标题区与表单之间多留一点气口 */
.auth-page .card-header {
    margin-bottom: 30px;
}

/* 主按钮与上方字段拉开距离（通栏宽度 layout.css 的 .btn-primary 已有，不重复写） */
.auth-page .btn-primary {
    margin-top: 4px;
}

/* ============================================================
   六、响应式（契约第 6 节：≤600px 卡片满宽）
   ============================================================ */

@media (max-width: 600px) {
    .auth-page {
        /* 窄屏空间紧张，不再硬撑高度，让卡片自然落位 */
        min-height: 0;
        padding: 16px 14px 36px;
    }

    .auth-card {
        max-width: 100%;
    }

    /* 窄屏把装饰收小并往里收，避免被 .auth-page 的 overflow 裁得残缺 */
    .auth-decoration-left {
        bottom: -30px;
        left: -22px;
        width: 88px;
        height: 88px;
    }

    .auth-decoration-right {
        top: -24px;
        right: -14px;
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    .auth-page .card-header {
        margin-bottom: 24px;
    }
}

/* ============================================================
   七、无障碍：系统开启「减少动态效果」时，装饰完全静止
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .auth-decoration {
        animation: none;
        opacity: 0.6;
    }

    .auth-footer a::after {
        transition: none;
    }
}