*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Microsoft YaHei",sans-serif;background:#f4f5f7;color:#1f2329;font-size:14px;line-height:1.6}
a{color:#185fa5;text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:210px;background:#1f2937;color:#cbd2da;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:18px 20px;font-size:15px;font-weight:600;color:#fff;border-bottom:1px solid #374151;word-break:break-all}
.sidebar nav{flex:1;padding:8px 0;overflow-y:auto}
.sidebar nav a{display:block;padding:11px 20px;color:#cbd2da;font-size:14px}
.sidebar nav a:hover{background:#374151;color:#fff}
.sidebar nav a.on{background:#185fa5;color:#fff}
.sidebar .side-foot{padding:12px 20px;border-top:1px solid #374151;font-size:13px}
.sidebar .side-foot a{color:#9ca3af}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.ctop{background:#fff;border-bottom:1px solid #e7e8eb;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.ctop .title{font-weight:600;font-size:15px}
.ctop .right{color:#888;font-size:13px}
.wrap{max-width:1100px;margin:24px auto;padding:0 24px;width:100%}
.card{background:#fff;border:1px solid #e7e8eb;border-radius:12px;padding:24px;margin-bottom:20px}
.card h2{font-size:16px;font-weight:600;margin-bottom:16px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.metric{background:#f8f9fb;border-radius:10px;padding:18px}
.metric .label{color:#888;font-size:13px;margin-bottom:6px}
.metric .num{font-size:26px;font-weight:600;color:#1f2329}
.metric .num.r{color:#d85a30}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef0f2}
th{color:#888;font-weight:500;background:#fafbfc;white-space:nowrap}
tr:hover td{background:#fafbfc}
form .row{margin-bottom:14px}
label{display:block;margin-bottom:4px;color:#5f6066;font-size:13px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid #d3d5da;border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#185fa5;box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:1px solid #185fa5;background:#185fa5;color:#fff;border-radius:8px;cursor:pointer;font-size:14px;gap:6px}
.btn:hover{background:#0c447c}
.btn.ghost{background:#fff;color:#185fa5}
.btn.sm{padding:5px 12px;font-size:13px}
.btn.danger{background:#fff;color:#a32d2d;border-color:#e24b4a}
.tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px}
.tag.unpaid{background:#fff4e0;color:#854f0b}
.tag.paid{background:#e8f7ef;color:#1d9e75}
.tag.closed{background:#fcebeb;color:#a32d2d}
.muted{color:#888}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f2937,#374151)}
.login-box{background:#fff;border-radius:16px;padding:40px;width:360px;max-width:92%;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.login-box h1{font-size:20px;margin-bottom:6px}
.login-box .sub{color:#888;margin-bottom:24px;font-size:13px}
.login-box .btn{width:100%;margin-top:8px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
hr{border:none;border-top:1px solid #eef0f2;margin:20px 0}
.empty{padding:40px;text-align:center;color:#aaa}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50}
.modal.on{display:flex}
.modal .mbox{background:#fff;border-radius:14px;padding:28px;width:420px;max-width:92%}
.modal h3{margin-bottom:16px}
#qrc{margin:16px auto}
@media(max-width:768px){.sidebar{width:56px}.sidebar .brand{font-size:12px;padding:14px 8px}.sidebar nav a{padding:14px 0;text-align:center;font-size:0}.sidebar .side-foot{display:none}.wrap{padding:0 12px}}