/* QR Live — minimal clean styles */

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #1a1a1a;
  background: #f7f7f8;
  margin: 0;
  line-height: 1.5;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
.container.narrow { max-width: 420px; }

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #eee; }

.muted { color: #888; font-size: 13px; }
.error { color: #d33; }
.empty { color: #888; padding: 24px; text-align: center; background: #fff; border: 1px dashed #ddd; border-radius: 6px; }
.ok { color: #0a8a3a; font-weight: 600; }
.off { color: #999; }

.footer {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 16px;
  border-top: 1px solid #eee;
}

/* 公开页 QR 卡片 */
.qr-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  max-width: 420px;
  margin: 32px auto;
}
.qr-img {
  max-width: 280px;
  width: 80%;
  margin: 16px auto;
  display: block;
}
.tip { font-size: 13px; color: #888; margin-top: 12px; }

/* 后台 */
.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.admin-bar .actions { display: flex; gap: 8px; }

.btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { background: #f0f0f0; }
.btn.primary { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.btn.primary:hover { background: #1757c5; }
.btn.danger { background: #d33; color: #fff; border-color: #d33; }
.btn.danger:hover { background: #b22; }
.btn.small { padding: 4px 10px; font-size: 12px; }

a { color: #1f6feb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 表单 */
.card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #eee;
  margin-bottom: 16px;
}
.card label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.card input, .card textarea, .card select {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}
.card textarea { resize: vertical; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

.upload button { align-self: flex-start; }

.upload-now {
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  background: #fafafa;
}
.upload-now legend { padding: 0 6px; color: #555; font-size: 13px; }
.upload-now p { margin: 0 0 8px; }

/* 表格 */
.grid {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.grid th, .grid td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; }
.grid th { background: #fafafa; color: #555; font-weight: 600; }
.grid td.r, .grid th.r { text-align: right; }
.grid tbody tr:last-child td { border-bottom: 0; }

/* 统计柱状 */
.bars { width: 100%; }
.bars td { padding: 4px 0; font-size: 13px; }
.bars .d { color: #888; width: 100px; }
.bars .c { width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-cell { width: auto; }
.bar { height: 14px; background: #1f6feb; border-radius: 3px; min-width: 2px; }

/* QR 网格 */
.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.qr-tile {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.qr-tile.inactive { opacity: .45; }
.qr-tile img { max-width: 100%; height: 140px; object-fit: contain; }
.qr-tile .meta { font-size: 12px; margin-top: 8px; }
.qr-tile .actions { margin-top: 6px; display: flex; justify-content: center; gap: 6px; }
.qr-tile .actions form { display: inline; }

/* 首页 list */
.list { list-style: none; padding: 0; }
.list li {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 8px;
}
code { background: #f0f0f0; padding: 1px 6px; border-radius: 3px; font-size: 12px; }

section { margin-bottom: 32px; }

.slug-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.slug-row input { flex: 1; }
.slug-row .btn { white-space: nowrap; }

/* 印外码的展示区 */
.print-qr-row {
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.print-info { flex: 1; }
.print-info p { margin: 0 0 12px; }
.print-info .btn { margin-right: 8px; }
.qr-print-img {
  width: 160px; height: 160px;
  background: white;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
}