:root { --bg:#f4f6f8; --surface:#fff; --text:#172033; --muted:#667085; --line:#d9dee8; --primary:#1677ff; --danger:#d92d20; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
[hidden] { display:none !important; }
.admin-shell { width:min(100%,720px); min-height:100vh; margin:auto; padding:20px 16px calc(28px + env(safe-area-inset-bottom)); }
.login-panel { width:min(100%,420px); margin:12vh auto 0; padding:24px; background:var(--surface); border:1px solid #edf0f5; border-radius:8px; }
h1,h2,p { margin:0; }
.login-panel h1 { margin-bottom:20px; text-align:center; font-size:24px; }
.login-panel form,.login-panel label { display:grid; gap:8px; }
.login-panel form { gap:16px; }
.login-panel label span { font-weight:700; }
.login-panel input { min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; outline:none; }
.login-panel input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,119,255,.12); }
.login-panel button { min-height:48px; color:#fff; font-weight:700; background:var(--primary); border:0; border-radius:8px; }
.admin-message { min-height:22px; color:var(--danger); font-size:14px; font-weight:700; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0 18px; }
.admin-header p { color:var(--muted); font-size:13px; }
.admin-header h1 { font-size:24px; }
.quiet-button { min-height:40px; padding:8px 14px; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:8px; }
.record-count { margin-bottom:10px; color:var(--muted); font-size:14px; }
.submission-list { display:grid; background:var(--surface); border:1px solid #edf0f5; border-radius:8px; overflow:hidden; }
.submission-item { display:grid; grid-template-columns:1fr auto 16px; grid-template-rows:auto auto; align-items:center; gap:6px 10px; min-height:70px; padding:12px 14px; text-align:left; color:var(--text); background:#fff; border:0; border-bottom:1px solid #edf0f5; }
.submission-item:last-child { border-bottom:0; }
.submission-time { grid-column:1; color:var(--muted); font-size:13px; }
.submission-item b { grid-column:3; grid-row:1 / span 2; font-size:24px; font-weight:400; }
.status-badge { grid-column:2; grid-row:1 / span 2; padding:4px 8px; font-size:13px; font-weight:700; border-radius:6px; }
.status-badge.unpaid { color:#b42318; background:#fef3f2; }
.status-badge.paid { color:#067647; background:#ecfdf3; }
.empty-state { padding:30px 16px; text-align:center; color:var(--muted); }
.empty-state.error { color:var(--danger); }
dialog { width:min(calc(100% - 20px),680px); max-height:calc(100vh - 20px); padding:0; color:var(--text); background:#fff; border:0; border-radius:8px; }
dialog::backdrop { background:rgba(15,23,42,.5); }
.detail-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:16px; background:#fff; border-bottom:1px solid #edf0f5; }
.detail-header h2 { font-size:20px; }
.close-button { width:40px; height:40px; padding:0; color:var(--text); font-size:28px; line-height:1; background:#fff; border:0; }
#detailContent { padding:16px; }
.detail-list { margin:0; border-top:1px solid #edf0f5; }
.detail-row { display:grid; grid-template-columns:128px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid #edf0f5; }
.detail-row dt { color:var(--muted); }
.detail-row dd { margin:0; overflow-wrap:anywhere; }
.document-images { display:grid; gap:18px; margin-top:22px; }
.payment-toggle { width:100%; min-height:48px; margin-top:18px; color:#fff; font-weight:700; border:0; border-radius:8px; }
.payment-toggle.unpaid { background:#d92d20; }
.payment-toggle.paid { background:#067647; }
.payment-toggle:disabled { opacity:.6; }
figure { margin:0; }
figcaption { margin-bottom:8px; font-weight:700; }
figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; -webkit-touch-callout:default; user-select:auto; }
@media (max-width:480px) { .detail-row { grid-template-columns:1fr; gap:4px; } }