/* ── assets/css/auth.css ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-variant-emoji: text; }
:root {
  --black:#262624; --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:#111111;
  --f:'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --olive: #262624; --gold: #262624; --gold-l: #F5F5F5;
  --cream: #FAFAFA; --white: #FFFFFF; --ink: #262624;
  --muted: #6B6B6B; --border: #E8E8E8; --red: #C62828; --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: #262624;
  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: #262624; }
.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: #262624; }
.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-1497366216548-37526070297c?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: #262624; border-bottom-color: #262624; }

/* ── 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: #E8F5E9; color: var(--green); border: 1px solid #C8E6C9; }

/* ── 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: #262624; }
.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: #262624; background: #FAFAFA; }
.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: #262624; 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: #333333; }

.auth-hint { font-size: 13px; color: var(--muted); text-align: center; margin-top: 16px; }
.auth-hint a { color: #262624; 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; }
}

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