* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, "Microsoft YaHei", sans-serif; color: #1f2933; background: #f5f7fb; }
a { color: inherit; text-decoration: none; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 220px; background: #132238; color: #f8fafc; padding: 18px 14px; display: flex; flex-direction: column; }
.sidebar.admin { background: #1d2b24; }
.brand { font-size: 20px; font-weight: 700; margin: 8px 8px 22px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar a { padding: 10px 12px; border-radius: 6px; color: #d9e2ec; }
.sidebar a.active, .sidebar a:hover { background: rgba(255,255,255,.12); color: #fff; }
.side-user { margin-top: auto; padding: 12px; color: #bcccdc; font-size: 13px; border-top: 1px solid rgba(255,255,255,.12); }
.main { margin-left: 220px; min-height: 100vh; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; background: #fff; border-bottom: 1px solid #e5e9f0; }
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: 0; }
.topbar-user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #e5e9f0; background: #eef2f7; flex: 0 0 auto; }
.topbar-avatar.fallback { display: inline-flex; align-items: center; justify-content: center; color: #334155; font-weight: 700; }
.topbar-name { max-width: 160px; color: #52606d; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { padding: 24px 28px 40px; max-width: 1380px; }
.panel { background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 20px; margin-bottom: 18px; }
.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 18px; }
.metric .label { font-size: 13px; color: #64748b; }
.metric .value { margin-top: 8px; font-size: 28px; font-weight: 700; }
label { display: block; margin: 12px 0 6px; color: #52606d; font-size: 14px; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], textarea, select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 12px; font-size: 14px; background: #fff; }
textarea { min-height: 92px; resize: vertical; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; padding: 9px 18px; cursor: pointer; font-size: 14px; }
.btn.secondary { background: #475569; }
.btn.danger { background: #dc2626; }
.btn.ghost { color: #1f2933; background: #e2e8f0; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; overflow: hidden; }
th, td { border-bottom: 1px solid #eef2f7; padding: 10px 12px; text-align: left; vertical-align: top; font-size: 13px; }
th { background: #f8fafc; color: #52606d; font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td .btn { min-height: 34px; padding: 7px 16px; }
.muted { color: #64748b; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 12px; }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.off { background: #fee2e2; color: #991b1b; }
.badge.warn { background: #fef3c7; color: #92400e; }
.code { font-family: Consolas, monospace; word-break: break-all; }
.notice { padding: 12px 14px; border-radius: 6px; background: #eff6ff; color: #1e40af; margin: 12px 0; display: none; white-space: pre-wrap; }
.notice.error { background: #fef2f2; color: #991b1b; }
.product-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.product-thumb { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; border: 1px solid #e5e9f0; background: #f8fafc; flex: 0 0 auto; }
.product-thumb.empty { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px; }
.pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pagination .btn { min-width: 38px; }
.btn.disabled { opacity: .45; pointer-events: none; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: #f5f7fb; padding: 24px; }
.login-box { width: min(420px, 100%); background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 28px; }
.login-box h1 { margin: 0 0 8px; font-size: 24px; }
.login-box p { color: #64748b; margin: 0 0 20px; }
@media (max-width: 900px) {
  .sidebar { position: static; width: auto; min-height: 0; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { margin-left: 0; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .content { padding: 16px; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .topbar-name { display: none; }
}