:root { --danger:#b8402f; --danger-bg:#f8e3dd; --success:#1f8f5c; --card-bg:#fffdf9; }
.join-body { min-height:100vh; display:flex; flex-direction:column }
.auth-header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--page); border-bottom:1px solid var(--line) }
.auth-header-cta { margin:0; font-size:12px; font-weight:700 }
.auth-header-cta a { text-decoration:underline; text-underline-offset:2px }
.join-shell { flex:1; display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; padding:56px var(--page) 80px; max-width:1180px; margin:0 auto }
.join-intro { position:sticky; top:96px }
.join-intro .eyebrow { margin:0; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }
.join-intro h1 { margin:10px 0 0; font-size:clamp(32px,3.6vw,46px); line-height:1.02; letter-spacing:-.04em; font-weight:1000 }
.join-lede { margin:18px 0 0; font-size:16px; line-height:1.35; letter-spacing:-.01em; max-width:44ch }
.join-note { margin:14px 0 0; font-size:13px; line-height:1.4; color:var(--muted); max-width:44ch }
.join-form-card,.join-verify { background:var(--card-bg); border:1px solid var(--line); border-radius:calc(var(--radius) + 6px); padding:32px }
.join-form-card h2,.join-verify h2 { margin:0; font-size:22px; letter-spacing:-.03em }
.join-form-sub { margin:6px 0 22px; font-size:13px; color:var(--muted) }
.form-banner { margin:0 0 18px; padding:12px 14px; border-radius:8px; font-size:13px; font-weight:600 }
.form-banner-error { background:var(--danger-bg); color:var(--danger) }
.form-banner-info { background:#eef2ff; color:#334; margin-top:14px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-field { margin-top:14px; display:flex; flex-direction:column; gap:6px }
.form-field label { font-size:12px; font-weight:700 }
.form-field input[type="text"],.form-field input[type="email"],.form-field input[type="password"] { width:100%; padding:12px 14px; border:1px solid #c7c3ba; border-radius:8px; background:#faf8f3; color:var(--ink); outline:none; font-size:14px }
.form-field input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,25,24,.08) }
.form-field input[aria-invalid="true"] { border-color:var(--danger) }
.field-error { margin:0; min-height:15px; font-size:12px; color:var(--danger); font-weight:600 }
.field-help { margin:0; font-size:11px; color:var(--muted) }
.password-wrap { position:relative }
.password-wrap input { padding-right:64px }
.password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer; font-size:11px; font-weight:800; padding:6px 8px; text-transform:uppercase; letter-spacing:.03em }
.password-strength { margin-top:8px; height:4px; border-radius:99px; background:var(--line); overflow:hidden }
.password-strength-bar { display:block; height:100%; width:0; border-radius:99px; background:var(--muted); transition:width .2s ease }
.password-strength-bar[data-level="weak"] { background:var(--danger) }
.password-strength-bar[data-level="fair"] { background:var(--orange) }
.password-strength-bar[data-level="good"] { background:#deb950 }
.password-strength-bar[data-level="strong"] { background:var(--success) }
.form-field-checkbox { flex-direction:row; align-items:flex-start; gap:10px; margin-top:20px }
.form-field-checkbox input { margin-top:3px }
.form-field-checkbox label { font-size:12px; font-weight:500; line-height:1.35 }
.form-field-checkbox label a { text-decoration:underline; text-underline-offset:2px }
.join-submit { width:100%; justify-content:center; margin-top:22px; padding:14px 18px; font-size:13px }
.join-submit:disabled { opacity:.75; cursor:progress }
.submit-spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line) }
.button-google { width:100%; justify-content:center; gap:10px; border:1px solid #c7c3ba; background:#fff; padding:12px 18px; font-size:13px; font-weight:700; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; transition:transform .2s }
.button-google:hover { transform:translateY(-2px) }
.google-note { margin:10px 0 0; font-size:12px; color:var(--muted) }
.auth-switch { margin:20px 0 0; text-align:center; font-size:12px; font-weight:600 }
.auth-switch a { text-decoration:underline; text-underline-offset:2px }
.join-verify { text-align:center }
.join-verify p { margin:12px 0 0; font-size:14px; line-height:1.4 }
.verify-security-note { color:var(--muted); font-size:12px }
.verify-actions { display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap }
.button-link { border:0; background:none; cursor:pointer; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:2px }
.auth-footer { display:flex; align-items:center; justify-content:space-between; padding:22px var(--page); border-top:1px solid var(--line); font-size:11px }
.auth-footer nav { display:flex; gap:16px; color:#595852 }
@media (max-width:820px) {
  .join-shell { grid-template-columns:1fr; gap:34px; padding:32px var(--page) 56px }
  .join-intro { position:static }
  .join-note { display:none }
  .join-form-card,.join-verify { padding:24px }
  .form-row { grid-template-columns:1fr }
  .auth-header-cta span { display:none }
}