:root {
  --bg:        #e2e2e2;
  --light:     #ffffff;
  --dark:      #c1c1c1;
  --text:      #111111;
  --muted:     #777777;
  --neu-out:   5px 5px 10px var(--dark), -5px -5px 10px var(--light);
  --neu-in:    inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
}

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

html, body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
    -webkit-tap-highlight-color:transparent;

}

a { text-decoration: none; color: inherit; }
button { font-family: 'Poppins', sans-serif; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: 'Poppins', sans-serif; }

.auth-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.corner {
  position: fixed;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}
.top-left    { top: 0; left: 0; }
.top-right   { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right{ bottom: 0; right: 0; }

.star { position: absolute; filter: drop-shadow(4px 4px 6px var(--dark)) drop-shadow(-4px -4px 6px var(--light)); }
.star.big   { width: 90px; height: 90px; }
.star.small { width: 30px; height: 30px; }
.top-left  .big  { top: 60px; left: 40px; }
.top-left  .small{ top: 40px; left: 140px; }
.top-right .big  { top: 60px; right: 40px; }
.top-right .small{ top: 40px; right: 140px; }
.bottom-left  .big  { bottom: 80px; left: 40px; }
.bottom-left  .small{ bottom: 60px; left: 140px; }
.bottom-right .big  { bottom: 80px; right: 40px; }
.bottom-right .small{ bottom: 60px; right: 140px; }

.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.logo-circle-lg {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--neu-out);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.logo-circle-lg img { width: 70px; }

.auth-title { font-size: 26px; font-weight: 600; margin-bottom: 4px; text-align: center; }
.auth-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 32px; text-align: center; }

.input-wrap { position: relative; width: 100%; margin-bottom: 20px; }
.input-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #999; pointer-events: none;
}
.neu-input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border-radius: 12px;
  background: var(--bg);
  border: none; outline: none;
  font-size: 14px; color: var(--text);
  box-shadow: var(--neu-in);
  transition: box-shadow .2s;
}
.neu-input::placeholder { color: #aaa; }
.neu-input:focus { box-shadow: inset 4px 4px 10px var(--dark), inset -4px -4px 10px var(--light); }
.neu-input.error { box-shadow: inset 3px 3px 8px #e9a0a0, inset -3px -3px 8px var(--light); }

.neu-btn {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  background: var(--bg);
  box-shadow: var(--neu-out);
  font-size: 14px; font-weight: 600;
  color: var(--text);
  transition: box-shadow .15s, transform .1s;
  margin-bottom: 8px;
}
.neu-btn:active { box-shadow: var(--neu-in); transform: scale(0.99); }
.neu-btn.primary { background: var(--text); color: var(--bg); box-shadow: 4px 4px 8px var(--dark), -4px -4px 8px var(--light); }

.divider {
  display: flex; align-items: center;
  font-size: 13px; color: var(--muted);
  margin: 20px 0; width: 100%;
}
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #bbb; }
.divider::before { margin-right: 12px; }
.divider::after  { margin-left: 12px; }

.social-btn:active { box-shadow: var(--neu-in); }

.auth-link { font-size: 13px; color: var(--text); }
.auth-link a { font-weight: 700; }

.auth-footer {
  position: fixed; bottom: 24px; text-align: center;
  font-size: 11px; color: var(--muted); width: 100%; z-index: 1;
}
.auth-footer a { color: var(--muted); }

.form-error {
  color: #dc2626; font-size: 12px; margin-top: -14px;
  margin-bottom: 10px; padding-left: 4px;
}
.flash-success {
  background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0;
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; width: 100%;
}
.flash-error {
  background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; width: 100%;
}