:root{
  --blue-1:#4A90FF;  --blue-2:#00E6FF;
  --pink-1:#FF4DE1;  --purple-1:#A84DFF;
  --red-1:#FF3B3B;   --red-2:#FF6A6A;
  --orange-1:#FFC107; --orange-2:#FF9800;
  --deep-base:#1B1033;
  --primary-700:#204CFF; --primary-800:#0D1A66;
}

/* 背景 */
.bg-base{
  background: linear-gradient(180deg, var(--blue-1), var(--deep-base) 120%);
  min-height: max(884px, 100dvh);
  font-family: 'Noto Sans TC', sans-serif;
}

/* 卡片 */
#card{ 
  margin: 0.5rem auto 1.5rem auto !important; 
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--pink-1), var(--purple-1), var(--blue-2));
  padding-top:0 !important;
  padding-left:.5rem !important;
  padding-right:.5rem !important;
  padding-bottom:0 !important;
  min-height:150px;
}
.hero h1{ font-size:3.75rem; font-weight:700; }

/* 內文 */
.card-inner{ padding:1rem!important; }
.card-inner p.text-center{ margin-top:.25rem !important; margin-bottom:.5rem !important; }

/* Info / QR 區 */
.info-card{ background:#EBD4FF; border-left:4px solid var(--purple-1); margin-top:.5rem!important; }
.qr-card{ background:#CCF3FF; border:2px solid var(--blue-2); margin-top:.75rem!important; }

/* 主按鈕 */
.main-btn{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  color:#fff; padding:.75rem; border-radius:.75rem;
  font-size:1.5rem; font-weight:700;
  transition:transform .15s ease, filter .3s ease, box-shadow .3s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  margin:0.5rem!important;
}
.main-btn .material-icons{ font-size:1.875rem; }
.main-btn:hover{ transform:translateY(-2px); filter:brightness(1.15); }
.main-btn:active{ transform:scale(.97); }

/* 大按鈕色系 */
.btn-blue{   background:linear-gradient(90deg,var(--blue-1),var(--blue-2)); }
.btn-pink{   background:linear-gradient(90deg,var(--pink-1),var(--purple-1)); }
.btn-red{    background:linear-gradient(90deg,var(--red-1),var(--red-2)); }
.btn-orange{ background:linear-gradient(90deg,var(--orange-1),var(--orange-2)); color:#222 !important; }
.btn-orange .material-icons{ color:#222 !important; }

/* 淡粉紅：支付訂金 */
.btn-deposit{
  background: linear-gradient(90deg, #FFD1DC, #ff95a5);
  color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.3);
}
.btn-deposit .material-icons{ color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.3); }
.btn-deposit:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-deposit-active{
  background: linear-gradient(90deg, #EC407A, #D81B60);
  color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.4);
}
.btn-deposit-active .material-icons{ color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.4); }

/* 下方四顆按鈕 */
.btn-grid{ margin-top:1rem!important; gap:1rem!important; }
.sub-btn{
  background:#E8F0FF; border:1px solid #809CFF; color:#2A1FA8;
  padding:0.75rem; border-radius:.75rem;
  font-size:1.25rem; font-weight:600;
  white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:background .2s ease, transform .15s ease;
}
.sub-btn .material-icons{ font-size:1.5rem; }
.sub-btn:hover{ background:#D0DBFF; transform:translateY(-1px); }
.sub-btn.cancel{ background:#FFF; color:#E54545; border-color:#FF9C9C; }
.sub-btn.cancel:hover{ background:#FFECEC; }

/* 文字色 */
.text-primary-700{ color:var(--primary-700); }
.text-primary-800{ color:var(--primary-800); }

/* 主按鈕精簡版 + 提高高度 */
.main-btn.compact{ font-size:1.25rem; padding:.625rem .75rem; gap:.5rem; margin:.25rem 0 !important; white-space:nowrap; }
.main-btn.compact .material-icons{ font-size:1.5rem; }
.btn-main-large{ padding:1.25rem !important; }

/* 支付訂金展開區（淡金） */
#depositSection{
  background:#FFF8E1; border:2px solid #FBC02D;
  border-radius:.75rem; padding:1rem; margin-top:.5rem !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.08);
}
.btn-gold-deep{ background:linear-gradient(90deg,#FFD54F,#FFB300); color:#222; }
.btn-gold-deep .material-icons{ color:#222; }
.btn-gold-light{ background:linear-gradient(90deg,#FFE082,#FFC107); color:#222; }
.btn-gold-light .material-icons{ color:#222; }
.btn-gold-deep:hover,.btn-gold-light:hover{ filter:brightness(1.08); transform:translateY(-2px); }

/* ====== 邀請卡卡片（橘色抬頭 + 紅色邊） ====== */
.invite-card{
  border:2px solid #ff5a5a; border-radius:.75rem; background:#fff; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.12); margin-top:.5rem!important;
}
.invite-card .invite-header{ background:#FFA726; color:#222; text-align:center; font-weight:800; padding:.6rem .75rem; letter-spacing:.04em; }
.invite-card .invite-tip{ color:#1E88E5; text-align:center; font-weight:700; padding:.5rem .75rem .25rem; }
.invite-card .invite-body{ padding:.75rem; }
.invite-input{ background:#fff; border:1px solid #E0E0E0; border-radius:.5rem; padding:.625rem .75rem; width:100%; font-size:1rem; }
.invite-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* 共同主辦人姓名：放在兩欄外面，佔滿整行 → 一列兩欄自動排 */
.cohost-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.5rem;
}
.cohost-grid > .invite-input{
  width:100%; justify-self:stretch;  /* 確保在 Grid 內拉滿 */
}

/* 邀請卡內兩顆按鈕 */
.btn-invite-add{ background:linear-gradient(90deg,#FFD54F,#FFB300); color:#222; border-radius:.5rem; padding:.75rem; font-weight:800; }
.btn-invite-submit{ background:linear-gradient(90deg,#FFA726,#FB8C00); color:#222; border-radius:.5rem; padding:.75rem; font-weight:800; }
.btn-invite-add:hover,.btn-invite-submit:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* 小字說明 */
.help-text{ font-size:.875rem; color:#666; }