/* ── BASE ── */
html, body { height: 100vh; overflow: hidden; }

/* ── INPUT FIELD ── */
.input-field {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c4b9af;
  background: transparent;
  padding: 7px 36px 9px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #2a1f14;
  outline: none;
  background-image: linear-gradient(#2a1f14, #2a1f14);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease;
}
.input-field::placeholder { color: #b0a49a; font-weight: 300; }
.input-field:focus {
  border-bottom-color: transparent;
  background-size: 100% 1px;
}

/* ── HIDE BROWSER EYE ── */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* ── LEFT PANEL ── */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── RIGHT PANEL ── */
@keyframes scaleUp {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ── ELEMENTS ── */
@keyframes springIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

.left-panel {
  animation: slideInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.right-panel {
  animation: scaleUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
  opacity: 0;
}

.anim-1 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; opacity: 0; }
.anim-2 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards; opacity: 0; }
.anim-3 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; opacity: 0; }
.anim-4 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; opacity: 0; }
.anim-5 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards; opacity: 0; }
.anim-6 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards; opacity: 0; }
.anim-7 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; opacity: 0; }
.anim-8 { animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards; opacity: 0; }

/* ── TOAST ── */
@keyframes toastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-100%) scale(0.95); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(6px)   scale(1.01); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
@keyframes toastOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);    }
  100% { opacity: 0; transform: translateX(-50%) translateY(-120%) scale(0.95); }
}
@keyframes progressShrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}
.toast-success {
  background: #0f2a1a;
  border-color: rgba(255,255,255,0.07);
}
 
.toast-dot-success {
  background: #3aaa72;
  box-shadow: 0 0 6px rgba(58, 170, 114, 0.6);
  animation: pulseDot 1.8s ease-in-out infinite;
}
 
.toast-progress-success {
  background: linear-gradient(90deg, #3aaa72, #1a6644);
}
 
.toast {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 18px;
  background: #1a1210;
  min-width: 300px;
  max-width: 400px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 60px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.2);
  animation: toastIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: none;
}

.toast.hide {
  animation: toastOut 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e05c5c;
  animation: pulseDot 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(224, 92, 92, 0.6);
}

.toast-msg {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: #f0ebe5;
  line-height: 1.5;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(240,235,229,0.3);
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.toast-close:hover { color: #f0ebe5; }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #e05c5c, #c94040);
  width: 100%;
  transform-origin: left;
  animation: progressShrink 3s linear forwards;
}