/* ===== GLOBAL MOBILE & TOUCH FIXES ===== */
      *, *::before, *::after { -webkit-tap-highlight-color: transparent; }
      html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
      button, select, input, a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
      }

      @font-face {
        font-family: "Orbitron-Regular";
        src: url("../fonts/Orbitron-Regular.ttf");
      }

      body {
        background: linear-gradient(rgba(0, 0, 80, 0.6), rgba(0, 0, 0, 0.8)), url("../images/homebg.webp");
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        overflow-y: auto;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .login-container {
        background: #76636340;
        backdrop-filter: blur(5px);
        padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 30px);
        max-width: 900px;
        width: 100%;
        position: relative;
        z-index: 1;
      }

      .branding-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-bottom: 20px;
      }

      .logo-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .cefolac-text img {
        max-width: 100%;
        height: auto;
      }

      .trophy-image {
        height: auto;
        max-width: 150px;
      }

      .form-control {
        padding: clamp(14px, 3.5vw, 18px) 20px;
        font-size: clamp(15px, 3.5vw, 18px);
        min-height: 54px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        text-align: center;
        background-color: #0000001c !important;
        color: white !important;
        border: 1px solid #837b7b;
        letter-spacing: 0.2rem;
        font-family: "Orbitron-Regular";
        /* Remove browser autofill yellow & circle dot styling */
        -webkit-text-security: none;
      }

      /* Remove the circle dot (disc) for password field - use custom text mask */
      input[type="password"] {
        -webkit-text-security: disc;
        font-family: "Orbitron-Regular" !important;
        letter-spacing: 0.4rem;
      }

      /* Override autofill background */
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #1a1a2e inset !important;
        -webkit-text-fill-color: white !important;
        caret-color: white;
      }

      .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
        outline: none;
        color: white !important;
      }

      .form-control::placeholder {
        color: rgba(255,255,255,0.7) !important;
        font-weight: 500;
        letter-spacing: 0.15rem;
      }

      /* Hide green valid indicator circles */
      .form-control.is-valid {
        background-image: none !important;
        border-color: #28a745;
      }
      .form-control.is-invalid {
        background-image: none !important;
        border-color: #dc3545;
      }

      .btn-login {
        color: white;
        transition: all 0.3s ease;
        padding: 18px 20px;
        font-size: 18px;
        font-family: "Orbitron-Regular";
        background: linear-gradient(120deg, transparent, #ff7a1a, transparent);
      }

      .btn-login:hover:not(:disabled) {
        background: linear-gradient(120deg, transparent, #f26907, transparent);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }

      .btn-login:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }

      .alert {
        text-align: center;
        font-size: 14px;
        margin-bottom: 20px;
        border-radius: 10px;
        padding: 12px;
      }

      .invalid-feedback {
        display: none;
        text-align: center;
        color: #ffffff !important;
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 15px;
      }

      .invalid-feedback.show { display: block; }

      .valid-feedback {
        display: none;
        text-align: center;
        color: #28a745;
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 15px;
      }

      .valid-feedback.show { display: block; }

      .visually-hidden {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0,0,0,0); white-space: nowrap; border: 0;
      }

      .password-toggle { position: relative; }

      .toggle-password-btn {
        position: absolute;
        right: 15px; top: 50%;
        transform: translateY(-50%);
        background: none; border: none;
        cursor: pointer; padding: 5px; z-index: 10;
        display: flex; align-items: center; justify-content: center;
        transition: opacity 0.2s ease;
        /* Offset for margin-bottom on input */
        margin-top: -5px;
      }

      .toggle-password-btn:hover { opacity: 0.7; }

      .toggle-password-btn svg {
        width: 20px; height: 20px;
        stroke: #aaa; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }

      .eye-icon { display: block; }
      .eye-slash-icon { display: none; }
      .toggle-password-btn.showing .eye-icon { display: none; }
      .toggle-password-btn.showing .eye-slash-icon { display: block; }

      .form-group { margin-bottom: 25px; }

      @media (max-width: 768px) {
        .login-container { padding: 40px 30px; border-radius: 30px; }
        .branding-section { flex-direction: column; gap: 20px; }
        .trophy-image { width: 120px; }
        .form-control { font-size: 16px; padding: 15px 18px; }
        .btn-login { font-size: 16px; padding: 15px 18px; }
      }

      .spinner {
        display: inline-block; width: 14px; height: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 50%; border-top-color: white;
        animation: spin 0.8s linear infinite; margin-left: 8px;
      }

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

      .success-msg { background-color: rgb(14,202,14) !important; color: white !important; }

      @media (max-width: 480px) {
        .login-container { padding: 20px 16px; }
        .trophy-image { max-width: 90px; }
        .branding-section { gap: 12px; }
        .form-group { margin-bottom: 16px; }
      }
      @media (max-height: 700px) and (orientation: portrait) {
        .login-container { padding: 16px; }
        .branding-section { margin-bottom: 10px; }
      }