/* ========================================
   公共组件样式 - 全站页面通用组件库
   主题色：红白系列（C62828）
   ======================================== */

/* --- 通用增强 --- */
.back-link { display:inline-flex;align-items:center;gap:4px;color:#C62828;text-decoration:none;font-size:.9rem;margin-bottom:20px; }
.back-link:hover { text-decoration:underline; }
.page-title { font-size:1.5rem;color:#C62828;margin-bottom:6px; }
.page-subtitle { color:#888;font-size:.9rem;margin-bottom:24px; }
.highlight-box { background:linear-gradient(135deg,#FFF5F5,#FFEBEE);border:1px solid #EF9A9A;border-radius:8px;padding:16px 20px;margin:16px 0; }
.highlight-box .hl { color:#C62828;font-weight:700; }
.url-link { color:#1565C0;word-break:break-all;font-size:.85rem; }
.phase-divider { margin:30px 0 16px;padding:8px 16px;background:#C62828;color:#fff;border-radius:6px;font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px; }
.section-anchor { display: block; position: relative; top: -110px; visibility: hidden; }

/* 步骤中的补充说明列表 */
.step-sub {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: #f9f9f9;
    border-left: 3px solid #EF9A9A;
    border-radius: 0 6px 6px 0;
    font-size: .85rem;
    color: #555;
    line-height: 1.7;
}
.step-sub li { list-style: none; position: relative; padding-left: 18px; margin: 4px 0; }
.step-sub li::before { content: '•'; color: #C62828; font-weight: 700; position: absolute; left: 2px; }

/* --- 语雀风格链接/文件卡片 --- */
.yuque-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f7f7f7;
    border-radius: 10px;
    border: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    margin-bottom: 12px;
}
.yuque-card:hover {
    background: #f0f0f0;
    border-color: #ddd;
    transform: translateY(-1px);
}
.yuque-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}
.yuque-card .card-icon.link { background: #ff6a00; color: #fff; }
.yuque-card .card-icon.doc { background: #2b7de1; color: #fff; }
.yuque-card .card-icon.gov { background: #C62828; color: #fff; }
.yuque-card .card-icon.file { background: #5c6bc0; color: #fff; }
.yuque-card .card-icon.form { background: #7b1fa2; color: #fff; }
.yuque-card .card-icon.image { background: #43a047; color: #fff; }
.yuque-card .card-body { flex: 1; min-width: 0; }
.yuque-card .card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1d1d1d;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yuque-card .card-desc {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yuque-card .card-url {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}
.yuque-card .card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.yuque-card .card-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}
.yuque-card .card-action:hover { background: #C62828; color: #fff; }
.yuque-card.inline { margin: 8px 0 0; padding: 10px 14px; }
.yuque-card.inline .card-icon { width: 34px; height: 34px; font-size: 1rem; }

/* --- 顶部选项卡导航 --- */
.nav-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 -32px 24px;
    padding: 8px 32px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 50px;
    z-index: 40;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.nav-tab:hover { color: #C62828; background: #FFF5F5; }
.nav-tab.active {
    color: #C62828;
    background: #FFEBEE;
    border-bottom-color: #C62828;
    font-weight: 600;
}

/* --- 文档在线预览灯箱（PDF / WPS）--- */
.pdf-lightbox, .wps-lightbox, .img-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 30px;
}
.pdf-lightbox.open, .wps-lightbox.open, .img-lightbox.open { display: flex; }
.pdf-lightbox .pdf-frame, .wps-lightbox .wps-frame {
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
/* 图片灯箱：点击查看原图大图 */
.img-lightbox .img-frame {
    max-width: 94vw;
    max-height: 92vh;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.img-lightbox .img-cap {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ddd;
    font-size: 0.85rem;
    pointer-events: none;
}
.img-lightbox .lb-close,
.pdf-lightbox .lb-close, .wps-lightbox .lb-close {
    position: absolute;
    top: 14px;
    right: 24px;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1000;
    background: rgba(0,0,0,.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-lightbox .lb-close:hover,
.pdf-lightbox .lb-close:hover, .wps-lightbox .lb-close:hover { background: rgba(0,0,0,.6); }
/* 可点击放大的图片提示 */
.img-zoomable { cursor: zoom-in; transition: transform .2s; }
.img-zoomable:hover { transform: scale(1.02); }

/* --- 响应式 --- */
@media (max-width: 768px) {
    .nav-tabs { margin: 0 -16px 24px; padding: 0 16px; top: 50px; }
    .nav-tab { padding: 7px 10px; font-size: 0.8rem; }
    .yuque-card { padding: 12px; }
    .yuque-card .card-title { font-size: 0.9rem; }
    .pdf-lightbox, .wps-lightbox { padding: 16px; }
}