@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

:root{
  --se-bg:#0B0F19;
  --se-bg-2:#0D111D;
  --se-panel:#11151F;
  --se-panel-2:#141926;
  --se-line:rgba(255,255,255,.08);
  --se-line-strong:rgba(255,255,255,.14);
  --se-white:#F4F6FA;
  --se-muted:#8A93A6;
  --se-muted-2:#5F6878;
  --se-teal:#36D6C5;
  --se-teal-dim:rgba(54,214,197,.14);
  --se-teal-glow:rgba(54,214,197,.35);
}

html,
body{
  min-height:100%;
}

body,
body.login{
  margin:0 !important;
  color:var(--se-white) !important;
  font-family:'Sora',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  background:
    radial-gradient(700px 420px at 12% 10%,rgba(54,214,197,.10),transparent 65%),
    radial-gradient(700px 420px at 90% 90%,rgba(54,214,197,.06),transparent 65%),
    var(--se-bg) !important;
  -webkit-font-smoothing:antialiased;
}

/* StoreEngine text wordmark */
.logo{
  display:flex !important;
  align-items:center;
  margin-bottom:24px !important;
  line-height:1 !important;
}

.logo img{
  display:none !important;
}

.logo::before{
  content:"StoreEngine";
  color:var(--se-white);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.03em;
}

.logo::after{
  content:".ai";
  color:var(--se-teal);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.03em;
}

/* Custom /login page */
.shell{
  min-height:100vh !important;
  padding:40px 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.wrap{
  width:100% !important;
  max-width:480px !important;
  padding:34px !important;
  border:1px solid var(--se-line) !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),
    var(--se-panel) !important;
  box-shadow:0 32px 90px -35px rgba(0,0,0,.95) !important;
}

h1{
  color:var(--se-white) !important;
  font-family:'Sora',sans-serif !important;
  font-size:31px !important;
  line-height:1.12 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
}

.sub,
p{
  color:var(--se-muted) !important;
  font-weight:400 !important;
}

label{
  color:var(--se-white) !important;
  font-weight:500 !important;
}

input[type="text"],
input[type="email"],
input[type="password"]{
  width:100% !important;
  box-sizing:border-box !important;
  color:var(--se-white) !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--se-line-strong) !important;
  border-radius:11px !important;
  box-shadow:none !important;
  outline:none !important;
  transition:border-color .2s,box-shadow .2s,background .2s !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder{
  color:var(--se-muted-2) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus{
  border-color:var(--se-teal) !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:0 0 0 4px var(--se-teal-dim) !important;
}

.remember,
.forgot,
.back,
.password-row{
  color:var(--se-muted) !important;
}

a{
  color:var(--se-teal);
}

a:hover{
  color:#7DF0E3;
}

input[type="checkbox"]{
  accent-color:var(--se-teal) !important;
}

button,
.submit,
.btn,
.button-primary{
  border:1px solid rgba(54,214,197,.45) !important;
  border-radius:11px !important;
  color:#04201D !important;
  background:var(--se-teal) !important;
  font-family:'Sora',sans-serif !important;
  font-weight:600 !important;
  text-shadow:none !important;
  box-shadow:
    0 0 0 1px rgba(54,214,197,.20),
    0 10px 30px -10px var(--se-teal-glow) !important;
  cursor:pointer !important;
  transition:transform .2s,box-shadow .2s,filter .2s !important;
}

button:hover,
.submit:hover,
.btn:hover,
.button-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(54,214,197,.40),
    0 15px 40px -10px var(--se-teal-glow) !important;
}

/* Password reset pages */
body > .card{
  width:100% !important;
  max-width:480px !important;
  padding:34px !important;
  border:1px solid var(--se-line) !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),
    var(--se-panel) !important;
  box-shadow:0 32px 90px -35px rgba(0,0,0,.95) !important;
}

.card input{
  min-height:54px !important;
  padding:14px 16px !important;
}

.card .btn{
  min-height:54px !important;
  padding:14px 18px !important;
}

.msg{
  border-radius:11px !important;
}

.error{
  color:#FFB4B4 !important;
  background:rgba(239,68,68,.10) !important;
  border:1px solid rgba(239,68,68,.28) !important;
}

.success{
  color:#83E8DC !important;
  background:rgba(54,214,197,.10) !important;
  border:1px solid rgba(54,214,197,.26) !important;
}

/* Native WordPress login */
body.login #login{
  width:100% !important;
  max-width:440px !important;
  padding:34px !important;
  border:1px solid var(--se-line) !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),
    var(--se-panel) !important;
  box-shadow:0 32px 90px -35px rgba(0,0,0,.95) !important;
}

body.login h1{
  margin-bottom:20px !important;
}

body.login h1 a{
  position:relative;
  width:100% !important;
  height:auto !important;
  min-height:28px !important;
  margin:0 !important;
  background:none !important;
  text-indent:0 !important;
  overflow:visible !important;
  color:transparent !important;
}

body.login h1 a::before{
  content:"StoreEngine";
  color:var(--se-white);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.03em;
}

body.login h1 a::after{
  content:".ai";
  color:var(--se-teal);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.03em;
}

body.login form{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.login .input{
  min-height:52px !important;
  color:var(--se-white) !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--se-line-strong) !important;
}

body.login .input:focus{
  border-color:var(--se-teal) !important;
  box-shadow:0 0 0 4px var(--se-teal-dim) !important;
}

body.login #login_error,
body.login .message{
  color:var(--se-white) !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--se-line) !important;
  border-left:3px solid var(--se-teal) !important;
}

.wp-pwd button.wp-hide-pw,
.wp-pwd button.wp-hide-pw:hover{
  color:var(--se-teal) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

@media(max-width:560px){
  .shell{
    padding:18px !important;
  }

  .wrap,
  body > .card,
  body.login #login{
    padding:26px 22px !important;
    border-radius:15px !important;
  }

  h1{
    font-size:27px !important;
  }
}