wuzilong
/
zkxw


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>方案D：混合方案 — 采集协议单查看弹窗</title>
    <style>
      /* ── Reset & Base ── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 14px;
      }
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          'Helvetica Neue', Arial, sans-serif;
        color: #1e293b;
        background: #e2e8f0;
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 16px;
        line-height: 1.6;
      }

      /* ── Modal Overlay ── */
      .overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: none;
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 32px 0;
        overflow-y: auto;
      }

      /* ── Dialog Shell ── */
      .dialog {
        width: 1200px;
        max-width: 98vw;
        background: #f5f7fa;
        border-radius: 16px;
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.15),
          0 0 0 1px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
        margin: auto 0;
      }

      /* ── Dialog Header ── */
      .dialog-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 28px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #fff;
      }
      .dialog-header h2 {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0.3px;
      }
      .dialog-header .protocol-id {
        opacity: 0.85;
        font-weight: 400;
        margin-left: 8px;
      }
      .dialog-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .dialog-close:hover {
        background: rgba(255, 255, 255, 0.32);
      }

      /* ── Dialog Body ── */
      .dialog-body {
        padding: 24px 28px;
        overflow-y: auto;
        max-height: calc(100vh - 160px);
        flex: 1;
      }

      /* ── Dialog Footer ── */
      .dialog-footer {
        padding: 16px 28px;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
      }
      .btn-close {
        padding: 10px 32px;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
      }
      .btn-close:hover {
        border-color: #10b981;
        color: #10b981;
        background: #ecfdf5;
      }

      /* ═══════════════════════════════════════════
     LAYER 1: SUMMARY KPI STRIP
     ═══════════════════════════════════════════ */
      .kpi-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
      }
      .kpi-card {
        background: #fff;
        border-radius: 12px;
        padding: 18px 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        border-left: 3px solid #10b981;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        position: relative;
        overflow: hidden;
      }
      .kpi-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.06), transparent 70%);
        pointer-events: none;
      }
      .kpi-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
      }
      .kpi-label {
        font-size: 12px;
        color: #94a3b8;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .kpi-value {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
      }
      .kpi-value .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }
      .kpi-value .status-dot.active {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
      }

      /* ═══════════════════════════════════════════
     LAYER 2: SECTION CARDS
     ═══════════════════════════════════════════ */
      .section-card {
        border-radius: 12px;
        padding: 22px 24px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        position: relative;
      }
      .section-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
      .section-card.bg-white {
        background: #fff;
      }
      .section-card.bg-green {
        background: #f0fdf4;
      }
      .section-card.bg-gray {
        background: #f8fafc;
      }

      /* Section Title */
      .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
      }
      .section-title::before {
        content: '';
        width: 3px;
        height: 18px;
        background: #10b981;
        border-radius: 2px;
        margin-right: 10px;
        flex-shrink: 0;
      }
      .section-title h3 {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
      }

      /* ── Data Grid ── */
      .data-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 20px;
      }
      .data-grid.col-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .data-item {
      }
      .data-label {
        font-size: 12px;
        color: #94a3b8;
        margin-bottom: 3px;
      }
      .data-value {
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
      }
      .data-value.full-width {
        grid-column: 1 / -1;
      }

      /* ── Attachment Row ── */
      .attachment-row {
        display: flex;
        gap: 12px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
      }
      .attachment-label {
        font-size: 12px;
        color: #94a3b8;
        flex-shrink: 0;
        padding-top: 20px;
      }
      .attachment-thumb {
        width: 72px;
        height: 54px;
        border-radius: 6px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #94a3b8;
        position: relative;
        overflow: hidden;
        transition: border-color 0.2s;
      }
      .attachment-thumb:hover {
        border-color: #10b981;
      }
      .attachment-thumb svg {
        width: 20px;
        height: 20px;
        stroke: #94a3b8;
        fill: none;
      }
      .attachment-thumb .file-name {
        position: absolute;
        bottom: 3px;
        font-size: 9px;
        color: #64748b;
        text-align: center;
        width: 100%;
        padding: 0 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ── Remark ── */
      .remark-row {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
      }

      /* ═══════════════════════════════════════════
     CLIENT INFO — SUB CARDS
     ═══════════════════════════════════════════ */
      .client-sub-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .client-sub-card {
        background: #fff;
        border-radius: 10px;
        padding: 18px 20px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }
      .client-sub-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
      }
      .sub-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f5f9;
      }
      .sub-card-header .icon {
        font-size: 22px;
        line-height: 1;
      }
      .sub-card-header h4 {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
      }

      /* ═══════════════════════════════════════════
     TABLE STYLES
     ═══════════════════════════════════════════ */
      .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
      }
      .data-table thead th {
        background: #f8fafc;
        color: #64748b;
        font-weight: 600;
        font-size: 12px;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
      }
      .data-table thead th:first-child {
        border-radius: 6px 0 0 0;
      }
      .data-table thead th:last-child {
        border-radius: 0 6px 0 0;
      }
      .data-table tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid #f1f5f9;
        color: #1e293b;
      }
      .data-table tbody tr:last-child td {
        border-bottom: none;
      }
      .data-table tbody tr:hover td {
        background: #f0fdf4;
      }

      /* ── Status Badges ── */
      .badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
      }
      .badge-green {
        background: #ecfdf5;
        color: #059669;
      }
      .badge-blue {
        background: #eff6ff;
        color: #2563eb;
      }
      .badge-amber {
        background: #fffbeb;
        color: #d97706;
      }
      .badge-gray {
        background: #f1f5f9;
        color: #64748b;
      }
      .badge-purple {
        background: #faf5ff;
        color: #7c3aed;
      }

      /* ═══════════════════════════════════════════
     PAYMENT SECTION
     ═══════════════════════════════════════════ */
      .payment-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 18px;
      }
      .payment-metric {
        background: #fff;
        border-radius: 8px;
        padding: 12px 16px;
        border: 1px solid #e2e8f0;
      }
      .payment-metric .pm-label {
        font-size: 11px;
        color: #94a3b8;
        margin-bottom: 4px;
      }
      .payment-metric .pm-value {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
      }
      .payment-metric .pm-value.amount {
        color: #059669;
      }

      .payment-details {
        display: flex;
        gap: 14px;
        margin-top: 14px;
      }
      .payment-detail-card {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        padding: 14px 16px;
        border: 1px solid #e2e8f0;
      }
      .pdc-title {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .pdc-title::before {
        content: '';
        width: 2px;
        height: 12px;
        background: #10b981;
        border-radius: 1px;
      }

      /* ── Timeline ── */
      .payment-timeline {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
      }
      .timeline-title {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 12px;
      }
      .timeline {
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
      }
      .timeline-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
      }
      .timeline-dot {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        z-index: 1;
        transition: transform 0.2s;
      }
      .timeline-dot.done {
        background: #10b981;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
      }
      .timeline-dot.current {
        background: #fff;
        border: 2px solid #10b981;
        color: #10b981;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
      }
      .timeline-dot.pending {
        background: #f1f5f9;
        color: #94a3b8;
        border: 2px solid #e2e8f0;
      }
      .timeline-label {
        font-size: 11px;
        color: #64748b;
        margin-top: 8px;
        text-align: center;
        max-width: 80px;
      }
      .timeline-label.done {
        color: #059669;
        font-weight: 600;
      }
      .timeline-connector {
        position: absolute;
        top: 14px;
        height: 2px;
        background: #e2e8f0;
        z-index: 0;
      }
      .timeline-connector.done {
        background: #10b981;
      }

      /* ═══════════════════════════════════════════
     AUDIT TABLE
     ═══════════════════════════════════════════ */
      .audit-table .data-table tbody td {
        padding: 9px 14px;
        font-size: 13px;
      }

      /* ═══════════════════════════════════════════
     REFUND STYLES
     ═══════════════════════════════════════════ */

      /* Red badge for 已退费 */
      .badge-red {
        background: #fef2f2;
        color: #dc2626;
      }

      /* Refund amount text color */
      .pm-value.refund {
        color: #dc2626 !important;
      }

      /* Payment details: vertical stack for richer cards */
      .payment-details {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 14px;
      }

      /* Refunded card — red left border */
      .payment-detail-card.refunded {
        border-left: 3px solid #dc2626;
        border-color: #e2e8f0;
        border-left-color: #dc2626;
      }

      /* Refund-pending card — amber left border */
      .payment-detail-card.refund-pending {
        border-left: 3px solid #d97706;
        border-color: #e2e8f0;
        border-left-color: #d97706;
      }

      /* Red accent bar on title */
      .pdc-title.refunded::before {
        background: #dc2626;
      }

      /* Amber accent bar on title */
      .pdc-title.refund-pending::before {
        background: #d97706;
      }

      /* Card header with badge */
      .pdc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f5f9;
      }
      .pdc-header-left {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
      }
      .pdc-header-left::before {
        content: '';
        width: 2px;
        height: 14px;
        border-radius: 1px;
        flex-shrink: 0;
      }
      .pdc-header-left.green::before {
        background: #10b981;
      }
      .pdc-header-left.red::before {
        background: #dc2626;
      }
      .pdc-header-left.amber::before {
        background: #d97706;
      }
      .pdc-header-amount {
        font-size: 14px;
        font-weight: 700;
        margin-left: 4px;
      }
      .pdc-header-amount.green {
        color: #059669;
      }
      .pdc-header-amount.red {
        color: #dc2626;
      }
      .pdc-header-amount.amber {
        color: #d97706;
      }

      /* Payment info row */
      .pdc-info-row {
        display: flex;
        gap: 24px;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }
      .pdc-info-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .pdc-info-item .info-label {
        font-size: 11px;
        color: #94a3b8;
      }
      .pdc-info-item .info-value {
        font-size: 13px;
        color: #1e293b;
        font-weight: 500;
      }

      /* Mini flow track inside cards */
      .mini-flow {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 12px 0;
        padding: 10px 14px;
        background: #f8fafc;
        border-radius: 8px;
        position: relative;
      }
      .mini-flow-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
        z-index: 1;
      }
      .mini-flow-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        z-index: 1;
      }
      .mini-flow-dot.done {
        background: #10b981;
        color: #fff;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
      }
      .mini-flow-dot.done-red {
        background: #dc2626;
        color: #fff;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
      }
      .mini-flow-dot.current-amber {
        background: #fff;
        border: 2px solid #d97706;
        color: #d97706;
        box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
        animation: pulseAmber 2s ease-in-out infinite;
      }
      .mini-flow-dot.pending-gray {
        background: #f1f5f9;
        color: #94a3b8;
        border: 2px solid #e2e8f0;
      }
      .mini-flow-label {
        font-size: 10px;
        margin-top: 6px;
        text-align: center;
        max-width: 80px;
        line-height: 1.3;
      }
      .mini-flow-label.done {
        color: #059669;
        font-weight: 600;
      }
      .mini-flow-label.done-red {
        color: #dc2626;
        font-weight: 600;
      }
      .mini-flow-label.current-amber {
        color: #d97706;
        font-weight: 600;
      }
      .mini-flow-label.pending-gray {
        color: #94a3b8;
      }

      /* Mini flow connectors */
      .mini-flow-connector {
        position: absolute;
        top: 22px;
        height: 2px;
        z-index: 0;
      }
      .mini-flow-connector.done {
        background: #10b981;
      }
      .mini-flow-connector.done-red {
        background: #dc2626;
      }
      .mini-flow-connector.current-amber {
        background: #d97706;
      }
      .mini-flow-connector.pending-gray {
        background: #e2e8f0;
      }

      /* Refund detail area — red or amber tint */
      .refund-area {
        margin-top: 12px;
        padding: 14px 16px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .refund-area.red-tint {
        background: #fef2f2;
        border: 1px solid #fecaca;
      }
      .refund-area.amber-tint {
        background: #fffbeb;
        border: 1px solid #fde68a;
      }
      .refund-area-title {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .refund-area-title.red {
        color: #dc2626;
      }
      .refund-area-title.amber {
        color: #d97706;
      }
      .refund-area-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 20px;
      }
      .refund-area-grid .data-label {
        font-size: 11px;
      }
      .refund-area-grid .data-value {
        font-size: 13px;
      }
      .refund-area-grid .data-value.red {
        color: #dc2626;
        font-weight: 700;
      }
      .refund-area-grid .data-value.amber {
        color: #d97706;
        font-weight: 700;
      }
      .refund-area-grid .full-col {
        grid-column: 1 / -1;
      }

      /* Refund attachments inside refund area */
      .refund-attachments {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        margin-top: 4px;
      }

      /* Finance confirmation area (green tint) */
      .finance-area {
        margin-top: 12px;
        padding: 12px 16px;
        border-radius: 8px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .finance-area-title {
        font-size: 12px;
        font-weight: 600;
        color: #059669;
        margin-bottom: 2px;
      }
      .finance-area-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
      }
      .finance-area-grid .data-label {
        font-size: 11px;
      }
      .finance-area-grid .data-value {
        font-size: 13px;
      }

      /* Timeline dot variants */
      .timeline-dot.refund {
        background: #dc2626;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
      }
      .timeline-dot.refund-current {
        background: #fff;
        border: 2px solid #d97706;
        color: #d97706;
        box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
        animation: pulseAmber 2s ease-in-out infinite;
      }

      /* Timeline connector variants */
      .timeline-connector.refund {
        background: #dc2626;
      }
      .timeline-connector.refund-current {
        background: #d97706;
      }

      /* Pulsing amber animation */
      @keyframes pulseAmber {
        0%,
        100% {
          box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
        }
        50% {
          box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.25);
        }
      }

      /* Overall timeline step label variants */
      .timeline-label.refund {
        color: #dc2626;
        font-weight: 600;
      }
      .timeline-label.refund-current {
        color: #d97706;
        font-weight: 600;
      }

      /* ═══════════════════════════════════════════
     RESPONSIVE HINT
     ═══════════════════════════════════════════ */
      @media (max-width: 900px) {
        .kpi-strip {
          grid-template-columns: repeat(2, 1fr);
        }
        .client-sub-cards {
          grid-template-columns: 1fr;
        }
        .data-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .payment-summary {
          grid-template-columns: repeat(2, 1fr);
        }
        .payment-details {
          flex-direction: column;
        }
        .pdc-info-row {
          flex-direction: column;
          gap: 10px;
        }
        .refund-area-grid {
          grid-template-columns: 1fr;
        }
        .finance-area-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ── Page Title (for demo context) ── */
      .demo-page-title {
        text-align: center;
        color: #64748b;
        font-size: 13px;
        margin-bottom: 16px;
        letter-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <div class="overlay" id="overlay">
      <div class="dialog">
        <!-- ── Header ── -->
        <div class="dialog-header">
          <h2>查看协议单 <span class="protocol-id">— P2025-0501-001</span></h2>
          <button
            class="dialog-close"
            title="关闭"
            onclick="document.getElementById('overlay').style.display='none'"
            >✕</button
          >
        </div>

        <!-- ── Body ── -->
        <div class="dialog-body">
          <!-- ════════════════════════════════
           LAYER 1: KPI SUMMARY STRIP
           ════════════════════════════════ -->
          <div class="kpi-strip">
            <div class="kpi-card">
              <div class="kpi-label">协议编号</div>
              <div class="kpi-value">P2025-0501-001</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">协议状态</div>
              <div class="kpi-value"><span class="status-dot active"></span>生效中</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">母亲姓名</div>
              <div class="kpi-value">王美丽</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">登记日期</div>
              <div class="kpi-value">2025-05-08</div>
            </div>
          </div>

          <!-- ════════════════════════════════
           SECTION 1: 基本信息
           ════════════════════════════════ -->
          <div class="section-card bg-white">
            <div class="section-title"><h3>基本信息</h3></div>
            <div class="data-grid">
              <div class="data-item">
                <div class="data-label">协议号</div>
                <div class="data-value">P2025-0501-001</div>
              </div>
              <div class="data-item">
                <div class="data-label">协议状态</div>
                <div class="data-value"><span class="badge badge-green">生效中</span></div>
              </div>
              <div class="data-item">
                <div class="data-label">登记日期</div>
                <div class="data-value">2025-05-08</div>
              </div>
              <div class="data-item">
                <div class="data-label">采集专员</div>
                <div class="data-value">李专员</div>
              </div>
              <div class="data-item">
                <div class="data-label">创建时间</div>
                <div class="data-value">2025-05-08 08:30:22</div>
              </div>
              <div class="data-item">
                <div class="data-label">最后更新</div>
                <div class="data-value">2025-05-08 09:15:40</div>
              </div>
            </div>

            <!-- 附件 -->
            <div class="attachment-row">
              <div class="attachment-label">附件</div>
              <div class="attachment-thumb">
                <svg viewBox="0 0 24 24" stroke-width="1.5">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                  <polyline points="14 2 14 8 20 8" />
                </svg>
                <span class="file-name">知情同意书.pdf</span>
              </div>
              <div class="attachment-thumb">
                <svg viewBox="0 0 24 24" stroke-width="1.5">
                  <rect x="3" y="3" width="18" height="18" rx="2" />
                  <circle cx="8.5" cy="8.5" r="1.5" />
                  <path d="m21 15-5-5L5 21" />
                </svg>
                <span class="file-name">身份证明.jpg</span>
              </div>
              <div class="attachment-thumb">
                <svg viewBox="0 0 24 24" stroke-width="1.5">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                  <polyline points="14 2 14 8 20 8" />
                </svg>
                <span class="file-name">检验报告.pdf</span>
              </div>
            </div>

            <!-- 备注 -->
            <div class="remark-row">
              <div class="data-grid">
                <div class="data-item data-value full-width">
                  <div class="data-label">备注</div>
                  <div class="data-value" style="font-weight: 400; color: #64748b"
                    >产妇及家属已充分了解采集流程，同意进行干细胞采集。婴儿体重偏大，需注意采集量。</div
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- ════════════════════════════════
           SECTION 2: 客户信息
           ════════════════════════════════ -->
          <div class="section-card bg-green">
            <div class="section-title"><h3>客户信息</h3></div>
            <div class="client-sub-cards">
              <!-- 母亲 -->
              <div class="client-sub-card">
                <div class="sub-card-header">
                  <span class="icon">🤱</span>
                  <h4>母亲信息</h4>
                </div>
                <div class="data-grid col-2">
                  <div class="data-item">
                    <div class="data-label">姓名</div>
                    <div class="data-value">王美丽</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">电话</div>
                    <div class="data-value">138****5678</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">身份证号</div>
                    <div class="data-value">3401****1234</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">出生年月</div>
                    <div class="data-value">1992-06</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">民族</div>
                    <div class="data-value">汉族</div>
                  </div>
                </div>
                <div style="margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9">
                  <div class="data-label">住址</div>
                  <div
                    class="data-value"
                    style="font-weight: 400; font-size: 13px; line-height: 1.5"
                    >安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</div
                  >
                </div>
              </div>

              <!-- 父亲 -->
              <div class="client-sub-card">
                <div class="sub-card-header">
                  <span class="icon">👨</span>
                  <h4>父亲信息</h4>
                </div>
                <div class="data-grid col-2">
                  <div class="data-item">
                    <div class="data-label">姓名</div>
                    <div class="data-value">张建国</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">电话</div>
                    <div class="data-value">139****8901</div>
                  </div>
                  <div class="data-item data-value full-width">
                    <div class="data-label">身份证号</div>
                    <div class="data-value">3401****5678</div>
                  </div>
                </div>
              </div>

              <!-- 新生儿 -->
              <div class="client-sub-card">
                <div class="sub-card-header">
                  <span class="icon">👶</span>
                  <h4>新生儿信息</h4>
                </div>
                <div class="data-grid col-2">
                  <div class="data-item">
                    <div class="data-label">姓名</div>
                    <div class="data-value">张小明</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">性别</div>
                    <div class="data-value">男</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">分娩时间</div>
                    <div class="data-value">2025-05-08 06:30</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">分娩方式</div>
                    <div class="data-value">剖宫产</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">胎次</div>
                    <div class="data-value">1</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">体重</div>
                    <div class="data-value">3250g</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">Apgar 1min</div>
                    <div class="data-value">9</div>
                  </div>
                  <div class="data-item">
                    <div class="data-label">Apgar 5min</div>
                    <div class="data-value">10</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- ════════════════════════════════
           SECTION 3: 采集信息
           ════════════════════════════════ -->
          <div class="section-card bg-white">
            <div class="section-title"><h3>采集信息</h3></div>
            <div class="data-grid">
              <div class="data-item">
                <div class="data-label">采集地区</div>
                <div class="data-value">华东地区</div>
              </div>
              <div class="data-item">
                <div class="data-label">采集医院</div>
                <div class="data-value">合肥市第一人民医院</div>
              </div>
              <div class="data-item">
                <div class="data-label">采集医护</div>
                <div class="data-value">陈护士</div>
              </div>
              <div class="data-item">
                <div class="data-label">销售人员</div>
                <div class="data-value">赵经理</div>
              </div>
              <div class="data-item">
                <div class="data-label">样本采集时间</div>
                <div class="data-value">2025-05-08 07:15</div>
              </div>
              <div class="data-item">
                <div class="data-label">母血采集时间</div>
                <div class="data-value">2025-05-08 07:20</div>
              </div>
            </div>
          </div>

          <!-- ════════════════════════════════
           SECTION 4: 样本及运输信息
           ════════════════════════════════ -->
          <div class="section-card bg-white">
            <div class="section-title"><h3>样本及运输信息</h3></div>
            <table class="data-table">
              <thead>
                <tr>
                  <th>样本类型</th>
                  <th>样本编码</th>
                  <th>采集量</th>
                  <th>价格</th>
                  <th>存储年限</th>
                  <th>样本状态</th>
                  <th>运输类型</th>
                  <th>目的站点</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>脐血干细胞</td>
                  <td style="font-family: monospace; font-size: 12px; color: #64748b"
                    >CB-20250508-001</td
                  >
                  <td>120ml</td>
                  <td style="font-weight: 600; color: #059669">¥19,800</td>
                  <td>20年</td>
                  <td><span class="badge badge-green">已入库</span></td>
                  <td>冷链专运</td>
                  <td>华东中心库</td>
                </tr>
                <tr>
                  <td>脐带组织</td>
                  <td style="font-family: monospace; font-size: 12px; color: #64748b"
                    >UC-20250508-001</td
                  >
                  <td>15cm</td>
                  <td style="font-weight: 600; color: #059669">¥9,800</td>
                  <td>20年</td>
                  <td><span class="badge badge-blue">运输中</span></td>
                  <td>冷链专运</td>
                  <td>华东中心库</td>
                </tr>
                <tr>
                  <td>胎盘干细胞</td>
                  <td style="font-family: monospace; font-size: 12px; color: #64748b"
                    >PL-20250508-001</td
                  >
                  <td>80g</td>
                  <td style="font-weight: 600; color: #059669">¥12,600</td>
                  <td>20年</td>
                  <td><span class="badge badge-amber">待检测</span></td>
                  <td>常温运输</td>
                  <td>南京分库</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- ════════════════════════════════
           SECTION 5: 缴费信息
           ════════════════════════════════ -->
          <div class="section-card bg-gray">
            <div class="section-title"><h3>缴费信息</h3></div>

            <!-- Payment Summary Metrics (4 cards) -->
            <div class="payment-summary">
              <div class="payment-metric">
                <div class="pm-label">应缴总额</div>
                <div class="pm-value amount">¥50,000</div>
              </div>
              <div class="payment-metric">
                <div class="pm-label">已缴金额</div>
                <div class="pm-value amount">¥30,000</div>
              </div>
              <div class="payment-metric">
                <div class="pm-label">已退金额</div>
                <div class="pm-value refund">¥20,000</div>
              </div>
              <div class="payment-metric">
                <div class="pm-label">净待缴金额</div>
                <div class="pm-value" style="color: #d97706">¥20,000</div>
              </div>
            </div>

            <!-- Payment Detail Cards (vertical stack) -->
            <div class="payment-details">
              <!-- ── Card 1: 首付 — FULL REFUND (已退费) ── -->
              <div class="payment-detail-card refunded">
                <div class="pdc-header">
                  <div class="pdc-header-left red">
                    首付 · <span class="pdc-header-amount red">¥20,000</span>
                  </div>
                  <span class="badge badge-red">已退费</span>
                </div>

                <!-- Payment info -->
                <div class="pdc-info-row">
                  <div class="pdc-info-item">
                    <span class="info-label">转账方式</span>
                    <span class="info-value">银行卡转账</span>
                  </div>
                  <div class="pdc-info-item">
                    <span class="info-label">转账时间</span>
                    <span class="info-value">2025-05-09 10:30</span>
                  </div>
                </div>

                <!-- Lifecycle flow track: 缴费确认 → 财务确认 → 退费申请 → 退费确认 -->
                <div class="mini-flow">
                  <div
                    class="mini-flow-connector done"
                    style="left: calc(12.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div
                    class="mini-flow-connector done"
                    style="left: calc(37.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div
                    class="mini-flow-connector done-red"
                    style="left: calc(62.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">缴费确认</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">财务确认</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">退费申请</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done-red">✓</div>
                    <div class="mini-flow-label done-red">退费确认</div>
                  </div>
                </div>

                <!-- Refund details (red tint) -->
                <div class="refund-area red-tint">
                  <div class="refund-area-title red">📋 退费详情</div>
                  <div class="refund-area-grid">
                    <div class="data-item">
                      <div class="data-label">退费金额</div>
                      <div class="data-value red">¥20,000</div>
                    </div>
                    <div class="data-item">
                      <div class="data-label">退费方式</div>
                      <div class="data-value">原路退回</div>
                    </div>
                    <div class="data-item full-col">
                      <div class="data-label">退费备注</div>
                      <div class="data-value" style="font-weight: 400; color: #64748b"
                        >客户因个人原因申请退费，已与销售确认</div
                      >
                    </div>
                    <div class="data-item">
                      <div class="data-label">退费附件</div>
                      <div class="refund-attachments">
                        <div class="attachment-thumb" style="width: 64px; height: 48px">
                          <svg viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                            <polyline points="14 2 14 8 20 8" />
                          </svg>
                          <span class="file-name">退款凭证.pdf</span>
                        </div>
                      </div>
                    </div>
                    <div class="data-item full-col">
                      <div class="data-label">财务退费备注</div>
                      <div class="data-value" style="font-weight: 400; color: #64748b"
                        >已核实，同意退费，3个工作日内到账</div
                      >
                    </div>
                  </div>
                </div>
              </div>

              <!-- ── Card 2: 二期款 — NORMAL COMPLETED (已缴费) ── -->
              <div class="payment-detail-card">
                <div class="pdc-header">
                  <div class="pdc-header-left green">
                    二期款 · <span class="pdc-header-amount green">¥16,667</span>
                  </div>
                  <span class="badge badge-green">已缴费</span>
                </div>

                <!-- Payment info -->
                <div class="pdc-info-row">
                  <div class="pdc-info-item">
                    <span class="info-label">转账方式</span>
                    <span class="info-value">微信</span>
                  </div>
                  <div class="pdc-info-item">
                    <span class="info-label">转账金额</span>
                    <span class="info-value" style="color: #059669; font-weight: 600">¥16,667</span>
                  </div>
                  <div class="pdc-info-item">
                    <span class="info-label">转账时间</span>
                    <span class="info-value">2025-05-10 14:22</span>
                  </div>
                </div>

                <!-- Mini flow: 缴费 → 财务确认 -->
                <div class="mini-flow">
                  <div
                    class="mini-flow-connector done"
                    style="left: calc(25% + 12px); width: calc(50% - 12px)"
                  ></div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">缴费</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">财务确认</div>
                  </div>
                </div>

                <!-- Finance confirmation -->
                <div class="finance-area">
                  <div class="finance-area-title">✅ 财务确认</div>
                  <div class="finance-area-grid">
                    <div class="data-item">
                      <div class="data-label">财务备注</div>
                      <div class="data-value" style="font-weight: 400; color: #64748b"
                        >已核实到账</div
                      >
                    </div>
                    <div class="data-item">
                      <div class="data-label">财务附件</div>
                      <div class="refund-attachments">
                        <div class="attachment-thumb" style="width: 64px; height: 48px">
                          <svg viewBox="0 0 24 24" stroke-width="1.5">
                            <rect x="3" y="3" width="18" height="18" rx="2" />
                            <circle cx="8.5" cy="8.5" r="1.5" />
                            <path d="m21 15-5-5L5 21" />
                          </svg>
                          <span class="file-name">转账凭证.jpg</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- ── Card 3: 尾款 — REFUND IN PROGRESS (退费确认中) ── -->
              <div class="payment-detail-card refund-pending">
                <div class="pdc-header">
                  <div class="pdc-header-left amber">
                    尾款 · <span class="pdc-header-amount amber">¥13,333</span>
                  </div>
                  <span class="badge badge-amber">退费确认中</span>
                </div>

                <!-- Payment info -->
                <div class="pdc-info-row">
                  <div class="pdc-info-item">
                    <span class="info-label">转账方式</span>
                    <span class="info-value">支付宝</span>
                  </div>
                  <div class="pdc-info-item">
                    <span class="info-label">转账金额</span>
                    <span class="info-value" style="color: #059669; font-weight: 600">¥13,333</span>
                  </div>
                  <div class="pdc-info-item">
                    <span class="info-label">转账时间</span>
                    <span class="info-value">2025-05-12 09:00</span>
                  </div>
                </div>

                <!-- Lifecycle flow: ✓缴费确认 → ✓财务确认 → ●退费申请(当前) → ○财务退费确认(待处理) -->
                <div class="mini-flow">
                  <div
                    class="mini-flow-connector done"
                    style="left: calc(12.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div
                    class="mini-flow-connector current-amber"
                    style="left: calc(37.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div
                    class="mini-flow-connector pending-gray"
                    style="left: calc(62.5% + 12px); width: calc(25% - 12px)"
                  ></div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">缴费确认</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot done">✓</div>
                    <div class="mini-flow-label done">财务确认</div>
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot current-amber">●</div>
                    <div class="mini-flow-label current-amber"
                      >退费申请<br /><span style="font-weight: 400; font-size: 9px"
                        >(当前)</span
                      ></div
                    >
                  </div>
                  <div class="mini-flow-step">
                    <div class="mini-flow-dot pending-gray">○</div>
                    <div class="mini-flow-label pending-gray"
                      >财务退费确认<br /><span style="font-size: 9px">(待处理)</span></div
                    >
                  </div>
                </div>

                <!-- Refund application details (amber tint) -->
                <div class="refund-area amber-tint">
                  <div class="refund-area-title amber">⏳ 退费申请详情</div>
                  <div class="refund-area-grid">
                    <div class="data-item">
                      <div class="data-label">退费金额</div>
                      <div class="data-value amber">¥13,333</div>
                    </div>
                    <div class="data-item">
                      <div class="data-label">退费备注</div>
                      <div class="data-value" style="font-weight: 400; color: #64748b"
                        >采样不合格，客户申请全额退费</div
                      >
                    </div>
                    <div class="data-item full-col">
                      <div class="data-label">退费附件</div>
                      <div class="refund-attachments">
                        <div class="attachment-thumb" style="width: 64px; height: 48px">
                          <svg viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                            <polyline points="14 2 14 8 20 8" />
                          </svg>
                          <span class="file-name">退费申请表.pdf</span>
                        </div>
                        <div class="attachment-thumb" style="width: 64px; height: 48px">
                          <svg viewBox="0 0 24 24" stroke-width="1.5">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                            <polyline points="14 2 14 8 20 8" />
                          </svg>
                          <span class="file-name">检验报告.pdf</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div> </div
            ><!-- /payment-details -->

            <!-- Overall Payment Timeline (sophisticated) -->
            <div class="payment-timeline">
              <div class="timeline-title">缴费总览</div>
              <div class="timeline">
                <!-- Connector lines -->
                <div
                  class="timeline-connector refund"
                  style="left: calc(12.5% + 14px); width: calc(25% - 14px)"
                ></div>
                <div
                  class="timeline-connector done"
                  style="left: calc(37.5% + 14px); width: calc(25% - 14px)"
                ></div>
                <div
                  class="timeline-connector refund-current"
                  style="left: calc(62.5% + 14px); width: calc(25% - 14px)"
                ></div>

                <div class="timeline-step">
                  <div class="timeline-dot refund">✓</div>
                  <div class="timeline-label refund"
                    >首付<br /><span style="font-size: 10px; font-weight: 400">已退费</span></div
                  >
                </div>
                <div class="timeline-step">
                  <div class="timeline-dot done">✓</div>
                  <div class="timeline-label done"
                    >二期款<br /><span style="font-size: 10px; font-weight: 400">已缴费</span></div
                  >
                </div>
                <div class="timeline-step">
                  <div class="timeline-dot refund-current">●</div>
                  <div class="timeline-label refund-current"
                    >尾款<br /><span style="font-size: 10px; font-weight: 400">退费中</span></div
                  >
                </div>
                <div class="timeline-step">
                  <div class="timeline-dot pending">○</div>
                  <div class="timeline-label">待完成</div>
                </div>
              </div>
            </div>
          </div>

          <!-- ════════════════════════════════
           SECTION 6: 审核记录
           ════════════════════════════════ -->
          <div class="section-card bg-white audit-table">
            <div class="section-title"><h3>审核记录</h3></div>
            <table class="data-table">
              <thead>
                <tr>
                  <th>审核节点</th>
                  <th>审核人</th>
                  <th>审核时间</th>
                  <th>审核结果</th>
                  <th>审核意见</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>采集信息审核</td>
                  <td>张主管</td>
                  <td>2025-05-08 08:45:30</td>
                  <td><span class="badge badge-green">通过</span></td>
                  <td style="color: #64748b">信息完整，确认无误</td>
                </tr>
                <tr>
                  <td>样本入库审核</td>
                  <td>李主任</td>
                  <td>2025-05-08 11:20:15</td>
                  <td><span class="badge badge-green">通过</span></td>
                  <td style="color: #64748b">样本质量达标，准许入库</td>
                </tr>
              </tbody>
            </table>
          </div> </div
        ><!-- /dialog-body -->

        <!-- ── Footer ── -->
        <div class="dialog-footer">
          <button class="btn-close">关闭</button>
        </div> </div
      ><!-- /dialog --> </div
    ><!-- /overlay -->
  </body>
</html>