/* Saving group — home (Figma page Group parity). Loaded after style.css; overrides sg-* rules there.
   Owner: claude-home. Prefix `sgh-`. Frames: 891:60955/60236/55195 (home), 891:59373 (missions list),
   891:57991 (mission detail), 288:16681 (forming home), 508:83560 (start), 508:89448/288:21943 (invite
   preview), 508:89450 (join success), 283:11082 (cannot join), 344:41171 (closed). */


:root {
  --sgh-pink: #ed008c;
  --sgh-pink-500: #ff4b9a;
  --sgh-pink-t300: #ffb3e6;
  --sgh-pink-200: #fcd2f2;
  --sgh-pink-100: #ffe7ee;
  --sgh-pink-50: #fff4f7;
  --sgh-pink-accent: #ff71c9;
  --sgh-mint: #02cfa0;
  --sgh-mint-50: #e5fff4;
  --sgh-mint-bright: #03f2bb;
  --sgh-n950: #11141b;
  --sgh-n900: #232934;
  --sgh-n800: #303747;
  --sgh-n700: #444e61;
  --sgh-n600: #566278;
  --sgh-n500: #737d91;
  --sgh-n400: #99a1af;
  --sgh-n300: #c9cdd4;
  --sgh-n200: #dfe1e6;
  --sgh-n100: #f0f1f3;
  --sgh-n50: #f8f8f9;
  --sgh-grad-pink: linear-gradient(140.46deg, #ff8aba 0%, #ff0088 50.96%, #d60075 100%);
  --sgh-grad-mint: linear-gradient(134.41deg, #42f2d9 0%, #03bbb1 53.85%, #049b9b 100%);
  --sgh-shadow-mint: 0 10px 11px rgba(3, 133, 133, 0.2), 0 3px 3px rgba(3, 133, 133, 0.2);
  --sgh-font: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- page shell ---------- */
.sgh-page {
  display: flex;
  justify-content: center;
  background: #ffffff;
  font-family: var(--sgh-font);
  font-weight: 400;
  color: var(--sgh-n950);
  overflow-wrap: break-word;
}

.sgh-page.is-pink {
  background: var(--sgh-pink-100);
}

.sgh-col {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  padding: 0 0 24px;
}

.sgh-col.has-cta {
  padding-bottom: 96px;
}

.sgh-col.is-inset {
  padding: 18px 16px 24px;
}

.sgh-page button {
  font-family: inherit;
}

/* ---------- hero header (point) ---------- */
.sgh-hero {
  position: relative;
  z-index: 1;
  height: 264px;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  background: radial-gradient(314px 261px at 50% 102px, #ff73b0 0%, #fea2d1 50%, #fcd2f2 100%);
  box-shadow: inset 2px -4px 12px rgba(239, 0, 141, 0.52), inset 0 0 18px 4px var(--sgh-pink-100);
}

.sgh-hero-rays {
  position: absolute;
  left: -97px;
  top: -115px;
  width: 342px;
  height: 343px;
  opacity: 0.2;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.sgh-hero-mascot {
  position: absolute;
  left: 4px;
  top: 0;
  width: 145px;
  height: 145px;
  object-fit: cover;
  pointer-events: none;
}

/* Figma 501:82146 — confetti windows on the 324px point frame, hero crops 60px from the top */
.sgh-hero-confetti {
  position: absolute;
  width: 60px;
  height: 74px;
  overflow: hidden;
  opacity: 0.7;
  pointer-events: none;
  transform: translateX(-50%);
}

.sgh-hero-confetti img {
  position: absolute;
  width: 439.69%;
  height: 229.73%;
  max-width: none;
}

.sgh-hero-confetti.is-a {
  left: calc(50% + 152px);
  top: 29px;
}

.sgh-hero-confetti.is-a img {
  left: -313.3%;
  top: -86.6%;
}

.sgh-hero-confetti.is-b {
  left: calc(50% - 42px);
  top: 46px;
}

.sgh-hero-confetti.is-b img {
  left: -176.04%;
  top: -120.39%;
}

.sgh-hero-text {
  position: absolute;
  left: 141px;
  top: 35px;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  color: #ffffff;
}

.sgh-hero-welcome {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(237, 0, 140, 0.5);
  white-space: nowrap;
}

.sgh-hero-name {
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  text-shadow: 0 0 6px #ed008c;
  white-space: nowrap;
}

.sgh-point-card {
  position: absolute;
  left: 50%;
  top: 117px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 100%;
  max-width: calc(100% - 28px);
  border-radius: 24px;
  background: var(--sgh-pink-50);
  box-shadow: inset 0 0 16px 2px var(--sgh-pink-200);
  padding: 21px 19px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sgh-point-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sgh-point-label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-pink);
}

.sgh-point-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  line-height: 32px;
  font-weight: 900;
  color: var(--sgh-pink);
}

.sgh-point-value img {
  width: 27px;
  height: 22px;
  object-fit: contain;
  object-position: bottom;
}

.sgh-progress {
  /* min-height ไม่ใช่ height ตายตัว — กลุ่มที่ตั้งเป้าหมายเป็นเลขยาว (เช่น 1,000,000)
     ทำให้ข้อความฝั่งขวาของ .sgh-goal-row ตกบรรทัด ถ้า height คงที่ flexbox จะบีบ
     .sgh-progress-track จนเหลือ 0px (หลอดสะสมคะแนนหายไปทั้งเส้น) */
  min-height: 39px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgh-progress-track {
  height: 10px;
  /* กันไม่ให้ flexbox บีบหลอดจนแบนเวลาแถวเป้าหมายด้านล่างสูงเกินพื้นที่เดิม */
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--sgh-pink-200);
  overflow: hidden;
}

.sgh-progress-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--sgh-pink) 0%, var(--sgh-pink-accent) 100%);
}

.sgh-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--sgh-n900);
}

.sgh-goal-row span:last-child {
  width: 120px;
  color: var(--sgh-pink);
  text-align: right;
}

/* ---------- 3 pink action pills ---------- */
.sgh-actions {
  display: flex;
  gap: 6px;
  height: 55px;
  margin: 10px 14px 0;
}

.sgh-action-btn {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--sgh-pink-500);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sgh-action-btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- white cards ---------- */
.sgh-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 16px 0;
}

.sgh-cards.is-forming {
  position: relative;
  z-index: 1;
  gap: 12px;
  margin-top: 13px;
}

.sgh-forming-veil {
  position: absolute;
  left: 50%;
  top: 237px;
  z-index: 0;
  width: 100%;
  height: 545px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}

.sgh-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 16px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sgh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sgh-card-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n950);
}

.sgh-card-title.is-pink {
  font-size: 18px;
  color: var(--sgh-pink);
  font-weight: 700;
}

.sgh-card-title.is-center {
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  color: var(--sgh-pink);
  font-weight: 700;
}

.sgh-more {
  border: 0;
  padding: 0;
  background: none;
  width: 18px;
  height: 18px;
  display: flex;
  cursor: pointer;
}

.sgh-more img {
  width: 18px;
  height: 18px;
}

/* ---------- member avatars row / grid ---------- */
.sgh-members {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.sgh-members::-webkit-scrollbar {
  display: none;
}

.sgh-members.is-grid {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 12px;
}

/* หน้าสมาชิกกลุ่ม 344:42012 — ไม่ใช้กับแถวสมาชิกหน้าโฮม */
.sgh-members-page .sgh-card {
  padding: 18px;
  border-radius: 24px;
  gap: 0;
  filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sgh-members-page .sgh-members.is-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  justify-content: stretch;
  align-items: start;
}

/* invite tile = green per Figma 344:42012 — let general .is-invite (mint) rule apply */

.sgh-avatar-item {
  border: 0;
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 54px;
  flex-shrink: 0;
  cursor: pointer;
  text-align: center;
}

.sgh-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 160px;
  background: var(--sgh-pink-t300);
  overflow: hidden;
  box-shadow: inset 0 0 8px 2px var(--sgh-pink-50);
  flex-shrink: 0;
}

.sgh-avatar > img {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 45px;
  height: 45px;
  transform: translateX(-50%);
  object-fit: cover;
}

.sgh-avatar.is-photo {
  border: 4px solid var(--sgh-pink-200);
  box-shadow: none;
}

.sgh-avatar.is-photo > img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 160px;
}

.sgh-avatar.is-invite {
  background: var(--sgh-mint-50);
  border: 1px dashed var(--sgh-mint-bright);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sgh-avatar.is-invite > img {
  position: static;
  width: 22px;
  height: 22px;
  transform: none;
}

.sgh-avatar-name {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--sgh-n800);
  white-space: nowrap;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgh-avatar-name.is-muted {
  color: var(--sgh-n300);
}

.sgh-avatar-point {
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  color: var(--sgh-n400);
}

/* ---------- forming: member list + invite code (288:16681) ---------- */
.sgh-count {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
}

.sgh-note {
  margin: -4px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n600);
}

.sgh-cards.is-forming .sgh-card:not(.is-invite) {
  gap: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

.sgh-cards.is-forming .sgh-card:not(.is-invite) .sgh-note {
  margin: 3px 0 12px;
}

.sgh-card.is-invite {
  gap: 8px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.06));
}

.sgh-card.is-invite .sgh-card-title.is-center {
  padding-bottom: 8px;
}

.sgh-member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sgh-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.sgh-member-row .sgh-avatar {
  width: 42px;
  height: 42px;
}

.sgh-member-row .sgh-avatar > img {
  width: 45px;
  height: 45px;
  left: -2px;
  top: 4px;
  transform: none;
}

.sgh-member-row .sgh-avatar.is-photo > img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sgh-member-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgh-member-role {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--sgh-pink);
  white-space: nowrap;
}

.sgh-code-box {
  width: 100%;
  padding: 12px;
  border-radius: 128px;
  border: 1px solid var(--sgh-n100);
  background: var(--sgh-n50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n900);
}

.sgh-code-box span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgh-code-box img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sgh-share-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 32px;
  flex-wrap: wrap;
}

.sgh-share-btn {
  border: 0;
  height: 32px;
  padding: 8px;
  border-radius: 18px;
  background: var(--sgh-pink-100);
  box-shadow: inset 0 0 16px var(--sgh-pink-t300);
  color: var(--sgh-pink);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.sgh-share-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sgh-share-btn.is-line {
  background: #268800;
  box-shadow: none;
  color: #ffffff;
}

.sgh-cards.is-forming .sgh-leave-wrap {
  margin: 0;
}

.sgh-leave-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 16px 0;
}

.sgh-leave-btn {
  border: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: #fef5f4;
  color: #DE1E24;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.sgh-leave-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sgh-leave-btn img,
.sgh-leave-btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- group missions (home rows + list cards) ---------- */
.sgh-mission-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sgh-mission {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sgh-n50);
  cursor: pointer;
}

.sgh-mission:last-child {
  border-bottom: 0;
}

.sgh-mission-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  object-fit: contain;
}

.sgh-mission-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sgh-mission-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sgh-mission-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
}

.sgh-mission-desc {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--sgh-n500);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sgh-mission.is-locked .sgh-mission-desc {
  color: var(--sgh-n400);
}

.sgh-mission-progress {
  color: var(--sgh-pink);
}

.sgh-mission-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sgh-mint);
  flex-shrink: 0;
}

.sgh-mission-reward b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 900;
}

.sgh-mission-reward small {
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

/* list page 891:59373: each mission is its own rounded card */
.sgh-mission-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgh-mission-cards .sgh-mission {
  padding: 16px 16px 16px 12px;
  border: 1px solid var(--sgh-n50);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ---------- mission detail (891:57991) ---------- */
.sgh-detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: -6px;
}

.sgh-detail-icon {
  width: 74px;
  height: 74px;
  object-fit: contain;
  margin-bottom: 12px;
}

.sgh-detail-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--sgh-pink);
}

.sgh-detail-sub {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n500);
}

.sgh-detail-section {
  margin-top: 24px;
}

.sgh-detail-section + .sgh-detail-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sgh-n100);
}

.sgh-detail-h {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sgh-n900);
}

.sgh-detail-p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n800);
  white-space: pre-line;
}

.sgh-detail-ul {
  margin: 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n800);
}

.sgh-detail-ul li {
  padding-left: 4px;
}

/* ---------- history (รายการย้อนหลัง) ---------- */
.sgh-tabs {
  display: flex;
  gap: 6px;
}

.sgh-tab {
  height: 38px;
  border: 1px solid var(--sgh-n100);
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sgh-n50);
  color: var(--sgh-n700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.sgh-tab.is-active {
  border-color: var(--sgh-mint);
  background: var(--sgh-mint);
  color: #ffffff;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

.sgh-txn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* แถวกดกางได้ — เส้นคั่นย้ายมาอยู่ที่ตัวห่อ จะได้คั่นใต้รายละเอียดที่กางออกมาด้วย */
.sgh-txn-item {
  border-bottom: 1px solid var(--sgh-n100);
}

.sgh-txn-item:last-child {
  border-bottom: 0;
}

.sgh-txn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 77px;
  padding: 16px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.sgh-txn-caret {
  flex: none;
  width: 20px;
  height: 20px;
}

.sgh-txn-detail {
  padding: 0 0 14px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sgh-txn-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.sgh-txn-kv > span:first-child {
  flex: none;
  color: var(--sgh-n500);
}

.sgh-txn-kv > span:last-child {
  min-width: 0;
  text-align: right;
  color: var(--sgh-n800);
  overflow-wrap: break-word;
}

.sgh-txn-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* กินที่ว่างทั้งหมด คะแนนกับลูกศรจะได้ไปชิดขวาอยู่ด้วยกัน
   ไม่ลอยอยู่กลางแถวแบบตอนใช้ space-between (แบบเดียวกับ .gsb-ph-main) */
.sgh-txn-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sgh-txn-title {
  display: block;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgh-txn-date {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--sgh-n500);
}

.sgh-txn-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  /* กว้างพอสำหรับ "+2,000" — เลขหลักไม่เท่ากันแต่ลูกศรต้องเรียงตรงกันทุกแถว */
  min-width: 64px;
}

.sgh-txn-point b {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-pink);
}

.sgh-txn-point.is-minus b {
  color: var(--sgh-n700);
}

.sgh-txn-point small {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--sgh-n800);
}

.sgh-empty {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--sgh-n500);
  text-align: center;
}

/* ---------- Start (508:83560) ---------- */
.sgh-start {
  padding: 26px 16px 24px;
  display: flex;
  flex-direction: column;
}

.sgh-start-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 359 / 217;
  border-radius: 48px;
  object-fit: cover;
  background: radial-gradient(60% 60% at 50% 50%, #ff73b0 0%, #fea2d1 50%, #fcd2f2 100%);
  box-shadow: inset 2px -4px 12px rgba(239, 0, 141, 0.52), inset 0 0 18px 4px var(--sgh-pink-100);
}

.sgh-start-form {
  margin-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sgh-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sgh-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sgh-n800);
}

.sgh-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--sgh-n200);
  border-radius: 18px;
  background: #ffffff;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n700);
  text-align: center;
  outline: none;
}

.sgh-input::placeholder {
  color: var(--sgh-n300);
  font-weight: 600;
}

.sgh-input:focus {
  border-color: var(--sgh-pink-t300);
}

.sgh-input.is-invalid {
  border-color: #e5484d;
}

.sgh-error {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: #e5484d;
}

.sgh-btn {
  width: 100%;
  height: 48px;
  border: 0;
  padding: 0 24px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

.sgh-btn.is-mint {
  background: var(--sgh-grad-mint);
  box-shadow: var(--sgh-shadow-mint), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.sgh-btn.is-pink {
  background: linear-gradient(153.68deg, #ff8aba 0%, #ff0088 50.96%, #d60075 100%);
}

.sgh-btn.is-soft {
  background: var(--sgh-pink-50);
  color: var(--sgh-pink);
  box-shadow: inset 0 0 18px var(--sgh-pink-t300);
}

.sgh-btn:disabled {
  background: #C4C4C4;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.sgh-btn svg,
.sgh-btn img {
  width: 24px;
  height: 24px;
}

.sgh-rules {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sgh-rules-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n900);
}

.sgh-rules ol {
  margin: 0;
  padding-left: 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n600);
}

/* ---------- invite preview (508:89448 / 288:21943) & cannot-join (283:11082) ---------- */
.sgh-invite {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sgh-pink-100);
  font-family: var(--sgh-font);
  display: flex;
  justify-content: center;
  /* อย่า stretch คอลัมน์ให้เท่าจอ — เนื้อหายาวต้องดันสูงแล้วเลื่อนทั้งหน้า */
  align-items: flex-start;
}

.sgh-invite.is-page {
  position: relative;
  inset: auto;
  z-index: auto;
  min-height: 100vh;
  overflow: visible;
}

.sgh-invite-col {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-height: 100%;
  overflow: visible;
  /* ดาว/มาสคอตยึดขอบ 390 — สแตกดันด้วย margin ไม่ใช่ padding ซ้ายขวา (Figma 288:21943) */
  padding: 202px 0 24px;
}

.sgh-invite-col.has-cta {
  padding-bottom: 96px;
}

.sgh-invite-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 678px;
  height: 928px;
  transform: translateX(-50%);
  opacity: 0.6;
  object-fit: cover;
  pointer-events: none;
}

.sgh-invite-podium {
  position: absolute;
  left: 132px;
  top: 126px;
  width: 124px;
  height: 66px;
  object-fit: contain;
  pointer-events: none;
}

.sgh-invite-mascot {
  position: absolute;
  left: 130px;
  top: 27px;
  width: 129px;
  height: 129px;
  object-fit: cover;
  pointer-events: none;
}

.sgh-invite-star {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sgh-invite-star img {
  display: block;
  opacity: 0.2;
  object-fit: contain;
}

.sgh-invite-star.is-left {
  left: calc(50% - 155.21px);
  top: 248.4px;
  width: 56.53px;
  height: 58.68px;
  transform: translateX(-50%);
}

.sgh-invite-star.is-left img {
  width: 55.47px;
  height: 53.18px;
  transform: rotate(-86.43deg);
}

.sgh-invite-star.is-right {
  left: calc(50% + 131.98px);
  top: 120px;
  width: 97.97px;
  height: 99.27px;
  transform: translateX(-50%);
}

.sgh-invite-star.is-right img {
  width: 74.59px;
  height: 71.51px;
  transform: rotate(-62.33deg);
}

.sgh-invite-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgh-invite-col .sgh-invite-stack {
  box-sizing: border-box;
  width: 100%;
  padding: 0 15px;
}

.sgh-invite-title-card {
  box-sizing: border-box;
  width: 100%;
  border-radius: 24px;
  background: var(--sgh-pink-50);
  padding: 24px 22px;
  /* Figma Container effect (325:36916): neumorphic — dark BR, white TL, subtle inner dark */
  box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.14),
    -20px -20px 30px rgba(255, 255, 255, 0.53), inset 4px 4px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.sgh-invite-title-card.is-white {
  background: #ffffff;
  gap: 4px;
}

.sgh-invite-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--sgh-pink);
}

.sgh-invite-title.is-dark {
  color: var(--sgh-n900);
}

.sgh-invite-by {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
}

.sgh-invite-card {
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 16px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.06));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sgh-invite-col .sgh-invite-card,
.sgh-invite-col .sgh-invite-actions {
  width: 100%;
  max-width: 100%;
}

.sgh-invite-card.is-terms h3 {
  padding-bottom: 0;
}

.sgh-invite-card h3 {
  margin: 0;
  padding-bottom: 2px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sgh-pink);
}

.sgh-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.sgh-info-row dt {
  width: 112px;
  flex-shrink: 0;
  margin: 0;
  color: var(--sgh-n500);
  font-weight: 500;
}

.sgh-info-row dd {
  margin: 0;
  color: var(--sgh-n800);
}

.sgh-terms {
  margin: 0;
  padding-left: 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sgh-n600);
}

.sgh-terms b {
  display: block;
  font-weight: 500;
  color: var(--sgh-n900);
}

.sgh-terms b.is-inline {
  display: inline;
}

.sgh-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgh-invite-actions .sgh-btn.is-mint {
  box-shadow: 0 10px 11px rgba(3, 133, 133, 0.2), 0 3px 3px rgba(3, 133, 133, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* sticky bottom CTA (283:11082, 891:57991) */
.sgh-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  display: flex;
  justify-content: center;
  padding: 12px 16px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 40%);
  pointer-events: none;
}

.sgh-cta-bar > * {
  max-width: 508px;
  pointer-events: auto;
}

.sgh-invite.is-grey {
  background: linear-gradient(180deg, #f4f4f6 0%, #e6e6ea 100%);
}

.sgh-invite.is-grey .sgh-invite-bg,
.sgh-invite.is-grey .sgh-invite-star {
  filter: grayscale(1);
}

.sgh-invite.is-grey .sgh-invite-star img {
  opacity: 0.14;
}

.sgh-invite.is-grey .sgh-invite-col {
  padding-top: 328px;
}

.sgh-invite-mascot.is-big {
  left: 76px;
  top: 78px;
  width: 240px;
  height: 240px;
}

.sgh-invite-msg {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--sgh-n800);
}

/* ---------- closed group (344:41171) ---------- */
.sgh-closed {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-height: calc(100vh - 72px);
  overflow: hidden;
  background: var(--sgh-pink-100);
  padding: 380px 16px 24px;
}

.sgh-closed .sgh-invite-bg {
  height: 100%;
  min-height: 780px;
  opacity: 0.8;
}

.sgh-closed-podium {
  position: absolute;
  left: 50%;
  top: 300px;
  width: 190px;
  height: 100px;
  transform: translateX(-50%);
  object-fit: contain;
}

.sgh-closed-mascot {
  position: absolute;
  left: 50%;
  top: 122px;
  width: 235px;
  height: 235px;
  transform: translateX(-50%);
  object-fit: contain;
}

.sgh-closed-sparkle {
  position: absolute;
  pointer-events: none;
}

/* ---------- join success modal (508:89450) ---------- */
.sgh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: var(--sgh-font);
}

.sgh-modal {
  position: relative;
  width: 350px;
  max-width: 100%;
  padding-top: 144px;
}

.sgh-modal-mascot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 238px;
  height: 238px;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.sgh-modal-box {
  position: relative;
  min-height: 329px;
  border-radius: 40px;
  border: 1px solid rgba(255, 231, 238, 0.14);
  background: var(--sgh-pink-200);
  overflow: hidden;
  box-shadow: inset -4px -6px 10px rgba(236, 0, 140, 0.36), inset 0 0 16px 2px var(--sgh-pink-50);
  padding: 103px 0 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sgh-modal-rings {
  position: absolute;
  left: 13px;
  top: -25px;
  width: 324px;
  height: 324px;
  pointer-events: none;
}

.sgh-modal-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 12px;
}

.sgh-modal-title {
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: var(--sgh-pink);
}

.sgh-modal-msg {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--sgh-n700);
}

.sgh-modal-btn {
  position: relative;
  margin-top: auto;
  width: 174px;
  height: 48px;
  border: 0;
  border-radius: 18px;
  background: var(--sgh-grad-mint);
  box-shadow: var(--sgh-shadow-mint), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

.sgh-modal-text + .sgh-modal-btn {
  margin-top: 28px;
}