/* Shared Crazy Mummy presentation. Auth, account and reward behavior stay in their existing clients. */
:root {
  color-scheme: light;
  --cm-cocoa: #241814; --cm-espresso: #17110f;
  --cm-saffron: #f5c542; --cm-dark-gold: #8b5a00;
  --cm-chili: #bf302c; --cm-cream: #fff8ee;
  --cm-white: #fff; --cm-border: #eaddcf;
  --cm-jade: #246b48; --cm-coral: #ffe2dc;
  --cm-muted: #66554c; --cm-radius: 18px;
  --cm-shadow: 0 8px 28px #2418140b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--cm-cream); color: var(--cm-cocoa); line-height: 1.55; }
button, input, select { font: inherit; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
p, code, .phone { overflow-wrap: anywhere; }
img, video, canvas { max-width: 100%; }
button, .btn, .actions a, #joinBtn, #send, #verify { min-height: 48px; border-radius: 12px; padding: 12px 18px; font-weight: 750; cursor: pointer; border: 1px solid transparent; }
button, .btn-primary, .actions a, #joinBtn, #send, #verify { background: var(--cm-saffron); color: var(--cm-cocoa); }
.btn-secondary, .logout, .password-toggle { background: var(--cm-white); color: var(--cm-cocoa); border-color: var(--cm-border); }
.btn-danger, .actions .red { background: var(--cm-chili); color: var(--cm-white); }
.btn-green { background: var(--cm-jade); color: var(--cm-white); }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--cm-dark-gold); outline-offset: 3px; }
input:focus, select:focus { outline: 2px solid var(--cm-dark-gold); outline-offset: 2px; border-color: var(--cm-dark-gold); }
input:not([type=checkbox]), select { width: 100%; min-height: 48px; max-width: 100%; font-size: 16px; padding: 12px 14px; background: var(--cm-white); color: var(--cm-cocoa); border: 1px solid var(--cm-border); border-radius: 12px; }
label { font-weight: 650; }
[hidden], .hidden { display: none !important; }
#langBtn { white-space: nowrap; flex-shrink: 0; min-width: 64px; min-height: 48px; line-height: 1.3; }
.muted, .stat-label { color: var(--cm-muted); }
.topbar { background: var(--cm-espresso); color: var(--cm-white); padding: 20px clamp(16px, 4vw, 32px); border-bottom: 4px solid var(--cm-saffron); }
.topbar-inner { flex-wrap: wrap; gap: 16px; }
.topbar-inner > div { min-width: 0; }
.topbar .brand { font-size: clamp(19px, 3vw, 25px); }
.topbar .subtitle { color: var(--cm-cream); opacity: 1; font-size: 14px; }
.header-actions { gap: 8px; flex-wrap: wrap; }
.container { padding: 24px clamp(14px, 3vw, 28px) 64px; }
.card { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); padding: clamp(18px, 3vw, 28px); margin-bottom: 20px; min-width: 0; }
#loginCard { max-width: 480px; margin: 32px auto; border-top: 5px solid var(--cm-saffron); }
#loginCard h1, #loginCard h2 { font-size: 28px; margin-bottom: 14px; }
#loginCard #loginBtn { width: 100%; margin-top: 16px; }
.password-toggle { display: block; margin: 6px 0 16px; font-size: 14px; }
#adminMfa { padding: 16px; margin-top: 20px; background: var(--cm-cream); border: 1px solid var(--cm-border); border-radius: 12px; }
#adminMfa code { display: block; word-break: break-all; }
.message, #loginMsg, #staffManageMessage { margin-top: 12px; }
.stats, .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat, .summary { min-width: 0; padding: 18px 14px; background: var(--cm-cream); border: 1px solid var(--cm-border); border-radius: 14px; }
.stat-value, .summary strong { color: var(--cm-cocoa); font-size: clamp(20px, 3vw, 30px); overflow-wrap: anywhere; }
.notice { background: var(--cm-cream); color: var(--cm-cocoa); border: 1px solid var(--cm-border); border-left: 4px solid var(--cm-saffron); border-radius: 12px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--cm-border); border-radius: 12px; }
table { border-collapse: collapse; }
th { background: var(--cm-cream); color: var(--cm-cocoa); }
th, td { border-bottom-color: var(--cm-border); }
#staffManagement td .btn { min-height: 44px; }
.search-row, .staff-form-grid { min-width: 0; }
.search-row > div, .staff-form-grid > div { min-width: 0; }
#scanQrBtn { width: 100%; font-size: 18px; }
#qrScanner { background: var(--cm-espresso); color: var(--cm-white); border-radius: var(--cm-radius); padding: 16px; }
#redeemStampBtn, #redeemPointsBtn { background: var(--cm-saffron); color: var(--cm-cocoa); border: 1px solid var(--cm-dark-gold); }
.stamps, .stars { color: var(--cm-dark-gold); letter-spacing: .035em; }
.hero { min-height: 760px; min-height: min(92svh, 900px); background-position: center; align-items: end; }
.shade { background: linear-gradient(90deg, #17110ff2 0%, #17110fd9 48%, #17110f88 100%); }
.heroText { max-width: 980px; padding: 56px 7%; }
.hero .brand { font-size: clamp(26px, 4vw, 36px); }
.hero .brand span { background: var(--cm-saffron); color: var(--cm-cocoa); border-radius: 8px; font-size: 12px; vertical-align: middle; }
.hero h1 { font-size: clamp(36px, 6vw, 72px); line-height: 1.08; margin: 18px 0; max-width: 760px; }
.hero p { font-size: clamp(16px, 2vw, 20px); max-width: 580px; }
.actions { gap: 12px; }
.actions a { text-decoration: none; display: inline-flex; align-items: center; }
main section, #eventMoments { padding: 64px 7%; }
main .container section { padding: revert; }
body.cm-staff main section, body.cm-admin main section { padding: clamp(18px, 3vw, 28px); }
main h2, #eventMoments h2 { font-size: clamp(28px, 4vw, 44px); }
.cm-staff main h2, .cm-admin main h2 { font-size: clamp(22px, 3vw, 28px); }
.cards { gap: 20px; }
.cards article { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden; }
.cards img { height: 280px; }
.cards h3 { margin: 22px; font-size: 22px; }
.rewards { background: var(--cm-espresso); color: var(--cm-white); gap: 32px; }
.wallet { background: var(--cm-white); color: var(--cm-cocoa); border: 1px solid var(--cm-border); border-radius: 20px; padding: clamp(20px, 4vw, 32px); min-width: 0; }
.wallet .stamps { font-size: clamp(28px, 5vw, 44px); white-space: nowrap; }
#customerQr { max-width: 100%; }
.event article { background: var(--cm-white); border: 1px solid var(--cm-border); border-left: 4px solid var(--cm-saffron); }
.story img { border-radius: 20px; }
dialog { max-height: 90svh; overflow-y: auto; color: var(--cm-cocoa); background: var(--cm-white); border: 1px solid var(--cm-border); border-radius: 20px; }
dialog::backdrop { background: #17110fb3; }
.modal { padding: 24px; }
.modal h2 { font-size: 28px; }
.modal .x { padding: 0; min-width: 48px; min-height: 48px; background: var(--cm-cream); }
.consent { display: flex; gap: 12px; align-items: start; line-height: 1.6; }
.consent input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; }
#authSessionControls { padding: 20px 7%; }
#authSessionControls button { margin: 4px; }
footer { background: var(--cm-espresso); color: var(--cm-cream); }
@media (max-width: 768px) {
  .hero { min-height: 720px; }
  .heroText { padding: 40px 6%; }
  .hero h1 { max-width: 520px; }
  .cards, .rewards, .story { grid-template-columns: 1fr; }
  main section, #eventMoments { padding: 44px 6%; }
  .stats, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .hero { min-height: 680px; background-position: 62% center; }
  .shade { background: linear-gradient(0deg, #17110ff5 0%, #17110fd9 65%, #17110f88 100%); }
  .heroText { width: 100%; padding: 32px 20px; }
  .hero h1 { font-size: 36px; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions a, .actions button { justify-content: center; text-align: center; width: 100%; }
  .search-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .search-row .btn { width: 100%; }
  .wallet .stamps { letter-spacing: 0; }
  .topbar .brand { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
.cm-admin #authSessionControls, .cm-staff #authSessionControls {
  width: calc(100% - 28px); max-width: 1044px; margin: 0 auto 40px;
  padding: 20px; background: var(--cm-white); border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius); box-shadow: var(--cm-shadow);
}
.cm-staff #authSessionControls { max-width: 822px; }
#authSessionControls input { margin: 8px 0; }
/* Form boundaries need non-text contrast; the pale token is for decorative panels. */
input:not([type=checkbox]), select { border-color: var(--cm-dark-gold) !important; }