/* 站点后台发票抽屉。样式仅作用于当前详情面板。 */
.hs-invoice-outer.el-drawer { max-width:100vw; outline:none; }
.hs-invoice-outer .el-drawer__body { height:100%; overflow:hidden; }
.hs-invoice { --ink:#192740; --muted:#5e6d80; --line:#dde4ed; --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --num:"Segoe UI",Arial,sans-serif; --pad:32px; display:flex; flex-direction:column; height:100%; min-height:0; color:var(--ink); background:white; font:14px/1.5 var(--font); text-align:left; }
.hs-invoice *, .hs-invoice *::before, .hs-invoice *::after { box-sizing:border-box; }
.hs-invoice h1,.hs-invoice h2,.hs-invoice h3,.hs-invoice p,.hs-invoice dl,.hs-invoice dd { margin:0; }
.hs-invoice .num { font-family:var(--num);font-variant-numeric:tabular-nums; }
.hs-invoice .icon { display:inline-block; flex:none; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.hs-invoice button { cursor:pointer; font:inherit; }
.hs-invoice button:disabled { cursor:default; opacity:.58; }
.hs-invoice button:focus-visible,.hs-invoice a:focus-visible { outline:2px solid #3272dc; outline-offset:2px; }
.hs-invoice .drawer-head { display:flex;gap:15px;align-items:center;padding:22px var(--pad) 21px;min-height:91px;border-bottom:1px solid var(--line) }
.hs-invoice .head-mark { width:44px;height:44px;display:grid;place-items:center;border-radius:13px;border:1px solid #cfdef6;color:#2459ae;background:#edf4ff }
.hs-invoice .head-mark .icon { width:24px;height:24px }
.hs-invoice .head-text { min-width:0;flex:1 }
.hs-invoice .title-line { display:flex;align-items:center;gap:11px;flex-wrap:wrap }
.hs-invoice h1 { font-size:24px;letter-spacing:-.6px;line-height:1.36;font-weight:650 }
.hs-invoice .subtitle { margin-top:3px;color:var(--muted);font-size:12px;line-height:1.55 }
.hs-invoice .subtitle .num { margin-left:8px;font-size:12.5px;letter-spacing:.28px }
.hs-invoice .pill { font-size:12px;font-weight:600;line-height:21px;padding:0 9px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap }
.hs-invoice .pill i { content:"";border-radius:50%;width:6px;height:6px;background:currentColor;display:inline-block }
.hs-invoice .pill.green { color:#11704d;background:#e7f6ed }
.hs-invoice .pill.amber { color:#835111;background:#fff0d2 }
.hs-invoice .x { width:32px;height:32px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:#58697c;background:white }
.hs-invoice .x .icon { height:16px;width:16px }
.hs-invoice .drawer-body { flex:1;padding:24px var(--pad);display:flex;flex-direction:column;gap:23px;min-height:0;overflow:auto }
.hs-invoice .drawer-body>* { flex-shrink:0 }
.hs-invoice .section-title { font-size:17px;font-weight:650;line-height:1.45;letter-spacing:.1px;margin:0 0 11px }
.hs-invoice .drawer-footer { display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:14px var(--pad);min-height:74px;background:#fff;flex-shrink:0 }
.hs-invoice .spacer { flex:1 }
.hs-invoice .btn { display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:8px;border:1px solid #cdd7e4;min-height:39px;padding:8px 15px;border-radius:8px;background:white;font:600 14px/1.4 var(--font);color:#293a51 }
.hs-invoice .btn .icon { width:17px;height:17px }
.hs-invoice .btn.primary { background:#2459c3;color:#fff;border-color:#2459c3;box-shadow:0 2px 4px #1f4d9d18 }
.hs-invoice .btn.light { border-color:transparent;background:transparent;color:#315781;padding-left:0 }
.hs-invoice .tiny { font-size:12px;color:var(--muted) }
.hs-invoice .ticket { position:relative;isolation:isolate;display:grid;grid-template-columns:59% 41%;min-height:147px;background:linear-gradient(105deg,#13376e 0%,#194fa7 55%,#2f69ca 100%);color:#fff;border-radius:15px;overflow:hidden }
.hs-invoice .ticket .engraved { position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none }
.hs-invoice .ticket-left { padding:18px 25px 18px }
.hs-invoice .ticket-type { display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.45px;color:#f2f7ff }
.hs-invoice .ticket-type .icon { width:18px;height:18px }
.hs-invoice .money-label { color:#d8e6ff;font-size:12px;letter-spacing:.5px;margin-top:12px }
.hs-invoice .money { font-family:var(--num);font-weight:630;font-variant-numeric:tabular-nums;line-height:1.02;letter-spacing:-2px;font-size:48px;margin-top:1px }
.hs-invoice .money small { font-size:24px;letter-spacing:0;margin-right:5px;font-weight:500 }
.hs-invoice .ticket-right { align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;padding:20px 22px;border-left:1px dashed #ffffff6b }
.hs-invoice .ticket-right::before, .hs-invoice .ticket-right::after { content:"";position:absolute;width:14px;height:14px;left:-7.5px;border-radius:50%;background:#fff }
.hs-invoice .ticket-right::before { top:-7px }
.hs-invoice .ticket-right::after { bottom:-7px }
.hs-invoice .ticket-right .icon { width:21px;height:21px;color:#e3efff;margin-bottom:6px }
.hs-invoice .station-name { font-weight:640;font-size:17px;letter-spacing:.3px }
.hs-invoice .fuel { font-size:13px;margin-top:3px;color:#e4eeff }
.hs-invoice .fuel b { font-weight:450;padding:0 7px }
.hs-invoice .info-grid { display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:0 17px }
.hs-invoice .datum { padding:11px 4px 12px;min-width:0 }
.hs-invoice .datum:nth-child(even) { padding-left:19px }
.hs-invoice .datum:nth-child(n+3) { border-top:1px solid #e8ecf2 }
.hs-invoice .datum dt { font-size:12px;margin-bottom:3px;color:var(--muted) }
.hs-invoice .datum dd { font-size:15px;font-weight:600;word-break:break-word;line-height:1.42 }
.hs-invoice .datum .num { letter-spacing:.25px;font-weight:600 }
.hs-invoice .datum dd,.hs-invoice .diff td,.hs-invoice .ref-line .num { overflow-wrap:anywhere;user-select:text; }
.hs-invoice .file-card { display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(100deg,#fafbfe,#fff);min-height:70px }
.hs-invoice .pdf-icon { position:relative;flex:0 0 30px;height:36px;background:#fff;border:1.5px solid #ce898b;border-radius:4px;clip-path:polygon(0 0,68% 0,100% 25%,100% 100%,0 100%);color:#ad444a }
.hs-invoice .pdf-icon::before { content:"";position:absolute;right:0;top:-1px;width:9px;height:9px;border-left:1px solid #ce898b;border-bottom:1px solid #ce898b;background:#f8dddd }
.hs-invoice .pdf-icon::after { content:"PDF";position:absolute;left:3px;right:2px;top:16px;font:bold 8px var(--num);letter-spacing:.25px;text-align:center;border-radius:2px;background:#f9e7e7;padding:1px }
.hs-invoice .file-name { font-size:14px;font-weight:600;min-width:0;word-break:break-word }
.hs-invoice .file-card .download { margin-left:auto;display:inline-flex;gap:7px;align-items:center;color:#2358a8;white-space:nowrap;font-weight:600;font-size:13px }
.hs-invoice .download .icon { width:16px;height:16px }
.hs-invoice .progress-hero { padding:20px;display:flex;align-items:center;gap:14px;border:1px solid #efd9af;border-radius:14px;background:linear-gradient(110deg,#fff6e4,#fffbf3 80%);color:#533b1b }
.hs-invoice .phase-icon { flex:none;display:grid;place-items:center;width:40px;height:40px;background:#fff;border:1px solid #ead2a3;color:#a2660e;border-radius:12px }
.hs-invoice .phase-icon .icon { width:22px;height:22px }
.hs-invoice .phase-copy { flex:1;min-width:0 }
.hs-invoice .phase-copy h2 { font-size:19px;letter-spacing:-.4px;line-height:1.5;font-weight:650 }
.hs-invoice .phase-copy p { font-size:13px;line-height:1.65;margin-top:3px;color:#795d31 }
.hs-invoice .phase-amount { padding-left:18px;border-left:1px solid #ead8bb;white-space:nowrap }
.hs-invoice .phase-amount div { font-size:11.5px;color:#795d31 }
.hs-invoice .phase-amount strong { font:625 28px/1.4 var(--num);letter-spacing:-.6px }
.hs-invoice .phase-amount small { font-size:16px;font-weight:500;margin-right:3px }
.hs-invoice .timeline { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 19px 15px;list-style:none;margin:0 }
.hs-invoice .step { position:relative;padding-right:9px;min-width:0 }
.hs-invoice .step:not(:last-child)::before { content:"";height:2px;position:absolute;left:34px;right:9px;top:12px;background:#e0e6ed }
.hs-invoice .step.finished:not(.before-future)::before { background:#9cc7b4 }
.hs-invoice .step .node { position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:600 12px var(--num);border:1px solid #cad4df;background:#f7f9fc;color:#728195 }
.hs-invoice .step.finished .node { background:#e2f3e9;color:#18734d;border-color:#add7bd }
.hs-invoice .step.active .node { background:#fff1d5;border-color:#d7a955;color:#966017;box-shadow:0 0 0 3px #fff8ea }
.hs-invoice .node .icon { width:14px;height:14px;stroke-width:2 }
.hs-invoice .step h3 { margin:7px 0 2px;font-size:14px;font-weight:650 }
.hs-invoice .step p { font-size:12px;color:var(--muted);line-height:1.6 }
.hs-invoice .step.future h3 { color:#647287 }
.hs-invoice .step.active h3 { color:#89560c }
.hs-invoice .table-wrap { border:1px solid var(--line);border-radius:12px;overflow:hidden }
.hs-invoice .diff { width:100%;border-collapse:collapse;text-align:left;table-layout:fixed }
.hs-invoice .diff col:first-child { width:29% }
.hs-invoice .diff col:nth-child(2) { width:31% }
.hs-invoice .diff th, .hs-invoice .diff td { padding:11px 15px;font-size:13px;vertical-align:middle;text-align:left }
.hs-invoice .diff thead { background:#f5f7fa;color:var(--muted) }
.hs-invoice .diff th { font-weight:550;font-size:12px }
.hs-invoice .diff td { border-top:1px solid #e4e9f0;color:var(--ink);line-height:1.55 }
.hs-invoice .diff td:first-child { color:var(--muted) }
.hs-invoice .diff td:last-child { font-weight:620;background:#f5f8ff;color:#243d66 }
.hs-invoice .diff th:last-child { background:#ebf1fc;color:#325792 }
.hs-invoice .ref-line { display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--muted) }
.hs-invoice .ref-line .num { font-size:12.5px;color:#3f5066 }
.hs-invoice .updated { display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--muted) }
.hs-invoice .updated .icon { width:14px;height:14px }

.hs-invoice .drawer-head,.hs-invoice .drawer-footer { flex-shrink:0; }
.hs-invoice .drawer-body { overscroll-behavior:contain; }
.hs-invoice .btn:hover:not(:disabled), .hs-invoice .x:hover { border-color:#9ab4dc; background:#f5f8ff; color:#2459ad; }
.hs-invoice .btn.primary:hover:not(:disabled) { background:#194cab; color:white; }
.hs-invoice .download { border:0; padding:6px 0 6px 9px; background:transparent; }
.hs-invoice .ticket .engraved { mask-image:linear-gradient(90deg,transparent 30%,#000 88%); }
.hs-invoice .notice { padding:13px 16px; border:1px solid var(--line); border-radius:9px; background:#f6f8fb; color:#455970; line-height:1.65; overflow-wrap:anywhere; }
.hs-invoice .notice.error { background:#fff3ef; border-color:#eccfc6; color:#8e4635; }
.hs-invoice .pill.neutral { color:#5e6d80; background:#eef1f5; }
.hs-invoice .empty { padding:14px; background:#f6f8fb; color:var(--muted); border-radius:8px; }
.hs-invoice .pdf-body { padding:0; gap:0; background:#e9edf2; }
.hs-invoice .pdf-frame { width:100%; height:100%; min-height:180px; border:0; flex:1; }
.hs-invoice .web-form { max-width:550px; }
.hs-invoice .web-form .el-select { width:100%; }
.hs-invoice .mail-label { display:block; font-weight:600; margin:0 0 8px; }
.hs-invoice .mail-input { width:100%; height:42px; padding:0 12px; border:1px solid #becbdc; border-radius:7px; font:15px var(--font); }
.hs-invoice .back-link { color:#2857a1; }
.hs-invoice .el-form-item__content .el-button { max-width:100%; }
@media(max-width:750px) {
 .hs-invoice { --pad:18px; } .hs-invoice .drawer-body { padding-block:17px; gap:18px; }
 .hs-invoice .drawer-head { min-height:78px; padding-block:15px; gap:10px; }
 .hs-invoice .drawer-footer { min-height:64px; flex-wrap:wrap; gap:6px; }
 .hs-invoice .ticket { min-height:133px; } .hs-invoice .ticket-left,.hs-invoice .ticket-right { padding:14px 16px; }
}
@media(max-width:480px) {
 .hs-invoice { --pad:14px; } .hs-invoice h1 { font-size:20px; }
 .hs-invoice .head-mark { width:36px; height:36px; } .hs-invoice .head-mark .icon { width:20px; }
 .hs-invoice .ticket { grid-template-columns:55% 45%; } .hs-invoice .ticket-right { padding:12px; }
 .hs-invoice .drawer-body { gap:16px; } .hs-invoice .money { font-size:41px; } .hs-invoice .station-name {font-size:14px;}
 .hs-invoice .info-grid {padding:0 10px;} .hs-invoice .datum:nth-child(even){padding-left:8px;}
 .hs-invoice .datum dd { font-size:13px; } .hs-invoice .btn { padding:7px 9px; min-height:36px; gap:4px; font-size:12px; }
 .hs-invoice .progress-hero { padding:14px; flex-wrap:wrap; gap:9px; } .hs-invoice .phase-copy {flex:1 1 165px;}
 .hs-invoice .phase-copy h2 { font-size:16px; } .hs-invoice .phase-amount { display:flex; width:100%; align-items:baseline; justify-content:space-between; border-left:0; border-top:1px solid #ead8bb; padding:5px 0 0; }
 .hs-invoice .phase-amount strong { font-size:20px; } .hs-invoice .timeline {padding:12px 9px;}
 .hs-invoice .step h3 { font-size:12px; } .hs-invoice .step p { font-size:11px; }
 .hs-invoice .diff td,.hs-invoice .diff th { padding:8px; font-size:12px; }
 .hs-invoice .updated { font-size:11px; } .hs-invoice .file-card {padding:12px;}
}