/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── Tokens ── */
:root {
  --c-black  : #151515;
  --c-gold   : #F2B705;
  --c-gold2  : #E6AE00;
  --c-green  : #00703C;
  --c-cream  : #FDFAF3;
  --c-border : #E3DDD4;
  --c-muted  : #6E6A64;
  --c-error  : #C0392B;
  --c-ok     : #00703C;
  --r        : 10px;
  --ff-head  : 'Syne', sans-serif;
  --ff-body  : 'Inter', sans-serif;
}

body {
  font-family: var(--ff-body);
  background: var(--c-cream);
  color: var(--c-black);
  min-height: 100vh;
}

/* ── Two-column page ── */
.page {
  display: flex;
  min-height: 100vh;
}

/* ── LEFT: brand ── */
.brand {
  flex: 1;
  background: var(--c-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 52px;
  position: relative;
  overflow: hidden;
}

/* Decorative glows */
.brand::before {
  content: '';
  position: absolute;
  top: -140px; right: -100px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,183,5,.15) 0%, transparent 65%);
  pointer-events: none;
}
.brand::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,112,60,.2) 0%, transparent 65%);
  pointer-events: none;
}

.brand-inner {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 100%;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}
.flag { font-size: 2rem; }
.brand-name {
  font-family: var(--ff-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.brand-name em { font-style: normal; color: var(--c-gold); }

.brand-headline {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 20px;
}

.brand-body {
  font-size: .96rem;
  line-height: 1.7;
  color: #A8A49D;
  margin-bottom: 36px;
}

.brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 40px;
}
.brand-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: #D4D0CA;
}
.tick {
  width: 22px; height: 22px;
  background: var(--c-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: #fff;
  flex-shrink: 0;
}

.brand-forms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brand-forms span {
  padding: 5px 12px;
  border: 1px solid rgba(242,183,5,.3);
  border-radius: 100px;
  font-size: .75rem;
  color: var(--c-gold);
  background: rgba(242,183,5,.07);
}

/* ── RIGHT: auth ── */
.auth {
  width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--c-cream);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  box-shadow: 0 4px 36px rgba(0,0,0,.07);
  padding: 36px 38px 40px;
}

/* ── Tabs ── */
.card-tabs {
  display: flex;
  background: #F0EBE2;
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 30px;
}
.ctab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--ff-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--c-muted);
  cursor: pointer;
  transition: all .18s;
}
.ctab.active {
  background: #fff;
  color: var(--c-black);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

/* ── Forms ── */
.cform { display: none; }
.cform.active { display: block; }

.form-heading {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-black);
  margin-bottom: 5px;
}
.form-sub {
  font-size: .83rem;
  color: var(--c-muted);
  margin-bottom: 26px;
}

/* ── Fields ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-size: .82rem;
  font-weight: 600;
  color: #3A3A3A;
}
.field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-size: .93rem;
  color: var(--c-black);
  background: #FAFAFA;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(242,183,5,.16);
  background: #fff;
}
.field input::placeholder { color: #C0BAB3; }

.pw-row { position: relative; }
.pw-row input { padding-right: 44px; }
.eye {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  font-size: .95rem; opacity: .45;
  cursor: pointer; padding: 4px;
  transition: opacity .15s;
}
.eye:hover { opacity: 1; }

.name-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Password strength */
.strength-track {
  height: 4px; background: #EAE6DE;
  border-radius: 4px; margin-top: 7px; overflow: hidden;
}
.strength-fill {
  height: 100%; width: 0;
  border-radius: 4px;
  transition: width .3s, background .3s;
}
.strength-label {
  display: block;
  font-size: .75rem;
  color: var(--c-muted);
  margin-top: 4px;
}

/* ── Extras ── */
.row-between {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.chk {
  display: flex; align-items: center; gap: 7px;
  font-size: .83rem; color: var(--c-muted); cursor: pointer;
}
.chk input { accent-color: var(--c-gold); width: 14px; height: 14px; }

.lnk {
  color: var(--c-green); font-size: .83rem;
  font-weight: 500; text-decoration: none; cursor: pointer;
}
.lnk:hover { text-decoration: underline; }

.errmsg {
  display: none;
  background: #FEF0EF; border: 1px solid #F5C6C3;
  border-radius: 8px; padding: 9px 13px;
  font-size: .82rem; color: var(--c-error);
  margin-bottom: 14px;
}
.errmsg.show { display: block; }

.succmsg {
  background: #EBF7F1; border: 1px solid #A8DEC0;
  border-radius: 8px; padding: 9px 13px;
  font-size: .82rem; color: var(--c-ok);
  margin-bottom: 14px;
}
.succmsg.hidden { display: none; }

.btn-gold {
  width: 100%;
  padding: 13px;
  background: var(--c-gold);
  color: var(--c-black);
  border: none;
  border-radius: var(--r);
  font-family: var(--ff-head);
  font-size: .97rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .1s;
  margin-bottom: 18px;
}
.btn-gold:hover { background: var(--c-gold2); }
.btn-gold:active { transform: scale(.98); }
.btn-gold:disabled { opacity: .55; cursor: not-allowed; }

.switch-msg {
  text-align: center;
  font-size: .83rem;
  color: var(--c-muted);
}

.back-lnk {
  background: none; border: none;
  color: var(--c-green); font-size: .83rem;
  font-weight: 500; cursor: pointer;
  padding: 0; margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 4px;
}
.back-lnk:hover { text-decoration: underline; }

.disclaimer {
  margin-top: 20px;
  font-size: .72rem;
  color: #AAA49D;
  text-align: center;
  max-width: 380px;
  line-height: 1.5;
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .page { flex-direction: column; }
  .brand { display: none; }
  .auth {
    width: 100%;
    min-height: 100vh;
    padding: 40px 20px;
    justify-content: flex-start;
    padding-top: 52px;
  }
  .name-pair { grid-template-columns: 1fr; gap: 0; }
  .auth-card { padding: 28px 22px 32px; }
}