/* ============================================================
   certificate.css —— 证书提取页专属样式
   主色：紫色 #7c3aed（hover #6d28d9）
   双拖拽框并排；进度条 0→30→50→100%；
   成功框底 #f0fdf4 字 #166534 框 #bbf7d0；
   失败框底 #fef2f2 字 #991b1b 框 #fecaca。
   ============================================================ */

.page-cert .cert-wrap { max-width: 860px; margin: 0 auto; }
.page-cert .cert-card .card-header { color: var(--mw-purple); }

.page-cert .cert-dropzones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .page-cert .cert-dropzones { grid-template-columns: 1fr; }
}

.page-cert .cert-dropzone {
    display: block;
    position: relative;
    border: 2px dashed #d5c8f0;
    border-radius: var(--mw-radius);
    background: #faf7ff;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all .18s ease;
    outline: none;
}
.page-cert .cert-dropzone:hover,
.page-cert .cert-dropzone:focus-visible {
    border-color: var(--mw-purple);
    background: #f3edff;
}
.page-cert .cert-dropzone.is-over {
    border-color: var(--mw-purple);
    background: #ede4ff;
    transform: translateY(-1px);
}
.page-cert .cert-dropzone.is-ready {
    border-style: solid;
    border-color: var(--mw-purple);
    background: #f0e8ff;
}

.page-cert .cert-drop-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.page-cert .cert-drop-title { font-weight: 600; color: var(--mw-heading); font-size: 1em; }
.page-cert .cert-drop-hint { color: var(--mw-muted); font-size: .85em; margin-top: 2px; }
.page-cert .cert-drop-file {
    margin-top: 10px;
    font-size: .82em;
    color: var(--mw-purple);
    word-break: break-all;
    min-height: 1.2em;
}

.page-cert .cert-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.page-cert .cert-actions .btn-primary,
.page-cert .cert-actions .btn-purple { background: var(--mw-purple); color: #fff; border: none; padding: 9px 22px; border-radius: var(--mw-radius-sm); cursor: pointer; font-size: .95em; font-family: inherit; transition: background .15s; }
.page-cert .cert-actions .btn-purple:hover:not(:disabled) { background: var(--mw-purple-hover); }
.page-cert .cert-actions .btn-purple:disabled { opacity: .55; cursor: not-allowed; }
.page-cert .cert-actions .btn:not(.btn-purple) { background: #fff; color: var(--mw-menu-fg); border: 1px solid var(--mw-search-border); padding: 9px 20px; border-radius: var(--mw-radius-sm); cursor: pointer; font-size: .95em; font-family: inherit; transition: all .15s; }
.page-cert .cert-actions .btn:not(.btn-purple):hover { background: var(--mw-menu-bg-hover); color: var(--mw-menu-fg-hover); }

.page-cert .cert-progress { margin: 8px 0 14px; }
.page-cert .cert-progress-track {
    height: 8px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
}
.page-cert .cert-progress-bar {
    height: 100%;
    background: var(--mw-purple);
    width: 0%;
    transition: width .25s ease;
}
.page-cert .cert-progress-text {
    margin-top: 6px;
    color: var(--mw-muted);
    font-size: .85em;
}

.page-cert .cert-result {
    padding: 14px 16px;
    border-radius: var(--mw-radius-sm);
    margin: 10px 0 12px;
    line-height: 1.65;
    font-size: .95em;
    white-space: pre-wrap;
    word-break: break-word;
}
.page-cert .cert-result.ok {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.page-cert .cert-result.fail {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.page-cert .cert-tips {
    color: var(--mw-muted);
    font-size: .85em;
    margin-top: 8px;
    line-height: 1.7;
}

/* 操作流程卡：告知用户先结束占用文件的 Java 进程再复制 mv.db / cache。
   图是 690x582 的任务管理器截图，宽于内容区时缩放，高度按比例跟随。 */
.page-cert .cert-flow { margin-top: 18px; }
.page-cert .cert-flow .card-header { color: var(--mw-purple); }
.page-cert .cert-flow-steps {
    margin: 0 0 12px;
    padding-left: 22px;
    line-height: 1.8;
    font-size: .93em;
}
.page-cert .cert-flow-steps li + li { margin-top: 4px; }
.page-cert .cert-flow-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid var(--mw-search-border);
    border-radius: var(--mw-radius-sm);
}
.page-cert .cert-flow-caption {
    color: var(--mw-muted);
    font-size: .82em;
    margin-top: 6px;
    line-height: 1.7;
}

/* 锁定态卡片 */
.page-cert .cert-lock {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
    border-color: #e9d5ff;
}
.page-cert .cert-lock-title { color: var(--mw-purple); font-size: 1.15em; margin-bottom: 8px; }
.page-cert .cert-lock-desc { color: var(--mw-muted); margin-bottom: 18px; font-size: .92em; }
.page-cert .cert-lock .btn-purple { background: var(--mw-purple); color: #fff; border: none; padding: 9px 22px; border-radius: var(--mw-radius-sm); font-size: .95em; }
.page-cert .cert-lock .btn-purple:hover { background: var(--mw-purple-hover); color: #fff; }