/* Inline Auth Forms */
.mascot-panel:has(.auth-inline) { display: block; position: relative; overflow: hidden; }
.auth-inline { 
  position: relative; 
  padding: 20px; 
  min-height: 180px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: linear-gradient(135deg, var(--glass) 0%, color-mix(in srgb, var(--c-cream) 15%, white) 100%);
}
.auth-inline .mascot { 
  position: absolute; 
  right: -20px; 
  bottom: -10px; 
  opacity: 0.15; 
  pointer-events: none;
  transform: rotate(-8deg);
}
.auth-inline .mascot-img { width: 160px; height: auto; }
.auth-inline .auth-form { 
  position: relative; 
  z-index: 1; 
  width: 100%; 
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-inline .auth-title { 
  font-family: var(--font-display); 
  font-size: 22px; 
  font-weight: 650; 
  margin: 0 0 6px; 
  color: var(--ink); 
  text-align: center;
}
.auth-inline .form-group.compact { margin-bottom: 0; }
.auth-inline .form-group.compact input,
.auth-inline .form-group.compact select { 
  width: 100%; 
  padding: 12px 14px; 
  border: 1px solid var(--stroke); 
  border-radius: 12px; 
  font-size: 14px; 
  background: var(--c-white); 
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-inline .form-group.compact input::placeholder { color: var(--muted); }
.auth-inline .form-group.compact input:focus,
.auth-inline .form-group.compact select:focus { 
  outline: none; 
  border-color: var(--c-caramel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-caramel) 15%, transparent);
}
.auth-inline .auth-error { color: var(--c-error); font-size: 13px; margin: 4px 0; padding: 8px 10px; background: color-mix(in srgb, var(--c-error) 10%, transparent); border-radius: 8px; }
.auth-inline .auth-success { color: var(--c-success); font-size: 13px; margin: 4px 0; padding: 8px 10px; background: color-mix(in srgb, var(--c-success) 10%, transparent); border-radius: 8px; }
.auth-inline .auth-links { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-inline .auth-links a { color: var(--c-caramel); text-decoration: none; font-weight: 600; }
.auth-inline .auth-links a:hover { text-decoration: underline; }
.auth-inline .btn-wide { width: 100%; padding: 12px 20px; font-size: 14px; font-weight: 700; border-radius: 12px; }

@media (max-width: 500px) {
  .auth-inline .mascot { right: -30px; bottom: -30px; }
  .auth-inline .mascot-img { width: 160px; }
}