:root{
  --navy:#14283f;
  --navy-deep:#0e1d2d;
  --wine:#702b3f;
  --gold:#8e6f4d;
  --ink:#262a2e;
  --muted:#737981;
  --line:#e4e7eb;
  --surface:#ffffff;
  --soft:#f6f7f9;
  --success:#2f6b52;
  --error:#a33a3a;
}

*{
  box-sizing:border-box;
}

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

body{
  min-height:100vh;
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  background:#f4f6f8;
  color:var(--ink);
}

button,
input{
  font:inherit;
}

.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:
    minmax(390px,.92fr)
    minmax(520px,1.08fr);
}

.auth-brand-panel{
  min-height:100vh;
  padding:48px 56px 42px;

  display:flex;
  flex-direction:column;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--navy-deep),
      var(--navy) 70%,
      #1c3957
    );
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:8px;

  background:
    rgba(255,255,255,.08);

  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
}

.brand-name{
  font-size:18px;
  font-weight:800;
  letter-spacing:.12em;
}

.brand-sub{
  margin-top:4px;

  color:
    rgba(255,255,255,.68);

  font-size:11px;
}

.brand-copy{
  margin:auto 0;
  max-width:540px;
}

.eyebrow{
  margin-bottom:18px;

  color:#d7c2a8;

  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
}

.brand-copy h1{
  margin:0;

  max-width:520px;

  font-size:42px;
  line-height:1.12;
  font-weight:650;
  letter-spacing:-.03em;
}

.brand-copy > p{
  margin:22px 0 32px;

  max-width:510px;

  color:
    rgba(255,255,255,.72);

  font-size:15px;
  line-height:1.7;
}

.security-points{
  display:grid;
  gap:14px;
}

.security-point{
  display:flex;
  align-items:center;
  gap:12px;

  color:
    rgba(255,255,255,.84);

  font-size:13px;
}

.security-icon{
  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:
    1px solid
    rgba(215,194,168,.45);

  border-radius:50%;

  color:#d7c2a8;

  font-size:11px;
}

.brand-footer{
  color:
    rgba(255,255,255,.46);

  font-size:10px;
  letter-spacing:.04em;
}

.auth-form-panel{
  min-height:100vh;

  padding:46px 54px 24px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafbfc
    );
}

.auth-card{
  width:min(520px,100%);
  margin:auto;
}

.auth-heading{
  margin-bottom:28px;
}

.auth-heading.centred{
  text-align:center;
}

.section-label{
  display:block;
  margin-bottom:10px;

  color:var(--gold);

  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}

.admin-label{
  color:var(--wine);
}

.auth-heading h2{
  margin:0;

  color:var(--navy);

  font-size:29px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.02em;
}

.auth-heading p{
  margin:10px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.6;
}

form{
  display:grid;
  gap:17px;
}

label{
  display:grid;
  gap:7px;

  color:#42484f;

  font-size:12px;
  font-weight:600;
}

input{
  width:100%;
  min-height:44px;

  padding:0 13px;

  border:
    1px solid
    #d9dde2;

  border-radius:7px;

  outline:none;

  background:#fff;
  color:var(--ink);

  font-size:13px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

input:focus{
  border-color:#7c8fa3;

  box-shadow:
    0 0 0 3px
    rgba(20,40,63,.08);
}

.primary-btn{
  min-height:44px;

  border:0;
  border-radius:7px;

  background:var(--navy);
  color:#fff;

  font-size:13px;
  font-weight:700;

  cursor:pointer;
}

.primary-btn:hover{
  background:#1c3957;
}

.primary-btn:disabled{
  opacity:.6;
  cursor:wait;
}

.admin-btn{
  background:var(--wine);
}

.admin-btn:hover{
  background:#5d2234;
}

.link-button{
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
}

.form-links{
  margin-top:23px;

  display:flex;
  justify-content:space-between;

  gap:14px;

  font-size:12px;
}

.form-links a{
  color:var(--navy);
  text-decoration:none;
}

.form-links a:hover{
  text-decoration:underline;
}

.form-links .quiet-link{
  color:var(--muted);
}

.register-grid{
  grid-template-columns:
    1fr 1fr;
}

.wide-field{
  grid-column:
    1 / -1;
}

.form-message{
  padding:10px 12px;

  border-radius:6px;

  font-size:12px;
  line-height:1.5;
}

.form-message.error{
  border:
    1px solid
    #efcaca;

  background:#fff5f5;
  color:var(--error);
}

.hidden{
  display:none !important;
}

.pending-icon{
  width:58px;
  height:58px;

  margin:
    0 auto 22px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#eaf3ee;
  color:var(--success);

  font-size:24px;
}

.pending-note{
  margin:0 0 24px;

  padding:16px;

  border:
    1px solid
    var(--line);

  border-radius:7px;

  background:var(--soft);

  color:#616970;

  font-size:12px;
  line-height:1.6;

  text-align:center;
}

.auth-footer{
  margin-top:38px;

  text-align:center;

  color:#8E6F4D;

  font-size:10px;
  font-weight:500;
}

@media(max-width:900px){

  .auth-shell{
    display:block;
  }

  .auth-brand-panel{
    min-height:auto;
    padding:26px 28px;
  }

  .brand-copy,
  .brand-footer{
    display:none;
  }

  .auth-form-panel{
    min-height:
      calc(100vh - 96px);

    padding:
      38px 24px 20px;
  }
}

@media(max-width:560px){

  .register-grid{
    grid-template-columns:1fr;
  }

  .wide-field{
    grid-column:auto;
  }

  .form-links{
    flex-direction:column;
  }

  .auth-heading h2{
    font-size:25px;
  }
}