/* MICAF Registration CSS */
:root {
  /* R176 「多巴胺微糖風」 retune (CEO 2026-07-03 verdict)
     對位 R175.1 紫單色 + 新海報 4 色 (lime + orange + magenta + purple)
     60% base 莫蘭迪鼠尾草綠 / 30% 主體 杏色+鵝黃+粉紅 / 10% accent 深紫
     降 saturation 但保持 4 色 brand identity 對位海報
     R175 saturated palette 保留 (對位 R144-R175 commit 引用 + 海報 full saturation fallback) */
  --micaf-soft-sage: #B8C9A3;      /* R176 莫蘭迪鼠尾草綠 base 60%, 對位海報綠但降 saturation */
  --micaf-soft-sage-light: #DCE5CC;/* R176 莫蘭迪鼠尾草綠淺 (background gradient) */
  --micaf-soft-sage-deep: #8FA876; /* R176 鼠尾草綠深 (header dominant) */
  --micaf-soft-apricot: #F0B89E;   /* R176 杏色 (取代 saturated orange, 對位海報橙但降 sat) */
  --micaf-soft-apricot-light: #F8DCC8;
  --micaf-soft-butter: #FFE4A0;    /* R176 鵝黃 (取代 saturated yellow, 對位海報黃但降 sat) */
  --micaf-soft-pink: #F5A8B8;      /* R176 粉紅 (取代 saturated magenta, 對位海報洋紅但降 sat) */
  --micaf-soft-pink-light: #FCDDE2;
  --micaf-soft-plum: #6B4E8C;      /* R176 深紫 accent 10% (對位海報深紫, 用作 outline + text anchor) */
  --micaf-soft-cream: #FFF8F0;     /* R176 奶油米 (中性過渡色) */

  /* R175 saturated palette 保留 (對位海報 full saturation + R144-R175 commit 引用) */
  /* R175: 對位 icm.gov.mo/micaf/3/cn 官方品牌 4 色 (lime + orange + purple + magenta) */
  /* R144 對位海報 (但 --pink-primary 變數名與 value 唔對位, R175 修正) */
  /* R175: rename 對位 micaf brand naming convention 統一 */
  --micaf-orange: #FF6B35;        /* R144 海報 orange, R175 取代 --pink-primary */
  --micaf-orange-light: #FFB39E;  /* R144 海報 orange-light, R175 取代 --pink-light */
  --micaf-orange-bg: #FFF0EB;     /* R144 暖淺橙背景, R175 取代 --pink-bg */
  --micaf-yellow: #FFD93D;
  --micaf-lime: #7CB342;          /* R145 對位海報 lime, R175 取代 --lavender */
  --micaf-lime-light: #C5E1A5;    /* R175 取代 --lavender-light */
  --micaf-sky: #7DD3FC;           /* 對位 mascot 藍 accent (R131 海報) */
  --micaf-cream: #FFF8F0;          /* 對位海報米 */
  --micaf-purple: #7B2CBF;        /* 對位海報深紫, R175 unified 變數名 */
  --micaf-magenta: #FF006E;       /* 對位海報洋紅 */
  --text-primary: #2D2A4A;        /* R131 海報深紫文字 */
  --text-secondary: #6B7280;
  --input-border: #E5E7EB;
  --success-green: #86EFAC;       /* R175 統一 micaf-success naming, 暫保留舊名對位引用 */
  /* R176: 漸層 alias 改為多巴胺微糖配色 — soft-sage base + soft-pink accent */
  --submit-from: var(--micaf-soft-apricot);
  --submit-to: var(--micaf-soft-pink);

  /* R176 多巴胺微糖風: legacy alias 全部指向 soft palette
     R175 legacy alias 指向 saturated --micaf-orange (R144) → R176 改為 deep plum soft + apricot
     對位 CEO verdict: 60% sage base + 30% apricot/butter/pink + 10% deep plum accent
     sweep 22 個 --pink-primary reference 自動繼承 soft 配色 (counter, activity-card, terms, session-card, btn-cta, status-pill 等) */
  --pink-primary: var(--micaf-soft-plum);
  --pink-light: var(--micaf-soft-pink-light);
  --pink-bg: var(--micaf-soft-pink-light);
  --lavender: var(--micaf-soft-sage);
  /* R131: MICAF 海報色 (lime green base + orange/purple accent, 對位官方 30.06-30.08.2026 海報) */
  --micaf-lime: #7CB342;
  --micaf-lime-light: #C5E1A5;
  --micaf-orange: #FF6B35;
  --micaf-purple: #7B2CBF;
  --micaf-magenta: #FF006E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  /* R176 多巴胺微糖風: 60% 莫蘭迪鼠尾草綠 base, 加 cream 中性過渡
     R134 lime 漸層 base 對位海報綠底 → R176 降 saturation 用鼠尾草綠
     對位 CEO verdict: 降低飽和度, 莫蘭迪鼠尾草綠 / 奶油綠 */
  background: linear-gradient(135deg, #DCE5CC 0%, #E8EDD8 30%, #FFF8F0 70%, var(--micaf-soft-cream) 100%);
  min-height: 100vh;
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
  /* R176 多巴胺微糖風: 鼠尾草綠深 + 杏色 accent (取代 R175.1 紫單色)
     R175.1 紫單色降視覺衝擊 → R176 配合新海報 4 色 brand 改用 60% sage base + 30% apricot accent
     對位 CEO verdict: 60% 莫蘭迪鼠尾草綠 / 30% 主體 / 10% 深紫 accent
     海報 4 色 brand identity 保留 (lime + orange + purple + magenta 變 soft version) */
  background: linear-gradient(135deg, var(--micaf-soft-sage-deep) 0%, #7A8E64 60%, var(--micaf-soft-apricot) 100%);
  padding: 20px 16px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  color: #fff;
}
.header h1 { font-size: 1.75rem; margin: 8px 0 4px; }
.subtitle-en { font-size: 0.95rem; opacity: 0.95; }
.tagline { font-size: 0.875rem; opacity: 0.85; margin-top: 4px; }
.mascot-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.mascot { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.mascot.left { background: linear-gradient(135deg, #E0E7FF, #C7D2FE); }
.mascot.right { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.micaf-badge { display: inline-block; background: var(--yellow); color: var(--text-primary); font-weight: 800; font-size: 16px; padding: 8px 24px; border-radius: 24px; box-shadow: 0 4px 12px rgba(255,217,61,0.4); }

/* Logo (CEO Round 34: 加 logo.png mascot) */
.logo-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
/* R88: 移除 background:#fff — public form header 係粉色, PNG 透明底直接 render 公仔.
   Admin dark theme 嘅 white background 由 admin.css .admin-logo-img 保留 (R78.1). */
.micaf-logo {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.4));
  animation: logo-float 4s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Title structure (CEO Round 34: 雙語標題 + 報名 form sub) */
.micaf-title-zh { font-size: 1.625rem; font-weight: 800; letter-spacing: 0.04em; margin: 4px 0 2px; }
.micaf-title-en { font-size: 0.95rem; opacity: 0.95; font-weight: 600; margin-bottom: 6px; }
.micaf-form-sub { font-size: 1rem; font-weight: 600; margin-top: 8px; padding: 6px 14px; background: rgba(255, 255, 255, 0.18); border-radius: 18px; display: inline-block; }
.micaf-form-sub-en { font-size: 0.8125rem; opacity: 0.92; margin-top: 6px; font-style: italic; }

.container { max-width: 720px; margin: 0 auto; padding: 8px; }
.site-footer { text-align: center; padding: 0px 20px 20px; color: var(--text-secondary); font-size: 0.875rem; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.6) 100%); border-radius: 16px 16px 0 0; margin-top: 0; }
.footer-enquiry { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.footer-enquiry .en { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-left: 6px; }
.footer-phone { font-size: 0.9375rem; font-weight: 700; color: var(--pink-primary); margin-bottom: 6px; }
.footer-hours { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-left: 6px; }
.footer-copy { font-size: 0.75rem; color: var(--text-secondary); margin-top: 10px; opacity: 0.8; }

/* Activity cards */
.activity-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.activity-card {
  background: #fff; border-radius: 16px; padding: 4px;  /* R126: 收窄 20px → 4px */
  text-align: center;
  border: 2px solid transparent; transition: all 0.2s; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  position: relative; overflow: hidden;
}
/* Hover lift + click ripple */
.activity-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 77, 141, 0.08), rgba(167, 139, 250, 0.08));
  opacity: 0; transition: opacity 0.3s ease;
  border-radius: 16px; pointer-events: none;
}
.activity-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(255,77,141,0.25); }
.activity-card:focus-visible { outline: 3px solid var(--pink-primary); outline-offset: 4px; }
.activity-card.selected {
  border-color: var(--pink-primary);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 77, 141, 0.3);
  animation: cardBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.activity-card.selected::after {
  content: "✓"; position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: var(--pink-primary); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 8px rgba(255, 77, 141, 0.4);
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1.02); }
}
@keyframes popIn {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.activity-card .icon { font-size: 48px; }
.activity-card .title { font-weight: 700; font-size: 1.125rem; margin-top: 8px; }
.activity-card .sub { font-size: 0.875rem; color: var(--text-secondary); margin-top: 4px; transition: color 0.2s ease; }
.activity-card:hover .sub { color: var(--lavender); }
.activity-card.selected .sub { color: var(--pink-primary); font-weight: 600; }
.activity-card .pill { display: inline-block; margin-top: 8px; padding: 4px 12px; background: var(--pink-bg); color: var(--pink-primary); border-radius: 12px; font-size: 0.75rem; font-weight: 600; }

.event-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.event-card { background: #fff; border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; display: flex; gap: 16px; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.event-card-image { width: 80px; height: 80px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.event-card-emoji { font-size: 40px; }
.event-card-body { flex: 1; }
.event-card h3 { margin: 0 0 4px; font-size: 1.125rem; }
.btn-cta { display: inline-block; margin-top: 8px; padding: 6px 12px; background: var(--pink-primary); color: #fff; border-radius: 6px; font-weight: bold; font-size: 0.875rem; }


.form-section { background: rgba(255,255,255,0.9); border-radius: 16px; padding: 16px 16px 16px; margin-bottom: 16px; }
.form-section-header { text-align: center; margin-bottom: 10px; }
.form-section-header h2 { color: var(--micaf-soft-plum); font-size: 1.5rem; }  /* R176 多巴胺微糖: 深紫 accent 取代 R175 saturated orange (pink-primary alias) */
.form-section-header .en { color: var(--text-secondary); font-size: 0.875rem; margin-top: 4px; }
.underline { height: 3px; width: 60px; background: linear-gradient(90deg, var(--micaf-soft-sage), var(--micaf-soft-butter), var(--micaf-soft-plum)); margin: 12px auto 0; border-radius: 2px; }  /* R176 多巴胺微糖: sage→butter→plum 60/30/10, 對位 R175 三色但降 sat (本檔 2 處 .underline 同步 R176) */

.step { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--input-border); }
.step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--micaf-soft-sage), var(--micaf-soft-apricot)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }  /* R176 多巴胺微糖: sage→apricot 60/30 取代 R175 lime→orange saturated */
.step-label { font-weight: 600; }
.step-label .en { font-size: 0.875rem; color: var(--text-secondary); font-weight: normal; margin-left: 4px; }
.required { color: var(--micaf-soft-plum); margin-left: 4px; }  /* R176 多巴胺微糖: 深紫 accent 取代 pink-primary (saturated orange) */

.step-body input[type="text"], .step-body input[type="email"], .step-body input[type="tel"],
.step-body input[type="number"], .step-body select {
  width: 100%; padding: 12px; font-size: 1.125rem; border: 1.5px solid var(--input-border);
  border-radius: 8px; background: #fff; color: var(--text-primary);
}
.step-body input:focus, .step-body select:focus { border-color: var(--pink-primary); outline: none; }
.field-hidden { display: none; }

/* ===== R107.6: per-event 條款 display (對位 Recall R66-R69 form 統一風格 + Recall R68 input-xl elderly-friendly) ===== */
.event-terms-box {
  margin-top: 5px;  /* R125: 收窄 12px → 5px */
  padding: 5px;  /* R125: 收窄 12/14/10 → 5/5/5 全方位 */
  background: #fff8f3;
  border-left: 3px solid #ea580c;
  border-radius: 6px;
  max-width: 640px;
}
.event-terms-label {
  font-weight: 600;
  font-size: 0.9375rem;  /* R123: 標題收細 1rem → 0.9375rem (15px) */
  color: #c2410c;
  margin-bottom: 8px;
}
.event-terms-text {
  font-size: 0.9375rem;  /* R123: 內文收細 1.0625rem → 0.9375rem (15px) */
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 10px;
  white-space: pre-line;
}
.event-terms-en {
  font-size: 0.8125rem;  /* R123: en 收細 0.875rem → 0.8125rem (13px) */
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
}
/* R121: 中文一項一項處理 — numbered list 對位海報編號 */
.event-terms-list {
  margin: 0;
  padding-left: 1.5em;
  list-style: decimal;
  font-size: 0.9375rem;  /* R122: 中文收細 15px desktop (R68 16px mobile base -1) */
  line-height: 1.65;
  color: var(--text-primary);
}
.event-terms-list li {
  margin-bottom: 6px;
  padding-left: 4px;
}
.event-terms-list li:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .event-terms-box { max-width: 100%; padding: 5px; }  /* R125: mobile padding 對位 5px */
  .event-terms-text { font-size: 0.875rem; }
}

/* Phone row: 區號 select + 電話 input 兩欄 */
.phone-row {
  display: grid;
  /* R89: 150→180 — CEO 報告 select option 嘅語音文字顯示唔到 (area code + label),
     對位 R36 elderly-friendly screen reader 完整 announcement. */
  grid-template-columns: 180px 1fr;
  gap: 8px;
  max-width: 100%;
}
.phone-row select {
  width: 100%;
  font-size: 1rem;
  /* 對位 Recall mobile-ux-elderly §2: 加大 padding-right 防止下箭咀遮文字 */
  padding: 12px 14px;
  padding-right: 48px !important;
}
.phone-row input {
  width: 100%;
  font-size: 1rem;
  padding: 12px 14px;
}

.counter { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px; }
.counter button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pink-primary); background: #fff; color: var(--pink-primary); font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.counter button:hover { background: var(--pink-bg); transform: scale(1.05); }
.counter button:active { transform: scale(0.95); }
.counter button:focus-visible { outline: 3px solid var(--pink-primary); outline-offset: 3px; }
.counter button:disabled { opacity: 0.4; cursor: not-allowed; }
.counter .count { font-size: 2rem; font-weight: 700; color: var(--pink-primary); min-width: 40px; text-align: center; }

.terms { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--pink-bg); border-radius: 8px; margin-bottom: 12px; }
.terms input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--pink-primary); }
.terms-content { flex: 1; font-size: 0.875rem; }
.terms-content label { font-weight: 600; color: var(--pink-primary); display: block; margin-bottom: 4px; }
.terms-content .body { color: var(--text-secondary); line-height: 1.5; }
/* Recall §R74 R78.2: pdpa-body / pdpa-toggle 對位 (Recall §R27 0 inline width) */
.pdpa-body {
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.pdpa-body.expanded {
  max-height: 400px;
}
.pdpa-toggle {
  color: var(--pink-primary, #ec4899);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}
.pdpa-toggle-hide { display: none !important; }

.captcha-row { display: flex; gap: 8px; align-items: center; }
.captcha-img { padding: 12px 20px; background: var(--yellow); color: var(--text-primary); font-family: "SF Mono", monospace; font-weight: 700; font-size: 1.25rem; letter-spacing: 4px; border-radius: 8px; user-select: none; }
/* CAPTCHA refresh button */
#captcha-refresh {
  font-size: 1.125rem;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255, 217, 61, 0.2);
  border: 1.5px solid var(--yellow);
  cursor: pointer;
  transition: all 0.2s ease;
}
#captcha-refresh:hover:not(:disabled) {
  background: var(--yellow);
  transform: rotate(180deg);
}
#captcha-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-btn {
  display: block; width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--submit-from), var(--submit-to));
  color: #fff; border: none; border-radius: 12px;
  font-size: 1.25rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(236,72,153,0.3);
  position: relative; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Shimmer sweep + hover glow */
.submit-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.submit-btn:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 24px rgba(236,72,153,0.5); }
.submit-btn:hover::before { transform: translateX(100%); }
.submit-btn:active { transform: translateY(-1px) scale(0.99); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; animation: btnPulse 1.5s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(236,72,153,0.3); }
  50% { box-shadow: 0 4px 24px rgba(236,72,153,0.6); }
}

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert-error { background: #FEE; color: #C33; border: 1px solid #FCC; }

/* Captcha inline error — R100 minimalist, only fail state visible.
   唔再有 counter / success pill. R91 lesson: 過度 hint 為噪音. */
.captcha-error {
  display: block;
  color: #C33;
  background: #FEE;
  border-left: 3px solid #E91E63;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  animation: captchaErrorShake 0.4s ease-out;
}
/* a11y: aria-hidden=true 用 visibility:hidden collapse layout 但 DOM 仍在, screen reader skip.
   唔用 [hidden] 因為 browser 唔會 listen aria-live 喺 hidden element. */
.captcha-error[aria-hidden="true"] {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: none;
}
.captcha-input-invalid {
  border-color: #E91E63 !important;
  box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
}
@keyframes captchaErrorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.success { text-align: center; padding: 60px 20px; }
.success-icon { font-size: 80px; margin-bottom: 16px; }
.sid-display { display: inline-block; margin: 4px 0 12px; padding: 16px 32px; background: var(--micaf-lime); border: 3px solid var(--micaf-orange); border-radius: 12px; font-size: 2.25rem; font-family: "SF Mono", "Consolas", monospace; font-weight: 800; color: #1a1a1a; letter-spacing: 1px; box-shadow: 0 4px 12px rgba(124, 179, 66, 0.4); }  /* R141: 改黑底白字 → lime 鮮綠 + 鮮橙邊框 + 黑字, 對位 R131 海報夏日色 + R78 工作人員 readability (CEO verdict 2026-07-02「但不要黑底白字, 客戶會投訴」) */

/* R140: 結構性重整 — 統一 .detail-card pattern (sms_confirm + event_info 共用), .detail-row stacked 罝中 */
.detail-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  text-align: center;
  border-left: 4px solid #86EFAC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.detail-card.success { border-left-color: #22c55e; background: #f7fef9; }
.detail-card.warning { border-left-color: #f59e0b; background: #fffbeb; }
.detail-card.info { border-left-color: #7CB342; background: #f8fdf3; }

.detail-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.detail-card-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.detail-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}
.detail-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}
.detail-label {
  font-size: 0.95rem;
  color: #6B7280;
  font-weight: 500;
}
.detail-value {
  font-size: 1.2rem;
  color: #1a1a1a;
  font-weight: 700;
}
.detail-card-hint {
  font-size: 0.9rem;
  color: #4B5563;
  margin: 4px 0 0;
  line-height: 1.5;
}

.data-table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 12px; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--input-border); text-align: left; }
.data-table th { background: #f9f9f9; font-weight: 700; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.filter-form { background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 12px; }

.btn-secondary { display: inline-block; padding: 8px 16px; background: var(--text-secondary); color: #fff; border-radius: 6px; text-decoration: none; }

.en { color: var(--text-secondary); font-size: 0.95em; }
.hint { color: var(--text-secondary); font-size: 0.875rem; margin: 4px 0 0; }

/* Session grid (CEO Q-A multi-pick sessions) */
.session-grid { display: flex; flex-direction: column; gap: 16px; }
.session-event-group { background: #fff; padding: 12px; border-radius: 8px; }
.session-event-group h4 { font-size: 1rem; color: var(--pink-primary); margin: 0 0 8px; }
.session-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.session-card {
  display: flex; flex-direction: column; align-items: stretch; padding: 10px 8px 8px;
  background: var(--pink-bg); border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; transition: all 0.15s; position: relative;
  user-select: none;
  min-height: 92px; justify-content: space-between;
}
.session-card:hover { background: #FFE4EC; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 77, 141, 0.15); }
.session-card:focus-visible { outline: 3px solid var(--pink-primary); outline-offset: 2px; }
/* Recall §R74 R36 elderly-friendly: 撤走顯眼 checkbox, click card 直接 toggle + tick icon 對位 activity-card.selected */
.session-card.selected {
  background: var(--pink-primary); color: #fff; border-color: var(--pink-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 77, 141, 0.4);
}
.session-card.selected::after {
  content: "✓"; position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: #fff; color: var(--pink-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  animation: cardTick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardTick {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* R81 P3 #10: deselect reverse animation — 由 selected 變 deselected 時反向收縮 */
.session-card.card-deselect::after {
  animation: cardTickReverse 0.2s ease-in forwards;
}
@keyframes cardTickReverse {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}
.session-card.selected .session-date,
.session-card.selected .session-time { color: #fff; }
.session-card.selected .session-weekday { color: rgba(255, 255, 255, 0.85); }
.session-card.selected .capacity-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
/* Recall §R74 R36 elderly-friendly: locked 狀態 greyed-out + 唔可以 click */
.session-card.session-card-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.session-card.session-card-locked:hover { transform: none; box-shadow: none; background: var(--pink-bg); }
/* Recall §R74 R78.3: reached-limit lock 與 event-mismatch lock 分離 — 同樣 greyed-out 但獨立管理 */
.session-card.session-card-limit-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.session-card.session-card-limit-locked:hover { transform: none; box-shadow: none; background: var(--pink-bg); }
.session-card.session-card-full {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
}
.session-card.session-card-full:hover { transform: none; box-shadow: none; background: #f3f4f6; }
.session-date { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.session-weekday { font-size: 0.75rem; font-weight: 400; opacity: 0.65; margin-left: 2px; }
.session-footer { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; }
/* R-N+3 fix: session-time 內含 hyphen (16:15-16:45) + card column 細到 130px → 預設瀏覽器 wrap 喺 hyphen 後, 切成兩行 (`16:15-` / `6:45`)。
   強制 white-space: nowrap 保持 time_slot 完整一組字串 + tabular-nums 等寬數字避免字寬浮動 */
.session-time { font-size: 0.75rem; opacity: 0.85; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Capacity badge (P0 #8 公開 form 顯示 session 額滿) */
.capacity-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-open { background: rgba(134, 239, 172, 0.3); color: #060; }
.badge-nearly { background: rgba(255, 217, 61, 0.4); color: #840; }
.badge-full { background: rgba(255, 77, 141, 0.2); color: #c33; }

.session-card-full {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5;
}
.session-card-full:hover { background: #f5f5f5; }
.session-card-full:has(input:checked) { background: #f5f5f5; color: #999; }

/* Session locked state (揀活動前灰階) */
.session-card-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(60%);
  background: #fafafa;
}
.session-card-locked:hover { background: #fafafa; transform: none; box-shadow: none; }
.session-card-locked .session-date,
.session-card-locked .session-time { color: #999; }

/* Mobile-friendly responsive layout (form-card 全寬 + 自訂 select arrow + 480px breakpoint) */
@media (max-width: 600px) {
  /* R92: 對位 desktop R89/R90 spacing 微調 — mobile 同樣緊湊化 */
  .container { padding: 8px; }
  .form-section { padding: 16px 16px 16px; margin-bottom: 16px; }
  .form-card { padding: 16px 14px; max-width: 100%; border-radius: 14px; }
  .form-section-header { margin-bottom: 10px; }
  .form-section-header h2 { font-size: 1.25rem; }
  .form-section-header .en { font-size: 0.75rem; }
  .site-footer { padding: 0px 20px 20px; }
  .activity-cards { margin-bottom: 16px; }

  /* Header 縮細 */
  .header { padding: 20px 16px 8px; border-radius: 0 0 24px 24px; }
  .header h1 { font-size: 1.25rem; }
  .mascot { width: 48px; height: 48px; font-size: 24px; }
  .mascot-row { gap: 10px; margin-bottom: 10px; }
  .micaf-badge { font-size: 13px; padding: 5px 16px; }
  .subtitle-en { font-size: 0.75rem; }
  .tagline { font-size: 0.75rem; padding: 4px 12px; }
  .micaf-logo { width: 72px; height: 72px; }
  .micaf-title-zh { font-size: 1.25rem; }
  .micaf-title-en { font-size: 0.8125rem; }
  .micaf-form-sub { font-size: 0.875rem; padding: 5px 12px; }
  .micaf-form-sub-en { font-size: 0.75rem; }
  .footer-phone { font-size: 0.875rem; }
  .footer-enquiry { font-size: 0.8125rem; }

  /* Step 排版: 移除 padding-left 偏位, step-num inline */
  .step { margin-bottom: 16px; }
  .step-header { gap: 8px; margin-bottom: 8px; padding-bottom: 6px; }
  .step-num { width: 24px; height: 24px; font-size: 0.75rem; }
  .step-label { font-size: 0.9375rem; }
  .step-label .en { font-size: 0.75rem; }
  .step-body { padding-left: 0 !important; }

  /* Input / Select 全寬 */
  .step-body input[type="text"],
  .step-body input[type="tel"],
  .step-body input[type="email"],
  .step-body input[type="number"],
  .step-body select,
  .step-body textarea {
    width: 100% !important;
    font-size: 0.9375rem !important;  /* 15px on mobile */
    padding: 10px 12px !important;
  }

  /* Phone row: 直排 mobile */
  .phone-row { display: flex; flex-direction: column; gap: 8px; }
  .phone-row select,
  .phone-row input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; }

  /* Activity cards: 1 column, padding 縮 */
  .activity-cards { grid-template-columns: 1fr; gap: 10px; }
  .activity-card { padding: 4px; }  /* R126: mobile 對位 desktop 4px */
  .activity-card .icon { font-size: 36px; }
  .activity-card .title { font-size: 1rem; }
  .activity-card .sub { font-size: 0.8125rem; }

  /* Session grid: 2 column */
  .session-grid { gap: 12px; }
  .session-event-group { padding: 10px; }
  .session-event-group h4 { font-size: 0.875rem; margin-bottom: 6px; }
  .session-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .session-card { padding: 6px 4px; }
  .session-date { font-size: 0.8125rem; }
  .session-time { font-size: 0.6875rem; }

  /* Counter 細啲 */
  .counter { gap: 12px; padding: 6px; }
  .counter button { width: 36px; height: 36px; font-size: 1.25rem; }
  .counter .count { font-size: 1.5rem; min-width: 32px; }

  /* Age rows 1 column */
  .age-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px; padding: 8px; }
  .age-row select { width: 100% !important; }

  /* Captcha row 1 column */
  .captcha-row { display: flex !important; flex-direction: row !important; gap: 6px !important; }
  .captcha-row input { flex: 1; min-width: 0; }
  .captcha-img { padding: 8px 12px; font-size: 1rem; letter-spacing: 2px; }
  #captcha-refresh { padding: 8px 10px; font-size: 1rem; }

  /* Terms */
  .terms { padding: 10px; gap: 8px; }
  .terms-content { font-size: 0.875rem; }
  .terms-content .body { font-size: 0.8125rem; }

  /* Submit button */
  .submit-btn { padding: 14px 20px; font-size: 1.0625rem; border-radius: 14px; }

  /* Hint 文字 */
  .hint { font-size: 0.8125rem; }

  /* 防 horizontal scroll */
  body { overflow-x: hidden; }
  * { max-width: 100%; }
}

/* v1.0 UI/UX polish (12 element refinement) */
/* Form styles */

/* Element 1+2+4: Stat icon + 簡約 white card + 大字 */
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; }
.stat-icon-primary { background: rgba(255, 77, 141, 0.12); color: var(--pink-primary); }
.stat-icon-success { background: rgba(134, 239, 172, 0.25); color: #0a7e3e; }
.stat-icon-info { background: rgba(167, 139, 250, 0.18); color: #6c4dde; }
.stat-icon-warning { background: rgba(255, 217, 61, 0.35); color: #946a00; }
.stat-card { background: #fff; padding: 16px 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.04); }
.stat-value { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--pink-primary); }
.stat-value-success { color: #0a7e3e; }
.stat-value-info { color: #6c4dde; }
.stat-value-muted { color: var(--text-secondary); font-weight: 600; font-size: 1.5rem; }
.stat-label { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 6px; }

/* Element 3: Capacity bar 漸層 color-coded */
.capacity-bar-container { width: 100%; max-width: 220px; height: 8px; background: rgba(0, 0, 0, 0.06); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.capacity-bar-fill { height: 100%; background: linear-gradient(90deg, #86EFAC 0%, #4ADE80 100%); border-radius: 4px; transition: width 0.3s ease; }
.capacity-bar-fill-nearly { background: linear-gradient(90deg, #FFD93D 0%, #F59E0B 100%); }
.capacity-bar-fill-full { background: linear-gradient(90deg, #FF4D8D 0%, #C026D3 100%); }

/* Element 5+7: Toolbar grouped + Data card wrapper */
.toolbar-grouped { background: #fff; padding: 16px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.data-card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 16px; }

/* Element 8+9: Table header uppercase + row padding */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.data-table th { background: rgba(45, 42, 74, 0.04); padding: 14px 16px; text-align: left; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-primary); border-bottom: 2px solid rgba(0, 0, 0, 0.08); }
.data-table td { padding: 14px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); font-size: 0.9375rem; vertical-align: middle; }
.data-table tr:hover td { background: rgba(184, 201, 163, 0.06); }  /* R176 多巴胺微糖: sage soft hover 取代 pink saturated hover */
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Element 10: Action button outline + icon-only */
.btn-action { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--micaf-soft-plum); background: transparent; color: var(--micaf-soft-plum); font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.15s ease; margin-right: 4px; }  /* R176 多巴胺微糖: 深紫 accent 取代 pink-primary saturated */
.btn-action:hover { background: var(--micaf-soft-plum); color: #fff; }
.btn-action-danger { border-color: #C026D3; color: #C026D3; }
.btn-action-danger:hover { background: #C026D3; color: #fff; }
.btn-action-success { border-color: #0a7e3e; color: #0a7e3e; }
.btn-action-success:hover { background: #0a7e3e; color: #fff; }

/* Element 11: Status badge pill style */
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.status-pill-upcoming { background: rgba(167, 139, 250, 0.15); color: #6c4dde; }
.status-pill-success { background: rgba(16, 185, 129, 0.18); color: #047857; }
.status-pill-muted    { background: rgba(148, 163, 184, 0.18); color: #475569; }
.status-pill-info     { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; }
.status-pill-open { background: rgba(134, 239, 172, 0.25); color: #0a7e3e; }
.status-pill-closed { background: rgba(255, 77, 141, 0.12); color: var(--pink-primary); }
.status-pill-inactive { background: rgba(0, 0, 0, 0.06); color: #888; }

/* Element 6: Filter chip */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); color: var(--text-primary); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; user-select: none; }
.filter-chip:hover { background: rgba(167, 139, 250, 0.12); }
.filter-chip.active { background: var(--pink-primary); color: #fff; border-color: var(--pink-primary); }
.filter-chip .chip-count { display: inline-block; min-width: 20px; padding: 0 6px; background: rgba(255, 255, 255, 0.3); border-radius: 10px; text-align: center; font-size: 0.75rem; font-weight: 700; }
.filter-chip.active .chip-count { background: rgba(255, 255, 255, 0.25); }

/* Form section heading */
.form-section-header { text-align: center; margin-bottom: 10px; }
.form-section-header h2 { color: var(--micaf-soft-plum); font-size: 1.5rem; margin-bottom: 4px; }  /* R176 多巴胺微糖: 深紫 accent 取代 pink-primary (第 2 處, admin form section header 統一) */
.form-section-header .en { color: var(--text-secondary); font-size: 0.875rem; }
.form-section-header .underline { height: 3px; width: 60px; background: linear-gradient(90deg, var(--micaf-soft-sage), var(--micaf-soft-butter), var(--micaf-soft-plum)); margin: 12px auto 0; border-radius: 2px; }  /* R176 多巴胺微糖: sage→butter→plum 60/30/10, 對位 R175 三色但降 sat (本檔 2 處 .underline 同步 R176) */

/* Step heading */
.step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(0, 0, 0, 0.08); }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.875rem; flex-shrink: 0; box-shadow: 0 2px 6px rgba(255, 217, 61, 0.5); }
.step-label { font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); flex: 1; }
.step-label .en { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500; margin-left: 6px; }
.required { color: var(--pink-primary); margin-left: 4px; font-weight: 700; }
.step-body { padding-left: 0; }

/* Hide input radio native button */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Form card */
.form-card {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Alert */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.alert-error { background: #FEE; color: #C33; border: 1px solid #FCC; }
.alert-success { background: #dfd; color: #060; border: 1px solid #cfc; }

/* ===== R176 多巴胺微糖風 success-hero: sage→cream 取代 R140 lime saturated ===== */
.success-hero {
  background: linear-gradient(135deg, #DCE5CC 0%, #E8EDD8 50%, var(--micaf-soft-cream) 100%);  /* R176: 多巴胺微糖 sage→cream 漸層, 對位 R140 lime 但降 sat */
  padding: 18px 14px 14px; border-radius: 16px;
  text-align: center; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(143, 168, 118, 0.2);  /* R176: 鼠尾草綠陰影取代 lime 鮮綠陰影 */
}

.success-banner {  /* R140: 慶祝區 wrapper, 🎉 + 報名成功 inline 對位 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}

/* R85 mobile-first: 對位 mobile-ux-elderly R36, 大字 + 大 tap target + 緊湊 padding */
.success-emoji {
  font-size: 80px;  /* R142: 48px → 80px 加大, 對位 R74 64px (CEO 截圖時睇唔到 48px) */
  line-height: 1;
  display: block;
  text-align: center;
  margin: 0;
  animation: bounce-in 0.4s ease-out;
  /* R142: 文字 emoji 對 html2canvas 唔穩定, 加 fallback (color emoji 強制 inline) */
  font-variant-emoji: emoji;
  text-rendering: optimizeLegibility;
}
@keyframes bounce-in {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
.success-title {
  font-size: 1.875rem; font-weight: 800; color: #1a1a1a;  /* R140: 改 #2D2A4A → #1a1a1a 高對位 */
  margin: 0;
}

/* R142: 慶祝區加多色彩元素 (對位 R131 MICAF 海報夏日色彩繽紛) */
.success-decoration {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  font-size: 1.4rem;
  line-height: 1;
}
.success-decoration .deco-icon {
  display: inline-block;
  animation: float 2s ease-in-out infinite;
}
.success-decoration .deco-icon:nth-child(2) { animation-delay: 0.4s; }
.success-decoration .deco-icon:nth-child(3) { animation-delay: 0.8s; }
.success-decoration .deco-icon:nth-child(4) { animation-delay: 1.2s; }
.success-decoration .deco-icon:nth-child(5) { animation-delay: 1.6s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.success-list {
  line-height: 1.8; padding-left: 24px; color: var(--text-primary);
}

/* R85 mobile-first: qr-code-block 緊湊 mobile-friendly */
.qr-code-block {
  margin: 12px 0;
}

.qr-code-img {
  display: block;
  margin: 0 auto;
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.qr-code-caption {
  font-size: 0.85rem;
  color: #2D2A4A;
  margin: 8px 0;
  line-height: 1.4;
}

/* R87: 截圖按鈕下方 hint (對位 CEO verdict, hint 移到 btn 下方) */
.screenshot-hint {
  font-size: 0.78rem;
  color: #2D2A4A;
  opacity: 0.85;
  margin: 8px 0 0 0;
  text-align: center;
  line-height: 1.4;
}

/* R80: QR code actions (複製確認連結 + 下載 QR) */
.qr-code-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.qr-action-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(180deg, #E91E63 0%, #C2185B 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.qr-action-btn:hover {
  background: linear-gradient(180deg, #D81B60 0%, #AD1457 100%);
  transform: translateY(-1px);
}

.qr-action-btn-success {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

/* R81: 截圖 button 錯誤狀態 (紅色) */
.qr-action-btn-error {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

/* R132: success.html 截圖按鈕 (html2canvas capture .success-hero → PNG download) */
.hero-actions,
.hero-actions-external {  /* R136: 截圖按鈕移出 hero 之外 */
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.screenshot-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--micaf-lime), var(--micaf-lime-light));  /* R134: 全綠 gradient 對位 CEO 偏向綠色 */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(124, 179, 66, 0.4);
}
.screenshot-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 179, 66, 0.5);
}
.screenshot-btn:active:not(:disabled) {
  transform: translateY(0);
}
.screenshot-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.screenshot-btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.screenshot-btn-error {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* R82: 隱藏「複製確認連結」+「下載 QR 圖片」按鈕
   CEO verdict: 截圖保存 > 下載 QR 圖片, 隱藏後兩者, 有需要再開
   對位 "有需要再開" 精神: CSS 1 行即時隱藏 / 恢復, 唔需要 git commit
   對位 R78.7 cache bust: success.html 已 no-store, CSS 即時生效
   HTML element + JS handler 保留喺 source, .git history 永久
*/
.qr-btn-hidden {
  display: none !important;
}

/* R86: 隱藏「聯絡主辦方」按鈕
   CEO verdict: 對位 R82 pattern, 隱藏聯絡主辦方 btn, 有需要再開
   CSS 1 行即時隱藏 / 恢復, 唔需要 git commit
*/
.action-btn-hidden {
  display: none !important;
}

/* R80: QR fallback (圖片 load 失敗) */
.qr-fallback {
  filter: grayscale(100%);
  opacity: 0.6;
}

/* R83: 活動詳情融入 success-hero (對位 CEO verdict)
   從獨立 section.event-info-card 變 success-hero 內 sub-block
   對位 .success-hero 粉橙 gradient 嘅 design language
   截圖 button SVG-native 自動 capture event_info (因為喺 success-hero 入面)
*/
/* R85 mobile-first: 簡化 hero-brand, 移除 micaf-form-sub + micaf-form-sub-en */
.hero-brand {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-brand .micaf-logo {
  margin-bottom: 6px;
}

.hero-brand .micaf-title-zh {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #2D2A4A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-brand .micaf-title-en {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2D2A4A;
  opacity: 0.85;
  margin-bottom: 4px;
}
.hero-event-info,
.hero-event-title,
.hero-event-list,
.hero-event-list dt,
.hero-event-list dd,
.hero-event-list dt:first-child,
.hero-event-list dd:last-child {  /* R140: 舊 hero-event-* 規則已由 .detail-card 取代, 全部移除 */
  all: revert;
  display: none;
}

/* R80: QR fallback (圖片 load 失敗) */
.qr-fallback {
  filter: grayscale(100%);
  opacity: 0.6;
}

.action-card {
  background: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text-primary);
  font-weight: 500; transition: all 0.15s ease;
}
.action-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

/* ===== END v1.0 ===== */