:root { --data-red:#9f302b; --data-green:#254630; --data-gold:#b58a47; --data-ink:#1d2722; --data-muted:#5b665f; --data-line:#d9ded9; --data-paper:#fff; --data-page:#f4f5f2; }
* { box-sizing: border-box; }
.jiapu-data-page { margin:0; color:var(--data-ink); background:var(--data-page); font-size:17px; }
.data-wrap { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.data-breadcrumb { display:flex; flex-wrap:wrap; gap:9px; padding:19px 0; color:var(--data-muted); font-size:15px; }
.data-breadcrumb a + a::before, .data-breadcrumb a + span::before { content:"/"; margin-right:9px; color:#9ca59f; }
.data-hero { padding:70px 0 64px; color:#fff; background:linear-gradient(100deg, rgba(26,54,36,.98), rgba(45,73,51,.91)), url('/assets/pedigree-tree-commercial.webp') center 40%/cover; }
.data-kicker { margin:0 0 12px; color:#efd497; font-weight:800; }
.data-hero h1 { max-width:800px; margin:0; font-size:clamp(38px,5vw,60px); line-height:1.12; letter-spacing:0; }
.data-hero > .data-wrap > p:not(.data-kicker) { max-width:760px; margin:18px 0 0; color:rgba(255,255,255,.9); font-size:20px; line-height:1.85; }
.data-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.data-actions a, .data-actions button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 21px; border:1px solid rgba(255,255,255,.62); border-radius:6px; color:#fff; background:transparent; font:inherit; font-weight:800; cursor:pointer; }
.data-actions .primary { border-color:var(--data-red); background:var(--data-red); }
.data-section { padding:68px 0 76px; }
.section-heading { display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; margin-bottom:28px; }
.section-heading small { color:var(--data-red); font-weight:800; }
.section-heading h2 { margin:7px 0 11px; font-size:clamp(30px,4vw,43px); letter-spacing:0; }
.section-heading p { margin:0; color:var(--data-muted); line-height:1.8; }
.progress-card { padding:20px; border:1px solid var(--data-line); border-radius:8px; background:#fff; }
.progress-card strong { display:block; color:var(--data-red); font-size:34px; }
.progress-card span { display:block; min-height:48px; margin-top:3px; color:var(--data-muted); line-height:1.5; }
.progress-card > div { height:8px; overflow:hidden; border-radius:8px; background:#e4e8e4; }
.progress-card i { display:block; width:0; height:100%; background:var(--data-red); transition:width .25s ease; }
.progress-card button { margin-top:14px; padding:0; border:0; color:var(--data-muted); background:transparent; font:inherit; font-size:15px; cursor:pointer; }
.checklist-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.checklist-group { padding:26px; border:1px solid var(--data-line); border-radius:8px; background:#fff; }
.checklist-group h3 { display:flex; align-items:center; gap:11px; margin:0; font-size:24px; letter-spacing:0; }
.checklist-group h3 span { color:var(--data-red); font-size:14px; }
.checklist-group > p { margin:9px 0 18px; color:var(--data-muted); line-height:1.7; }
.checklist-group ul { display:grid; gap:1px; margin:0; padding:0; list-style:none; background:var(--data-line); }
.checklist-group li { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; min-height:62px; padding:11px 13px; background:#fff; line-height:1.55; }
.checklist-group li[data-status="ready"] { border-left:4px solid #3d7950; }
.checklist-group li[data-status="missing"] { border-left:4px solid var(--data-red); }
.checklist-group li[data-status="verify"] { border-left:4px solid var(--data-gold); }
.check-controls { display:flex; gap:5px; }
.check-controls button { min-height:32px; padding:0 8px; border:1px solid var(--data-line); border-radius:4px; color:#525d56; background:#fff; font-size:13px; cursor:pointer; }
.check-controls button.is-selected { border-color:var(--data-green); color:#fff; background:var(--data-green); }
.flow-band { padding:62px 0 72px; color:#fff; background:#203b29; }
.flow-band h2 { margin:0 0 25px; font-size:34px; letter-spacing:0; }
.flow-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.flow-steps a { min-width:0; padding:22px; border:1px solid rgba(255,255,255,.19); border-radius:7px; color:#fff; background:rgba(255,255,255,.055); }
.flow-steps b { display:block; color:#efd497; font-size:14px; }
.flow-steps strong { display:block; margin:9px 0 7px; font-size:20px; }
.flow-steps span { color:rgba(255,255,255,.72); line-height:1.65; }
.import-panel { margin-top:28px; padding:28px; border:1px solid var(--data-line); border-radius:8px; background:#fff; }
.import-panel h2 { margin:0 0 10px; font-size:28px; }
.import-panel p { color:var(--data-muted); line-height:1.8; }
.import-file { display:grid; gap:10px; margin:22px 0; padding:24px; border:2px dashed #b8c1ba; border-radius:7px; background:#fafbf9; }
.import-file input { font-size:16px; }
.import-help { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.import-help article { padding:20px; border-left:4px solid var(--data-gold); background:#f7f2e9; }
.import-help strong { display:block; margin-bottom:7px; }
.import-help span { color:var(--data-muted); line-height:1.65; }
.import-summary { display:flex; flex-wrap:wrap; gap:18px; margin:18px 0; }
.import-summary span { padding:10px 14px; border:1px solid var(--data-line); border-radius:5px; }
.import-summary strong { color:var(--data-red); }
.import-table-wrap { overflow:auto; max-height:480px; border:1px solid var(--data-line); }
.import-table { width:100%; min-width:900px; border-collapse:collapse; font-size:15px; }
.import-table th,.import-table td { padding:11px 12px; border-bottom:1px solid var(--data-line); text-align:left; vertical-align:top; }
.import-table th { position:sticky; top:0; color:#fff; background:var(--data-green); }
.import-table tr.has-error td { background:#fff1ef; }
.import-status { min-height:28px; color:var(--data-muted); }
.import-status[data-type="error"] { color:var(--data-red); }
.import-status[data-type="success"] { color:#26703c; }
.import-submit { min-height:48px; margin-top:18px; padding:0 22px; border:0; border-radius:5px; color:#fff; background:var(--data-red); font:inherit; font-weight:800; cursor:pointer; }
.import-submit:disabled { opacity:.48; cursor:not-allowed; }
@media(max-width:900px){.section-heading{grid-template-columns:1fr}.checklist-groups{grid-template-columns:1fr}.flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.import-help{grid-template-columns:1fr}}
@media(max-width:620px){.data-wrap{width:min(100% - 28px,1160px)}.data-hero{padding:54px 0}.data-hero > .data-wrap > p:not(.data-kicker){font-size:18px}.data-section{padding:48px 0}.checklist-group{padding:19px}.checklist-group li{grid-template-columns:1fr}.check-controls{flex-wrap:wrap}.check-controls button{flex:1}.flow-steps{grid-template-columns:1fr}.import-panel{padding:19px}}
