* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f3f5f7; color: #222; }
a { color: #1a5fb4; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; gap: 24px; background: #1a3a5c; color: #fff; padding: 0 24px; height: 52px; }
.topbar .brand { font-size: 17px; font-weight: 600; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { color: #cfe0f0; padding: 6px 12px; border-radius: 4px; font-size: 14px; }
.topbar nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; color: #fff; }
.topbar .userbox { font-size: 13px; color: #cfe0f0; }
.topbar .userbox a { color: #9fc3e8; margin-left: 8px; }
.topbar .role { background: #e8a33d; color: #3a2c00; border-radius: 3px; padding: 1px 6px; font-size: 11px; margin-left: 6px; }
.badge { background: #d3453d; color: #fff; border-radius: 8px; font-size: 11px; padding: 0 6px; margin-left: 4px; }

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; border-radius: 8px; padding: 24px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; }
.card.narrow { max-width: 560px; margin: 40px auto; }
.card h2 { font-size: 18px; margin-bottom: 14px; }
.card h2 .right { float: right; }
.hint { color: #666; font-size: 13px; margin-bottom: 16px; line-height: 1.7; }

.flash { padding: 10px 16px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc3; }
.flash-warn { background: #fdf3e0; color: #92610a; border: 1px solid #f0d9a8; }
.flash-error { background: #fdecea; color: #b3261e; border: 1px solid #f3c0bc; }

.btn { display: inline-block; background: #eef1f4; border: 1px solid #d4dae0; color: #333; border-radius: 5px; padding: 8px 18px; font-size: 14px; cursor: pointer; }
.btn:hover { background: #e2e7ec; text-decoration: none; }
.btn.primary { background: #1a5fb4; border-color: #1a5fb4; color: #fff; }
.btn.primary:hover { background: #154f96; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn.link { background: none; border: none; color: #888; }
.btn.block { width: 100%; }
.btnrow { display: flex; gap: 12px; margin-top: 18px; }
.btnrow form { display: inline; }

.login-card { max-width: 360px; margin: 80px auto; background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.login-card h2 { margin-bottom: 20px; text-align: center; }
.login-card label { display: block; margin-bottom: 14px; font-size: 14px; color: #444; }
.login-card input { width: 100%; padding: 9px 10px; border: 1px solid #ccd3da; border-radius: 5px; margin-top: 5px; font-size: 14px; }
.login-card label.remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.login-card label.remember input { width: auto; margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat .num { font-size: 24px; font-weight: 700; color: #1a3a5c; }
.stat .lbl { color: #777; font-size: 13px; margin-top: 6px; }
.stat.alert .num { color: #d3453d; }
.actions { margin-bottom: 22px; display: flex; gap: 12px; }

.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
.tbl th, .tbl td { border: 1px solid #e3e7eb; padding: 8px 10px; text-align: left; }
.tbl th { background: #f6f8fa; color: #444; font-weight: 600; }
.tbl .empty { text-align: center; color: #999; padding: 24px; }
.tbl .rules { max-width: 320px; }

.kv { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14px; }
.kv th, .kv td { border: 1px solid #e3e7eb; padding: 9px 12px; text-align: left; }
.kv th { background: #f6f8fa; width: 15%; color: #444; white-space: nowrap; }
.kv td { width: 35%; }
.money { font-weight: 700; color: #b3261e; }

.panel { border-radius: 6px; padding: 16px 20px; margin-bottom: 16px; }
.panel h3 { font-size: 15px; margin-bottom: 10px; }
.panel ul { margin-left: 20px; line-height: 1.9; font-size: 14px; }
.panel p { margin-top: 10px; font-size: 13.5px; }
.panel.reject { background: #fdecea; border: 1px solid #f3c0bc; color: #7a1b15; }
.panel.warn { background: #fdf3e0; border: 1px solid #f0d9a8; color: #6b4a08; }
.panel.pass { background: #e6f4ea; border: 1px solid #b7dfc3; color: #1e7e34; }

.tag { display: inline-block; border-radius: 3px; padding: 1px 8px; font-size: 12px; }
.tag.warn { background: #fdf3e0; color: #92610a; border: 1px solid #f0d9a8; }
.tag.reject { background: #fdecea; color: #b3261e; border: 1px solid #f3c0bc; }
.warn-text { color: #b3261e; }

.filterbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filterbar input, .filterbar select { padding: 7px 10px; border: 1px solid #ccd3da; border-radius: 5px; font-size: 13.5px; }

.inline-form label { display: inline-block; margin-right: 20px; margin-bottom: 10px; font-size: 14px; }
.inline-form select { padding: 7px 10px; border: 1px solid #ccd3da; border-radius: 5px; margin-left: 6px; font-size: 14px; min-width: 200px; }

.gridform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.gridform label { font-size: 14px; color: #444; }
.gridform input { width: 100%; padding: 8px 10px; border: 1px solid #ccd3da; border-radius: 5px; margin-top: 5px; font-size: 14px; }
.gridform .span2 { grid-column: span 2; }
.gridform .checkbox input { width: auto; margin-right: 8px; }

.filepick { display: block; border: 2px dashed #b9c4cf; border-radius: 8px; padding: 40px; text-align: center; color: #567; cursor: pointer; margin-bottom: 18px; font-size: 15px; }
.filepick:hover { border-color: #1a5fb4; color: #1a5fb4; }
.filepick input { display: none; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tabs a { padding: 6px 16px; border-radius: 5px; font-size: 13.5px; color: #555; background: #eef1f4; }
.tabs a.on { background: #1a5fb4; color: #fff; text-decoration: none; }

form.inline { display: flex; gap: 6px; align-items: center; }
h3 { font-size: 16px; margin-bottom: 12px; color: #1a3a5c; }
code { background: #f0f2f5; padding: 1px 5px; border-radius: 3px; }