/* ═══════════════════════════════════════════════════════
   TOOLZPEDIA — AUTH STYLES
   Modal, Toast, Avatar, Dropdown, Auth Pages
   Inherits CSS variables from main.css
═══════════════════════════════════════════════════════ */

/* ── Toast notification ───────────────────────────────── */
.tp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 99999;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body, system-ui, sans-serif);
  max-width: 380px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  pointer-events: none;
}
.tp-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.tp-toast--success { background: #00e599; color: #0a1a0f; }
.tp-toast--error   { background: #ff4444; color: #fff; }
.tp-toast--info    { background: var(--bg-card, #252728); color: var(--text-1, #fff); border: 1px solid var(--border, rgba(255,255,255,.1)); }

/* ── Modal overlay ────────────────────────────────────── */
.tp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tp-overlay-in 0.2s ease;
}
@keyframes tp-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal card ───────────────────────────────────────── */
.tp-modal {
  background: var(--bg-card, #252728);
  border: 1px solid var(--border-med, rgba(255,255,255,.16));
  border-radius: 20px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 420px;
  position: relative;
  animation: tp-modal-in 0.28s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--border, rgba(255,255,255,.1));
}
@keyframes tp-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: var(--bg-card-2, #2D2F30);
  color: var(--text-2, #D7DADE);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-modal-close:hover { background: var(--bg-hover, #3A3B3D); color: var(--text-1, #fff); }

.tp-modal-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.tp-modal-logo span {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-1, #fff);
  letter-spacing: -0.5px;
}

/* ── Tabs ─────────────────────────────────────────────── */
.tp-modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-card-2, #2D2F30);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}
.tp-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3, rgba(255,255,255,.5));
  cursor: pointer;
  transition: all 0.15s;
}
.tp-tab-btn.is-active {
  background: var(--bg-card, #252728);
  color: var(--text-1, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tp-tab-btn:hover:not(.is-active) { color: var(--text-2, #D7DADE); }

/* ── Google button ────────────────────────────────────── */
.tp-google-btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-med, rgba(255,255,255,.16));
  background: var(--bg-card-2, #2D2F30);
  color: var(--text-1, #fff);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-google-btn:hover { background: var(--bg-hover, #3A3B3D); border-color: var(--border-hi, rgba(36,34,247,.45)); }
.tp-google-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Divider ──────────────────────────────────────────── */
.tp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-3, rgba(255,255,255,.5));
  font-size: 12px;
}
.tp-divider::before, .tp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, rgba(255,255,255,.1));
}

/* ── Form fields ──────────────────────────────────────── */
.tp-field { margin-bottom: 14px; }
.tp-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3, rgba(255,255,255,.5));
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tp-field input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input, #1C1C1D);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 10px;
  color: var(--text-1, #fff);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.tp-field input:focus {
  outline: none;
  border-color: var(--brand, #2422F7);
  box-shadow: 0 0 0 3px rgba(36,34,247,0.15);
}
.tp-field input::placeholder { color: var(--text-3, rgba(255,255,255,.4)); }

.tp-input-wrap { position: relative; }
.tp-input-wrap input { padding-right: 42px; }
.tp-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tp-pw-toggle:hover { opacity: 1; }

/* ── Forgot password link ─────────────────────────────── */
.tp-forgot {
  background: none;
  border: none;
  color: var(--link, #7B79FF);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: inherit;
  display: block;
  text-align: right;
  width: 100%;
}
.tp-forgot:hover { color: var(--link-hover, #9D9CFF); text-decoration: underline; }

.tp-forgot-desc {
  font-size: 14px;
  color: var(--text-2, #D7DADE);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ── Submit button ────────────────────────────────────── */
.tp-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--grad, linear-gradient(135deg,#2422F7 0%,#1A18C9 100%));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(36,34,247,0.3);
  transition: all 0.15s;
  margin-top: 4px;
}
.tp-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(36,34,247,0.5); }
.tp-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.tp-switch-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-3, rgba(255,255,255,.5));
  margin: 14px 0 0;
}
.tp-switch-link {
  background: none;
  border: none;
  color: var(--link, #7B79FF);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
}
.tp-switch-link:hover { color: var(--link-hover, #9D9CFF); text-decoration: underline; }

/* ── Header auth buttons ──────────────────────────────── */
.tp-auth-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: all 0.15s;
}
.tp-register-btn {
  background: var(--bg-card, #252728);
  color: var(--text-2, #D7DADE);
  border: 1px solid var(--border-med, rgba(255,255,255,.16)) !important;
}
.tp-register-btn:hover {
  background: var(--bg-hover, #3A3B3D);
  color: var(--text-1, #fff);
}

/* ── Avatar / user menu ───────────────────────────────── */
.tp-user-menu-wrap { position: relative; }
.tp-avatar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #252728);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-2, #D7DADE);
}
.tp-avatar-btn:hover { border-color: var(--border-med, rgba(255,255,255,.16)); background: var(--bg-hover, #3A3B3D); }
.tp-avatar-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad, linear-gradient(135deg,#2422F7,#1A18C9));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.tp-avatar-chevron { color: var(--text-3, rgba(255,255,255,.5)); }

.tp-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--bg-card, #252728);
  border: 1px solid var(--border-med, rgba(255,255,255,.16));
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 500;
  animation: tp-drop-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes tp-drop-in {
  from { opacity: 0; transform: scale(0.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tp-user-info {
  padding: 14px 16px;
}
.tp-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1, #fff);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-user-email {
  font-size: 12px;
  color: var(--text-3, rgba(255,255,255,.5));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-dropdown-divider { height: 1px; background: var(--border, rgba(255,255,255,.1)); }
.tp-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-2, #D7DADE);
  text-decoration: none !important;
  font-family: inherit;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-weight: 500;
}
.tp-dropdown-item:hover { background: var(--bg-hover, #3A3B3D); color: var(--text-1, #fff); }
.tp-sign-out-btn:hover { color: var(--danger, #FF4444) !important; }

/* ── Auth pages (login.php / register.php) ────────────── */
.tp-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--bg-base, #1C1C1D);
}
.tp-auth-card {
  background: var(--bg-card, #252728);
  border: 1px solid var(--border-med, rgba(255,255,255,.16));
  border-radius: 24px;
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.tp-auth-card .tp-modal-logo { margin-bottom: 28px; }
.tp-auth-card .tp-modal-logo span { font-size: 22px; }
.tp-auth-card h1 {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-1, #fff);
  margin: 0 0 6px;
}
.tp-auth-card .tp-subtitle {
  color: var(--text-3, rgba(255,255,255,.5));
  font-size: 14px;
  margin: 0 0 28px;
}
.tp-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--link, #7B79FF);
  text-decoration: none;
  font-size: 13px;
  margin-top: 20px;
  font-weight: 500;
}
.tp-auth-back:hover { color: var(--link-hover, #9D9CFF); }

@media (max-width: 480px) {
  .tp-auth-card { padding: 28px 20px 24px; }
  .tp-modal { padding: 24px 18px 20px; }
  .tp-register-btn { display: none; }
}

/* ── Profile page ─────────────────────────────────────── */
.tp-profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: var(--bg-card, #252728);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 16px;
  margin-bottom: 24px;
}
.tp-profile-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--grad, linear-gradient(135deg,#2422F7,#1A18C9));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  flex-shrink: 0;
  border: 3px solid var(--brand, #2422F7);
  overflow: hidden;
}
.tp-profile-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-profile-info h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-1, #fff);
  margin: 0 0 4px;
}
.tp-profile-info .tp-profile-email {
  font-size: 14px;
  color: var(--text-3, rgba(255,255,255,.5));
}
.tp-profile-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--brand-dim, rgba(36,34,247,.14));
  color: var(--brand-lighter, #7B79FF);
  border: 1px solid var(--brand, #2422F7);
  margin-top: 8px;
}
.tp-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.tp-profile-stat {
  background: var(--bg-card, #252728);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.tp-profile-stat .stat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-1, #fff);
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
}
.tp-profile-stat .stat-label {
  font-size: 12px;
  color: var(--text-3, rgba(255,255,255,.5));
  margin-top: 4px;
}
.tp-profile-section {
  background: var(--bg-card, #252728);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}
.tp-profile-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1, #fff);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
}
.tp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  font-size: 14px;
}
.tp-info-row:last-child { border-bottom: none; }
.tp-info-label { color: var(--text-3, rgba(255,255,255,.5)); font-weight: 500; }
.tp-info-value { color: var(--text-1, #fff); font-weight: 600; }

#tp-profile-loading { text-align: center; padding: 60px 20px; color: var(--text-3, rgba(255,255,255,.5)); }
#tp-profile-content { display: none; }
#tp-profile-unauthenticated { display: none; text-align: center; padding: 60px 20px; }