/* ===== ARTICLE BANNER ===== */
.page-banner--articles{
    padding:140px 24px 20px;
    text-align:center;
    background:linear-gradient(180deg,rgba(0,220,130,0.04) 0%,transparent 60%);
    position:relative;
}
.page-banner--articles h1{
    font-size:clamp(2rem,5vw,3rem);
    font-weight:900;
    color:var(--text);
    margin-bottom:12px;
}
.page-banner--articles p{
    font-size:1rem;
    color:var(--text-sec);
    margin-bottom:20px;
}
.banner-breadcrumb{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.82rem;
    color:var(--text-muted);
    font-family:'DM Mono',monospace;
}
.banner-breadcrumb a{color:var(--text-sec);transition:color 0.2s}
.banner-breadcrumb a:hover{color:var(--accent)}
.banner-breadcrumb .sep{color:var(--text-muted);opacity:0.5}
.banner-breadcrumb .current{color:var(--accent);font-weight:600}

/* ===== ARTICLES LIST ===== */
.articles-section{padding:15px 0 100px}
.articles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:28px;
    margin-top:10px;
}
/* ===== ARTICLES SEARCH ===== */
.articles-search{
    max-width:520px;
    margin:0 auto 28px;
    position:relative;
}
.articles-search input{
    width:100%;
    box-sizing:border-box;
    padding:13px 44px 13px 18px;
    background:var(--surface);
    border:1px solid var(--surface-border);
    border-radius:var(--radius);
    color:var(--text);
    font-size:0.95rem;
    font-family:'Noto Sans SC',sans-serif;
    transition:border-color .2s,box-shadow .2s;
}
.articles-search input::placeholder{color:var(--text-muted)}
.articles-search input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(0,220,130,0.12);
}
.articles-search .search-ico{
    position:absolute;
    right:16px;top:50%;transform:translateY(-50%);
    color:var(--text-muted);font-size:1rem;pointer-events:none;
}
.article-card{
    background:var(--surface);
    border:1px solid var(--surface-border);
    border-radius:var(--radius);
    padding:28px 24px;
    transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.article-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),transparent);
    opacity:0;
    transition:opacity 0.35s;
}
.article-card:hover{
    border-color:var(--accent);
    background:var(--surface-hover);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,220,130,0.08);
}
.article-card:hover::before{opacity:1}
.article-card-head{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:0.78rem;
    font-family:'DM Mono',monospace;
}
.article-date{color:var(--text-sec)}
.article-category{
    color:var(--accent);
    padding:3px 10px;
    border-radius:60px;
    background:var(--accent-dim);
    border:1px solid rgba(0,220,130,0.2);
    font-size:0.7rem;
    font-weight:500;
}
.article-title{
    font-size:1.15rem;
    font-weight:700;
    color:var(--text);
    line-height:1.4;
    transition:color 0.2s;
}
.article-title a{color:inherit}
.article-title a:hover{color:var(--accent)}
.article-excerpt{
    font-size:0.88rem;
    color:var(--text-sec);
    line-height:1.7;
    flex:1;
}
.article-card-foot{
    padding-top:4px;
}
.read-more{
    font-size:0.85rem;
    color:var(--accent);
    font-weight:500;
    transition:transform 0.2s;
    display:inline-block;
}
.read-more:hover{transform:translateX(4px)}

/* ===== ARTICLES LOADING ===== */
.articles-loading{
    grid-column:1/-1;
    text-align:center;
    padding:80px 20px;
    color:var(--text-muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
.loading-spinner{
    width:36px;height:36px;
    border:3px solid var(--surface-border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== ARTICLES EMPTY ===== */
.articles-empty{
    text-align:center;
    padding:100px 20px;
}
.articles-empty .empty-icon{font-size:4rem;margin-bottom:20px;opacity:0.5}
.articles-empty h3{
    font-size:1.5rem;
    color:var(--text);
    margin-bottom:12px;
}
.articles-empty p{
    color:var(--text-sec);
}

/* ===== ARTICLES PAGINATION ===== */
.articles-pagination{
    margin-top:48px;
    text-align:center;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}
.articles-pagination a,
.articles-pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 14px;
    border-radius:var(--radius-xs);
    border:1px solid var(--surface-border);
    background:var(--surface);
    color:var(--text-sec);
    font-size:0.85rem;
    font-family:'DM Mono',monospace;
    transition:all 0.2s;
}
.articles-pagination a:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-dim);
}
.articles-pagination .current{
    background:var(--accent);
    color:#060b18;
    border-color:var(--accent);
    font-weight:600;
}
.articles-pagination .disabled{opacity:0.3;pointer-events:none}

/* ===== BUILT-IN ARTICLE DETAIL (适配内置模板类名) ===== */
/* 隐藏旧站导航/页脚 — 仅限文章详情页(内置模板)，通过 body[data-page="article"] 限定 */
body[data-page="article"] header, body[data-page="article"] #header, body[data-page="article"] .site-header,
body[data-page="article"] footer, body[data-page="article"] #footer, body[data-page="article"] .site-footer{display:none !important}
body[data-page="article"] nav{display:none !important}

/* 页面背景 */
body{background:#060b18 !important;color:#c9d1d9 !important}

/* 内置模板文章容器 */
article{max-width:1100px;margin:0 auto;padding:60px 24px 80px}
article h1{font-size:1.8rem !important;font-weight:800 !important;color:#e7e9ea !important;line-height:1.35 !important;margin:0 0 20px 0 !important;padding-bottom:24px !important;border-bottom:1px solid rgba(201,209,217,0.08) !important}
article .meta{display:flex !important;align-items:center !important;gap:16px !important;font-size:0.82rem !important;color:rgba(201,209,217,0.55) !important;margin-bottom:24px !important;font-family:"DM Mono",monospace !important;flex-wrap:wrap !important}
article .meta a{color:rgba(201,209,217,0.7) !important;text-decoration:none !important}
article .meta a:hover{color:#00dc82 !important}
article .content{font-size:1rem !important;line-height:1.85 !important;color:rgba(201,209,217,0.75) !important;background:#0f1628 !important;border:1px solid rgba(0,220,130,0.08) !important;border-radius:12px !important;padding:32px 28px !important;margin-top:8px !important}
article .content p{margin-bottom:14px !important;color:rgba(201,209,217,0.75) !important}
article .content h2{font-size:1.3rem !important;font-weight:700 !important;color:#e7e9ea !important;margin:24px 0 12px !important}
article .content h3{font-size:1.1rem !important;font-weight:700 !important;color:#e7e9ea !important;margin:20px 0 10px !important}
article .content a{color:#00dc82 !important;text-decoration:underline !important;text-underline-offset:3px}
article .content img{border-radius:8px !important;margin:14px 0 !important;width:100% !important;height:auto !important}
article .content blockquote{border-left:3px solid #00dc82 !important;padding:12px 20px !important;margin:16px 0 !important;background:rgba(0,220,130,0.05) !important;border-radius:0 6px 6px 0 !important;color:#e7e9ea !important;font-style:italic}
article .content pre{background:#0d1525 !important;border:1px solid rgba(0,220,130,0.08) !important;border-radius:8px !important;padding:16px 20px !important;overflow-x:auto !important;font-family:"DM Mono",monospace !important;font-size:0.85rem !important;margin:14px 0}
article .content code{font-family:"DM Mono",monospace !important;font-size:0.88em !important;background:#0d1525 !important;padding:2px 6px !important;border-radius:4px !important;color:#00dc82}
article .nav-links{display:none !important}

@media(max-width:768px){
    article{padding:32px 16px 60px}
    article h1{font-size:1.4rem !important}
    article .content{padding:24px 18px !important}
}

/* ===== ARTICLE DETAIL (自定义模板) ===== */
.article-detail-section{padding:60px 0 100px}
.article-detail-grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:48px;
    margin-top:32px;
}
.article-main{
    background:var(--surface);
    border:1px solid var(--surface-border);
    border-radius:var(--radius);
    padding:40px 36px;
}
.article-meta{
    display:flex;
    align-items:center;
    gap:16px;
    font-size:0.82rem;
    color:var(--text-sec);
    margin-bottom:20px;
    font-family:'DM Mono',monospace;
    flex-wrap:wrap;
}
.article-meta-category{
    padding:3px 10px;
    border-radius:60px;
    background:var(--accent-dim);
    border:1px solid rgba(0,220,130,0.2);
    color:var(--accent);
    font-weight:500;
}
.article-detail-title{
    font-size:1.8rem;
    font-weight:800;
    color:var(--text);
    line-height:1.3;
    margin-bottom:28px;
    padding-bottom:28px;
    border-bottom:1px solid var(--border);
}
.article-content{
    font-size:1rem;
    line-height:1.85;
    color:var(--text-sec);
}
.article-content p{margin-bottom:16px;color:var(--text-sec)}
.article-content h2{
    font-size:1.3rem;
    font-weight:700;
    color:var(--text);
    margin:28px 0 14px;
    line-height:1.4;
}
.article-content h3{
    font-size:1.1rem;
    font-weight:700;
    color:var(--text);
    margin:20px 0 10px;
}
.article-content img{
    border-radius:var(--radius-sm);
    margin:16px 0;
    width:100%;
    height:auto;
}
.article-content strong,
.article-content b{color:var(--text);font-weight:600}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-content ul,.article-content ol{margin:12px 0;padding-left:20px}
.article-content li{margin-bottom:8px}
.article-content blockquote{
    border-left:3px solid var(--accent);
    padding:12px 20px;
    margin:16px 0;
    background:var(--accent-dim);
    border-radius:0 var(--radius-xs) var(--radius-xs) 0;
    color:var(--text);
    font-style:italic;
}
.article-content pre{
    background:#0d1525;
    border:1px solid var(--surface-border);
    border-radius:var(--radius-xs);
    padding:16px 20px;
    overflow-x:auto;
    font-family:'DM Mono',monospace;
    font-size:0.85rem;
    margin:16px 0;
}
.article-content code{
    font-family:'DM Mono',monospace;
    font-size:0.88em;
    background:#0d1525;
    padding:2px 6px;
    border-radius:4px;
    color:var(--accent);
}
.article-no-content{color:var(--text-muted);font-style:italic}
.article-back-wrap{
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--border);
}

/* ===== ARTICLE SIDEBAR ===== */
.article-sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-card{
    background:var(--surface);
    border:1px solid var(--surface-border);
    border-radius:var(--radius);
    padding:24px;
}
.sidebar-card h4{
    font-size:0.95rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.sidebar-card h4::before{
    content:'';
    width:16px;height:2px;
    background:var(--accent);
    border-radius:1px;
}
.sidebar-card p{
    font-size:0.85rem;
    color:var(--text-sec);
    line-height:1.7;
    margin-bottom:14px;
}
.sidebar-card p:last-child{margin-bottom:0}
.sidebar-cta{
    background:linear-gradient(135deg,rgba(0,220,130,0.08),rgba(59,130,246,0.05));
    border-color:rgba(0,220,130,0.15);
}
.sidebar-cta p{margin-bottom:18px}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .article-detail-grid{grid-template-columns:1fr}
    .article-sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
    .articles-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media(max-width:768px){
    .article-detail-grid{grid-template-columns:1fr;gap:24px}
    .article-sidebar{display:flex;flex-direction:column}
    .article-main{padding:28px 22px}
    .article-detail-title{font-size:1.4rem}
    .articles-grid{grid-template-columns:1fr;gap:20px}
    .page-banner--articles{padding:110px 20px 60px}
}