html, body { height: 100%; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; display: flex; min-height: 100vh; background: #f0efeb; width: 100%; }

/* ── Image panel ──────────────────────────────────────────────────────────── */
.image-panel { flex: 1; position: relative; overflow: hidden; display: none; }
.image-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%);
}
.image-quote { position: absolute; bottom: 40px; left: 40px; right: 40px; color: #fff; }
.image-quote p {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.35rem; line-height: 1.6; margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.image-quote span { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; opacity: .75; }

/* ── Form panel ──────────────────────────────────────────────────────────── */
.form-panel {
  width: 100%; max-width: 460px; background: #f0efeb;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; flex-shrink: 0; box-sizing: border-box;
}
.form-inner { width: 100%; max-width: 340px; }
.brand { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.brand-sub { font-size: 0.7rem; color: #aaa; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 40px; }
.brand-emblem { width: 140px; height: auto; display: block; margin: 0 auto 36px; }
.welcome { font-size: 1.05rem; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
.welcome-sub { font-size: 0.82rem; color: #999; margin-bottom: 30px; }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #999; margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  border: 1.5px solid #e4e3df; background: #fff;
  font-size: 0.9rem; color: #1a1a1a; font-family: 'Inter', sans-serif; outline: none;
  transition: border-color .15s; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  box-sizing: border-box;
}
.field input:focus { border-color: #aaa; }
.btn-login {
  width: 100%; padding: 14px; margin-top: 10px; border-radius: 12px; border: none;
  background: #b0afab; color: #1a1a1a; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; letter-spacing: .3px;
}
.btn-login:hover { background: #a0a09b; }
.btn-login:disabled { opacity: .6; cursor: not-allowed; }
.error-msg {
  color: #dc2626; font-size: 0.8rem; margin-top: 14px;
  text-align: center; display: none; background: #fff5f5;
  padding: 10px; border-radius: 8px; border: 1px solid #fecaca;
}

/* ── Password eye toggle ──────────────────────────────────────────────────── */
.password-wrap { position: relative; width: 100%; box-sizing: border-box; }
.password-wrap input { padding-right: 44px; }
.eye-btn {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #bbb;
  font-size: 0.88rem; padding: 0; line-height: 1; transition: color .15s;
}
.eye-btn:hover { color: #666; }
.footer-note { margin-top: 32px; font-size: 0.72rem; color: #ccc; text-align: center; }

@media (min-width: 768px) {
  .image-panel { display: block; }
  .form-panel { padding: 48px 52px; }
}