/* Group Buy page - anti-conflict style (readability tuned) */
:root {
  --xygb-p: #1f5edc;
  --xygb-p2: #3f95f3;
  --xygb-line: #d7e5ff;
  --xygb-text: #0f2140;
  --xygb-sub: #465f84;
}
html,body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  background: linear-gradient(180deg,#eef4ff 0,#f8fbff 36%,#fff 100%);
  color: var(--xygb-text);
}
.gb-hero {
  padding: 24px 0 16px;
}
.gb-hero .container {
  max-width: 1200px;
}
.gb-banner {
  background: linear-gradient(135deg,var(--xygb-p),var(--xygb-p2));
  color: #fff;
  border-radius: 18px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  box-shadow: 0 12px 26px rgba(31,94,220,.26);
}
.gb-badge {
  display: inline-block;
  background: rgba(255,255,255,.24);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.gb-title {
  margin: 12px 0 8px;
  font-size: 34px;
  line-height: 1.2;
}
.gb-sub {
  margin: 0;
  line-height: 1.7;
  opacity: .98;
}
.gb-rule {
  margin: 0;
  line-height: 1.8;
  opacity: .98;
}
#gbTabs.gb-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
#gbTabs .gb-tab {
  border: 1px solid #b8cff9;
  background: #fff;
  color: #1a4fb6;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 700;
}
#gbTabs .gb-tab.active {
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
  color: #fff;
  border-color: transparent;
}
#gbModeTabs.gb-subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#gbModeTabs .gb-subtab {
  border: 1px solid #c8dafd;
  background: #f8fbff;
  color: #365781;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
#gbModeTabs .gb-subtab.active {
  color: #fff;
  background: linear-gradient(90deg,#2f69db,#4ba0f7);
  border-color: transparent;
}
#gbLoading,#gbEmpty {
  padding: 22px 0;
  color: var(--xygb-sub);
  font-size: 14px;
}
#gbEmpty {
  display: none;
}
#gbList.gb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 22px;
}
#gbList .gb-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 24px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--xygb-line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 7px 20px rgba(40,95,189,.08);
}
#gbList .gb-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#gbList .gb-row-head {
  display: block;
}
#gbList .gb-name {
  margin: 0;
  color: #12305d;
  font-size: 20px;
  line-height: 1.3;
}
#gbList .gb-row-status {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#gbList .gb-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
#gbList .gb-chip-mode {
  background: #eef4ff;
  color: #2b5fc8;
  border: 1px solid #d6e4ff;
}
#gbList .gb-chip-public.is-on {
  background: #e8f3ff;
  color: #1768d6;
  border: 1px solid #bfd8ff;
}
#gbList .gb-chip-public.is-off {
  background: #f1f4f8;
  color: #6f7f99;
  border: 1px solid #dbe2ef;
}
#gbList .gb-desc {
  margin: 6px 0 0;
  color: #38567f;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gbList .gb-row-meta {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: #456088;
  font-size: 13px;
}
#gbList .gb-row-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#gbList .gb-row-meta b {
  color: #173864;
}
#gbList .gb-row-type-inline {
  color: #3f5d87;
}
#gbList .gb-row-type-inline b {
  color: #1e5dd4;
}
#gbList .gb-row-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  text-align: left;
  border-left: 1px solid #e7efff;
  padding-left: 22px;
  justify-content: center;
}
#gbList .gb-price-box {
  background: linear-gradient(180deg,#f8fbff,#fff);
  border: 1px solid #dfeaff;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#gbList .gb-price-label {
  color: #6b7f9f;
  font-size: 12px;
  font-weight: 700;
}
#gbList .gb-price {
  color: #1d57c7;
  font-size: 34px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.5px;
}
#gbList .gb-price small {
  font-size: 13px;
  color: #4f668a;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0;
}
#gbList .gb-leader-highlight {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1f5dd5;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #c5dbff;
}
#gbList .gb-origin {
  color: #7f91ab;
  font-size: 12px;
  text-decoration: line-through;
}
#gbList .gb-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#gbList .gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
  appearance: none;
  white-space: nowrap;
}
#gbList .gb-btn-main {
  color: #fff !important;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2)) !important;
  border: 1px solid transparent !important;
}
#gbList .gb-btn-sub {
  color: #1f5ad0 !important;
  background: #fff !important;
  border: 1px solid #b8cff9 !important;
}
#gbPublicWrap {
  display: none;
  padding: 10px 0 26px;
}
.gb-public-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.gb-public-head h3 {
  margin: 0;
  font-size: 20px;
  color: #12305d;
}
.gb-public-close {
  border: 1px solid #b8cff9;
  background: #fff;
  color: #1f5ad0;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}
#gbPublicLoading,#gbPublicEmpty {
  display: none;
  padding: 12px 0;
  color: var(--xygb-sub);
}
#gbPublicList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gb-public-row {
  display: grid;
  grid-template-columns: minmax(620px,1fr) 150px 118px 116px;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg,#fff,#fbfdff);
  border: 1px solid var(--xygb-line);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 22px rgba(35,90,180,.08);
}
.gb-public-main {
  min-width: 0;
}
.gb-public-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#gbPublicList .gb-public-name {
  margin: 0;
  color: #12305d;
  font-size: 18px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gbPublicList .gb-public-desc {
  margin: 6px 0 0;
  color: #4e678d;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.gb-public-meta-line {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: #4e668c;
  font-size: 13px;
}
.gb-public-meta-line span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gb-public-meta-line b {
  color: #123b72;
  font-weight: 850;
}
.gb-public-type {
  display: inline-flex;
  flex: 0 0 auto;
  height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #1f5dd5;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #d7e5ff;
}
.gb-public-team {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.gb-public-overview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-public-overview span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f7faff;
  border: 1px solid #e1ebff;
  color: #5d7397;
  font-size: 12px;
  line-height: 1;
}
.gb-public-overview em {
  font-style: normal;
  color: #7c91b3;
  font-weight: 700;
}
.gb-public-overview b {
  color: #123b72;
  font-weight: 850;
}
.gb-public-overview strong {
  color: #1f5dd5;
  font-weight: 850;
}
.gb-public-seat-inline {
  gap: 8px !important;
}
.gb-public-seats {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 2px;
}
.gb-public-seats:before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  height: 2px;
  background: #e3edff;
  transform: translateY(-50%);
  z-index: 0;
}
.gb-public-seat {
  display: inline-flex;
  align-items: center;
  color: #5b7195;
  font-size: 0;
  line-height: 1;
}
.gb-public-seat-dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 850;
}
.gb-public-seat em {
  display: none;
}
.gb-public-seat-count {
  display: inline-flex;
  align-items: center;
  color: #1f5dd5;
  font-size: 12px;
  font-weight: 850;
}
.gb-public-seat.is-leader .gb-public-seat-dot {
  color: #fff;
  background: linear-gradient(135deg,#1f5edc,#4a9bf4);
}
.gb-public-seat.is-member .gb-public-seat-dot {
  color: #1f5dd5;
  background: #eaf2ff;
  border: 1px solid #c8ddff;
}
.gb-public-seat.is-empty .gb-public-seat-dot {
  color: #9badcc;
  background: #fff;
  border: 1px dashed #bcd2fb;
}
.gb-public-seat.is-empty em {
  color: #8ba0c0;
}
.gb-public-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.gb-public-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  background: #f7faff;
  border: 1px solid #e1ebff;
  border-radius: 999px;
  padding: 0 10px;
  color: #536d94;
  font-size: 12px;
  line-height: 1;
}
.gb-public-fact span {
  color: #7a91b2;
  font-size: 12px;
  font-weight: 700;
}
.gb-public-fact b {
  color: #173864;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-public-fact strong {
  color: #173864;
  font-weight: 700;
}
.gb-public-count b,.gb-public-time-inline b {
  color: #173864;
}
.gb-public-time-box {
  display: grid;
  gap: 4px;
  justify-self: start;
}
.gb-public-time-box span {
  color: #7890b2;
  font-size: 12px;
  font-weight: 700;
}
.gb-public-time-box b {
  color: #123b72;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}
.gb-public-price-box span {
  display: block;
  font-size: 12px;
  color: #7890b2;
  margin: 0 0 4px;
  font-weight: 700;
}
.gb-public-price-box {
  text-align: left;
  background: #fff;
  border-left: 3px solid #2f69db;
  padding-left: 12px;
  justify-self: start;
}
.gb-public-price-box strong {
  display: block;
  color: #1d57c7;
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
}
.gb-public-price-box small {
  font-size: 13px;
  color: #4f668a;
  margin-left: 3px;
}
.cell-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.gb-public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  padding: 11px 14px;
  border: 1px solid #b8cff9;
  background: #fff;
  color: #1f5ad0;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}
.gb-public-btn-main {
  color: #fff;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
  border: 1px solid transparent;
}
.gb-public-btn[disabled] {
  cursor: not-allowed;
  color: #9aa9c3;
  border-color: #dbe3f1;
  background: #f7faff;
}
#gbTypeModal,#gbCreateModal,#gbLoginModal,#gbJoinModal,#gbJoinGroupModal,#gbJoinFinalModal,#gbNoticeModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#gbTypeModal.is-open,#gbCreateModal.is-open,#gbLoginModal.is-open,#gbJoinModal.is-open,#gbJoinGroupModal.is-open,#gbJoinFinalModal.is-open,#gbNoticeModal.is-open {
  display: flex !important;
}
#gbTypeModal .gb-modal-mask,#gbCreateModal .gb-modal-mask,#gbLoginModal .gb-modal-mask,#gbJoinModal .gb-modal-mask,#gbJoinGroupModal .gb-modal-mask,#gbJoinFinalModal .gb-modal-mask,#gbNoticeModal .gb-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(10,26,58,.26);
}
#gbTypeModal .gb-modal-panel,#gbCreateModal .gb-modal-panel,#gbLoginModal .gb-modal-panel,#gbJoinModal .gb-modal-panel,#gbJoinGroupModal .gb-modal-panel,#gbJoinFinalModal .gb-modal-panel,#gbNoticeModal .gb-modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px,92vw);
  margin: 0;
  background: #fff;
  border-radius: 14px;
  overflow: auto;
  border: 1px solid #dbe7ff;
  max-height: calc(100vh - 32px);
}
#gbCreateModal .gb-modal-panel {
  width: min(620px,94vw);
}
#gbLoginModal .gb-modal-panel,#gbJoinModal .gb-modal-panel,#gbJoinFinalModal .gb-modal-panel,#gbNoticeModal .gb-modal-panel {
  width: min(420px,92vw);
}
.gb-modal-panel-sm {
  width: min(420px,92vw);
}
#gbJoinGroupModal .gb-modal-panel {
  width: min(560px,92vw);
}
#gbTypeModal .gb-modal-head,#gbCreateModal .gb-modal-head,#gbLoginModal .gb-modal-head,#gbJoinModal .gb-modal-head,#gbJoinGroupModal .gb-modal-head,#gbJoinFinalModal .gb-modal-head,#gbNoticeModal .gb-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #eef3fb;
}
#gbTypeModal .gb-modal-head h4,#gbCreateModal .gb-modal-head h4,#gbLoginModal .gb-modal-head h4,#gbJoinModal .gb-modal-head h4,#gbJoinGroupModal .gb-modal-head h4,#gbJoinFinalModal .gb-modal-head h4,#gbNoticeModal .gb-modal-head h4 {
  margin: 0;
  color: #132950;
}
#gbTypeModal .gb-modal-head button,#gbCreateModal .gb-modal-head button,#gbLoginModal .gb-modal-head button,#gbJoinModal .gb-modal-head button,#gbJoinGroupModal .gb-modal-head button,#gbJoinFinalModal .gb-modal-head button,#gbNoticeModal .gb-modal-head button {
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #304c75;
}
#gbTypeModal .gb-modal-body,#gbLoginModal .gb-modal-body,#gbJoinModal .gb-modal-body,#gbJoinFinalModal .gb-modal-body,#gbNoticeModal .gb-modal-body {
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
#gbTypeModal .gb-type-item {
  border: 1px solid #d0e1ff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: .2s;
}
#gbTypeModal .gb-type-item:hover {
  border-color: #6ea0f4;
  box-shadow: 0 0 0 3px rgba(30,95,230,.09);
}
#gbTypeModal .gb-type-item.is-selected {
  border-color: #1e5fe6;
  background: #eef5ff;
  box-shadow: 0 0 0 3px rgba(30,95,230,.14);
}
#gbTypeModal .gb-type-item .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#gbTypeModal .gb-type-item .left b {
  font-size: 16px;
  color: #1a2f51;
}
#gbTypeModal .gb-type-item .left span {
  color: #3d567d;
  font-size: 13px;
}
#gbTypeModal .gb-type-item .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 18px;
  color: #1d58c8;
  font-weight: 800;
}
#gbTypeModal .gb-leader-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1f5dd5;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cfe0ff;
}
#gbTypeModal .gb-modal-foot {
  padding: 0 16px 16px;
  display: flex;
  gap: 10px;
}
#gbTypeModal .gb-btn-cancel {
  flex: 1;
  border: 1px solid #c7d9f6;
  background: #fff;
  color: #3e567a;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
}
#gbTypeModal .gb-btn-confirm {
  flex: 1;
  border: 1px solid transparent;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
}
#gbCreateModal .gb-create-body {
  padding: 16px;
  display: grid;
  gap: 14px;
}
#gbCreateModal .gb-create-body p {
  margin: 0;
  color: #425a82;
  line-height: 1.8;
}
#gbCreateModal .gb-create-body b {
  color: #1b56c8;
}
#gbCreateModal .gb-create-box {
  padding: 12px;
  border: 1px solid #d9e6ff;
  background: #f5f9ff;
  border-radius: 10px;
}
#gbCreateModal .gb-create-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #23416e;
  font-weight: 600;
}
#gbCreateModal .gb-create-check input {
  margin-top: 3px;
}
#gbCreateModal .gb-create-tip {
  margin-top: 6px;
  color: #6881a8;
  font-size: 12px;
  line-height: 1.7;
}
#gbCreateModal .gb-create-q {
  padding-top: 10px;
  border-top: 1px solid #ecf2ff;
  color: #1f355d;
  font-weight: 700;
}
#gbCreateModal .gb-create-foot {
  padding: 0 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#gbCreateModal .gb-btn-sub,#gbCreateModal .gb-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
}
#gbCreateModal .gb-btn-sub {
  border: 1px solid #c7d9f6;
  background: #fff;
  color: #3e567a;
}
#gbCreateModal .gb-btn-main {
  border: 1px solid transparent;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
  color: #fff;
}
#gbLoginModal .gb-login-tip,#gbJoinModal .gb-login-tip,#gbJoinFinalModal .gb-login-tip {
  margin: 0;
  color: #435a80;
  line-height: 1.7;
}
#gbLoginModal .gb-login-actions,#gbJoinModal .gb-login-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
#gbLoginModal .gb-login-actions .gb-btn,#gbJoinModal .gb-login-actions .gb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
#gbLoginModal .gb-btn-main,#gbJoinModal .gb-btn-main {
  color: #fff;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
  border: 1px solid transparent;
}
#gbLoginModal .gb-btn-sub,#gbJoinModal .gb-btn-sub {
  color: #1f5ad0;
  background: #fff;
  border: 1px solid #c6d9ff;
}
#gbJoinGroupModal .gb-modal-panel {
  width: min(760px,94vw);
  border-radius: 18px;
}
#gbJoinGroupModal .gb-join-card {
  padding: 18px;
  display: grid;
  gap: 14px;
}
#gbJoinGroupModal .gb-join-product {
  display: grid;
  grid-template-columns: minmax(0,1fr) 150px;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg,#f7fbff,#fff);
  border: 1px solid #dce8ff;
  border-radius: 16px;
  padding: 16px;
}
#gbJoinGroupModal .gb-join-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #1f5dd5;
  background: #eaf2ff;
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 800;
}
#gbJoinGroupModal .gb-join-product h3 {
  margin: 0;
  color: #12305d;
  font-size: 20px;
  line-height: 1.35;
}
#gbJoinGroupModal .gb-join-product p {
  margin: 6px 0 0;
  color: #4d668d;
  font-size: 13px;
  line-height: 1.6;
}
#gbJoinGroupModal .gb-join-price {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: #365781;
  font-size: 13px;
}
#gbJoinGroupModal .gb-join-price span {
  display: block;
  color: #7890b2;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}
#gbJoinGroupModal .gb-join-price b {
  color: #1d57c7;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}
#gbJoinGroupModal .gb-join-price small {
  color: #4f668a;
  font-size: 13px;
  font-weight: 700;
}
#gbJoinGroupModal .gb-join-summary {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
#gbJoinGroupModal .gb-join-summary span {
  background: #f4f8ff;
  border: 1px solid #e1ebff;
  border-radius: 12px;
  padding: 10px 12px;
  color: #4b668e;
}
#gbJoinGroupModal .gb-join-summary em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #7a91b2;
  font-weight: 700;
  margin-bottom: 4px;
}
#gbJoinGroupModal .gb-join-summary b {
  color: #173864;
  font-size: 15px;
}
#gbJoinGroupModal .gb-join-top {
  display: block;
}
#gbJoinGroupModal .gb-join-leader {
  display: none;
}
#gbJoinGroupModal .gb-join-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e1ebff;
  border-radius: 12px;
  padding: 11px 12px;
  color: #3a5884;
  line-height: 1.5;
}
#gbJoinGroupModal .gb-join-status b {
  color: #1a57cb;
}
#gbJoinGroupModal .gb-join-seat-line {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(70px,1fr));
  gap: 10px;
  justify-items: center;
  padding: 12px;
  background: #fbfdff;
  border: 1px dashed #d9e7ff;
  border-radius: 16px;
}
#gbJoinGroupModal .gb-join-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
  color: #4e6488;
  text-align: center;
}
#gbJoinGroupModal .gb-join-seat-dot {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
#gbJoinGroupModal .gb-join-seat.filled .gb-join-seat-dot {
  background: linear-gradient(135deg,#4b71e7,#6f95fb);
  color: #fff;
}
#gbJoinGroupModal .gb-join-seat.unknown .gb-join-seat-dot {
  background: #eef4ff;
  color: #1f5dd5;
  border: 1px solid #cfe0ff;
}
#gbJoinGroupModal .gb-join-seat.loading .gb-join-seat-dot {
  background: #eef4ff;
  color: #1f5dd5;
  border: 1px solid #cfe0ff;
}
#gbJoinGroupModal .gb-join-seat.pending .gb-join-seat-dot {
  background: #f8fbff;
  border: 2px dashed #c5d8ff;
  color: #9db2d8;
}
#gbJoinGroupModal .gb-join-seat-role {
  font-size: 12px;
  font-weight: 700;
}
#gbJoinGroupModal .gb-join-seat-name {
  max-width: 100%;
  font-size: 12px;
  color: #1f3d67;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gbJoinGroupModal .gb-join-seat-phone {
  display: none;
}
#gbJoinGroupModal .gb-join-meta {
  display: none;
}
#gbJoinGroupModal .gb-join-actions {
  padding: 0 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#gbJoinGroupModal .gb-btn-sub,#gbJoinGroupModal .gb-btn-main,#gbJoinFinalModal .gb-btn-sub,#gbJoinFinalModal .gb-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
#gbJoinGroupModal .gb-btn-sub,#gbJoinFinalModal .gb-btn-sub {
  border: 1px solid #c6d9ff;
  background: #fff;
  color: #1f5ad0;
}
#gbJoinGroupModal .gb-btn-main,#gbJoinFinalModal .gb-btn-main {
  border: 1px solid transparent;
  color: #fff;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
}
#gbJoinFinalModal .gb-login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}
#gbJoinFinalModal .gb-login-tip {
  font-size: 14px;
  line-height: 1.8;
  color: #435a80;
}
#gbJoinFinalModal .gb-login-tip b {
  color: #173864;
}
#gbJoinFinalModal .gb-final-summary {
  display: grid;
  gap: 9px;
  background: #f6f9ff;
  border: 1px solid #dce8ff;
  border-radius: 12px;
  padding: 12px;
}
#gbJoinFinalModal .gb-final-summary span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #536d94;
  font-size: 13px;
}
#gbJoinFinalModal .gb-final-summary b {
  color: #173864;
  text-align: right;
}
#gbJoinFinalModal .gb-final-summary .price b {
  color: #1d57c7;
  font-size: 18px;
}
#gbNoticeModal .gb-notice-text {
  margin: 0;
  color: #435a80;
  line-height: 1.8;
}
#gbNoticeModal .gb-notice-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}
#gbNoticeModal .gb-notice-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
  border: 1px solid transparent;
  color: #fff;
  background: linear-gradient(90deg,var(--xygb-p),var(--xygb-p2));
}
@media (max-width:980px) {
  .gb-banner {
    grid-template-columns: 1fr;
  }
  .gb-title {
    font-size: 28px;
  }
  #gbList .gb-row {
    grid-template-columns: 1fr;
  }
  #gbList .gb-row-side {
    border-left: 0;
    padding-left: 0;
  }
  .gb-public-row {
    grid-template-columns: 1fr;
  }
  .gb-public-facts {
    grid-template-columns: 1fr;
  }
  .gb-public-price-box {
    text-align: left;
  }
  .cell-actions {
    justify-content: flex-start;
  }
  #gbJoinGroupModal .gb-join-product {
    grid-template-columns: 1fr;
  }
  #gbJoinGroupModal .gb-join-price {
    text-align: left;
  }
  #gbJoinGroupModal .gb-join-summary {
    grid-template-columns: 1fr;
  }
  #gbJoinGroupModal .gb-join-status {
    flex-direction: column;
  }
  #gbJoinGroupModal .gb-join-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width:560px) {
  #gbList.gb-list {
    gap: 12px;
  }
  #gbList .gb-row {
    padding: 16px 18px;
    border-radius: 16px;
    gap: 12px;
  }
  #gbList .gb-name {
    font-size: 20px;
  }
  #gbList .gb-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    font-size: 13px;
  }
  #gbList .gb-row-meta {
    gap: 7px 13px;
    font-size: 13px;
    line-height: 1.45;
  }
  #gbList .gb-row-status {
    gap: 7px;
    margin-top: 10px;
  }
  #gbList .gb-row-side {
    display: block;
    border-left: 0;
    padding-left: 0;
    text-align: left;
  }
  #gbList .gb-price-box {
    width: max-content;
    max-width: 100%;
    min-width: 168px;
    border: 0 !important;
    border-left: 3px solid #2f69db !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 0 0 12px !important;
    gap: 2px;
    box-shadow: none !important;
  }
  #gbList .gb-price-label {
    font-size: 12px;
  }
  #gbList .gb-price {
    font-size: 30px;
  }
  #gbList .gb-price small {
    font-size: 12px;
  }
  #gbList .gb-origin {
    font-size: 12px;
  }
  #gbList .gb-btns {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  #gbList .gb-btn {
    padding: 12px 10px;
    border-radius: 11px;
  }
  #gbPublicWrap {
    padding: 8px 0 20px;
  }
  .gb-public-head {
    gap: 10px;
    margin-bottom: 10px;
  }
  .gb-public-head h3 {
    font-size: 18px;
    line-height: 1.35;
  }
  .gb-public-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px 14px;
    padding: 16px 18px;
    border-radius: 16px;
  }
  .gb-public-main {
    grid-column: 1/-1;
    min-width: 0;
  }
  .gb-public-titleline {
    gap: 6px;
  }
  #gbPublicList .gb-public-name {
    font-size: 18px;
  }
  #gbPublicList .gb-public-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    font-size: 13px;
  }
  .gb-public-meta-line {
    gap: 8px 10px;
    margin-top: 10px;
    align-items: center;
  }
  .gb-public-seat-inline {
    width: 100%;
    margin-top: 2px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px !important;
  }
  .gb-public-overview {
    gap: 7px;
  }
  .gb-public-overview span {
    height: auto;
    min-height: 27px;
    border-radius: 10px;
    padding: 6px 8px;
  }
  .gb-public-seats {
    gap: 5px;
    padding: 0;
  }
  .gb-public-seats:before {
    left: 10px;
    right: 10px;
  }
  .gb-public-seat-dot {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .gb-public-seat em {
    font-size: 11px;
  }
  .gb-public-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 10px;
  }
  .gb-public-fact {
    height: auto;
    min-height: 28px;
    border-radius: 10px;
    padding: 6px 9px;
    justify-content: flex-start;
  }
  .gb-public-leader {
    grid-column: 1/-1;
  }
  .gb-public-fact b {
    min-width: 0;
  }
  .gb-public-time-box {
    grid-column: 1/-1;
    grid-row: auto;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    background: #f7faff;
    border: 1px solid #e1ebff;
    border-radius: 999px;
    padding: 6px 10px;
    justify-self: start;
  }
  .gb-public-time-box span {
    font-size: 12px;
  }
  .gb-public-time-box b {
    font-size: 13px;
  }
  .gb-public-price-box {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
    background: transparent;
    border-left: 3px solid #2f69db;
    padding-left: 12px;
    align-self: end;
    justify-self: start;
  }
  .gb-public-price-box strong {
    font-size: 25px;
  }
  .cell-actions {
    grid-column: 2;
    grid-row: auto;
    justify-content: flex-end;
    align-self: end;
  }
  .gb-public-btn {
    padding: 12px 16px;
    border-radius: 11px;
  }
  #gbJoinGroupModal {
    padding: 8px;
  }
  #gbJoinGroupModal .gb-modal-panel {
    width: calc(100vw - 16px);
    border-radius: 14px;
    max-height: calc(100vh - 16px);
  }
  #gbJoinGroupModal .gb-modal-head {
    padding: 10px 12px;
  }
  #gbJoinGroupModal .gb-modal-head h4 {
    font-size: 16px;
  }
  #gbJoinGroupModal .gb-modal-head button {
    font-size: 20px;
  }
  #gbJoinGroupModal .gb-join-card {
    padding: 10px;
    gap: 8px;
  }
  #gbJoinGroupModal .gb-join-product {
    display: grid;
    grid-template-columns: minmax(0,1fr) 96px;
    padding: 10px;
    gap: 10px;
    border-radius: 12px;
  }
  #gbJoinGroupModal .gb-join-kicker {
    margin-bottom: 5px;
    padding: 2px 8px;
    font-size: 12px;
  }
  #gbJoinGroupModal .gb-join-product h3 {
    font-size: 16px;
  }
  #gbJoinGroupModal .gb-join-product p {
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #gbJoinGroupModal .gb-join-price {
    text-align: left;
    align-self: end;
  }
  #gbJoinGroupModal .gb-join-price span {
    font-size: 12px;
    margin-bottom: 3px;
  }
  #gbJoinGroupModal .gb-join-price b {
    font-size: 22px;
  }
  #gbJoinGroupModal .gb-join-summary {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  #gbJoinGroupModal .gb-join-summary span {
    padding: 7px 8px;
    border-radius: 10px;
  }
  #gbJoinGroupModal .gb-join-summary em {
    font-size: 11px;
    margin-bottom: 3px;
  }
  #gbJoinGroupModal .gb-join-summary b {
    font-size: 13px;
  }
  #gbJoinGroupModal .gb-join-status {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 10px;
    flex-direction: row;
  }
  #gbJoinGroupModal .gb-join-seat-line {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 6px;
    padding: 9px;
    border-radius: 12px;
  }
  #gbJoinGroupModal .gb-join-seat-dot {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  #gbJoinGroupModal .gb-join-seat-role,#gbJoinGroupModal .gb-join-seat-name {
    font-size: 11px;
  }
  #gbJoinGroupModal .gb-join-actions {
    padding: 0 10px 10px;
    gap: 8px;
  }
  #gbJoinGroupModal .gb-btn-sub,#gbJoinGroupModal .gb-btn-main {
    padding: 9px 14px;
    border-radius: 10px;
  }
}
@media (max-width:390px) {
  #gbList .gb-row {
    padding: 14px 15px;
  }
  #gbList .gb-price {
    font-size: 28px;
  }
  #gbList .gb-btn {
    padding: 11px 8px;
  }
  .gb-public-row {
    padding: 14px 15px;
    gap: 10px 12px;
  }
  #gbPublicList .gb-public-name {
    font-size: 17px;
  }
  #gbPublicList .gb-public-desc {
    font-size: 12px;
  }
  .gb-public-time-box {
    padding: 5px 9px;
  }
  .gb-public-price-box strong {
    font-size: 23px;
  }
  .gb-public-btn {
    padding: 11px 13px;
  }
  .gb-public-seat-dot {
    width: 21px;
    height: 21px;
  }
  #gbJoinGroupModal .gb-join-product {
    grid-template-columns: 1fr;
  }
  #gbJoinGroupModal .gb-join-summary {
    grid-template-columns: 1fr 1fr;
  }
  #gbJoinGroupModal .gb-join-seat-line {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}