:root { --ink:#101010; --line:#e4e1da; --gray:#6f6f6f; --accent:#9c7c4f; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Inter","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; color:#101010; background:#f6f5f2; font-size:14px; }
a { color:inherit; text-decoration:none; }

.login-page { display:grid; place-items:center; min-height:100vh; background:#101010; }
.login-box { width:380px; background:#fff; padding:48px 44px; display:flex; flex-direction:column; }
.login-brand { display:flex; align-items:center; gap:12px; font-size:15px; letter-spacing:.2em; margin-bottom:36px; }
.brand-mark { width:36px; height:36px; border:1px solid #101010; display:grid; place-items:center; }
.brand-logo { width:36px; height:36px; display:block; object-fit:contain; flex:none; }
.login-box label { font-size:12px; letter-spacing:.16em; color:var(--gray); margin-bottom:8px; }
.login-box input { border:0; border-bottom:1px solid var(--line); padding:12px 0; font-size:15px; outline:none; margin-bottom:26px; font-family:inherit; }
.login-box input:focus { border-color:#101010; }
.login-box button { height:48px; border:0; background:#101010; color:#fff; letter-spacing:.3em; font-size:14px; cursor:pointer; }
.login-box button:hover { background:#2c2c2c; }
.login-tip { font-size:12px; color:#9a9a9a; margin:18px 0 0; text-align:center; }
.login-back { margin-top:18px; height:44px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12.5px; letter-spacing:.22em; color:var(--gray); transition:all .35s; }
.login-back:hover { border-color:var(--ink); color:var(--ink); background:#fafafa; }
.login-error { background:#fdecea; color:#c0503a; padding:10px 14px; font-size:13px; margin-bottom:20px; }

.adm { display:flex; min-height:100vh; }
.adm-side { width:220px; background:#101010; color:rgba(255,255,255,.7); padding:30px 0; flex:none; }
.adm-logo { color:#fff; padding:0 26px 30px; font-size:15px; letter-spacing:.24em; }
.adm-side a { display:block; padding:13px 26px; font-size:13.5px; border-left:2px solid transparent; }
.adm-side a:hover { color:#fff; background:rgba(255,255,255,.06); }
.adm-side a.on { color:#fff; border-left-color:var(--accent); background:rgba(255,255,255,.08); }
.adm-main { flex:1; padding:40px 48px; }
.adm-main h1 { font-size:24px; font-weight:400; margin:0 0 30px; }
.adm-main h2 { font-size:16px; font-weight:500; margin:44px 0 18px; }
.adm-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.adm-card { background:#fff; padding:28px; border:1px solid var(--line); }
.adm-card b { display:block; font-size:32px; font-weight:300; }
.adm-card span { color:var(--gray); font-size:12px; letter-spacing:.14em; }
.adm-table { width:100%; border-collapse:collapse; background:#fff; }
.adm-table th, .adm-table td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13.5px; }
.adm-table th { background:#fbfaf8; font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--gray); }
.adm-del { color:#c0503a; }
.adm-ok { color:#6f8f6a; }
.adm-pager { display:flex; gap:16px; align-items:center; margin-top:24px; font-size:13px; color:var(--gray); }

/* ---------- 列表页工具条 ---------- */
.adm-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.adm-head h1 { margin:0; }
.adm-btn { display:inline-flex; align-items:center; height:40px; padding:0 22px; border:0; background:#101010; color:#fff; font-size:13.5px; letter-spacing:.06em; cursor:pointer; font-family:inherit; }
.adm-btn:hover { background:#2c2c2c; }
.adm-btn.ghost { background:transparent; color:#101010; border:1px solid var(--line); }
.adm-btn.ghost:hover { background:#fff; border-color:#101010; }
.adm-btn.danger { background:transparent; color:#c0503a; border:1px solid #e6c4bd; }
.adm-btn.danger:hover { background:#fdecea; }

.adm-flash { background:#eef5ec; color:#4d6b48; border-left:3px solid #6f8f6a; padding:12px 16px; font-size:13.5px; margin-bottom:22px; }
.adm-alert { background:#fdecea; color:#c0503a; border-left:3px solid #c0503a; padding:12px 16px; font-size:13.5px; margin-bottom:22px; }

.adm-panel { background:#fff; border:1px solid var(--line); overflow-x:auto; }
.adm-thumb { width:52px; height:38px; object-fit:cover; display:block; background:#f2f0ec; }
.adm-name { font-weight:500; border-bottom:1px solid transparent; }
.adm-name:hover { border-color:#101010; }
.adm-tag { display:inline-block; padding:3px 10px; font-size:11.5px; letter-spacing:.08em; }
.adm-tag.on { background:#eef5ec; color:#4d6b48; }
.adm-tag.off { background:#f0eeea; color:#8a8a8a; }
.adm-ops { white-space:nowrap; }
.adm-ops a { margin-right:14px; color:var(--accent); }
.adm-ops a:hover { text-decoration:underline; }
.adm-ops a.adm-del { color:#c0503a; margin-right:0; }
.adm-empty { text-align:center; color:var(--gray); padding:40px 0 !important; }
.adm-tip { font-size:12.5px; color:var(--gray); margin-top:18px; }

/* ---------- 产品表单 ---------- */
.adm-form { max-width:1000px; }
.adm-block { background:#fff; border:1px solid var(--line); padding:26px 28px; margin-bottom:20px; }
.adm-block h2 { margin:0 0 20px; font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--gray); }
.adm-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
.adm-grid.three { grid-template-columns:repeat(3,1fr); }
.adm-field { display:block; margin-bottom:18px; }
.adm-grid .adm-field { margin-bottom:0; }
.adm-field > span { display:block; font-size:12px; letter-spacing:.1em; color:var(--gray); margin-bottom:8px; }
.adm-field > span i { color:#c0503a; font-style:normal; }
.adm-field input[type=text], .adm-field input[type=number], .adm-field select, .adm-field textarea {
  width:100%; border:1px solid var(--line); background:#fbfaf8; padding:11px 13px;
  font-size:14px; font-family:inherit; color:#101010; outline:none; border-radius:0;
}
.adm-field textarea { resize:vertical; line-height:1.7; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus { border-color:#101010; background:#fff; }
.adm-field input[type=file] { font-size:13px; }
.adm-check { display:flex; align-items:center; gap:10px; margin-top:20px; font-size:13.5px; color:#3a3a3a; }
.adm-img { display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start; }
.adm-img-preview { border:1px solid var(--line); background:#f2f0ec; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; }
.adm-img-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.adm-hint { font-size:12px; line-height:1.8; color:var(--gray); margin:0 0 16px; }
.adm-actions { display:flex; gap:12px; align-items:center; padding:6px 0 60px; }

@media (max-width:960px) {
  .adm { flex-direction:column; }
  .adm-side { width:100%; display:flex; overflow-x:auto; padding:0; }
  .adm-logo { display:none; }
  .adm-side a { white-space:nowrap; padding:14px 18px; border-left:0; border-bottom:2px solid transparent; }
  .adm-side a.on { border-left:0; border-bottom-color:var(--accent); }
  .adm-main { padding:26px 20px; }
  .adm-grid, .adm-grid.three { grid-template-columns:1fr; }
  .adm-img { grid-template-columns:1fr; }
  .adm-img-preview { max-width:320px; }
}