[data-screen="waitlist"] [hidden] { display: none !important; }
[data-screen="waitlist"] .wl-page { position: relative; max-width: 560px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-8); }
[data-screen="waitlist"] .wl-head { display: flex; flex-direction: column; gap: 12px; padding-top: var(--sp-3); }
[data-screen="waitlist"] .wl-title { margin: 0; font-size: 46px; line-height: 48px; font-weight: 800; letter-spacing: -0.035em; color: var(--tx-1); overflow-wrap: anywhere; }
[data-screen="waitlist"] .wl-title span { display: block; }
[data-screen="waitlist"] .wl-lead { margin: 0; font-size: 20px; line-height: 28px; color: var(--tx-2); text-wrap: pretty; }
[data-screen="waitlist"] .wl-art { position: relative; height: 240px; margin: var(--sp-4) calc(-1 * var(--sp-4)) 0; overflow: hidden; background:
  radial-gradient(ellipse 70% 55% at 62% 58%, rgba(255, 190, 60, 0.2), transparent 70%),
  radial-gradient(ellipse 45% 40% at 14% 80%, rgba(255, 170, 40, 0.13), transparent 70%),
  linear-gradient(160deg, #1a1712 0%, #0d1013 55%, var(--bg) 100%); }
[data-screen="waitlist"] .wl-art::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(115deg, transparent 0 38%, rgba(255, 212, 59, 0.07) 38% 39%, transparent 39% 100%),
  linear-gradient(115deg, transparent 0 56%, rgba(255, 212, 59, 0.05) 56% 57.5%, transparent 57.5% 100%); }
[data-screen="waitlist"] .wl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 30%, transparent 62%, var(--bg) 100%); }
[data-screen="waitlist"] .wl-art-market { background: url("/assets/ui/img/soon-market.webp") center / cover no-repeat, #0d1013; }
[data-screen="waitlist"] .wl-art-market::before { display: none; }
[data-screen="waitlist"] .wl-art-club { height: 190px; background: url("/assets/ui/img/soon-club.webp") center / cover no-repeat, #0d1013; }
[data-screen="waitlist"] .wl-art-club::before { display: none; }
[data-screen="waitlist"] .wl-art-studio { background:
  radial-gradient(ellipse 60% 50% at 50% 55%, rgba(255, 212, 59, 0.14), transparent 70%),
  linear-gradient(160deg, #15181c 0%, #0d1013 60%, var(--bg) 100%); }
[data-screen="waitlist"] .wl-soon { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: var(--sp-3); }
[data-screen="waitlist"] .wl-clock { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s2); border: 1px solid var(--bd-3); color: var(--tx-1); }
[data-screen="waitlist"] .wl-clock .i { width: 26px; height: 26px; }
[data-screen="waitlist"] .wl-soon-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-screen="waitlist"] .wl-soon-text h2 { margin: 0; font-size: 19px; line-height: 25px; font-weight: 700; color: var(--tx-1); }
[data-screen="waitlist"] .wl-soon-text p { margin: 0; font-size: 16px; line-height: 23px; color: var(--tx-2); }
[data-screen="waitlist"] .wl-rows { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
[data-screen="waitlist"] .wl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 8px 12px 8px 14px; background: var(--s1); border: 1px solid var(--bd-2); border-radius: var(--r-lg); }
[data-screen="waitlist"] .wl-row-ico { display: flex; align-items: center; justify-content: center; color: var(--tx-1); }
[data-screen="waitlist"] .wl-row-ico .i { --i-size: 28px; }
[data-screen="waitlist"] .wl-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-screen="waitlist"] .wl-row-text b { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--tx-1); overflow-wrap: anywhere; }
[data-screen="waitlist"] .wl-row-text span { font-size: 12.5px; line-height: 17px; color: var(--tx-2); overflow-wrap: anywhere; }
[data-screen="waitlist"] .wl-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-md); background: var(--s3); color: var(--tx-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
[data-screen="waitlist"] .wl-acts { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-5); }
[data-screen="waitlist"] .wl-rows + .wl-acts { margin-top: var(--sp-4); }
[data-screen="waitlist"] .wl-btn { position: relative; justify-content: flex-start; gap: 16px; width: 100%; height: 56px; padding: 0 52px 0 20px; font-size: 18px; font-weight: 700; border-radius: var(--r-md); }
[data-screen="waitlist"] .wl-btn .i { --i-size: 26px; }
[data-screen="waitlist"] .wl-btn .wl-go { --i-size: 20px; position: absolute; right: 18px; top: 50%; margin-top: -10px; }
[data-screen="waitlist"] .wl-btn-alt { background: transparent; border: 1px solid var(--bd-4); color: var(--tx-1); }
[data-screen="waitlist"] .wl-state { display: flex; align-items: center; justify-content: flex-start; gap: 14px; height: 56px; padding: 0 20px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-sub); color: var(--ok); font-size: 18px; font-weight: 700; }
[data-screen="waitlist"] .wl-state .i { --i-size: 24px; }
[data-screen="waitlist"] .wl-leave { align-self: center; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--tx-2); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-screen="waitlist"] .wl-msg { margin: 0; text-align: center; font-size: 13.5px; line-height: 19px; color: var(--ok); }
[data-screen="waitlist"] .wl-msg:empty { display: none; }
[data-screen="waitlist"] .wl-msg.is-bad { color: var(--bad); }
[data-screen="waitlist"] .wl-auth { display: flex; flex-direction: column; gap: 10px; }
[data-screen="waitlist"] .wl-auth .btn { justify-content: center; height: 48px; }
[data-screen="waitlist"] .wl-fine { margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: var(--tx-3); text-align: center; }
@container app (max-width: 380px) {
  [data-screen="waitlist"] .wl-title { font-size: 40px; line-height: 43px; }
  [data-screen="waitlist"] .wl-lead { font-size: 18px; line-height: 26px; }
  [data-screen="waitlist"] .wl-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding-left: 12px; }
  [data-screen="waitlist"] .wl-chip { padding: 0 10px; font-size: 13.5px; }
}
@container app (min-width: 761px) {
  [data-screen="waitlist"] .wl-page { padding-top: var(--sp-4); }
  [data-screen="waitlist"] .wl-art { margin-inline: 0; border-radius: var(--r-lg); }
}
