/* LookCat - Auth Styles */

/* === AUTH SCREEN === */
#authScreen {
  justify-content: center; align-items: center; gap: 12px; padding: 20px 28px;
}
.auth-mascot { width: 100%; max-width: 420px; height: auto; }
.auth-subtitle { color: var(--text-soft); font-size: 15px; font-weight: 600; text-align: center; margin-bottom: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.auth-input, .form-input {
  width: 100%; padding: 15px 18px; border: 2px solid #E8E4DE; border-radius: 16px;
  font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 600;
  background: var(--card); color: var(--text); transition: all .2s;
}
.auth-input:focus, .form-input:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 4px var(--orange-glow); }
.auth-input::placeholder, .form-input::placeholder { color: #BBB; }
.switch-link {
  color: var(--green); font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; text-align: center; margin-top: 4px;
}
.switch-link:hover { text-decoration: underline; }

/* === PWA INSTALL BUTTON === */
.pwa-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; margin-top: 12px;
  background: linear-gradient(135deg, var(--green), var(--green-light));
  color: #fff; border: none; border-radius: 16px;
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all .2s; box-shadow: 0 4px 16px rgba(74,139,63,.3);
}
.pwa-install-btn:active { transform: scale(0.96); }
.pwa-install-icon { font-size: 20px; }

/* === OFFLINE BAR === */
.offline-bar {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, #FF7043, #E53935);
  color: #fff; text-align: center;
  padding: calc(var(--safe-top) + 6px) 16px 6px; font-size: 13px; font-weight: 700;
  font-family: 'Nunito', sans-serif; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  animation: slideDown .3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: none; } }

/* === CHILD PICKER === */
#childPickerScreen { align-items: center; gap: 20px; padding-top: 32px; }
.picker-title {
  font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900;
  color: var(--text); text-align: center;
}
.picker-subtitle { color: var(--text-soft); font-size: 14px; font-weight: 600; text-align: center; }
.child-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; }
.child-pick-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: var(--card); border-radius: var(--radius); border: 2.5px solid #E8E4DE;
  box-shadow: var(--shadow-soft); cursor: pointer; transition: all .2s;
}
.child-pick-card:active { transform: scale(0.97); border-color: var(--orange); }
.child-pick-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-light), var(--green-pale));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0; overflow: hidden;
}
.child-pick-avatar img { width: 100%; height: 100%; object-fit: cover; }
.child-pick-info { flex: 1; }
.child-pick-name { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; color: var(--text); }
.child-pick-meta { font-size: 12px; color: var(--text-soft); font-weight: 600; margin-top: 2px; }
.child-pick-meta .lang-flag { margin-right: 4px; }
.child-pick-arrow { color: #CCC; font-size: 20px; }

.add-child-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; border-radius: var(--radius); border: 2.5px dashed var(--green);
  color: var(--green); font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all .2s; background: transparent; width: 100%; max-width: 340px;
}
.add-child-link:active { transform: scale(0.97); background: var(--green-pale); }
.picker-logout {
  color: #CCC; font-size: 13px; font-weight: 700; cursor: pointer;
  background: none; border: none; margin-top: 8px;
}
.picker-logout:hover { color: #E53935; }

/* === ADD CHILD SCREEN === */
#addChildScreen { align-items: center; gap: 16px; padding-top: 32px; }
.add-child-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.form-label { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-soft); margin-bottom: -6px; }
.lang-picker { display: flex; gap: 10px; }
.lang-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 16px; border: 2.5px solid #E8E4DE;
  background: var(--card); cursor: pointer; transition: all .2s;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-soft);
}
.lang-option .flag { font-size: 28px; }
.lang-option.selected { border-color: var(--orange); background: var(--orange-light); color: var(--text); }
.lang-option:active { transform: scale(0.95); }
.back-link {
  color: var(--text-soft); font-size: 14px; font-weight: 700; cursor: pointer;
  background: none; border: none; margin-top: 4px;
}
.back-link:hover { color: var(--text); }

/* === AVATAR PICKER === */
.avatar-picker-label { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-soft); margin-bottom: -4px; }
.avatar-picker-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%;
}
.avatar-pick {
  width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer;
  outline: 4px solid transparent; outline-offset: 3px;
  transition: all .2s; position: relative;
}
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-pick.selected { outline-color: var(--orange); }
.avatar-pick:active { transform: scale(0.9); }
.avatar-pick.locked { opacity: .4; pointer-events: none; }
.avatar-pick.locked::after {
  content: attr(data-lock); position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px;
  font-family: 'Nunito', sans-serif; font-weight: 900; color: #fff;
  background: rgba(0,0,0,.45); border-radius: 50%; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Level-Up pair label */
.avatar-level-label {
  grid-column: 1 / -1; text-align: center; font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 800; color: var(--orange); margin: 6px 0 -4px;
}
.avatar-level-label.locked { color: var(--text-soft); }

/* === FORGOT PASSWORD OVERLAY === */
.forgot-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.forgot-overlay.open { display: flex; }
.forgot-modal {
  background: var(--card); border-radius: var(--radius-lg); padding: 28px 24px;
  max-width: 340px; width: 100%; text-align: center;
  animation: screenIn .3s cubic-bezier(.22,1,.36,1);
}
.forgot-title {
  font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 900;
  color: var(--text); margin-bottom: 6px;
}
.forgot-desc {
  font-size: 14px; color: var(--text-soft); font-weight: 600; margin-bottom: 16px; line-height: 1.4;
}
.forgot-form { display: flex; flex-direction: column; gap: 10px; }
.forgot-code-input {
  width: 100%; padding: 16px 18px; border: 2px solid #E8E4DE; border-radius: 16px;
  font-family: monospace; font-size: 24px; font-weight: 700; text-align: center;
  letter-spacing: 6px; background: var(--card); color: var(--text); transition: all .2s;
}
.forgot-code-input:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 4px var(--orange-glow); }
.forgot-close {
  margin-top: 12px; padding: 10px 24px; border: none; border-radius: 50px;
  background: none; color: var(--text-soft); font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.forgot-close:hover { color: var(--text); }
.forgot-success { color: var(--green); font-size: 14px; font-weight: 700; margin-top: 8px; }
.forgot-error { color: #E53935; font-size: 14px; font-weight: 700; margin-top: 8px; }