@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

    /* ============================================
       LOGIN SYSTEM STYLES - COMMUNITY HUB
       ============================================ */
    .login-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: -webkit-fill-available;
      background: #000;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: hidden;
      box-sizing: border-box;
    }
    
    .login-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #111827;
      z-index: -1;
    }
    
    .login-overlay.hidden {
      display: none !important;
    }
    
    /* When login is showing, prevent body scroll and HIDE all app content */
    html.login-active,
    body.login-active {
      overflow: hidden !important;
      height: 100vh !important;
      height: 100dvh !important;
      position: fixed !important;
      width: 100% !important;
      top: 0 !important;
      left: 0 !important;
      background: #111827 !important;
    }
    
    /* Hide ALL app content when login is active - be very aggressive */
    body.login-active > *:not(.login-overlay):not(#claimPhoneModal):not(#sharedLoginMount) {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Ensure sharedLoginMount is always visible when login is active */
    body.login-active #sharedLoginMount {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      z-index: 999999 !important;
      pointer-events: auto !important;
    }
    
    /* Ensure claim phone modal can be shown during login - don't use !important on display */
    #claimPhoneModal {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    
    body.login-active .app-shell {
      display: none !important;
    }
    
    /* Ensure login overlay is always visible when not hidden */
    body.login-active .login-overlay,
    .login-overlay:not(.hidden) {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .login-container {
      width: 100%;
      max-width: 440px;
      background: #1f2937;
      border: 1px solid #374151;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      box-sizing: border-box;
    }
    
    .login-header {
      padding: 32px 32px 24px;
      text-align: center;
      background: transparent;
      border-bottom: none;
      box-sizing: border-box;
    }
    
    .login-logo {
      width: 180px;
      height: 80px;
      margin: 0 auto 16px;
      position: relative;
    }
    .dio-mark { width: 100%; height: 100%; }
    @keyframes dioRoute {
      0% { offset-distance: 0%; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }
    .dio-dot {
      offset-path: path('M 30 32 C 45 18, 65 14, 80 14 C 95 14, 105 20, 112 30');
      animation: dioRoute 3.5s ease-in-out infinite;
      offset-rotate: 0deg;
    }
    @keyframes dioGlow {
      0%, 100% { stroke-opacity: 0.4; }
      50% { stroke-opacity: 0.85; }
    }
    .dio-route-glow { animation: dioGlow 3.5s ease-in-out infinite; }
    @keyframes dioCrossPulse {
      0%, 100% { filter: drop-shadow(0 0 3px rgba(96,165,250,0.2)); }
      50% { filter: drop-shadow(0 0 8px rgba(96,165,250,0.5)); }
    }
    .dio-cross { animation: dioCrossPulse 3s ease-in-out infinite; }
    @keyframes dioHomePulse {
      0%, 100% { filter: drop-shadow(0 0 3px rgba(74,222,128,0.2)); }
      50% { filter: drop-shadow(0 0 8px rgba(74,222,128,0.45)); }
    }
    .dio-home { animation: dioHomePulse 3s ease-in-out infinite; animation-delay: 1.5s; }
    
    .login-title {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: #f8fafc;
      margin: 0 0 8px;
    }
    
    .login-powered-by {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      color: #64748b;
    }
    
    .login-powered-by .dio-inline-logo {
      height: 28px;
      width: auto;
    }
    
    .login-subtitle {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
    
    .login-body {
      padding: 28px 32px 32px;
      box-sizing: border-box;
    }
    
    .login-step {
      display: none;
    }
    
    .login-step.active {
      display: block;
      animation: loginFadeIn 0.3s ease;
    }
    
    @keyframes loginFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .login-field {
      margin-bottom: 20px;
    }
    
    .login-field label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 8px;
    }
    
    .login-field input {
      width: 100%;
      padding: 14px 16px;
      background: #374151 !important;
      border: 1px solid #4b5563;
      border-radius: 10px;
      color: #f3f4f6 !important;
      font-size: 15px;
      transition: all 0.2s;
      box-sizing: border-box;
      -webkit-appearance: none;
      color-scheme: dark;
    }

    .login-field input:focus {
      outline: none;
      border-color: #22d3ee;
      box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
    }
    
    .login-field input::placeholder {
      color: #475569;
    }
    
    .login-field input.error {
      border-color: #FA4616;
    }
    
    .login-field input.success {
      border-color: #22c55e;
    }
    
    .login-field .field-hint {
      font-size: 12px;
      color: #64748b;
      margin-top: 6px;
    }
    
    .login-field .field-error {
      font-size: 12px;
      color: #f87171;
      margin-top: 6px;
      display: none;
    }
    
    .login-field .field-error.show {
      display: block;
    }
    
    .login-btn {
      width: 100%;
      padding: 14px 24px;
      background: #0891b2;
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 8px;
    }

    .login-btn:hover:not(:disabled) {
      background: #0e7490;
      box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
    }
    
    .login-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .login-btn-secondary {
      background: transparent;
      border: 1px solid #334155;
      color: #94a3b8;
      margin-top: 12px;
    }
    
    .login-btn-secondary:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.05);
      border-color: #475569;
      box-shadow: none;
      transform: none;
    }
    
    .login-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
      color: #475569;
      font-size: 12px;
    }
    
    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #1e293b;
    }
    
    .login-progress {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    
    .login-progress-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #1e293b;
      transition: all 0.3s;
    }
    
    .login-progress-dot.active {
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    }
    
    .login-progress-dot.complete {
      background: #22c55e;
    }
    
    /* Verification Code Input */
    .code-inputs {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 24px 0;
    }
    
    .code-inputs input {
      width: 48px;
      height: 56px;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      color: #22c55e;
      background: #374151;
      border: 1px solid #4b5563;
      border-radius: 10px;
      transition: all 0.2s;
    }
    
    .code-inputs input:focus {
      outline: none;
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
    }
    
    /* Password Strength Meter */
    .password-strength {
      margin-top: 12px;
    }
    
    .password-strength-bar {
      height: 4px;
      background: #1e293b;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .password-strength-fill {
      height: 100%;
      width: 0%;
      transition: all 0.3s;
      border-radius: 2px;
    }
    
    .password-strength-fill.weak { width: 25%; background: #FA4616; }
    .password-strength-fill.fair { width: 50%; background: #f59e0b; }
    .password-strength-fill.good { width: 75%; background: #22c55e; }
    .password-strength-fill.strong { width: 100%; background: #22c55e; }
    
    .password-requirements {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      font-size: 11px;
      color: #64748b;
    }
    
    .password-requirements span {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .password-requirements span.met {
      color: #22c55e;
    }
    
    .password-requirements span::before {
      content: '○';
      font-size: 8px;
    }
    
    .password-requirements span.met::before {
      content: '✓';
      font-size: 10px;
    }
    
    /* Password Toggle */
    .password-wrapper {
      position: relative;
    }
    
    .password-wrapper input {
      padding-right: 48px;
    }
    
    .password-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      font-size: 18px;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .password-toggle:hover {
      color: #94a3b8;
    }
    
    /* Checkbox */
    .login-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 20px 0;
      cursor: pointer;
    }
    
    .login-checkbox input {
      width: 20px;
      height: 20px;
      accent-color: #22c55e;
      margin-top: 2px;
      flex-shrink: 0;
    }
    
    .login-checkbox span {
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.5;
    }
    
    .login-checkbox a {
      color: #22c55e;
      text-decoration: underline;
    }
    
    /* Info Box */
    .login-info {
      padding: 14px 16px;
      background: rgba(34, 197, 94, 0.08);
      border-radius: 10px;
      margin-bottom: 20px;
    }
    
    .login-info p {
      margin: 0;
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.5;
    }
    
    .login-info.warning {
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.2);
    }
    
    .login-info.warning p {
      color: #fbbf24;
    }
    
    .login-info.success {
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid rgba(34, 197, 94, 0.2);
    }
    
    .login-info.success p {
      color: #4ade80;
    }
    
    /* Resend Link */
    .resend-link {
      text-align: center;
      margin-top: 16px;
    }
    
    .resend-link button {
      background: none;
      border: none;
      color: #22c55e;
      font-size: 13px;
      cursor: pointer;
      text-decoration: underline;
    }
    
    .resend-link button:disabled {
      color: #475569;
      cursor: not-allowed;
      text-decoration: none;
    }
    
    /* Account Lockout */
    .lockout-warning {
      padding: 16px;
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 10px;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .lockout-warning p {
      margin: 0;
      color: #f87171;
      font-size: 13px;
    }
    
    /* Success Animation */
    .success-checkmark {
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      animation: scaleIn 0.4s ease;
    }
    
    @keyframes scaleIn {
      from { transform: scale(0); }
      to { transform: scale(1); }
    }
    
    /* Security Questions */
    .security-question {
      margin-bottom: 20px;
    }
    
    .security-question label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 8px;
    }
    
    .security-question select,
    .security-question input {
      width: 100%;
      padding: 12px 14px;
      background: #020617;
      border: 2px solid #1e293b;
      border-radius: 10px;
      color: #f8fafc;
      font-size: 14px;
      transition: all 0.2s;
      box-sizing: border-box;
    }
    
    .security-question select:focus,
    .security-question input:focus {
      outline: none;
      border-color: #22c55e;
    }
    
    /* Step indicator text */
    .step-indicator {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      margin-bottom: 20px;
    }
    
    /* ============================================
       LOGIN RESPONSIVE - TABLET
       ============================================ */
    @media screen and (max-width: 768px) {
      .login-overlay {
        padding: 16px;
      }
      
      .login-container {
        max-width: 100%;
      }
    }
    
    /* ============================================
       LOGIN RESPONSIVE - MOBILE PORTRAIT
       ============================================ */
    @media screen and (max-width: 480px) and (orientation: portrait) {
      html.login-active, 
      body.login-active {
        overflow: hidden !important;
        background: #111827 !important;
      }
      
      .login-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        height: -webkit-fill-available;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
        background: #000;
      }
      
      .login-overlay::before {
        background: #020617;
      }
      
      .login-container {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        height: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: -webkit-fill-available;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background: #020617;
      }
      
      .login-header {
        flex-shrink: 0;
        padding: 20px 16px 16px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
      }
      
      .login-logo {
        width: 150px;
        height: 66px;
        margin: 0 auto 12px;
      }
      
      .login-title {
        font-size: 20px;
        margin: 0 0 6px;
      }
      
      .login-powered-by {
        font-size: 10px;
        gap: 4px;
      }
      
      .login-powered-by .dio-inline-logo {
        height: 22px;
      }
      
      .login-body {
        flex: 1;
        padding: 16px;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
      }
      
      .login-step {
        width: 100%;
        box-sizing: border-box;
      }
      
      .login-field {
        width: 100%;
        margin-bottom: 14px;
        box-sizing: border-box;
      }
      
      .login-field label {
        font-size: 13px;
        margin-bottom: 6px;
      }
      
      .login-field input,
      .login-field select {
        width: 100%;
        padding: 12px 14px;
        font-size: 16px;
        border-radius: 8px;
        box-sizing: border-box;
      }
      
      .password-wrapper {
        position: relative;
        width: 100%;
      }
      
      .password-wrapper input {
        width: 100%;
        padding-right: 44px;
        box-sizing: border-box;
      }
      
      .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
      }
      
      .login-btn {
        width: 100%;
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 8px;
        margin-top: 6px;
        box-sizing: border-box;
      }
      
      .login-btn-secondary {
        padding: 12px 16px;
        margin-top: 10px;
      }
      
      .code-inputs {
        display: flex;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin: 16px 0;
        box-sizing: border-box;
      }
      
      .code-inputs input {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 48px;
        font-size: 20px;
        border-radius: 8px;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      
      .password-strength {
        margin-top: 10px;
      }
      
      .password-requirements {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        font-size: 11px;
      }
      
      .login-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 14px 0;
      }
      
      .login-checkbox input {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 2px;
      }
      
      .login-checkbox span {
        font-size: 12px;
        line-height: 1.4;
      }
      
      .login-info {
        padding: 12px 14px;
        margin-bottom: 14px;
        border-radius: 8px;
        box-sizing: border-box;
      }
      
      .login-info p {
        font-size: 12px;
        margin: 0;
        text-align: left;
        word-wrap: break-word;
      }
      
      .login-progress {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-bottom: 14px;
      }
      
      .login-progress-dot {
        width: 8px;
        height: 8px;
      }
      
      .step-indicator {
        font-size: 11px;
        margin-bottom: 12px;
        text-align: center;
      }
      
      .security-question {
        width: 100%;
        margin-bottom: 14px;
        box-sizing: border-box;
      }
      
      .security-question label {
        font-size: 12px;
        margin-bottom: 6px;
      }
      
      .security-question select,
      .security-question input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border-radius: 8px;
        box-sizing: border-box;
      }
      
      .security-question input {
        margin-top: 6px;
      }
      
      .success-checkmark {
        width: 60px;
        height: 60px;
        font-size: 30px;
        margin: 0 auto 16px;
      }
      
      .login-divider {
        margin: 16px 0;
        font-size: 12px;
      }
      
      .resend-link {
        margin-top: 14px;
        text-align: center;
      }
      
      .resend-link button {
        font-size: 13px;
      }
      
      .lockout-warning {
        padding: 12px;
        margin-bottom: 14px;
        border-radius: 8px;
      }
      
      .lockout-warning p {
        font-size: 13px;
      }
      
      .field-error,
      .field-hint {
        font-size: 11px;
      }
      
      #loginStep4 div[style*="max-height: 200px"] {
        max-height: 140px !important;
        font-size: 11px !important;
        padding: 12px !important;
      }
    }
    
    /* ============================================
       LOGIN RESPONSIVE - MOBILE LANDSCAPE
       ============================================ */
    @media screen and (max-width: 900px) and (orientation: landscape) {
      .login-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: #020617;
        display: block;
      }
      
      .login-container {
        width: 100%;
        max-width: 500px;
        min-height: auto;
        height: auto;
        margin: 20px auto;
        padding: 0;
        border: none;
        border-radius: 16px;
        box-shadow: none;
        display: block;
        overflow: visible;
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
      }
      
      .login-header {
        padding: 16px 20px 12px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
      }
      
      .login-logo {
        width: 130px;
        height: 56px;
        margin: 0;
        flex-shrink: 0;
      }
      
      .login-title {
        font-size: 18px;
        margin: 0;
      }
      
      .login-subtitle {
        font-size: 11px;
        margin: 0;
      }
      
      .login-body {
        padding: 16px 20px 20px;
        overflow: visible;
      }
      
      .login-progress {
        margin-bottom: 12px;
      }
      
      .login-field {
        margin-bottom: 12px;
      }
      
      .login-field label {
        font-size: 12px;
        margin-bottom: 4px;
      }
      
      .login-field input {
        padding: 10px 12px;
        font-size: 15px;
      }
      
      .login-btn {
        padding: 12px 16px;
        font-size: 14px;
      }
      
      .login-btn-secondary {
        padding: 10px 14px;
        margin-top: 8px;
      }
      
      .login-info {
        padding: 10px 12px;
        margin-bottom: 12px;
      }
      
      .login-info p {
        font-size: 11px;
      }
      
      .login-checkbox {
        margin: 10px 0;
      }
      
      .login-checkbox span {
        font-size: 11px;
      }
      
      .login-divider {
        margin: 14px 0;
      }
      
      .code-inputs {
        margin: 12px 0;
      }
      
      .code-inputs input {
        width: 36px;
        height: 42px;
        font-size: 18px;
      }
      
      .password-requirements {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        font-size: 10px;
      }
      
      .step-indicator {
        font-size: 10px;
        margin-bottom: 10px;
      }
      
      #loginStep4 div[style*="max-height: 200px"] {
        max-height: 100px !important;
        font-size: 10px !important;
      }
      
      .security-question {
        margin-bottom: 12px;
      }
      
      .security-question select,
      .security-question input {
        padding: 10px 12px;
        font-size: 15px;
      }
      
      .success-checkmark {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 12px;
      }
    }
    
    @media screen and (max-height: 400px) and (orientation: landscape) {
      .login-container {
        margin: 10px auto;
      }
      
      .login-header {
        padding: 12px 16px 8px;
      }
      
      .login-logo {
        width: 120px;
        height: 52px;
      }
      
      .login-title {
        font-size: 16px;
      }
      
      .login-body {
        padding: 12px 16px 16px;
      }
      
      .login-field {
        margin-bottom: 10px;
      }
      
      .login-field input {
        padding: 8px 10px;
      }
      
      .login-btn {
        padding: 10px 14px;
      }
    }

    @media screen and (max-width: 360px) {
      .login-header {
        padding: 16px 12px 12px;
      }
      
      .login-body {
        padding: 12px;
      }
      
      .login-title {
        font-size: 18px;
      }
      
      .login-logo {
        width: 140px;
        height: 60px;
      }
      
      .code-inputs {
        gap: 4px;
      }
      
      .code-inputs input {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 44px;
        font-size: 18px;
      }
      
      .login-field input,
      .security-question select,
      .security-question input {
        padding: 10px 12px;
      }
      
      .login-btn {
        padding: 12px 14px;
        font-size: 14px;
      }
    }
    
    /* ============================================
       LOGIN - 4K / PROJECTOR (3200px+)
       ============================================ */
    @media (min-width: 3200px) {
      .login-container {
        max-width: 700px;
        border-radius: 28px;
      }
      
      .login-header {
        padding: 48px 48px 36px;
      }
      
      .login-logo {
        width: 200px;
        height: 88px;
        margin-bottom: 24px;
      }
      
      .login-title {
        font-size: 36px;
      }
      
      .login-subtitle {
        font-size: 20px;
      }
      
      .login-body {
        padding: 40px 48px 48px;
      }
      
      .login-field {
        margin-bottom: 28px;
      }
      
      .login-field label {
        font-size: 18px;
        margin-bottom: 12px;
      }
      
      .login-field input {
        padding: 20px 24px;
        font-size: 20px;
        border-radius: 14px;
      }
      
      .login-btn {
        padding: 20px 36px;
        font-size: 20px;
        border-radius: 14px;
      }
      
      .login-btn-secondary {
        padding: 18px 32px;
      }
      
      .code-inputs {
        gap: 14px;
        margin: 32px 0;
      }
      
      .code-inputs input {
        width: 68px;
        height: 80px;
        font-size: 36px;
        border-radius: 14px;
      }
      
      .login-info {
        padding: 20px 24px;
        border-radius: 14px;
        margin-bottom: 28px;
      }
      
      .login-info p {
        font-size: 18px;
      }
      
      .login-progress-dot {
        width: 14px;
        height: 14px;
      }
      
      .step-indicator {
        font-size: 16px;
        margin-bottom: 28px;
      }
      
      .password-requirements {
        font-size: 15px;
        gap: 10px;
      }
      
      .login-checkbox span {
        font-size: 18px;
      }
      
      .security-question label {
        font-size: 18px;
      }
      
      .security-question select,
      .security-question input {
        font-size: 20px;
        padding: 18px 20px;
      }
      
      .success-checkmark {
        width: 120px;
        height: 120px;
        font-size: 60px;
      }
    }
    
    /* ============================================
       LOGIN - LARGE DESKTOP (1920px - 3199px)
       ============================================ */
    @media (min-width: 1920px) and (max-width: 3199px) {
      .login-container {
        max-width: 520px;
        border-radius: 24px;
      }
      
      .login-header {
        padding: 40px 40px 32px;
      }
      
      .login-logo {
        width: 180px;
        height: 80px;
      }
      
      .login-title {
        font-size: 28px;
      }
      
      .login-subtitle {
        font-size: 16px;
      }
      
      .login-body {
        padding: 32px 40px 40px;
      }
      
      .login-field label {
        font-size: 15px;
      }
      
      .login-field input {
        padding: 16px 20px;
        font-size: 17px;
      }
      
      .login-btn {
        padding: 16px 28px;
        font-size: 17px;
      }
      
      .code-inputs input {
        width: 56px;
        height: 66px;
        font-size: 28px;
      }
    }

    /* Safe area insets for notched phones */
    @supports (padding: env(safe-area-inset-top)) {
      @media screen and (max-width: 480px) {
        .login-header {
          padding-top: calc(20px + env(safe-area-inset-top));
        }
        .login-body {
          padding-left: calc(16px + env(safe-area-inset-left));
          padding-right: calc(16px + env(safe-area-inset-right));
          padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }
      }
    }

    /* Forgot Password requirement indicators */
    .profile-requirement.met { color: #22c55e; }
    .profile-requirement.unmet { color: #64748b; }
    .profile-requirement.met::before { content: "✓ "; font-weight: bold; }
    .profile-requirement.unmet::before { content: "○ "; }