body {
     font-family: 'Segoe UI', sans-serif;
     background: #f5f5f5;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }

 .container {
     background: white;
     padding: 2rem;
     border-radius: 12px;
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
     width: 90%;
     max-width: 400px;
 }

 h2 {
     text-align: center;
     margin-bottom: 1rem;
 }

 .role-selector {
     display: flex;
     justify-content: space-between;
     margin-bottom: 1rem;
 }

 .role-button {
     flex: 1;
     margin: 0 0.25rem;
     padding: 0.7rem 0.5rem;
     border: 2px solid #ccc;
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     text-align: center;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .role-button .icon {
     font-size: 26px;
     margin-bottom: 6px;
     transition: transform 0.3s ease;
 }

 .role-button .text {
     font-size: 14px;
     font-weight: 500;
 }

 .role-button.professional .icon {
     color: #17a2b8;
 }

 .role-button.patient .icon {
     color: #dc3545;
 }

 .role-button.receptionist .icon {
     color: #28a745;
 }

 .role-button.selected {
     border-color: #007bff;
     background: #e6f0ff;
     transform: scale(1.05);
 }

 .role-button.selected .icon {
     transform: scale(1.2);
 }

 form input {
     width: 100%;
     padding: 0.6rem;
     margin: 0.5rem 0;
     border-radius: 8px;
     border: 1px solid #ccc;
 }

 .submit-btn {
     width: 100%;
     background: #007bff;
     color: white;
     border: none;
     padding: 0.7rem;
     border-radius: 8px;
     font-weight: bold;
     cursor: pointer;
     margin-top: 1rem;
 }

 .submit-btn:hover {
     background: #0056b3;
 }

 /* Spinner */
 .spinner-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(255, 255, 255, 0.7);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 .spinner {
     width: 50px;
     height: 50px;
     border: 6px solid #ccc;
     border-top: 6px solid #007bff;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .back-to-login {
     font-size: 14px;
     text-align: center;
     margin-top: 20px;
 }

 .back-to-login a {
     color: #007bff;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .back-to-login a:hover {
     color: #0056b3;
     text-decoration: underline;
 }