/* Nạp SAU tokens.css, TRƯỚC campaign.css. Thứ tự này là load-bearing:
   campaign.css tham chiếu var(--…) do tokens.css khai. */

/* ── Reset viết tay thay Tailwind preflight ──────────────────────────────────
   Bản React dùng Tailwind CHỈ để lấy preflight (grep toàn src/: 0 utility class).
   Bỏ Tailwind thì phải tự viết lại phần reset mà campaign.css đang ăn theo —
   đặc biệt p/li margin:0, mà .doc ở màn Rules dựa vào. */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, li { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

html, body, #app { height: 100%; }
body {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--r-primary);
  color: var(--ink);
}

/* Khung app: khoá 393px như canvas thiết kế, rộng hơn thì căn giữa. */
.app-shell {
  max-width: 393px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bgApp);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────────────
   ⚠️ KHÔNG dùng lại khối blanket của bản React (app.scss:24):
       *, *::before, *::after { transition-duration: .01ms !important; }
   Nó GIẾT LUÔN transition 4s của vòng quay — đĩa nhảy tức thì rồi chết đứng chờ
   callback 1100ms. Prototype không làm vậy; nó rút riêng .w-spin.go xuống .9s để
   khớp callback (Prototype.html:383). Ở đây chỉ tắt animation trang trí, và để
   từng thành phần tự khai thời lượng rút gọn của nó. */
@media (prefers-reduced-motion: reduce) {
  .w-rim-lit, .wl.gold b, .btn.gold::after { animation: none !important; }
}

/* Màn hình đang tải runtime .NET — thay cho .loading-progress mặc định của template.
   Người dùng 4G hội trường sẽ nhìn màn này 3-20 giây, nên nó phải mang tông chiến dịch
   chứ không phải vòng xoay xám của Microsoft. */
.boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--r-primary); color: var(--cream); text-align: center; gap: 14px;
}
.boot p { font-size: 14px; opacity: .85; }
.boot .ring {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--gold);
  animation: bootspin 1s linear infinite;
}
@keyframes bootspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot .ring { animation-duration: 3s; } }

/* Dải lỗi của Blazor — template để tiếng Anh, đổi sang tông chiến dịch + tiếng Việt. */
#blazor-error-ui {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: none;
  background: var(--gold); color: var(--r-primary-dark);
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .3);
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; font-size: 18px; line-height: 1; }

/* Popup §8.5 — lớp phủ toàn màn, chỉ dùng cho thông báo "đã tham gia". */
.pop {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  padding: 24px; background: rgba(var(--ink-rgb), .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pop-card {
  width: 100%; max-width: 320px; background: var(--cream); border-radius: 18px;
  padding: 22px 20px 18px; text-align: center;
  border: 1px solid rgba(var(--gold-rgb), .5); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.pop-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }