/* ============================================================
   h5 毕业论文排版工具页样式（h5-biyelunwen-paiban.html）
   主色对齐 SaaS 站：蓝 #0070b8 / #0d86d6 渐变
   交互：卡片全量常显（不随步骤隐藏），未激活置灰；
        诊断采用杀毒软件式动态扫描（进度条 + 逐条揭示 + 延时）
   ============================================================ */
:root { color-scheme: light only; }

.paiban-tool {
    background: #f5f9fd;
    border-radius: 16px;
    padding: 24px 22px;
    margin: 20px 0 8px;
}

/* ---------- 步骤条 ---------- */
.paiban-steps {
    display: flex;
    align-items: flex-start;
    margin: 0 0 26px;
    list-style: none;
    padding: 0;
}
.paiban-steps li {
    flex: 1;
    text-align: center;
    position: relative;
    color: #94a8b8;
    font-size: 13px;
}
.paiban-steps li::before {
    content: attr(data-step);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #e3edf5;
    color: #7a93a8;
    font-weight: 700;
    position: relative;
    z-index: 2;
}
.paiban-steps li::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e3edf5;
}
.paiban-steps li:last-child::after { display: none; }
.paiban-steps li.active { color: #0070b8; font-weight: 600; }
.paiban-steps li.active::before { background: #0d86d6; color: #fff; box-shadow: 0 3px 10px rgba(13,134,214,.35); }
.paiban-steps li.done { color: #0070b8; }
.paiban-steps li.done::before { background: #0d86d6; color: #fff; }
.paiban-steps li.done::after { background: #0d86d6; }

/* ---------- 工具卡片：常显 + 禁用态 ---------- */
.paiban-card {
    background: #fff;
    border: 1px solid #e3edf5;
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(0,112,184,.06);
    transition: opacity .25s;
}
.paiban-card.disabled { opacity: .45; }
.paiban-card h2 {
    font-size: 1.05rem;
    margin: 0 0 14px;
    color: #0a2540;
    display: flex;
    align-items: center;
    gap: 8px;
}
.paiban-card h2 .step-no {
    display: inline-flex;
    width: 24px; height: 24px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#0d86d6,#00558c);
    color: #fff; font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.paiban-card .card-tip {
    color: #7a93a8;
    font-size: 13px;
    margin: -6px 0 14px;
    line-height: 1.6;
}

/* ---------- 学校选择 ---------- */
.school-search { position: relative; }
.school-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d4e3f0;
    border-radius: 10px;
    font-size: 15px;
    color: #0a2540;
    background: #fbfdff;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s;
}
.school-input:focus { border-color: #0d86d6; box-shadow: 0 0 0 3px rgba(13,134,214,.12); }
.school-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #d4e3f0;
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(10,37,64,.12);
    display: none;
}
.school-dropdown.show { display: block; }
.school-dropdown .sd-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #0a2540;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.school-dropdown .sd-item:hover, .school-dropdown .sd-item.hover { background: #eef6fd; }
.school-dropdown .sd-item .sd-name { flex: 1; }
.school-dropdown .sd-item .sd-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    margin-left: 10px;
    background: #eef6fd;
    color: #0d86d6;
    white-space: nowrap;
}
.school-dropdown .sd-item .sd-degree-ug { background:#e8f1fe; color:#1a6fd6; }
.school-dropdown .sd-item .sd-degree-master { background:#f1ebfc; color:#7c4cd0; }
.school-dropdown .sd-item .sd-degree-phd { background:#e8defc; color:#5a2db0; border:1px solid #d0bff5; }
.school-dropdown .sd-item .sd-degree-ce { background:#fff2e3; color:#e07b1a; }
#school-tag.sd-degree-ug { background:#e8f1fe; color:#1a6fd6; }
#school-tag.sd-degree-master { background:#f1ebfc; color:#7c4cd0; }
#school-tag.sd-degree-phd { background:#e8defc; color:#5a2db0; border:1px solid #d0bff5; }
#school-tag.sd-degree-ce { background:#fff2e3; color:#e07b1a; }
.school-dropdown .sd-head {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0070b8;
    border-bottom: 1px solid #eef3f8;
    margin-bottom: 2px;
}
.school-dropdown .sd-empty {
    padding: 12px 14px;
    color: #94a8b8;
    font-size: 13px;
    text-align: center;
}

/* 选中回填框：未选时灰色占位，选中后显示 学校 + 学历标签 */
.school-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed #c8dcec;
    background: #f8fbfd;
    min-height: 46px;
}
.school-selected.has-school { border: 1px solid #bfdcf0; background: #eef6fd; }
.school-selected .ss-placeholder { color: #a8bccb; font-size: 14px; flex: 1; }
.school-selected .ss-name { font-weight: 600; color: #0a2540; font-size: 15px; }
.school-selected .ss-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #bfdcf0;
    color: #0d86d6;
}
.school-selected .ss-change {
    border: none;
    background: none;
    color: #0d86d6;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: auto;
    white-space: nowrap;
}

/* ---------- 上传区 ---------- */
.upload-zone {
    border: 2px dashed #b9d4e8;
    border-radius: 12px;
    padding: 30px 16px;
    text-align: center;
    background: #fbfdff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: #0d86d6; background: #eef6fd; }
.upload-zone .uz-icon { font-size: 2.2rem; line-height: 1; }
.upload-zone .uz-title { font-size: 15px; color: #0a2540; margin: 10px 0 4px; font-weight: 600; }
.upload-zone .uz-sub { font-size: 13px; color: #94a8b8; }
.upload-zone .uz-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 22px;
    background: linear-gradient(135deg,#0d86d6,#00558c);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.file-info {
    display: none;
    margin-top: 12px;
    padding: 12px 14px;
    background: #eef6fd;
    border: 1px solid #bfdcf0;
    border-radius: 10px;
    font-size: 14px;
    color: #0a2540;
    align-items: center;
    gap: 8px;
}
.file-info.show { display: flex; }
.file-info .fi-name { flex: 1; word-break: break-all; }
.file-info .fi-size { color: #7a93a8; font-size: 13px; white-space: nowrap; }

/* ---------- 扫描进度（杀毒软件式） ---------- */
.scan-box { margin-top: 2px; }
.scan-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.scan-top .scan-title { font-size: 14px; color: #0a2540; font-weight: 600; flex: 1; }
.scan-top .scan-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(13,134,214,.25);
    border-top-color: #0d86d6;
    border-radius: 50%;
    animation: paiban-spin .7s linear infinite;
}
.scan-bar {
    height: 8px;
    background: #e5eef5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.scan-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#0d86d6,#16a56a);
    transition: width .35s ease;
}
.scan-status { font-size: 13px; color: #7a93a8; margin-bottom: 10px; }

.scan-list { list-style: none; margin: 0; padding: 0; }
.scan-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px dashed #eef3f8;
    font-size: 14px;
    color: #0a2540;
    opacity: .35;
    transition: opacity .25s;
}
.scan-list li.s-live { opacity: 1; }
.scan-list li:last-child { border-bottom: none; }
.scan-list .si-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    margin-top: 1px;
    background: #c3d6e4;
}
.scan-list li.s-scan .si-dot { animation: paiban-blink 1s ease infinite; }
.scan-list li.s-ok .si-dot { background: #16a56a; }
.scan-list li.s-bad .si-dot { background: #e34f5b; }
.scan-list .si-body { flex: 1; }
.scan-list .si-body .si-name { font-weight: 600; }
.scan-list .si-body .si-detail { color: #7a93a8; font-size: 13px; margin-top: 2px; line-height: 1.5; }
.scan-list li.s-scan .si-body .si-state { color: #94a8b8; font-size: 12px; margin-top: 2px; }
@keyframes paiban-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- 诊断报告：左问题列表 / 右绿勾统计 ---------- */
.diag-wrap { display: flex; gap: 16px; }
.diag-list { flex: 1; min-width: 0; }
.diag-sum {
    width: 160px;
    flex-shrink: 0;
    background: #f5f9fd;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.diag-sum .ds-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #16a56a;
    color: #fff;
    font-size: 24px;
    line-height: 46px;
    margin-bottom: 8px;
}
.diag-sum .ds-num { font-size: 1.8rem; font-weight: 700; color: #16a56a; line-height: 1.2; }
.diag-sum .ds-label { font-size: 13px; color: #7a93a8; margin-top: 4px; line-height: 1.5; }
.diag-sum .ds-bad {
    font-size: 13px;
    color: #e34f5b;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #dde8f1;
}
.diag-sum .ds-bad b { font-size: 1.2rem; }

/* ---------- 预览墙 ---------- */
.preview-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch;
}
.preview-scroll .pv-page {
    flex-shrink: 0;
    width: 150px;
    border: 1px solid #d4e3f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(10,37,64,.08);
}
.preview-scroll .pv-page img { width: 100%; display: block; }
.preview-scroll .pv-page .pv-num {
    font-size: 12px;
    color: #7a93a8;
    text-align: center;
    padding: 5px 0;
}
.preview-tip { color: #94a8b8; font-size: 12px; margin-top: 2px; }

/* ---------- 解锁下载（置于预览墙下） ---------- */
.unlock-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #dde8f1;
}
.unlock-box .ub-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 12px;
    color: #0a2540;
}
.unlock-box .ub-price .ub-num { font-size: 1.9rem; font-weight: 700; color: #d33a54; }
.unlock-box .ub-price .ub-desc { font-size: 13px; color: #7a93a8; }
.unlock-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg,#0d86d6,#00558c);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.unlock-btn:disabled { opacity: .55; cursor: not-allowed; }
.unlock-note {
    text-align: center;
    font-size: 12px;
    color: #94a8b8;
    margin-top: 10px;
}

/* ---------- 返回合集 ---------- */
.paiban-back {
    text-align: center;
    margin: 18px 0 30px;
}
.paiban-back a { color: #0d86d6; font-size: 14px; text-decoration: none; }
.paiban-back a:hover { text-decoration: underline; }

/* ---------- 提示条 ---------- */
.paiban-msg {
    display: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.paiban-msg.show { display: block; }
.paiban-msg.err { background: #fdeef0; border: 1px solid #f6c9cf; color: #c23b4a; }
.paiban-msg.ok { background: #e8f7f0; border: 1px solid #bfe8d3; color: #128a5c; }

@keyframes paiban-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .paiban-tool { padding: 18px 14px; }
    .paiban-steps li { font-size: 11px; }
    .paiban-steps li::before { width: 26px; height: 26px; line-height: 26px; }
    .paiban-steps li::after { top: 13px; }
    .preview-scroll .pv-page { width: 130px; }
    .diag-wrap { flex-direction: column; }
    .diag-sum {
        width: auto;
        flex-direction: row;
        gap: 12px;
        justify-content: flex-start;
        text-align: left;
    }
    .diag-sum .ds-icon { margin-bottom: 0; }
    .diag-sum .ds-bad { margin-top: 0; padding-top: 0; border-top: none; margin-left: 12px; }
}

/* 手机端：减少留白，内容更宽 */
@media (max-width: 768px) {
    .paiban-card { padding: 14px 12px; border-radius: 10px; margin-bottom: 12px; }
    .paiban-card h2 { font-size: 1rem; margin-bottom: 10px; }
    .school-input { font-size: 15px; padding: 10px 12px; }
}

/* 上传区固定高度，防抖动 */
.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 10px;
    border: 1.5px dashed #c5d4e3;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: border-color .2s;
}
.upload-zone:hover { border-color: #0d86d6; }
.uz-icon-wrap { position: relative; font-size: 40px; line-height: 1; }
.uz-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #52c41a;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uz-hint {
    font-size: 13px;
    color: #8a9bb0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uz-btn {
    padding: 8px 24px;
    background: #0d86d6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
/* main-content白底保留，paiban-card同白底，用间距+分隔线区分 */
.paiban-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8eef5;
}
.paiban-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.paiban-card h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}
.breadcrumb {
    padding: 0 0 10px 0 !important;
}

/* ============================================================
   v10 诊断报告升级：杀毒软件式 + A4 预览墙
   ============================================================ */
.diag-wrap { flex-direction: column; gap: 0; }
.diag-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #0a2540, #123f6d);
    color: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
}
.dh-score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.dh-score b { font-size: 2.2rem; line-height: 1; color: #fff; }
.dh-score span { font-size: 11px; color: #9fc0e8; margin-top: 4px; }
.dh-stats { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dh-stat { font-size: 13px; line-height: 1.5; color: #d7e5f5; }
.dh-stat b { font-size: 1.2rem; }
.dh-stat.bad b { color: #ff7b88; }
.dh-stat.ok b { color: #4dd9a0; }
.dh-stat.fix b { color: #ffd166; }
.diag-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.di-item {
    border: 1px solid #e3ecf4;
    border-radius: 10px;
    padding: 11px 14px;
    background: #fff;
}
.di-item.pass { border-left: 3px solid #16a56a; }
.di-item.bad { border-left: 3px solid #e34f5b; background: #fffbfb; }
.di-item.warn { border-left: 3px solid #e8b23a; background: #fffcf5; }
.di-head { display: flex; align-items: center; gap: 8px; }
.di-flag {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    font-size: 12px; line-height: 22px; text-align: center; color: #fff;
}
.di-item.pass .di-flag { background: #16a56a; }
.di-item.bad .di-flag { background: #e34f5b; }
.di-item.warn .di-flag { background: #e8b23a; }
.di-name { font-weight: 600; font-size: 14px; color: #0a2540; flex: 1; min-width: 0; }
.di-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.di-badge.bad { background: #fde3e7; color: #d43a4f; }
.di-badge.ok { background: #e3f7ee; color: #128a5c; }
.di-detail { font-size: 13px; color: #5a6f84; margin-top: 6px; line-height: 1.55; }
.di-excerpt {
    margin-top: 8px;
    background: #f6f9fc;
    border: 1px dashed #cfdcea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #43586d;
    line-height: 1.65;
}
.di-excerpt .de-tag {
    display: inline-block;
    font-size: 11px;
    color: #0d86d6;
    background: #e7f2fb;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 6px;
}
.di-fix { margin-top: 8px; font-size: 12px; color: #128a5c; font-weight: 600; }
.di-fix.df-x { color: #b3c2cf; font-weight: 400; }

/* A4 预览墙：卡片 + 左右箭头 */
.preview-wall { position: relative; margin-top: 16px; }
.preview-scroll { scroll-behavior: smooth; padding: 8px 2px 10px; }
.pv-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #d4e3f0; background: #fff; color: #0a2540;
    font-size: 16px; line-height: 1; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(10,37,64,.14);
}
.pv-nav:hover { background: #eef6fd; }
.pv-nav.prev { left: -15px; }
.pv-nav.next { right: -15px; }
.preview-scroll .pv-page {
    width: 210px; height: 297px;   /* A4 21:29.7 */
    position: relative;
    flex-shrink: 0;
    border: 1px solid #d4e3f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(10,37,64,.08);
}
.preview-scroll .pv-page .pv-body {
    position: absolute; top: 0; left: 0; right: 0; bottom: 26px;
    padding: 20px 18px;
    overflow: hidden;
    font-family: 'SimSun', 'Songti SC', serif;
    font-size: 11px;
    line-height: 1.75;
    color: #1a1a1a;
    white-space: pre-wrap;
    word-break: break-all;
}
.preview-scroll .pv-page .pv-num {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: 12px; color: #7a93a8; text-align: center;
    padding: 6px 0; background: #f7fafd; border-top: 1px solid #edf3f9;
}
@media (max-width: 640px) {
    .diag-hero { flex-wrap: wrap; gap: 10px 14px; padding: 14px; }
    .dh-stats { gap: 4px 14px; }
    .dh-stat { font-size: 12px; }
    .preview-scroll .pv-page { width: 130px; height: 184px; }
    .preview-scroll .pv-page .pv-body { padding: 12px 10px; font-size: 8px; line-height: 1.7; }
    .pv-nav.prev { left: -8px; }
    .pv-nav.next { right: -8px; }
}

/* 已支付态：下载/报告入口 */
.paid-box {
    margin-top: 16px;
    background: #eefaf3;
    border: 1px solid #bfe8d3;
    border-radius: 12px;
    padding: 20px 22px;
}
.pb-head {
    font-size: 17px; font-weight: 700; color: #128a5c;
    display: flex; align-items: center; gap: 6px;
}
.pb-desc { font-size: 13px; color: #3f6b57; margin: 8px 0 16px; line-height: 1.6; }
.pb-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 22px; border-radius: 8px;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.pb-btn.primary { background: #128a5c; color: #fff; }
.pb-btn.primary:hover { background: #0f7a50; }
.pb-btn.ghost { background: #fff; color: #128a5c; border: 1px solid #128a5c; }
.pb-btn.ghost:hover { background: #f0faf5; }

/* PC 扫码支付浮层 */
#qr-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,37,64,.5); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.qr-box {
    background: #fff; border-radius: 14px;
    padding: 26px 30px 22px; width: 300px; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.qr-title { font-size: 16px; font-weight: 700; color: #0a2540; margin-bottom: 16px; }
.qr-img { width: 210px; height: 210px; border: 1px solid #e2ecf5; border-radius: 8px; }
.qr-tip { font-size: 13px; color: #5a6f84; line-height: 1.7; margin-top: 12px; }
.qr-close {
    margin-top: 14px; width: 100%;
    padding: 10px 0; border-radius: 8px;
    border: 1px solid #d4e3f0; background: #f7fafd; color: #0a2540;
    font-size: 14px; cursor: pointer;
}
.qr-close:hover { background: #eef6fd; }