:root { --ink:#183124; --forest:#143d2e; --paper:#f7f4eb; --line:#d9d5c9; --sun:#f1b942; --muted:#6c756c; --danger:#b73d2f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(130deg,#eef0e8,#f8f5ed 54%,#e7eee6); font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
body.is-camera-open,body.is-export-dialog-open,body.is-image-viewer-open { overflow:hidden; }
.shell { width:min(1220px,100%); min-height:100vh; margin:auto; padding:28px 20px 54px; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:8px 4px 28px; }
.eyebrow { margin:0 0 5px; color:#587160; font-size:12px; font-weight:700; letter-spacing:.14em; }
h1 { margin:0; font-family:"Songti SC","STSong",serif; font-size:clamp(30px,6vw,48px); letter-spacing:.04em; }
.privacy { margin:4px 0 0; max-width:420px; color:var(--muted); font-size:13px; line-height:1.6; text-align:right; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; gap:30px; padding:clamp(26px,5vw,46px); border:1px solid rgba(24,49,36,.15); border-radius:26px; background:var(--forest); color:#f9f6ec; box-shadow:0 24px 55px rgba(22,54,39,.16); }
.hero::after { content:"票"; position:absolute; right:-28px; bottom:-76px; color:rgba(255,255,255,.06); font-family:"Songti SC","STSong",serif; font-size:290px; font-weight:700; }
.hero-copy { position:relative; z-index:1; }
.hero h2 { margin:0 0 13px; font-family:"Songti SC","STSong",serif; font-size:clamp(25px,4vw,38px); line-height:1.3; }
.hero p { max-width:570px; margin:0; color:#c8d7ca; line-height:1.8; }
.types { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.types span { padding:6px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#eff6ef; background:rgba(255,255,255,.08); font-size:12px; }
.capture { z-index:1; display:flex; align-items:center; justify-content:center; min-height:210px; padding:20px; border:1px dashed rgba(255,255,255,.42); border-radius:18px; background:rgba(255,255,255,.08); text-align:center; }
.capture-actions { width:100%; }
.capture-primary { width:100%; min-height:74px; border:0; border-radius:13px; background:var(--sun); color:#1e2a1f; cursor:pointer; font-size:18px; font-weight:700; box-shadow:0 9px 0 #bd8723; transition:transform .15s,box-shadow .15s; }
.capture-primary:active { transform:translateY(5px); box-shadow:0 4px 0 #bd8723; }
.capture-alternatives { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:17px; }
.capture-secondary { min-height:43px; border:1px solid rgba(255,255,255,.3); border-radius:10px; color:#eff6ef; background:rgba(255,255,255,.08); cursor:pointer; font-size:13px; font-weight:700; }
.capture-secondary:active { background:rgba(255,255,255,.16); }
.capture small { display:block; margin-top:12px; color:#d7e3d8; line-height:1.5; }
input[type=file] { display:none; }
.camera-overlay[hidden], [hidden] { display:none !important; }
.camera-overlay { position:fixed; z-index:20; inset:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#07100b; color:white; }
.camera-stage { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(720px,100%); height:100%; margin:auto; }
.camera-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 2px 13px; }
.camera-topbar strong { font-family:"Songti SC","STSong",serif; font-size:20px; letter-spacing:.04em; }
.camera-done { border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:9px 15px; color:white; background:rgba(255,255,255,.08); cursor:pointer; }
.viewfinder { position:relative; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:24px; background:#020604; box-shadow:0 20px 55px rgba(0,0,0,.42); }
.viewfinder video,.viewfinder canvas { width:100%; height:100%; object-fit:contain; }
.invoice-guide { position:absolute; inset:12% 7%; border:2px solid rgba(241,185,66,.9); border-radius:12px; box-shadow:0 0 0 999px rgba(0,0,0,.25); pointer-events:none; }
.invoice-guide::before { content:"完整票面放入框内"; position:absolute; top:-35px; left:50%; transform:translateX(-50%); padding:6px 10px; border-radius:999px; color:#1e2a1f; background:var(--sun); font-size:12px; font-weight:700; white-space:nowrap; }
.camera-message { position:absolute; inset:0; display:grid; place-items:center; padding:30px; color:#d5ded7; text-align:center; line-height:1.7; background:#07100b; }
.camera-controls { padding:14px 2px 2px; }
.camera-status { min-height:22px; margin-bottom:10px; color:#b9c9bc; font-size:13px; text-align:center; }
.shutter-row { display:flex; align-items:center; justify-content:center; min-height:72px; }
.shutter { width:68px; height:68px; padding:0; border:5px solid #f7f4eb; border-radius:50%; background:var(--sun); box-shadow:inset 0 0 0 4px #07100b; cursor:pointer; }
.review-actions { display:grid; grid-template-columns:.75fr 1.25fr; gap:10px; }
.review-actions button { min-height:54px; border:0; border-radius:13px; cursor:pointer; font-weight:700; }
.retake { color:white; background:#34433a; }
.use-photo { color:#1e2a1f; background:var(--sun); }
.progress { display:none; margin-top:19px; padding:13px 15px; border-left:4px solid var(--sun); background:#edf0e8; color:#315342; font-size:14px; line-height:1.6; }
.progress.is-visible { display:block; }
.progress.is-error { border-left-color:var(--danger); color:#7f251d; background:#f9e7e4; }
.content { margin-top:26px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:rgba(255,255,255,.64); box-shadow:0 18px 42px rgba(35,61,45,.07); }
.table-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); }
.table-top h3 { margin:0; font-family:"Songti SC","STSong",serif; font-size:21px; }
.count { border-radius:999px; padding:5px 10px; background:#e4ece2; color:#315342; font-size:13px; font-weight:700; }
.table-wrap { overflow-x:auto; }
table { width:100%; min-width:2080px; border-collapse:collapse; }
th { padding:12px 14px; color:#697269; background:#f0eee6; font-size:12px; letter-spacing:.03em; text-align:left; }
td { padding:13px 14px; border-top:1px solid #e5e1d7; font-size:13px; vertical-align:middle; }
td[contenteditable=true] { outline:0; }
td[contenteditable=true]:focus { border-radius:5px; background:#fffbe8; box-shadow:inset 0 0 0 1px #e1bd67; }
.invoice-type-select { width:250px; border:1px solid #cad3ca; border-radius:8px; padding:8px 28px 8px 10px; color:var(--ink); background:#fffdf7; font-size:13px; }
.invoice-type-select:focus { outline:2px solid #dfb54f; outline-offset:1px; }
.invoice-type-select:disabled { border-color:transparent; color:var(--muted); background:transparent; opacity:1; }
.empty td { padding:46px 17px; color:#7f857e; text-align:center; }
td[data-placeholder]:empty::before { content:attr(data-placeholder); color:#7f857e; font-weight:700; }
.field-failed { background:#fff1ef; }
.field-failed[data-placeholder]:empty::before { color:var(--danger); }
.field-calculated { color:#245b3b; background:#eff7f0; font-weight:700; }
.field-processing { background:#f5f3ec; }
.status-processing { color:#8d5a08; background:#fff8df; font-weight:700; }
.status-success { color:#23633e; background:#edf7ef; font-weight:700; }
.status-failed { color:#9a2e23; background:#fbeceb; font-weight:700; }
.verified { color:#23633e; background:#edf7ef; font-weight:700; }
.mismatch { color:#9a2e23; background:#fbeceb; font-weight:700; }
.remove { border:0; padding:6px 9px; border-radius:7px; color:var(--danger); background:#f9e7e4; cursor:pointer; }
.view-image { min-width:78px; border:1px solid #b9cabd; border-radius:8px; padding:7px 10px; color:var(--forest); background:#edf3eb; cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; }
.view-image:active { transform:translateY(1px); }
.view-image:disabled { cursor:not-allowed; opacity:.45; }
.pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 18px; border-top:1px solid var(--line); background:#f7f5ee; color:var(--muted); font-size:13px; }
.pagination button { min-width:74px; border:1px solid #ccd6cc; border-radius:8px; padding:8px 12px; color:var(--forest); background:white; cursor:pointer; font-weight:700; }
.pagination button:disabled { cursor:not-allowed; opacity:.4; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 24px; border-top:1px solid var(--line); }
.hint { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.export-actions { display:flex; gap:9px; flex-shrink:0; }
.export { border:0; border-radius:10px; padding:12px 19px; color:white; cursor:pointer; font-weight:700; white-space:nowrap; }
.export-data { background:var(--forest); }
.export-images { color:var(--forest); background:#e4ece2; }
.clear-session { border:1px solid #e0b9b3; color:var(--danger); background:#fff4f2; }
.export:disabled { cursor:not-allowed; opacity:.45; }
.capture-primary:disabled,.capture-secondary:disabled { cursor:wait; opacity:.55; }
.export-dialog { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; }
.export-dialog-backdrop { position:absolute; inset:0; background:rgba(7,16,11,.68); backdrop-filter:blur(7px); }
.export-dialog-card { position:relative; width:min(610px,100%); max-height:min(760px,calc(100vh - 40px)); overflow:auto; border:1px solid rgba(24,49,36,.16); border-radius:24px; padding:26px; background:var(--paper); box-shadow:0 30px 90px rgba(5,20,12,.35); }
.export-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-kicker { margin:0 0 5px; color:#587160; font-size:11px; font-weight:800; letter-spacing:.14em; }
.export-dialog-heading h2 { margin:0; font-family:"Songti SC","STSong",serif; font-size:clamp(22px,5vw,29px); line-height:1.3; }
.dialog-close { flex:0 0 auto; width:36px; height:36px; border:1px solid #d7d3c7; border-radius:50%; color:var(--forest); background:#fffdf7; cursor:pointer; font-size:24px; line-height:1; }
.export-dialog-copy { margin:13px 0 20px; color:var(--muted); font-size:13px; line-height:1.7; }
.export-type-options { display:grid; gap:9px; }
.export-type-option { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:58px; padding:11px 14px; border:1px solid #d8d5ca; border-radius:13px; background:#fffdf7; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; }
.export-type-option:has(input:checked) { border-color:#7e9d86; background:#edf3eb; }
.export-type-option:active { transform:scale(.99); }
.export-type-option input { width:20px; height:20px; margin:0; accent-color:var(--forest); }
.export-type-name { font-size:14px; font-weight:700; line-height:1.45; }
.export-type-count { min-width:42px; border-radius:999px; padding:4px 8px; color:#315342; background:#e4ece2; font-size:12px; font-weight:800; text-align:center; }
.export-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.export-selection-summary { color:#526459; font-size:13px; font-weight:700; }
.dialog-actions { display:flex; gap:9px; }
.dialog-actions button { min-height:43px; border-radius:10px; padding:9px 17px; cursor:pointer; font-weight:700; }
.dialog-cancel { border:1px solid #cfd5ce; color:var(--forest); background:#fffdf7; }
.dialog-confirm { border:0; color:white; background:var(--forest); }
.dialog-confirm:disabled { cursor:not-allowed; opacity:.42; }
.image-viewer { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:20px; }
.image-viewer-backdrop { position:absolute; inset:0; background:rgba(3,9,6,.82); backdrop-filter:blur(9px); }
.image-viewer-card { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(1080px,100%); max-height:calc(100vh - 40px); overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:22px; padding:18px; color:#f7f4eb; background:#0b1510; box-shadow:0 32px 110px rgba(0,0,0,.55); }
.image-viewer-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:2px 2px 14px; }
.image-viewer-heading .dialog-kicker { color:#9db2a2; }
.image-viewer-heading h2 { overflow:hidden; margin:0; font-family:"Songti SC","STSong",serif; font-size:clamp(18px,4vw,25px); text-overflow:ellipsis; white-space:nowrap; }
.image-viewer-close { flex:0 0 auto; width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:white; background:rgba(255,255,255,.08); cursor:pointer; font-size:25px; line-height:1; }
.image-viewer-stage { min-height:180px; max-height:calc(100vh - 170px); overflow:auto; overscroll-behavior:contain; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:#020604; touch-action:pan-x pan-y; }
.image-viewer-canvas { display:flex; align-items:center; justify-content:center; min-width:100%; min-height:100%; }
.image-viewer-stage img { display:block; max-width:100%; max-height:calc(100vh - 172px); object-fit:contain; user-select:none; -webkit-user-drag:none; }
.image-viewer-hint { margin:11px 0 0; color:#9db2a2; font-size:12px; text-align:center; }
@media(max-width:680px) { .shell { padding:18px 14px 35px; } header { padding-bottom:18px; } .privacy { display:none; } .hero { grid-template-columns:1fr; gap:16px; border-radius:19px; padding:26px 22px; } .capture { min-height:228px; padding:16px; } .table-top,.footer { padding:16px; } .footer { align-items:flex-start; flex-direction:column; } .export-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; } .export { width:100%; padding-inline:10px; } .clear-session { grid-column:1 / -1; } .camera-overlay { padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); } .viewfinder { border-radius:18px; } .export-dialog { align-items:end; padding:0; } .export-dialog-card { width:100%; max-height:88vh; border-radius:24px 24px 0 0; padding:22px 18px max(20px,env(safe-area-inset-bottom)); } .export-dialog-footer { align-items:stretch; flex-direction:column; } .dialog-actions { display:grid; grid-template-columns:1fr 1.4fr; } .dialog-actions button { width:100%; } }