:root {
  --bg: #f4f8f7;
  --card: #ffffff;
  --text: #172522;
  --muted: #5c6f69;
  --line: #dce8e4;
  --primary: #17745f;
  --primary-dark: #0f5747;
  --accent: #d7892f;
  --accent-dark: #a96416;
  --soft-primary: #e9f5f1;
  --soft-accent: #fff2df;
  --danger: #b42318;
  --warn: #8a5a00;
  --success: #0f6b50;
  --shadow: 0 12px 32px rgba(30, 65, 55, 0.12);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #fff9ec 0, transparent 260px), var(--bg);
  color: var(--text);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.page-shell {
  width: min(1040px, calc(100% - 28px));
  margin: 18px auto 32px;
}
.narrow-shell { width: min(620px, calc(100% - 24px)); }

.hero-card,
.content-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  margin-bottom: 14px;
}
.hero-main { display: flex; gap: 14px; align-items: center; }
.logo-badge {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--soft-primary);
  font-size: 30px;
}
.hero-title-zh,
.page-title {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: .02em;
}
.hero-meta, .hero-title-en, .description, .slogan { margin: 3px 0; }
.hero-meta { color: var(--primary-dark); font-weight: 700; }
.hero-title-en { color: var(--muted); font-size: .95rem; }
.description { color: var(--muted); }
.tight-text { margin-top: 4px; margin-bottom: 10px; }
.slogan { color: var(--accent-dark); font-weight: 700; }
.entry-qr-card {
  width: 172px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfdfc;
  text-align: center;
}
.entry-qr-title { font-size: .84rem; color: var(--muted); margin-bottom: 6px; }
.small-qr { display: inline-block; }
.entry-qr-url { margin-top: 6px; font-size: .68rem; color: var(--muted); word-break: break-all; }

.content-card { padding: 20px; }
.compact-card { padding: 18px; }
.centered-card { text-align: center; }
.welcome-block { margin-bottom: 12px; }
.welcome-block h2 { margin: 0 0 4px; font-size: 1.15rem; }
.welcome-block p { margin: 0; color: var(--muted); }

.stats-strip { margin: 10px 0 14px; }
.stats-card {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--soft-primary), #fff);
  border: 1px solid var(--line);
}
.stats-label { font-size: .88rem; color: var(--muted); }
.stats-value { font-size: 2rem; font-weight: 800; color: var(--primary-dark); line-height: 1.15; }
.stats-unit { margin-left: 4px; font-size: .95rem; color: var(--muted); }

.field-label,
.mini-label {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .9rem;
}
.mt-18 { margin-top: 14px; }
.account-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.account-input-wrap input { border: 0; padding: 6px 4px; outline: none; }
.fixed-domain { color: var(--muted); white-space: nowrap; font-size: .9rem; }
.input-hint { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }

.current-account-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fbfdfc;
  border: 1px solid var(--line);
}
.current-nickname-text { font-size: 1.25rem; font-weight: 800; }
.current-account-text { color: var(--muted); font-size: .92rem; }

.main-actions,
.action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.compact-row { justify-content: flex-start; }
.btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.btn-big { min-width: 190px; font-size: 1.02rem; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(23,116,95,.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 14px rgba(215,137,47,.24); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-secondary { background: #eef5f3; color: var(--primary-dark); border: 1px solid var(--line); }
.btn-feedback { background: var(--soft-accent); color: #613600; border: 1px solid #f0d1a6; width: 100%; }

.status-message {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 700;
}
.status-message.success { color: var(--success); }
.status-message.error { color: var(--danger); }
.status-message.warn { color: var(--warn); }
.hidden { display: none !important; }

.leaderboard-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.leaderboard-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.leaderboard-card-primary-light { background: #f1faf6; }
.leaderboard-card-accent-light { background: #fff8ed; }
.leaderboard-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.leaderboard-list { margin: 0; padding-left: 0; list-style: none; }
.leaderboard-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.rank-order { color: var(--muted); }
.rank-name { font-weight: 800; }
.rank-count { color: var(--primary-dark); font-weight: 800; }
.leaderboard-placeholder { color: var(--muted); }

.qr-profile-card {
  display: inline-block;
  min-width: 260px;
  margin: 8px auto 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--soft-primary);
  border: 1px solid var(--line);
}
.qr-nickname-display { font-size: 1.35rem; font-weight: 900; }
.qr-account-display { color: var(--muted); font-size: .92rem; }
.my-qr-box {
  width: fit-content;
  margin: 0 auto;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.live-notice-panel {
  margin: 14px auto 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7dc, #ffffff);
  border: 1px solid #ecd28b;
  text-align: left;
  max-width: 460px;
}
.live-notice-title { color: #8a5a00; font-size: .86rem; font-weight: 900; }
.live-notice-text { margin-top: 3px; color: var(--text); font-size: 1.04rem; font-weight: 800; }
.notice-pop { animation: noticePop .42s ease both; }
@keyframes noticePop {
  0% { transform: scale(.97); opacity: .55; }
  100% { transform: scale(1); opacity: 1; }
}

.scanner-box {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #0f1816;
  margin: 12px 0;
}
.scan-result-block {
  padding: 12px;
  border-radius: 18px;
  background: #fbfdfc;
  border: 1px solid var(--line);
}
.target-account-text { font-size: 1.2rem; font-weight: 900; }
.feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-query-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  align-items: end;
}
.records-card { margin-top: 16px; }
.records-summary { margin: 4px 0 10px; color: var(--muted); font-weight: 700; }
.records-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.records-table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; }
.records-table th, .records-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .9rem; }
.records-table th { background: var(--soft-primary); color: var(--primary-dark); }
.table-placeholder { text-align: center !important; color: var(--muted); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 18px, 1040px); margin-top: 10px; }
  .hero-card { grid-template-columns: 1fr; padding: 16px; }
  .entry-qr-card { width: 100%; }
  .content-card { padding: 16px; }
  .leaderboard-section,
  .admin-query-grid,
  .feedback-grid { grid-template-columns: 1fr; }
  .current-account-card { align-items: flex-start; flex-direction: column; }
  .btn-big { width: 100%; min-width: 0; }
  .account-input-wrap { flex-direction: column; align-items: stretch; gap: 4px; }
  .fixed-domain { padding-left: 4px; }
}


/* =========================================================
   P04 V2.8 Theme: 遊戲化教育風 80% + Apple 專業風 20%
   ========================================================= */
:root {
  --p04-blue: #2f80ed;
  --p04-sky: #56ccf2;
  --p04-yellow: #ffd166;
  --p04-orange: #ff8a3d;
  --p04-green: #2fbf71;
  --p04-ink: #1f2937;
  --p04-muted: #6b7280;
  --p04-card: rgba(255, 255, 255, 0.86);
  --p04-line: rgba(31, 41, 55, 0.10);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 209, 102, 0.34), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(86, 204, 242, 0.26), transparent 34%),
    linear-gradient(180deg, #f1f8ff 0%, #fff8ea 100%);
  color: var(--p04-ink);
}

.page-shell { max-width: 1080px; }

.hero-card, .content-card, .leaderboard-card, .current-account-card, .record-panel {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 18px 42px rgba(45, 64, 90, 0.13);
}

.hero-card {
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(238,248,255,0.82));
  border-top: 5px solid var(--p04-yellow);
}

.logo-badge {
  background: linear-gradient(135deg, #ffd166, #ff8a3d);
  box-shadow: 0 12px 24px rgba(255, 138, 61, 0.24);
}

.hero-title-zh { letter-spacing: 0.02em; }
.hero-title-en { color: var(--p04-blue); font-weight: 800; }
.slogan {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.22);
  color: #9a5b00;
  font-weight: 800;
}

.content-card {
  border-radius: 30px;
  background: rgba(255,255,255,0.88);
}

.stats-card {
  background: linear-gradient(135deg, #ffffff, #eef8ff);
  border: 2px solid rgba(47,128,237,0.14);
  border-radius: 24px;
}

.stats-value { color: var(--p04-orange); }

.btn {
  border-radius: 18px;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.btn:hover { transform: translateY(-2px); filter: saturate(1.05); }
.btn-primary { background: linear-gradient(135deg, var(--p04-blue), var(--p04-sky)); }
.btn-accent { background: linear-gradient(135deg, var(--p04-orange), #ffb84d); }
.btn-secondary { background: #f3f6fb; color: var(--p04-ink); }

.game-dashboard-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.leaderboard-card {
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
}

.leaderboard-card h3 {
  font-weight: 900;
  color: var(--p04-blue);
}

.leaderboard-list li {
  border-radius: 14px;
  margin-bottom: 8px;
  background: rgba(248,250,252,0.94);
  border: 1px solid var(--p04-line);
}

.rank-order {
  color: var(--p04-orange);
  font-weight: 950;
}

.my-records-section {
  margin-top: 22px;
  padding-top: 6px;
}

.my-records-header {
  text-align: center;
  margin: 10px auto 16px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47,128,237,0.10);
  color: var(--p04-blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.my-records-header h2 {
  margin: 8px 0 4px;
  font-size: 1.35rem;
  font-weight: 950;
  color: var(--p04-ink);
}

.my-records-header p {
  margin: 0;
  color: var(--p04-muted);
  font-size: 0.92rem;
}

.my-records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.record-panel {
  border-radius: 26px;
  padding: 16px;
  background: rgba(255,255,255,0.90);
  position: relative;
  overflow: hidden;
}

.record-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--p04-yellow), var(--p04-sky));
}

.record-panel-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.record-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,209,102,.55), rgba(86,204,242,.35));
  font-size: 1.45rem;
}

.record-panel h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 950;
  color: var(--p04-ink);
}

.record-panel p {
  margin: 3px 0 0;
  color: var(--p04-muted);
  font-size: 0.84rem;
}

.record-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  font-size: 0.88rem;
  border: 1px solid var(--p04-line);
}

.record-table th {
  background: #eef7ff;
  color: #1769c2;
  text-align: left;
  padding: 9px 8px;
  font-weight: 950;
}

.record-table td {
  padding: 10px 8px;
  border-top: 1px solid rgba(31,41,55,0.07);
  vertical-align: top;
}

.record-table tr:nth-child(even) td { background: rgba(255, 248, 232, 0.55); }

.record-pill {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(47,128,237,0.10);
  color: var(--p04-blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.record-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--p04-muted);
}

.record-pagination button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--p04-blue), var(--p04-sky));
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.record-pagination button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.record-empty, .record-error {
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  background: #f8fafc;
  color: var(--p04-muted);
  border: 1px dashed rgba(31,41,55,0.16);
}

.record-error {
  background: #fff1f2;
  color: #c62828;
}

@media (max-width: 760px) {
  .game-dashboard-section, .my-records-grid { grid-template-columns: 1fr; }
  .record-table { font-size: 0.82rem; }
  .record-table th, .record-table td { padding: 8px 6px; }
}