/* ============================================================================
   ozon-filltool 子页面 · 统一设计系统适配  ★ 复用 /design-system-v2.css 单一事实源
   主题：中国邮政绿 + 琥珀 · 模块强调色 = 天蓝 #0EA5E9 (--m-ozon, Ozon 渠道)
   规则：颜色 / 圆角 / 间距 / 阴影一律走设计系统变量；不出现禁用紫 /
         不出现第三方蓝 / 不出现纯黑阴影 / 不使用 -apple-system 字体。
   说明：本文件仅定义工具专属组件（上传 / 校验 / 进度 / 成功），基础 token、站点导航、
         按钮、卡片、表格、表单由 /design-system-v2.css 提供。
   ============================================================================ */

/* 模块强调色（Ozon = 天蓝），供 hero 装饰与重点标记使用 */
:root { --ac: var(--m-ozon); }

/* 工具容器收窄为表单友好宽度（覆盖设计系统 1200px 默认值） */
.container { max-width: 760px; }

/* ===== Hero（复用设计系统 .hero 绿色标题区；天蓝模块强调色由 --ac 提供） ===== */
/* 标题/导语样式已由 /design-system-v2.css 的 .hero / .hero h1 / .hero p.lead 提供，
   本页不再自定义 header，避免与统一主题重复。 */

/* ===== Main ===== */
main {
    flex: 1;
    padding: 28px 16px 8px;
}

/* ===== 面板（上传 / 纠错区块，对齐设计系统 .card 配方） ===== */
.upload-section,
.correct-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--sh-1);
    margin-bottom: 24px;
}
.upload-section h2,
.correct-section h2 {
    font-size: var(--fs-h3);
    margin-bottom: 8px;
    color: var(--ink);
}

.hint {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-bottom: 16px;
}

/* ===== 错误汇总面板（对齐设计系统语义红 --bad，保留原信息架构范式） ===== */
.error-summary {
    background: #FBE9E7;
    border: 3px solid var(--bad);
    padding: 20px;
    margin-bottom: 24px;
    border-radius: var(--r-md);
}
.error-summary:focus {
    outline: 3px solid var(--bad);
    outline-offset: 2px;
}
.error-summary h2 {
    color: var(--bad);
    font-size: var(--fs-h3);
    font-weight: 700;
    margin-bottom: 8px;
}
.error-summary__count {
    font-size: var(--fs-body);
    color: var(--ink);
    margin-bottom: 12px;
}
.error-filter {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bad);
}
.error-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    cursor: pointer;
    color: var(--bad);
    font-weight: 600;
}
.error-summary__list {
    list-style: none;
}
.error-summary__list li {
    margin-bottom: 8px;
}
.error-summary__list a {
    color: var(--bad);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}
.error-summary__list a:hover {
    text-decoration: none;
    background: rgba(217, 100, 89, .1);
}
.error-summary__list .error-item--mismatch {
    font-weight: 700;
}
.error-summary__list .error-item--mismatch::before {
    content: "⚠ 核心验收点 ";
    background: var(--bad);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--fs-xs);
    margin-right: 6px;
}

/* ===== 文件名选项组 ===== */
.options-group {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.options-group legend {
    padding: 0 8px;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--brand-deep);
}
.options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}
.option-field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
}
.option-field label {
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}
.option-field input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    background: #fff;
    color: var(--ink);
    font-family: var(--font-sans);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.option-field input[type="text"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-50);
}
.options-group code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    background: var(--brand-50);
    color: var(--brand-deep);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===== 文件上传 ===== */
.file-input-group {
    margin-bottom: 20px;
}
.file-label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}
.file-label__title {
    display: block;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--ink);
}
.file-label__desc {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-sans);
}
input[type="file"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-50);
}
.file-hint {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-top: 4px;
}
.file-chosen {
    font-size: var(--fs-sm);
    color: var(--ok);
    margin-top: 4px;
    font-weight: 500;
}

/* ===== 按钮（对齐设计系统 .btn 配方：药丸形 / 绿色主操作 / 白底幽灵次操作） ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all var(--dur);
    font-family: var(--font-sans);
    line-height: 1.2;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
    background: var(--brand);
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: var(--brand-deep);
}
.btn-primary:disabled {
    background: #A9C7B6;
    color: #fff;
    cursor: not-allowed;
    transform: none;
}
.btn-secondary {
    background: #fff;
    color: var(--brand-deep);
    border-color: var(--line);
}
.btn-secondary:hover {
    border-color: var(--brand);
    background: var(--brand-50);
}
.btn-link {
    background: transparent;
    color: var(--brand-deep);
    padding: 6px 10px;
}
.btn-link:hover {
    background: var(--brand-50);
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-50);
}

/* ===== 进度区域 ===== */
.progress-section { margin-top: 24px; }
.progress-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--sh-1);
    display: flex;
    align-items: center;
    gap: 20px;
}
.progress-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner {
    display: block;
    width: 36px;
    height: 36px;
    border: 4px solid var(--brand-100);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-info { flex: 1; }
.progress-info h3 {
    font-size: var(--fs-h3);
    margin-bottom: 4px;
    color: var(--ink);
}
.progress-detail {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.progress-bar {
    margin-top: 12px;
    height: 8px;
    background: var(--brand-100);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar__fill {
    height: 100%;
    background: var(--brand);
    border-radius: 4px;
    transition: width 0.3s;
}

/* ===== 成功区域 ===== */
.success-section { margin-top: 24px; }
.success-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--sh-1);
    text-align: center;
    border-top: 4px solid var(--ok);
}
.success-icon {
    font-size: 3rem;
    color: var(--ok);
    margin-bottom: 8px;
}
.success-card h2 {
    font-size: var(--fs-h3);
    margin-bottom: 8px;
    color: var(--ink);
}
.success-detail {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-bottom: 20px;
}
.download-links { margin-bottom: 20px; }
.download-link {
    display: inline-block;
    margin: 0 8px 8px;
    padding: 10px 20px;
    background: var(--brand-50);
    border: 2px solid var(--brand);
    border-radius: var(--r-pill);
    color: var(--brand-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: all var(--dur);
}
.download-link:hover {
    background: var(--brand);
    color: #fff;
}
button.download-link {
    font-family: inherit;
    cursor: pointer;
}
button.download-link:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.download-copy {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}
.download-copy__input {
    flex: 1 1 280px;
    max-width: 460px;
    padding: 8px 10px;
    font-size: var(--fs-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.download-copy__btn {
    padding: 8px 16px;
    background: #fff;
    color: var(--brand-deep);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur);
}
.download-copy__btn:hover {
    border-color: var(--brand);
    background: var(--brand-50);
}
.download-hint {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

/* ===== 状态栏 ===== */
.status-bar {
    padding: 12px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* ===== Footer（对齐设计系统：浅色底 + 绿灰分隔，去除近黑底） ===== */
.footer {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--gray);
    padding: var(--sp-5) 0;
    font-size: var(--fs-sm);
    text-align: center;
}

/* ===== 响应式 ===== */
@media (max-width: 600px) {
    .progress-card {
        flex-direction: column;
        text-align: center;
    }
    .btn { width: 100%; }
}