/* Extracted from app/Views/auth/login.php; keep cascade position in the view. */

      html { font-size: 14px; }

      body.login-page {
        min-height: 100vh;
        background:
          radial-gradient(circle at 18% 12%, rgba(97, 176, 255, 0.12), transparent 20%),
          radial-gradient(circle at 82% 20%, rgba(37, 211, 102, 0.08), transparent 18%),
          radial-gradient(circle at bottom right, rgba(245, 196, 81, 0.08), transparent 16%),
          linear-gradient(180deg, #060708 0%, #10151b 46%, #0b0d11 100%);
        color: #d8e5f5;
        font-family: "Source Sans 3", system-ui, sans-serif;
      }

      .auth-shell {
        width: min(100%, 1140px);
        margin: 0 auto;
        padding: 1rem;
      }

      .auth-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.82fr);
        gap: 1rem;
        align-items: stretch;
      }

      .hero-panel,
      .auth-card {
        background: rgba(9, 16, 29, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.14);
        box-shadow: 0 28px 66px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(18px);
      }

      .hero-panel {
        position: relative;
        overflow: hidden;
        border-radius: 1.55rem;
        padding: 1.45rem;
        min-height: 620px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .hero-panel::after {
        content: "";
        position: absolute;
        inset: auto -7rem -7rem auto;
        width: 18rem;
        height: 18rem;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(97, 176, 255, 0.16), transparent 68%);
        pointer-events: none;
      }

      .brand-row {
        display: inline-flex;
        align-items: center;
        gap: 0.68rem;
        border-radius: 999px;
        border: 1px solid rgba(97, 176, 255, 0.22);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(97, 176, 255, 0.04));
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        padding: 0.34rem 0.82rem 0.34rem 0.42rem;
        width: fit-content;
      }

      .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
        object-fit: contain;
        filter: drop-shadow(0 0 0.42rem rgba(35, 224, 241, 0.28));
      }

      .brand-name {
        display: inline-flex;
        flex-direction: column;
        line-height: 1;
        color: #f4f8ff;
      }
      .brand-name strong { font-size: .9rem; font-weight: 900; letter-spacing: .08em; }
      .brand-name small { margin-top: .16rem; color: #9fb5d0; font-size: .43rem; font-weight: 800; letter-spacing: .18em; }

      .hero-kicker {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: #8fa2bf;
        font-size: 0.64rem;
        margin-top: 1rem;
      }

      .hero-title {
        margin: 0.45rem 0 0.8rem;
        color: #fff;
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -0.02em;
        font-size: clamp(1.45rem, 2.1vw, 2.35rem);
        max-width: none;
      }

      .hero-copy {
        color: #9fb0c9;
        font-size: 0.86rem;
        line-height: 1.62;
        max-width: 50rem;
      }

      .hero-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 0.95rem;
        max-width: 540px;
      }

      .feature {
        border-radius: 0.95rem;
        border: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(255, 255, 255, 0.03);
        padding: 0.68rem 0.8rem;
      }

      .feature .label {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.62rem;
        color: #8fa2bf;
        margin-bottom: 0.3rem;
      }

      .feature .value {
        color: #fff;
        font-weight: 700;
        font-size: 0.84rem;
        line-height: 1.3;
      }

      .feature .value i {
        color: #33d6a6;
        margin-right: 0.35rem;
      }

      .proof-rail {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 0.9rem;
      }

      .proof-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.38rem 0.68rem;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(255, 255, 255, 0.03);
        color: #d8e5f5;
        font-size: 0.8rem;
        font-weight: 600;
      }

      .proof-pill i { color: #61b0ff; }

      .hero-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        color: #8fa2bf;
        font-size: 0.8rem;
      }

      .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.62rem 0.88rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #25d366, #61b0ff);
        color: #04111b;
        font-weight: 800;
        text-decoration: none;
      }

      .hero-cta:hover { color: #04111b; }

      .auth-card {
        border-radius: 1.55rem;
        overflow: hidden;
      }

      .auth-card .card-body {
        padding: 1.3rem 1.25rem 1.25rem;
      }

      .form-label {
        color: #a8b7cc;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .form-control {
        background-color: rgba(9, 16, 29, 0.96) !important;
        border-color: rgba(148, 163, 184, 0.18) !important;
        color: #d8e5f5 !important;
        min-height: 2.65rem;
        border-radius: 0.85rem;
        font-size: 0.86rem;
      }

      .form-control::placeholder {
        color: rgba(216, 229, 245, 0.42);
      }

      input[type="password"]::-ms-reveal,
      input[type="password"]::-ms-clear,
      input[type="password"]::-webkit-credentials-auto-fill-button,
      input[type="password"]::-webkit-strong-password-auto-fill-button,
      input[type="password"]::-webkit-textfield-decoration-container {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }

      .auth-title {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0;
      }

      .auth-subtitle {
        color: #8fa2bf;
        line-height: 1.55;
        font-size: 0.8rem;
      }

      .auth-link {
        color: #dfefff;
        text-decoration: none;
      }

      .auth-link:hover {
        color: #61b0ff;
      }

      .remember-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }

      .helper-box {
        margin-top: 0.85rem;
        padding: 0.85rem 0.9rem;
        border-radius: 1rem;
        border: 1px solid rgba(217, 180, 92, 0.18);
        background: rgba(217, 180, 92, 0.08);
        color: #d9e8f8;
        line-height: 1.55;
        font-size: 0.86rem;
      }

      .recovery-panel {
        display: none;
        margin-top: 0.85rem;
        padding: 0.95rem;
        border-radius: 1rem;
        border: 1px solid rgba(97, 176, 255, 0.2);
        background: rgba(97, 176, 255, 0.07);
      }

      .recovery-panel.is-visible {
        display: block;
      }

      .recovery-panel .copy {
        color: #9fb0c9;
        font-size: 0.82rem;
        line-height: 1.55;
        margin-bottom: 0.85rem;
      }

      .recovery-status {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: -0.2rem 0 0.85rem;
        padding: 0.58rem 0.68rem;
        border-radius: 0.82rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(9, 16, 29, 0.58);
        color: #a8b7cc;
        font-size: 0.82rem;
      }

      .recovery-status.is-visible {
        display: flex;
      }

      .resend-code-btn {
        border: 0;
        background: transparent;
        color: #61b0ff;
        font-weight: 800;
        padding: 0;
      }

      .resend-code-btn:disabled {
        color: #8fa2bf;
        cursor: not-allowed;
      }

      .btn-primary {
        background: linear-gradient(135deg, #d9b45c, #2bd88f);
        border: 0;
        color: #04111b;
        font-weight: 800;
        min-height: 2.72rem;
        border-radius: 0.9rem;
        font-size: 0.9rem;
      }

      .btn-primary:hover {
        color: #04111b;
        filter: brightness(1.02);
      }

      .btn-outline-light {
        border-color: rgba(148, 163, 184, 0.28);
        color: #d8e5f5;
      }

      .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
      }

      .support-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
        margin-top: 0.95rem;
      }

      .support-item {
        border-radius: 0.95rem;
        border: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(255, 255, 255, 0.03);
        padding: 0.68rem;
      }

      .support-item .label {
        display: block;
        color: #8fa2bf;
        font-size: 0.64rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
      }

      .support-item .value {
        display: block;
        color: #fff;
        font-weight: 700;
        font-size: 0.88rem;
        margin-top: 0.3rem;
      }

      @media (max-width: 991px) {
        .auth-grid {
          grid-template-columns: 1fr;
        }

        .hero-panel {
          min-height: auto;
        }
      }

      @media (max-width: 768px) {
        .auth-shell {
          padding: 0.8rem;
        }

        .hero-panel,
        .auth-card {
          border-radius: 1.2rem;
        }

        .auth-card .card-body {
          padding: 1rem;
        }

        .hero-features,
        .support-grid {
          grid-template-columns: 1fr;
        }

        .hero-title {
          max-width: none;
          white-space: normal;
        }

        .remember-row,
        .hero-footer {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      @media (min-width: 992px) {
        .hero-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
        }
        
        .logo_url{
            text-decoration: none;
            color: #fff;
        }
      }