/* ── assets/css/auth.css ── FrenchBoat */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-variant-emoji: text; }
:root {
  --black:#000000; --white:#FFFFFF;
  --gray-50:#FAFAFA; --gray-100:#f5f5f5; --gray-200:#E8E8E8;
  --gray-300:#D0D0D0; --gray-400:#A0A0A0; --gray-500:#6B6B6B;
  --gray-700:#333333; --gray-900:#1D3557;
  --f:'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --primary: #1B2A4A; --secondary: #457B9D; --accent: #A8DADC;
  --navy: #1D3557; --cream: #f5f5f5; --white: #FFFFFF; --ink: #1D3557;
  --muted: #6B6B6B; --border: #e0e0e0; --red: #E63946; --green: #2E7D32;
  --fd: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --fb: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}
body { font-family: var(--fb); background: var(--white); min-height: 100vh; display: flex; }

.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; }

/* ── Brand side ── */
.auth-brand {
  background: #1D3557;
  display: flex; flex-direction: column;
  padding: 48px; position: relative; overflow: hidden;
}
.auth-logo {
  font-family: var(--fd); font-size: 26px; font-weight: 800;
  color: #fff; text-decoration: none; margin-bottom: auto;
}
.auth-logo span { color: #E63946; }
.auth-brand-content { color: rgba(255,255,255,.85); margin-bottom: 48px; }
.auth-brand-content h2 { font-family: var(--fd); font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 32px; }
.auth-stats { display: flex; gap: 32px; }
.auth-stats > div { display: flex; flex-direction: column; gap: 3px; }
.auth-stats strong { font-family: var(--fd); font-size: 24px; font-weight: 700; color: #90a4ae; }
.auth-stats span { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .5px; }
.auth-brand-img {
  position: absolute; inset: 0; z-index: 0;
  background: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=800&q=60') center/cover;
  opacity: .08;
}

/* ── Form side ── */
.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; background: var(--white);
}
.auth-form-wrap { width: 100%; max-width: 420px; }

.auth-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 28px; }
.auth-tab {
  padding: 12px 24px; font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s;
}
.auth-tab.active { color: #1D3557; border-bottom-color: #E63946; }

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.alert-error   { background: #FFEBEE; color: var(--red); border: 1px solid #FFCDD2; }
.alert-success { background: #f5f5f5; color: #1B2A4A; border: 1px solid #d0d0d0; }

/* ── Fields ── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px; }
.field label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--fb); font-size: 14px; color: var(--ink);
  background: var(--white); outline: none; transition: border-color .2s;
}
.field input:focus { border-color: #457B9D; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Role select ── */
.role-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.role-opt {
  border: 2px solid var(--border); border-radius: 12px;
  padding: 16px 14px; text-align: center; cursor: pointer;
  transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.role-opt input { display: none; }
.role-opt.active { border-color: #457B9D; background: #f5f5f5; }
.role-ico { font-size: 24px; }
.role-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.role-desc { font-size: 11px; color: var(--muted); }

/* ── Button ── */
.btn-auth {
  width: 100%; padding: 13px; margin-top: 8px;
  background: #1B2A4A; color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: var(--fb); font-size: 15px; font-weight: 500;
  transition: background .2s;
}
.btn-auth:hover { background: #E63946; }

.auth-hint { font-size: 13px; color: var(--muted); text-align: center; margin-top: 16px; }
.auth-hint a { color: #457B9D; text-decoration: none; font-weight: 500; }

@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-side { padding: 32px 20px; }
}

/* ── FrenchBoat Logo Auth ── */
.auth-logo {
  display:flex; align-items:center; text-decoration:none;
}
.auth-logo .nav-logo-img {
  width:200px; height:auto;
}

/* Back button */
.auth-back-btn {
  position:absolute; top:20px; left:20px;
  padding:8px 16px 8px 12px; border-radius:50px;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2);
  display:inline-flex; align-items:center; gap:6px;
  color:#1B2A4A; text-decoration:none;
  font-size:13px; font-weight:500; font-family:inherit;
  transition:all .3s ease; z-index:10;
}
.auth-back-btn span { transition:opacity .2s; }
.auth-back-btn svg { transition:transform .3s ease; flex-shrink:0; }
.auth-back-btn:hover {
  background:#1B2A4A; border-color:#1B2A4A; color:#fff;
}
.auth-back-btn:hover svg { transform:translateX(-3px); }