/* ================================================================
   关于博主页专属（about.html）
   源：pages.css（原第 4959-5668 行区间内容，按需拆分）
   ================================================================ */

/* 头图：双栏（文字 + 印章头像） */
.ab-masthead-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-32);
    align-items: center;
}
.ab-slogan {
    margin-bottom: var(--space-4);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--primary-dark);
}
.ab-sub { margin-bottom: var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-top: var(--space-20);
}
.ab-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 158px;
}
.ab-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(93, 151, 67, 0.40);
    animation: dnSpin 18s linear infinite;
}
/* 印泥圆盘层：与右侧 author-widget 头像同构的两层结构。
   圆盘（带圆角）只裁它自己的渐变背景；内层 img 无圆角，绝不被削角。
   若把圆角/背景/边框全压在 img 上，border-radius:50% 会裁切 img 绘制内容，
   logo 笔画顶到方形上下边 → 圆裁切削掉 logo 上下尖端。 */
.ab-avatar-wrap::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 3px solid var(--primary-lighter);
    background:
        radial-gradient(circle at 50% 40%, #ffffff 0%, rgba(255, 255, 255, 0.95) 55%, var(--primary-lighter) 100%);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.9),
        inset 0 -3px 8px rgba(93, 151, 67, 0.10),
        0 10px 28px rgba(93, 151, 67, 0.22);
}
/* 内层印章：方形完整显示，无 border-radius 故绝不裁切（logo 大小保持 116 不变） */
.ab-avatar-img {
    position: relative;
    z-index: 1;
    width: 116px;
    height: 116px;
    object-fit: contain;
    display: block;
    padding: var(--space-4);
    filter: drop-shadow(0 2px 4px rgba(93, 151, 67, 0.18));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-avatar-wrap:hover .ab-avatar-img {
    transform: rotate(360deg) scale(1.05);
}
/* 关于我：文字 + 代码卡 */
.ab-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-24);
    align-items: start;
}
.ab-about-text p { margin-bottom: var(--space-12);
    font-size: var(--fs-14);
    line-height: 2.05;
    color: var(--text-secondary);
}
.ab-about-text strong {
    color: var(--primary-dark);
}
.ab-code {
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: #f8fbf4;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ab-code-header {
    display: flex;
    align-items: center; gap: var(--space-6);
    padding: var(--space-10) var(--space-16);
    border-bottom: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(93, 151, 67, 0.06);
}
.ab-code-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.ab-code-dot--red    { background: #f87171; }
.ab-code-dot--yellow { background: #fbbf24; }
.ab-code-dot--green  { background: #4ade80; }
.ab-code-title {
    margin-left: var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--primary-dark);
}
.ab-code-body { padding: var(--space-16) ;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: #41533a;
    overflow-x: auto;
}
.ab-kw  { color: #8839ef; font-weight: 600; }
.ab-var { color: #0184bc; }
.ab-str { color: #4a8c33; }
/* 个人档案 */
.ab-profile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-16);
}
.ab-profile {
    padding: var(--space-20) var(--space-16);
    text-align: center;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ab-profile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ab-profile-icon {
    display: block; margin-bottom: var(--space-8);
    font-size: var(--fs-26);
}
.ab-profile-label {
    display: block; margin-bottom: var(--space-4);
    font-size: var(--fs-11);
    letter-spacing: 0.10em;
    color: var(--text-muted);
}
.ab-profile-value {
    display: block;
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--lh-ui);
}
/* 三大方向面板 */
.ab-dir-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-24);
    align-items: start;
}
.ab-dir-intro h3 {
    margin: 12px 0 9px;
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-dir-intro > p { margin-bottom: var(--space-12);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.ab-bullets li {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ab-bullets li::before {
    content: '▸';
    position: absolute;
    left: var(--space-4);
    color: var(--primary-color);
    font-weight: 700;
}
.ab-skills {
    display: grid;
    gap: var(--space-12);
}
.ab-skill {
    display: flex; gap: var(--space-12);
    align-items: flex-start;
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ab-skill:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}
.ab-skill-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-12);
    font-size: var(--fs-20);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}
.ab-skill-head {
    display: flex;
    align-items: baseline; gap: var(--space-8); margin-bottom: var(--space-2);
}
.ab-skill-head h4 {
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-skill-level {
    padding: 1px var(--space-8);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 700;
}
.ab-skill p {
    font-size: var(--fs-12);
    line-height: 1.7;
    color: var(--text-muted);
}
.ab-articles {
    margin-top: var(--space-24);
}
.ab-articles h4 { margin-bottom: var(--space-10);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--primary-dark);
}
.ab-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
}
.ab-articles-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ab-articles-grid a span {
    flex: none;
    color: var(--primary-color);
    transition: transform var(--transition-fast);
}
.ab-articles-grid a:hover {
    color: var(--primary-dark);
    border-color: rgba(93, 151, 67, 0.40);
    transform: translateX(3px);
}
.ab-articles-grid a:hover span {
    transform: translateX(3px);
}
/* 成长历程：年份卡片墙 */
.ab-milestones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}
.ab-milestone {
    position: relative; padding: var(--space-20) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    border-top: 3px solid var(--primary-color);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ab-milestone:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ab-milestone-year {
    display: inline-block; margin-bottom: var(--space-8);
    padding: var(--space-2) var(--space-12);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.13);
    color: var(--primary-dark);
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    font-weight: 800;
}
.ab-milestone h3 { margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-milestone p {
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
/* 写作理念 */
.ab-philosophy {
    position: relative;
    padding: var(--space-24) var(--space-20) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ab-philosophy:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ab-philosophy-num {
    position: absolute;
    top: var(--space-8);
    right: var(--space-12);
    font-family: var(--font-mono);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.13);
    -webkit-user-select: none;
    user-select: none;
}
.ab-philosophy-icon {
    display: block;
    margin-bottom: var(--space-10);
    font-size: var(--fs-26);
}
.ab-philosophy h3 { margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-philosophy p {
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
/* 技术栈 */
.ab-stack-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-12);
}
.ab-stack {
    padding: var(--space-16) var(--space-12);
    text-align: center;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.ab-stack:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 151, 67, 0.38);
    box-shadow: var(--shadow-md);
}
.ab-stack-icon {
    display: block; margin-bottom: var(--space-6);
    font-size: var(--fs-22);
}
.ab-stack h3 { margin-bottom: var(--space-4);
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-stack-tag {
    display: inline-block;
    padding: 1px var(--space-8);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 700;
}
/* 网站架构 */
.ab-arch {
    display: flex;
    align-items: center; gap: var(--space-12);
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ab-arch:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}
.ab-arch-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-12);
    font-size: var(--fs-18);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}
.ab-arch-label {
    flex: none;
    width: 66px;
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.ab-arch-value {
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--text-primary);
}
/* 项目经历 */
.ab-project {
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ab-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ab-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-12);
}
.ab-project-icon {
    font-size: var(--fs-26);
}
.ab-project h3 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-project p { margin-bottom: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.ab-project-techs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: auto;
}
.ab-project-techs span {
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 600;
}
/* 开源与社区 */
.ab-oss-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.ab-oss {
    display: flex; gap: var(--space-16);
    align-items: flex-start;
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ab-oss:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(93, 151, 67, 0.12);
}
.ab-oss-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-12);
    font-size: var(--fs-22);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}
.ab-oss h3 {
    margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-oss p {
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.ab-oss strong {
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}
/* 联系我 */
.ab-contact { padding: var(--space-20) ;
    text-align: center;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.ab-contact:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.40);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.14);
}
.ab-contact-icon {
    display: block; margin-bottom: var(--space-8);
    font-size: var(--fs-26);
}
.ab-contact h3 {
    margin-bottom: var(--space-4);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ab-contact p {
    font-size: var(--fs-12);
    color: var(--text-muted);
    word-break: break-all;
}
@media (max-width: 1199px) {
    .ab-profile-grid, .ab-stack-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 991px) {
    .ab-masthead-grid {
        grid-template-columns: 1fr;
    }

    .ab-avatar-wrap {
        order: -1;
        margin: 0 auto;
    }

    .ab-about-grid, .ab-dir-grid, .ab-oss-grid {
        grid-template-columns: 1fr;
    }

    .ab-milestones {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .ab-profile-grid, .ab-stack-grid, .ab-milestones, .ab-articles-grid {
        grid-template-columns: 1fr;
    }

    .ab-profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}