.join-dialog{max-height:calc(100dvh - 32px);overflow-y:auto;padding:30px;scrollbar-width:thin}
.join-dialog h1{margin-top:4px}
.pair-tabs{display:flex;gap:4px;border-radius:11px;background:#efe7db;padding:4px;margin:22px 0 18px}
.pair-tabs button{flex:1;border-radius:8px;background:transparent;color:#9e8b70;font-size:11px;padding:11px 7px;min-height:40px}
.pair-tabs button[aria-pressed=true]{background:#fffdf8;color:#795b3c;box-shadow:0 2px 8px #83603b0b}
.pair-generate{padding:15px;border:1px solid #eadac6;border-radius:14px;background:#f7f0e5}
.pair-generate .primary-button{width:100%;margin:0;background:#e5a06a}
.pair-code{display:block;margin:17px 0 9px;font:600 27px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:3px;color:#a96735;user-select:all}
.pair-code[hidden],.pair-copy[hidden],#pair-share-panel[hidden],#pair-enter-panel[hidden]{display:none}
.join-dialog .pair-help{font-size:10px;line-height:1.6;color:#9a7957;margin:10px 0 0;min-height:16px}
.pair-copy{font-size:10px;color:#aa784b;background:none;text-decoration:underline;text-underline-offset:3px;padding:8px 13px;min-height:36px}
.join-dialog .pair-divider{margin:20px 0 0;font-size:9px;letter-spacing:1px;color:#b3a186;text-transform:uppercase}
.join-dialog .qr{width:150px;min-height:150px;margin:16px auto;padding:5px}
.join-dialog .qr svg{width:140px;height:140px}
.join-dialog .fine-print{margin-top:14px}
.join-dialog .pair-scan-button{display:inline-flex;min-height:40px;margin-bottom:14px;padding-inline:15px}
.join-dialog #pair-scan-feedback{margin:0 0 14px;color:#9f5523}
.join-dialog #pair-scan-feedback:empty{display:none}
.people-heading .people-pair-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
.people-pair-actions .people-pair-button{width:36px;height:36px;color:#9f5523;background:#f9e7d3}
.people-pair-actions .people-pair-button:hover{color:#783b13;background:#f6d8b8}
.people-pair-actions .people-pair-button svg{width:16px;height:16px}
.join-dialog .pair-instructions{font-size:12px;line-height:1.8;text-align:left;margin:22px 0;color:#9b866a}
#pair-form{display:grid;gap:12px;text-align:left}
#pair-form label{font-size:11px;color:#a18667}
#pair-input{width:100%;min-width:0;border:1px solid #dfc8ac;border-radius:10px;background:#fffdf7;padding:15px 10px;color:#8b5e34;text-align:center;font:500 24px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:2px;text-transform:uppercase}
#pair-input::placeholder{color:#d1bda5}
#pair-form .primary-button{width:100%;min-height:44px}
#pair-message{overflow-wrap:anywhere}
.about-connections{list-style:none;padding:0;margin:18px 0;display:grid;gap:15px}
.about-connections strong{display:block;color:#977346;font-size:12px;font-weight:600;margin-bottom:4px}
.about-connections span{display:block;font-size:11px;line-height:1.7;color:#a08e74}
.cloud-light{position:absolute;inset:40% 3% 3%;z-index:0;border-radius:50%;background:radial-gradient(ellipse at 50% 65%,#ffb35c35,transparent 66%);filter:blur(16px);animation:kloud-light 5s ease-in-out infinite;pointer-events:none}
.cloud{filter:drop-shadow(0 16px 25px #ad6a2310) drop-shadow(0 5px 9px #ffac4c21)}
.cloud-sparks{position:absolute;inset:0;z-index:3;pointer-events:none;animation:cloud-float 7s ease-in-out infinite}
.cloud-sparks>i{position:absolute;left:var(--x);top:var(--y);width:3px;height:6px;border-radius:2px;background:#ffad42;box-shadow:0 0 5px #ff932c,0 0 12px #ffad4d77;opacity:0;animation:kloud-spark 4.5s ease-out infinite;animation-delay:var(--delay)}
.cloud-sparks>i:nth-child(even){height:3px;width:3px;background:#ffc577}
.cloud-zap{position:absolute;width:25px;height:32px;fill:none;stroke:#ef9b3c;stroke-width:1.5;filter:drop-shadow(0 0 4px #ffa63f);opacity:0;animation:kloud-zap 7s linear infinite}
.cloud-zap-left{left:8%;top:66%;rotate:-8deg;animation-delay:-1.2s}
.cloud-zap-right{right:5%;top:61%;rotate:8deg;animation-delay:-4.7s}
@keyframes kloud-light{0%,100%{opacity:.45;scale:.97}50%{opacity:.85;scale:1.04}}
@keyframes kloud-spark{0%,18%,100%{opacity:0;transform:translate(0,0) scale(.3)}24%{opacity:.85;transform:translate(2px,-2px) scale(1)}60%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1)}}
@keyframes kloud-zap{0%,58%,65%,100%{opacity:0}60%,62%{opacity:.55}61%,64%{opacity:.15}}
@media(max-width:700px){.join-dialog{padding:28px 22px}.pair-code{font-size:25px;letter-spacing:2px}.cloud-sparks>i{width:2px;height:4px}.cloud-zap{width:18px;height:24px}}
@media(prefers-reduced-motion:reduce){.cloud-sparks{display:none}.cloud-light{animation:none;opacity:.5}}