*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;background:#f7f7f7;color:#222}
.topbar{background:#1f6feb;color:#fff;padding:12px 16px;position:sticky;top:0;z-index:10}
.topbar h1{margin:0;font-size:18px}
.topbar{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.container{max-width:960px;margin:0 auto;padding:0 12px}
.actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.btn{display:inline-block;padding:10px 14px;background:#eee;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#222;font-size:15px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn.primary{background:#1f6feb;color:#fff;border-color:#1f6feb}
.btn.warn{background:#fde2e4;color:#c00;border-color:#fac5c9}
.btn:hover{background:#e9e9e9;border-color:#ccc}
.btn.primary:hover{background:#1a5ed1;border-color:#1a5ed1}
.btn:active{box-shadow:0 0 0 2px rgba(31,111,235,.15)}
.filter{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.filter input,.filter select{flex:1;min-width:160px;padding:10px;border:1px solid #ddd;border-radius:8px;background:#fff}
.table-wrap{overflow:auto;max-height:60vh;margin:10px;background:#fff;border:1px solid #eee;border-radius:8px}
.list{width:100%;border-collapse:collapse}
.list th,.list td{border-bottom:1px solid #eee;padding:10px;font-size:14px;white-space:nowrap;text-align:left}
.list thead th{position:sticky;top:0;background:#fff;z-index:1}
.list tbody tr:nth-child(odd){background:#fafafa}
.form{display:flex;flex-direction:column;gap:12px;padding:10px}
.form input,.form select{padding:12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:16px}
.form button{margin-top:4px}
.alert{margin:10px;background:#ffe4e6;color:#c00;padding:10px;border-radius:8px}
.subtitle{margin:10px;font-size:16px}
.pagination{display:flex;justify-content:space-between;align-items:center;padding:10px}
.pager{display:flex;gap:8px}
.card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;margin:12px}
input:focus,select:focus{outline:2px solid #1f6feb}
canvas{max-width:100%}
@media (max-width:480px){.list th,.list td{font-size:12px;padding:8px}.btn{font-size:14px}.container{padding:0 8px}.pagination{flex-direction:column;gap:8px}}
.suggest{display:none;border:1px solid #ddd;border-radius:8px;background:#fff;margin-top:6px}
.suggest-item{padding:8px 10px;cursor:pointer}
.suggest-item:hover{background:#f0f6ff}