/* 拼格管理后台样式 */
:root { --brand:#3355D1; --ink:#1B2026; --ink2:#5A6472; --line:#E4E8EF; --bg:#F5F6FA; --ok:#1E9E62; --bad:#C0392B; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
header { background:#fff; border-bottom:1px solid var(--line); }
.bar { max-width:1080px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:16px; }
.bar nav { margin-left:auto; display:flex; gap:14px; align-items:center; }
.bar a { color:var(--ink2); text-decoration:none; }
.bar a:hover { color:var(--brand); }
main { max-width:1080px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:20px; margin:8px 0 16px; } h2 { font-size:16px; margin:28px 0 8px; } h3 { font-size:14px; margin:20px 0 6px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th,td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--ink2); background:#FAFBFD; font-weight:600; }
tr:last-child td { border-bottom:0; }
.empty { color:var(--ink2); text-align:center; padding:24px !important; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.5px; }
.big { font-size:18px; }
.dim { color:var(--ink2); }
.chip { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; }
.chip.good { background:#E5F5EC; color:var(--ok); }
.chip.bad { background:#FBEAE7; color:var(--bad); }
.chip.idle { background:#EEF0F4; color:var(--ink2); }
button, .btn { background:var(--brand); color:#fff; border:0; border-radius:6px; padding:7px 14px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-block; }
button.sm, .btn.sm { padding:3px 10px; font-size:12px; }
button.link { background:none; color:var(--ink2); padding:0; }
button.danger { background:#fff; color:var(--bad); border:1px solid #E7B9B3; }
button.danger:hover { background:#FBEAE7; }
form.inline { display:inline; }
form.row, form.grid { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
form.grid { display:grid; grid-template-columns:repeat(4,1fr); }
form.grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink2); }
form.grid label.wide { grid-column:span 3; }
input, select { padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; min-width:0; }
details { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:12px 0; }
summary { cursor:pointer; font-weight:600; color:var(--ink); }
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:16px 0; }
.stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.stat b { display:block; font-size:20px; }
.stat span { color:var(--ink2); font-size:12px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:14px; }
.photos figure { margin:0; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px; }
.photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; background:#EEF0F4; display:block; }
.photos figcaption { font-size:11px; color:var(--ink2); margin:4px 0; }
.pager a, .pager b { margin-right:6px; }
.ok { background:#E5F5EC; color:var(--ok); padding:8px 12px; border-radius:6px; }
.err { background:#FBEAE7; color:var(--bad); padding:8px 12px; border-radius:6px; }
main > .ok, main > .err { max-width:1080px; }
body.center { display:grid; place-items:center; min-height:100vh; background:var(--bg); }
.card.login { background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px 32px; width:320px; display:flex; flex-direction:column; gap:12px; }
.card.login h1 { font-size:18px; margin:0; }
.card.login input { width:100%; }
p.ok, p.err { max-width:1080px; }
@media (max-width:720px){ form.grid { grid-template-columns:1fr 1fr; } form.grid label.wide { grid-column:span 2; } }