@media (max-width: 480px) {
    body, .oauth-wrap, .oauth-card, .oauth-card-inner, input, button {
      font-size: 18px !important;
    }
  }
  /* Center page and card */
  .oauth-wrap{min-height:calc(100vh - 300px);display:flex;align-items:center;justify-content:center;padding:60px 12px}
    .oauth-card{width:400px;height:700px;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(2,6,23,0.10)}

    /* Responsive card for mobile */
    @media (max-width: 480px) {
      .oauth-wrap {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(180deg,#f7f4ef,#eef0f2) !important;
      }
      .oauth-card {
        width: 96vw !important;
        max-width: 350px !important;
        min-height: 58vh !important;
        margin: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 40px rgba(2,6,23,0.10) !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
      }
      .oauth-card-inner {
        width: 100% !important;
        padding: 10px 18px !important;
        font-size: 0.98rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: visible !important;
      }
      #local-login-form, .oauth-providers {
        max-width: 90% !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      #local-login-form input[type="email"], .oauth-continue, .provider-btn {
        max-width: 100% !important;
        width: 100% !important; /* ensure inputs and buttons match */
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
      }
      .dsn-logo {
        max-width: 32vw !important;
      }
      .oauth-welcome {
        font-size: 0.92rem !important;
      }
      .oauth-sub {
        font-size: 0.82rem !important;
      }
      #local-login-form input[type="email"] {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
        height: 28px !important;
      }
      .oauth-continue {
        font-size: 0.8rem !important;
        padding: 7px 8px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
      }
      .provider-btn {
        font-size: 0.8rem !important;
        padding: 7px 8px !important;
        height: 30px !important;
        width: 100% !important;
        min-width: 180px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }
      h2 {
        font-size: 1.1rem !important;
      }
      p, label, span {
        font-size: 0.8rem !important;
      }
      .dsn-logo {
        max-width: 60vw !important;
      }
      .oauth-welcome {
        font-size: 2rem !important;
      }
      .oauth-sub {
        font-size: 1.3rem !important;
      }
      /* #local-login-form input[type="email"], .oauth-continue {
        font-size: 1.4rem !important;
        padding: 20px 22px !important;
      } */
      .provider-btn {
        font-size: 1.3rem !important;
        padding: 18px 18px !important;
      }
    }

  /* Card interior should be plain white */
  .oauth-card-inner{position:relative;z-index:2;background:#ffffff;height:100%;padding:28px;display:flex;flex-direction:column;align-items:center;gap:12px}

  .dsn-logo{max-width:210px;height:auto;margin-top:4px} /* 50% larger */
  .oauth-welcome{margin:6px 0 0 0;font-size:1.5rem;color:var(--text);font-weight:800}
  .oauth-sub{margin:0;color:var(--muted);font-size:0.95rem}

  /* Input and primary button are same width */
  #local-login-form{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:12px}
  #local-login-form input[type="email"]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);font-size:1rem;background:transparent}
  .oauth-continue{width:100%;padding:12px 14px;border-radius:10px;border:0;background:#2563eb;color:#fff;font-weight:800;cursor:pointer;font-size:1.25rem} /* blue button, text 25% larger */

  /* Dashed rule matching button width */
  .or-sep{width:100%;display:flex;justify-content:center;margin:8px 0}
  .or-rule{width:100%;max-width:100%;display:flex;align-items:center;gap:12px}
  .or-rule::before,.or-rule::after{content:"";flex:1;height:0;border-top:1px dashed rgba(15,23,42,0.12)}
  .or-rule span{padding:0 8px;color:var(--muted);font-weight:700}

  .oauth-providers{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .provider-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--text);background:var(--card);border:1px solid rgba(15,23,42,0.06);font-weight:700}
  .provider-btn.instagram{border-color:#E1306C}
  .provider-btn.facebook{border-color:#1877F2}
  .provider-btn.x{border-color:#1DA1F2}
  .provider-btn.entra-personal{border-color:#2F6DB3}
  .provider-btn.entra-business{border-color:#005A9E}

  /* Slight responsiveness */
  /* @media (max-width:440px){.oauth-wrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:30px 6px}} */
   /* Mobile portrait tweaks */
@media (max-width:440px) and (orientation: portrait) {
  .oauth-wrap{
    padding:18px 12px;       /* less top space */
    align-items:flex-start;  /* card sits closer to top */
    min-height: calc(100svh - 28px); /* use svh for mobile UI-safe height */
  }
  .oauth-card{
    width: 94%;
    min-height: 56svh;       /* tall enough but not rigid */
    padding-bottom: 20px;
    border-radius:12px;
    box-shadow:0 18px 48px rgba(2,6,23,0.10);
  }
}
  /* provider icon styles */
  .provider-btn img{width:20px;height:20px;margin-right:12px;flex:0 0 auto}
  .provider-btn span{flex:1;text-align:left}

  /* hide any automatic page title in the top-left */
  .appbar .brand-title{display:none}