:root { color-scheme: light; --green:#176b57; --green-dark:#0d4f40; --lime:#d7f25a; --ink:#17211f; --muted:#66736f; --line:#d8e0dd; --bg:#f2f5f4; --danger:#a63b32; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",sans-serif; letter-spacing:0; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.is-hidden { display:none !important; }
.mobile-login { min-height:100dvh; display:grid; place-items:center; padding:24px; background:#e8eeeb; }
.login-sheet { width:min(420px,100%); display:grid; gap:18px; padding:28px 22px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 40px rgba(18,48,40,.12); }
.mobile-brand { display:flex; align-items:center; gap:12px; }
.mobile-brand img { width:52px; height:52px; border-radius:8px; }
.mobile-brand div { display:grid; gap:3px; }
.mobile-brand strong { font-size:21px; }
.mobile-brand span,.mobile-hint { color:var(--muted); font-size:13px; }
label { display:grid; gap:7px; color:#42504c; font-size:14px; font-weight:700; }
input,select { width:100%; min-height:46px; padding:10px 12px; border:1px solid #bfcac6; border-radius:6px; background:#fff; color:var(--ink); font-size:16px; }
input:focus,select:focus { outline:3px solid rgba(23,107,87,.14); border-color:var(--green); }
.mobile-primary,.mobile-secondary,.mobile-danger,.mobile-text-button,.mobile-icon-button { min-height:44px; border-radius:6px; font-weight:700; }
.mobile-primary { border:1px solid var(--green); background:var(--green); color:#fff; padding:10px 16px; }
.mobile-secondary { border:1px solid #a8b7b2; background:#fff; color:var(--green-dark); padding:10px 16px; }
.mobile-danger { border:1px solid #d2aaa6; background:#fff; color:var(--danger); padding:10px 16px; }
.mobile-text-button { border:0; background:transparent; color:var(--green); padding:8px; }
.mobile-icon-button { width:44px; border:1px solid var(--line); background:#fff; color:var(--green-dark); font-size:28px; line-height:1; }
.mobile-error { min-height:18px; margin:0; color:var(--danger); font-size:13px; }
.mobile-app { min-height:100dvh; }
.mobile-header { position:sticky; top:0; z-index:10; min-height:66px; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; padding-top:max(8px,env(safe-area-inset-top)); background:#fff; border-bottom:1px solid var(--line); }
.mobile-brand.compact img { width:38px; height:38px; }
.mobile-brand.compact strong { font-size:17px; }
.mobile-status { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.mobile-status i { width:9px; height:9px; border-radius:50%; background:#29916f; }
.mobile-status.offline i { background:#b54a42; }
.mobile-connection { display:grid; justify-items:end; gap:4px; }
.offline-queue-badge { padding:3px 7px; border-radius:4px; background:#fff0cc; color:#7a5500; font-size:11px; font-weight:700; }
main { width:min(720px,100%); margin:0 auto; padding:18px 14px calc(100px + env(safe-area-inset-bottom)); }
.mobile-screen { display:none; }
.mobile-screen.active { display:block; }
.mobile-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mobile-section-title h1 { margin:0 0 5px; font-size:24px; }
.mobile-section-title h2 { margin:0; font-size:18px; }
.mobile-section-title p { margin:0; color:var(--muted); font-size:13px; }
.compact-title { margin-top:28px; }
.operation-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.operation-button { min-height:124px; display:grid; align-content:space-between; gap:12px; padding:16px; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.operation-button strong { font-size:16px; }
.operation-button span { color:var(--muted); font-size:12px; line-height:1.5; }
.operation-button b { color:var(--green); font-size:13px; }
.mobile-sync-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.mobile-sync-summary div { display:grid; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.mobile-sync-summary span { color:var(--muted); font-size:11px; }
.mobile-sync-summary strong { font-size:16px; }
.session-history { display:grid; gap:8px; }
.session-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:13px 14px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.session-row strong,.session-row span { overflow-wrap:anywhere; }
.session-row div { display:grid; gap:5px; }
.session-row span,.session-row small { color:var(--muted); font-size:12px; }
.status-tag { align-self:start; padding:4px 7px; border-radius:4px; background:#e5efeb; color:var(--green-dark) !important; font-weight:700; }
.scanner-toolbar { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:14px; }
.scanner-toolbar div { display:grid; gap:3px; }
.scanner-toolbar strong { font-size:18px; }
.scanner-toolbar span { color:var(--muted); font-size:12px; }
.camera-box { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; margin-bottom:12px; border-radius:8px; background:#101615; }
.camera-box video { width:100%; height:100%; object-fit:cover; }
.scan-frame { position:absolute; inset:22% 12%; border:2px solid var(--lime); box-shadow:0 0 0 999px rgba(0,0,0,.32); }
.camera-close { position:absolute; right:12px; bottom:12px; min-height:40px; padding:8px 12px; border:0; border-radius:5px; background:rgba(255,255,255,.92); color:var(--ink); }
.scan-entry { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.manual-scan { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:8px; }
.scan-entry p { margin:0; }
.scan-message { margin:10px 0; padding:12px 14px; border-left:4px solid var(--green); background:#e5efeb; color:var(--green-dark); font-size:14px; }
.scan-message.error { border-color:var(--danger); background:#f5e9e7; color:var(--danger); }
.offline-sync-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; padding:11px 12px; border:1px solid #e2c887; border-radius:7px; background:#fff8e8; }
.offline-sync-panel > div { display:grid; gap:3px; }
.offline-sync-panel span { color:#765f2c; font-size:12px; }
.offline-sync-panel button { min-width:96px; }
.scan-list-header { display:flex; justify-content:space-between; margin:20px 2px 10px; }
.scan-list-header span { color:var(--muted); font-size:12px; }
.mobile-scan-list { display:grid; gap:8px; }
.scan-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.scan-row div { display:grid; gap:4px; }
.scan-row strong,.scan-row span { overflow-wrap:anywhere; }
.scan-row span,.scan-row small { color:var(--muted); font-size:12px; }
.scan-row button { width:40px; height:40px; border:1px solid #dfc0bd; border-radius:5px; background:#fff; color:var(--danger); font-size:20px; }
.scan-row.pending { border-color:#dec57f; background:#fffaf0; }
.scan-row.failed { border-color:#d9a29d; background:#fff6f5; }
.scan-row .queue-status { color:#866213; font-weight:700; }
.scan-row.failed .queue-status { color:var(--danger); }
.mobile-bottom-actions { position:fixed; left:0; right:0; bottom:0; z-index:8; display:grid; grid-template-columns:1fr 1.5fr; gap:10px; padding:10px 14px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--line); }
dialog { width:min(440px,calc(100vw - 28px)); padding:0; border:0; border-radius:8px; }
dialog::backdrop { background:rgba(13,31,26,.52); }
.mobile-dialog { display:grid; gap:16px; padding:22px; }
.mobile-dialog h2,.mobile-dialog p { margin:0; }
.mobile-dialog > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px) { .operation-list { grid-template-columns:1fr; } .operation-button { min-height:92px; } .mobile-sync-summary { grid-template-columns:1fr 1fr 1fr; } }
@media (min-width:900px) { body::after { content:"手机扫码端建议在手机浏览器中打开"; position:fixed; right:16px; bottom:16px; padding:8px 12px; border-radius:5px; background:#fff; color:var(--muted); border:1px solid var(--line); font-size:12px; } }