/* =========================================
   AUTH PAGE — SCOPED SCROLL LOCK
   (no html/body global hacks)
========================================= */
body.tb-auth-lock{
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
}

/* =========================================
   LAYOUT
========================================= */
:root{
  --tb-topbar-h:56px; /* matches your fixed topbar */
}

.tb-auth-clean{
  position:relative;
  background:#000;
  color:#fff;

  /* makes sure the page fits under the topbar */
  height:calc(100svh - var(--tb-topbar-h));
  min-height:calc(100svh - var(--tb-topbar-h));
  overflow:hidden;

  /* if your global layout already adds top padding, this is safe.
     if not, it still looks fine because hero is centered. */
}

/* HERO */
.tb-auth-clean-hero{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Background */
.tb-auth-clean-bg{
  position:absolute;
  inset:0;
  transform:scale(1.02); /* removes edge banding */
}


/* Content */
.tb-auth-clean-center{
  position:relative;
  padding:0 24px;
  max-width:920px;
}

.tb-auth-clean-title{
  font-size:64px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,.65);
}

.tb-auth-clean-sub{
  margin-top:18px;
  font-size:18px;
  color:rgba(255,255,255,.82);
}

/* CTA */
.tb-auth-clean-btn{
  margin-top:32px;
  padding:16px 34px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:900;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.tb-auth-clean-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.tb-auth-clean-trust{
  margin-top:14px;
  font-size:13px;
  color:rgba(255,255,255,.62);
}

/* =========================================
   AUTH NOTICE (RED PREMIUM)
========================================= */
.tb-auth-notice{
  margin:0 auto 28px;
  padding:14px 20px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  gap:12px;

  background:linear-gradient(
    180deg,
    rgba(185,28,28,.28),
    rgba(127,29,29,.20)
  );
  backdrop-filter:blur(14px);
  border:1px solid rgba(239,68,68,.50);

  color:#ffe4e6;
  font-size:14px;
  line-height:1.45;

  box-shadow:
    0 18px 60px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.tb-auth-notice-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;

  background:rgba(239,68,68,.18);
  border:1px solid rgba(239,68,68,.35);
  color:#fecaca;
}

.tb-auth-notice-text strong{
  font-weight:800;
  color:#fff;
}

/* MOBILE */
@media(max-width:900px){
  :root{ --tb-topbar-h:56px; }

  .tb-auth-clean-title{
    font-size:40px;
  }
  .tb-auth-clean-sub{
    font-size:16px;
  }
  .tb-auth-clean-btn{
    padding:15px 28px;
  }
}