.join-poster-panel {
  width: min(860px,100%)
}
.join-poster-body {
  flex-direction: column;
  gap: 12px;
  display: flex
}
.join-poster-formats {
  flex-wrap: wrap
}
.join-poster-stage {
  border-radius: var(--radius,10px);
  background: var(--surface-2,#7f7f7f1f);
  justify-content: center;
  padding: 16px;
  display: flex;
  overflow: hidden
}
.join-poster-preview {
  flex: none;
  position: relative;
  box-shadow: 0 10px 30px -12px #0009
}
.join-poster-scaler {
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0
}
.join-poster-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex
}
.jp-print {
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: -10000px
}
@media print {
  body,
  html {
    background: #fff!important
  }
  body:has(>.jp-print) {
    margin: 0!important;
    padding: 0!important;
    overflow: visible!important
  }
  body:has(>.jp-print) > :not(.jp-print) {
    display: none!important
  }
  .jp-print {
    visibility: visible;
    position: static
  }
}
.jp-sheet {
  color: #141414;
  text-align: left;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background: #fff;
  width: 210mm;
  height: 297mm;
  font-family: Noto Sans TC,PingFang TC,Microsoft JhengHei,Heiti TC,sans-serif;
  position: relative;
  overflow: hidden
}
.jp-sheet *,
.jp-sheet :after,
.jp-sheet :before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
.jp-sheet ol {
  list-style: none
}
.jp-band,
.jp-face,
.jp-tile {
  --k: 1
}
.jp-eyebrow {
  font-size: calc(13pt * var(--k));
  letter-spacing: .3em;
  color: var(--jp-ink);
  font-weight: 700
}
.jp-title {
  font-size: calc(36pt * var(--k) * var(--t,1));
  letter-spacing: .01em;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: #141414;
  font-weight: 800;
  line-height: 1.3
}
.jp-title span {
  color: var(--jp-ink)
}
.jp-qr {
  width: calc(118mm * var(--k) * var(--q,1));
  height: calc(118mm * var(--k) * var(--q,1));
  padding: calc(3mm * var(--k));
  border: calc(1.4mm * var(--k)) solid var(--jp-accent);
  border-radius: calc(6mm * var(--k));
  background: #fff;
  flex: none
}
.jp-qr svg {
  width: 100%;
  height: 100%;
  display: block
}
.jp-logo {
  height: calc(22mm * var(--k));
  max-width: calc(90mm * var(--k));
  width: fit-content;
  margin-bottom: calc(5mm * var(--k));
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex
}
.jp-logo img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block
}
.jp-logo.is-light {
  padding: calc(2.5mm * var(--k)) calc(5mm * var(--k));
  border-radius: calc(3mm * var(--k));
  background: #141414
}
.jp-steps {
  gap: calc(6mm * var(--k));
  flex-direction: column;
  display: flex
}
.jp-steps li {
  align-items: flex-start;
  gap: calc(4mm * var(--k));
  font-size: calc(17pt * var(--k));
  font-weight: 600;
  line-height: 1.5;
  display: flex
}
.jp-steps li > div {
  min-width: 0
}
.jp-steps i {
  width: calc(10.5mm * var(--k));
  height: calc(10.5mm * var(--k));
  margin-top: calc(.7mm * var(--k));
  background: var(--jp-accent);
  color: var(--jp-on-accent);
  font-size: calc(15pt * var(--k));
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  display: grid
}
.jp-steps b {
  color: var(--jp-ink);
  font-weight: 800
}
.jp-steps small {
  margin-top: calc(1.5mm * var(--k));
  font-size: calc(14pt * var(--k));
  color: #4a4a4a;
  font-weight: 500;
  display: block
}
.jp-bring {
  align-items: center;
  gap: calc(3mm * var(--k));
  padding: calc(3.5mm * var(--k)) calc(7mm * var(--k));
  border: calc(.5mm * var(--k)) solid var(--jp-accent);
  background: var(--jp-soft);
  font-size: calc(15pt * var(--k));
  color: #141414;
  border-radius: 999px;
  font-weight: 800;
  display: inline-flex
}
.jp-bring svg {
  width: calc(8mm * var(--k));
  height: calc(8mm * var(--k));
  color: var(--jp-ink);
  flex: none
}
.jp-foot {
  font-size: calc(9pt * var(--k));
  letter-spacing: .05em;
  color: #8a8a8a;
  margin-top: auto
}
.jp-face {
  text-align: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 20mm 20mm 12mm;
  display: flex
}
.jp-face .jp-title {
  margin-top: calc(4mm * var(--k))
}
.jp-face .jp-qr {
  margin-top: calc(10mm * var(--k))
}
.jp-face .jp-steps {
  width: calc(160mm * var(--k));
  margin-top: calc(12mm * var(--k));
  text-align: left
}
.jp-face .jp-bring {
  margin-top: calc(11mm * var(--k))
}
.jp-a5 {
  grid-template-columns: 1fr 1fr;
  width: 297mm;
  height: 210mm;
  display: grid
}
.jp-a5 .jp-face {
  --k: .7;
  padding: 12mm 12mm 9mm
}
.jp-a5:after {
  content: "";
  border-left: .3mm dashed #9a9a9a;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%
}
.jp-tent {
  grid-template-rows: repeat(3,99mm);
  display: grid
}
.jp-band {
  --k: .62;
  align-items: center;
  gap: 8mm;
  height: 99mm;
  padding: 10mm 14mm;
  display: flex;
  position: relative
}
.jp-band + .jp-band {
  border-top: .3mm dashed #9a9a9a
}
.jp-band-back {
  transform: rotate(180deg)
}
.jp-band .jp-qr {
  border-width: 1mm;
  border-radius: 4mm;
  width: 74mm;
  height: 74mm;
  padding: 2.5mm
}
.jp-band-text {
  flex: 1;
  min-width: 0
}
.jp-band .jp-logo {
  justify-content: flex-start;
  max-width: 60mm;
  height: 11mm;
  margin-bottom: 2.5mm
}
.jp-band .jp-logo.is-light {
  border-radius: 2mm;
  padding: 1.5mm 3mm
}
.jp-band .jp-title {
  margin-top: 1.5mm
}
.jp-band .jp-steps {
  gap: 2.4mm;
  margin-top: 4mm
}
.jp-band .jp-bring {
  margin-top: 4mm
}
.jp-band-base {
  text-align: center;
  color: #8a8a8a;
  justify-content: center;
  padding: 10mm 30mm;
  font-size: 9pt;
  line-height: 1.6
}
.jp-card {
  grid-template-rows: repeat(5,54mm);
  grid-template-columns: repeat(2,90mm);
  place-content: center;
  display: grid
}
.jp-tile {
  outline-offset: -.125mm;
  outline: .25mm dashed #b0b0b0;
  align-items: center;
  gap: 3mm;
  padding: 4mm;
  display: flex
}
.jp-tile .jp-qr {
  border-width: .7mm;
  border-radius: 2.5mm;
  width: 44mm;
  height: 44mm;
  padding: 1.5mm
}
.jp-tile-text {
  flex: 1;
  min-width: 0
}
.jp-tile .jp-logo {
  justify-content: flex-start;
  max-width: 30mm;
  height: 7mm;
  margin-bottom: 1.2mm
}
.jp-tile .jp-logo.is-light {
  border-radius: 1.2mm;
  padding: 1mm 2mm
}
.jp-tile .jp-eyebrow {
  letter-spacing: .2em;
  font-size: 6.5pt
}
.jp-tile .jp-title {
  font-size: calc(11pt * var(--t,1));
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: .8mm;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden
}
.jp-tile .jp-steps {
  gap: 1.6mm;
  margin-top: 2.5mm
}
.jp-tile .jp-steps li {
  gap: 1.6mm;
  font-size: 7.2pt;
  line-height: 1.35
}
.jp-tile .jp-steps i {
  width: 3.8mm;
  height: 3.8mm;
  margin-top: .2mm;
  font-size: 6.5pt
}
.store-profile {
  display: grid;
  container: store-profile/inline-size
}
.sp-section {
  border-top: 1px solid var(--border);
  grid-template-columns: minmax(180px,250px) minmax(0,1fr);
  gap: 12px 40px;
  padding: 28px 0;
  display: grid
}
.sp-section:first-of-type {
  border-top: 0;
  padding-top: 4px
}
.sp-intro {
  min-width: 0
}
.sp-intro h2 {
  margin: 0;
  font-size: 16px
}
.sp-intro .meta {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7
}
.sp-instant {
  color: var(--accent);
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex
}
.sp-instant:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px
}
.sp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  padding: 20px 22px
}
.sp-fields {
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: 18px 20px;
  display: grid
}
.sp-wide {
  grid-column: 1/-1
}
.sp-field {
  gap: 6px;
  min-width: 0;
  display: grid
}
.sp-label {
  color: var(--text);
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex
}
.sp-card .field-hint {
  margin: 0;
  line-height: 1.6
}
.sp-service-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
  display: flex
}
.sp-service-head strong {
  font-variant-numeric: tabular-nums;
  font-size: 16px
}
.sp-hint-row {
  justify-content: space-between;
  gap: 16px;
  display: flex
}
.sp-count {
  font-variant-numeric: tabular-nums;
  flex: none
}
.sp-short {
  max-width: 240px
}
.sp-coords {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  align-items: end;
  gap: 12px 20px;
  display: grid
}
.sp-toggles {
  border-top: 1px solid var(--border);
  gap: 10px;
  padding-top: 18px;
  display: grid
}
.sp-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  transition: border-color .15s,background-color .15s;
  display: flex
}
.sp-toggle:hover {
  border-color: var(--border-strong)
}
.sp-toggle:has(input:checked) {
  border-color: var(--accent-weak-border);
  background: var(--accent-weak)
}
.sp-toggle:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.sp-toggle:has(input:disabled) {
  cursor: default
}
.sp-toggle input {
  margin-top: 2px
}
.sp-toggle-text {
  gap: 3px;
  min-width: 0;
  display: grid
}
.sp-toggle-text strong {
  font-size: 14px;
  font-weight: 600
}
.sp-logo {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px 20px;
  display: grid
}
.store-logo-swatch {
  gap: 8px;
  min-width: 0;
  margin: 0;
  display: grid
}
.store-logo-swatch figcaption {
  color: var(--text-muted);
  font-size: 12.5px
}
.store-logo-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  place-items: center;
  height: 150px;
  padding: 16px;
  font-size: 13px;
  display: grid
}
.store-logo-swatch.is-dark .store-logo-frame {
  color: #8a8a8a;
  background: #000
}
.store-logo-swatch.is-paper .store-logo-frame {
  color: #8a8a8a;
  background: #fff
}
.store-logo-frame img {
  object-fit: contain;
  max-width: 100%;
  max-height: 104px;
  display: block
}
.store-logo-badge {
  max-width: 100%;
  display: inline-flex
}
.store-logo-badge.is-light {
  background: #141414;
  border-radius: 8px;
  padding: 8px 14px
}
.store-logo-badge.is-light img {
  max-height: 84px
}
.store-logo-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex
}
.sp-card-foot {
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
  padding-top: 16px;
  display: flex
}
.sp-card-foot > .meta {
  margin: 0
}
@media (width>=721px) {
  .sp-banners .banner-row {
    flex-wrap: wrap
  }
  .sp-banners .banner-info {
    flex: 220px
  }
  .sp-banners .banner-actions {
    margin-left: auto
  }
}
.sp-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  text-align: center;
  margin: 0;
  padding: 18px;
  font-size: 13.5px
}
.sp-banner-form {
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: 16px 20px;
  margin-top: 20px;
  padding-top: 18px;
  display: grid
}
.sp-banner-form h3 {
  grid-column: 1/-1;
  margin: 0;
  font-size: 14px;
  font-weight: 700
}
.sp-file {
  height: auto;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px
}
.sp-file::file-selector-button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  height: 30px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  margin-right: 12px;
  padding: 0 14px;
  font-weight: 550
}
.sp-file:hover::file-selector-button {
  border-color: var(--border-strong)
}
.sp-qr {
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 20px 24px;
  display: grid
}
.sp-qr .invite-qr-code {
  line-height: 0
}
.sp-qr .invite-qr-code svg {
  width: 196px
}
.sp-qr-side {
  gap: 10px;
  min-width: 0;
  display: grid
}
.sp-qr-side .invite-result {
  margin: 0
}
.sp-qr-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  display: flex
}
.sp-inline-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex
}
.sp-dirty {
  color: var(--warn);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex
}
.sp-dirty:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px
}
.sp-savebar {
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -16px #0000008c,var(--shadow-sm);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 8px 8px 8px 16px;
  display: flex;
  position: sticky;
  bottom: 16px
}
@media (width>=701px) {
  .sp-savebar {
    display: none
  }
}
@media (width<=700px) {
  .toolbar-actions .sp-dirty {
    display: none
  }
  .sp-qr-side .invite-result input {
    flex: none
  }
}
@container store-profile (width<=820px) {
  .sp-section {
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
    padding: 24px 0
  }
  .sp-intro .meta {
    max-inline-size: 68ch
  }
}
@container store-profile (width<=560px) {
  .sp-card {
    padding: 16px
  }
  .sp-banner-form,
  .sp-fields,
  .sp-logo {
    grid-template-columns: minmax(0,1fr)
  }
  .sp-coords {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr)
  }
  .sp-coords > .button {
    grid-column: 1/-1
  }
  .sp-qr {
    grid-template-columns: minmax(0,1fr);
    justify-items: start
  }
  .sp-short {
    max-width: none
  }
  .sp-savebar {
    bottom: 10px
  }
}