@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@1,700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --teal-top:#0a6b7a;
  --teal-mid:#064554;
  --navy:#001a2c;
  --cyan:#00e5ff;
  --ink:#001a2c;
  --paper:#e8f7fb;
  --line:rgba(255,255,255,.38);
  --font:Outfit,system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;max-width:100%;overflow-x:hidden}
.auth-body{
  min-height:100vh;min-height:100dvh;
  font-family:var(--font);color:#fff;
  background:
    linear-gradient(160deg, rgba(0,26,44,.55), rgba(0,26,44,.78)),
    repeating-linear-gradient(60deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
    #0b1218;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}

.auth-wrap{width:min(420px,100%);margin:0 auto}
.auth-card{
  position:relative;
  width:100%;
  padding:36px 28px 28px;
  border-radius:28px;
  background:linear-gradient(180deg, #0d7c8c 0%, #065868 38%, #012433 100%);
  box-shadow:
    0 24px 50px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
}
.auth-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.18), transparent 55%);
}

.brand-mark{
  width:118px;height:118px;border-radius:50%;
  display:block;margin:4px auto 34px;
  object-fit:cover;
  box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(0,229,255,.35);
  position:relative;z-index:1;
}

.auth-card h1,.auth-card .lead{display:none}

.field{
  display:flex;align-items:center;gap:12px;
  padding:12px 2px 10px;
  border-bottom:1.5px solid var(--line);
  margin-bottom:18px;
  position:relative;z-index:1;
}
.field svg{width:22px;height:22px;flex:none;stroke:#fff;opacity:.92}
.field input{
  flex:1;border:0;outline:0;background:transparent;color:#fff;
  font:600 1rem/1.3 var(--font);
  min-width:0;
}
.field input::placeholder{color:rgba(255,255,255,.78);font-weight:500}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  transition:background-color 9999s ease-out 0s;
  caret-color:#fff;
}

.btn-auth{
  display:block;width:100%;margin-top:22px;
  border:0;cursor:pointer;
  padding:15px 20px;border-radius:999px;
  font:800 1.05rem/1 var(--font);color:#fff;letter-spacing:.04em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 38%, transparent 55%),
    linear-gradient(180deg, #1a6f9c 0%, #0d4a72 48%, #083458 100%);
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 8px rgba(0,0,0,.25);
  position:relative;z-index:1;
  transition:transform .15s ease;
}
.btn-auth:active{transform:scale(.98)}
.btn-auth:disabled{opacity:.7;cursor:wait}

.auth-error{min-height:1.1em;color:#ffb4c0;font-weight:700;font-size:.82rem;margin:8px 2px 0;position:relative;z-index:1}
.auth-foot{
  margin:18px 0 0;text-align:center;font-size:.9rem;color:rgba(255,255,255,.82);
  position:relative;z-index:1;
}
.auth-foot a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}

.btn-google,.auth-or,.row-between{display:none!important}

.auth-card.pic-login .brand-mark{margin-bottom:40px}