:root {
  --gold: #c9a14a;
  --gold-deep: #a9852f;
  --blush: #fbeef0;
  --ink: #3a3330;
  --muted: #9b8f88;
  --ok: #2e9e6b;
  --no: #d9534f;
  --bg: #faf6f1;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ---------- 顶部 ---------- */
.hero {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  text-align: center;
  padding: 38px 20px 30px;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 6px 18px rgba(169, 133, 47, 0.25);
}
.hero-sub {
  letter-spacing: 6px;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}
.hero h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
}
.hero-tip {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.9;
}
.admin-hero { padding: 26px 20px; }

/* ---------- 容器 ---------- */
.container {
  flex: 1;
  padding: 20px 16px 30px;
}

/* ---------- 宾客端：查询 ---------- */
.search-box {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.search-box input {
  flex: 1;
  height: 48px;
  border: 1px solid #e4d8c8;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
  background: #fff;
  outline: none;
}
.search-box input:focus { border-color: var(--gold); }
.search-box button,
.filter button,
#importBtn {
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--gold);
  color: #fff;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
}
.search-box button:active,
.filter button:active,
#importBtn:active { background: var(--gold-deep); }

/* ---------- 结果卡片 ---------- */
.result { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-name { font-size: 18px; font-weight: 600; }
.card-seat { color: var(--muted); font-size: 14px; }
.card-seat span { color: var(--gold-deep); font-weight: 700; font-size: 16px; margin-left: 4px; }
.checkin-btn {
  border: none;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  cursor: pointer;
}
.checkin-btn.done { background: var(--ok); }
.checkin-btn:disabled { cursor: default; }

.empty, .loading {
  text-align: center;
  color: var(--muted);
  padding: 30px 10px;
  font-size: 14px;
}

/* ---------- 管理端 ---------- */
.panel {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.panel h2 { margin: 0 0 8px; font-size: 17px; }
.hint { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.panel input[type="file"] {
  display: block;
  width: 100%;
  font-size: 14px;
  margin-bottom: 12px;
}
.primary { width: 100%; }

/* 手动新增表单 */
.add-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.add-form input {
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  height: 46px;
  border: 1px solid #e4d8c8;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  outline: none;
}
.add-form input:focus { border-color: var(--gold); }

/* 添加按钮：喜庆红金，作为主操作突出 */
#addBtn {
  height: 48px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #e0244a 0%, #b30d28 58%, #e0a526 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(179, 13, 40, 0.30);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}
#addBtn:hover { filter: brightness(1.04); box-shadow: 0 8px 20px rgba(179, 13, 40, 0.36); }
#addBtn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(179, 13, 40, 0.28); }
#addBtn:disabled { opacity: 0.6; cursor: default; transform: none; filter: none; }

.msg { margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.msg.ok { background: #e7f6ee; color: var(--ok); }
.msg.err { background: #fdecec; color: var(--no); }

.stats { display: flex; gap: 10px; }
.stat {
  flex: 1;
  text-align: center;
  background: var(--blush);
  border-radius: 12px;
  padding: 14px 6px;
}
.stat .num { font-size: 24px; font-weight: 700; color: var(--ink); }
.stat.ok .num { color: var(--ok); }
.stat.no .num { color: var(--no); }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

.filter { display: flex; gap: 8px; margin-bottom: 12px; }

/* 状态分段切换 */
.seg { display: flex; gap: 8px; margin-bottom: 14px; }
.seg-btn {
  flex: 1;
  height: 42px;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--gold-deep);
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg-btn.active {
  background: linear-gradient(135deg, #e0244a 0%, #b30d28 60%, #e0a526 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(179, 13, 40, 0.22);
}
.filter input {
  flex: 1;
  height: 44px;
  border: 1px solid #e4d8c8;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  outline: none;
}
.filter button { height: 44px; padding: 0 16px; }
.filter .ghost {
  background: #fff;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
}

.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #f0e7dc;
  border-radius: 10px;
}
.row.checked { background: #f3faf6; border-color: #d6efe1; }
.row-name { flex: 1; font-size: 16px; font-weight: 600; }
.row-seat { width: 70px; text-align: center; color: var(--muted); font-size: 14px; }
.row-status { width: 76px; text-align: right; }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.badge.ok { background: #e7f6ee; color: var(--ok); }
.badge.no { background: #fdecec; color: var(--no); }

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 16px 0 22px;
  letter-spacing: 2px;
}

/* ============ 宾客端 · 喜庆红金主题（仅作用于 body.guest） ============ */
body.guest {
  background:
    radial-gradient(1000px 520px at 50% -12%, #fff5ec 0%, rgba(255,245,236,0) 60%),
    linear-gradient(180deg, #fff6f0 0%, #fdeef0 100%);
}
body.guest .app { background: transparent; }

/* 顶部：红金渐变 + 喜字水印 */
body.guest .hero {
  position: relative;
  background: linear-gradient(135deg, #d4183c 0%, #b30d28 55%, #e0a526 100%);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 10px 26px rgba(178, 13, 40, 0.28);
  overflow: hidden;
}
body.guest .hero::after {
  content: "囍";
  position: absolute;
  right: -16px;
  top: -30px;
  font-size: 150px;
  color: rgba(255, 255, 255, 0.10);
  line-height: 1;
  pointer-events: none;
}
.hero-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 28px;
  line-height: 54px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
body.guest .hero-sub { opacity: 0.95; letter-spacing: 8px; }
body.guest .hero h1 {
  background: linear-gradient(90deg, #ffffff, #ffe9b0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
body.guest .hero-tip { opacity: 0.92; }

/* 搜索框 */
body.guest .search-box input {
  border: 1px solid #f1c9c0;
  box-shadow: inset 0 1px 3px rgba(212, 24, 60, 0.06);
}
body.guest .search-box input:focus { border-color: #d4183c; }
body.guest .search-box button {
  background: linear-gradient(135deg, #e0244a 0%, #b30d28 100%);
  box-shadow: 0 6px 14px rgba(179, 13, 40, 0.30);
  font-weight: 600;
}
body.guest .search-box button:active { background: linear-gradient(135deg, #b30d28, #8f0a20); }

/* 结果卡片：白底 + 红色左侧喜庆条 */
body.guest .card {
  border: 1px solid #f4e3e6;
  border-left: 5px solid #d4183c;
  box-shadow: 0 6px 16px rgba(212, 24, 60, 0.10);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
}
body.guest .card-name {
  color: #7a1020;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
body.guest .card-name .caret { color: var(--muted); font-size: 22px; line-height: 1; }
body.guest .tag-done {
  float: right;
  font-size: 12px;
  font-weight: 600;
  color: #b30d28;
  background: rgba(224, 165, 38, 0.18);
  border: 1px solid rgba(224, 165, 38, 0.55);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
}
body.guest .card-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
body.guest .card-actions[hidden] { display: none; }
body.guest .card.done { border-left-color: #e0a526; }
body.guest .card-seat { color: #b30d28; font-weight: 700; font-size: 18px; }
body.guest .save-btn {
  margin-left: auto;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #f0b429, #e0a526);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(224, 165, 38, 0.30);
}
body.guest .save-btn:active { transform: translateY(1px); }

/* 签到详情：页面内切换 div（非弹窗），显示时列表隐藏 */
body.guest .overlay {
  display: block;
  margin-top: 4px;
}
body.guest .overlay[hidden] { display: none; }
body.guest .overlay-card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid #f4e3e6;
  border-top: 5px solid #d4183c;
  border-radius: 18px;
  padding: 26px 22px 28px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(212, 24, 60, 0.12);
}
body.guest .overlay-close {
  position: absolute;
  top: 12px;
  left: 14px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #b30d28;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
body.guest .overlay-name {
  font-size: 26px;
  font-weight: 700;
  color: #7a1020;
  margin-bottom: 26px;
}
/* 大圆签到按钮 */
body.guest .big-checkin {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #e0244a, #b30d28);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  box-shadow: 0 10px 26px rgba(179, 13, 40, 0.38);
  cursor: pointer;
  transition: transform 0.08s ease;
}
body.guest .big-checkin:active { transform: scale(0.96); }
body.guest .big-checkin:disabled { opacity: 0.7; cursor: default; }
body.guest .checkin-hint {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #c98a93;
}
/* 签到后放大的桌号，方便老年人 */
body.guest .big-seat {
  font-size: 50px;
  font-weight: 800;
  color: #b30d28;
  margin: 4px 0 22px;
  letter-spacing: 2px;
}

/* 签到成功印章装饰（替代保存图片按钮） */
body.guest .seal {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #e5304f 0%, #c41230 70%, #a30d24 100%);
  border: 3px solid #e7b94a;
  box-shadow: 0 8px 20px rgba(179, 13, 40, 0.32), inset 0 0 0 5px rgba(231, 185, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.guest .seal span {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
body.guest .seal-ok {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  color: #b30d28;
}
body.guest .seal-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #c98a2e;
}

/* 签到按钮 */
body.guest .checkin-btn {
  background: linear-gradient(135deg, #e0244a, #b30d28);
  box-shadow: 0 6px 14px rgba(179, 13, 40, 0.30);
  font-weight: 600;
}
body.guest .checkin-btn:active { background: linear-gradient(135deg, #b30d28, #8f0a20); }
body.guest .checkin-btn.done {
  background: linear-gradient(135deg, #f0b429, #e0a526);
  box-shadow: 0 6px 14px rgba(224, 165, 38, 0.30);
}

/* 空态 / 提示 / 底部 */
body.guest .empty,
body.guest .loading { color: #c98a93; }
body.guest .foot {
  color: #b30d28;
  font-weight: 500;
}