/* ============================================================
   考勤系统 · 认证页样式（登录 / 注册 / 开通成功）
   ------------------------------------------------------------
   设计：左侧「深空科技」品牌面板 + 右侧「极简白」表单卡
        系统字体栈，零外部依赖（内网可用）
   作用域：全部规则挂在 .auth-shell / .auth-* 下，仅服务三张页面 ——
     · index.php        员工端登录
     · admin/login.php  管理端登录
     · register.php     企业自助注册 + 开通成功
   ★ 不修改 app.css 任何一行：后台 22 个页面的外观零影响。
   ============================================================ */

/* ---------------- 设计 token + 外壳 ---------------- */
.auth-shell {
    --auth-accent:   #4f7cff;
    --auth-accent-2: #3b63e8;
    --auth-cyan:     #22d3ee;
    --auth-ink:      #0b1220;
    --auth-muted:    #94a3b8;
    --auth-line:     #e2e8f0;
    --auth-field:    #f8fafc;
    --auth-r:        12px;
    --auth-ease:     cubic-bezier(.2, 0, 0, 1);
    --auth-spring:   cubic-bezier(.34, 1.56, .64, 1);

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    color: #475569;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
.auth-shell,
.auth-shell * { box-sizing: border-box; }

/* ============================================================
   左栏 · 深空品牌面板
   ============================================================ */
.auth-aside {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 46px clamp(40px, 4.4vw, 78px) 40px;
    color: #fff;
    background:
        radial-gradient(115% 85% at 12% 4%,  rgba(79, 124, 255, .30) 0%, rgba(79, 124, 255, 0) 58%),
        radial-gradient(95% 80% at 92% 98%,  rgba(34, 211, 238, .17) 0%, rgba(34, 211, 238, 0) 55%),
        linear-gradient(158deg, #0a0f1e 0%, #0e1530 46%, #0a0e20 100%);
}
/* 超宽屏时限制左栏文字行宽，避免拉得太散 */
.auth-aside > * { max-width: 490px; }

/* 细网格，向边缘渐隐 */
.auth-aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(105% 78% at 50% 26%, #000 26%, transparent 76%);
            mask-image: radial-gradient(105% 78% at 50% 26%, #000 26%, transparent 76%);
    pointer-events: none;
}

/* 极慢漂移光晕 */
.auth-aside::after {
    content: '';
    position: absolute;
    left: -140px; top: -120px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 124, 255, .22) 0%, rgba(79, 124, 255, 0) 68%);
    animation: authDrift 26s var(--auth-ease) infinite alternate;
    pointer-events: none;
}
@keyframes authDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(92px, 72px, 0) scale(1.14); }
}

/* 品牌标识 */
.auth-brand {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 13px;
}
.auth-mark {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(142deg, #5b86ff 0%, #3b63e8 52%, #22a9d6 100%);
    box-shadow: 0 10px 26px rgba(59, 99, 232, .42),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}
.auth-mark svg { width: 23px; height: 23px; display: block; }
.auth-brand-name {
    font-size: 16px; font-weight: 600; letter-spacing: .02em; color: #fff; line-height: 1.35;
}
.auth-brand-role {
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255, 255, 255, .42); margin-top: 3px;
}

/* 中部主文案 */
.auth-aside-body {
    position: relative; z-index: 1;
    margin: auto 0;
    padding: 38px 0;
}
.auth-aside-title {
    margin: 0 0 14px;
    font-size: clamp(25px, 2.4vw, 33px);
    line-height: 1.24;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
}
.auth-aside-title em {
    font-style: normal;
    background: linear-gradient(96deg, #8fb4ff 0%, #22d3ee 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.auth-aside-text {
    margin: 0;
    max-width: 30em;
    font-size: 14.5px; line-height: 1.85;
    color: rgba(255, 255, 255, .58);
}

/* 能力点 */
.auth-feats {
    list-style: none;
    margin: 30px 0 0; padding: 0;
    display: grid; gap: 15px;
}
.auth-feat { display: flex; align-items: flex-start; gap: 13px; }
.auth-feat-ic {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: #9dbcff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}
.auth-feat-ic svg { width: 17px; height: 17px; display: block; }
.auth-feat-t {
    font-size: 13.5px; font-weight: 600;
    color: rgba(255, 255, 255, .92); line-height: 1.5;
}
.auth-feat-d {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .44); line-height: 1.65; margin-top: 2px;
}

.auth-aside-foot {
    position: relative; z-index: 1;
    font-size: 11.5px; letter-spacing: .02em;
    color: rgba(255, 255, 255, .3);
}

/* ============================================================
   右栏 · 表单
   ============================================================ */
.auth-main {
    display: flex;
    align-items: flex-start;   /* 内容超出视口时从顶部开始（不裁切）；不足时靠 card 的 auto margin 居中 */
    justify-content: center;
    padding: 48px 44px;
    background: #fff;
}
.auth-card { width: 100%; max-width: 392px; margin: auto; }
.auth-card.is-wide { max-width: 430px; }

/* 卡头 */
.auth-head { margin-bottom: 28px; }
.auth-h1 {
    margin: 0;
    font-size: 25px; line-height: 1.3; font-weight: 700;
    letter-spacing: -.02em; color: var(--auth-ink);
}
.auth-sub {
    margin: 9px 0 0;
    font-size: 13.5px; line-height: 1.7;
    color: var(--auth-muted);
}

/* 路径式入口：登录卡片顶部显示当前企业 */
.auth-org {
    display: inline-block;
    margin-top: 14px; padding: 6px 14px;
    border-radius: 999px;
    background: rgba(79, 124, 255, .1);
    color: #2f5fe0;
    font-size: 13px; font-weight: 600;
}

/* 表单字段 */
.auth-form { display: block; }
.auth-field { margin-bottom: 17px; }
.auth-label {
    display: flex; align-items: baseline; gap: 9px;
    margin-bottom: 8px;
    font-size: 13px; font-weight: 600; color: #334155;
}
.auth-req { color: #f43f5e; font-weight: 500; }
.auth-tag { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--auth-muted); }

.auth-input,
.auth-select {
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border: 1.5px solid var(--auth-line);
    border-radius: var(--auth-r);
    background: var(--auth-field);
    color: #0f172a;
    font-size: 14.5px;
    font-family: inherit;
    line-height: normal;
    -webkit-appearance: none;
            appearance: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-input::placeholder { color: #a8b6c8; }
.auth-input:hover, .auth-select:hover { border-color: #cbd5e1; }
.auth-input:focus,
.auth-select:focus {
    outline: none;
    border-color: var(--auth-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .13);
}
.auth-select {
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2 8 10.2l4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
}

.auth-hint {
    margin-top: 7px;
    font-size: 12px; line-height: 1.7;
    color: var(--auth-muted);
}
.auth-hint a { color: var(--auth-accent); font-weight: 600; text-decoration: none; }
.auth-hint a:hover { text-decoration: underline; }
.auth-hint code {
    padding: 1px 6px;
    border: 1px solid #e2e8f0; border-radius: 5px;
    background: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11.5px; color: #475569;
}

/* 主按钮 */
.auth-btn {
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: var(--auth-r);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px; font-weight: 600;
    letter-spacing: .08em;
    color: #fff;
    background: linear-gradient(134deg, #5b86ff 0%, #3b63e8 100%);
    box-shadow: 0 7px 20px rgba(59, 99, 232, .30),
                inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .16s var(--auth-spring), box-shadow .18s, filter .18s, background .18s;
}
.auth-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 12px 28px rgba(59, 99, 232, .40),
                inset 0 1px 0 rgba(255, 255, 255, .2);
}
.auth-btn:active { transform: translateY(0) scale(.994); filter: brightness(.96); }
.auth-btn:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; }

/* 次要按钮（用作 <a>） */
a.auth-btn { display: grid; place-items: center; text-decoration: none; }
.auth-btn-ghost {
    background: #fff;
    color: #3b63e8;
    border: 1.5px solid #c7d7ff;
    box-shadow: none;
}
.auth-btn-ghost:hover {
    background: #f5f8ff;
    border-color: #a9c2ff;
    box-shadow: 0 6px 16px rgba(59, 99, 232, .14);
}

/* 页脚链接 */
.auth-foot {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid #eef2f7;
    text-align: center;
    font-size: 12.5px; line-height: 2;
    color: var(--auth-muted);
}
.auth-foot a { color: var(--auth-accent); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-foot-sep { margin: 0 9px; color: #dbe3ee; }

/* 提示条 */
.auth-alert {
    border-radius: var(--auth-r);
    padding: 12px 15px;
    margin-bottom: 18px;
    border: 1px solid;
    font-size: 13px; line-height: 1.85;
}
.auth-alert.bad  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.auth-alert.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.auth-alert.ok   { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.auth-alert.info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
/* flash 消息（att_flash_render 输出 .alert）在认证页内的观感 */
.auth-shell .alert {
    border-radius: var(--auth-r);
    padding: 12px 15px;
    margin-bottom: 18px;
    border: 1px solid;
    font-size: 13px; line-height: 1.85;
    text-align: left;
}

/* 验证码行 */
.auth-cap-row { display: flex; gap: 11px; align-items: stretch; }
.auth-cap-row .auth-input { flex: 1 1 auto; min-width: 0; }
.auth-cap-img {
    flex: 0 0 auto;
    width: 128px; height: 47px;
    border: 1.5px solid var(--auth-line);
    border-radius: var(--auth-r);
    background: var(--auth-field);
    cursor: pointer;
    object-fit: cover;
    transition: border-color .18s, box-shadow .18s;
}
.auth-cap-img:hover {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .10);
}

/* 密码显隐 */
.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 47px; }
.auth-pw-btn {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; border-radius: 9px;
    background: transparent;
    color: #a8b6c8;
    cursor: pointer;
    transition: color .16s, background .16s;
}
.auth-pw-btn:hover { color: var(--auth-accent); background: rgba(79, 124, 255, .08); }
.auth-pw-btn:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: -2px; }
.auth-pw-btn svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   开通成功页
   ============================================================ */
.auth-done { display: grid; gap: 12px; }
.auth-panel {
    border-radius: 13px;
    padding: 15px 17px;
    border: 1px solid;
    font-size: 13.5px; line-height: 2;
}
.auth-panel.is-soft { background: #f8fafc; border-color: #e8eef6; }
.auth-panel.is-key  { background: #f5f8ff; border-color: #d5e2ff; }
.auth-panel-t {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: #3b63e8;
}
.auth-panel-t svg { width: 15px; height: 15px; display: block; }
.auth-kv { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.auth-kv > :first-child { flex: 0 0 auto; min-width: 70px; font-size: 12.5px; color: var(--auth-muted); }
.auth-kv > b { font-weight: 600; color: #0f172a; }
.auth-kv a { color: var(--auth-accent); text-decoration: none; }
.auth-kv a:hover { text-decoration: underline; }
.auth-code {
    padding: 1px 7px;
    border-radius: 6px;
    background: #eef2f7;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px; color: #475569;
}
.auth-secret {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 15px; letter-spacing: .06em; color: #0f172a;
}
.auth-url { word-break: break-all; font-size: 12.5px; }
.auth-done-note {
    margin-top: 14px;
    font-size: 12.5px; line-height: 1.95;
    color: var(--auth-muted);
}
.auth-done-note a { color: var(--auth-accent); text-decoration: none; }
.auth-done-note a:hover { text-decoration: underline; }
.auth-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
    margin-top: 20px;
}

/* ============================================================
   入场动效
   ============================================================ */
@keyframes authRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.auth-card > :not(form),
.auth-form > * { animation: authRise .5s var(--auth-ease) both; }
.auth-form > *:nth-child(1) { animation-delay: .05s; }
.auth-form > *:nth-child(2) { animation-delay: .10s; }
.auth-form > *:nth-child(3) { animation-delay: .14s; }
.auth-form > *:nth-child(4) { animation-delay: .18s; }
.auth-form > *:nth-child(5) { animation-delay: .22s; }
.auth-form > *:nth-child(6) { animation-delay: .26s; }
.auth-form > *:nth-child(7) { animation-delay: .30s; }
.auth-form > *:nth-child(8) { animation-delay: .34s; }
.auth-form > *:nth-child(9) { animation-delay: .38s; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 980px) {
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-aside { position: static; height: auto; align-self: auto; padding: 19px 24px; }
    .auth-aside::before { background-size: 36px 36px; opacity: .55; }
    .auth-aside::after { display: none; }
    .auth-aside-body, .auth-aside-foot { display: none; }
    .auth-mark { width: 38px; height: 38px; border-radius: 11px; }
    .auth-mark svg { width: 20px; height: 20px; }
    .auth-main { padding: 36px 24px 48px; align-items: flex-start; }
    .auth-card, .auth-card.is-wide { max-width: 100%; }
}
@media (max-width: 420px) {
    .auth-main { padding: 26px 17px 40px; }
    .auth-head { margin-bottom: 24px; }
    .auth-h1 { font-size: 22px; }
    .auth-cap-img { width: 104px; }
    .auth-actions { grid-template-columns: 1fr; }
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
    .auth-shell *,
    .auth-shell *::before,
    .auth-shell *::after {
        animation: none !important;
        transition: none !important;
    }
}