/* ============================================================
   auth.css — 注册 / 登录 / 开发者入驻 / 开发者白皮书 通用表单样式
   设计基线：36px 高输入框 · 8px 圆角按钮 · 主色 #4467F5 辅助色 #22D486
   两栏布局（左侧卖点 + 右侧表单），< 900px 自动堆叠
   ============================================================ */

/* ---------- Page hero banner（紧凑版，登录/重置页首屏可见表单） ---------- */
.auth-hero {
    background: linear-gradient(135deg, #4467F5 0%, #6A87F7 45%, #22D486 100%);
    color: #fff;
    padding: 24px 0 20px;
}
.auth-hero-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.auth-hero h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: 0.5px; }
.auth-hero p  { font-size: 13px; line-height: 1.5; opacity: .92; margin: 0; max-width: 780px; }
.auth-hero .breadcrumb { font-size: 12px; opacity: .85; margin-bottom: 6px; }
.auth-hero .breadcrumb a { color: #fff; text-decoration: none; }
.auth-hero .breadcrumb a:hover { text-decoration: underline; }

/* ---------- 两栏主区 ---------- */
.auth-section {
    max-width: 1120px;
    margin: -12px auto 40px;
    padding: 0 24px;
}
.auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(22, 35, 89, 0.08);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 520px;
}
.auth-card .auth-left {
    background:
        radial-gradient(1200px 400px at -10% -20%, rgba(68,103,245,0.12), transparent 60%),
        radial-gradient(600px 300px at 110% 110%, rgba(34,212,134,0.14), transparent 60%),
        linear-gradient(160deg, #F4F7FF 0%, #EDF9F2 100%);
    padding: 44px 40px;
    position: relative;
    color: #1B2541;
}
.auth-card .auth-left h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.auth-card .auth-left .sub { color: #4A5578; font-size: 14px; margin-bottom: 28px; }
.auth-card .auth-left ul.feature-list { list-style: none; padding: 0; margin: 0; }
.auth-card .auth-left ul.feature-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; font-size: 14px; color: #2B3655;
    line-height: 1.55;
}
.auth-card .auth-left ul.feature-list li::before {
    content: ''; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
    background: linear-gradient(135deg, #4467F5, #22D486);
    border-radius: 6px;
    box-shadow: inset 0 0 0 3px #fff;
}
.auth-card .auth-left .mini-cta {
    position: absolute; left: 40px; right: 40px; bottom: 32px;
    border-top: 1px dashed rgba(68,103,245,0.25);
    padding-top: 16px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: #4A5578;
}
.auth-card .auth-left .mini-cta a { color: #4467F5; text-decoration: none; font-weight: 600; }

.auth-card .auth-right { padding: 40px 44px; }
.auth-title {
    font-size: 22px; font-weight: 700; color: #1B2541; margin: 0 0 4px;
}
.auth-sub   { font-size: 13px; color: #6B7699; margin: 0 0 22px; }

/* ---------- Form ---------- */
.auth-form .form-row { margin-bottom: 14px; }
.auth-form label.lbl {
    display: block; font-size: 13px; color: #2B3655; font-weight: 600;
    margin-bottom: 6px;
}
.auth-form label.lbl .req { color: #EF4444; margin-left: 2px; }
.auth-form .help { font-size: 12px; color: #8B96B5; margin-top: 4px; line-height: 1.5; }
.auth-form .err { font-size: 12px; color: #EF4444; margin-top: 4px; min-height: 14px; line-height: 1.4; }

.auth-form input[type=text],
.auth-form input[type=tel],
.auth-form input[type=password],
.auth-form input[type=email],
.auth-form input[type=url],
.auth-form textarea,
.auth-form select {
    width: 100%;
    height: 36px;           /* 用户偏好 */
    padding: 0 12px;
    border: 1px solid #DBE0EE;
    border-radius: 8px;      /* 用户偏好 */
    font-size: 14px;
    color: #1B2541;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.auth-form textarea { height: 96px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
    border-color: #4467F5;
    box-shadow: 0 0 0 3px rgba(68,103,245,0.12);
}
.auth-form input::placeholder,
.auth-form textarea::placeholder { color: #A4ACC4; }

/* 并排两格 */
.auth-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* 带按钮的输入组（验证码） */
.auth-form .input-group { display: grid; grid-template-columns: 1fr 112px; gap: 10px; }
.auth-form .input-group .mini-btn {
    height: 36px; line-height: 34px;
    border: 1px solid #4467F5; color: #4467F5;
    background: #fff; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.auth-form .input-group .mini-btn:hover { background: #4467F5; color: #fff; }
.auth-form .input-group .mini-btn:disabled,
.auth-form .input-group .mini-btn.is-disabled {
    border-color: #DBE0EE; color: #8B96B5; background: #F4F6FB; cursor: not-allowed;
}

/* 技能标签多选 */
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tag-picker .chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: 999px;
    background: #F4F6FB; border: 1px solid #DBE0EE;
    font-size: 13px; color: #4A5578;
    cursor: pointer; user-select: none;
    transition: all .15s;
}
.tag-picker .chip:hover { border-color: #4467F5; color: #4467F5; }
.tag-picker .chip.is-on {
    background: linear-gradient(135deg, rgba(68,103,245,0.12), rgba(34,212,134,0.12));
    border-color: #4467F5; color: #1D3599;
    font-weight: 600;
}
.tag-picker .chip::before {
    content: ''; display: inline-block; width: 10px; height: 10px;
    margin-right: 6px; border-radius: 3px; border: 1px solid #A4ACC4;
    background: #fff;
}
.tag-picker .chip.is-on::before {
    background: linear-gradient(135deg, #4467F5, #22D486);
    border-color: transparent;
    box-shadow: inset 0 0 0 2px #fff;
}

/* 复选框行 */
.auth-form .check-line {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: #4A5578; line-height: 1.6;
    padding: 2px 0 4px;
}
.auth-form .check-line input { margin-top: 3px; accent-color: #4467F5; }
.auth-form .check-line a { color: #4467F5; text-decoration: none; }
.auth-form .check-line a:hover { text-decoration: underline; }

/* 提交按钮 */
.auth-form .btn-submit {
    width: 100%;
    height: 40px; line-height: 40px;
    padding: 0 16px;
    background: linear-gradient(135deg, #4467F5 0%, #22D486 100%);
    color: #fff; border: 0; border-radius: 8px; /* 用户偏好 */
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 8px 24px rgba(68,103,245,0.24);
}
.auth-form .btn-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(68,103,245,0.32); }
.auth-form .btn-submit:active:not(:disabled) { transform: translateY(0); }
.auth-form .btn-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* 切换提示（登录 ↔ 注册，注册 → 入驻） */
.auth-foot {
    margin-top: 18px; padding-top: 14px; border-top: 1px dashed #EEF0F7;
    text-align: center; font-size: 13px; color: #6B7699;
}
.auth-foot a { color: #4467F5; font-weight: 600; text-decoration: none; margin: 0 2px; }
.auth-foot a:hover { text-decoration: underline; }

/* ---------- 通用提示 Toast（auth.js 控制） ---------- */
#authToast {
    position: fixed; top: 90px; left: 50%; transform: translateX(-50%) translateY(-120%);
    padding: 10px 18px; border-radius: 10px;
    font-size: 14px; color: #fff; z-index: 10001;
    box-shadow: 0 10px 32px rgba(0,0,0,0.16);
    /* 只过渡 transform + opacity，避免其他属性重排导致"漂移" */
    transition: transform .28s ease, opacity .28s ease;
    max-width: 90%;
    opacity: 0;
    will-change: transform;
}
#authToast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#authToast.type-success { background: linear-gradient(135deg, #22C55E, #22D486); }
#authToast.type-error   { background: linear-gradient(135deg, #EF4444, #F97316); }
#authToast.type-info    { background: linear-gradient(135deg, #4467F5, #6A87F7); }

/* ---------- FDE 右侧认证流程侧栏（复用 docs 侧栏样式，增加 FDE 主题色覆盖） ---------- */
.docs-side { position: sticky; top: 80px; }
.side-card {
    background: #fff; border-radius: 14px; padding: 24px 22px;
    box-shadow: 0 12px 40px rgba(22,35,89,0.08);
    border-top: 3px solid #0D9488;
    border: 1px solid #EEF1F8;
    border-top: 3px solid #0D9488;
    transition: box-shadow .2s;
}
.side-card:hover {
    box-shadow: 0 16px 48px rgba(22,35,89,0.12);
}
.side-title {
    font-size: 16px; font-weight: 700; color: #1B2541;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px dashed #E6EAF5;
    display: flex; align-items: center; gap: 6px;
}

/* FDE 流程步骤（与开发者认证步骤结构一致，支持状态：current/done/locked/reviewing） */
.flow-steps { 
    display: flex; 
    flex-direction: column; 
    padding: 8px 0 4px;
}
.flow-step {
    display: flex; 
    gap: 12px; 
    align-items: flex-start;
    position: relative; 
    padding: 0 0 20px 0;
}
.flow-step:last-of-type { padding-bottom: 0; }
/* 步骤间连接线 - 竖向实线，从当前步骤圆点底部到下一个步骤圆点顶部 */
.flow-step:not(:last-of-type)::after {
    content: ''; 
    position: absolute; 
    left: 13px; 
    top: 28px; 
    bottom: 0;
    width: 2px; 
    background: #DDE2EC; 
    border-radius: 1px;
    z-index: 0;
}
/* 已完成步骤的连接线变绿色 */
.flow-step.done:not(:last-of-type)::after {
    background: linear-gradient(to bottom, #22D486, #DDE2EC);
}
/* 当前步骤的连接线变主题色 */
.flow-step.current:not(:last-of-type)::after {
    background: linear-gradient(to bottom, #0D9488, #DDE2EC);
}
.flow-step .flow-num {
    flex-shrink: 0; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    font-size: 13px; 
    font-weight: 700;
    background: #F1F3F8; 
    color: #8B96B5;
    transition: all .2s; 
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.flow-step .flow-info { 
    flex: 1; 
    min-width: 0; 
    padding-top: 2px; 
}
.flow-step .flow-label { 
    font-size: 13.5px; 
    font-weight: 700; 
    color: #1B2541; 
    line-height: 1.4;
}
.flow-step .flow-desc { 
    font-size: 11.5px; 
    color: #8B96B5; 
    line-height: 1.5; 
    margin-top: 3px; 
}

/* 状态：当前步骤 */
.flow-step.current .flow-num {
    background: #0D9488 !important; 
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13,148,136,0.18), 0 2px 8px rgba(13,148,136,0.2);
}
.flow-step.current .flow-label { color: #0D9488; }

/* 移除flow-arrow的默认显示 */
.flow-arrow { display: none; }

/* 状态：已完成 */
.flow-step.done .flow-num { background: #22D486; color: #fff; }
.flow-step.done .flow-label { color: #5A6482; }
.flow-step.done { opacity: .8; }

/* 状态：审核中 */
.flow-step.reviewing .flow-num { background: #F5A623; color: #fff; animation: pulse 2s infinite; }
.flow-step.reviewing .flow-label { color: #B57A0E; }

/* 状态：锁定 */
.flow-step.locked { opacity: .55; }
.flow-step.locked .flow-desc { color: #B3BCD0; }

/* 侧栏提示与 CTA */
.flow-tip {
    font-size: 12.5px; color: #5A6482; text-align: center;
    background: linear-gradient(135deg, #F0FDFA 0%, #E6FAF5 100%); 
    border-radius: 10px;
    padding: 10px 14px; margin: 14px 0 16px;
    line-height: 1.6;
    border: 1px solid #CCFBF1;
}
.side-link {
    display: block; text-align: center; margin-top: 12px;
    font-size: 12.5px; color: #8B96B5; text-decoration: none;
    transition: color .15s;
}
.side-link:hover { color: #0D9488; }

/* CTA按钮样式 */
.fde-cta {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(13,148,136,0.25);
    transition: all .2s;
}
.fde-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13,148,136,0.35);
}
.fde-cta:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* FDE 弹窗（复用 .form-input / .form-textarea / .form-label，增加弹窗外壳） */
.modal-mask {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 20, 55, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-box {
    position: relative; z-index: 1;
    width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 64px rgba(22, 35, 89, 0.28);
    display: flex; flex-direction: column;
    animation: certModalIn .22s ease-out;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 26px 14px; border-bottom: 1px solid #F0F3FA;
}
.modal-title { font-size: 17px; font-weight: 700; color: #1B2541; }
.modal-close {
    width: 30px; height: 30px; border: 0; background: #F4F7FF;
    border-radius: 8px; font-size: 18px; color: #8B96B5; cursor: pointer;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.modal-close:hover { background: #E8EDFA; color: #0D9488; }
.modal-body { padding: 16px 26px 8px; overflow-y: auto; flex: 1; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 26px 18px; border-top: 1px solid #F0F3FA;
}
.modal .form-group { margin-bottom: 14px; }
.modal .form-label { font-size: 13px; font-weight: 600; color: #2B3655; display: block; margin-bottom: 5px; }
.modal .form-label .req { color: #EF4444; margin-left: 2px; }
.modal .form-label .hint { color: #8B96B5; font-weight: 400; margin-left: 6px; font-size: 12px; }
.modal .form-input,
.modal select.form-input {
    width: 100%; box-sizing: border-box;
    height: 38px; padding: 0 12px;
    border: 1.5px solid #E0E6F2; border-radius: 8px;
    font-size: 14px; color: #1B2541; background: #fff;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.modal .form-textarea {
    width: 100%; box-sizing: border-box;
    min-height: 72px; padding: 10px 12px;
    border: 1.5px solid #E0E6F2; border-radius: 8px;
    font-size: 14px; color: #1B2541;
    resize: vertical; line-height: 1.5;
    font-family: inherit;
}
.modal .form-input:focus,
.modal .form-textarea:focus {
    outline: none; border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.modal .skill-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.modal .chip-label {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1.5px solid #E0E6F2; border-radius: 999px;
    font-size: 12.5px; color: #2B3655; cursor: pointer;
    transition: all .15s; background: #fff;
}
.modal .chip-label:hover { border-color: #0D9488; color: #0D9488; }
.modal .chip-label input[type="checkbox"] { margin: 0; }
.modal .chip-label:has(input:checked) {
    background: #F0FDFA; border-color: #0D9488; color: #0D9488;
}
.modal .form-agree { font-size: 12.5px; color: #5A6482; margin-top: 4px; }
.modal .form-agree label { cursor: pointer; }
.modal .btn {
    height: 38px; padding: 0 18px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent; transition: all .15s;
}
.modal .btn-primary {
    background: linear-gradient(135deg, #0D9488, #0EA5A4);
    color: #fff;
}
.modal .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,0.25); }
.modal .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.modal .btn-default {
    background: #fff; color: #5A6482; border-color: #D1D5DB;
}
.modal .btn-default:hover { background: #F4F7FF; }

/* FDE 专用流程步骤：状态 - done 显示✓ */
.flow-step.done .flow-num {
    background: #22D486; color: #fff;
}
.flow-step.done .flow-num::before {
    content: '✓'; font-size: 13px;
}
.flow-step.done .flow-num > * { display: none; }
.flow-step.done .flow-num { font-size: 0; }

/* FDE 弹窗中 value-card 网格（复用 value-grid） */
.fde-abilities-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 24px;
}
@media (max-width: 900px) {
    .fde-abilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .fde-abilities-grid { grid-template-columns: 1fr; }
}

.docs-wrap {
    max-width: 1160px; margin: -24px auto 32px; padding: 0 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
    align-items: start;
}
/* 移动端：左右栏堆叠，侧栏 CTA 固定底部 */
@media (max-width: 768px) {
    .docs-wrap {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 16px;
        margin-bottom: 100px;
    }
    .docs-side, .docs-aside { position: static; }
    .docs-card { padding: 20px 16px; }
    .side-card, .aside-card { padding: 18px 16px; }
    /* 侧栏主 CTA 固定底部（避开底部导航 58px + 安全区） */
    .side-card .partner-cta,
    .aside-card .aside-cta {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        z-index: 800;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    /* 认证表单：双列堆叠 + 紧凑内边距 */
    .cm-form { padding: 16px; }
    .cm-form .cm-row-2 { grid-template-columns: 1fr; gap: 0; }
    .cm-footer { padding: 12px 16px 16px; }
    .cert-modal-header { padding: 16px; }
}
.docs-main { min-width: 0; overflow: hidden; }
.docs-card {
    background: #fff; border-radius: 12px; padding: 32px 36px;
    box-shadow: 0 12px 48px rgba(22,35,89,0.08);
}
.docs-card h2 {
    font-size: 19px; color: #1B2541; margin: 34px 0 12px; padding-left: 12px;
    border-left: 4px solid #4467F5;
}
.docs-card h2:first-child { margin-top: 0; }
.docs-card p { color: #2B3655; font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.docs-card ol, .docs-card ul { color: #2B3655; font-size: 14px; line-height: 1.85; padding-left: 20px; margin: 0 0 12px; }
.docs-card ol li, .docs-card ul li { margin-bottom: 4px; }
.docs-card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* banner 数据点条（docs 页专用，不影响登录/重置页） */
.docs-hero { padding: 34px 0 30px; }

/* 白皮书导读区（左侧卡片顶部，从 Banner 下移） */
.docs-guide {
    background: linear-gradient(135deg, #F4F7FF 0%, #EBF1FF 100%);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 28px;
    border-left: 4px solid #4467F5;
}
.dg-tag {
    display: block;
    font-size: 19px; font-weight: 700;
    color: #1B2541;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.dg-desc {
    font-size: 14px; color: #2B3655; line-height: 1.7;
    margin-bottom: 10px;
    font-weight: 500;
}
.dg-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: #5A6482;
}
.hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-top: 20px;
}
.hero-stat {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 10px; padding: 12px 16px;
}
.hero-stat .hs-num { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
.hero-stat .hs-label { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }

/* 价值观卡片网格 */
.value-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin: 14px 0 8px;
}
.value-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: #F8FAFF; border: 1px solid #E6EAF5; border-radius: 10px;
    padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.value-item:hover { border-color: #B9C8F7; box-shadow: 0 4px 16px rgba(68,103,245,0.08); }
.value-item .vi-ic { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.value-item .vi-title { font-size: 14px; font-weight: 700; color: #1B2541; margin-bottom: 2px; }
.value-item .vi-desc { font-size: 13px; color: #5A6482; line-height: 1.6; }

/* ---------- 右侧认证流程侧栏 ---------- */
.docs-aside { position: sticky; top: 76px; }
.aside-card {
    background: #fff; border-radius: 12px; padding: 22px 20px;
    box-shadow: 0 12px 48px rgba(22,35,89,0.08);
    border-top: 3px solid #4467F5;
}
.aside-title {
    font-size: 16px; font-weight: 700; color: #1B2541;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px dashed #E6EAF5;
}
.cert-steps { display: flex; flex-direction: column; }
.cert-step {
    display: flex; gap: 10px; align-items: flex-start;
    position: relative; padding-bottom: 18px;
}
.cert-step:last-child { padding-bottom: 4px; }
/* 步骤间连接线 */
.cert-step:not(:last-child)::before {
    content: ''; position: absolute; left: 13px; top: 28px; bottom: 2px;
    width: 2px; background: #E6EAF5; border-radius: 1px;
}
.cert-step .cs-dot {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: #F1F3F8; color: #8B96B5;
    transition: all .15s; z-index: 1;
}
.cert-step .cs-body { flex: 1; min-width: 0; padding-top: 2px; }
.cert-step .cs-name { font-size: 14px; font-weight: 700; color: #1B2541; }
.cert-step .cs-desc { font-size: 12px; color: #8B96B5; line-height: 1.5; margin-top: 2px; }
.cert-step .cs-state { flex-shrink: 0; font-size: 12px; color: #B3BCD0; padding-top: 6px; }

/* 步骤状态：当前（蓝高亮） */
.cert-step.is-current .cs-dot {
    background: #4467F5; color: #fff;
    box-shadow: 0 0 0 4px rgba(68,103,245,0.16);
}
.cert-step.is-current .cs-name { color: #4467F5; }
.cert-step.is-current .cs-state { color: #4467F5; font-weight: 700; }
/* 步骤状态：已完成（绿） */
.cert-step.is-done .cs-dot { background: #22D486; color: #fff; }
.cert-step.is-done .cs-state { color: #0B815A; font-weight: 700; }
.cert-step.is-done .cs-name { color: #5A6482; }
.cert-step.is-done { opacity: .8; }
/* 步骤状态：审核中（黄色） */
.cert-step.is-pending .cs-dot { background: #F5A623; color: #fff; animation: pulse 2s infinite; }
.cert-step.is-pending .cs-state { color: #B57A0E; font-weight: 700; }
.cert-step.is-pending .cs-name { color: #B57A0E; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245, 166, 35, 0); }
}
/* 步骤状态：待解锁（灰虚） */
.cert-step.is-locked { opacity: .55; }
.cert-step.is-locked .cs-state { font-size: 13px; }

/* 侧栏提示与 CTA */
.aside-hint {
    font-size: 13px; color: #5A6482; text-align: center;
    background: #F4F7FF; border-radius: 8px;
    padding: 8px 12px; margin: 6px 0 14px;
}
.aside-cta {
    display: flex; width: 100%; height: 42px;
    align-items: center; justify-content: center;
    font-size: 14.5px;
}
.aside-link {
    display: block; text-align: center; margin-top: 10px;
    font-size: 12.5px; color: #8B96B5; text-decoration: none;
}
.aside-link:hover { color: #4467F5; }
.aside-cta.cta-disabled {
    background: #E0E6F2 !important; color: #8B96B5 !important;
    pointer-events: none; cursor: not-allowed !important;
    box-shadow: none !important;
}
.docs-card .tbl {
    width: 100%; min-width: 560px; border-collapse: collapse; margin: 10px 0 18px;
    font-size: 14px;
}
.docs-card .tbl th, .docs-card .tbl td {
    border: 1px solid #E6EAF5; padding: 10px 14px; text-align: left;
}
.docs-card .tbl th { white-space: nowrap; }
.docs-card .tbl td { white-space: normal; word-break: break-word; }
.docs-card .tbl th {
    background: #F4F7FF; color: #1B2541; font-weight: 700;
}
.docs-card .badge-ok {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: rgba(34,212,134,0.14); color: #0B815A; font-size: 12px; font-weight: 600;
}
.docs-card .docs-cta-row {
    display: flex; gap: 12px; margin-top: 28px; padding-top: 20px;
    border-top: 1px dashed #E6EAF5; flex-wrap: wrap;
}
.docs-card .btn-primary,
.docs-card .btn-ghost {
    height: 40px; line-height: 38px; padding: 0 20px; border-radius: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex;
    align-items: center;
}
.docs-card .btn-primary {
    background: linear-gradient(135deg, #4467F5, #22D486); color: #fff; border: 0;
    box-shadow: 0 8px 24px rgba(68,103,245,0.24);
}
.docs-card .btn-primary:hover { transform: translateY(-1px); }
.docs-card .btn-ghost {
    background: #fff; color: #4467F5; border: 1px solid #4467F5;
}
.docs-card .btn-ghost:hover { background: #F4F7FF; }

/* ---------- 登录 Tab 切换（短信/密码） ---------- */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid #EEF1F8;
    margin-bottom: 24px;
}
.auth-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #8A94A6;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
    user-select: none;
}
.auth-tab:hover { color: #4467F5; }
.auth-tab.active {
    color: #4467F5;
    border-bottom-color: #4467F5;
    font-weight: 600;
}
.auth-tab .tag-new {
    display: inline-block;
    background: linear-gradient(135deg, #4467F5, #22D486);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.auth-pane { display: none; }
.auth-pane.active { display: block; }

/* ---------- 短信验证码按钮 ---------- */
.sms-btn {
    padding: 0 16px;
    height: 36px;
    border: 1px solid #4467F5;
    border-radius: 8px;
    background: #fff;
    color: #4467F5;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.sms-btn:hover:not(:disabled) { background: #F4F7FF; }
.sms-btn:disabled {
    border-color: #D1D5DB;
    color: #9CA3AF;
    cursor: not-allowed;
    background: #F9FAFB;
}
.form-row-sms { display: flex; gap: 8px; }
.form-row-sms input { flex: 1; }

/* ---------- 芯动开发者认证弹窗 ---------- */
.cert-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center;
}
.cert-modal.is-open { display: flex; }
.cert-modal-mask {
    position: absolute; inset: 0;
    background: rgba(10, 20, 55, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cert-modal-dialog {
    position: relative; z-index: 1;
    width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 64px rgba(22, 35, 89, 0.28);
    display: flex; flex-direction: column;
    animation: certModalIn .22s ease-out;
}
@keyframes certModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cert-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 28px 16px; border-bottom: 1px solid #F0F3FA;
}
.cm-title { font-size: 18px; font-weight: 700; color: #1B2541; }
.cm-sub { font-size: 13px; color: #8B96B5; margin-top: 4px; }
.cm-close {
    width: 32px; height: 32px; border: 0; background: #F4F7FF;
    border-radius: 8px; font-size: 20px; color: #8B96B5; cursor: pointer;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.cm-close:hover { background: #E8EDFA; color: #4467F5; }

/* 弹窗内表单样式 */
.cm-form {
    padding: 20px 28px 16px; overflow-y: auto; flex: 1;
}
.cm-form .cm-row-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cm-form .form-row { margin-bottom: 14px; }
.cm-form .lbl { font-size: 13px; font-weight: 600; color: #2B3655; display: block; margin-bottom: 5px; }
.cm-form .lbl .req { color: #EF4444; margin-left: 2px; }
.cm-form .lbl-hint { color: #8B96B5; font-weight: 400; margin-left: 8px; font-size: 12px; }
.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="url"],
.cm-form textarea {
    width: 100%; box-sizing: border-box;
    height: 38px; padding: 0 12px;
    border: 1.5px solid #E0E6F2; border-radius: 8px;
    font-size: 14px; color: #1B2541;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.cm-form textarea {
    height: auto; min-height: 80px; padding: 10px 12px;
    resize: vertical; line-height: 1.5;
}
.cm-form input:focus, .cm-form textarea:focus {
    outline: none; border-color: #4467F5;
    box-shadow: 0 0 0 3px rgba(68, 103, 245, 0.12);
}
.cm-form .help { font-size: 12px; color: #8B96B5; margin-top: 4px; }
.cm-form .help.cm-counter { text-align: right; }
.cm-form .err { color: #EF4444; font-size: 12px; margin-top: 4px; min-height: 16px; }
.cm-form .check-line { margin: 12px 0; }
.cm-form .check-line label { font-size: 13px; color: #5A6482; }
.cm-form .check-line a { color: #4467F5; text-decoration: none; }
.cm-form .check-line a:hover { text-decoration: underline; }

/* 技能标签（弹窗内紧凑版） */
.cm-form .tag-picker {
    display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px;
}
.cm-form .tag-picker .chip {
    padding: 5px 12px; font-size: 12.5px;
    background: #F4F7FF; border: 1px solid #E0E6F2;
    border-radius: 999px; color: #5A6482; cursor: pointer;
    transition: all .15s; user-select: none;
}
.cm-form .tag-picker .chip:hover { border-color: #B9C8F7; color: #4467F5; }
.cm-form .tag-picker .chip.is-on {
    background: #4467F5; color: #fff; border-color: #4467F5;
    box-shadow: 0 2px 8px rgba(68, 103, 245, 0.24);
}

/* 弹窗底部按钮行 */
.cm-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 28px 20px; border-top: 1px solid #F0F3FA;
}
.cm-footer .btn {
    height: 40px; padding: 0 20px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; transition: all .15s;
}
.cm-footer .btn-default {
    background: #fff; color: #5A6482; border-color: #E0E6F2;
}
.cm-footer .btn-default:hover { background: #F4F7FF; }
.cm-footer .btn-primary {
    background: #4467F5; color: #fff; border-color: #4467F5;
    box-shadow: 0 4px 12px rgba(68, 103, 245, 0.24);
}
.cm-footer .btn-primary:hover { background: #3355D4; }
.cm-footer .btn-primary:disabled {
    opacity: .6; cursor: not-allowed;
}

/* ---------- 响应式：< 960px 侧栏下沉 ---------- */
@media (max-width: 960px) {
    .docs-wrap { grid-template-columns: 1fr; }
    .docs-side { position: static; }
    .docs-aside { position: static; }
}
/* ---------- 响应式：< 900px ---------- */
@media (max-width: 900px) {
    .auth-hero { padding: 52px 0 72px; }
    .auth-hero h1 { font-size: 24px; }
    .auth-card { grid-template-columns: 1fr; }
    .auth-card .auth-left { padding: 28px 24px 84px; }
    .auth-card .auth-right { padding: 28px 24px; }
    .auth-form .row-2, .auth-form .row-3 { grid-template-columns: 1fr; }
    .docs-card { padding: 28px 22px; }
    .docs-hero { padding: 26px 0 24px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
    .hero-stat { padding: 10px 14px; }
    .hero-stat .hs-num { font-size: 15px; }
    .value-grid { grid-template-columns: 1fr; gap: 10px; }
}