/* Signup popup + post-signup writing profile. Overrides the generic studio dialog size. */
dialog.btw-signup { width: min(460px, 92vw); max-height: 90vh; overflow: auto; padding: 32px; color: #f4f4f5; background: #1b1c20; border: 1px solid #414248; border-radius: 16px; box-shadow: 0 30px 100px #0009; }
dialog.btw-onboarding { width: min(640px, 94vw); }
dialog.btw-signup::backdrop { background: #000b; backdrop-filter: blur(6px); }
.btw-signup section, .btw-signup form { display: flex; flex-direction: column; gap: 10px; }
.btw-signup h2 { font: 500 26px/1.15 'Outfit', sans-serif; letter-spacing: -0.5px; margin: 6px 0 0; }
.signup-lead { font-size: 13px; line-height: 1.6; color: #a8a9b1; margin: 0 0 8px; }
.signup-lead strong { color: #f4f4f5; }
.signup-badge { align-self: flex-start; font-size: 11px; font-weight: 700; color: #f87125; background: rgba(248, 113, 37, 0.12); padding: 4px 10px; border-radius: 999px; }
.signup-badge.success { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.signup-close { position: absolute; top: 16px; right: 16px; border: 1px solid #3b3c41; background: transparent; color: inherit; border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.btw-signup label { font-size: 12px; font-weight: 600; color: #d4d4d8; }
.btw-signup label small { font-weight: 400; color: #8e9098; }
.btw-signup input[type="tel"], .btw-signup input[type="email"] { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px; color: #f4f4f5; background: #111215; border: 1px solid #38393f; border-radius: 9px; }
.btw-signup input:focus-visible { outline: 2px solid #f87125; outline-offset: 1px; border-color: transparent; }
.signup-primary { margin-top: 6px; padding: 13px 18px; border: 0; border-radius: 9px; background: #f87125; color: #151515; font: 700 14px Inter, sans-serif; cursor: pointer; }
.signup-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.signup-link { align-self: center; border: 0; background: none; color: #a8a9b1; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 6px; }
.signup-status { min-height: 18px; margin: 0; font-size: 12px; color: #a8a9b1; }
.signup-status.error { color: #f87171; }
.signup-code { display: flex; gap: 8px; align-items: stretch; }
.signup-code code { flex: 1; min-width: 0; padding: 12px; font: 600 13px/1.4 ui-monospace, Menlo, monospace; color: #fef3c7; background: #111215; border: 1px dashed #f87125; border-radius: 9px; overflow-wrap: anywhere; user-select: all; }
.signup-code button { border: 1px solid #3b3c41; background: #26272d; color: #fff; border-radius: 9px; padding: 0 14px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.signup-check { display: flex; gap: 8px; align-items: center; font-weight: 500 !important; cursor: pointer; }
.signup-check input { accent-color: #f87125; width: 16px; height: 16px; }
.signup-inline-cta { width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed rgba(248, 113, 37, 0.6); border-radius: 7px; background: rgba(248, 113, 37, 0.08); color: #f87125; font-size: 12px; font-weight: 600; cursor: pointer; }

.onboarding-question { border: 0; padding: 0; margin: 10px 0 4px; }
.onboarding-question legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.onboarding-question legend small { font-weight: 400; color: #8e9098; }
.onboarding-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.onboarding-options label { position: relative; cursor: pointer; }
.onboarding-options input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-options span { display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 12px; font-weight: 500; line-height: 1.35; color: #d4d4d8; background: #24252a; border: 1px solid #38393e; border-radius: 9px; transition: border-color .15s, background .15s; }
.onboarding-options span small { font-weight: 400; color: #8e9098; }
.onboarding-options label:hover span { border-color: #5a5b62; }
.onboarding-options input:checked + span { border-color: #f87125; background: rgba(248, 113, 37, 0.1); color: #fff; }
.onboarding-options input:focus-visible + span { outline: 2px solid #f87125; outline-offset: 2px; }
.onboarding-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.onboarding-actions .signup-primary { margin: 0; }

@media (max-width: 520px) {
  dialog.btw-signup { padding: 22px 18px; }
  .btw-signup h2 { font-size: 22px; }
  .onboarding-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .onboarding-options span { transition: none; } }