*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f3ebe1;
  --card:     #ffffff;
  --border:   #e8d9c8;
  --border2:  #d6c5b0;
  --accent:   #b07828;
  --accent-h: #8f6020;
  --text:     #1e1610;
  --muted:    #a8937e;
  --dim:      #7a6a5c;
  --error:    #b83232;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(176,120,40,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(37,99,168,0.04) 0%, transparent 60%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 42px 38px 36px;
  animation: up 0.35s cubic-bezier(.34,1.2,.64,1);
  box-shadow: 0 8px 40px rgba(60,40,20,0.12), 0 2px 8px rgba(60,40,20,0.06);
}

@keyframes up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}

.brand-h {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 4.5px;
  color: var(--accent);
}

.brand-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 3px 8px;
}

.login-title {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
  color: var(--text);
}

.login-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 34px;
}

.field { margin-bottom: 18px; }

label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  background: #faf6f1;
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
  border-color: rgba(176,120,40,0.5);
  box-shadow: 0 0 0 3px rgba(176,120,40,0.08);
}

input::placeholder { color: #c8b9a6; }

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 46px; }

#togglePwd {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
#togglePwd:hover { color: var(--dim); }

.error-msg {
  background: rgba(184,50,50,0.06);
  border: 1px solid rgba(184,50,50,0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--error);
  margin-bottom: 16px;
}

.btn-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.btn-submit:hover  { background: var(--accent-h); }
.btn-submit:active { transform: scale(0.99); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.spin {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 420px) {
  .login-card { padding: 32px 22px 28px; border-radius: 14px; }
  .login-title { font-size: 20px; }
}