:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   --primary: #eab308;
   --dark: #07001f;
   --text: #333;
   --muted: #6b7280;
   --bg: #eab308;
   --card: #ffffff;
   --border: #e5e7eb;
   --radius: 10px;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
    font-family: var(--bs-font-sans-serif);
   background: var(--bg);
   color: var(--text);
    -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .auth-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }
 
 .auth-card {
   width: 100%;
   max-width: 420px; /* Default mobile width */
   background: var(--card);
   padding: 2rem 1.5rem;
   border-radius: var(--radius);
   box-shadow: 0 15px 35px rgba(0,0,0,0.08);
   transition: max-width 0.3s ease;
 }
 
 .brand-logo {
   display: flex;
   justify-content: center;
   margin-bottom: 1rem;
 }
 
 .brand-logo img {
   height: 85px;
 }
 
 .auth-header {
   text-align: center;
   margin-bottom: 1.5rem;
 }
 
 .auth-header h1 {
   color: var(--dark);
   font-size: 1.8rem;
 }
 
 .auth-header p {
   color: var(--muted);
   font-size: 0.9rem;
 }
 
 /* Alert Styles */
 .alert {
   padding: 0.75rem;
   border-radius: 6px;
   margin-bottom: 1rem;
   font-size: 0.85rem;
   text-align: center;
 }
 .alert.error { background: #fee2e2; color: #991b1b; }
 .alert.success { background: #dcfce7; color: #166534; }
 
 /* Form Styles */
 .form-group {
   margin-bottom: 0.9rem;
   text-align: left;
 }
 
 .form-group label {
   display: block;
   font-size: 0.8rem;
   color: var(--muted);
   margin-bottom: 4px;
 }
 
 .form-group input {
   width: 100%;
   padding: 0.65rem;
   border-radius: 6px;
   border: 1px solid var(--border);
   color: var(--text);
 }
 
 .form-group input:focus {
   border-color: var(--primary);
   outline: none;
 }
 
 .primary-btn {
   width: 100%;
   padding: 0.7rem;
   margin-top: 1rem;
   font-weight: bold;
   background: var(--primary);
   border: none;
   border-radius: 6px;
   cursor: pointer;
   color: var(--dark);
   transition: background 0.2s ease;
 }
 
 .primary-btn:hover {
   background: #eab308;
 }
 
 /* Social Buttons General */
 .social-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0.6rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   text-decoration: none;
   margin-bottom: 0.5rem;
   color: var(--text);
   font-size: 0.9rem;
   transition: all 0.2s ease;
 }
 
 .social-btn img {
   width: 18px;
   height: 18px;
 }
 
 .social-btn:hover {
   background: #f3f4f6;
   border-color: var(--primary);
 }
 
 /* Footer Links */
 .auth-footer-link, .auth-footer-main {
   margin-top: 1.3rem;
   text-align: center;
   font-size: 0.85rem;
 }
 
 .auth-footer-link a, .auth-footer-main a {
   color: var(--primary);
   text-decoration: none;
   font-weight: 600;
 }
 
 .auth-footer-link a:hover, .auth-footer-main a:hover {
   text-decoration: underline;
 }
 
 /* --- MOBILE SPECIFIC (STACKED) --- */
 .side-divider { display: none; }
 
 .mobile-divider-text {
   display: flex;
   align-items: center;
   color: var(--text);
   font-size: 0.85rem;
   margin: 1.5rem 0 1rem;
 }
 
 .mobile-divider-text::before,
 .mobile-divider-text::after {
   content: "";
   flex: 1;
   border-bottom: 1px solid var(--border);
 }
 
 .mobile-divider-text:not(:empty)::before { margin-right: 1rem; }
 .mobile-divider-text:not(:empty)::after { margin-left: 1rem; }
 
 
 /* --- DESKTOP SPECIFIC (SIDE-BY-SIDE) --- */
 @media (min-width: 800px) {
   .auth-card {
     max-width: 750px; /* Expands the card */
     padding: 3rem;
   }
 
   .auth-content-container {
     display: flex;
     align-items: stretch;
     gap: 2.5rem;
     margin-top: 2rem;
   }
 
   .login-form, .social-auth {
     flex: 1;
   }
 
   /* Hide the horizontal mobile line */
   .mobile-divider-text { display: none; }
 
   /* Vertical Divider */
   .side-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     width: 1px;
     background: var(--border);
   }
 
   .side-divider span {
     position: absolute;
     background: var(--card);
     padding: 10px 0;
     color: var(--muted);
     font-size: 0.7rem;
     font-weight: bold;
   }
 
   .social-buttons-list {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
   }
 
   .social-btn {
     margin-bottom: 0.8rem;
   }
 }
 
 /* Recovery Specific Helpers */
 .mr-1 {
   margin-right: 6px;
 }
 
 .auth-footer p {
   margin-bottom: 5px;
 }
 
 /* Ensure the FontAwesome icons in labels look consistent with your muted theme */
 .form-group label i {
   color: var(--muted);
   font-size: 0.85rem;
 }
 
 /* NOTE: Since your Recovery HTML does NOT use the .auth-content-container wrapper, 
    it will automatically remain a single centered column on both mobile and desktop. 
    This is standard UI design for "Forgot Password" pages.
 */
 
 @media (min-width: 800px) {
   /* This prevents the recovery card from getting too wide like the login card */
   /* We only want it to stay narrow (420px) because there is no side-content */
   .auth-page:has(.primary-btn i.fa-paper-plane) .auth-card {
     max-width: 450px;
   }
 }
 
 /* Password Toggle Styling */
 .password-container {
   position: relative;
   width: 100%;
 }
 
 #password-field {
   width: 100%;
   padding-right: 40px;
 }
 
 #togglePassword {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   color: #7a797e;
   z-index: 2;
 }
 
 #togglePassword:hover {
   color: #5887ef;
 }