/* ============================================================
   MicroHub — Login / Signup (additive, brand-consistent)
   ============================================================ */
.mh-auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - var(--nav-h)); }

/* ---------- left panel ---------- */
.mh-auth-aside {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 80px 64px; color: #fff;
  background: linear-gradient(140deg, #061a2c 0%, #0b2a45 42%, #0877c9 100%);
}
.mh-auth-aside::before,
.mh-auth-aside::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none;
}
.mh-auth-aside::before { width: 560px; height: 560px; right: -220px; top: -180px; background: radial-gradient(circle, rgba(72,169,248,.5), transparent 70%); }
.mh-auth-aside::after { width: 420px; height: 420px; left: -180px; bottom: -160px; background: radial-gradient(circle, rgba(8,119,201,.55), transparent 70%); }
.mh-auth-aside > * { position: relative; z-index: 2; }
.mh-auth-aside .mhb-eyebrow { color: #7cc4ff; }
.mh-auth-aside h1 { font-size: clamp(34px, 3.8vw, 50px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.08; }
.mh-auth-aside p { margin-top: 18px; max-width: 420px; font-size: 16px; color: rgba(255,255,255,.78); }
.mh-auth-illus { margin-top: 44px; max-width: 460px; }
.mh-auth-illus svg { width: 100%; height: auto; }
.mh-auth-points { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.mh-auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.86); }
.mh-auth-points i { color: #7cc4ff; }

/* ---------- right panel ---------- */
.mh-auth-main {
  display: grid; place-items: center; padding: 60px 30px;
  background: radial-gradient(ellipse at 70% 0%, #f0f7ff 0%, #ffffff 65%);
}
.mh-auth-card {
  width: 100%; max-width: 460px; padding: 44px 40px; border-radius: 24px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 30px 70px -30px rgba(8,119,201,.45);
  animation: mhAuthUp .7s cubic-bezier(.22,1,.36,1) both;
}
.mh-auth-card.wide { max-width: 560px; }
@keyframes mhAuthUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mh-auth-logo { height: 34px; width: auto; margin-bottom: 26px; }
.mh-auth-card h2 { font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.mh-auth-card .sub { margin-top: 8px; font-size: 14px; color: var(--text-muted); }

.mh-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.mh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mh-field { display: flex; flex-direction: column; gap: 7px; }
.mh-field label { font-size: 12.5px; font-weight: 700; color: var(--text-main); letter-spacing: .2px; }
.mh-input-wrap { position: relative; }
.mh-input-wrap > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: #9aa4b2; transition: color .3s;
}
.mh-field input {
  width: 100%; padding: 14px 16px 14px 42px; font-family: inherit; font-size: 14.5px; color: var(--text-main);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; outline: none;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.mh-field input::placeholder { color: #a8b1bd; }
.mh-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8,119,201,.12); }
.mh-field input:focus + i, .mh-input-wrap:focus-within > i { color: var(--primary); }
.mh-field.invalid input { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.1); }
.mh-error { font-size: 12px; font-weight: 600; color: #e11d48; min-height: 0; }
.mh-toggle-pass {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  padding: 6px 8px; color: var(--text-muted); font-size: 13px;
}
.mh-toggle-pass:hover { color: var(--primary); }

.mh-strength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.mh-strength-bar { flex: 1; height: 5px; border-radius: 999px; background: #e8edf3; overflow: hidden; }
.mh-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .4s ease, background .4s ease; }
.mh-strength small { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }

.mh-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.mh-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.mh-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex: 0 0 16px; }
.mh-link { font-weight: 700; color: var(--primary); }
.mh-link:hover { color: var(--primary-dark); text-decoration: underline; }

.mh-submit {
  width: 100%; padding: 15px 22px; border-radius: 12px; font-family: inherit;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.mh-submit:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(8,119,201,.85); }
.mh-submit span { transition: transform .3s; }
.mh-submit:hover span { transform: translateX(4px); }
.mh-submit[disabled] { opacity: .65; pointer-events: none; }

.mh-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.mh-or::before, .mh-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

.mh-oauth { display: flex; flex-direction: column; gap: 12px; }
.mh-oauth button {
  width: 100%; padding: 13px 18px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-main);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.mh-oauth button:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mh-oauth svg { width: 17px; height: 17px; }

.mh-auth-foot { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

.mh-success {
  display: none; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: #e7f8ef; border: 1px solid #b6e7cd; color: #0f7a4a; font-size: 13.5px; font-weight: 700;
  margin-bottom: 16px;
}
.mh-success.is-on { display: flex; animation: mhAuthUp .5s cubic-bezier(.22,1,.36,1) both; }

.mh-alert-error {
  display: none; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; font-size: 13.5px; font-weight: 600;
  margin-bottom: 16px;
}
.mh-alert-error.is-on { display: flex; animation: mhAuthUp .5s cubic-bezier(.22,1,.36,1) both; }

@media (max-width: 980px) {
  .mh-auth { grid-template-columns: 1fr; min-height: 0; }
  .mh-auth-aside { padding: 60px 30px; text-align: left; }
  .mh-auth-illus { display: none; }
  .mh-auth-main { padding: 44px 20px 70px; }
}
@media (max-width: 520px) {
  .mh-auth-card { padding: 32px 22px; border-radius: 20px; }
  .mh-row { grid-template-columns: 1fr; }
}