/* Superbway — Sign-in / registration (built on app.css tokens) */
body.auth-body { margin: 0; min-height: 100vh; background: var(--surface); font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* Brand panel */
.auth-aside {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 110% -10%, rgba(255,138,61,.28), transparent 60%),
              radial-gradient(800px 500px at -20% 120%, rgba(37,99,235,.18), transparent 60%),
              linear-gradient(160deg, var(--ink) 0%, #0B1524 100%);
  padding: 48px 56px; display: flex; flex-direction: column;
}
.auth-aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 30%, transparent 90%);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.auth-brand img { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; }
.auth-brand-name { font-weight: 700; letter-spacing: .03em; font-size: 15px; }
.auth-brand-name b { color: #FF8A3D; font-weight: 700; }
.auth-brand-sub { font-size: 12px; color: #8EA0B8; }
.auth-pitch { margin: auto 0; max-width: 480px; padding: 48px 0; }
.auth-pitch .eyebrow { color: #FF9F5E; }
.auth-pitch h1 { color: #fff; font-size: 38px; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; margin: 12px 0 14px; }
.auth-pitch p { color: #A9B6C8; font-size: 15px; line-height: 1.6; margin: 0; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #D5DEEA; }
.auth-points i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #FF9F5E; font-size: 12px; }
.auth-points strong { color: #fff; font-weight: 600; display: block; }
.auth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.auth-stat { background: rgba(11,21,36,.6); padding: 14px 16px; }
.auth-stat b { display: block; font-size: 20px; font-weight: 650; color: #fff; letter-spacing: -.02em; }
.auth-stat span { font-size: 12px; color: #8EA0B8; }
.auth-foot { font-size: 12px; color: #6B7C94; margin-top: 24px; }

/* Form panel */
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--surface); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card.wide { max-width: 560px; }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-mobile-brand img { width: 38px; height: 38px; border-radius: 9px; }
.auth-mobile-brand span { font-weight: 700; letter-spacing: .03em; color: var(--ink); }
.auth-mobile-brand b { color: var(--brand); }
.auth-card h2 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 6px; }
.auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.role-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: #EEF1F5; border-radius: 10px; margin-bottom: 22px; }
.role-switch button { height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.role-switch button i { font-size: 12px; color: var(--subtle); }
.role-switch button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.role-switch button.active i { color: var(--brand); }
.field { margin-bottom: 16px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; }
.input-wrap { position: relative; }
.input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--subtle); font-size: 13px; pointer-events: none; }
.input-wrap .form-control { padding-left: 38px; height: 44px; }
.input-wrap .pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--subtle); border-radius: 6px; cursor: pointer; }
.input-wrap .pwd-eye:hover { color: var(--ink); background: var(--surface-2); }
.btn-auth { width: 100%; height: 44px; border: 0; border-radius: 9px; background: var(--brand); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(226,87,11,.3); transition: background .15s; }
.btn-auth:hover { background: var(--brand-600); }
.auth-alt { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.auth-alt a { font-weight: 600; }
.auth-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--subtle); text-align: center; }
.form-section { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; }
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sponsor-hint { font-size: 12.5px; min-height: 18px; margin-top: 6px; }
.sponsor-hint.ok { color: var(--success-fg); }
.sponsor-hint.err { color: var(--danger-fg); }
.success-panel { text-align: center; padding: 8px 0; }
.success-panel .ok-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); font-size: 22px; }
.success-panel .mid { display: inline-block; margin: 12px 0 20px; padding: 10px 18px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 22px; font-weight: 650; letter-spacing: .06em; color: var(--ink); }

@media (max-width: 991px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-mobile-brand { display: flex; }
  .auth-main { align-items: flex-start; padding: 32px 20px; }
}

.auth-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 22px; }
.auth-back:hover { color: var(--ink); }
a.auth-brand:hover { color: #fff; opacity: .9; }

/* Official logo on the white sign-in card (phones) */
.auth-mobile-brand img.logo-full { width: auto; height: 46px; border-radius: 0; }