/* ============================================================
   assets/css/auth.css
   Shared styling for the login & register pages.
   Depends on theme.css tokens (load theme.css first).
   Brand: royal #0759F8 · sky #00A1F3 · gold #EBA94E
   ============================================================ */

.auth-body{ font-family:var(--font-body); color:var(--color-text-body); background:var(--color-surface); }

.auth-wrap{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:100vh;
}

/* ── Brand panel (left) ─────────────────────────────────── */
.auth-brand{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px;
  color:#fff;
  background:linear-gradient(135deg, #081225 0%, #0B2D7A 55%, #0759F8 125%);
}
.auth-brand-bgimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0.12; mix-blend-mode:luminosity; z-index:0;
}
.auth-brand::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 78% 18%, rgba(0,161,243,0.28), transparent 70%);
}
.auth-brand-inner{ position:relative; z-index:2; }
.auth-brand-foot{ position:relative; z-index:2; font-size:0.78rem; color:rgba(255,255,255,0.45); }

.auth-logo{ display:flex; align-items:center; gap:10px; }
.auth-logo .brand-logo{ width:36px; height:36px; object-fit:contain; }
.auth-logo .brand-mark{ color:#fff; }
.auth-logo .brand-name{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#fff; line-height:1; }

.auth-brand h1{
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(1.8rem, 3vw, 2.6rem); line-height:1.12;
  margin:36px 0 16px;
}
.auth-brand h1 span{ color:var(--brand-accent,#EBA94E); }
.auth-brand .lead{ color:rgba(255,255,255,0.72); max-width:380px; line-height:1.8; font-size:0.95rem; }

.auth-points{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.auth-points li{ display:flex; align-items:center; gap:12px; font-size:0.9rem; color:rgba(255,255,255,0.85); }
.auth-points i{
  width:26px; height:26px; border-radius:50%;
  background:var(--brand-accent,#EBA94E); color:#081225;
  display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0;
}

/* ── Form panel (right) ─────────────────────────────────── */
.auth-form{
  display:flex; flex-direction:column;
  padding:32px clamp(24px,5vw,72px);
  background:var(--color-surface);
}
.auth-form-top{ display:flex; justify-content:flex-end; }
.auth-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.82rem; color:var(--color-text-muted); text-decoration:none;
  transition:color var(--transition-fast);
}
.auth-back:hover{ color:var(--color-primary); }
.auth-back i{ font-size:0.75rem; }

.auth-form-body{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  max-width:430px; width:100%; margin-inline:auto; padding-block:28px;
}
.auth-mark{
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg, var(--color-primary,#0759F8), var(--color-primary-light,#00A1F3));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.35rem; margin-bottom:20px;
  box-shadow:0 8px 20px rgba(7,89,248,0.28);
}
.auth-form-body h2{ font-family:var(--font-display); font-size:1.9rem; color:var(--color-text-heading); margin-bottom:6px; }
.auth-form-body .sub{ color:var(--color-text-muted); font-size:0.9rem; margin-bottom:24px; }
.auth-form-body .alert{ border-radius:var(--radius-md); font-size:0.88rem; }

.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-size:0.8rem; font-weight:600; color:var(--color-text-heading); margin-bottom:6px; }
.auth-input{ position:relative; }
.auth-input > i{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--color-text-muted); font-size:0.85rem; pointer-events:none;
}
.auth-input input{
  width:100%; padding:12px 16px 12px 42px;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:0.92rem; color:var(--color-text-body);
  background:var(--color-surface-alt);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.auth-input input:focus{
  outline:none; border-color:var(--color-primary);
  background:var(--color-surface); box-shadow:0 0 0 3px rgba(7,89,248,0.12);
}
.auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-hint{ font-size:0.75rem; color:var(--color-text-muted); margin-top:5px; display:block; }

.auth-submit{
  width:100%; justify-content:center; margin-top:8px;
  padding:13px; font-size:0.95rem; font-weight:600;
  border-radius:var(--radius-full); border:none; cursor:pointer;
  background:var(--color-primary); color:#fff;
  display:inline-flex; align-items:center; gap:8px;
  transition:all var(--transition-base);
}
.auth-submit:hover{ background:var(--color-primary-deep,#0344C9); transform:translateY(-2px); box-shadow:0 6px 18px rgba(7,89,248,0.28); }
.auth-submit i{ transition:transform var(--transition-fast); }
.auth-submit:hover i{ transform:translateX(3px); }

.auth-alt{ text-align:center; margin-top:22px; font-size:0.88rem; color:var(--color-text-muted); }
.auth-alt a{ color:var(--color-primary); font-weight:600; text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-divider{ border:none; border-top:1px solid var(--color-border); margin:18px 0; }
.auth-portal{ text-align:center; font-size:0.8rem; }
.auth-portal a{ color:var(--color-text-muted); text-decoration:none; transition:color var(--transition-fast); }
.auth-portal a:hover{ color:var(--color-primary); }

/* ── Responsive: brand panel becomes a slim branded bar ──── */
@media (max-width:880px){
  .auth-wrap{ grid-template-columns:1fr; min-height:auto; }
  .auth-brand{ padding:20px 28px; }
  .auth-brand h1, .auth-brand .lead, .auth-points, .auth-brand-foot{ display:none; }
  .auth-form{ min-height:calc(100vh - 76px); }
}
@media (max-width:480px){
  .auth-row{ grid-template-columns:1fr; }
  .auth-form{ padding:24px 18px; }
  .auth-form-body{ padding-block:8px; }
}