.app-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0a0a0f,#1a1a2e);color:#fff}.loading{text-align:center}.spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid rgba(255,255,255,.1);border-top-color:#0f8;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{font-size:18px;color:#0f8}.error{text-align:center;max-width:400px}.error h1{font-size:48px;margin-bottom:20px}.error p{font-size:16px;color:#f44;margin-bottom:30px;line-height:1.6}.btn-retry{background:#0f8;color:#0a0a0f;border:none;padding:15px 30px;font-size:16px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s}.btn-retry:hover{background:#00cc6a;transform:translateY(-2px)}.welcome{text-align:center;max-width:500px;width:100%}.welcome h1{font-size:32px;margin-bottom:30px;background:linear-gradient(135deg,#0f8,#0cf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.user-info{background:#ffffff0d;border:1px solid rgba(0,255,136,.2);border-radius:12px;padding:20px;margin-bottom:40px;text-align:left}.user-info p{margin:10px 0;font-size:14px;color:#ccc}.user-info strong{color:#0f8;margin-right:8px}.mode-selection h2{font-size:20px;margin-bottom:20px;color:#fff}.btn-mode{width:100%;background:#ffffff0d;border:2px solid rgba(0,255,136,.3);color:#fff;padding:20px;margin:15px 0;font-size:18px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:8px}.btn-mode:hover{background:#00ff881a;border-color:#0f8;transform:translateY(-2px)}.mode-description{font-size:14px;font-weight:400;color:#888}.btn-parent{border-color:#00ccff4d}.btn-parent:hover{background:#00ccff1a;border-color:#0cf}.btn-child{border-color:#ff88004d}.btn-child:hover{background:#ff88001a;border-color:#f80}.form-container{max-width:500px;width:100%}.btn-back{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;font-size:14px;border-radius:8px;cursor:pointer;margin-bottom:20px;transition:all .3s}.btn-back:hover{background:#ffffff1a;border-color:#0f8}.form-container h1{font-size:28px;margin-bottom:30px;text-align:center;background:linear-gradient(135deg,#0f8,#0cf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.form-group{margin-bottom:25px}.form-group label{display:block;margin-bottom:8px;font-size:14px;color:#0f8;font-weight:700}.form-group input{width:100%;background:#ffffff0d;border:1px solid rgba(0,255,136,.3);color:#fff;padding:15px;font-size:16px;border-radius:8px;transition:all .3s}.form-group input:focus{outline:none;border-color:#0f8;background:#00ff880d}.form-group input::-moz-placeholder{color:#666}.form-group input::placeholder{color:#666}.error-message{background:#ff44441a;border:1px solid #ff4444;color:#f44;padding:15px;border-radius:8px;margin-bottom:20px;font-size:14px}.btn-submit{width:100%;background:linear-gradient(135deg,#0f8,#00cc6a);color:#0a0a0f;border:none;padding:18px;font-size:18px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #00ff884d}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.success-container{max-width:500px;width:100%;text-align:center}.success-container h1{font-size:32px;margin-bottom:30px;color:#0f8}.family-info{background:#ffffff0d;border:1px solid rgba(0,255,136,.2);border-radius:12px;padding:20px;margin-bottom:30px;text-align:left}.family-info p{margin:10px 0;font-size:16px;color:#ccc}.family-info strong{color:#0f8;margin-right:8px}.invite-code-box{background:#00ff880d;border:2px solid #00ff88;border-radius:12px;padding:25px;margin-bottom:30px}.invite-code-box h2{font-size:18px;margin-bottom:15px;color:#0f8}.invite-code{background:#ffffff1a;border:1px solid rgba(0,255,136,.3);padding:20px;font-size:32px;font-weight:700;letter-spacing:4px;border-radius:8px;margin-bottom:15px;color:#0f8;font-family:monospace}.invite-hint{font-size:14px;color:#888;margin-bottom:15px}.btn-copy{width:100%;background:#00ff881a;border:2px solid #00ff88;color:#0f8;padding:15px;font-size:16px;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s}.btn-copy:hover{background:#0f83;transform:translateY(-2px)}.btn-dashboard{width:100%;background:linear-gradient(135deg,#0cf,#09c);color:#fff;border:none;padding:18px;font-size:18px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s}.btn-dashboard:hover{transform:translateY(-2px);box-shadow:0 10px 30px #00ccff4d}