:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f8fafc;color:#1f2937}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:16px}.card{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:32px 28px;box-shadow:0 10px 30px #0f172a14;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.spinner{width:36px;height:36px;border-radius:50%;border:3px solid #dbeafe;border-top-color:#2563eb;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.title{font-size:20px;font-weight:600;margin:0}.subtitle{font-size:14px;color:#6b7280;margin:0;max-width:360px}.join-code-input{width:100%;font-size:22px;letter-spacing:4px;text-align:center;text-transform:uppercase;padding:12px 14px;border-radius:10px;border:1px solid #d1d5db;outline:none}.join-code-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.primary-button{width:100%;padding:12px 16px;border-radius:10px;border:none;background:#2563eb;color:#fff;font-size:15px;font-weight:600;cursor:pointer}.primary-button:disabled{background:#93c5fd;cursor:not-allowed}.error-box{width:100%;background:#fef2f2;color:#b91c1c;border-radius:10px;padding:10px 14px;font-size:14px}.manual-link{color:#2563eb;font-size:14px;text-decoration:underline}