@media (max-width: 768px){
  html:has(body[data-product="mathoslocos"]){
    height:100dvh;
    overflow:hidden;
    overscroll-behavior-y:none;
  }

  body[data-product="mathoslocos"]{
    height:100dvh;
    width:100vw;
    overflow:hidden;
    overscroll-behavior-y:none;
    margin:0;
    padding:0;
    background:#0d0a1d;
  }

  body[data-product="mathoslocos"]::before,
  body[data-product="mathoslocos"]::after{
    display:none;
  }

  body[data-product="mathoslocos"] .auth-mobile-viewport{
    --auth-avatar-size:clamp(84px, 15dvh, 120px);
    --auth-avatar-glow-size:calc(var(--auth-avatar-size) + 16px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:100dvh;
    height:100dvh;
    width:100%;
    padding:0;
    gap:0;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% -12%, rgba(77, 102, 255, .38) 0%, rgba(26, 21, 58, .72) 32%, rgba(13, 10, 29, .98) 72%),
      #0d0a1d;
    position:relative;
  }

  body[data-product="mathoslocos"] .auth-mobile-viewport .left-panel{
    display:none !important;
  }

  body[data-product="mathoslocos"] .mobile-trust-badge{
    position:relative;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0;
    flex:1 1 auto;
    height:auto;
    min-height:160px;
    padding:calc(env(safe-area-inset-top, 40px) + 16px) 20px 16px;
    margin:0;
    background:transparent;
    border:0;
    border-radius:0;
    z-index:5;
    pointer-events:none;
    animation:auth-trust-in .6s ease-out both;
    box-sizing:border-box;
  }

  body[data-product="mathoslocos"] .trust-avatar-glow{
    position:absolute;
    top:50%;
    transform:translateY(-80%);
    width:var(--auth-avatar-glow-size);
    height:var(--auth-avatar-glow-size);
    border-radius:999px;
    background:radial-gradient(circle, rgba(77, 102, 255, .42), rgba(33, 188, 246, .16) 46%, transparent 70%);
    filter:blur(10px);
  }

  body[data-product="mathoslocos"] .trust-avatar{
    position:relative;
    width:var(--auth-avatar-size);
    height:var(--auth-avatar-size);
    border-radius:28px;
    object-fit:contain;
    object-position:center top;
    border:0;
    background:transparent;
    box-shadow:0 0 30px rgba(77,102,255,.4);
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.35));
  }

  body[data-product="mathoslocos"] .trust-info{
    text-align:center;
    margin-top:clamp(6px, 1.4dvh, 12px);
  }

  body[data-product="mathoslocos"] .trust-name{
    font-size:1.25rem;
    line-height:1.15;
    font-weight:800;
    color:#fff;
    margin:0;
  }

  body[data-product="mathoslocos"] .badge-verified{
    display:inline-grid;
    place-items:center;
    width:20px;
    height:20px;
    margin-left:3px;
    border-radius:999px;
    background:#4d66ff;
    color:#fff;
    font-size:.78rem;
    line-height:1;
    vertical-align:2px;
    box-shadow:0 4px 14px rgba(77,102,255,.4);
  }

  body[data-product="mathoslocos"] .trust-title{
    font-size:.85rem;
    line-height:1.35;
    color:#a0aec0;
    margin:4px 0 0;
  }

  body[data-product="mathoslocos"] .auth-mobile-viewport .right-panel{
    flex:0 1 auto;
    min-height:0;
    width:100%;
    margin:0;
    padding:0 !important;
    background:transparent !important;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:4;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet{
    width:100%;
    max-width:none;
    max-height:min(75dvh, 100%);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#111322;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid rgba(255,255,255,.06);
    border-radius:28px 28px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
    box-sizing:border-box;
  }

  body[data-product="mathoslocos"] .page-back-link--auth{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    min-width:0;
    min-height:auto;
    color:#aeb8d4;
    font-size:.95rem;
    font-weight:800;
    text-decoration:none;
  }

  body[data-product="mathoslocos"] .page-back-link--auth:hover{
    transform:none;
    background:transparent;
    box-shadow:none;
    text-decoration:none;
    color:#fff;
  }

  body[data-product="mathoslocos"] .auth-tabs{
    display:flex;
    width:100%;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.04);
    border-radius:12px;
    padding:4px;
    margin:16px 0 24px;
  }

  body[data-product="mathoslocos"] .auth-tab{
    flex:1;
    min-width:0;
    text-align:center;
    padding:12px 0;
    font-size:1rem;
    line-height:1.15;
    font-weight:700;
    color:#6c758f;
    text-decoration:none;
    border-radius:8px;
    transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  }

  body[data-product="mathoslocos"] .auth-tab.active{
    background:#4d66ff;
    color:#fff;
    box-shadow:0 4px 15px rgba(77,102,255,.3);
  }

  body[data-product="mathoslocos"] .auth-tab:focus-visible{
    outline:2px solid rgba(255,255,255,.72);
    outline-offset:2px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .form-header,
  body[data-product="mathoslocos"] .auth-bottom-sheet .register-link,
  body[data-product="mathoslocos"] .auth-bottom-sheet .login-link{
    display:none;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .form-group{
    margin-bottom:14px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .form-group label{
    color:#e7ebf8;
    font-size:.93rem;
    margin-bottom:7px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet input[type="email"],
  body[data-product="mathoslocos"] .auth-bottom-sheet input[type="password"],
  body[data-product="mathoslocos"] .auth-bottom-sheet input[type="text"]{
    height:52px;
    min-height:52px;
    font-size:16px;
    padding:0 16px;
    border-radius:12px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .email-wrapper input,
  body[data-product="mathoslocos"] .auth-bottom-sheet .password-wrapper input{
    padding-right:44px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .toggle-pw-visibility{
    right:8px;
    width:36px;
    height:36px;
  }

  body[data-product="mathoslocos"] .btn-massive{
    height:56px;
    padding:0 16px;
    margin-top:16px;
    width:100%;
    border-radius:14px;
    font-size:1.1rem;
    font-weight:800;
  }

  body[data-product="mathoslocos"] .auth-context-note{
    margin:-12px 0 18px;
    font-size:.92rem;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .error-alert{
    padding:12px 14px;
    margin-bottom:14px;
    border-radius:14px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .auth-inline-status{
    padding:12px 14px;
    margin-bottom:14px;
    border-radius:14px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .error-alert::before{
    width:24px;
    height:24px;
    margin-bottom:6px;
  }

  body[data-product="mathoslocos"] .auth-bottom-sheet .input-help{
    font-size:.85rem;
    margin-top:7px;
  }

  body[data-product="mathoslocos"] .auth-tab:not(.active){
    color:#8fa0ce;
    position:relative;
    overflow:hidden;
  }

  body[data-product="mathoslocos"] .auth-tab:not(.active)::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.12) 50%,
      rgba(255,255,255,0) 100%
    );
    transform:skewX(-20deg);
    animation:shimmer-wave 4s infinite;
    pointer-events:none;
  }

  @keyframes shimmer-wave{
    0%{ left:-100%; }
    15%{ left:200%; }
    100%{ left:200%; }
  }
}

@media (max-width: 768px) and (max-height: 640px){
  body[data-product="mathoslocos"] .auth-mobile-viewport{
    --auth-avatar-size:76px;
  }

  body[data-product="mathoslocos"] .trust-info{
    margin-top:6px;
  }

  body[data-product="mathoslocos"] .trust-name{
    font-size:1.05rem;
  }

  body[data-product="mathoslocos"] .trust-title{
    font-size:.78rem;
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-product="mathoslocos"] .mobile-trust-badge{
    animation:none;
  }

  body[data-product="mathoslocos"] .auth-tab:not(.active)::after{
    animation:none;
    display:none;
  }
}

@keyframes auth-trust-in{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}